@tsiky/components-r19 1.3.0 → 1.3.2

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

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

@@ -1,61 +0,0 @@
-.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;
-}

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

@@ -1,257 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { TrendListBox } from './TrendListBox';
-import {
-  ArrowUp,
-  ArrowDown,
-  Minus,
-  TrendingUp,
-  Users,
-  DollarSign,
-  Activity,
-  Star,
-  AlertTriangle,
-  Zap,
-  Clock,
-  Target,
-} from 'lucide-react';
-
-const meta: Meta<typeof TrendListBox> = {
-  title: 'Components/ListBox/TrendListBox',
-  component: TrendListBox,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component: 'A component to display trends with icons, values, and variations.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    items: {
-      control: 'object',
-      description: 'Array of trend items with label, value, delta, and optional icon',
-    },
-    titleBg: {
-      control: 'color',
-      description: 'Background color of the title',
-    },
-    titleColor: {
-      control: 'color',
-      description: 'Text color of the title',
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  name: 'Default',
-  args: {
-    title: "Today's Trends",
-    items: [
-      { label: 'Sales', value: '+12%', delta: 12, icon: <ArrowUp size={16} /> },
-      { label: 'Visits', value: '-3%', delta: -3, icon: <ArrowDown size={16} /> },
-      { label: 'Conversion', value: '+5%', delta: 5, icon: <ArrowUp size={16} /> },
-      { label: 'Bounce Rate', value: '-2%', delta: -2, icon: <ArrowDown size={16} /> },
-    ],
-  },
-};
-
-export const PerformanceTrends: Story = {
-  name: 'Performance Trends',
-  args: {
-    title: 'Department Performance',
-    items: [
-      { label: 'Marketing', value: '+15%', delta: 15, icon: <TrendingUp size={16} /> },
-      { label: 'Sales', value: '+8%', delta: 8, icon: <ArrowUp size={16} /> },
-      { label: 'Support', value: '-2%', delta: -2, icon: <ArrowDown size={16} /> },
-      { label: 'IT', value: '+22%', delta: 22, icon: <Zap size={16} /> },
-    ],
-    lineClasses: {
-      0: 'trend-excellent',
-      1: 'trend-good',
-      2: 'trend-warning',
-      3: 'trend-outstanding',
-    },
-  },
-  decorators: [
-    (Story) => (
-      <>
-        <style>
-          {`
-            .trend-excellent { background-color: #f0fdf4; }
-            .trend-good { background-color: #f0f9ff; }
-            .trend-warning { background-color: #fffbeb; }
-            .trend-outstanding { background-color: #faf5ff; }
-          `}
-        </style>
-        <Story />
-      </>
-    ),
-  ],
-};
-
-export const StatusMonitoring: Story = {
-  name: 'Status Monitoring',
-  args: {
-    title: 'System Health',
-    items: [
-      { label: 'Availability', value: '99.9%', delta: 0.1, icon: <Activity size={16} /> },
-      { label: 'Performance', value: '96%', delta: -2, icon: <AlertTriangle size={16} /> },
-      { label: 'Security', value: '100%', delta: 0, icon: <Star size={16} /> },
-      { label: 'Capacity', value: '78%', delta: 8, icon: <TrendingUp size={16} /> },
-    ],
-  },
-};
-
-export const AlertLevels: Story = {
-  name: 'Alert Levels',
-  args: {
-    title: 'Real-time Alerts',
-    items: [
-      {
-        label: 'Security',
-        value: 'High',
-        delta: 3,
-        icon: <AlertTriangle size={16} color='#dc2626' />,
-      },
-      {
-        label: 'Performance',
-        value: 'Medium',
-        delta: -1,
-        icon: <Activity size={16} color='#f59e0b' />,
-      },
-      { label: 'Network', value: 'Normal', delta: 0, icon: <Zap size={16} color='#22c55e' /> },
-      {
-        label: 'Storage',
-        value: 'Critical',
-        delta: 15,
-        icon: <AlertTriangle size={16} color='#dc2626' />,
-      },
-    ],
-    lineClasses: {
-      0: 'alert-high',
-      2: 'alert-normal',
-      3: 'alert-critical',
-    },
-  },
-  decorators: [
-    (Story) => (
-      <>
-        <style>
-          {`
-            .alert-high { background-color: #fef2f2; }
-            .alert-normal { background-color: #f0fdf4; }
-            .alert-critical { background-color: #fef2f2; border-left: 3px solid #dc2626; }
-          `}
-        </style>
-        <Story />
-      </>
-    ),
-  ],
-};
-
-export const CustomIcons: Story = {
-  name: 'Custom Icons',
-  args: {
-    title: 'Business Indicators',
-    items: [
-      { label: 'Revenue', value: '€45.2K', delta: 12.5 },
-      { label: 'New Customers', value: '+24', delta: 8 },
-      { label: 'Satisfaction', value: '4.8/5', delta: 0.3 },
-      { label: 'Avg. Delay', value: '-15%', delta: -15 },
-    ],
-    renderTrendIcon: (item) => {
-      if (item.delta && item.delta > 10) {
-        return <Zap size={16} color='#f59e0b' />;
-      } else if (item.delta && item.delta > 0) {
-        return <ArrowUp size={16} color='#10b981' />;
-      } else if (item.delta && item.delta < 0) {
-        return <ArrowDown size={16} color='#ef4444' />;
-      }
-      return <Minus size={16} color='#6b7280' />;
-    },
-  },
-};
-
-export const RatingTrends: Story = {
-  name: 'Rating Trends',
-  args: {
-    title: 'Ratings Evolution',
-    items: [
-      { label: 'Product Quality', value: '4.8→4.9', delta: 0.1, icon: <ArrowUp size={16} /> },
-      { label: 'Customer Service', value: '4.5→4.3', delta: -0.2, icon: <ArrowDown size={16} /> },
-      { label: 'Speed', value: '4.7→4.7', delta: 0, icon: <Minus size={16} /> },
-      { label: 'Value for Money', value: '4.2→4.6', delta: 0.4, icon: <ArrowUp size={16} /> },
-    ],
-  },
-};
-
-export const FinancialMetrics: Story = {
-  name: 'Financial Metrics',
-  args: {
-    title: 'Financial Indicators',
-    titleBg: '#059669',
-    titleColor: 'white',
-    items: [
-      { label: 'Revenue Q1', value: '€125K', delta: 8.5, icon: <DollarSign size={16} /> },
-      { label: 'Gross Margin', value: '42%', delta: 2.1, icon: <TrendingUp size={16} /> },
-      { label: 'Expenses', value: '€89K', delta: -1.2, icon: <ArrowDown size={16} /> },
-      { label: 'ROI', value: '18%', delta: 3.4, icon: <Zap size={16} /> },
-    ],
-  },
-};
-
-export const UserAnalytics: Story = {
-  name: 'User Analytics',
-  args: {
-    title: 'User Engagement',
-    items: [
-      { label: 'New Signups', value: '+156', delta: 12, icon: <Users size={16} /> },
-      { label: 'Active Users', value: '1.2K', delta: 8, icon: <Activity size={16} /> },
-      { label: 'Retention Rate', value: '78%', delta: 4, icon: <TrendingUp size={16} /> },
-      { label: 'Churn Rate', value: '2.1%', delta: -0.5, icon: <ArrowDown size={16} /> },
-    ],
-  },
-};
-
-export const TimeMetrics: Story = {
-  name: 'Time Metrics',
-  args: {
-    title: 'Time Performance',
-    items: [
-      { label: 'Load Time', value: '1.2s', delta: -0.3, icon: <ArrowDown size={16} /> },
-      { label: 'Response Time', value: '245ms', delta: 15, icon: <ArrowUp size={16} /> },
-      { label: 'Availability', value: '99.95%', delta: 0.05, icon: <ArrowUp size={16} /> },
-      { label: 'Avg. Session', value: '4m 12s', delta: 23, icon: <Clock size={16} /> },
-    ],
-  },
-};
-
-export const GoalTracking: Story = {
-  name: 'Goal Tracking',
-  args: {
-    title: 'Objective Progress',
-    items: [
-      { label: 'Monthly Sales', value: '85%', delta: 5, icon: <Target size={16} /> },
-      { label: 'New Clients', value: '120%', delta: 20, icon: <Target size={16} /> },
-      { label: 'Customer Satisfaction', value: '92%', delta: -3, icon: <Target size={16} /> },
-      { label: 'Operational Efficiency', value: '78%', delta: 8, icon: <Target size={16} /> },
-    ],
-  },
-};
-
-export const WithoutDeltas: Story = {
-  name: 'Without Variations',
-  args: {
-    title: 'Current Stats',
-    items: [
-      { label: 'Online Users', value: '423', icon: <Users size={16} /> },
-      { label: 'Orders Today', value: '156', icon: <DollarSign size={16} /> },
-      { label: 'Open Tickets', value: '24', icon: <Activity size={16} /> },
-      { label: 'Active Servers', value: '8', icon: <Zap size={16} /> },
-    ],
-  },
-};

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

