@krumio/trailhand-ui 1.4.1 → 1.6.0

package/README.md

@@ -1,21 +1,74 @@
 # Trailhand UI
 
-A component library built with Lit Element web components and Storybook.
+A component library built with Lit Element web components, TypeScript, and Storybook.
 
-## Recommended IDE Setup
+## Installation
 
-VSCode with ES6 and Lit plugin support.
+```bash
+npm install @krumio/trailhand-ui
+```
 
-## Project Setup
+## Usage
 
-```bash
-npm install
+```javascript
+// Import components
+import '@krumio/trailhand-ui/toggle-switch';
+import '@krumio/trailhand-ui/data-table';
+import '@krumio/trailhand-ui/action-menu';
+
+// Import global color variables (optional)
+import '@krumio/trailhand-ui/styles/colors.css';
+```
+
+```html
+<!-- Use in HTML -->
+<toggle-switch onLabel="On" offLabel="Off"></toggle-switch>
+```
+
+## Global Color Variables
+
+Trailhand UI includes a design system with CSS custom properties. Import `colors.css` to use consistent colors across your app:
+
+```css
+/* Available variables */
+--color-primary: #3d98d3;
+--color-white: #FFFFFF;
+--color-black: #000000;
+
+/* Greyscale */
+--color-grey-100 through --color-grey-800
+
+/* Semantic aliases */
+--color-text-primary: #212121;
+--color-text-secondary: #636363;
+--color-text-muted: #8D8D8D;
+--color-background: #FFFFFF;
+--color-border: #D7D7D7;
+--color-error: #9F3A3A;
+--color-success: #30AC66;
+--color-warning: #D3C255;
 ```
 
-### Compile and Hot-Reload for Development
+### Theming
+
+Override any variable to customize the look:
+
+```css
+:root {
+  --color-primary: #your-brand-color;
+}
+```
+
+## Development
+
+### Recommended IDE Setup
+
+VSCode with ES6, Lit, and TypeScript plugin support.
+
+### Project Setup
 
 ```bash
-npm start
+npm install
 ```
 
 ### Storybook Development
@@ -40,65 +93,170 @@ npm run build-storybook
 
 ```
 trailhand-ui/
-├── Components/           # Web components
-├── stories/              # Storybook stories
-├── .storybook/           # Storybook configuration
-│   ├── main.js
-│   └── preview.js
-├── index.html            # Demo page
+├── src/
+│   ├── components/                 # Components
+│   │   ├── button/                 # Component folder
+│   │   │   ├── button.ts           # Web component
+│   │   │   ├── index.ts            # Export file
+│   │   │   ├── button.stories.ts   # Storybook for documentation and testing
+│   │   │   └── button.test.ts      # Unit tests
+│   │   └── more components/
+│   ├── design-system/              # Design system stories
+│   └── styles/
+│       └── colors.css              # Global color variables
+├── dev/                            # Playground application for development
+├── stories/                        # Additional Storybook stories
+├── .storybook/                     # Storybook configuration
+├── dist/                           # Compiled output
 └── package.json
 ```
 
-## Web Components
+## Components
 
-This library uses **Lit Element** for building fast, lightweight web components. Web components are framework-agnostic and work with any JavaScript framework or vanilla JS.
+### ToggleSwitch
 
-### Benefits
-- Framework agnostic
-- Encapsulated styles and functionality
-- Reusable across projects
-- Based on web standards
+A reusable toggle for boolean values with sync and persistence features.
 
-Learn more at [lit.dev](https://lit.dev)
+```html
+<toggle-switch
+  onLabel="On"
+  offLabel="Off"
+  name="my-toggle"
+  storage-key="my-setting"
+></toggle-switch>
+```
+
+### DataTable
+
+A sortable, paginated data table with search and custom actions.
+
+```html
+<data-table
+  .columns="${columns}"
+  .data="${data}"
+  searchable
+  paginated
+></data-table>
+```
+
+### ActionMenu
+
+A dropdown menu for row-level actions in tables.
+
+```html
+<action-menu
+  .actions=${[
+    { id: 'edit', label: 'Edit' },
+    { id: 'delete', label: 'Delete', variant: 'danger' }
+  ]}
+></action-menu>
+```
+
+### Button
+
+A simple button with different variations to handle click events.
+
+```html
+<trailhand-button @click="${handleClick}" variant="primary" size="large">
+  <trailhand-icon name="globe" slot="icon-left"></trailhand-icon>
+  Primary
+  <trailhand-icon name="globe" slot="icon-right"></trailhand-icon>
+</trailhand-button>
+```
+
+## Testing
 
-## Storybook
+This component library will serve as the foundation for future projects, thus it is important to ensure that these components are well tested. Thankfully, Storybook provides many useful tools to test the components using various methods.
 
-Storybook provides an isolated environment for component development and documentation.
+### Render Tests
 
-### Setup
+Render tests (smoke tests), as one might expect, simply tes that the component renders as desired. These tests serve to find any errors that would cause the component to fail on render. Storybook turns each story into a render test. By adding stories to represent the various states of a component, you can confirm that the component will render in that state.
 
-Storybook was initialized using:
+### Interaction Tests
+
+After confirming that a component renders properly, you would likely next want to test that it behaves properly. These interaction tests can be written by adding a new story for the interaction you are testing, and then using the "play" method provided by Storybook to simulate user interactions and make assumptions against expected results.
+
+### Accessibility Tests
+
+Storybook also provides addons to check components against accessibility rules. This ensures components meet certain standards. The configuration for which rules are applied as well as the result of not meeting said rules can be set in .storybook/preview.js. These properties can also be set at the Component and Story levels in case secific rulesets need to be applied or removed.
+
+### Visual Tests
+
+Visual tests compare snapshots taken of components to catch unexpected visual changes. The Storybook developers provide a platform to run and manage these tests called Chromatic.
+
+### Unit Tests
+
+The testing methods listed above are great for ensuring user-visible behavior. However, there may be things that need to be tested that are not captured in the methods above, and for that we can use Vitest unit tests. Storybook can confirm visible outcomes, however, to truly test the buisness logic in the component or in associated helpers unit tests are required.
+
+### Running the tests
+
+Tests can be executed via the Storybook UI or in the command line.
+
+#### Via Storybook
+
+To run tests via the Storybook UI, first run
 
 ```bash
