sls-ui-library 1.0.0

package/README.md

@@ -0,0 +1,152 @@
+# sls-ui
+
+A standalone, reusable **React + Tailwind** component library (plain JavaScript —
+no TypeScript) built from the **SLS – Software License System** component spec
+(`SLS_React_Componants_Updated.docx`). This package contains **only the
+component library** (`src/components`, `src/theme`) — `src/App.jsx` is a local
+dev preview harness, not part of the published library.
+
+Every label, option, column header, and message shown in the preview app is
+copied verbatim from the doc's own screenshots — nothing outside the
+documentation was invented for the demo content.
+
+## What's in here
+
+- **`src/theme/tokens.js`** — the 4 color themes (`slate-navy`, `arctic-white`,
+  `carbon-pro`, `narnix-edge`) exactly as provided, plus `CSS_VAR_MAP`. Unchanged.
+- **`src/theme/ThemeProvider.jsx`** — writes a theme's tokens onto `:root` (or
+  any wrapped subtree) as CSS custom properties (`--accent-primary`,
+  `--card-bg`, …). Every component is styled with Tailwind classes that resolve
+  through these variables (`bg-card`, `text-ink-primary`, `border-card-border`,
+  …), so switching themes never touches component code.
+- **`src/components/common/*`** — ~30 generic, reusable primitives: Button,
+  IconButton, FloatingAddButton, InputField, PasswordInput,
+  PasswordStrengthMeter, Dropdown, MultiSelectDropdown, DatePicker,
+  DateRangePicker (preset list + dual calendar, matching the doc screenshot),
+  Checkbox, ToggleButtonGroup, SearchBox, Loader, Modal, ConfirmDialog,
+  FormModal, SlideOverModal, DataTable, ColumnFilterDropdown,
+  RowSelectCheckbox, Pagination, Badge, Card, Panel, Tabs, FilterPanel,
+  DynamicRowList, FormGroup, ValidationMessage, TableToolbar.
+- **`src/components/layout/*`** — MainLayout, AuthLayout, Header, Sidebar,
+  Footer, ProfileMenu.
+- **`src/components/feature/*`** — the feature-level components the spec marks
+  "Reusable: Yes": InvoicePreviewModal, ReportWidget, ChangesPreviewModal.
+
+## Components grounded in the doc's exact text
+
+- **Button** — the two labels shown in the doc's own Button screenshot: `Close`
+  / `Ok`.
+- **ConfirmDialog** — title `Deletion Confirmation`, message `Are you sure you
+  want to delete the license?`, buttons `Close` / `Ok` — copied from the doc's
+  Modal screenshot.
+- **Dropdown** — options `Corporate` / `Retailer`.
+- **MultiSelectDropdown** — options `EnviroFRONT` / `OCEMS` / `SolarFRONT`.
+- **DateRangePicker** — presets `This Financial Year`, `This Month`,
+  `Last Month`, `Next Month`, `This Quarter`, `This Year`, `Last Year`,
+  `Custom Range`, with `Cancel` / `Apply`, matching the doc's picker screenshot.
+- **ToggleButtonGroup** — `Issue Date` / `Activation Date`.
+- **DataTable** — `NAME` / `STATUS` columns with the doc's four sample rows
+  (`Desktop Application`, `Device`, `One-time DL FTP Configuration`,
+  `Web Application`).
+- **Pagination** — the doc's `«  1-4 of 4  »` range style (not numbered pages).
+- **ColumnFilterDropdown** — checkbox list `Account`, `Site Name`,
+  `License Type`, `License Key`, `Invoice No`, `Amount`.
+- **Badge** — `PI - ₹60,475.00`, `Invoice - ₹0.00`, `Pending - ₹60,475.00`,
+  `Cancel - ₹0.00`.
+- **Card** — the profile card content (`Super Admin`, `admin@m2mlogger.com`,
+  `Manage your SLS Account`, `Sign out`).
+- **Tabs** — `Performa Invoice` / `Tax Invoice`.
+- **FilterPanel** — `Product` / `Name` fields, `Clear filters` / `Search`.
+- **FormModal** — used as the doc's `Change Password` dialog (`New Password` /
+  `Confirm Password`, `Close` / `Ok`).
+- **Modal (Timeline)** — the doc's Timeline entries (`Change Site`,
+  `Activate License`, `New account added`, …).
+
+## Usage
+
+```jsx
+import { ThemeProvider, Button, Card, InputField } from "sls-ui";
+import "sls-ui/dist/index.css"; // Tailwind output, once built
+
+function App() {
+  return (
+    <ThemeProvider theme="carbon-pro">
+      <Card>
+        <InputField label="Name" required />
+        <Button variant="outline">Ok</Button>
+      </Card>
+    </ThemeProvider>
+  );
+}
+```
+
+## Changing / adding themes
+
+Everything lives in one file: `src/theme/tokens.js`. To add a 5th theme, add a
+new entry to `THEMES` with the same shape — no component changes needed. Drop
+in `<ThemeSwitcher />` (exported from `src/theme`) to let a user switch at
+runtime, or call `useTheme().setTheme("arctic-white")` from anywhere inside
+`<ThemeProvider>`.
+
+## Local development
+
+```bash
+npm install
+npm run dev      # Vite dev server — opens App.jsx, a preview harness only
+npm run build    # vite build — verifies the whole library builds cleanly
+```
+
+## Notes
+
+- **No TypeScript anywhere** — the whole project is plain JavaScript (`.js` /
+  `.jsx`). No `tsconfig.json`, no `@types/*`, no type annotations.
+- Tailwind's `tailwind.config.js` maps each theme token to a utility class
+  (e.g. `--accent-primary` → `bg-accent`, `text-accent`, `border-accent`), so
+  components never hardcode hex colors.
+- `fontFamily`, `borderRadius`, and `boxShadow` scales in `tailwind.config.js`
+  come from the design-tokens JSON you provided (Source Sans 3 / Cabin /
+  JetBrains Mono, the 8-step radius scale, and the shadow ramp).
+- `Modal` and `SlideOverModal` render via `createPortal` into `document.body`.
+
+## Interactive pages added from the full component spec
+
+Beyond the shared `src/components/common` / `layout` / `feature` library, this
+build now wires up the page- and feature-level components from the full
+`SLS_React_Componants_Updated.docx` spec into a real, click-through app
+(`src/App.jsx` is the entry point — still a dev harness, not part of the
+published library import):
+
+- **Auth** (`src/pages/auth/`) — `LoginForm` (checks the email, `admin@m2mlogger.com`
+  works) → `LoginPasswordForm` (any password signs in) → main app.
+- **License** (`src/pages/LicensePage.jsx` + `src/components/feature/license/*`)
+  — the full toolbar (add/edit/delete/activate/deactivate/update property/
+  renewal/history/invoice/download) is wired to real state over an in-memory
+  license list: `LicenseFormModal`, `DeleteLicenseModal`, `ActivateLicenseModal`,
+  `DeactivateLicenseModal`, `UpdatePropertyModal`, `LicenseFilter`,
+  `TimelineModal`, `HistoryPiInvoiceModal`, `SingleLicensePreviewModal`,
+  `LicenseRenewalModal`, `ManageRenewalStreamModal`, `ValidateTicketModal`,
+  `CancelPiModal`, `SelectionRowPreviewModal`, `LicenseToolbar`,
+  `LicenseAgentButton`.
+- **Users** (`src/pages/UsersPage.jsx` + `src/components/feature/users/*`) —
+  `UserFormModal`, `UsersFilter`, activate/deactivate.
+- **Masters** (`src/pages/masters/*` + `src/components/feature/masters/*`) —
+  `LicenseTypePage`/`LicenseTypeFormModal`, `LicenseTermPage`/
+  `LicenseTermFormModal`, `ProductTypePage`/`ProductTypeFormModal`, all built
+  on a shared `MasterListPage` CRUD pattern.
+- **Report** (`src/pages/ReportPage.jsx` + `src/components/feature/report/*`)
+  — `ReportFilter`, `InvoicePdfViewer`, `ExcelPreviewViewer`, wired into
+  `InvoicePreviewModal`.
+- **Dashboard** (`src/pages/SlsReportDashboard.jsx` +
+  `src/components/feature/dashboard/*`) — `UpcomingRenewalChart`,
+  `LicenseTrendChart`, `ReportWidget` (reload/export/filter all work),
+  `ChangesPreviewModal`.
+- **Home (legacy)** (`src/pages/HomeDashboard.jsx`) — customer filter over a
+  materials table.
+- **Profile** (`src/pages/UserProfilePage.jsx` +
+  `src/components/feature/profile/*`) — `ProfileActions` (rename / change
+  permission / change password), `PermissionEditor`, `ChangePasswordModal`.
+
+Every button documented in the spec (Add, Edit, Delete, Activate, Deactivate,
+Filter, Reload, Export, Download, Sign in, Sign out, etc.) triggers a real
+state change or opens a real modal — nothing is a visual dead end. Toasts
+(bottom-center) confirm the result of most actions.