@tsiky/components-r19 1.1.0 → 1.2.0

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

@@ -1,189 +1,189 @@
-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'],
-    ],
-  },
-};
+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'],
+    ],
+  },
+};

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

@@ -1,138 +1,138 @@
-import React from 'react';
-import './SimpleListBox.css';
-
-export type SimpleListBoxProps = {
-  className?: string;
-  style?: React.CSSProperties;
-  title?: string;
-  titleClassName?: string;
-  titleStyle?: React.CSSProperties;
-  data?: (string | [string, string])[];
-  lineClasses?: { [index: number]: string };
-  renderCell?: (value: string, row?: number, col?: number) => React.ReactNode;
-  bg?: string;
-  titleBg?: string;
-  titleColor?: string;
-  itemBg?: string;
-  emptyContent?: React.ReactNode;
-  colGap?: string;
-};
-
-export const SimpleListBox: React.FC<SimpleListBoxProps> = ({
-  className = '',
-  style = {},
-  title,
-  titleClassName = '',
-  titleStyle,
-  data,
-  lineClasses = {},
-  renderCell,
-  bg,
-  titleBg,
-  titleColor,
-  itemBg,
-  emptyContent,
-  colGap = '1rem',
-}) => {
-  const rows = Array.isArray(data) ? data : [];
-  const isEmpty = rows.length === 0;
-  const all1D = rows.every((r) => typeof r === 'string');
-  const has2D = rows.some((r) => Array.isArray(r));
-
-  const cellRenderer = (value: string, r?: number, c?: number) =>
-    renderCell ? renderCell(value, r, c) : <span className='slb-cell-text'>{value}</span>;
-
-  const gridStyle: React.CSSProperties | undefined = colGap
-    ? ({ ['--col-gap' as any]: colGap } as React.CSSProperties)
-    : undefined;
-
-  if (isEmpty) {
-    return (
-      <div className={`slb-root ${className}`} style={{ ...style, background: bg ?? undefined }}>
-        {title && (
-          <div
-            className={`slb-title ${titleClassName}`}
-            style={{
-              ...titleStyle,
-              background: titleBg ?? undefined,
-              color: titleColor ?? undefined,
-            }}
-          >
-            {title}
-          </div>
-        )}
-        <div className='slb-empty'>{emptyContent ?? null}</div>
-      </div>
-    );
-  }
-
-  if (all1D && !has2D) {
-    return (
-      <div className={`slb-root ${className}`} style={{ ...style, background: bg ?? undefined }}>
-        {title && (
-          <div
-            className={`slb-title ${titleClassName}`}
-            style={{ background: titleBg ?? undefined, color: titleColor ?? undefined }}
-          >
-            {title}
-          </div>
-        )}
-        <ul className='slb-list'>
-          {(rows as string[]).map((it, i) => (
-            <li
-              key={i}
-              className={`slb-item ${lineClasses[i] || ''}`}
-              style={{ background: itemBg ?? undefined }}
-            >
-              {cellRenderer(it, i, 0)}
-            </li>
-          ))}
-        </ul>
-      </div>
-    );
-  }
-
-  // Mixed mode: each row is a wrapper (ligne) that contains left/right cells.
-  return (
-    <div className={`slb-root ${className}`} style={{ ...style, background: bg ?? undefined }}>
-      {title && (
-        <div
-          className={`slb-title ${titleClassName}`}
-          style={{ background: titleBg ?? undefined, color: titleColor ?? undefined }}
-        >
-          {title}
-        </div>
-      )}
-
-      <div className='slb-grid' style={gridStyle}>
-        {rows.map((r, ridx) => {
-          const lineClass = lineClasses[ridx] || '';
-          if (Array.isArray(r)) {
-            const [left, right] = r as [string, string];
-            return (
-              <div
-                key={ridx}
-                className={`slb-row ${lineClass}`}
-                style={{ background: itemBg ?? undefined }}
-              >
-                <div className='slb-grid-left'>{cellRenderer(left, ridx, 0)}</div>
-                <div className='slb-grid-right'>{cellRenderer(right, ridx, 1)}</div>
-              </div>
-            );
-          }
-
-          return (
-            <div
-              key={ridx}
-              className={`slb-row ${lineClass}`}
-              style={{ background: itemBg ?? undefined }}
-            >
-              <div className='slb-grid-left'>{cellRenderer(r as string, ridx, 0)}</div>
-              <div className='slb-grid-right slb-empty-cell' aria-hidden='true' />
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-};
+import React from 'react';
+import './SimpleListBox.css';
+
+export type SimpleListBoxProps = {
+  className?: string;
+  style?: React.CSSProperties;
+  title?: string;
+  titleClassName?: string;
+  titleStyle?: React.CSSProperties;
+  data?: (string | [string, string])[];
+  lineClasses?: { [index: number]: string };
+  renderCell?: (value: string, row?: number, col?: number) => React.ReactNode;
+  bg?: string;
+  titleBg?: string;
+  titleColor?: string;
+  itemBg?: string;
+  emptyContent?: React.ReactNode;
+  colGap?: string;
+};
+
+export const SimpleListBox: React.FC<SimpleListBoxProps> = ({
+  className = '',
+  style = {},
+  title,
+  titleClassName = '',
+  titleStyle,
+  data,
+  lineClasses = {},
+  renderCell,
+  bg,
+  titleBg,
+  titleColor,
+  itemBg,
+  emptyContent,
+  colGap = '1rem',
+}) => {
+  const rows = Array.isArray(data) ? data : [];
+  const isEmpty = rows.length === 0;
+  const all1D = rows.every((r) => typeof r === 'string');
+  const has2D = rows.some((r) => Array.isArray(r));
+
+  const cellRenderer = (value: string, r?: number, c?: number) =>
+    renderCell ? renderCell(value, r, c) : <span className='slb-cell-text'>{value}</span>;
+
+  const gridStyle: React.CSSProperties | undefined = colGap
+    ? ({ ['--col-gap' as any]: colGap } as React.CSSProperties)
+    : undefined;
+
+  if (isEmpty) {
+    return (
+      <div className={`slb-root ${className}`} style={{ ...style, background: bg ?? undefined }}>
+        {title && (
+          <div
+            className={`slb-title ${titleClassName}`}
+            style={{
+              ...titleStyle,
+              background: titleBg ?? undefined,
+              color: titleColor ?? undefined,
+            }}
+          >
+            {title}
+          </div>
+        )}
+        <div className='slb-empty'>{emptyContent ?? null}</div>
+      </div>
+    );
+  }
+
+  if (all1D && !has2D) {
+    return (
+      <div className={`slb-root ${className}`} style={{ ...style, background: bg ?? undefined }}>
+        {title && (
+          <div
+            className={`slb-title ${titleClassName}`}
+            style={{ background: titleBg ?? undefined, color: titleColor ?? undefined }}
+          >
+            {title}
+          </div>
+        )}
+        <ul className='slb-list'>
+          {(rows as string[]).map((it, i) => (
+            <li
+              key={i}
+              className={`slb-item ${lineClasses[i] || ''}`}
+              style={{ background: itemBg ?? undefined }}
+            >
+              {cellRenderer(it, i, 0)}
+            </li>
+          ))}
+        </ul>
+      </div>
+    );
+  }
+
+  // Mixed mode: each row is a wrapper (ligne) that contains left/right cells.
+  return (
+    <div className={`slb-root ${className}`} style={{ ...style, background: bg ?? undefined }}>
+      {title && (
+        <div
+          className={`slb-title ${titleClassName}`}
+          style={{ background: titleBg ?? undefined, color: titleColor ?? undefined }}
+        >
+          {title}
+        </div>
+      )}
+
+      <div className='slb-grid' style={gridStyle}>
+        {rows.map((r, ridx) => {
+          const lineClass = lineClasses[ridx] || '';
+          if (Array.isArray(r)) {
+            const [left, right] = r as [string, string];
+            return (
+              <div
+                key={ridx}
+                className={`slb-row ${lineClass}`}
+                style={{ background: itemBg ?? undefined }}
+              >
+                <div className='slb-grid-left'>{cellRenderer(left, ridx, 0)}</div>
+                <div className='slb-grid-right'>{cellRenderer(right, ridx, 1)}</div>
+              </div>
+            );
+          }
+
+          return (
+            <div
+              key={ridx}
+              className={`slb-row ${lineClass}`}
+              style={{ background: itemBg ?? undefined }}
+            >
+              <div className='slb-grid-left'>{cellRenderer(r as string, ridx, 0)}</div>
+              <div className='slb-grid-right slb-empty-cell' aria-hidden='true' />
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};