-npm create storybook@latest
+npm run storybook
 ```
 
-**Configuration:**
-- Framework: `@storybook/web-components-vite`
-- Addons: `addon-essentials`, `addon-a11y`
-- ES Modules: `"type": "module"` in package.json
-- Version: 8.6.14 (for Node.js v20.18.0 compatibility)
+In the bottom left hand corner of the UI, you can open a menu to run tests and view test results.
 
-### Writing Stories
+![Storybook Testing Menu](/docs/images/image.png)
 
-Every component should have stories that demonstrate its various states and configurations.
+You can also view test results for specific stories in the playground for that story.
 
-```javascript
-export default {
-  title: 'Components/ComponentName',
-  tags: ['autodocs'],
-};
+![Interaction Test](/docs/images/image-1.png)
+
+![Visual Tests](/docs/images/image-2.png)
+
+![Accessibility Test](/docs/images/image-3.png)
+
+#### Via the command line
+
+To run render, interaction and accessibility tests via the command line run the following command
 
-export const Default = {
-  args: {
-    // component props
-  },
-};
+```bash
+npm run test:storybook
+```
+
+To run unit tests via the command line run the following command
+
+```bash
+npm run test:unit
+```
+
+To run both storybook and unit tests via the command line run the following command
+
+```bash
+npm run test
+```
+
+To run visual tests via the command line ensure CHROMATIC_PROJECT_TOKEN is added to your env and then run the following command
+
+```bash
+npm run chromatic
 ```
 
 ## Tech Stack
 
-- **Lit Element** 3.3.1 - Web component library
-- **Vite** 6.4.1 - Build tool
-- **Storybook** 8.6.14 - Component documentation
+- **Lit Element** 3.x - Web component library
+- **TypeScript** - Type safety
+- **Vite** - Build tool
+- **Storybook** 8.x - Component documentation
+- **Vitest** - Testing framework
 - **Node.js** v20.18.0+
