@resulticks/trustsignal-wa-hsm 0.6.0 → 0.7.0

package/README.md

@@ -1,94 +1,118 @@
-# 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-router-dom
-```
-
-> react, react-dom and react-router-dom are peer dependencies and must be installed in the host app.
-
-## Quick Start (Routing Example)
-
-Add these routes so only one screen renders at a time. The Dashboard should navigate to `/create` when the "Create Template" button is clicked.
-
-```tsx
-import { BrowserRouter, Routes, Route, useNavigate, Navigate } from "react-router-dom";
-import { TrustSignalProvider, Dashboard, CreateTemplate } from "@resulticks/trustsignal";
-import "@resulticks/trustsignal/style.css";
-
-function AppRoutes() {
-  const navigate = useNavigate();
-  return (
-    <Routes>
-      <Route path="/" element={<Dashboard />} />
-
-      <Route path="/create" element={<CreateTemplate onCancel={() => navigate("/")} />} />
-
-      <Route path="*" element={<Navigate to="/" replace />} />
-    </Routes>
-  );
-}
-
-export default function App() {
-  return (
-    <BrowserRouter>
-      <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),
-        }}
-      >
-        <AppRoutes />
-      </TrustSignalProvider>
-    </BrowserRouter>
-  );
-}
-```
-
-### 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.
-- If your Dashboard navigates to a different path for creation, add a matching `<Route>` that renders `<CreateTemplate />` for that path.
-- You can supply a custom `onCancel` to control navigation from the builder.
-
-## 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 route to `CreateTemplate` when the user clicks create.
+# 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";
+import "@resulticks/trustsignal/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!