@@ -1,90 +0,0 @@
-import React from 'react';
-import './TrendListBox.css';
-
-export type TrendBoxItem = {
-  label: string;
-  value: string;
-  delta?: number;
-  deltaLabel?: string;
-  icon?: React.ReactNode;
-  className?: string;
-};
-
-export type TrendListBoxProps = {
-  className?: string;
-  style?: React.CSSProperties;
-  title?: string;
-  items?: TrendBoxItem[];
-  titleBg?: string;
-  titleColor?: string;
-  itemBg?: string;
-  lineClasses?: { [index: number]: string };
-  renderTrendIcon?: (it: TrendBoxItem) => React.ReactNode;
-  colGap?: string;
-};
-
-export const TrendListBox: React.FC<TrendListBoxProps> = ({
-  className = '',
-  style = {},
-  title,
-  items = [],
-  titleBg,
-  titleColor,
-  itemBg,
-  lineClasses = {},
-  renderTrendIcon,
-  colGap = '1rem',
-}) => {
-  const gridStyle: React.CSSProperties | undefined = colGap
-    ? ({ ['--col-gap' as any]: colGap } as React.CSSProperties)
-    : undefined;
-
-  return (
-    <div className={`tlb-root ${className}`} style={{ ...style, background: itemBg ?? undefined }}>
-      {title && (
-        <div
-          className='tlb-title'
-          style={{
-            background: titleBg ?? undefined,
-            color: titleColor ?? undefined,
-          }}
-        >
-          {title}
-        </div>
-      )}
-
-      <div className='tlb-grid' style={gridStyle}>
-        {items.map((it, idx) => {
-          const lineClass = lineClasses[idx] || '';
-
-          return (
-            <div
-              key={idx}
-              className={`tlb-row ${lineClass}`}
-              style={{ background: itemBg ?? undefined }}
-            >
-              <div className='tlb-label'>{it.label}</div>
-
-              <div className='tlb-value-group'>
-                <div className='tlb-icon-col'>
-                  {renderTrendIcon ? renderTrendIcon(it) : (it.icon ?? null)}
-                </div>
-
-                <div className='tlb-value-wrap'>
-                  <div className='tlb-value'>{it.value}</div>
-                  {typeof it.delta !== 'undefined' && (
-                    <div
-                      className={`tlb-delta ${it.delta > 0 ? 'positive' : it.delta < 0 ? 'negative' : 'neutral'}`}
-                    >
-                      {it.deltaLabel ?? String(it.delta)}
-                    </div>
-                  )}
-                </div>
-              </div>
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-};

package/src/components/AnnouncementPanel/ListContentContainer.css

@@ -1,23 +0,0 @@
-.lcc-root {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  justify-content: space-between;
-  border-radius: 8px;
-  padding: 0.5rem;
-  box-shadow: 0 2px 4px #0000001a;
-  box-sizing: border-box;
-  width: 100%;
-}
-
-.lcc-cell {
-  display: flex;
-  align-items: flex-start;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.lcc-cell > * {
-  width: 100%;
-  box-sizing: border-box;
-}