RocketPOS Templates

A standalone UI library containing customizable Webstore template components for the RocketPOS ecosystem.

Installation

npm install @rocketpos/templates

Required CSS Import

To apply the structural and visual styling to the templates, you must import the generated CSS file exactly once at the root of your application (e.g., in main.tsx or App.tsx).

import '@rocketpos/templates/dist/index.css';

[!WARNING] If you omit this stylesheet import, the templates will render as completely unstyled, broken HTML. The JavaScript bundle does not automatically inject CSS into the DOM.

Usage Example

import React from 'react';
import '@rocketpos/templates/dist/index.css';
import { 
  HarvestBundle, 
  harvestDefaultConfig 
} from '@rocketpos/templates';

export default function WebstorePreview() {
  const TemplateComponent = HarvestBundle.Component;

  return (
    <div style={{ width: '100vw', height: '100vh', overflowY: 'auto' }}>
      <TemplateComponent config={harvestDefaultConfig} />
    </div>
  );
}

Public Exports

This package exposes a minimal public API. Consumers should exclusively import the following verified symbols:

• HarvestBundle - Contains the template component, schema, editor mappings, and metadata.
• harvestSchema - The core configuration shape for the Harvest template.
• harvestDefaultConfig - A stable, pre-populated default configuration object.
• resetThemeToDefault - A utility function that resets theme settings while intelligently preserving core consumer identity settings (locations, hours, links).
• TemplateRegistry - A global registry object tracking all available templates.
• Core Types: HarvestConfig, TemplateSchema, InferConfig, and base schema field types (TextField, RepeaterField, etc.) needed for type-safe editor form generation.

(Note: Internal utilities and abstractions are not publicly exported to guarantee API stability).

Publishing

When pushing updates to the package registry, run the following pipeline:

# 1. Compile the ESM/CJS bundles, CSS, and TypeScript declarations
npm run build

# 2. Package into a local tarball for validation (optional)
npm pack

# 3. Publish to the private NPM registry (e.g., GitHub Packages / Azure)
npm publish

[!NOTE] Due to proprietary design systems, this package is intended for a private registry (such as GitHub Packages or Azure Artifacts). Ensure you have configured your .npmrc scope and authenticated using npm login --scope=@rocketpos before publishing.

Asset Management Notes

• External Hosting: Static template assets (PNGs, JPGs) are hosted externally and are not bundled within this NPM package. This ensures the package footprint remains extremely light.
• Asset Manifest: All asset URLs are dynamically resolved through the template's internal HarvestAssets manifest. Future CDN migrations only require a single manifest update.

Versioning Notes

Current Release: 0.1.0

This package strictly follows semantic versioning (SemVer).

• Minor / Patch releases: Adding new sections to templates, bug fixes, CSS tweaks.
• Major releases (e.g., 1.0.0): Should be reserved for fundamentally breaking API changes to the Core Schema engine or dropping React backward compatibility. Future template additions (e.g., CafeBundle) should be released via minor semver bumps.