@area8975/ui 0.1.0

package/README.md

@@ -0,0 +1,139 @@
+# @area8975/ui
+
+Angular component library built on signals, Tailwind CSS v4 and the Preline theme.
+
+Includes form controls, buttons, dropdowns, modals, drawers, tables, toasts, date pickers, charts and layout pieces. Browse them all in Storybook (`npm run storybook` in this repo).
+
+## Install
+
+```bash
+npm i @area8975/ui
+```
+
+Peer dependencies:
+
+```bash
+npm i @floating-ui/dom @ng-icons/core @ng-icons/heroicons apexcharts preline rxjs tailwindcss @tailwindcss/forms @tailwindcss/postcss
+```
+
+Requires Angular 22.
+
+## Setup
+
+### 1. Tailwind
+
+Add a `.postcssrc.json` to your app root if you don't have one:
+
+```json
+{
+    "plugins": {
+        "@tailwindcss/postcss": {}
+    }
+}
+```
+
+### 2. Styles
+
+In your global `styles.css`:
+
+```css
+@import "tailwindcss";
+@import "../node_modules/preline/variants.css";
+@import "../node_modules/preline/src/plugins/datepicker/styles.css";
+@import "../node_modules/preline/css/themes/theme.css";
+@import "@area8975/ui/theme.css";
+
+@source "../node_modules/@area8975/ui";
+@source "../node_modules/preline/dist/*.js";
+```
+
+The `@source` lines matter. Without them Tailwind won't generate the classes the components use.
+
+`theme.css` brings the fonts (Inter and Ubuntu Sans), colour aliases (`primary`, `secondary`, `success`, `warning`, `danger`) and the `ui-text-*` typography classes. Adjust the `../node_modules` paths if your `styles.css` isn't one level below the app root.
+
+### 3. Icons
+
+Components use heroicons by name, so register them once in `app.config.ts`:
+
+```ts
+import { provideIcons } from '@ng-icons/core';
+import {
+    heroArrowUpTray,
+    heroBars2,
+    heroBars3,
+    heroCalendar,
+    heroCalendarDateRange,
+    heroCheck,
+    heroChevronDoubleLeft,
+    heroChevronDown,
+    heroChevronLeft,
+    heroChevronRight,
+    heroChevronUp,
+    heroChevronUpDown,
+    heroClock,
+    heroDocument,
+    heroFunnel,
+    heroMagnifyingGlass,
+    heroMinus,
+    heroPlus,
+    heroViewColumns,
+    heroXMark
+} from '@ng-icons/heroicons/outline';
+import {
+    heroCheckCircleSolid,
+    heroExclamationTriangleSolid,
+    heroInformationCircleSolid,
+    heroXCircleSolid
+} from '@ng-icons/heroicons/solid';
+
+export const appConfig: ApplicationConfig = {
+    providers: [
+        provideIcons({
+            heroArrowUpTray,
+            heroBars2,
+            heroBars3,
+            heroCalendar,
+            heroCalendarDateRange,
+            heroCheck,
+            heroChevronDoubleLeft,
+            heroChevronDown,
+            heroChevronLeft,
+            heroChevronRight,
+            heroChevronUp,
+            heroChevronUpDown,
+            heroClock,
+            heroDocument,
+            heroFunnel,
+            heroMagnifyingGlass,
+            heroMinus,
+            heroPlus,
+            heroViewColumns,
+            heroXMark,
+            heroCheckCircleSolid,
+            heroExclamationTriangleSolid,
+            heroInformationCircleSolid,
+            heroXCircleSolid
+        })
+    ]
+};
+```
+
+## Usage
+
+Everything is standalone, import what you need:
+
+```ts
+import { UiButtonComponent, UiInputComponent } from '@area8975/ui';
+
+
+@Component({
+    imports: [UiButtonComponent, UiInputComponent],
+    template: `
+        <ui-input placeholder="Search" />
+        <ui-button intent="primary">Save</ui-button>
+    `
+})
+export class ExampleComponent {}
+```
+
+Each component's inputs and variants are documented in its Storybook page.