@legalaidalberta/luic 0.0.0

package/CHANGELOG.md

@@ -0,0 +1,93 @@
+# @luic/ui
+
+## 0.0.0
+
+### Minor Changes
+
+- Added 5 essential form control components with full TypeScript support, accessibility features, and comprehensive test coverage
+
+  **New Components**:
+
+  - **Checkbox** - Form checkbox with label, error states, and helper text support
+  - **Radio** - Radio button component for single selection from groups
+  - **TextInput** - Versatile text input supporting all HTML input types (text, email, password, tel, url, number)
+  - **Select** - Dropdown select component with option groups and disabled state support
+  - **Toggle** - Animated switch/toggle component with on/off labels
+
+  **Features**:
+
+  - Full TypeScript support with exported prop interfaces
+  - Tailwind CSS v4 styling with `laaui:` prefix
+  - Comprehensive accessibility (ARIA attributes, semantic HTML)
+  - Error and helper text states for all components
+  - Disabled states with proper visual feedback
+  - Forward ref support for all components
+  - 76 passing tests with browser-mode testing
+  - Complete Storybook documentation with multiple examples per component
+
+  **Component Props**:
+  All form components share common props:
+
+  - `label` - Label text for the input
+  - `error` - Error message to display (takes precedence over helperText)
+  - `helperText` - Helper text displayed below the input
+  - `disabled` - Disabled state
+
+  **Usage Examples**:
+
+  ```tsx
+  import { Checkbox, Radio, TextInput, Select, Toggle } from '@laa/ui';
+
+  // Checkbox
+  <Checkbox
+    label="I agree to terms"
+    helperText="You must accept to continue"
+  />
+
+  // Radio
+  <Radio
+    name="shipping"
+    label="Express Shipping"
+    helperText="2-3 business days"
+  />
+
+  // TextInput
+  <TextInput
+    label="Email"
+    type="email"
+    placeholder="john@example.com"
+    error="Invalid email address"
+  />
+
+  // Select
+  <Select
+    label="Country"
+    options={[
+      { value: 'us', label: 'United States' },
+      { value: 'ca', label: 'Canada' }
+    ]}
+    placeholder="Select a country"
+  />
+
+  // Toggle
+  <Toggle
+    label="Dark mode"
+    onLabel="On"
+    offLabel="Off"
+  />
+  ```
+
+  **Migration**:
+  No breaking changes. All new components are additions to the library.
+
+  **Testing**:
+  All components include comprehensive test coverage:
+
+  - Checkbox: 11 tests
+  - Radio: 12 tests
+  - TextInput: 14 tests
+  - Select: 16 tests
+  - Toggle: 16 tests
+
+  **Storybook**:
+  Each component includes multiple story variants demonstrating different states and use cases. View the Storybook documentation for interactive examples.

package/README.md

@@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

package/dist/components/card/card.d.ts

