@reliability-design/web 1.0.2 → 1.0.3

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

@@ -1,492 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/web-components";
-import { html } from "lit";
-import { useState } from "@storybook/preview-api";
-import "./rel-tab";
-import type { TabItem } from "./rel-tab";
-
-const meta: Meta = {
-  title: "Components/Tab",
-  component: "rel-tab",
-  tags: ["autodocs"],
-  argTypes: {
-    activeIndex: {
-      control: { type: "number" },
-      description: "The index of the currently active tab",
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj;
-
-const basicTabs: TabItem[] = [
-  { label: "Home" },
-  { label: "Profile" },
-  { label: "Settings" },
-];
-
-const tabsWithBadges: TabItem[] = [
-  { label: "Messages", badge: 5 },
-  { label: "Notifications", badge: 12 },
-  { label: "Updates", badge: 3 },
-];
-
-const tabsWithDisabled: TabItem[] = [
-  { label: "Active" },
-  { label: "Disabled", disabled: true },
-  { label: "Another Active" },
-];
-
-const manyTabs: TabItem[] = [
-  { label: "Dashboard" },
-  { label: "Analytics" },
-  { label: "Reports" },
-  { label: "Settings" },
-  { label: "Users" },
-  { label: "Billing" },
-];
-
-const mixedTabs: TabItem[] = [
-  { label: "Overview" },
-  { label: "Messages", badge: 8 },
-  { label: "Archived", disabled: true },
-  { label: "Settings" },
-];
-
-export const Default: Story = {
-  render: () => html`
-    <rel-tab .tabs=${basicTabs}></rel-tab>
-  `,
-};
-
-export const WithBadges: Story = {
-  render: () => html`
-    <rel-tab .tabs=${tabsWithBadges}></rel-tab>
-  `,
-};
-
-export const WithDisabled: Story = {
-  render: () => html`
-    <rel-tab .tabs=${tabsWithDisabled}></rel-tab>
-  `,
-};
-
-export const ManyTabs: Story = {
-  render: () => html`
-    <rel-tab .tabs=${manyTabs}></rel-tab>
-  `,
-};
-
-export const Mixed: Story = {
-  render: () => html`
-    <rel-tab .tabs=${mixedTabs}></rel-tab>
-  `,
-};
-
-export const WithContent: Story = {
-  render: () => html`
-    <rel-tab .tabs=${basicTabs}>
-      <div style="padding: 20px; background: #f9f9f9; border-radius: 8px;">
-        <h3 style="margin-top: 0;">Tab Content Area</h3>
-        <p style="color: #666;">
-          This is the content area for the selected tab. You can put any
-          content here.
-        </p>
-      </div>
-    </rel-tab>
-  `,
-};
-
-export const Interactive: Story = {
-  render: () => {
-    const handleTabChange = (e: CustomEvent) => {
-      console.log("Tab changed to index:", e.detail.index);
-    };
-
-    return html`
-      <rel-tab
-        .tabs=${basicTabs}
-        @tab-change=${handleTabChange}
-      ></rel-tab>
-      <p style="margin-top: 20px; color: #666;">
-        Open the console to see tab change events
-      </p>
-    `;
-  },
-};
-
-// New comprehensive stories
-
-export const TwoTabs: Story = {
-  render: () => html`
-    <rel-tab .tabs=${[
-      { label: "View" },
-      { label: "Edit" }
-    ]}></rel-tab>
-  `,
-};
-
-export const FiveTabs: Story = {
-  render: () => html`
-    <rel-tab .tabs=${[
-      { label: "Overview" },
-      { label: "Details" },
-      { label: "Analytics" },
-      { label: "History" },
-      { label: "Settings" }
-    ]}></rel-tab>
-  `,
-};
-
-export const OverflowTabs: Story = {
-  render: () => html`
-    <div style="max-width: 600px;">
-      <rel-tab .tabs=${[
-        { label: "Dashboard" },
-        { label: "Performance Metrics" },
-        { label: "System Analytics" },
-        { label: "User Management" },
-        { label: "Configuration" },
-        { label: "Reports & Exports" },
-        { label: "Audit Logs" },
-        { label: "API Documentation" }
-      ]}></rel-tab>
-    </div>
-    <p style="margin-top: 20px; color: #666; font-size: 0.9rem;">
-      Container width is limited to demonstrate overflow behavior
-    </p>
-  `,
-};
-
-export const BadgesWithActiveState: Story = {
-  render: () => html`
-    <div style="margin-bottom: 30px;">
-      <h4 style="margin-bottom: 10px;">First tab active (with badge)</h4>
-      <rel-tab .tabs=${[
-        { label: "Alerts", badge: 3 },
-        { label: "Inbox", badge: 15 },
-        { label: "Sent" }
-      ]} .activeIndex=${0}></rel-tab>
-    </div>
-    <div style="margin-bottom: 30px;">
-      <h4 style="margin-bottom: 10px;">Second tab active (with badge)</h4>
-      <rel-tab .tabs=${[
-        { label: "Alerts", badge: 3 },
-        { label: "Inbox", badge: 15 },
-        { label: "Sent" }
-      ]} .activeIndex=${1}></rel-tab>
-    </div>
-    <div>
-      <h4 style="margin-bottom: 10px;">Third tab active (no badge)</h4>
-      <rel-tab .tabs=${[
-        { label: "Alerts", badge: 3 },
-        { label: "Inbox", badge: 15 },
-        { label: "Sent" }
-      ]} .activeIndex=${2}></rel-tab>
-    </div>
-  `,
-};
-
-export const DisabledVariations: Story = {
-  render: () => html`
-    <div style="margin-bottom: 30px;">
-      <h4 style="margin-bottom: 10px;">First tab disabled</h4>
-      <rel-tab .tabs=${[
-        { label: "Disabled Tab", disabled: true },
-        { label: "Active Tab" },
-        { label: "Another Tab" }
-      ]}></rel-tab>
-    </div>
-    <div style="margin-bottom: 30px;">
-      <h4 style="margin-bottom: 10px;">Middle tab disabled with badge</h4>
-      <rel-tab .tabs=${[
-        { label: "Available" },
-        { label: "Coming Soon", badge: 2, disabled: true },
-        { label: "Active" }
-      ]}></rel-tab>
-    </div>
-    <div>
-      <h4 style="margin-bottom: 10px;">Multiple disabled tabs</h4>
-      <rel-tab .tabs=${[
-        { label: "Public" },
-        { label: "Premium", disabled: true },
-        { label: "Enterprise", disabled: true },
-        { label: "Settings" }
-      ]}></rel-tab>
-    </div>
-  `,
-};
-
-export const ContentSwitching: Story = {
-  render: () => {
-    let activeIndex = 0;
-
-    const tabContent = [
-      {
-        title: "Dashboard Overview",
-        content: "Welcome to your dashboard! Here you can see all your key metrics and recent activity at a glance."
-      },
-      {
-        title: "Performance Analytics",
-        content: "View detailed performance metrics, trends, and insights to optimize your system's efficiency."
-      },
-      {
-        title: "User Settings",
-        content: "Manage your account preferences, notifications, and privacy settings from this panel."
-      }
-    ];
-
-    const handleTabChange = (e: CustomEvent) => {
-      activeIndex = e.detail.index;
-      const contentEl = document.querySelector('#dynamic-content');
-      if (contentEl) {
-        contentEl.innerHTML = `
-          <h3 style="margin-top: 0; color: #111;">${tabContent[activeIndex].title}</h3>
-          <p style="color: #666; line-height: 1.6;">${tabContent[activeIndex].content}</p>
-        `;
-      }
-    };
-
-    setTimeout(() => {
-      const contentEl = document.querySelector('#dynamic-content');
-      if (contentEl) {
-        contentEl.innerHTML = `
-          <h3 style="margin-top: 0; color: #111;">${tabContent[0].title}</h3>
-          <p style="color: #666; line-height: 1.6;">${tabContent[0].content}</p>
-        `;
-      }
-    }, 0);
-
-    return html`
-      <rel-tab
-        .tabs=${[
-          { label: "Dashboard" },
-          { label: "Analytics" },
-          { label: "Settings" }
-        ]}
-        @tab-change=${handleTabChange}
-      >
-        <div id="dynamic-content" style="padding: 20px; background: #f9f9f9; border-radius: 8px; min-height: 100px;">
-        </div>
-      </rel-tab>
-    `;
-  },
-};
-
-export const EmailClient: Story = {
-  render: () => {
-    let activeIndex = 0;
-
-    const emailContent = [
-      {
-        title: "Inbox",
-        html: `
-          <div style="display: flex; flex-direction: column; gap: 12px;">
-            <div style="padding: 12px; background: white; border: 1px solid #e5e5e5; border-radius: 6px;">
-              <div style="font-weight: 600; margin-bottom: 4px;">Team Meeting Tomorrow</div>
-              <div style="font-size: 0.85rem; color: #666;">John Doe - 2 hours ago</div>
-            </div>
-            <div style="padding: 12px; background: white; border: 1px solid #e5e5e5; border-radius: 6px;">
-              <div style="font-weight: 600; margin-bottom: 4px;">Project Update Required</div>
-              <div style="font-size: 0.85rem; color: #666;">Sarah Smith - 5 hours ago</div>
-            </div>
-            <div style="padding: 12px; background: white; border: 1px solid #e5e5e5; border-radius: 6px;">
-              <div style="font-weight: 600; margin-bottom: 4px;">Welcome to the Platform</div>
-              <div style="font-size: 0.85rem; color: #666;">Support Team - Yesterday</div>
-            </div>
-          </div>
-        `
-      },
-      {
-        title: "Unread Messages",
-        html: `
-          <div style="display: flex; flex-direction: column; gap: 12px;">
-            <div style="padding: 12px; background: #fffaeb; border: 1px solid #ffd666; border-radius: 6px;">
-              <div style="font-weight: 600; margin-bottom: 4px;">Urgent: Security Alert</div>
-              <div style="font-size: 0.85rem; color: #666;">Security Team - 1 hour ago</div>
-            </div>
-            <div style="padding: 12px; background: #fffaeb; border: 1px solid #ffd666; border-radius: 6px;">
-              <div style="font-weight: 600; margin-bottom: 4px;">Invoice #1234 Available</div>
-              <div style="font-size: 0.85rem; color: #666;">Billing - 3 hours ago</div>
-            </div>
-          </div>
-        `
-      },
-      {
-        title: "Sent Messages",
-        html: `
-          <div style="display: flex; flex-direction: column; gap: 12px;">
-            <div style="padding: 12px; background: white; border: 1px solid #e5e5e5; border-radius: 6px;">
-              <div style="font-weight: 600; margin-bottom: 4px;">Re: Project Timeline</div>
-              <div style="font-size: 0.85rem; color: #666;">Sent to: Mike Johnson - Today</div>
-            </div>
-            <div style="padding: 12px; background: white; border: 1px solid #e5e5e5; border-radius: 6px;">
-              <div style="font-weight: 600; margin-bottom: 4px;">Weekly Report Submission</div>
-              <div style="font-size: 0.85rem; color: #666;">Sent to: Manager - Yesterday</div>
-            </div>
-          </div>
-        `
-      },
-      {
-        title: "Spam",
-        html: `
-          <div style="padding: 20px; text-align: center; color: #666;">
-            <div style="font-size: 3rem; margin-bottom: 10px;">🗑️</div>
-            <div>No spam messages</div>
-          </div>
-        `
-      }
-    ];
-
-    const handleTabChange = (e: CustomEvent) => {
-      activeIndex = e.detail.index;
-      const contentEl = document.querySelector('#email-content');
-      if (contentEl) {
-        contentEl.innerHTML = `
-          <h3 style="margin-top: 0; margin-bottom: 16px; color: #111;">${emailContent[activeIndex].title}</h3>
-          ${emailContent[activeIndex].html}
-        `;
-      }
-    };
-
-    setTimeout(() => {
-      const contentEl = document.querySelector('#email-content');
-      if (contentEl) {
-        contentEl.innerHTML = `
-          <h3 style="margin-top: 0; margin-bottom: 16px; color: #111;">${emailContent[0].title}</h3>
-          ${emailContent[0].html}
-        `;
-      }
-    }, 0);
-
-    return html`
-      <div style="max-width: 800px; border: 1px solid #e5e5e5; border-radius: 8px; overflow: hidden;">
-        <rel-tab
-          .tabs=${[
-            { label: "Inbox", badge: 15 },
-            { label: "Unread", badge: 2 },
-            { label: "Sent" },
-            { label: "Spam" }
-          ]}
-          @tab-change=${handleTabChange}
-        >
-          <div id="email-content" style="padding: 20px; background: #fafafa; min-height: 300px;">
-          </div>
-        </rel-tab>
-      </div>
-    `;
-  },
-};
-
-export const EcommerceDashboard: Story = {
-  render: () => {
-    let activeIndex = 0;
-
-    const dashboardContent = [
-      {
-        title: "Today's Overview",
-        html: `
-          <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px;">
-            <div style="padding: 20px; background: white; border-radius: 8px; border: 1px solid #e5e5e5;">
-              <div style="font-size: 0.85rem; color: #666; margin-bottom: 8px;">Revenue</div>
-              <div style="font-size: 1.5rem; font-weight: 600; color: #111;">$12,345</div>
-              <div style="font-size: 0.75rem; color: #00f49c; margin-top: 4px;">+12.5% from yesterday</div>
-            </div>
-            <div style="padding: 20px; background: white; border-radius: 8px; border: 1px solid #e5e5e5;">
-              <div style="font-size: 0.85rem; color: #666; margin-bottom: 8px;">Orders</div>
-              <div style="font-size: 1.5rem; font-weight: 600; color: #111;">342</div>
-              <div style="font-size: 0.75rem; color: #00f49c; margin-top: 4px;">+8.3% from yesterday</div>
-            </div>
-            <div style="padding: 20px; background: white; border-radius: 8px; border: 1px solid #e5e5e5;">
-              <div style="font-size: 0.85rem; color: #666; margin-bottom: 8px;">Customers</div>
-              <div style="font-size: 1.5rem; font-weight: 600; color: #111;">1,234</div>
-              <div style="font-size: 0.75rem; color: #ff0400; margin-top: 4px;">-2.1% from yesterday</div>
-            </div>
-          </div>
-        `
-      },
-      {
-        title: "Pending Orders",
-        html: `
-          <div style="background: white; border-radius: 8px; border: 1px solid #e5e5e5; overflow: hidden;">
-            <div style="padding: 12px; border-bottom: 1px solid #e5e5e5; font-weight: 600;">Order #1001</div>
-            <div style="padding: 12px; border-bottom: 1px solid #e5e5e5;">Status: <span style="color: #ff9800;">Processing</span></div>
-            <div style="padding: 12px;">Customer: John Smith</div>
-          </div>
-        `
-      },
-      {
-        title: "Products",
-        html: `
-          <div style="display: grid; gap: 12px;">
-            <div style="padding: 16px; background: white; border-radius: 8px; border: 1px solid #e5e5e5;">
-              <div style="font-weight: 600; margin-bottom: 8px;">Premium Widget</div>
-              <div style="font-size: 0.85rem; color: #666;">In Stock: 156 units</div>
-            </div>
-            <div style="padding: 16px; background: white; border-radius: 8px; border: 1px solid #e5e5e5;">
-              <div style="font-weight: 600; margin-bottom: 8px;">Deluxe Gadget</div>
-              <div style="font-size: 0.85rem; color: #666;">In Stock: 89 units</div>
-            </div>
-          </div>
-        `
-      },
-      {
-        title: "Recent Activity",
-        html: `
-          <div style="display: flex; flex-direction: column; gap: 12px;">
-            <div style="padding: 12px; background: white; border-radius: 6px; border: 1px solid #e5e5e5;">
-              <div style="font-size: 0.85rem; color: #666;">2 minutes ago</div>
-              <div style="margin-top: 4px;">New order placed - $249.99</div>
-            </div>
-            <div style="padding: 12px; background: white; border-radius: 6px; border: 1px solid #e5e5e5;">
-              <div style="font-size: 0.85rem; color: #666;">15 minutes ago</div>
-              <div style="margin-top: 4px;">Product review submitted</div>
-            </div>
-            <div style="padding: 12px; background: white; border-radius: 6px; border: 1px solid #e5e5e5;">
-              <div style="font-size: 0.85rem; color: #666;">1 hour ago</div>
-              <div style="margin-top: 4px;">Customer support ticket resolved</div>
-            </div>
-          </div>
-        `
-      }
-    ];
-
-    const handleTabChange = (e: CustomEvent) => {
-      activeIndex = e.detail.index;
-      const contentEl = document.querySelector('#ecommerce-content');
-      if (contentEl) {
-        contentEl.innerHTML = `
-          <h3 style="margin-top: 0; margin-bottom: 20px; color: #111;">${dashboardContent[activeIndex].title}</h3>
-          ${dashboardContent[activeIndex].html}
-        `;
-      }
-    };
-
-    setTimeout(() => {
-      const contentEl = document.querySelector('#ecommerce-content');
-      if (contentEl) {
-        contentEl.innerHTML = `
-          <h3 style="margin-top: 0; margin-bottom: 20px; color: #111;">${dashboardContent[0].title}</h3>
-          ${dashboardContent[0].html}
-        `;
-      }
-    }, 0);
-
-    return html`
-      <div style="max-width: 900px;">
-        <rel-tab
-          .tabs=${[
-            { label: "Overview" },
-            { label: "Orders", badge: 8 },
-            { label: "Products" },
-            { label: "Activity", badge: 23 }
-          ]}
-          @tab-change=${handleTabChange}
-        >
-          <div id="ecommerce-content" style="padding: 24px; background: #fafafa; border-radius: 8px; min-height: 280px;">
-          </div>
-        </rel-tab>
-      </div>
-    `;
-  },
-};