@tsiky/components-r19 1.0.0

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

@@ -0,0 +1,106 @@
+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

@@ -0,0 +1,57 @@
+.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

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

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

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

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

@@ -0,0 +1,61 @@
+.tlb-root {
+  padding: 0.125rem;
+}
+.tlb-title {
+  font-weight: var(--font-bold);
+  padding: 0.0625rem 0.125rem;
+  margin-bottom: 0.0625rem;
+}
+
+.tlb-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 0.03125rem;
+}
+
+/* row wrapper */
+.tlb-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;
+}
+
+.tlb-label {
+  padding: 0.0625rem 0 0.0625rem 0.0625rem;
+  min-width: 0;
+  justify-self: start;
+}
+.tlb-value-group {
+  display: flex;
+  align-items: center;
+  gap: 0.015625rem;
+  min-width: 0;
+  justify-self: center;
+}
+.tlb-value-wrap {
+  display: flex;
+  gap: 0.03125rem;
+  align-items: center;
+  min-width: 0;
+}
+.tlb-value,
+.tlb-delta {
+  min-width: 0;
+  white-space: nowrap;
+}
+.tlb-icon-col {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.tlb-delta.positive {
+  color: #15803d;
+}
+.tlb-delta.negative {
+  color: #dc2626;
+}
+.tlb-delta.neutral {
+  color: #6b7280;
+}