@tsiky/components-r19 1.1.0 → 1.2.0

package/src/components/AnnouncementPanel/ListBox/CounterListBox.stories.tsx

@@ -1,292 +1,292 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { CounterListBox } from './CounterListBox';
-
-const meta: Meta<typeof CounterListBox> = {
-  title: 'Components/ListBox/CounterListBox',
-  component: CounterListBox,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component: 'A list component with circular badges for displaying counters and metrics.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    badgeColor: {
-      control: 'color',
-      description: 'Default badge color',
-    },
-    badgePadding: {
-      control: 'text',
-      description: 'Badge padding (e.g., "8px 16px")',
-    },
-    badgeWidth: {
-      control: 'text',
-      description: 'Forced badge width (e.g., "40px", "60px")',
-    },
-    data: {
-      control: 'object',
-      description: 'Array of strings or [badge, text] tuples',
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  name: 'Default',
-  args: {
-    title: 'Statistics',
-    data: [
-      ['15', 'New messages'],
-      ['42', 'Active users'],
-      ['128', 'Total visits'],
-      ['7', 'Pending'],
-    ],
-    badgeColor: '#0ea5e9',
-  },
-};
-
-export const MixedTypes: Story = {
-  name: 'Mixed Types',
-  args: {
-    title: 'System Dashboard',
-    data: [
-      ['99+', 'Unread notifications'],
-      'No action required currently',
-      ['7', 'Overdue tasks'],
-      'All systems functioning normally',
-      ['3', 'Unresolved alerts'],
-      'Maintenance scheduled this weekend',
-    ],
-    badgeColor: '#8b5cf6',
-  },
-};
-
-export const ColorfulBadges: Story = {
-  name: 'Colorful Badges',
-  args: {
-    title: 'Performance Evaluation',
-    data: [
-      ['A+', 'Excellent'],
-      ['B', 'Good'],
-      ['C', 'Average'],
-      ['D', 'Needs improvement'],
-      ['F', 'Critical'],
-    ],
-    badgeColor: '#6b7280',
-    badgeColors: {
-      0: '#10b981',
-      1: '#22c55e',
-      2: '#f59e0b',
-      3: '#f97316',
-      4: '#ef4444',
-    },
-  },
-};
-
-export const TicketPriorities: Story = {
-  name: 'Ticket Priorities',
-  args: {
-    title: 'Tickets by Priority',
-    data: [
-      ['5', 'Critical - Immediate intervention required'],
-      ['12', 'High - Resolution within 24h'],
-      ['28', 'Medium - Resolution within 48h'],
-      ['45', 'Low - Resolution within 7 days'],
-    ],
-    badgeColor: '#ef4444',
-    badgeColors: {
-      0: '#dc2626',
-      1: '#f97316',
-      2: '#eab308',
-      3: '#84cc16',
-    },
-    lineClasses: {
-      0: 'ticket-critical',
-      1: 'ticket-high',
-      2: 'ticket-medium',
-    },
-  },
-  decorators: [
-    (Story) => (
-      <>
-        <style>
-          {`
-            .ticket-critical { background-color: #fef2f2; }
-            .ticket-high { background-color: #fffbeb; }
-            .ticket-medium { background-color: #f0f9ff; }
-          `}
-        </style>
-        <Story />
-      </>
-    ),
-  ],
-};
-
-export const ProgressIndicators: Story = {
-  name: 'Progress Indicators',
-  args: {
-    title: 'Project Progress',
-    data: [
-      ['75%', 'Website - Frontend development'],
-      ['90%', 'Mobile app - User testing'],
-      ['50%', 'API backend - Service integration'],
-      ['25%', 'Documentation - Writing in progress'],
-    ],
-    badgeColor: '#3b82f6',
-    badgePadding: '0.5rem 0.75rem',
-  },
-};
-
-export const RatingSystem: Story = {
-  name: 'Rating System',
-  args: {
-    title: 'Customer Reviews',
-    data: [
-      ['4.8', '⭐ Excellent - Exceptional service'],
-      ['4.2', '⭐ Very good - Very satisfied'],
-      ['3.5', '⭐ Average - Could be better'],
-      ['2.1', '⭐ Poor - Disappointed'],
-    ],
-    badgeColor: '#f59e0b',
-  },
-};
-
-export const SmallCounters: Story = {
-  name: 'Small Counters',
-  args: {
-    title: 'System Logs',
-    data: [
-      ['1', 'Critical error'],
-      ['5', 'Warnings'],
-      ['42', 'Information'],
-      ['128', 'Debug messages'],
-    ],
-    badgeColor: '#6366f1',
-    badgePadding: '0.25rem 0.5rem',
-  },
-};
-
-export const StatusIndicators: Story = {
-  name: 'Status Indicators',
-  args: {
-    title: 'Server Status',
-    data: [
-      ['🟢', 'Main server - Online'],
-      ['🟢', 'Database - Online'],
-      ['🟡', 'Cache - Degraded'],
-      ['🔴', 'Backup - Offline'],
-      ['🟢', 'CDN - Online'],
-    ],
-    badgeColor: '#6b7280',
-    badgePadding: '0.375rem 0.5rem',
-  },
-};
-
-export const LargeNumbers: Story = {
-  name: 'Large Numbers',
-  args: {
-    title: 'Global Statistics',
-    data: [
-      ['1.2K', 'Active users'],
-      ['45.8K', 'Total views'],
-      ['2.4M', 'Impressions'],
-      ['156.7K', 'Interactions'],
-    ],
-    badgeColor: '#8b5cf6',
-    badgePadding: '0.5rem 0.75rem',
-  },
-};
-
-export const FixedWidthBadges: Story = {
-  name: 'Fixed Width Badges',
-  args: {
-    title: 'Controlled Width Badges',
-    data: [
-      ['1', 'Single digit'],
-      ['42', 'Two digits'],
-      ['999', 'Three digits'],
-      ['1K', 'Short text'],
-      ['10K+', 'Longer text'],
-    ],
-    badgeColor: '#8b5cf6',
-    badgeWidth: '48px',
-    badgePadding: '0.5rem 0.25rem',
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Using the `badgeWidth` prop to force a fixed width on all badges, creating perfect alignment.',
-      },
-    },
-  },
-};
-
-export const CompactFixedBadges: Story = {
-  name: 'Compact Fixed Badges',
-  args: {
-    title: 'System Metrics',
-    data: [
-      ['CPU', '45%'],
-      ['RAM', '68%'],
-      ['SSD', '82%'],
-      ['NET', '24%'],
-    ],
-    badgeColor: '#06b6d4',
-    badgeWidth: '40px',
-    badgePadding: '0.375rem',
-  },
-};
-
-export const UniformBadges: Story = {
-  name: 'Uniform Badges',
-  args: {
-    title: 'Uniform Statistics',
-    data: [
-      ['A+', 'Excellent'],
-      ['B', 'Good'],
-      ['C', 'Average'],
-      ['D', 'Poor'],
-    ],
-    badgeColor: '#f59e0b',
-    badgeWidth: '44px',
-    badgePadding: '0.375rem 0.25rem',
-    badgeColors: {
-      0: '#10b981',
-      1: '#22c55e',
-      2: '#f59e0b',
-      3: '#ef4444',
-    },
-  },
-};
-
-export const AdaptiveVsFixed: Story = {
-  name: 'Adaptive vs Fixed Comparison',
-  args: {
-    title: 'Adaptive (without badgeWidth)',
-    data: [
-      ['1', 'Small'],
-      ['42', 'Medium'],
-      ['999', 'Large'],
-      ['1K+', 'Very large'],
-    ],
-    badgeColor: '#0ea5e9',
-  },
-  render: (args) => (
-    <div style={{ display: 'flex', gap: '2rem', alignItems: 'flex-start' }}>
-      <div>
-        <h4 style={{ marginBottom: '0.5rem' }}>Adaptive (without badgeWidth)</h4>
-        <CounterListBox {...args} />
-      </div>
-      <div>
-        <h4 style={{ marginBottom: '0.5rem' }}>Fixed (with badgeWidth="48px")</h4>
-        <CounterListBox {...args} badgeWidth='48px' />
-      </div>
-    </div>
-  ),
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { CounterListBox } from './CounterListBox';
+
+const meta: Meta<typeof CounterListBox> = {
+  title: 'Components/ListBox/CounterListBox',
+  component: CounterListBox,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A list component with circular badges for displaying counters and metrics.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    badgeColor: {
+      control: 'color',
+      description: 'Default badge color',
+    },
+    badgePadding: {
+      control: 'text',
+      description: 'Badge padding (e.g., "8px 16px")',
+    },
+    badgeWidth: {
+      control: 'text',
+      description: 'Forced badge width (e.g., "40px", "60px")',
+    },
+    data: {
+      control: 'object',
+      description: 'Array of strings or [badge, text] tuples',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  name: 'Default',
+  args: {
+    title: 'Statistics',
+    data: [
+      ['15', 'New messages'],
+      ['42', 'Active users'],
+      ['128', 'Total visits'],
+      ['7', 'Pending'],
+    ],
+    badgeColor: '#0ea5e9',
+  },
+};
+
+export const MixedTypes: Story = {
+  name: 'Mixed Types',
+  args: {
+    title: 'System Dashboard',
+    data: [
+      ['99+', 'Unread notifications'],
+      'No action required currently',
+      ['7', 'Overdue tasks'],
+      'All systems functioning normally',
+      ['3', 'Unresolved alerts'],
+      'Maintenance scheduled this weekend',
+    ],
+    badgeColor: '#8b5cf6',
+  },
+};
+
+export const ColorfulBadges: Story = {
+  name: 'Colorful Badges',
+  args: {
+    title: 'Performance Evaluation',
+    data: [
+      ['A+', 'Excellent'],
+      ['B', 'Good'],
+      ['C', 'Average'],
+      ['D', 'Needs improvement'],
+      ['F', 'Critical'],
+    ],
+    badgeColor: '#6b7280',
+    badgeColors: {
+      0: '#10b981',
+      1: '#22c55e',
+      2: '#f59e0b',
+      3: '#f97316',
+      4: '#ef4444',
+    },
+  },
+};
+
+export const TicketPriorities: Story = {
+  name: 'Ticket Priorities',
+  args: {
+    title: 'Tickets by Priority',
+    data: [
+      ['5', 'Critical - Immediate intervention required'],
+      ['12', 'High - Resolution within 24h'],
+      ['28', 'Medium - Resolution within 48h'],
+      ['45', 'Low - Resolution within 7 days'],
+    ],
+    badgeColor: '#ef4444',
+    badgeColors: {
+      0: '#dc2626',
+      1: '#f97316',
+      2: '#eab308',
+      3: '#84cc16',
+    },
+    lineClasses: {
+      0: 'ticket-critical',
+      1: 'ticket-high',
+      2: 'ticket-medium',
+    },
+  },
+  decorators: [
+    (Story) => (
+      <>
+        <style>
+          {`
+            .ticket-critical { background-color: #fef2f2; }
+            .ticket-high { background-color: #fffbeb; }
+            .ticket-medium { background-color: #f0f9ff; }
+          `}
+        </style>
+        <Story />
+      </>
+    ),
+  ],
+};
+
+export const ProgressIndicators: Story = {
+  name: 'Progress Indicators',
+  args: {
+    title: 'Project Progress',
+    data: [
+      ['75%', 'Website - Frontend development'],
+      ['90%', 'Mobile app - User testing'],
+      ['50%', 'API backend - Service integration'],
+      ['25%', 'Documentation - Writing in progress'],
+    ],
+    badgeColor: '#3b82f6',
+    badgePadding: '0.5rem 0.75rem',
+  },
+};
+
+export const RatingSystem: Story = {
+  name: 'Rating System',
+  args: {
+    title: 'Customer Reviews',
+    data: [
+      ['4.8', '⭐ Excellent - Exceptional service'],
+      ['4.2', '⭐ Very good - Very satisfied'],
+      ['3.5', '⭐ Average - Could be better'],
+      ['2.1', '⭐ Poor - Disappointed'],
+    ],
+    badgeColor: '#f59e0b',
+  },
+};
+
+export const SmallCounters: Story = {
+  name: 'Small Counters',
+  args: {
+    title: 'System Logs',
+    data: [
+      ['1', 'Critical error'],
+      ['5', 'Warnings'],
+      ['42', 'Information'],
+      ['128', 'Debug messages'],
+    ],
+    badgeColor: '#6366f1',
+    badgePadding: '0.25rem 0.5rem',
+  },
+};
+
+export const StatusIndicators: Story = {
+  name: 'Status Indicators',
+  args: {
+    title: 'Server Status',
+    data: [
+      ['🟢', 'Main server - Online'],
+      ['🟢', 'Database - Online'],
+      ['🟡', 'Cache - Degraded'],
+      ['🔴', 'Backup - Offline'],
+      ['🟢', 'CDN - Online'],
+    ],
+    badgeColor: '#6b7280',
+    badgePadding: '0.375rem 0.5rem',
+  },
+};
+
+export const LargeNumbers: Story = {
+  name: 'Large Numbers',
+  args: {
+    title: 'Global Statistics',
+    data: [
+      ['1.2K', 'Active users'],
+      ['45.8K', 'Total views'],
+      ['2.4M', 'Impressions'],
+      ['156.7K', 'Interactions'],
+    ],
+    badgeColor: '#8b5cf6',
+    badgePadding: '0.5rem 0.75rem',
+  },
+};
+
+export const FixedWidthBadges: Story = {
+  name: 'Fixed Width Badges',
+  args: {
+    title: 'Controlled Width Badges',
+    data: [
+      ['1', 'Single digit'],
+      ['42', 'Two digits'],
+      ['999', 'Three digits'],
+      ['1K', 'Short text'],
+      ['10K+', 'Longer text'],
+    ],
+    badgeColor: '#8b5cf6',
+    badgeWidth: '48px',
+    badgePadding: '0.5rem 0.25rem',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Using the `badgeWidth` prop to force a fixed width on all badges, creating perfect alignment.',
+      },
+    },
+  },
+};
+
+export const CompactFixedBadges: Story = {
+  name: 'Compact Fixed Badges',
+  args: {
+    title: 'System Metrics',
+    data: [
+      ['CPU', '45%'],
+      ['RAM', '68%'],
+      ['SSD', '82%'],
+      ['NET', '24%'],
+    ],
+    badgeColor: '#06b6d4',
+    badgeWidth: '40px',
+    badgePadding: '0.375rem',
+  },
+};
+
+export const UniformBadges: Story = {
+  name: 'Uniform Badges',
+  args: {
+    title: 'Uniform Statistics',
+    data: [
+      ['A+', 'Excellent'],
+      ['B', 'Good'],
+      ['C', 'Average'],
+      ['D', 'Poor'],
+    ],
+    badgeColor: '#f59e0b',
+    badgeWidth: '44px',
+    badgePadding: '0.375rem 0.25rem',
+    badgeColors: {
+      0: '#10b981',
+      1: '#22c55e',
+      2: '#f59e0b',
+      3: '#ef4444',
+    },
+  },
+};
+
+export const AdaptiveVsFixed: Story = {
+  name: 'Adaptive vs Fixed Comparison',
+  args: {
+    title: 'Adaptive (without badgeWidth)',
+    data: [
+      ['1', 'Small'],
+      ['42', 'Medium'],
+      ['999', 'Large'],
+      ['1K+', 'Very large'],
+    ],
+    badgeColor: '#0ea5e9',
+  },
+  render: (args) => (
+    <div style={{ display: 'flex', gap: '2rem', alignItems: 'flex-start' }}>
+      <div>
+        <h4 style={{ marginBottom: '0.5rem' }}>Adaptive (without badgeWidth)</h4>
+        <CounterListBox {...args} />
+      </div>
+      <div>
+        <h4 style={{ marginBottom: '0.5rem' }}>Fixed (with badgeWidth="48px")</h4>
+        <CounterListBox {...args} badgeWidth='48px' />
+      </div>
+    </div>
+  ),
+};