@krumio/trailhand-ui 1.4.1

package/README.md

@@ -0,0 +1,104 @@
+# Trailhand UI
+
+A component library built with Lit Element web components and Storybook.
+
+## Recommended IDE Setup
+
+VSCode with ES6 and Lit plugin support.
+
+## Project Setup
+
+```bash
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```bash
+npm start
+```
+
+### Storybook Development
+
+```bash
+npm run storybook
+```
+
+### Build for Production
+
+```bash
+npm run build
+```
+
+### Build Storybook Static Site
+
+```bash
+npm run build-storybook
+```
+
+## File Structure
+
+```
+trailhand-ui/
+├── Components/           # Web components
+├── stories/              # Storybook stories
+├── .storybook/           # Storybook configuration
+│   ├── main.js
+│   └── preview.js
+├── index.html            # Demo page
+└── 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
+
+Learn more at [lit.dev](https://lit.dev)
+
+## Storybook
+
+Storybook provides an isolated environment for component development and documentation.
+
+### Setup
+
+Storybook was initialized using:
+
+```bash
+npm create storybook@latest
+```
+
+**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
+
+Every component should have stories that demonstrate its various states and configurations.
+
+```javascript
+export default {
+  title: 'Components/ComponentName',
+  tags: ['autodocs'],
+};
+
+export const Default = {
+  args: {
+    // component props
+  },
+};
+```
+
+## Tech Stack
+
+- **Lit Element** 3.3.1 - Web component library
+- **Vite** 6.4.1 - Build tool
+- **Storybook** 8.6.14 - Component documentation
+- **Node.js** v20.18.0+

package/dist/Button.d.ts

@@ -0,0 +1,15 @@
+import { TemplateResult } from 'lit';
+import './button.css';
+/**
+ * Props for the Button component
+ */
+export interface ButtonProps {
+    primary?: boolean;
+    backgroundColor?: string | null;
+    size?: 'small' | 'medium' | 'large';
+    label: string;
+    onClick?: (e: Event) => void;
+}
+/** Primary UI component for user interaction */
+export declare const Button: ({ primary, backgroundColor, size, label, onClick }: ButtonProps) => TemplateResult;
+//# sourceMappingURL=Button.d.ts.map

package/dist/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../Components/Button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAG3C,OAAO,cAAc,CAAC;AAEtB;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;CAC9B;AAED,gDAAgD;AAChD,eAAO,MAAM,MAAM,GAAI,oDAMpB,WAAW,KAAG,cAahB,CAAC"}

package/dist/Button.js

@@ -0,0 +1,18 @@
+import { html } from 'lit';
+import { styleMap } from 'lit/directives/style-map.js';
+import './button.css';
+/** Primary UI component for user interaction */
+export const Button = ({ primary, backgroundColor = null, size, label, onClick }) => {
+    const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+    return html `
+    <button
+      type="button"
+      class=${['storybook-button', `storybook-button--${size || 'medium'}`, mode].join(' ')}
+      style=${styleMap({ backgroundColor })}
+      @click=${onClick}
+    >
+      ${label}
+    </button>
+  `;
+};
+//# sourceMappingURL=Button.js.map

package/dist/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../Components/Button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,cAAc,CAAC;AAatB,gDAAgD;AAChD,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EACrB,OAAO,EACP,eAAe,GAAG,IAAI,EACtB,IAAI,EACJ,KAAK,EACL,OAAO,EACK,EAAkB,EAAE;IAChC,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,6BAA6B,CAAC;IAEnF,OAAO,IAAI,CAAA;;;cAGC,CAAC,kBAAkB,EAAE,qBAAqB,IAAI,IAAI,QAAQ,EAAE,EAAE,IAAI,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;cAC7E,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAC;eAC5B,OAAO;;QAEd,KAAK;;GAEV,CAAC;AACJ,CAAC,CAAC"}

package/dist/Header.d.ts

@@ -0,0 +1,15 @@
+import { TemplateResult } from 'lit';
+import './header.css';
+/**
+ * Props for the Header component
+ */
+export interface HeaderProps {
+    user?: {
+        name?: string;
+    } | null;
+    onLogin?: (e: Event) => void;
+    onLogout?: (e: Event) => void;
+    onCreateAccount?: (e: Event) => void;
+}
+export declare const Header: ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => TemplateResult;
+//# sourceMappingURL=Header.d.ts.map

package/dist/Header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../Components/Header.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAG3C,OAAO,cAAc,CAAC;AAEtB;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC7B,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC9B,eAAe,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;CACtC;AAED,eAAO,MAAM,MAAM,GAAI,8CAKpB,WAAW,KAAG,cAuChB,CAAC"}

package/dist/Header.js

@@ -0,0 +1,44 @@
+import { html } from 'lit';
+import { Button } from './Button';
+import './header.css';
+export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => html `
+  <header>
+    <div class="storybook-header">
+      <div>
+        <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+          <g fill="none" fillRule="evenodd">
+            <path
+              d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
+              fill="#FFF"
+            />
+            <path
+              d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
+              fill="#555AB9"
+            />
+            <path
+              d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
+              fill="#91BAF8"
+            />
+          </g>
+        </svg>
+        <h1>Acme</h1>
+      </div>
+      <div>
+        ${user
+    ? Button({ size: 'small', onClick: onLogout, label: 'Log out' })
+    : html `${Button({
+        size: 'small',
+        onClick: onLogin,
+        label: 'Log in',
+    })}
+            ${Button({
+        primary: true,
+        size: 'small',
+        onClick: onCreateAccount,
+        label: 'Sign up',
+    })}`}
+      </div>
+    </div>
+  </header>
+`;
+//# sourceMappingURL=Header.js.map

package/dist/Header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.js","sourceRoot":"","sources":["../Components/Header.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAE3C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,cAAc,CAAC;AAYtB,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EACrB,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,eAAe,EACH,EAAkB,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;UAuB7B,IAAI;IACJ,CAAC,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC;IAChE,CAAC,CAAC,IAAI,CAAA,GAAG,MAAM,CAAC;QACZ,IAAI,EAAE,OAAO;QACb,OAAO,EAAE,OAAO;QAChB,KAAK,EAAE,QAAQ;KAChB,CAAC;cACA,MAAM,CAAC;QACP,OAAO,EAAE,IAAI;QACb,IAAI,EAAE,OAAO;QACb,OAAO,EAAE,eAAe;QACxB,KAAK,EAAE,SAAS;KACjB,CAAC,EAAE;;;;CAIf,CAAC"}

package/dist/Page.d.ts

@@ -0,0 +1,9 @@
+import { TemplateResult } from 'lit';
+import { HeaderProps } from './Header';
+import './page.css';
+/**
+ * Props for the Page component (extends HeaderProps)
+ */
+export type PageProps = HeaderProps;
+export declare const Page: ({ user, onLogin, onLogout, onCreateAccount }: PageProps) => TemplateResult;
+//# sourceMappingURL=Page.d.ts.map

package/dist/Page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Page.d.ts","sourceRoot":"","sources":["../Components/Page.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAE3C,OAAO,EAAU,WAAW,EAAE,MAAM,UAAU,CAAC;AAC/C,OAAO,YAAY,CAAC;AAEpB;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,WAAW,CAAC;AAEpC,eAAO,MAAM,IAAI,GAAI,8CAKlB,SAAS,KAAG,cAwDd,CAAC"}

package/dist/Page.js

@@ -0,0 +1,61 @@
+import { html } from 'lit';
+import { Header } from './Header';
+import './page.css';
+export const Page = ({ user, onLogin, onLogout, onCreateAccount }) => html `
+  <article>
+    ${Header({
+    user,
+    onLogin,
+    onLogout,
+    onCreateAccount,
+})}
+
+    <section class="storybook-page">
+      <h2>Pages in Storybook</h2>
+      <p>
+        We recommend building UIs with a
+        <a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
+          <strong>component-driven</strong> </a
+        >process starting with atomic components and ending with pages.
+      </p>
+      <p>
+        Render pages with mock data. This makes it easy to build and review page states without
+        needing to navigate to them in your app. Here are some handy patterns for managing page data
+        in Storybook:
+      </p>
+      <ul>
+        <li>
+          Use a higher-level connected component. Storybook helps you compose such data from the
+          "args" of child component stories
+        </li>
+        <li>
+          Assemble data in the page component from your services. You can mock these services out
+          using Storybook.
+        </li>
+      </ul>
+      <p>
+        Get a guided tutorial on component-driven development at
+        <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
+          Storybook tutorials
+        </a>
+        . Read more in the
+        <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer"> docs </a>
+        .
+      </p>
+      <div class="tip-wrapper">
+        <span class="tip">Tip</span> Adjust the width of the canvas with the
+        <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+          <g fill="none" fillRule="evenodd">
+            <path
+              d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
+              id="a"
+              fill="#999"
+            />
+          </g>
+        </svg>
+        Viewports addon in the toolbar
+      </div>
+    </section>
+  </article>
+`;
+//# sourceMappingURL=Page.js.map

package/dist/Page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Page.js","sourceRoot":"","sources":["../Components/Page.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAE3C,OAAO,EAAE,MAAM,EAAe,MAAM,UAAU,CAAC;AAC/C,OAAO,YAAY,CAAC;AAOpB,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EACnB,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,eAAe,EACL,EAAkB,EAAE,CAAC,IAAI,CAAA;;MAE/B,MAAM,CAAC;IACP,IAAI;IACJ,OAAO;IACP,QAAQ;IACR,eAAe;CAChB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiDL,CAAC"}

package/dist/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/action-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-menu.d.ts","sourceRoot":"","sources":["../Components/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;IAoB1B;;;;;OAKG;IACH,OAAO,CAAC,gBAAgB;IAQxB;;;;OAIG;IACH,OAAO,CAAC,WAAW;IAUnB;;;;OAIG;IACH,OAAO,CAAC,WAAW;IAYnB;;;OAGG;IACM,MAAM,IAAI,cAAc;CAuElC"}