intelliwaketssveltekitv25 1.0.81 → 1.0.82

package/README.md

@@ -1,77 +1,231 @@
-# create-svelte
+# IntelliWakeTSSvelteKitV2.5
 
-Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
+A professional SvelteKit component library with 41+ reusable UI components and utilities. Built with Svelte 5, TypeScript, and Tailwind CSS v4.
 
-Read more about creating a library [in the docs](https://kit.svelte.dev/docs/packaging).
+**Version:** 1.0.81 | **License:** MIT
 
-## App-specific settings
+---
 
-### Tailwind
+## Quick Start
 
-You must use tailwind, and the colors that are to be defined include:
+### Installation
 
-- `primary-main`
-- `primary-face`
-- `primary-hover`
-- `primary-light`
-- `primary-selected`
-- `secondary-main`
-- `secondary-light`
+```bash
+pnpm add intelliwaketssveltekitv25
+```
 
-### Classes to configure
+### Basic Usage
 
- - `mdMasterHR` which determines how the <hr/> separator looks on the Master Detail - Master Header
- - `mdDetailHR` which determines how the <hr/> separator looks on the Master Detail - Detail Header
+```svelte
+<script>
+  import { Switch, InputNumber, Modal, ArrayTable } from 'intelliwaketssveltekitv25';
+  import 'intelliwaketssveltekitv25/dist/app.css';
 
-## Creating a project
+  let enabled = $state(false);
+  let price = $state(29.99);
+</script>
 
-If you're seeing this, you've probably already done this step. Congrats!
+<Switch bind:checked={enabled}>Enable Feature</Switch>
+<InputNumber bind:value={price} currency />
+```
 
-```bash
-# create a new project in the current directory
-npm create svelte@latest
+---
 
-# create a new project in my-app
-npm create svelte@latest my-app
-```
+## Documentation
 
-## Developing
+### For Developers
 
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+- **[Integration Guide (INTEGRATION.md)](./INTEGRATION.md)** - Installation, setup, and configuration
+- **[Storybook](http://localhost:6006)** - Interactive component examples (run `pnpm storybook`)
+- **[Development Guide (CLAUDE.md)](./CLAUDE.md)** - Contributing and development workflow
 
-```bash
-npm run dev
+### For AI Assistants (Claude Code, Copilot, etc.)
 
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
-```
+- **[LLM Component Guide (LLM.md)](llm.txt)** - AI-optimized component reference with usage examples and common mistakes
 
-Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
+---
 
-## Building
+## Featured Components
 
-To build your library:
+### Form Controls (Replace Native HTML)
 
-```bash
-npm run package
+- **Switch** - Toggle switches (replaces `<input type="checkbox">`)
+- **InputNumber** - Formatted numeric inputs with currency/percent support (replaces `<input type="number">`)
+- **CheckBox** - Custom checkboxes with flexible styling
+- **TextArea** - Auto-resizing textarea
+- **DropDown** - Rich dropdown menus (replaces `<select>`)
+- **MultiSelect** - Multi-select dropdown with search
+
+### Layout & Navigation
+
+- **Modal** - Feature-rich dialog with drag support (replaces `<dialog>`)
+- **MasterDetailLayout** - Responsive master-detail pattern
+- **TabHeader** / **TabHref** - Tab navigation components
+- **Paginator** - Pagination controls
+
+### Data Display
+
+- **ArrayTable** - Sortable, type-safe data tables (replaces manual `<table>`)
+- **VirtualList** / **VirtualTable** - High-performance virtual scrolling for large datasets
+- **Calendar** - Date picker and calendar display
+- **DateRangePicker** - Date range selection
+
+### Utilities
+
+- **PathAnalyzer** - Route parsing and navigation helpers
+- **ArrayFunctions** - Data manipulation utilities
+- **FormEnhance** - Form enhancement utilities
+- **Functions** / **FunctionsBrowser** / **FunctionsServer** - Cross-environment utilities
+
+---
+
+## Requirements
+
+### Peer Dependencies
+
+```json
+{
+  "@solidbasisventures/intelliwaketsfoundation": "^5.13.57",
+  "@sveltejs/kit": "^2.49.2",
+  "svelte": "^5.46.1"
+}
 ```
 
-To create a production version of your showcase app:
+### Tailwind Configuration
+
+Your project must define these custom colors in `tailwind.config.js`:
+
+```javascript
+theme: {
+  extend: {
+    colors: {
+      primary: {
+        main: '#your-color',    // Primary brand color
+        face: '#your-color',    // Darker for contrast
+        hover: '#your-color',   // Hover state
+        light: '#your-color',   // Light background
+        selected: '#your-color' // Selected state
+      },
+      secondary: {
+        main: '#your-color',
+        light: '#your-color'
+      }
+    }
+  }
+}
+```
+
+See [INTEGRATION.md](./INTEGRATION.md) for complete setup instructions.
+
+---
+
+## Key Features
+
+- **Svelte 5 Runes** - Modern reactive programming with `$state`, `$derived`, `$effect`, `$bindable`
+- **TypeScript Generics** - Type-safe components (e.g., `ArrayTable<YourDataType>`)
+- **Tailwind CSS v4** - Utility-first styling with custom theme integration
+- **Comprehensive Testing** - Vitest for unit tests, Playwright for E2E, Storybook for visual testing
+- **Accessibility** - ARIA labels, keyboard navigation, and screen reader support
+- **Performance** - Virtual scrolling, lazy loading, and optimized rendering
+
+---
+
+## Development Commands
 
 ```bash
-npm run build
+# Development
+pnpm dev              # Start dev server
+pnpm test             # Run tests in watch mode
+pnpm storybook        # Start Storybook on port 6006
+
+# Building
+pnpm build            # Build library and package
+pnpm package          # Package for distribution
+
+# Quality Checks
+pnpm lint             # Run ESLint and Prettier
+pnpm format           # Format code
+pnpm check            # Type check with svelte-check
+pnpm docs:check       # Check documentation coverage
+
+# Publishing
+pnpm Publish          # Bump patch version and publish to npm
 ```
 
-You can preview the production build with `npm run preview`.
+---
 
-> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
+## Documentation Coverage
 
-## Publishing
+Phase 1 components (5/41) are fully documented with JSDoc, Storybook stories, and LLM.md entries:
 
-Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
+1. ✅ **Switch** - Toggle switches
+2. ✅ **InputNumber** - Formatted numeric inputs
+3. ✅ **Modal** - Dialog overlays
+4. ✅ **DropDown** - Rich dropdown menus
+5. ✅ **ArrayTable** - Sortable data tables
 
-To publish your library to [npm](https://www.npmjs.com):
+Run `pnpm docs:check` to see current documentation status.
 
-```bash
-npm publish
+---
+
+## Project Structure
+
+```
+intelliwaketssveltekitv25/
+├── src/
+│   ├── lib/              # Component library (published)
+│   │   ├── *.svelte      # 41 UI components
+│   │   ├── *.stories.ts  # Storybook stories
+│   │   └── index.ts      # Public API exports
+│   ├── routes/           # Demo application (not published)
+│   └── params/           # SvelteKit parameter matchers
+├── dist/                 # Build output
+├── LLM.md                # AI assistant documentation
+├── INTEGRATION.md        # Setup and integration guide
+├── CLAUDE.md             # Development guide
+└── README.md             # This file
 ```
+
+---
+
+## Browser Support
+
+- Chrome/Edge (latest 2 versions)
+- Firefox (latest 2 versions)
+- Safari (latest 2 versions)
+- iOS Safari (latest 2 versions)
+
+---
+
+## Contributing
+
+See [CLAUDE.md](./CLAUDE.md) for development workflow and contribution guidelines.
+
+---
+
+## License
+
+MIT License - See LICENSE file for details
+
+---
+
+## Links
+
+- **Package:** [npm](https://www.npmjs.com/package/intelliwaketssveltekitv25)
+- **Repository:** Contact maintainer for repository access
+- **Issues:** Contact maintainer for issue tracking
+
+---
+
+## Support
+
+For questions or issues:
+
+1. Check [LLM.md](llm.txt) for component usage and common mistakes
+2. Review [INTEGRATION.md](./INTEGRATION.md) for setup instructions
+3. Explore Storybook examples (`pnpm storybook`)
+4. Contact the library maintainer
+
+---
+
+**Built with ❤️ using Svelte 5, TypeScript, and Tailwind CSS**

package/dist/ArrayTable.stories.js

@@ -0,0 +1,215 @@
+import ArrayTable from './ArrayTable.svelte';
+const sampleUsers = [
+    { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin', salary: 75000, active: true },
+    { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'User', salary: 60000, active: true },
+    { id: 3, name: 'Bob Johnson', email: 'bob@example.com', role: 'User', salary: 55000, active: false },
+    { id: 4, name: 'Alice Williams', email: 'alice@example.com', role: 'Manager', salary: 85000, active: true }
+];
+const meta = {
+    title: 'Components/ArrayTable',
+    component: ArrayTable,
+    tags: ['autodocs'],
+    argTypes: {
+        arrayData: {
+            control: 'object',
+            description: 'Array of data objects (generic type T)'
+        },
+        arrayStructure: {
+            control: 'object',
+            description: 'Column definitions and table configuration'
+        },
+        bordered: {
+            control: 'boolean',
+            description: 'Add borders to table cells'
+        },
+        scrollable: {
+            control: 'boolean',
+            description: 'Make table sticky-header scrollable'
+        },
+        class: {
+            control: 'text',
+            description: 'Additional CSS classes for table element'
+        },
+        hideCosts: {
+            control: 'boolean',
+            description: 'Hide columns marked as costs'
+        }
+    }
+};
+export default meta;
+export const Default = {
+    args: {
+        arrayData: sampleUsers,
+        arrayStructure: {
+            columns: [
+                { fieldName: 'name', title: 'Name' },
+                { fieldName: 'email', title: 'Email' },
+                { fieldName: 'role', title: 'Role' }
+            ],
+            sortable: true
+        }
+    }
+};
+export const WithCurrency = {
+    args: {
+        arrayData: sampleUsers,
+        arrayStructure: {
+            columns: [
+                { fieldName: 'id', title: 'ID', size: 'sm' },
+                { fieldName: 'name', title: 'Name' },
+                { fieldName: 'salary', title: 'Salary', type: 'currency', sum: true }
+            ],
+            sortable: true,
+            defaultSortColumn: 'name'
+        }
+    }
+};
+export const WithComputedColumn = {
+    args: {
+        arrayData: sampleUsers,
+        arrayStructure: {
+            columns: [
+                { fieldName: 'name', title: 'Name' },
+                { fieldName: 'email', title: 'Email' },
+                {
+                    fieldName: 'active',
+                    title: 'Status',
+                    compute: (val) => val ? 'Active' : 'Inactive'
+                }
+            ],
+            sortable: true
+        }
+    }
+};
+export const Bordered = {
+    args: {
+        arrayData: sampleUsers,
+        arrayStructure: {
+            columns: [
+                { fieldName: 'name' },
+                { fieldName: 'email' },
+                { fieldName: 'role' }
+            ]
+        },
+        bordered: true
+    }
+};
+export const WithRowClick = {
+    args: {
+        arrayData: sampleUsers,
+        arrayStructure: {
+            columns: [
+                { fieldName: 'name', title: 'Name' },
+                { fieldName: 'email', title: 'Email' },
+                { fieldName: 'role', title: 'Role' }
+            ],
+            rowClick: (user) => alert(`Clicked: ${user.name}`)
+        }
+    }
+};
+export const EmptyState = {
+    args: {
+        arrayData: [],
+        arrayStructure: {
+            columns: [
+                { fieldName: 'name', title: 'Name' },
+                { fieldName: 'email', title: 'Email' }
+            ],
+            emptyMessage: 'No users found. Add your first user to get started.'
+        }
+    }
+};
+export const EmptyStateNoMessage = {
+    args: {
+        arrayData: [],
+        arrayStructure: {
+            columns: [
+                { fieldName: 'name' },
+                { fieldName: 'email' }
+            ],
+            emptyMessage: false
+        }
+    }
+};
+export const WithHiddenColumn = {
+    args: {
+        arrayData: sampleUsers,
+        arrayStructure: {
+            columns: [
+                { fieldName: 'id', hidden: true },
+                { fieldName: 'name', title: 'Name' },
+                { fieldName: 'email', title: 'Email' },
+                { fieldName: 'role', title: 'Role' }
+            ]
+        }
+    }
+};
+export const WithCellClick = {
+    args: {
+        arrayData: sampleUsers,
+        arrayStructure: {
+            columns: [
+                { fieldName: 'name', title: 'Name' },
+                {
+                    fieldName: 'email',
+                    title: 'Email',
+                    onclick: (user, e) => {
+                        e.stopPropagation();
+                        alert(`Email: ${user.email}`);
+                    }
+                },
+                { fieldName: 'role', title: 'Role' }
+            ],
+            rowClick: (user) => alert(`Row clicked: ${user.name}`)
+        }
+    }
+};
+export const WithFooterTotals = {
+    args: {
+        arrayData: sampleUsers,
+        arrayStructure: {
+            columns: [
+                { fieldName: 'name', title: 'Name' },
+                { fieldName: 'role', title: 'Role' },
+                {
+                    fieldName: 'salary',
+                    title: 'Salary',
+                    type: 'currency',
+                    sum: true
+                },
+                {
+                    fieldName: 'id',
+                    title: 'Count',
+                    count: true
+                }
+            ],
+            sortable: true
+        }
+    }
+};
+export const Unsortable = {
+    args: {
+        arrayData: sampleUsers,
+        arrayStructure: {
+            columns: [
+                { fieldName: 'name' },
+                { fieldName: 'email' },
+                { fieldName: 'role' }
+            ],
+            sortable: false
+        }
+    }
+};
+export const MixedSortable = {
+    args: {
+        arrayData: sampleUsers,
+        arrayStructure: {
+            columns: [
+                { fieldName: 'name', title: 'Name (sortable)' },
+                { fieldName: 'email', title: 'Email (not sortable)', doNotSort: true },
+                { fieldName: 'role', title: 'Role (sortable)' }
+            ],
+            sortable: true
+        }
+    }
+};

package/dist/ArrayTable.svelte

@@ -1,3 +1,49 @@
+<!--
+  @component
+  Type-safe, sortable data table with automatic formatting, custom cell rendering, and row/column interactions.
+  Replaces manual <table> implementations with sorting, formatting, and event handling.
+
+  @example
+  ```svelte
+  <script lang="ts">
+    import { ArrayTable, type IArrayStructure } from 'intelliwaketssveltekitv25';
+
+    interface User {
+      name: string;
+      email: string;
+      salary: number;
+    }
+
+    const users: User[] = [
+      { name: 'John', email: 'john@example.com', salary: 75000 }
+    ];
+
+    const structure: IArrayStructure<User> = {
+      columns: [
+        { fieldName: 'name', title: 'Name' },
+        { fieldName: 'email', title: 'Email' },
+        { fieldName: 'salary', type: 'currency', sum: true }
+      ],
+      sortable: true
+    };
+  </script>
+
+  <ArrayTable arrayData={users} arrayStructure={structure} bordered />
+  ```
+
+  @remarks
+  - Uses TypeScript generics for type-safe column definitions
+  - Auto-formatting: currency, percentages, dates based on column type
+  - Sortable: click column headers to sort (ascending/descending toggle)
+  - Computed values: transform data before display with compute functions
+  - Footer totals: automatic sums, averages, and counts
+  - Empty state: customizable message when no data
+  - Row and cell click handlers for interactions
+
+  @see VirtualTable - For very large datasets (10,000+ rows) with virtual scrolling
+  @see ArrayFunctions - Utility functions for array/table operations
+-->
+
 <script lang="ts" generics="T extends Record<string, any>">
 
 	import {

package/dist/ArrayTable.svelte.d.ts

@@ -29,6 +29,50 @@ interface $$IsomorphicComponent {
     <T extends Record<string, any>>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
+/**
+ * Type-safe, sortable data table with automatic formatting, custom cell rendering, and row/column interactions.
+ * Replaces manual <table> implementations with sorting, formatting, and event handling.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   import { ArrayTable, type IArrayStructure } from 'intelliwaketssveltekitv25';
+ *
+ *   interface User {
+ *     name: string;
+ *     email: string;
+ *     salary: number;
+ *   }
+ *
+ *   const users: User[] = [
+ *     { name: 'John', email: 'john@example.com', salary: 75000 }
+ *   ];
+ *
+ *   const structure: IArrayStructure<User> = {
+ *     columns: [
+ *       { fieldName: 'name', title: 'Name' },
+ *       { fieldName: 'email', title: 'Email' },
+ *       { fieldName: 'salary', type: 'currency', sum: true }
+ *     ],
+ *     sortable: true
+ *   };
+ * </script>
+ *
+ * <ArrayTable arrayData={users} arrayStructure={structure} bordered />
+ * ```
+ *
+ * @remarks
+ * - Uses TypeScript generics for type-safe column definitions
+ * - Auto-formatting: currency, percentages, dates based on column type
+ * - Sortable: click column headers to sort (ascending/descending toggle)
+ * - Computed values: transform data before display with compute functions
+ * - Footer totals: automatic sums, averages, and counts
+ * - Empty state: customizable message when no data
+ * - Row and cell click handlers for interactions
+ *
+ * @see VirtualTable - For very large datasets (10,000+ rows) with virtual scrolling
+ * @see ArrayFunctions - Utility functions for array/table operations
+ */
 declare const ArrayTable: $$IsomorphicComponent;
 type ArrayTable<T extends Record<string, any>> = InstanceType<typeof ArrayTable<T>>;
 export default ArrayTable;

package/dist/DropDown.stories.d.ts

@@ -0,0 +1,96 @@
+import type { StoryObj } from '@storybook/svelte';
+type DropDownProps = {
+    show?: boolean;
+    ddActions?: any[];
+    buttonTitle?: string | null;
+    noCaret?: boolean;
+    buttonClass?: string;
+    inputControl?: boolean;
+    fullBlock?: boolean;
+    sameSize?: boolean;
+    disabled?: boolean;
+    hidden?: boolean;
+};
+declare const meta: {
+    title: string;
+    component: import("svelte").Component<{
+        show?: boolean;
+        position?: import("./Definitions").TDropDownControlPosition;
+        ddActions?: import("./Definitions").IDDAction[];
+        noCaret?: boolean;
+        buttonTitle?: string | null;
+        buttonClass?: string;
+        controlClass?: string;
+        toggleClass?: string;
+        inputControl?: boolean;
+        fullBlock?: boolean;
+        bodyClass?: string;
+        sameSize?: boolean;
+        zIndex?: number;
+        disabled?: boolean;
+        hidden?: boolean;
+        hideEmptyDDActions?: boolean;
+        button?: import("svelte").Snippet;
+        verbose?: boolean;
+        actions?: import("svelte").Snippet;
+        dataColor?: TDefaultColorPalate;
+        clientWidth?: number;
+    }, {}, "show" | "clientWidth">;
+    tags: string[];
+    argTypes: {
+        show: {
+            control: "boolean";
+            description: string;
+        };
+        ddActions: {
+            control: "object";
+            description: string;
+        };
+        buttonTitle: {
+            control: "text";
+            description: string;
+        };
+        noCaret: {
+            control: "boolean";
+            description: string;
+        };
+        buttonClass: {
+            control: "text";
+            description: string;
+        };
+        inputControl: {
+            control: "boolean";
+            description: string;
+        };
+        fullBlock: {
+            control: "boolean";
+            description: string;
+        };
+        sameSize: {
+            control: "boolean";
+            description: string;
+        };
+        disabled: {
+            control: "boolean";
+            description: string;
+        };
+        hidden: {
+            control: "boolean";
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<DropDownProps>;
+export declare const Default: Story;
+export declare const WithActiveItem: Story;
+export declare const WithDisabledItems: Story;
+export declare const WithHeaders: Story;
+export declare const WithGrouping: Story;
+export declare const WithNavigation: Story;
+export declare const WithDownloads: Story;
+export declare const WithAlternateActions: Story;
+export declare const AsSelectReplacement: Story;
+export declare const Disabled: Story;
+export declare const NoCaret: Story;
+export declare const FullWidth: Story;