JSPM – @bigdigital/kiosk-content-sdk@0.3.8

Package Exports

@bigdigital/kiosk-content-sdk
@bigdigital/kiosk-content-sdk/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@bigdigital/kiosk-content-sdk) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

npm install @bigdigital/kiosk-content-sdk


## Basic Usage

```typescript
import { useKioskContent } from '@bigdigital/kiosk-content-sdk';

function App() {
  const config = {
    projectId: process.env.VITE_FIREBASE_PROJECT_ID,
    apiKey: process.env.VITE_FIREBASE_API_KEY,
    offlineSupport: true, // Enable offline support
    cacheStrategy: "local", // Use local storage for caching
    syncInterval: 300000, // Sync every 5 minutes
    cacheMaxAge: 600000 // Cache expires after 10 minutes
  };

  const { content, loading, error, isSyncing, isOnline } = useKioskContent(config);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      {isSyncing && <div>Syncing...</div>}
      {content.map(item => (
        <div key={item.id}>
          <h2>{item.title}</h2>
          <p>{item.description}</p>
        </div>
      ))}
    </div>
  );
}

Components

OfflineIndicator

A customizable component to display the current online/offline status:

import { useKioskContent, OfflineIndicator } from '@bigdigital/kiosk-content-sdk';

function App() {
  const { isOnline } = useKioskContent(config);

  return (
    <div>
      <OfflineIndicator 
        isOnline={isOnline}
        onlineText="Connected" // Optional custom text
        offlineText="Working Offline" // Optional custom text
        className="my-custom-class" // Optional CSS class
        style={{ position: 'fixed', top: '1rem', right: '1rem' }} // Optional inline styles
      />
      {/* Rest of your app */}
    </div>
  );
}

Template Management

Using Template Content

import { useTemplateContent } from '@bigdigital/kiosk-content-sdk';

function TemplateContent({ templateId }) {
  const { content, template, loading, error } = useTemplateContent(config, templateId);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <h2>{template?.name}</h2>
      {content.map(item => (
        <div key={item.id}>
          {template?.fields.map(field => (
            <div key={field.name}>
              <label>{field.label}</label>
              <div>{item.templateValues?.[field.name]}</div>
            </div>
          ))}
        </div>
      ))}
    </div>
  );
}

Offline Support

import { useOfflineContent } from '@bigdigital/kiosk-content-sdk';

function OfflineApp() {
  const { content, syncStatus, lastSynced, error } = useOfflineContent({
    projectId: "your-project-id",
    apiKey: "your-api-key",
    offlineSupport: true,
    cacheStrategy: "local",
    syncInterval: 300000,
    cacheMaxAge: 600000 // Cache expires after 10 minutes
  });

  return (
    <div>
      <div>Sync Status: {syncStatus}</div>
      {lastSynced && <div>Last Synced: {new Date(lastSynced).toLocaleString()}</div>}
      {error && <div>Error: {error.message}</div>}
      {/* Render content */}
    </div>
  );
}

Manual Sync Control

import { useContentSync } from '@bigdigital/kiosk-content-sdk';

function SyncControl() {
  const { sync, syncStatus, progress, error } = useContentSync(config);

  return (
    <div>
      <button 
        onClick={() => sync({ 
          onError: (err) => console.error(err),
          retryAttempts: 3
        })}
        disabled={syncStatus === 'syncing'}
      >
        Sync Now
      </button>
      {syncStatus === 'syncing' && <div>Progress: {progress}%</div>}
      {error && <div>Error: {error.message}</div>}
    </div>
  );
}

Configuration Options

KioskConfig

interface KioskConfig {
  projectId: string;
  apiKey: string;
  authDomain?: string;
  offlineSupport?: boolean;
  cacheStrategy?: "memory" | "local" | "none";
  syncInterval?: number; // in milliseconds
  cacheMaxAge?: number; // in milliseconds, defaults to 5 minutes
}

Cache Options

interface CacheOptions {
  ttl?: number;
  strategy?: "memory" | "local" | "none";
  validateOnLoad?: boolean;
}

Type Safety

The SDK provides comprehensive TypeScript support:

import type { 
  Content, 
  Template, 
  TemplateField, 
  KioskConfig 
} from '@bigdigital/kiosk-content-sdk';