@reliability-design/web 1.0.2 → 1.0.3

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

@@ -1,394 +0,0 @@
-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>
-    `;
-  },
-};