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

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 login


2. Install the package:
```bash
npm install @bigdigital/kiosk-content-sdk

Usage

Basic Content Usage

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
  };

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

  if (loading) return <div>Loading...</div>;

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

Working with Templates

Creating a Template

Templates use human-readable field names as identifiers. For example:

const template = {
  name: "Product Template",
  description: "Template for product listings",
  type: "product",
  fields: [
    {
      name: "product_name",        // This name is used as the identifier
      type: "text",
      label: "Product Name",
      required: true
    },
    {
      name: "price",              // Field names should be unique within a template
      type: "number",
      label: "Price",
      required: true
    }
  ]
};

Fetching Templates

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

function TemplateList() {
  const config = {
    projectId: process.env.VITE_FIREBASE_PROJECT_ID,
    apiKey: process.env.VITE_FIREBASE_API_KEY
  };

  const { templates, loading } = useTemplates(config);

  if (loading) return <div>Loading...</div>;

  return (
    <div>
      {templates.map(template => (
        <div key={template.id}>
          <h2>{template.name}</h2>
          <p>{template.description}</p>
          <div>
            <h3>Fields:</h3>
            {template.fields.map(field => (
              <div key={field.name}>
                <p>Name: {field.name}</p>
                <p>Label: {field.label}</p>
                <p>Type: {field.type}</p>
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}

Using Content with Templates

When working with templated content, field values are stored using the field names as keys:

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

function ContentViewer({ contentId }) {
  const config = {
    projectId: process.env.VITE_FIREBASE_PROJECT_ID,
    apiKey: process.env.VITE_FIREBASE_API_KEY
  };

  const { content, template, loading } = useContentWithTemplate(config, contentId);

  if (loading) return <div>Loading...</div>;

  if (!content) return <div>Content not found</div>;

  return (
    <div>
      <h1>{content.title}</h1>
      {template && (
        <div>
          {template.fields.map(field => (
            <div key={field.name}>
              <h3>{field.label}</h3>
              {/* Access values using field.name */}
              <p>{content.templateValues?.[field.name]}</p>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

Development

To build locally:

npm install
npm run build