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

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.

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)

# 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:

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:

import "@resulticks/trustsignal/style.css";

That's it—drop in Dashboard and toggle to CreateTemplate when the user clicks create. No routing library needed!