@reliability-design/web 1.0.2 → 1.0.3

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

@@ -1,441 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/web-components";
-import { html } from "lit";
-import "./rel-switch";
-
-const meta: Meta = {
-  title: "Components/Switch",
-  component: "rel-switch",
-  tags: ["autodocs"],
-  argTypes: {
-    checked: {
-      control: "boolean",
-      description: "Whether the switch is checked",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: "false" },
-      },
-    },
-    disabled: {
-      control: "boolean",
-      description: "Whether the switch is disabled",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: "false" },
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj;
-
-export const Default: Story = {
-  args: {
-    checked: false,
-    disabled: false,
-  },
-  render: (args) => html`
-    <rel-switch
-      ?checked=${args.checked}
-      ?disabled=${args.disabled}
-    ></rel-switch>
-  `,
-};
-
-export const Checked: Story = {
-  args: {
-    checked: true,
-    disabled: false,
-  },
-  render: (args) => html`
-    <rel-switch
-      ?checked=${args.checked}
-      ?disabled=${args.disabled}
-    ></rel-switch>
-  `,
-};
-
-export const Disabled: Story = {
-  args: {
-    checked: false,
-    disabled: true,
-  },
-  render: (args) => html`
-    <rel-switch
-      ?checked=${args.checked}
-      ?disabled=${args.disabled}
-    ></rel-switch>
-  `,
-};
-
-export const DisabledChecked: Story = {
-  args: {
-    checked: true,
-    disabled: true,
-  },
-  render: (args) => html`
-    <rel-switch
-      ?checked=${args.checked}
-      ?disabled=${args.disabled}
-    ></rel-switch>
-  `,
-};
-
-export const Interactive: Story = {
-  render: () => html`
-    <div style="display: flex; flex-direction: column; gap: 20px;">
-      <div style="display: flex; align-items: center; gap: 12px;">
-        <rel-switch></rel-switch>
-        <span>Default (Unchecked)</span>
-      </div>
-      <div style="display: flex; align-items: center; gap: 12px;">
-        <rel-switch checked></rel-switch>
-        <span>Checked</span>
-      </div>
-      <div style="display: flex; align-items: center; gap: 12px;">
-        <rel-switch disabled></rel-switch>
-        <span>Disabled (Unchecked)</span>
-      </div>
-      <div style="display: flex; align-items: center; gap: 12px;">
-        <rel-switch checked disabled></rel-switch>
-        <span>Disabled (Checked)</span>
-      </div>
-    </div>
-  `,
-};
-
-export const WithEventListener: Story = {
-  render: () => {
-    const handleChange = (e: CustomEvent) => {
-      console.log("Switch changed:", e.detail);
-      const output = document.getElementById("switch-output");
-      if (output) {
-        output.textContent = `Switch is now: ${e.detail ? "ON" : "OFF"}`;
-      }
-    };
-
-    return html`
-      <div style="display: flex; flex-direction: column; gap: 12px;">
-        <div style="display: flex; align-items: center; gap: 12px;">
-          <rel-switch @changed=${handleChange}></rel-switch>
-          <span>Toggle me and check the output below</span>
-        </div>
-        <div
-          id="switch-output"
-          style="padding: 8px; background: #f0f0f0; border-radius: 4px;"
-        >
-          Switch is now: OFF
-        </div>
-      </div>
-    `;
-  },
-};
-
-export const WithLabels: Story = {
-  render: () => html`
-    <div style="display: flex; flex-direction: column; gap: 20px;">
-      <div style="display: flex; align-items: center; gap: 12px;">
-        <label style="font-size: 14px; font-weight: 500;">Enable Notifications</label>
-        <rel-switch checked></rel-switch>
-      </div>
-      <div style="display: flex; align-items: center; gap: 12px;">
-        <label style="font-size: 14px; font-weight: 500;">Dark Mode</label>
-        <rel-switch></rel-switch>
-      </div>
-      <div style="display: flex; align-items: center; gap: 12px;">
-        <rel-switch checked></rel-switch>
-        <label style="font-size: 14px; font-weight: 500;">Auto-save (Right Label)</label>
-      </div>
-    </div>
-  `,
-};
-
-export const WithDescriptiveLabels: Story = {
-  render: () => html`
-    <div style="display: flex; flex-direction: column; gap: 24px; max-width: 400px;">
-      <div style="display: flex; align-items: flex-start; gap: 12px;">
-        <div style="flex: 1;">
-          <div style="font-size: 14px; font-weight: 500; margin-bottom: 4px;">Email Notifications</div>
-          <div style="font-size: 12px; color: #666;">Receive email updates about your account activity</div>
-        </div>
-        <rel-switch checked></rel-switch>
-      </div>
-      <div style="display: flex; align-items: flex-start; gap: 12px;">
-        <div style="flex: 1;">
-          <div style="font-size: 14px; font-weight: 500; margin-bottom: 4px;">Two-Factor Authentication</div>
-          <div style="font-size: 12px; color: #666;">Add an extra layer of security to your account</div>
-        </div>
-        <rel-switch></rel-switch>
-      </div>
-      <div style="display: flex; align-items: flex-start; gap: 12px;">
-        <div style="flex: 1;">
-          <div style="font-size: 14px; font-weight: 500; margin-bottom: 4px;">Marketing Communications</div>
-          <div style="font-size: 12px; color: #666;">Receive promotional emails and product updates</div>
-        </div>
-        <rel-switch disabled></rel-switch>
-      </div>
-    </div>
-  `,
-};
-
-export const InFormContext: Story = {
-  render: () => {
-    const handleSubmit = (e: Event) => {
-      e.preventDefault();
-      const formData = new FormData(e.target as HTMLFormElement);
-      const notifications = (e.target as HTMLFormElement).querySelector('[name="notifications"]') as any;
-      const autoSave = (e.target as HTMLFormElement).querySelector('[name="autoSave"]') as any;
-      const darkMode = (e.target as HTMLFormElement).querySelector('[name="darkMode"]') as any;
-
-      console.log('Form submitted:', {
-        notifications: notifications?.checked || false,
-        autoSave: autoSave?.checked || false,
-        darkMode: darkMode?.checked || false,
-      });
-
-      alert(`Form Values:\nNotifications: ${notifications?.checked || false}\nAuto-save: ${autoSave?.checked || false}\nDark Mode: ${darkMode?.checked || false}`);
-    };
-
-    return html`
-      <form @submit=${handleSubmit} style="display: flex; flex-direction: column; gap: 20px; max-width: 400px;">
-        <h3 style="margin: 0 0 8px 0;">User Preferences</h3>
-
-        <div style="display: flex; align-items: center; justify-content: space-between;">
-          <label style="font-size: 14px; font-weight: 500;">Enable Notifications</label>
-          <rel-switch name="notifications" checked></rel-switch>
-        </div>
-
-        <div style="display: flex; align-items: center; justify-content: space-between;">
-          <label style="font-size: 14px; font-weight: 500;">Auto-save</label>
-          <rel-switch name="autoSave" checked></rel-switch>
-        </div>
-
-        <div style="display: flex; align-items: center; justify-content: space-between;">
-          <label style="font-size: 14px; font-weight: 500;">Dark Mode</label>
-          <rel-switch name="darkMode"></rel-switch>
-        </div>
-
-        <button type="submit" style="padding: 8px 16px; background: #000; color: #fff; border: none; border-radius: 4px; cursor: pointer; margin-top: 8px;">
-          Save Preferences
-        </button>
-      </form>
-    `;
-  },
-};
-
-export const ToggleGroup: Story = {
-  render: () => html`
-    <div style="display: flex; flex-direction: column; gap: 16px; max-width: 400px;">
-      <h4 style="margin: 0 0 8px 0; font-size: 16px;">Privacy Settings</h4>
-
-      <div style="display: flex; align-items: center; justify-content: space-between; padding: 12px; background: #f9f9f9; border-radius: 6px;">
-        <span style="font-size: 14px;">Profile Visibility</span>
-        <rel-switch checked></rel-switch>
-      </div>
-
-      <div style="display: flex; align-items: center; justify-content: space-between; padding: 12px; background: #f9f9f9; border-radius: 6px;">
-        <span style="font-size: 14px;">Show Online Status</span>
-        <rel-switch checked></rel-switch>
-      </div>
-
-      <div style="display: flex; align-items: center; justify-content: space-between; padding: 12px; background: #f9f9f9; border-radius: 6px;">
-        <span style="font-size: 14px;">Allow Messages from Anyone</span>
-        <rel-switch></rel-switch>
-      </div>
-
-      <div style="display: flex; align-items: center; justify-content: space-between; padding: 12px; background: #f9f9f9; border-radius: 6px;">
-        <span style="font-size: 14px;">Share Activity Status</span>
-        <rel-switch></rel-switch>
-      </div>
-    </div>
-  `,
-};
-
-export const NotificationSettings: Story = {
-  render: () => {
-    const handleChange = (e: CustomEvent, name: string) => {
-      console.log(`${name} changed to:`, e.detail);
-    };
-
-    return html`
-      <div style="display: flex; flex-direction: column; gap: 0; max-width: 500px; border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden;">
-        <div style="padding: 16px; background: #f5f5f5; border-bottom: 1px solid #e0e0e0;">
-          <h3 style="margin: 0; font-size: 18px;">Notification Preferences</h3>
-        </div>
-
-        <div style="display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid #e0e0e0;">
-          <div>
-            <div style="font-size: 14px; font-weight: 500; margin-bottom: 4px;">Push Notifications</div>
-            <div style="font-size: 12px; color: #666;">Receive push notifications on your device</div>
-          </div>
-          <rel-switch checked @changed=${(e: CustomEvent) => handleChange(e, 'Push Notifications')}></rel-switch>
-        </div>
-
-        <div style="display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid #e0e0e0;">
-          <div>
-            <div style="font-size: 14px; font-weight: 500; margin-bottom: 4px;">Email Digest</div>
-            <div style="font-size: 12px; color: #666;">Daily summary of important updates</div>
-          </div>
-          <rel-switch checked @changed=${(e: CustomEvent) => handleChange(e, 'Email Digest')}></rel-switch>
-        </div>
-
-        <div style="display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid #e0e0e0;">
-          <div>
-            <div style="font-size: 14px; font-weight: 500; margin-bottom: 4px;">SMS Alerts</div>
-            <div style="font-size: 12px; color: #666;">Critical alerts via text message</div>
-          </div>
-          <rel-switch @changed=${(e: CustomEvent) => handleChange(e, 'SMS Alerts')}></rel-switch>
-        </div>
-
-        <div style="display: flex; align-items: center; justify-content: space-between; padding: 16px;">
-          <div>
-            <div style="font-size: 14px; font-weight: 500; margin-bottom: 4px;">Marketing Updates</div>
-            <div style="font-size: 12px; color: #666;">News about products and features</div>
-          </div>
-          <rel-switch @changed=${(e: CustomEvent) => handleChange(e, 'Marketing Updates')}></rel-switch>
-        </div>
-      </div>
-    `;
-  },
-};
-
-export const AccessibilitySettings: Story = {
-  render: () => html`
-    <div style="display: flex; flex-direction: column; gap: 0; max-width: 500px; border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden;">
-      <div style="padding: 16px; background: #f5f5f5; border-bottom: 1px solid #e0e0e0;">
-        <h3 style="margin: 0; font-size: 18px;">Accessibility</h3>
-        <p style="margin: 8px 0 0 0; font-size: 13px; color: #666;">Customize your experience</p>
-      </div>
-
-      <div style="display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid #e0e0e0;">
-        <div style="flex: 1;">
-          <div style="font-size: 14px; font-weight: 500; margin-bottom: 4px;">High Contrast Mode</div>
-          <div style="font-size: 12px; color: #666;">Increase contrast for better visibility</div>
-        </div>
-        <rel-switch></rel-switch>
-      </div>
-
-      <div style="display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid #e0e0e0;">
-        <div style="flex: 1;">
-          <div style="font-size: 14px; font-weight: 500; margin-bottom: 4px;">Reduce Motion</div>
-          <div style="font-size: 12px; color: #666;">Minimize animations and transitions</div>
-        </div>
-        <rel-switch></rel-switch>
-      </div>
-
-      <div style="display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid #e0e0e0;">
-        <div style="flex: 1;">
-          <div style="font-size: 14px; font-weight: 500; margin-bottom: 4px;">Screen Reader Support</div>
-          <div style="font-size: 12px; color: #666;">Enhanced support for screen readers</div>
-        </div>
-        <rel-switch checked></rel-switch>
-      </div>
-
-      <div style="display: flex; align-items: center; justify-content: space-between; padding: 16px;">
-        <div style="flex: 1;">
-          <div style="font-size: 14px; font-weight: 500; margin-bottom: 4px;">Keyboard Navigation</div>
-          <div style="font-size: 12px; color: #666;">Optimized keyboard shortcuts</div>
-        </div>
-        <rel-switch checked></rel-switch>
-      </div>
-    </div>
-  `,
-};
-
-export const AccountSettings: Story = {
-  render: () => html`
-    <div style="display: flex; flex-direction: column; gap: 24px; max-width: 600px;">
-      <section>
-        <h3 style="margin: 0 0 16px 0; font-size: 16px; font-weight: 600;">Security</h3>
-        <div style="display: flex; flex-direction: column; gap: 16px;">
-          <div style="display: flex; align-items: center; justify-content: space-between; padding: 12px; background: #f9f9f9; border-radius: 6px;">
-            <div>
-              <div style="font-size: 14px; font-weight: 500;">Two-Factor Authentication</div>
-              <div style="font-size: 12px; color: #666; margin-top: 4px;">Require 2FA for sign in</div>
-            </div>
-            <rel-switch checked></rel-switch>
-          </div>
-
-          <div style="display: flex; align-items: center; justify-content: space-between; padding: 12px; background: #f9f9f9; border-radius: 6px;">
-            <div>
-              <div style="font-size: 14px; font-weight: 500;">Login Alerts</div>
-              <div style="font-size: 12px; color: #666; margin-top: 4px;">Get notified of new sign-ins</div>
-            </div>
-            <rel-switch checked></rel-switch>
-          </div>
-        </div>
-      </section>
-
-      <section>
-        <h3 style="margin: 0 0 16px 0; font-size: 16px; font-weight: 600;">Preferences</h3>
-        <div style="display: flex; flex-direction: column; gap: 16px;">
-          <div style="display: flex; align-items: center; justify-content: space-between; padding: 12px; background: #f9f9f9; border-radius: 6px;">
-            <div>
-              <div style="font-size: 14px; font-weight: 500;">Email Notifications</div>
-              <div style="font-size: 12px; color: #666; margin-top: 4px;">Receive account updates via email</div>
-            </div>
-            <rel-switch checked></rel-switch>
-          </div>
-
-          <div style="display: flex; align-items: center; justify-content: space-between; padding: 12px; background: #f9f9f9; border-radius: 6px;">
-            <div>
-              <div style="font-size: 14px; font-weight: 500;">Newsletter Subscription</div>
-              <div style="font-size: 12px; color: #666; margin-top: 4px;">Weekly updates and tips</div>
-            </div>
-            <rel-switch></rel-switch>
-          </div>
-
-          <div style="display: flex; align-items: center; justify-content: space-between; padding: 12px; background: #f9f9f9; border-radius: 6px;">
-            <div>
-              <div style="font-size: 14px; font-weight: 500;">Beta Features</div>
-              <div style="font-size: 12px; color: #666; margin-top: 4px;">Try experimental features early</div>
-            </div>
-            <rel-switch></rel-switch>
-          </div>
-        </div>
-      </section>
-    </div>
-  `,
-};
-
-export const DashboardSettings: Story = {
-  render: () => html`
-    <div style="display: flex; gap: 24px; flex-wrap: wrap;">
-      <div style="flex: 1; min-width: 280px; padding: 20px; border: 1px solid #e0e0e0; border-radius: 8px;">
-        <h4 style="margin: 0 0 16px 0; font-size: 14px; font-weight: 600; text-transform: uppercase; color: #666;">Display</h4>
-        <div style="display: flex; flex-direction: column; gap: 16px;">
-          <div style="display: flex; align-items: center; justify-content: space-between;">
-            <span style="font-size: 14px;">Dark Mode</span>
-            <rel-switch></rel-switch>
-          </div>
-          <div style="display: flex; align-items: center; justify-content: space-between;">
-            <span style="font-size: 14px;">Compact View</span>
-            <rel-switch checked></rel-switch>
-          </div>
-          <div style="display: flex; align-items: center; justify-content: space-between;">
-            <span style="font-size: 14px;">Show Sidebar</span>
-            <rel-switch checked></rel-switch>
-          </div>
-        </div>
-      </div>
-
-      <div style="flex: 1; min-width: 280px; padding: 20px; border: 1px solid #e0e0e0; border-radius: 8px;">
-        <h4 style="margin: 0 0 16px 0; font-size: 14px; font-weight: 600; text-transform: uppercase; color: #666;">Behavior</h4>
-        <div style="display: flex; flex-direction: column; gap: 16px;">
-          <div style="display: flex; align-items: center; justify-content: space-between;">
-            <span style="font-size: 14px;">Auto-save</span>
-            <rel-switch checked></rel-switch>
-          </div>
-          <div style="display: flex; align-items: center; justify-content: space-between;">
-            <span style="font-size: 14px;">Sound Effects</span>
-            <rel-switch></rel-switch>
-          </div>
-          <div style="display: flex; align-items: center; justify-content: space-between;">
-            <span style="font-size: 14px;">Animations</span>
-            <rel-switch checked></rel-switch>
-          </div>
-        </div>
-      </div>
-    </div>
-  `,
-};