npm package: @resulticks/trustsignal-wa-hsm
Description: This package exposes two React components that you can drop into your app:
Latest version: 0.65.0

# TrustSignal WebSDK (Library)

This package exposes two React components that you can drop into your app:

- `Dashboard`: list and entry point
- `CreateTemplate`: the template builder screen
- `TrustSignalProvider`: wraps your app and provides the API key/config

The library ships its own compiled styles, so you only need to import the CSS once.

## Installation

```bash
npm i @resulticks/trustsignal react react-dom
```

> react and react-dom are peer dependencies and must be installed in the host app.

## Quick Start (State-Based Toggling - No Routing Required)

The components can be toggled using React state without requiring any routing library. Simply manage the view state and pass callbacks to handle navigation between components.

```tsx
import { useState } from "react";
import { TrustSignalProvider, Dashboard, CreateTemplate } from "@resulticks/trustsignal-wa-hsm";
import "@resulticks/trustsignal-wa-hsm/style.css";

type View = 'dashboard' | 'create' | 'edit';

export default function App() {
  const [currentView, setCurrentView] = useState<View>('dashboard');
  const [editId, setEditId] = useState<string | null>(null);

  const handleCreateTemplate = () => {
    setEditId(null);
    setCurrentView('create');
  };

  const handleEditTemplate = (id: string) => {
    setEditId(id);
    setCurrentView('edit');
  };

  const handleBackToDashboard = () => {
    setCurrentView('dashboard');
    setEditId(null);
  };

  return (
    <TrustSignalProvider
      apiKey="YOUR_API_KEY"
      pConfig={{
        baseUrl: process.env.RESUL_BASE_URL,
        departmentId: Number(process.env.RESUL_DEPARTMENT_ID),
        clientId: Number(process.env.RESUL_CLIENT_ID),
        createdBy: Number(process.env.RESUL_CREATED_BY),
        userId: Number(process.env.RESUL_USER_ID),
      }}
    >
      {currentView === 'dashboard' ? (
        <Dashboard
          onCreateTemplate={handleCreateTemplate}
          onEditTemplate={handleEditTemplate}
        />
      ) : (
        <CreateTemplate
          editId={editId || undefined}
          onCancel={handleBackToDashboard}
        />
      )}
    </TrustSignalProvider>
  );
}
```

### Component Props

#### Dashboard
- `onCreateTemplate?: () => void` - Callback when user clicks to create a new template
- `onEditTemplate?: (id: string) => void` - Callback when user clicks to edit a template (receives template ID)

#### CreateTemplate
- `editId?: string` - Optional template ID to edit. If provided, the component will load and edit that template.
- `onCancel?: () => void` - Callback when user clicks the Back button to return to dashboard

### Notes
- Import the stylesheet once: `import "@resulticks/trustsignal/style.css";`
- The provider writes the `apiKey` (and optional `pConfig` metadata) to `localStorage('account')` so all API calls work without additional wiring.
- Pass `pConfig` if you need to override meta identifiers (`departmentId`, `clientId`, `createdBy`, `userId`) and/or `baseUrl` for the Resul API submission; updates propagate automatically.
- Consider sourcing `pConfig` values from env variables (as in the example) to simplify environment-specific deployments.
- **No routing required**: The components work with simple state toggling, making integration easier without needing react-router-dom.

## Local Development / Building the Library (inside this repo)

```bash
# Build the library bundles to dist/
npm run build:lib

# (optional) link into another project while developing
# in this repo
npm pack # or use a local link strategy
# then in your host project
npm i ../path/to/@resulticks/trustsignal-*.tgz
```

The library exports:

```ts
import { TrustSignalProvider, Dashboard, CreateTemplate } from "@resulticks/trustsignal";
```

CSS is automatically included via the package metadata, but you can also explicitly import it early in your app entry to ensure styles load before first paint:

```ts
import "@resulticks/trustsignal/style.css";
```

That's it—drop in `Dashboard` and toggle to `CreateTemplate` when the user clicks create. No routing library needed!