+
+## Web Components
+
+This library uses **Lit Element** for building fast, lightweight web components. Web components are framework-agnostic and work with any JavaScript framework or vanilla JS.
+
+### Benefits
+
+- Framework agnostic
+- Encapsulated styles and functionality
+- Reusable across projects
+- Based on web standards
+- TypeScript support with full type definitions
+
+Learn more at [lit.dev](https://lit.dev)

package/dist/components/action-menu/action-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-menu.d.ts","sourceRoot":"","sources":["../../../src/components/action-menu/action-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAG5D;;GAEG;AACH,UAAU,YAAY;IACpB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB,gBAAgB,CAAC,EAAE,cAAc,EAAE,CAAC;CACrC;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,YAAY,KAAK,IAAI,CAAC;IAC1C,OAAO,CAAC,EAAE,OAAO,GAAG,CAAC,CAAC,QAAQ,EAAE,YAAY,KAAK,OAAO,CAAC,CAAC;IAC1D,OAAO,CAAC,EAAE,OAAO,GAAG,CAAC,CAAC,QAAQ,EAAE,YAAY,KAAK,OAAO,CAAC,CAAC;IAC1D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;GAGG;AACH,qBAAa,UAAW,SAAQ,UAAU;IAExC,OAAO,EAAE,cAAc,EAAE,CAAM;IAG/B,QAAQ,EAAE,YAAY,CAAM;IAG5B,QAAQ,UAAS;IAGjB,OAAO,CAAC,OAAO,CAAS;IAExB,OAAO,CAAC,wBAAwB,CAAqB;IAErD,OAAgB,MAAM,0BAkHpB;;IAOO,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAKrC;;;;OAIG;IACH,OAAO,CAAC,mBAAmB;IAO3B;;;;OAIG;IACH,OAAO,CAAC,WAAW;IAOnB;;;;;OAKG;IACH,OAAO,CAAC,kBAAkB;IAsB1B;;;;;OAKG;IACH,OAAO,CAAC,gBAAgB;IAQxB;;;;OAIG;IACH,OAAO,CAAC,WAAW;IAUnB;;;;OAIG;IACH,OAAO,CAAC,WAAW;IAenB;;;OAGG;IACM,MAAM,IAAI,cAAc;CAqFlC"}

package/dist/{action-menu.js → components/action-menu/action-menu.js}

@@ -63,7 +63,7 @@ export class ActionMenu extends LitElement {
             this.dispatchEvent(new CustomEvent('action-click', {
                 bubbles: true,
                 composed: true,
-                detail: { action, resource: this.resource }
+                detail: { action, resource: this.resource },
             }));
             // Call action handler if provided
             if (action.action && typeof action.action === 'function') {
@@ -110,7 +110,8 @@ export class ActionMenu extends LitElement {
             return this.actions;
         }
         // Otherwise, try to get from resource.availableActions
-        if (this.resource && typeof this.resource.availableActions !== 'undefined') {
+        if (this.resource &&
+            typeof this.resource.availableActions !== 'undefined') {
             return this.resource.availableActions || [];
         }
         return [];
@@ -122,7 +123,7 @@ export class ActionMenu extends LitElement {
     render() {
         const allActions = this._getActions();
         // Filter by visibility and enabled status
-        let visibleActions = allActions.filter(action => {
+        let visibleActions = allActions.filter((action) => {
             // Skip dividers in visibility check
             if (action.divider)
                 return true;
@@ -162,29 +163,40 @@ export class ActionMenu extends LitElement {
         ${this._renderIcon()}
       </button>
 
-      <div class="action-menu__dropdown ${this._isOpen ? 'action-menu__dropdown--open' : ''}">
-        ${visibleActions.length === 0 ? html `
-          <div class="action-menu__empty">No actions available</div>
-        ` : html `
-          <ul class="action-menu__list" role="menu">
-            ${visibleActions.map((action) => html `
-              ${action.divider ? html `
-                <li class="action-menu__divider" role="separator"></li>
-              ` : html `
-                <li class="action-menu__item" role="none">
-                  <button
-                    class="action-menu__action ${action.danger ? 'action-menu__action--danger' : ''}"
-                    ?disabled=${!this._isActionEnabled(action)}
-                    @click=${(e) => this._handleActionClick(e, action)}
-                    role="menuitem"
-                  >
-                    ${action.label}
-                  </button>
-                </li>
-              `}
-            `)}
-          </ul>
-        `}
+      <div
+        class="action-menu__dropdown ${this._isOpen
+            ? 'action-menu__dropdown--open'
+            : ''}"
+      >
+        ${visibleActions.length === 0
+            ? html ` <div class="action-menu__empty">No actions available</div> `
+            : html `
+              <ul class="action-menu__list" role="menu">
+                ${visibleActions.map((action) => html `
+                    ${action.divider
+                ? html `
+                          <li
+                            class="action-menu__divider"
+                            role="separator"
+                          ></li>
+                        `
+                : html `
+                          <li class="action-menu__item" role="none">
+                            <button
+                              class="action-menu__action ${action.danger
+                    ? 'action-menu__action--danger'
+                    : ''}"
+                              ?disabled=${!this._isActionEnabled(action)}
+                              @click=${(e) => this._handleActionClick(e, action)}
+                              role="menuitem"
+                            >
+                              ${action.label}
+                            </button>
+                          </li>
+                        `}
+                  `)}
+              </ul>
+            `}
       </div>
     `;
     }
@@ -202,17 +214,17 @@ ActionMenu.styles = css `
       width: 32px;
       height: 32px;
       padding: 0;
-      border: 1px solid var(--border, #ddd);
+      border: 1px solid var(--border, var(--color-border, #D7D7D7));
       border-radius: 4px;
-      background-color: var(--body-bg, #fff);
-      color: var(--body-text, #333);
+      background-color: var(--body-bg, var(--color-white, #FFFFFF));
+      color: var(--body-text, var(--color-text-primary, #212121));
       cursor: pointer;
       transition: all 0.2s;
     }
 
     .action-menu__button:hover:not(:disabled) {
-      background-color: var(--sortable-table-row-hover-bg, #f5f5f5);
-      border-color: var(--link, #007bff);
+      background-color: var(--sortable-table-row-hover-bg, var(--color-grey-100, #FAFAFA));
+      border-color: var(--link, var(--color-primary, #3d98d3));
     }
 
     .action-menu__button:disabled {
@@ -231,8 +243,8 @@ ActionMenu.styles = css `
       top: 100%;
       margin-top: 4px;
       min-width: 180px;
-      background-color: var(--body-bg, #fff);
-      border: 1px solid var(--border, #ddd);
+      background-color: var(--body-bg, var(--color-white, #FFFFFF));
+      border: 1px solid var(--border, var(--color-border, #D7D7D7));
       border-radius: 4px;
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
       z-index: 1000;
@@ -267,7 +279,7 @@ ActionMenu.styles = css `
       padding: 0.5rem 1rem;
       border: none;
       background: none;
-      color: var(--body-text, #333);
+      color: var(--body-text, var(--color-text-primary, #212121));
       font-size: 14px;
       text-align: left;
       cursor: pointer;
@@ -275,7 +287,7 @@ ActionMenu.styles = css `
     }
 
     .action-menu__action:hover:not(:disabled) {
-      background-color: var(--sortable-table-row-hover-bg, #f5f5f5);
+      background-color: var(--sortable-table-row-hover-bg, var(--color-grey-100, #FAFAFA));
     }
 
     .action-menu__action:disabled {
@@ -284,23 +296,23 @@ ActionMenu.styles = css `
     }
 
     .action-menu__action--danger {
-      color: var(--error, #dc3545);
+      color: var(--error, var(--color-error, #9F3A3A));
     }
 
     .action-menu__action--danger:hover:not(:disabled) {
-      background-color: rgba(220, 53, 69, 0.1);
+      background-color: rgba(159, 58, 58, 0.1);
     }
 
     .action-menu__divider {
       height: 1px;
       margin: 0.5rem 0;
-      background-color: var(--border, #ddd);
+      background-color: var(--border, var(--color-border, #D7D7D7));
     }
 
     .action-menu__empty {
       padding: 1rem;
       text-align: center;
-      color: var(--muted, #999);
+      color: var(--muted, var(--color-text-muted, #8D8D8D));
       font-size: 13px;
     }
   `;

package/dist/components/action-menu/action-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-menu.js","sourceRoot":"","sources":["../../../src/components/action-menu/action-menu.ts"],"names":[],"mappings":"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"}

package/dist/components/action-menu/index.d.ts

@@ -0,0 +1,2 @@
+export { ActionMenu } from './action-menu';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/action-menu/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/action-menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC"}

package/dist/components/action-menu/index.js

@@ -0,0 +1,2 @@
+export { ActionMenu } from './action-menu';
+//# sourceMappingURL=index.js.map

package/dist/components/action-menu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/action-menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC"}

package/dist/components/button/button.d.ts

@@ -0,0 +1,20 @@
+import { LitElement, TemplateResult } from 'lit';
+export interface ButtonProps {
+    variant: 'primary' | 'secondary' | 'alternate' | 'destructive' | 'confirmation';
+    size: 'small' | 'medium' | 'large';
+    disabled: boolean;
+    type: 'button' | 'submit' | 'reset';
+    name: string;
+}
+export declare class Button extends LitElement {
+    variant: 'primary' | 'secondary' | 'alternate' | 'destructive' | 'confirmation';
+    size: 'small' | 'medium' | 'large';
+    name: string;
+    disabled: boolean;
+    type: 'button' | 'submit' | 'reset';
+    static styles: import("lit").CSSResult;
+    updated(): void;
+    private handleClick;
+    render(): TemplateResult;
+}
+//# sourceMappingURL=button.d.ts.map

package/dist/components/button/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAI5D,MAAM,WAAW,WAAW;IAC1B,OAAO,EACH,SAAS,GACT,WAAW,GACX,WAAW,GACX,aAAa,GACb,cAAc,CAAC;IACnB,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACnC,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,IAAI,EAAE,MAAM,CAAC;CACd;AAED,qBAAa,MAAO,SAAQ,UAAU;IAEpC,OAAO,EACH,SAAS,GACT,WAAW,GACX,WAAW,GACX,aAAa,GACb,cAAc,CAAa;IAG/B,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAY;IAG9C,IAAI,SAAM;IAGV,QAAQ,UAAS;IAGjB,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAY;IAE/C,OAAgB,MAAM,0BAwGpB;IAEF,OAAO;IAQP,OAAO,CAAC,WAAW;IAmBV,MAAM,IAAI,cAAc;CA0BlC"}