@krumio/trailhand-ui 1.4.1 → 1.5.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;
+```
+
+### Theming
+
+Override any variable to customize the look:
+
+```css
+:root {
+  --color-primary: #your-brand-color;
+}
 ```
 
-### Compile and Hot-Reload for Development
+## Development
+
+### Recommended IDE Setup
+
+VSCode with ES6, Lit, and TypeScript plugin support.
+
+### Project Setup
 
 ```bash
-npm start
+npm install
 ```
 
 ### Storybook Development
@@ -40,65 +93,79 @@ 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/           # Web components (TypeScript)
+│   │   ├── toggle-switch/
+│   │   ├── data-table/
+│   │   └── action-menu/
+│   ├── design-system/        # Design system stories
+│   └── styles/
+│       └── colors.css        # Global color variables
+├── stories/                  # Additional Storybook stories
+├── .storybook/               # Storybook configuration
+├── dist/                     # Compiled output
 └── package.json
 ```
 
-## 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
+## Components
 
-Learn more at [lit.dev](https://lit.dev)
+### ToggleSwitch
 
-## Storybook
+A reusable toggle for boolean values with sync and persistence features.
 
-Storybook provides an isolated environment for component development and documentation.
+```html
+<toggle-switch
+  onLabel="On"
+  offLabel="Off"
+  name="my-toggle"
+  storage-key="my-setting"
+></toggle-switch>
+```
 
-### Setup
+### DataTable
 
-Storybook was initialized using:
+A sortable, paginated data table with search and custom actions.
 
-```bash
-npm create storybook@latest
+```html
+<data-table
+  .columns=${columns}
+  .data=${data}
+  searchable
+  paginated
+></data-table>
 ```
 
-**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)
-
-### Writing Stories
+### ActionMenu
 
-Every component should have stories that demonstrate its various states and configurations.
+A dropdown menu for row-level actions in tables.
 
-```javascript
-export default {
-  title: 'Components/ComponentName',
-  tags: ['autodocs'],
-};
-
-export const Default = {
-  args: {
-    // component props
-  },
-};
+```html
+<action-menu
+  .actions=${[
+    { id: 'edit', label: 'Edit' },
+    { id: 'delete', label: 'Delete', variant: 'danger' }
+  ]}
+></action-menu>
 ```
 
 ## 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

@@ -0,0 +1,79 @@
+import { LitElement, TemplateResult } from 'lit';
+/**
+ * Type definition for resource data
+ */
+interface ResourceData {
+    [key: string]: any;
+    availableActions?: ActionMenuItem[];
+}
+/**
+ * Type definition for action menu items
+ */
+export interface ActionMenuItem {
+    label?: string;
+    action?: (resource: ResourceData) => void;
+    enabled?: boolean | ((resource: ResourceData) => boolean);
+    visible?: boolean | ((resource: ResourceData) => boolean);
+    danger?: boolean;
+    divider?: boolean;
+}
+/**
+ * A dropdown action menu component for displaying contextual actions.
+ * Typically used in table rows or cards to provide action options.
+ */
+export declare class ActionMenu extends LitElement {
+    actions: ActionMenuItem[];
+    resource: ResourceData;
+    disabled: boolean;
+    private _isOpen;
+    private _boundHandleClickOutside;
+    static styles: import("lit").CSSResult;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Handle clicks outside the menu to close it
+     * @param e - The click event
+     * @private
+     */
+    private _handleClickOutside;
+    /**
+     * Toggle the dropdown menu open/closed
+     * @param e - The click event
+     * @private
+     */
+    private _toggleMenu;
+    /**
+     * Handle action click
+     * @param e - The click event
+     * @param action - The action object
+     * @private
+     */
+    private _handleActionClick;
+    /**
+     * Check if an action is enabled
+     * @param action - The action object
+     * @returns boolean
+     * @private
+     */
+    private _isActionEnabled;
+    /**
+     * Render the three-dots icon
+     * @returns TemplateResult
+     * @private
+     */
+    private _renderIcon;
+    /**
+     * Get actions to display
+     * @returns Array of actions
+     * @private
+     */
+    private _getActions;
+    /**
+     * Render the component
+     * @returns TemplateResult
+     */
+    render(): TemplateResult;
+}
+export {};
+//# sourceMappingURL=action-menu.d.ts.map

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/components/action-menu/action-menu.js

@@ -0,0 +1,333 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css } from 'lit';
+import { property, state } from 'lit/decorators.js';
+/**
+ * A dropdown action menu component for displaying contextual actions.
+ * Typically used in table rows or cards to provide action options.
+ */
+export class ActionMenu extends LitElement {
+    constructor() {
+        super();
+        this.actions = [];
+        this.resource = {};
+        this.disabled = false;
+        this._isOpen = false;
+        this._boundHandleClickOutside = this._handleClickOutside.bind(this);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('click', this._boundHandleClickOutside);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('click', this._boundHandleClickOutside);
+    }
+    /**
+     * Handle clicks outside the menu to close it
+     * @param e - The click event
+     * @private
+     */
+    _handleClickOutside(e) {
+        const target = e.target;
+        if (this._isOpen && !this.contains(target)) {
+            this._isOpen = false;
+        }
+    }
+    /**
+     * Toggle the dropdown menu open/closed
+     * @param e - The click event
+     * @private
+     */
+    _toggleMenu(e) {
+        e.stopPropagation();
+        if (!this.disabled) {
+            this._isOpen = !this._isOpen;
+        }
+    }
+    /**
+     * Handle action click
+     * @param e - The click event
+     * @param action - The action object
+     * @private
+     */
+    _handleActionClick(e, action) {
+        e.stopPropagation();
+        if (this._isActionEnabled(action)) {
+            this._isOpen = false;
+            // Dispatch custom event
+            this.dispatchEvent(new CustomEvent('action-click', {
+                bubbles: true,
+                composed: true,
+                detail: { action, resource: this.resource },
+            }));
+            // Call action handler if provided
+            if (action.action && typeof action.action === 'function') {
+                action.action(this.resource);
+            }
+        }
+    }
+    /**
+     * Check if an action is enabled
+     * @param action - The action object
+     * @returns boolean
+     * @private
+     */
+    _isActionEnabled(action) {
+        if (!action.enabled)
+            return true;
+        if (typeof action.enabled === 'function') {
+            return action.enabled(this.resource);
+        }
+        return action.enabled;
+    }
+    /**
+     * Render the three-dots icon
+     * @returns TemplateResult
+     * @private
+     */
+    _renderIcon() {
+        return html `
+      <svg class="action-menu__icon" viewBox="0 0 16 16" fill="currentColor">
+        <circle cx="2" cy="8" r="1.5" />
+        <circle cx="8" cy="8" r="1.5" />
+        <circle cx="14" cy="8" r="1.5" />
+      </svg>
+    `;
+    }
+    /**
+     * Get actions to display
+     * @returns Array of actions
+     * @private
+     */
+    _getActions() {
+        // If actions are provided explicitly, use them
+        if (this.actions && this.actions.length > 0) {
+            return this.actions;
+        }
+        // Otherwise, try to get from resource.availableActions
+        if (this.resource &&
+            typeof this.resource.availableActions !== 'undefined') {
+            return this.resource.availableActions || [];
+        }
+        return [];
+    }
+    /**
+     * Render the component
+     * @returns TemplateResult
+     */
+    render() {
+        const allActions = this._getActions();
+        // Filter by visibility and enabled status
+        let visibleActions = allActions.filter((action) => {
+            // Skip dividers in visibility check
+            if (action.divider)
+                return true;
+            // Check visible property
+            if (action.visible !== undefined) {
+                if (typeof action.visible === 'function') {
+                    return action.visible(this.resource);
+                }
+                return action.visible;
+            }
+            // If no visible property, check enabled (hide if explicitly false)
+            if (action.enabled !== undefined && action.enabled === false) {
+                return false;
+            }
+            return true;
+        });
+        // Remove consecutive dividers and trailing/leading dividers
+        visibleActions = visibleActions.filter((action, index, arr) => {
+            if (!action.divider)
+                return true;
+            // Remove if first or last
+            if (index === 0 || index === arr.length - 1)
+                return false;
+            // Remove if next to another divider
+            if (arr[index - 1]?.divider || arr[index + 1]?.divider)
+                return false;
+            return true;
+        });
+        return html `
+      <button
+        class="action-menu__button"
+        ?disabled=${this.disabled}
+        @click=${this._toggleMenu}
+        aria-haspopup="true"
+        aria-expanded=${this._isOpen}
+      >
+        ${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>
+    `;
+    }
+}
+ActionMenu.styles = css `
+    :host {
+      display: inline-block;
+      position: relative;
+    }
+
+    .action-menu__button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 32px;
+      height: 32px;
+      padding: 0;
+      border: 1px solid var(--border, var(--color-border, #D7D7D7));
+      border-radius: 4px;
+      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, var(--color-grey-100, #FAFAFA));
+      border-color: var(--link, var(--color-primary, #3d98d3));
+    }
+
+    .action-menu__button:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+
+    .action-menu__icon {
+      width: 16px;
+      height: 16px;
+    }
+
+    .action-menu__dropdown {
+      position: absolute;
+      right: 0;
+      top: 100%;
+      margin-top: 4px;
+      min-width: 180px;
+      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;
+      opacity: 0;
+      visibility: hidden;
+      transform: translateY(-10px);
+      transition: all 0.2s ease-in-out;
+    }
+
+    .action-menu__dropdown--open {
+      opacity: 1;
+      visibility: visible;
+      transform: translateY(0);
+    }
+
+    .action-menu__list {
+      list-style: none;
+      margin: 0;
+      padding: 0.5rem 0;
+    }
+
+    .action-menu__item {
+      margin: 0;
+      padding: 0;
+    }
+
+    .action-menu__action {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      width: 100%;
+      padding: 0.5rem 1rem;
+      border: none;
+      background: none;
+      color: var(--body-text, var(--color-text-primary, #212121));
+      font-size: 14px;
+      text-align: left;
+      cursor: pointer;
+      transition: background-color 0.15s;
+    }
+
+    .action-menu__action:hover:not(:disabled) {
+      background-color: var(--sortable-table-row-hover-bg, var(--color-grey-100, #FAFAFA));
+    }
+
+    .action-menu__action:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+
+    .action-menu__action--danger {
+      color: var(--error, var(--color-error, #9F3A3A));
+    }
+
+    .action-menu__action--danger:hover:not(:disabled) {
+      background-color: rgba(159, 58, 58, 0.1);
+    }
+
+    .action-menu__divider {
+      height: 1px;
+      margin: 0.5rem 0;
+      background-color: var(--border, var(--color-border, #D7D7D7));
+    }
+
+    .action-menu__empty {
+      padding: 1rem;
+      text-align: center;
+      color: var(--muted, var(--color-text-muted, #8D8D8D));
+      font-size: 13px;
+    }
+  `;
+__decorate([
+    property({ type: Array })
+], ActionMenu.prototype, "actions", void 0);
+__decorate([
+    property({ type: Object })
+], ActionMenu.prototype, "resource", void 0);
+__decorate([
+    property({ type: Boolean })
+], ActionMenu.prototype, "disabled", void 0);
+__decorate([
+    state()
+], ActionMenu.prototype, "_isOpen", void 0);
+// Register the element
+customElements.define('action-menu', ActionMenu);
+//# sourceMappingURL=action-menu.js.map

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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"}