@reliability-design/web 1.0.2 → 1.0.3

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

@@ -1,327 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
-import { html } from 'lit';
-import './rel-avatar';
-
-/**
- * The Avatar component displays user profile images, initials, or icons in a circular format.
- * Built with Lit web components for framework-agnostic usage.
- *
- * ## Features
- * - **3 Types**: image, text (initials), icon
- * - **4 Sizes**: xs (18px), sm (24px), md (32px), lg (40px)
- * - **Circular Shape**: Perfect circle for all variants
- * - **Flexible Content**: Supports images, text initials, or custom icons
- * - **Fallback Support**: Graceful handling of missing images
- */
-const meta: Meta = {
-  title: 'Components/Avatar',
-  tags: ['autodocs'],
-  component: 'rel-avatar',
-  argTypes: {
-    type: {
-      control: { type: 'select' },
-      options: ['image', 'text', 'icon'],
-      description: 'Type of avatar content',
-      table: {
-        defaultValue: { summary: 'image' },
-        type: { summary: 'string' },
-      },
-    },
-    size: {
-      control: { type: 'select' },
-      options: ['xs', 'sm', 'md', 'lg'],
-      description: 'Avatar size',
-      table: {
-        defaultValue: { summary: 'md' },
-        type: { summary: 'string' },
-      },
-    },
-    src: {
-      control: 'text',
-      description: 'Image source URL (for type="image")',
-      table: {
-        type: { summary: 'string' },
-      },
-    },
-    text: {
-      control: 'text',
-      description: 'Text initials (for type="text")',
-      table: {
-        type: { summary: 'string' },
-      },
-    },
-    alt: {
-      control: 'text',
-      description: 'Image alt text for accessibility',
-      table: {
-        defaultValue: { summary: 'Avatar' },
-        type: { summary: 'string' },
-      },
-    },
-  },
-  render: (args) => {
-    if (args.type === 'icon') {
-      return html`
-        <rel-avatar
-          type="icon"
-          size="${args.size || 'md'}"
-        >
-          <span>👤</span>
-        </rel-avatar>
-      `;
-    }
-    return html`
-      <rel-avatar
-        type="${args.type || 'image'}"
-        size="${args.size || 'md'}"
-        src="${args.src || ''}"
-        text="${args.text || ''}"
-        alt="${args.alt || 'Avatar'}"
-      ></rel-avatar>
-    `;
-  },
-};
-
-export default meta;
-type Story = StoryObj;
-
-/**
- * Image avatar - displays a profile picture
- */
-export const ImageAvatar: Story = {
-  args: {
-    type: 'image',
-    size: 'md',
-    src: 'https://i.pravatar.cc/150?img=1',
-    alt: 'John Doe',
-  },
-};
-
-/**
- * Text avatar - displays user initials
- */
-export const TextAvatar: Story = {
-  args: {
-    type: 'text',
-    size: 'md',
-    text: 'JD',
-  },
-};
-
-/**
- * Icon avatar - displays a custom icon
- */
-export const IconAvatar: Story = {
-  args: {
-    type: 'icon',
-    size: 'md',
-  },
-};
-
-/**
- * Extra small size - 18px diameter
- */
-export const ExtraSmall: Story = {
-  args: {
-    type: 'image',
-    size: 'xs',
-    src: 'https://i.pravatar.cc/150?img=2',
-  },
-};
-
-/**
- * Small size - 24px diameter
- */
-export const Small: Story = {
-  args: {
-    type: 'image',
-    size: 'sm',
-    src: 'https://i.pravatar.cc/150?img=3',
-  },
-};
-
-/**
- * Medium size - 32px diameter (default)
- */
-export const Medium: Story = {
-  args: {
-    type: 'image',
-    size: 'md',
-    src: 'https://i.pravatar.cc/150?img=4',
-  },
-};
-
-/**
- * Large size - 40px diameter
- */
-export const Large: Story = {
-  args: {
-    type: 'image',
-    size: 'lg',
-    src: 'https://i.pravatar.cc/150?img=5',
-  },
-};
-
-/**
- * All sizes - showcase of all avatar sizes with images
- */
-export const AllSizes: Story = {
-  render: () => html`
-    <div style="display: flex; gap: 16px; align-items: center; padding: 24px; background: #000;">
-      <rel-avatar type="image" size="xs" src="https://i.pravatar.cc/150?img=6"></rel-avatar>
-      <rel-avatar type="image" size="sm" src="https://i.pravatar.cc/150?img=7"></rel-avatar>
-      <rel-avatar type="image" size="md" src="https://i.pravatar.cc/150?img=8"></rel-avatar>
-      <rel-avatar type="image" size="lg" src="https://i.pravatar.cc/150?img=9"></rel-avatar>
-    </div>
-  `,
-};
-
-/**
- * All types - showcase of all avatar types
- */
-export const AllTypes: Story = {
-  render: () => html`
-    <div style="display: flex; gap: 16px; align-items: center; padding: 24px; background: #000;">
-      <div style="text-align: center;">
-        <rel-avatar type="image" size="lg" src="https://i.pravatar.cc/150?img=10"></rel-avatar>
-        <p style="color: #fff; font-size: 12px; margin-top: 8px;">Image</p>
-      </div>
-
-      <div style="text-align: center;">
-        <rel-avatar type="text" size="lg" text="AB"></rel-avatar>
-        <p style="color: #fff; font-size: 12px; margin-top: 8px;">Text</p>
-      </div>
-
-      <div style="text-align: center;">
-        <rel-avatar type="icon" size="lg">
-          <span>👤</span>
-        </rel-avatar>
-        <p style="color: #fff; font-size: 12px; margin-top: 8px;">Icon</p>
-      </div>
-    </div>
-  `,
-};
-
-/**
- * Text initials - different initial combinations
- */
-export const TextInitials: Story = {
-  render: () => html`
-    <div style="display: flex; gap: 16px; padding: 24px; background: #000;">
-      <rel-avatar type="text" size="lg" text="JD"></rel-avatar>
-      <rel-avatar type="text" size="lg" text="AB"></rel-avatar>
-      <rel-avatar type="text" size="lg" text="XY"></rel-avatar>
-      <rel-avatar type="text" size="lg" text="MK"></rel-avatar>
-    </div>
-  `,
-};
-
-/**
- * Icon variations - different icons
- */
-export const IconVariations: Story = {
-  render: () => html`
-    <div style="display: flex; gap: 16px; padding: 24px; background: #000;">
-      <rel-avatar type="icon" size="lg">
-        <span>👤</span>
-      </rel-avatar>
-      <rel-avatar type="icon" size="lg">
-        <span>🏢</span>
-      </rel-avatar>
-      <rel-avatar type="icon" size="lg">
-        <span>⚙️</span>
-      </rel-avatar>
-      <rel-avatar type="icon" size="lg">
-        <span>📧</span>
-      </rel-avatar>
-    </div>
-  `,
-};
-
-/**
- * User list - avatars in a typical user list layout
- */
-export const UserList: Story = {
-  render: () => html`
-    <div style="display: flex; flex-direction: column; gap: 12px; padding: 24px; background: #000;">
-      <div style="display: flex; align-items: center; gap: 12px;">
-        <rel-avatar type="image" size="md" src="https://i.pravatar.cc/150?img=11"></rel-avatar>
-        <div>
-          <p style="color: #fff; margin: 0; font-size: 14px; font-weight: 600;">John Doe</p>
-          <p style="color: #999; margin: 0; font-size: 12px;">john.doe@example.com</p>
-        </div>
-      </div>
-
-      <div style="display: flex; align-items: center; gap: 12px;">
-        <rel-avatar type="text" size="md" text="AB"></rel-avatar>
-        <div>
-          <p style="color: #fff; margin: 0; font-size: 14px; font-weight: 600;">Alice Brown</p>
-          <p style="color: #999; margin: 0; font-size: 12px;">alice.brown@example.com</p>
-        </div>
-      </div>
-
-      <div style="display: flex; align-items: center; gap: 12px;">
-        <rel-avatar type="image" size="md" src="https://i.pravatar.cc/150?img=12"></rel-avatar>
-        <div>
-          <p style="color: #fff; margin: 0; font-size: 14px; font-weight: 600;">Sarah Wilson</p>
-          <p style="color: #999; margin: 0; font-size: 12px;">sarah.wilson@example.com</p>
-        </div>
-      </div>
-    </div>
-  `,
-};
-
-/**
- * Avatar group - overlapping avatars
- */
-export const AvatarGroup: Story = {
-  render: () => html`
-    <div style="padding: 24px; background: #000;">
-      <div style="display: flex; margin-left: 16px;">
-        <rel-avatar type="image" size="md" src="https://i.pravatar.cc/150?img=13" style="margin-left: -16px; border: 2px solid #000;"></rel-avatar>
-        <rel-avatar type="image" size="md" src="https://i.pravatar.cc/150?img=14" style="margin-left: -16px; border: 2px solid #000;"></rel-avatar>
-        <rel-avatar type="text" size="md" text="JD" style="margin-left: -16px; border: 2px solid #000;"></rel-avatar>
-        <rel-avatar type="text" size="md" text="+5" style="margin-left: -16px; border: 2px solid #000;"></rel-avatar>
-      </div>
-    </div>
-  `,
-};
-
-/**
- * Size comparison - all sizes of each type
- */
-export const SizeComparison: Story = {
-  render: () => html`
-    <div style="display: flex; flex-direction: column; gap: 24px; padding: 24px; background: #000;">
-      <div>
-        <p style="color: #00F49C; margin: 0 0 12px 0; font-weight: 600;">Image Avatars</p>
-        <div style="display: flex; gap: 12px; align-items: center;">
-          <rel-avatar type="image" size="xs" src="https://i.pravatar.cc/150?img=15"></rel-avatar>
-          <rel-avatar type="image" size="sm" src="https://i.pravatar.cc/150?img=15"></rel-avatar>
-          <rel-avatar type="image" size="md" src="https://i.pravatar.cc/150?img=15"></rel-avatar>
-          <rel-avatar type="image" size="lg" src="https://i.pravatar.cc/150?img=15"></rel-avatar>
-        </div>
-      </div>
-
-      <div>
-        <p style="color: #00F49C; margin: 0 0 12px 0; font-weight: 600;">Text Avatars</p>
-        <div style="display: flex; gap: 12px; align-items: center;">
-          <rel-avatar type="text" size="xs" text="AB"></rel-avatar>
-          <rel-avatar type="text" size="sm" text="AB"></rel-avatar>
-          <rel-avatar type="text" size="md" text="AB"></rel-avatar>
-          <rel-avatar type="text" size="lg" text="AB"></rel-avatar>
-        </div>
-      </div>
-
-      <div>
-        <p style="color: #00F49C; margin: 0 0 12px 0; font-weight: 600;">Icon Avatars</p>
-        <div style="display: flex; gap: 12px; align-items: center;">
-          <rel-avatar type="icon" size="xs"><span>👤</span></rel-avatar>
-          <rel-avatar type="icon" size="sm"><span>👤</span></rel-avatar>
-          <rel-avatar type="icon" size="md"><span>👤</span></rel-avatar>
-          <rel-avatar type="icon" size="lg"><span>👤</span></rel-avatar>
-        </div>
-      </div>
-    </div>
-  `,
-};

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

