@prioticket/design-system-react

Prioticket Design System React

Official React bindings for the @prioticket/design-system-web component library. These wrappers are auto-generated from the Web Component manifest and expose each element as a typed React component via @lit/react.

Installation

npm install @prioticket/design-system-react @prioticket/design-system-web

The React package depends on the core web component bundle. Most projects also import one of the distributed theme stylesheets:

import '@prioticket/design-system-web/theme-with-fonts.css';
// or: import '@prioticket/design-system-web/theme-only.css';

Quick Start

import { useEffect } from 'react';
import { PdButton, PdDialog } from '@prioticket/design-system-react';
import { initialize } from '@prioticket/design-system-web/theming';
import '@prioticket/design-system-web/theme-with-fonts.css';

export function App() {
  useEffect(() => {
    initialize({
      theme: {
        colorPrimary: '#ff6600',
        colorOnPrimary: '#ffffff'
      }
    });
  }, []);

  return (
    <PdDialog onPrimaryAction={(event) => console.log(event.detail)}>
      <PdButton slot="primary-action">Continue</PdButton>
    </PdDialog>
  );
}

All wrappers render a custom element under the hood, so slots, attributes, and properties behave exactly like the base web component.

Event Handling

Events emitted by the web components are exposed as camel-cased React props that start with on. For example, the pd-dialog events primary-action and secondary-action become onPrimaryAction and onSecondaryAction. Each handler receives the original CustomEvent, preserving its detail payload.

Theming Utilities

The core package exposes helpers under @prioticket/design-system-web/theming. Use initialize to apply a theme at app start or applyTheme to update tokens later. The helpers are framework agnostic and can be called from any React effect or data loader.

import { initialize } from '@prioticket/design-system-web/theming';

await initialize({ theme: { colorPrimary: '#4caf50' } });

TypeScript Support

Every wrapper re-exports a *Element type that maps to the underlying custom element class. This is useful when grabbing refs:

import { useRef } from 'react';
import { PdTextField, PdTextFieldElement } from '@prioticket/design-system-react';

const ref = useRef<PdTextFieldElement>(null);

Component Reference

The React entry point (@prioticket/design-system-react) exports all Prioticket components. Refer to COMPONENT-DOCUMENTATION.md in the root of the design system repository for behavior, slots, and properties—they apply equally to the React wrappers.

SSR & Hydration

The wrappers are thin @lit/react adapters and support server-side rendering. Renderers will output the corresponding custom element tags; hydration happens client-side once the browser upgrades the elements.

Troubleshooting

• Ensure the core package is loaded exactly once (e.g. do not register components via multiple versions of the bundle).
• Import the CSS theme before rendering components to avoid flashes of unstyled content.
• If you tree-shake aggressively, keep the side-effect flag for @prioticket/design-system-react enabled so the custom elements are defined.