@@ -0,0 +1,6 @@
+type CardProps = {
+    title: string;
+    description: string;
+};
+export declare const Card: ({ title, description }: CardProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/card/card.stories.d.ts

@@ -0,0 +1,24 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: ({ title, description }: {
+        title: string;
+        description: string;
+    }) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    argTypes: {
+        title: {
+            control: {
+                type: "text";
+            };
+        };
+        description: {
+            control: {
+                type: "text";
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;

package/dist/components/card/index.d.ts

@@ -0,0 +1 @@
+export { Card } from './card';

package/dist/components/checkbox/checkbox.d.ts

@@ -0,0 +1,24 @@
+import { InputHTMLAttributes } from 'react';
+import { BaseFormFieldProps } from '../../types/common';
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'id'>, BaseFormFieldProps {
+    /**
+     * Custom ID for the checkbox element
+     * If not provided, a unique ID will be generated
+     */
+    id?: string;
+}
+/**
+ * Checkbox component with built-in label, error, and helper text support
+ *
+ * @example
+ * ```tsx
+ * <Checkbox
+ *   label="I agree to the terms and conditions"
+ *   helperText="You must accept to continue"
+ *   error={errors.agree}
+ *   checked={formData.agree}
+ *   onChange={(e) => setFormData({ ...formData, agree: e.target.checked })}
+ * />
+ * ```
+ */
+export declare const Checkbox: import('react').ForwardRefExoticComponent<CheckboxProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/checkbox/checkbox.stories.d.ts

@@ -0,0 +1,47 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./checkbox').CheckboxProps & import('react').RefAttributes<HTMLInputElement>>;
+    tags: string[];
+    argTypes: {
+        label: {
+            control: {
+                type: "text";
+            };
+            description: string;
+        };
+        error: {
+            control: {
+                type: "text";
+            };
+            description: string;
+        };
+        helperText: {
+            control: {
+                type: "text";
+            };
+            description: string;
+        };
+        disabled: {
+            control: {
+                type: "boolean";
+            };
+            description: string;
+        };
+        checked: {
+            control: {
+                type: "boolean";
+            };
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Checked: Story;
+export declare const WithHelperText: Story;
+export declare const WithError: Story;
+export declare const Disabled: Story;
+export declare const DisabledChecked: Story;
+export declare const MultipleCheckboxes: Story;

package/dist/components/checkbox/index.d.ts

@@ -0,0 +1 @@
+export { Checkbox, type CheckboxProps } from './checkbox';

package/dist/components/color-picker/color-picker.d.ts

@@ -0,0 +1,32 @@
+import { InputHTMLAttributes } from 'react';
+import { BaseFormFieldProps } from '../../types/common';
+export interface ColorPickerProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'type'>, BaseFormFieldProps {
+    /**
+     * Custom ID for the input element
+     * If not provided, a unique ID will be generated
+     */
+    id?: string;
+    /**
+     * Whether to show the color preview swatch
+     * @default true
+     */
+    showPreview?: boolean;
+    /**
+     * Whether to show the hex value
+     * @default true
+     */
+    showHexValue?: boolean;
+}
+/**
+ * ColorPicker component for selecting colors
+ *
+ * @example
+ * ```tsx
+ * <ColorPicker
+ *   label="Brand Color"
+ *   value={color}
+ *   onChange={(e) => setColor(e.target.value)}
+ * />
+ * ```
+ */
+export declare const ColorPicker: import('react').ForwardRefExoticComponent<ColorPickerProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/color-picker/color-picker.stories.d.ts

@@ -0,0 +1,74 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./color-picker').ColorPickerProps & import('react').RefAttributes<HTMLInputElement>>;
+    tags: string[];
+    argTypes: {
+        label: {
+            control: {
+                type: "text";
+            };
+            description: string;
+        };
+        error: {
+            control: {
+                type: "text";
+            };
+            description: string;
+        };
+        helperText: {
+            control: {
+                type: "text";
+            };
+            description: string;
+        };
+        disabled: {
+            control: {
+                type: "boolean";
+            };
+            description: string;
+        };
+        required: {
+            control: {
+                type: "boolean";
+            };
+            description: string;
+        };
+        showPreview: {
+            control: {
+                type: "boolean";
+            };
+            description: string;
+        };
+        showHexValue: {
+            control: {
+                type: "boolean";
+            };
+            description: string;
+        };
+        value: {
+            control: {
+                type: "color";
+            };
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithHelperText: Story;
+export declare const WithError: Story;
+export declare const Required: Story;
+export declare const Disabled: Story;
+export declare const WithoutPreview: Story;
+export declare const WithoutHexValue: Story;
+export declare const MinimalDisplay: Story;
+export declare const PrimaryColor: Story;
+export declare const SecondaryColor: Story;
+export declare const SuccessColor: Story;
+export declare const ErrorColor: Story;
+export declare const WarningColor: Story;
+export declare const BackgroundColor: Story;
+export declare const TextColor: Story;
+export declare const ThemeCustomization: Story;

package/dist/components/color-picker/index.d.ts

@@ -0,0 +1 @@
+export { ColorPicker, type ColorPickerProps } from './color-picker';

package/dist/components/currency-input/currency-input.d.ts

@@ -0,0 +1,48 @@
+import { InputHTMLAttributes } from 'react';
+import { BaseFormFieldProps } from '../../types/common';
+export interface CurrencyInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'type'>, BaseFormFieldProps {
+    /**
+     * Custom ID for the input element
+     * If not provided, a unique ID will be generated
+     */
+    id?: string;
+    /**
+     * Currency symbol to display
+     * @default '$'
+     */
+    currencySymbol?: string;
+    /**
+     * Position of the currency symbol
+     * @default 'left'
+     */
+    symbolPosition?: 'left' | 'right';
+    /**
+     * Minimum value
+     */
+    min?: number;
+    /**
+     * Maximum value
+     */
+    max?: number;
+    /**
+     * Step for increment/decrement
+     * @default 0.01
+     */
+    step?: number;
+}
+/**
+ * CurrencyInput component for entering monetary values
+ *
+ * @example
+ * ```tsx
+ * <CurrencyInput
+ *   label="Product Price"
+ *   value={price}
+ *   onChange={(e) => setPrice(e.target.value)}
+ *   currencySymbol="$"
+ *   min={0}
+ *   step={0.01}
+ * />
+ * ```
+ */
+export declare const CurrencyInput: import('react').ForwardRefExoticComponent<CurrencyInputProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/currency-input/currency-input.stories.d.ts

@@ -0,0 +1,86 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./currency-input').CurrencyInputProps & import('react').RefAttributes<HTMLInputElement>>;
+    tags: string[];
+    argTypes: {
+        label: {
+            control: {
+                type: "text";
+            };
+            description: string;
+        };
+        error: {
+            control: {
+                type: "text";
+            };
+            description: string;
+        };
+        helperText: {
+            control: {
+                type: "text";
+            };
+            description: string;
+        };
+        disabled: {
+            control: {
+                type: "boolean";
+            };
+            description: string;
+        };
+        required: {
+            control: {
+                type: "boolean";
+            };
+            description: string;
+        };
+        currencySymbol: {
+            control: {
+                type: "text";
+            };
+            description: string;
+        };
+        symbolPosition: {
+            control: {
+                type: "select";
+            };
+            options: string[];
+            description: string;
+        };
+        min: {
+            control: {
+                type: "number";
+            };
+            description: string;
+        };
+        max: {
+            control: {
+                type: "number";
+            };
+            description: string;
+        };
+        step: {
+            control: {
+                type: "number";
+            };
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithHelperText: Story;
+export declare const WithError: Story;
+export declare const Required: Story;
+export declare const Disabled: Story;
+export declare const WithMinMax: Story;
+export declare const EuroSymbol: Story;
+export declare const PoundSymbol: Story;
+export declare const YenSymbol: Story;
+export declare const SymbolOnRight: Story;
+export declare const ProductPrice: Story;
+export declare const SalaryInput: Story;
+export declare const DiscountPrice: Story;
+export declare const BudgetInput: Story;
+export declare const MultipleInputs: Story;

package/dist/components/currency-input/index.d.ts

@@ -0,0 +1 @@
+export { CurrencyInput, type CurrencyInputProps } from './currency-input';

package/dist/components/data-table/data-table.d.ts

@@ -0,0 +1,100 @@
+import { TableHTMLAttributes } from 'react';
+import { BaseFormFieldProps } from '../../types/common';
+export interface DataTableColumn<T = unknown> {
+    /**
+     * Unique key for the column
+     */
+    key: string;
+    /**
+     * Header text to display
+     */
+    header: string;
+    /**
+     * Optional custom render function for cell content
+     * @param row - The row data
+     * @returns React node to render in the cell
+     */
+    render?: (row: T) => React.ReactNode;
+    /**
+     * Optional width for the column
+     */
+    width?: string;
+    /**
+     * Optional className for the column cells
+     */
+    className?: string;
+}
+export interface DataTableProps<T = unknown> extends Omit<TableHTMLAttributes<HTMLTableElement>, 'id'>, BaseFormFieldProps {
+    /**
+     * Custom ID for the table element
+     * If not provided, a unique ID will be generated
+     */
+    id?: string;
+    /**
+     * Array of column definitions
+     */
+    columns: DataTableColumn<T>[];
+    /**
+     * Array of data rows
+     */
+    data: T[];
+    /**
+     * Key to use for row identification (must be unique)
+     * Can be a string property name or a function that returns a unique identifier
+     */
+    rowKey: keyof T | ((row: T) => string | number);
+    /**
+     * Whether rows can be selected with checkboxes
+     * @default false
+     */
+    selectable?: boolean;
+    /**
+     * Controlled selected rows (array of row keys)
+     */
+    selectedRows?: (string | number)[];
+    /**
+     * Callback when selection changes
+     * @param selectedRows - Array of selected row keys
+     */
+    onSelectionChange?: (selectedRows: (string | number)[]) => void;
+    /**
+     * Callback when a row is clicked
+     * @param row - The clicked row data
+     */
+    onRowClick?: (row: T) => void;
+    /**
+     * Whether to highlight rows on hover
+     * @default true
+     */
+    hoverable?: boolean;
+    /**
+     * Whether to show striped rows
+     * @default false
+     */
+    striped?: boolean;
+    /**
+     * Size variant
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
+}
+/**
+ * DataTable component for displaying tabular data with optional row selection
+ *
+ * @example
+ * ```tsx
+ * <DataTable
+ *   columns={[
+ *     { key: 'id', header: 'ID' },
+ *     { key: 'name', header: 'Name' },
+ *     { key: 'email', header: 'Email' },
+ *   ]}
+ *   data={users}
+ *   rowKey="id"
+ *   selectable
+ *   selectedRows={selected}
+ *   onSelectionChange={setSelected}
+ * />
+ * ```
+ */
+export declare const DataTable: import('react').ForwardRefExoticComponent<DataTableProps<unknown> & import('react').RefAttributes<HTMLTableElement>>;