@@ -1,350 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
-import { html } from 'lit';
-import './rel-badge';
-
-/**
- * The Badge component displays notification counts or status indicators.
- * Built with Lit web components for framework-agnostic usage.
- *
- * ## Features
- * - **2 Variants**: number (displays count), dot (indicator only)
- * - **3 Sizes**: sm (20px), md (28px), lg (40px)
- * - **Perfect Circles**: Consistent circular shape across all sizes
- * - **Red Background**: High-contrast notification color
- * - **Number Display**: Shows notification count up to 99+
- */
-const meta: Meta = {
-  title: 'Components/Badge',
-  tags: ['autodocs'],
-  component: 'rel-badge',
-  argTypes: {
-    variant: {
-      control: { type: 'select' },
-      options: ['number', 'dot'],
-      description: 'Badge variant',
-      table: {
-        defaultValue: { summary: 'number' },
-        type: { summary: 'string' },
-      },
-    },
-    size: {
-      control: { type: 'select' },
-      options: ['sm', 'md', 'lg'],
-      description: 'Badge size',
-      table: {
-        defaultValue: { summary: 'md' },
-        type: { summary: 'string' },
-      },
-    },
-    number: {
-      control: 'text',
-      description: 'Number to display (for variant="number")',
-      table: {
-        type: { summary: 'string' },
-      },
-    },
-  },
-  render: (args) => html`
-    <rel-badge
-      variant="${args.variant || 'number'}"
-      size="${args.size || 'md'}"
-      number="${args.number || '1'}"
-    ></rel-badge>
-  `,
-};
-
-export default meta;
-type Story = StoryObj;
-
-/**
- * Number badge - displays a notification count
- */
-export const NumberBadge: Story = {
-  args: {
-    variant: 'number',
-    size: 'md',
-    number: '5',
-  },
-};
-
-/**
- * Dot badge - simple indicator without count
- */
-export const DotBadge: Story = {
-  args: {
-    variant: 'dot',
-    size: 'md',
-  },
-};
-
-/**
- * Small size - 20px diameter
- */
-export const Small: Story = {
-  args: {
-    variant: 'number',
-    size: 'sm',
-    number: '3',
-  },
-};
-
-/**
- * Medium size - 28px diameter (default)
- */
-export const Medium: Story = {
-  args: {
-    variant: 'number',
-    size: 'md',
-    number: '9',
-  },
-};
-
-/**
- * Large size - 40px diameter
- */
-export const Large: Story = {
-  args: {
-    variant: 'number',
-    size: 'lg',
-    number: '12',
-  },
-};
-
-/**
- * Single digit - notification count less than 10
- */
-export const SingleDigit: Story = {
-  args: {
-    variant: 'number',
-    size: 'md',
-    number: '7',
-  },
-};
-
-/**
- * Double digit - notification count between 10-99
- */
-export const DoubleDigit: Story = {
-  args: {
-    variant: 'number',
-    size: 'md',
-    number: '42',
-  },
-};
-
-/**
- * High count - very high notification count
- */
-export const HighCount: Story = {
-  args: {
-    variant: 'number',
-    size: 'md',
-    number: '99+',
-  },
-};
-
-/**
- * All sizes - showcase of all badge sizes with numbers
- */
-export const AllSizes: Story = {
-  render: () => html`
-    <div style="display: flex; gap: 20px; align-items: center; padding: 24px; background: #000;">
-      <div style="text-align: center;">
-        <rel-badge variant="number" size="sm" number="3"></rel-badge>
-        <p style="color: #fff; font-size: 12px; margin-top: 8px;">Small (20px)</p>
-      </div>
-
-      <div style="text-align: center;">
-        <rel-badge variant="number" size="md" number="9"></rel-badge>
-        <p style="color: #fff; font-size: 12px; margin-top: 8px;">Medium (28px)</p>
-      </div>
-
-      <div style="text-align: center;">
-        <rel-badge variant="number" size="lg" number="12"></rel-badge>
-        <p style="color: #fff; font-size: 12px; margin-top: 8px;">Large (40px)</p>
-      </div>
-    </div>
-  `,
-};
-
-/**
- * All variants - number vs dot badges
- */
-export const AllVariants: Story = {
-  render: () => html`
-    <div style="display: flex; gap: 32px; align-items: center; padding: 24px; background: #000;">
-      <div style="text-align: center;">
-        <rel-badge variant="number" size="lg" number="5"></rel-badge>
-        <p style="color: #fff; font-size: 12px; margin-top: 8px;">Number</p>
-      </div>
-
-      <div style="text-align: center;">
-        <rel-badge variant="dot" size="lg"></rel-badge>
-        <p style="color: #fff; font-size: 12px; margin-top: 8px;">Dot</p>
-      </div>
-    </div>
-  `,
-};
-
-/**
- * Dot sizes - all sizes of dot variant
- */
-export const DotSizes: Story = {
-  render: () => html`
-    <div style="display: flex; gap: 20px; align-items: center; padding: 24px; background: #000;">
-      <div style="text-align: center;">
-        <rel-badge variant="dot" size="sm"></rel-badge>
-        <p style="color: #fff; font-size: 12px; margin-top: 8px;">Small</p>
-      </div>
-
-      <div style="text-align: center;">
-        <rel-badge variant="dot" size="md"></rel-badge>
-        <p style="color: #fff; font-size: 12px; margin-top: 8px;">Medium</p>
-      </div>
-
-      <div style="text-align: center;">
-        <rel-badge variant="dot" size="lg"></rel-badge>
-        <p style="color: #fff; font-size: 12px; margin-top: 8px;">Large</p>
-      </div>
-    </div>
-  `,
-};
-
-/**
- * Number variations - different notification counts
- */
-export const NumberVariations: Story = {
-  render: () => html`
-    <div style="display: flex; gap: 16px; align-items: center; padding: 24px; background: #000;">
-      <rel-badge variant="number" size="md" number="1"></rel-badge>
-      <rel-badge variant="number" size="md" number="5"></rel-badge>
-      <rel-badge variant="number" size="md" number="12"></rel-badge>
-      <rel-badge variant="number" size="md" number="99"></rel-badge>
-      <rel-badge variant="number" size="md" number="99+"></rel-badge>
-    </div>
-  `,
-};
-
-/**
- * With icons - badges positioned on icons
- */
-export const WithIcons: Story = {
-  render: () => html`
-    <div style="display: flex; gap: 40px; padding: 24px; background: #000;">
-      <div style="position: relative; display: inline-block;">
-        <span style="font-size: 32px;">🔔</span>
-        <rel-badge variant="number" size="sm" number="3" style="position: absolute; top: -4px; right: -4px;"></rel-badge>
-      </div>
-
-      <div style="position: relative; display: inline-block;">
-        <span style="font-size: 32px;">📧</span>
-        <rel-badge variant="number" size="sm" number="12" style="position: absolute; top: -4px; right: -4px;"></rel-badge>
-      </div>
-
-      <div style="position: relative; display: inline-block;">
-        <span style="font-size: 32px;">💬</span>
-        <rel-badge variant="dot" size="sm" style="position: absolute; top: -2px; right: -2px;"></rel-badge>
-      </div>
-    </div>
-  `,
-};
-
-/**
- * Navigation menu - badges on menu items
- */
-export const NavigationMenu: Story = {
-  render: () => html`
-    <div style="display: flex; flex-direction: column; gap: 12px; padding: 24px; background: #000; width: 250px;">
-      <div style="display: flex; align-items: center; justify-content: space-between; padding: 12px; background: #1A1A1A; border-radius: 8px;">
-        <div style="display: flex; align-items: center; gap: 12px;">
-          <span style="font-size: 20px;">📬</span>
-          <span style="color: #fff; font-size: 14px;">Messages</span>
-        </div>
-        <rel-badge variant="number" size="sm" number="5"></rel-badge>
-      </div>
-
-      <div style="display: flex; align-items: center; justify-content: space-between; padding: 12px; background: #1A1A1A; border-radius: 8px;">
-        <div style="display: flex; align-items: center; gap: 12px;">
-          <span style="font-size: 20px;">🔔</span>
-          <span style="color: #fff; font-size: 14px;">Notifications</span>
-        </div>
-        <rel-badge variant="number" size="sm" number="23"></rel-badge>
-      </div>
-
-      <div style="display: flex; align-items: center; justify-content: space-between; padding: 12px; background: #1A1A1A; border-radius: 8px;">
-        <div style="display: flex; align-items: center; gap: 12px;">
-          <span style="font-size: 20px;">⭐</span>
-          <span style="color: #fff; font-size: 14px;">Updates</span>
-        </div>
-        <rel-badge variant="dot" size="sm"></rel-badge>
-      </div>
-    </div>
-  `,
-};
-
-/**
- * Real-world examples - practical usage scenarios
- */
-export const RealWorldExamples: Story = {
-  render: () => html`
-    <div style="display: flex; flex-direction: column; gap: 24px; padding: 24px; background: #000;">
-      <!-- Notification Bell -->
-      <div>
-        <p style="color: #00F49C; margin: 0 0 12px 0; font-weight: 600;">Notification Bell</p>
-        <div style="position: relative; display: inline-block;">
-          <button style="background: #1A1A1A; border: 1px solid #2A2A2A; color: #fff; padding: 12px 16px; border-radius: 8px; cursor: pointer; font-size: 20px;">
-            🔔
-          </button>
-          <rel-badge variant="number" size="sm" number="7" style="position: absolute; top: -6px; right: -6px;"></rel-badge>
-        </div>
-      </div>
-
-      <!-- Shopping Cart -->
-      <div>
-        <p style="color: #00F49C; margin: 0 0 12px 0; font-weight: 600;">Shopping Cart</p>
-        <div style="position: relative; display: inline-block;">
-          <button style="background: #00F49C; border: none; color: #000; padding: 12px 20px; border-radius: 1000px; cursor: pointer; font-weight: 600;">
-            🛒 Cart
-          </button>
-          <rel-badge variant="number" size="sm" number="3" style="position: absolute; top: -6px; right: -6px;"></rel-badge>
-        </div>
-      </div>
-
-      <!-- Status Indicator -->
-      <div>
-        <p style="color: #00F49C; margin: 0 0 12px 0; font-weight: 600;">Status Indicator</p>
-        <div style="display: flex; align-items: center; gap: 8px;">
-          <rel-badge variant="dot" size="md"></rel-badge>
-          <span style="color: #fff;">New activity detected</span>
-        </div>
-      </div>
-    </div>
-  `,
-};
-
-/**
- * Size comparison - all sizes side by side
- */
-export const SizeComparison: Story = {
-  render: () => html`
-    <div style="display: flex; flex-direction: column; gap: 24px; padding: 24px; background: #000;">
-      <div>
-        <p style="color: #00F49C; margin: 0 0 12px 0; font-weight: 600;">Number Badges</p>
-        <div style="display: flex; gap: 16px; align-items: center;">
-          <rel-badge variant="number" size="sm" number="5"></rel-badge>
-          <rel-badge variant="number" size="md" number="12"></rel-badge>
-          <rel-badge variant="number" size="lg" number="99+"></rel-badge>
-        </div>
-      </div>
-
-      <div>
-        <p style="color: #00F49C; margin: 0 0 12px 0; font-weight: 600;">Dot Badges</p>
-        <div style="display: flex; gap: 16px; align-items: center;">
-          <rel-badge variant="dot" size="sm"></rel-badge>
-          <rel-badge variant="dot" size="md"></rel-badge>
-          <rel-badge variant="dot" size="lg"></rel-badge>
-        </div>
-      </div>
-    </div>
-  `,
-};