Added docs

2026-04-13 18:57:47 +05:00
parent b323862e03
commit 5668cf20d9
9 changed files with 1421 additions and 1 deletions
@@ -1 +1,51 @@
-# Blazor UI Components
+# Enciphered.Blazor.UIComponents
+
+A **pure static SSR** Blazor component library styled with **Tailwind CSS v4** and **shadcn/ui** design tokens. All interactivity is powered by vanilla JavaScript — no SignalR, no WebAssembly, no `InteractiveServer` render mode required. Form validation and submission are handled entirely through **htmx**.
+
+## Features
+
+- **Zero Blazor interactivity** — components work with `AddRazorComponents()` alone
+- **Tailwind CSS v4** with oklch color tokens (light + dark mode)
+- **htmx form validation** — per-field blur validation and full form submission with a fluent `FormValidator` API
+- **Strongly-typed model binding** — bind submitted form data to POCOs automatically
+- **Sidebar layout** — collapsible, responsive, cookie-persisted
+- **Card components** — composable header/content/footer/image/action slots
+- **Dark mode** — toggle with localStorage persistence, FOUC-free
+- **Date/Time pickers** — calendar and time picker popovers with hidden native inputs
+
+## Quick Start
+
+```bash
+dotnet add package Enciphered.Blazor.UIComponents
+```
+
+> See the full [Getting Started guide](docs/getting-started.md) for setup instructions.
+
+## Documentation
+
+| Document | Description |
+|---|---|
+| [Getting Started](docs/getting-started.md) | Installation, prerequisites, and first-app setup |
+| [Sidebar](docs/components/sidebar.md) | Collapsible sidebar layout system |
+| [Card](docs/components/card.md) | Composable card components |
+| [Button](docs/components/button.md) | Button with variants and sizes |
+| [Form Inputs](docs/components/form-inputs.md) | TextInput, NumberInput, DateInput, TimeInput, DateTimeInput |
+| [Form Validation](docs/forms/validation.md) | htmx-powered validation with FormValidator |
+| [Form Submission](docs/forms/submission.md) | Handling form submit with model binding |
+| [Theme Toggle](docs/components/theme-toggle.md) | Dark/light mode toggle |
+
+## Architecture
+
+All interactive behavior (popovers, sidebar collapse, calendar navigation, number input steppers, form resets) is implemented via three vanilla JS modules that use `data-*` attribute selectors and event delegation:
+
+| Module | Purpose |
+|---|---|
+| `darkmode.js` | Theme toggle, localStorage persistence, SVG icon sync |
+| `sidebar.js` | Expand/collapse, mobile responsiveness, cookie persistence |
+| `forms.js` | Popover, calendar, time picker, number stepper, form reset |
+
+These modules survive Blazor enhanced navigation via `MutationObserver` patterns.
+
+## License
+
+ISC