@tsiky/components-r19 1.3.0 → 1.3.2

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

@@ -1,292 +0,0 @@
-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>
-  ),
-};

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

@@ -1,106 +0,0 @@
-import React from 'react';
-import './CounterListBox.css';
-
-export type CounterListBoxProps = {
-  className?: string;
-  style?: React.CSSProperties;
-  title?: string;
-  titleColor?: string;
-  data?: (string | [string, string])[];
-  badgeColor?: string;
-  badgeColors?: { [index: number]: string };
-  badgePadding?: string;
-  badgeWidth?: string;
-  itemBg?: string;
-  lineClasses?: { [index: number]: string };
-  colGap?: string;
-};
-
-export const CounterListBox: React.FC<CounterListBoxProps> = ({
-  className = '',
-  style = {},
-  title,
-  titleColor,
-  data = [],
-  badgeColor = '#0ea5e9',
-  badgeColors = {},
-  badgePadding = '8px 16px',
-  badgeWidth,
-  itemBg,
-  lineClasses = {},
-  colGap = '1rem',
-}) => {
-  const has2D = data.some((r) => Array.isArray(r));
-  const gridStyle: React.CSSProperties | undefined = colGap
-    ? ({ ['--col-gap' as any]: colGap } as React.CSSProperties)
-    : undefined;
-
-  return (
-    <div className={`clb-root ${className}`} style={{ ...style }}>
-      {title && (
-        <div className='clb-title' style={titleColor ? { color: titleColor } : undefined}>
-          {title}
-        </div>
-      )}
-
-      <div className='clb-grid' style={gridStyle}>
-        {(data as (string | [string, string])[]).map((row, idx) => {
-          const lineClass = lineClasses[idx] || '';
-
-          if (Array.isArray(row)) {
-            const [left, right] = row;
-            const currentBadgeColor = badgeColors[idx] || badgeColor;
-
-            return (
-              <div
-                key={idx}
-                className={`clb-row ${lineClass}`}
-                style={{ background: itemBg ?? undefined }}
-              >
-                <div className='clb-badge-col'>
-                  <div
-                    className='counter-badge'
-                    style={{
-                      background: currentBadgeColor,
-                      padding: badgePadding,
-                      width: badgeWidth,
-                      minWidth: badgeWidth,
-                    }}
-                  >
-                    {left}
-                  </div>
-                </div>
-
-                <div className='clb-text'>{right}</div>
-              </div>
-            );
-          }
-
-          if (!has2D) {
-            return (
-              <div
-                key={idx}
-                className={`clb-fullrow ${lineClass}`}
-                style={{ background: itemBg ?? undefined }}
-              >
-                <span>{row as string}</span>
-              </div>
-            );
-          }
-
-          // 1D in mixed mode: empty badge + text
-          return (
-            <div
-              key={idx}
-              className={`clb-row ${lineClass}`}
-              style={{ background: itemBg ?? undefined }}
-            >
-              <div className='clb-badge-col clb-empty-badge' />
-              <div className='clb-text'>{row as string}</div>
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-};

package/src/components/AnnouncementPanel/ListBox/SimpleListBox.css

@@ -1,57 +0,0 @@
-.slb-root {
-  padding: 0.125rem;
-}
-.slb-title {
-  font-weight: var(--font-bold);
-  padding: 0.0625rem 0.125rem;
-  border-radius: 0.03125rem;
-  margin-bottom: 0.0625rem;
-}
-.slb-list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 0.03125rem;
-}
-.slb-item {
-  padding: 0.0625rem 0.125rem;
-}
-
-.slb-grid {
-  display: flex;
-  flex-direction: column;
-  gap: 0.03125rem;
-}
-
-.slb-row {
-  display: grid;
-  grid-template-columns: minmax(max-content, 1fr) minmax(max-content, 1fr);
-  gap: var(--col-gap, 0.125rem);
-  align-items: center;
-  padding: 0;
-}
-
-.slb-grid-left {
-  padding: 0.0625rem 0.125rem;
-  min-width: 0;
-  justify-self: start;
-  overflow-wrap: break-word;
-  word-wrap: break-word;
-}
-
-.slb-grid-right {
-  padding: 0.0625rem 0.125rem;
-  min-width: 0;
-  justify-self: start;
-}
-
-.slb-empty {
-  color: #666;
-  padding: 0.125rem 0.125rem;
-  text-align: center;
-}
-.slb-empty-cell {
-  opacity: 0.5;
-}

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

@@ -1,189 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { SimpleListBox } from './SimpleListBox';
-
-const meta: Meta<typeof SimpleListBox> = {
-  title: 'Components/ListBox/SimpleListBox',
-  component: SimpleListBox,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          'A simple list component for displaying data in one or two columns with a clean design.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    data: {
-      control: 'object',
-      description: 'Array of strings or [left, right] tuples for two-column display',
-    },
-    titleBg: {
-      control: 'color',
-      description: 'Background color for the title',
-    },
-    titleColor: {
-      control: 'color',
-      description: 'Text color for the title',
-    },
-    itemBg: {
-      control: 'color',
-      description: 'Background color for items',
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  name: 'Default',
-  args: {
-    title: 'Simple List',
-    data: ['Item 1', 'Item 2', 'Item 3', 'Item 4'],
-  },
-};
-
-export const TwoColumns: Story = {
-  name: 'Two Columns',
-  args: {
-    title: 'Product Inventory',
-    data: [
-      ['Apples', '42 units'],
-      ['Bananas', '28 units'],
-      ['Oranges', '15 units'],
-      ['Pears', '33 units'],
-      ['Pineapples', '8 units'],
-    ],
-  },
-};
-
-export const MixedData: Story = {
-  name: 'Mixed Data',
-  args: {
-    title: 'System Report',
-    data: [
-      ['CPU', '45% usage'],
-      'No critical alerts detected',
-      ['Memory', '68% used'],
-      'All services running normally',
-      ['Storage', '82% occupied'],
-      'Backup scheduled for tonight',
-    ],
-  },
-};
-
-export const PriorityLevels: Story = {
-  name: 'Priority Levels',
-  args: {
-    title: 'Alerts by Priority',
-    data: [
-      ['Critical', '3 alerts'],
-      ['High', '7 alerts'],
-      ['Medium', '12 alerts'],
-      ['Low', '5 alerts'],
-    ],
-    lineClasses: {
-      0: 'priority-critical',
-      1: 'priority-high',
-      2: 'priority-medium',
-      3: 'priority-low',
-    },
-  },
-  decorators: [
-    (Story) => (
-      <>
-        <style>
-          {`
-            .priority-critical { background-color: #fef2f2; color: #dc2626; }
-            .priority-high { background-color: #fffbeb; color: #d97706; }
-            .priority-medium { background-color: #f0f9ff; color: #0369a1; }
-            .priority-low { background-color: #f0fdf4; color: #16a34a; }
-          `}
-        </style>
-        <Story />
-      </>
-    ),
-  ],
-};
-
-export const ServiceStatus: Story = {
-  name: 'Service Status',
-  args: {
-    title: 'Service Status',
-    data: [
-      ['API Gateway', '✅ Online'],
-      ['Database', '✅ Online'],
-      ['Redis Cache', '⚠️ Degraded'],
-      ['Email Service', '❌ Offline'],
-      ['Payment Service', '✅ Online'],
-    ],
-    lineClasses: {
-      2: 'status-degraded',
-      3: 'status-offline',
-    },
-  },
-  decorators: [
-    (Story) => (
-      <>
-        <style>
-          {`
-            .status-degraded { background-color: #fffbeb; color: #d97706; }
-            .status-offline { background-color: #fef2f2; color: #dc2626; }
-          `}
-        </style>
-        <Story />
-      </>
-    ),
-  ],
-};
-
-export const CustomBackgrounds: Story = {
-  name: 'Custom Backgrounds',
-  args: {
-    title: 'System Metrics',
-    titleBg: '#1e40af',
-    titleColor: 'white',
-    itemBg: '#f0f9ff',
-    data: [
-      ['CPU Temperature', '42°C'],
-      ['Uptime', '99.9%'],
-      ['Network Latency', '24ms'],
-      ['Requests/min', '1,245'],
-    ],
-  },
-};
-
-export const EmptyState: Story = {
-  name: 'Empty State',
-  args: {
-    title: 'Pending Tasks',
-    data: [],
-    emptyContent: '🎉 No pending tasks - everything is up to date!',
-  },
-};
-
-export const CompactView: Story = {
-  name: 'Compact View',
-  args: {
-    title: 'Quick Metrics',
-    data: [
-      ['Visits', '1.2K'],
-      ['Conversions', '42'],
-      ['Rate', '3.5%'],
-    ],
-  },
-};
-
-export const LongContent: Story = {
-  name: 'Long Content',
-  args: {
-    title: 'Detailed Descriptions',
-    data: [
-      ['Customer Service', 'Available 24/7 with multilingual support and quick problem resolution'],
-      ['Delivery', 'Free for orders over €50 with real-time tracking'],
-      ['Returns', '30-day return policy with no fees or questions'],
-    ],
-  },
-};