@attabot/complaint-app 1.0.10 → 1.0.11

package/README.md

@@ -1,159 +1,159 @@
-# @attabot/complaint-app
-
-Complaint Management UI as an npm package. Built with **atomic design** (atoms → molecules → organisms) so the parent app can mount a ready dashboard that uses the **parent’s auth token and API base URL**.
-
-## Installation
-
-```bash
-npm install @attabot/complaint-app
-```
-
-Peer dependencies:
-
-```bash
-npm install react react-dom react-redux @reduxjs/toolkit
-```
-
-## Usage
-
-```jsx
-import ComplaintApp from '@attabot/complaint-app';
-import '@attabot/complaint-app/style.css';
-import brandTheme from './brandTheme.json'; // static theme file
-
-function App() {
-  const [darkMode, setDarkMode] = useState(false); // owned by parent
-
-  return (
-    <ComplaintApp
-      apiUrl="https://your-api.example.com"
-      authToken={sessionToken}
-      theme={brandTheme}
-      darkMode={darkMode}
-      systemsEndpoint="/api/v1/complaint-systems"
-      onCreateForm={() => navigate('/forms/new')}
-      onConfigure={(system) => navigate(`/systems/${system.id}`)}
-    />
-  );
-}
-```
-
-### Theme & dark mode (parent-controlled)
-
-Pass a static theme file (JSON/JS) and toggle `darkMode` from the parent. The package applies CSS variables across the whole UI.
-
-```jsx
-import brandTheme from './brandTheme.json';
-
-<ComplaintApp theme={brandTheme} darkMode={isDark} />
-```
-
-Theme file shape:
-
-```json
-{
-  "light": { "colors": { "primary": "#2D64B8", "background": "#F5F5F5" } },
-  "dark":  { "colors": { "primary": "#5B8DEF", "background": "#0F1115" } }
-}
-```
-
-Or pass flat overrides (merged into both modes):
-
-```jsx
-<ComplaintApp theme={{ colors: { primary: '#0F766E' } }} darkMode={false} />
-```
-
-Helpers / defaults are exported: `lightTheme`, `darkTheme`, `defaultThemeFile`, `useTheme`.
-
-### Pass data from the parent (no fetch)
-
-```jsx
-<ComplaintApp
-  apiUrl={apiUrl}
-  authToken={authToken}
-  useDemoData={false}
-  systems={[
-    {
-      id: 'qms',
-      title: 'QMS - Query Management System',
-      status: 'active',
-      description: 'Description of the template',
-      departments: 3,
-      workflows: 12,
-      fields: 55,
-      formsFilled: 234,
-      updatedOn: '12 Mar 2024',
-      titleAsLink: true,
-    },
-  ]}
-  onCreateForm={handleCreate}
-  onConfigure={handleConfigure}
-/>
-```
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `apiUrl` | `string` | env `VITE_API_URL` | Base URL for axios requests |
-| `authToken` | `string` | — | Bearer token stored for API calls |
-| `theme` | `object` | built-in light/dark | Static theme file or token overrides |
-| `darkMode` | `boolean` | `false` | Parent-controlled dark mode |
-| `basePath` | `string` | `'/'` | React Router basename when nested |
-| `systems` | `array` | — | Parent-controlled system list |
-| `systemsEndpoint` | `string` | — | GET path relative to `apiUrl` |
-| `useDemoData` | `boolean` | `true` | Show design demo cards when no data |
-| `title` | `string` | `'Complaint Management'` | Page title |
-| `description` | `string` | lorem placeholder | Page subtitle |
-| `createLabel` | `string` | `'Create New Form'` | Primary CTA label |
-| `onCreateForm` | `fn` | — | Create button handler |
-| `onConfigure` | `fn(system)` | — | Configure button handler |
-| `onTitleClick` | `fn(system)` | — | Title link click |
-| `onDescriptionClick` | `fn` | — | Description link click |
-| `onSearch` | `fn(query)` | — | Search change callback |
-| `onPublish` | `fn` | — | Review & Publish handler |
-| `onStepChange` | `fn` | — | Settings step change callback |
-
-## Atomic structure
-
-```
-src/components/
-  atoms/       Button, Input, Typography, StatusBadge, Divider, Icons, Loading
-  molecules/   SearchBar, DataPoint, CardHeader, CardFooter
-  organisms/   PageHeader, SystemCard, SystemCardGrid
-```
-
-Named exports are available for reuse in the parent:
-
-```jsx
-import { Button, SearchBar, SystemCard, api } from '@attabot/complaint-app';
-```
-
-## Auth & API
-
-1. Parent passes `apiUrl` + `authToken` into `ComplaintApp` / `ApiProvider`.
-2. Package axios client (`api`) keeps the passed token in memory and attaches `Authorization: Bearer …` immediately before every request. It does not overwrite the parent app's auth cookie.
-3. Optional token refresh against `POST /api/v1/auth/refresh` when a `refreshToken` cookie exists.
-4. No product/business APIs are hardcoded — provide `systems` or `systemsEndpoint`.
-
-## Redux and router integration
-
-When mounted inside a parent `react-redux` Provider, `ComplaintApp` automatically
-reuses that Provider instead of adding a second competing Redux context. When used
-standalone it falls back to its own store. Pass the `store` prop only when you
-explicitly want an isolated store.
-
-The same rule applies to React Router: an existing parent router is reused; a
-`BrowserRouter` is only created for standalone use.
-
-## Development
-
-```bash
-npm install
-npm run dev      # preview Complaint Management UI
-npm run build    # emit dist/ for publishing
-```
-
-## License
-
-MIT
+# @attabot/complaint-app
+
+Complaint Management UI as an npm package. Built with **atomic design** (atoms → molecules → organisms) so the parent app can mount a ready dashboard that uses the **parent’s auth token and API base URL**.
+
+## Installation
+
+```bash
+npm install @attabot/complaint-app
+```
+
+Peer dependencies:
+
+```bash
+npm install react react-dom react-redux @reduxjs/toolkit
+```
+
+## Usage
+
+```jsx
+import ComplaintApp from '@attabot/complaint-app';
+import '@attabot/complaint-app/style.css';
+import brandTheme from './brandTheme.json'; // static theme file
+
+function App() {
+  const [darkMode, setDarkMode] = useState(false); // owned by parent
+
+  return (
+    <ComplaintApp
+      apiUrl="https://your-api.example.com"
+      authToken={sessionToken}
+      theme={brandTheme}
+      darkMode={darkMode}
+      systemsEndpoint="/api/v1/complaint-systems"
+      onCreateForm={() => navigate('/forms/new')}
+      onConfigure={(system) => navigate(`/systems/${system.id}`)}
+    />
+  );
+}
+```
+
+### Theme & dark mode (parent-controlled)
+
+Pass a static theme file (JSON/JS) and toggle `darkMode` from the parent. The package applies CSS variables across the whole UI.
+
+```jsx
+import brandTheme from './brandTheme.json';
+
+<ComplaintApp theme={brandTheme} darkMode={isDark} />
+```
+
+Theme file shape:
+
+```json
+{
+  "light": { "colors": { "primary": "#2D64B8", "background": "#F5F5F5" } },
+  "dark":  { "colors": { "primary": "#5B8DEF", "background": "#0F1115" } }
+}
+```
+
+Or pass flat overrides (merged into both modes):
+
+```jsx
+<ComplaintApp theme={{ colors: { primary: '#0F766E' } }} darkMode={false} />
+```
+
+Helpers / defaults are exported: `lightTheme`, `darkTheme`, `defaultThemeFile`, `useTheme`.
+
+### Pass data from the parent (no fetch)
+
+```jsx
+<ComplaintApp
+  apiUrl={apiUrl}
+  authToken={authToken}
+  useDemoData={false}
+  systems={[
+    {
+      id: 'qms',
+      title: 'QMS - Query Management System',
+      status: 'active',
+      description: 'Description of the template',
+      departments: 3,
+      workflows: 12,
+      fields: 55,
+      formsFilled: 234,
+      updatedOn: '12 Mar 2024',
+      titleAsLink: true,
+    },
+  ]}
+  onCreateForm={handleCreate}
+  onConfigure={handleConfigure}
+/>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `apiUrl` | `string` | env `VITE_API_URL` | Base URL for axios requests |
+| `authToken` | `string` | — | Bearer token stored for API calls |
+| `theme` | `object` | built-in light/dark | Static theme file or token overrides |
+| `darkMode` | `boolean` | `false` | Parent-controlled dark mode |
+| `basePath` | `string` | `'/'` | React Router basename when nested |
+| `systems` | `array` | — | Parent-controlled system list |
+| `systemsEndpoint` | `string` | — | GET path relative to `apiUrl` |
+| `useDemoData` | `boolean` | `true` | Show design demo cards when no data |
+| `title` | `string` | `'Complaint Management'` | Page title |
+| `description` | `string` | lorem placeholder | Page subtitle |
+| `createLabel` | `string` | `'Create New Form'` | Primary CTA label |
+| `onCreateForm` | `fn` | — | Create button handler |
+| `onConfigure` | `fn(system)` | — | Configure button handler |
+| `onTitleClick` | `fn(system)` | — | Title link click |
+| `onDescriptionClick` | `fn` | — | Description link click |
+| `onSearch` | `fn(query)` | — | Search change callback |
+| `onPublish` | `fn` | — | Review & Publish handler |
+| `onStepChange` | `fn` | — | Settings step change callback |
+
+## Atomic structure
+
+```
+src/components/
+  atoms/       Button, Input, Typography, StatusBadge, Divider, Icons, Loading
+  molecules/   SearchBar, DataPoint, CardHeader, CardFooter
+  organisms/   PageHeader, SystemCard, SystemCardGrid
+```
+
+Named exports are available for reuse in the parent:
+
+```jsx
+import { Button, SearchBar, SystemCard, api } from '@attabot/complaint-app';
+```
+
+## Auth & API
+
+1. Parent passes `apiUrl` + `authToken` into `ComplaintApp` / `ApiProvider`.
+2. Package axios client (`api`) keeps the passed token in memory and attaches `Authorization: Bearer …` immediately before every request. It does not overwrite the parent app's auth cookie.
+3. Optional token refresh against `POST /api/v1/auth/refresh` when a `refreshToken` cookie exists.
+4. No product/business APIs are hardcoded — provide `systems` or `systemsEndpoint`.
+
+## Redux and router integration
+
+When mounted inside a parent `react-redux` Provider, `ComplaintApp` automatically
+reuses that Provider instead of adding a second competing Redux context. When used
+standalone it falls back to its own store. Pass the `store` prop only when you
+explicitly want an isolated store.
+
+The same rule applies to React Router: an existing parent router is reused; a
+`BrowserRouter` is only created for standalone use.
+
+## Development
+
+```bash
+npm install
+npm run dev      # preview Complaint Management UI
+npm run build    # emit dist/ for publishing
+```
+
+## License
+
+MIT