@reliability-design/web 1.0.2

package/dist/components/rel-textfield/rel-textfield.ts

@@ -0,0 +1,224 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+
+export type TextFieldState = "default" | "focused" | "error" | "disabled";
+export type TextFieldSize = "small" | "medium" | "large";
+
+@customElement("rel-textfield")
+export class RelTextfield extends LitElement {
+  @property({ type: String }) label?: string;
+  @property({ type: String }) placeholder: string = "";
+  @property({ type: String }) type: string = "text";
+  @property({ type: String }) value: string = "";
+  @property({ type: String }) leftIcon?: string;
+  @property({ type: String }) rightIcon?: string;
+  @property({ type: String }) supportingText?: string;
+  @property({ type: String }) state: TextFieldState = "default";
+  @property({ type: String }) size: TextFieldSize = "medium";
+
+  @state() private internalState: TextFieldState = "default";
+
+  static styles = css`
+    :host {
+      display: block;
+      font-family: var(--rel-fontFamilies-primary);
+    }
+
+    /* Wrapper */
+    .textfield-wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      width: 100%;
+    }
+
+    /* Label */
+    .textfield-label {
+      font-size: 0.85rem;
+      font-weight: 500;
+      color: #111;
+    }
+
+    /* Container */
+    .textfield-container {
+      display: flex;
+      align-items: center;
+      position: relative;
+      border: 1px solid #ccc;
+      border-radius: 6px;
+      background: white;
+      transition: border 0.2s;
+    }
+
+    .textfield-container.disabled {
+      background: #f5f5f5;
+      cursor: not-allowed;
+    }
+
+    /* Input */
+    .textfield-input {
+      flex: 1;
+      border: none;
+      outline: none;
+      font-size: 0.9rem;
+      padding: 0.5rem 0.75rem;
+      background: transparent;
+      font-family: var(--rel-fontFamilies-primary);
+    }
+
+    .textfield-input:disabled {
+      cursor: not-allowed;
+      color: #999;
+    }
+
+    .icon {
+      position: absolute;
+      display: flex;
+      pointer-events: none;
+      color: #7e8186;
+    }
+
+    .icon.left {
+      left: 8px;
+    }
+
+    .icon.right {
+      right: 8px;
+    }
+
+    .textfield-wrapper.small .textfield-input {
+      padding: 0.5rem 1rem;
+      font-size: 0.9rem;
+    }
+
+    .textfield-wrapper.medium .textfield-input {
+      padding: 0.688rem 1rem;
+      font-size: 1rem;
+    }
+
+    .textfield-wrapper.large .textfield-input {
+      padding: 0.875rem 1rem;
+      font-size: 1.1rem;
+    }
+
+    /* Adjust padding when icons are present */
+    .textfield-wrapper .textfield-input.has-left-icon {
+      padding-left: 2.5rem;
+    }
+
+    .textfield-wrapper .textfield-input.has-right-icon {
+      padding-right: 2.5rem;
+    }
+
+    /* States */
+    .textfield-wrapper.focused .textfield-container {
+      border-color: #111;
+    }
+
+    .textfield-wrapper.error .textfield-container {
+      border-color: #d50000;
+    }
+
+    .textfield-wrapper.disabled .textfield-container {
+      border-color: #d7d9db;
+    }
+
+    /* Supporting text */
+    .textfield-support {
+      font-size: 0.75rem;
+      color: #666;
+    }
+
+    .textfield-support.error {
+      color: #d50000;
+    }
+  `;
+
+  private get currentState(): TextFieldState {
+    return this.state !== "default" ? this.state : this.internalState;
+  }
+
+  private handleFocus() {
+    if (this.state !== "disabled" && this.state !== "error") {
+      this.internalState = "focused";
+    }
+  }
+
+  private handleBlur() {
+    if (this.internalState === "focused") {
+      this.internalState = "default";
+    }
+  }
+
+  private handleInput(e: Event) {
+    const input = e.target as HTMLInputElement;
+    this.value = input.value;
+    this.dispatchEvent(
+      new CustomEvent("input-change", {
+        detail: { value: this.value },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  render() {
+    const wrapperClasses = [
+      "textfield-wrapper",
+      this.size,
+      this.currentState,
+    ].join(" ");
+
+    const inputClasses = [
+      "textfield-input",
+      this.leftIcon ? "has-left-icon" : "",
+      this.rightIcon ? "has-right-icon" : "",
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    return html`
+      <div class="${wrapperClasses}">
+        ${this.label
+          ? html`<label class="textfield-label">${this.label}</label>`
+          : ""}
+
+        <div
+          class="textfield-container ${this.state === "disabled"
+            ? "disabled"
+            : ""}"
+        >
+          ${this.leftIcon
+            ? html`<span class="icon left">${this.leftIcon}</span>`
+            : ""}
+
+          <input
+            type="${this.type}"
+            class="${inputClasses}"
+            placeholder="${this.placeholder}"
+            .value="${this.value}"
+            ?disabled="${this.state === "disabled"}"
+            aria-invalid="${this.state === "error"}"
+            @focus="${this.handleFocus}"
+            @blur="${this.handleBlur}"
+            @input="${this.handleInput}"
+          />
+
+          ${this.rightIcon
+            ? html`<span class="icon right">${this.rightIcon}</span>`
+            : ""}
+        </div>
+
+        ${this.supportingText
+          ? html`<div
+              class="textfield-support ${this.state === "error"
+                ? "error"
+                : ""}"
+            >
+              ${this.supportingText}
+            </div>`
+          : ""}
+      </div>
+    `;
+  }
+}

package/dist/components/rel-toast/rel-toast.stories.ts

@@ -0,0 +1,394 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import { html } from 'lit';
+import './rel-toast';
+
+/**
+ * The Toast component displays brief, temporary notifications at the bottom of the screen.
+ * Built with Lit web components for framework-agnostic usage.
+ *
+ * ## Features
+ * - **2 Types**: default (dark), error (red)
+ * - **Action Button**: Optional action with custom label
+ * - **Auto Dismiss**: Configurable duration (default 4000ms)
+ * - **Manual Dismiss**: Close button always available
+ * - **Animations**: Smooth fade-in-up animation
+ * - **Programmatic Control**: show() and close() methods
+ */
+const meta: Meta = {
+  title: 'Components/Toast',
+  tags: ['autodocs'],
+  component: 'rel-toast',
+  argTypes: {
+    message: {
+      control: 'text',
+      description: 'Message to display in the toast',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    type: {
+      control: { type: 'select' },
+      options: ['default', 'error'],
+      description: 'Visual style of the toast',
+      table: {
+        defaultValue: { summary: 'default' },
+        type: { summary: 'string' },
+      },
+    },
+    actionLabel: {
+      control: 'text',
+      description: 'Label for the action button (optional)',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    duration: {
+      control: 'number',
+      description: 'Auto-dismiss duration in milliseconds (0 = no auto-dismiss)',
+      table: {
+        defaultValue: { summary: 4000 },
+        type: { summary: 'number' },
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj;
+
+/**
+ * Default toast - standard notification with dark background
+ */
+export const Default: Story = {
+  render: () => {
+    const showToast = () => {
+      const toast = document.querySelector('rel-toast') as any;
+      if (toast) toast.show();
+    };
+    return html`
+      <div>
+        <button @click="${showToast}" style="padding: 12px 24px; background: #111; color: white; border: none; border-radius: 6px; cursor: pointer;">
+          Show Toast
+        </button>
+        <rel-toast message="This is a toast notification"></rel-toast>
+      </div>
+    `;
+  },
+};
+
+/**
+ * Error toast - error notification with red background
+ */
+export const ErrorToast: Story = {
+  render: () => {
+    const showToast = () => {
+      const toast = document.querySelector('rel-toast') as any;
+      if (toast) toast.show();
+    };
+    return html`
+      <div>
+        <button @click="${showToast}" style="padding: 12px 24px; background: #d50000; color: white; border: none; border-radius: 6px; cursor: pointer;">
+          Show Error Toast
+        </button>
+        <rel-toast message="An error occurred!" type="error"></rel-toast>
+      </div>
+    `;
+  },
+};
+
+/**
+ * With action button - toast with actionable button
+ */
+export const WithAction: Story = {
+  render: () => {
+    const showToast = () => {
+      const toast = document.querySelector('rel-toast') as any;
+      if (toast) toast.show();
+    };
+    const handleAction = () => {
+      alert('Action clicked!');
+    };
+    return html`
+      <div>
+        <button @click="${showToast}" style="padding: 12px 24px; background: #111; color: white; border: none; border-radius: 6px; cursor: pointer;">
+          Show Toast with Action
+        </button>
+        <rel-toast
+          message="Item added to cart"
+          actionLabel="UNDO"
+          @action="${handleAction}"
+        ></rel-toast>
+      </div>
+    `;
+  },
+};
+
+/**
+ * Without action - simple toast with just message and close button
+ */
+export const WithoutAction: Story = {
+  render: () => {
+    const showToast = () => {
+      const toast = document.querySelector('rel-toast') as any;
+      if (toast) toast.show();
+    };
+    return html`
+      <div>
+        <button @click="${showToast}" style="padding: 12px 24px; background: #111; color: white; border: none; border-radius: 6px; cursor: pointer;">
+          Show Simple Toast
+        </button>
+        <rel-toast message="Changes saved successfully"></rel-toast>
+      </div>
+    `;
+  },
+};
+
+/**
+ * Long duration - toast that stays visible for 8 seconds
+ */
+export const LongDuration: Story = {
+  render: () => {
+    const showToast = () => {
+      const toast = document.querySelector('rel-toast') as any;
+      if (toast) toast.show();
+    };
+    return html`
+      <div>
+        <button @click="${showToast}" style="padding: 12px 24px; background: #111; color: white; border: none; border-radius: 6px; cursor: pointer;">
+          Show Long Toast (8s)
+        </button>
+        <rel-toast message="This toast will stay for 8 seconds" duration="8000"></rel-toast>
+      </div>
+    `;
+  },
+};
+
+/**
+ * Short duration - toast that dismisses quickly (2 seconds)
+ */
+export const ShortDuration: Story = {
+  render: () => {
+    const showToast = () => {
+      const toast = document.querySelector('rel-toast') as any;
+      if (toast) toast.show();
+    };
+    return html`
+      <div>
+        <button @click="${showToast}" style="padding: 12px 24px; background: #111; color: white; border: none; border-radius: 6px; cursor: pointer;">
+          Show Quick Toast (2s)
+        </button>
+        <rel-toast message="Quick message" duration="2000"></rel-toast>
+      </div>
+    `;
+  },
+};
+
+/**
+ * No auto-dismiss - toast stays until manually closed
+ */
+export const NoAutoDismiss: Story = {
+  render: () => {
+    const showToast = () => {
+      const toast = document.querySelector('rel-toast') as any;
+      if (toast) toast.show();
+    };
+    return html`
+      <div>
+        <button @click="${showToast}" style="padding: 12px 24px; background: #111; color: white; border: none; border-radius: 6px; cursor: pointer;">
+          Show Persistent Toast
+        </button>
+        <rel-toast message="This toast won't auto-dismiss. Click X to close." duration="0"></rel-toast>
+      </div>
+    `;
+  },
+};
+
+/**
+ * Save notification - realistic save confirmation
+ */
+export const SaveNotification: Story = {
+  render: () => {
+    const showToast = () => {
+      const toast = document.querySelector('rel-toast') as any;
+      if (toast) toast.show();
+    };
+    return html`
+      <div>
+        <button @click="${showToast}" style="padding: 12px 24px; background: #0edb90; color: #111; border: none; border-radius: 6px; cursor: pointer; font-weight: 600;">
+          Save Changes
+        </button>
+        <rel-toast message="Your changes have been saved"></rel-toast>
+      </div>
+    `;
+  },
+};
+
+/**
+ * Delete notification - error toast with undo action
+ */
+export const DeleteNotification: Story = {
+  render: () => {
+    const showToast = () => {
+      const toast = document.querySelector('rel-toast') as any;
+      if (toast) toast.show();
+    };
+    const handleUndo = () => {
+      alert('Delete undone!');
+    };
+    return html`
+      <div>
+        <button @click="${showToast}" style="padding: 12px 24px; background: #d50000; color: white; border: none; border-radius: 6px; cursor: pointer;">
+          Delete Item
+        </button>
+        <rel-toast
+          message="Item deleted"
+          type="error"
+          actionLabel="UNDO"
+          @action="${handleUndo}"
+        ></rel-toast>
+      </div>
+    `;
+  },
+};
+
+/**
+ * Network error - error toast for connection issues
+ */
+export const NetworkError: Story = {
+  render: () => {
+    const showToast = () => {
+      const toast = document.querySelector('rel-toast') as any;
+      if (toast) toast.show();
+    };
+    const handleRetry = () => {
+      alert('Retrying...');
+    };
+    return html`
+      <div>
+        <button @click="${showToast}" style="padding: 12px 24px; background: #d50000; color: white; border: none; border-radius: 6px; cursor: pointer;">
+          Simulate Network Error
+        </button>
+        <rel-toast
+          message="Network connection failed"
+          type="error"
+          actionLabel="RETRY"
+          duration="0"
+          @action="${handleRetry}"
+        ></rel-toast>
+      </div>
+    `;
+  },
+};
+
+/**
+ * Copy notification - confirmation for copy action
+ */
+export const CopyNotification: Story = {
+  render: () => {
+    const showToast = () => {
+      const toast = document.querySelector('rel-toast') as any;
+      if (toast) toast.show();
+    };
+    return html`
+      <div>
+        <button @click="${showToast}" style="padding: 12px 24px; background: #111; color: white; border: none; border-radius: 6px; cursor: pointer;">
+          Copy to Clipboard
+        </button>
+        <rel-toast message="Copied to clipboard" duration="2000"></rel-toast>
+      </div>
+    `;
+  },
+};
+
+/**
+ * Multiple toasts demo - shows handling of sequential toasts
+ */
+export const MultipleToasts: Story = {
+  render: () => {
+    let toastCount = 0;
+    const showToast = () => {
+      toastCount++;
+      const container = document.querySelector('#toast-container');
+      if (container) {
+        const toast = document.createElement('rel-toast') as any;
+        toast.setAttribute('message', `Toast notification #${toastCount}`);
+        toast.style.position = 'fixed';
+        toast.style.bottom = `${24 + (toastCount - 1) * 70}px`;
+        container.appendChild(toast);
+        toast.show();
+
+        // Clean up after toast dismisses
+        toast.addEventListener('dismissed', () => {
+          setTimeout(() => {
+            container.removeChild(toast);
+            toastCount--;
+          }, 300);
+        });
+      }
+    };
+    return html`
+      <div>
+        <button @click="${showToast}" style="padding: 12px 24px; background: #111; color: white; border: none; border-radius: 6px; cursor: pointer;">
+          Show Multiple Toasts
+        </button>
+        <div id="toast-container"></div>
+      </div>
+    `;
+  },
+};
+
+/**
+ * All types showcase - displays both toast types
+ */
+export const AllTypes: Story = {
+  render: () => {
+    const showDefaultToast = () => {
+      const toast = document.querySelector('#default-toast') as any;
+      if (toast) toast.show();
+    };
+    const showErrorToast = () => {
+      const toast = document.querySelector('#error-toast') as any;
+      if (toast) toast.show();
+    };
+    return html`
+      <div style="display: flex; gap: 16px;">
+        <button @click="${showDefaultToast}" style="padding: 12px 24px; background: #111; color: white; border: none; border-radius: 6px; cursor: pointer;">
+          Show Default
+        </button>
+        <button @click="${showErrorToast}" style="padding: 12px 24px; background: #d50000; color: white; border: none; border-radius: 6px; cursor: pointer;">
+          Show Error
+        </button>
+        <rel-toast id="default-toast" message="Default toast notification" type="default"></rel-toast>
+        <rel-toast id="error-toast" message="Error toast notification" type="error"></rel-toast>
+      </div>
+    `;
+  },
+};
+
+/**
+ * Action variations - toasts with and without actions
+ */
+export const ActionVariations: Story = {
+  render: () => {
+    const showWithAction = () => {
+      const toast = document.querySelector('#with-action') as any;
+      if (toast) toast.show();
+    };
+    const showWithoutAction = () => {
+      const toast = document.querySelector('#without-action') as any;
+      if (toast) toast.show();
+    };
+    return html`
+      <div style="display: flex; gap: 16px;">
+        <button @click="${showWithAction}" style="padding: 12px 24px; background: #111; color: white; border: none; border-radius: 6px; cursor: pointer;">
+          With Action
+        </button>
+        <button @click="${showWithoutAction}" style="padding: 12px 24px; background: #111; color: white; border: none; border-radius: 6px; cursor: pointer;">
+          Without Action
+        </button>
+        <rel-toast id="with-action" message="Item added" actionLabel="UNDO"></rel-toast>
+        <rel-toast id="without-action" message="Operation completed"></rel-toast>
+      </div>
+    `;
+  },
+};