@tsiky/components-r19 1.0.0

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

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

@@ -0,0 +1,90 @@
+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/ListBox/index.ts

@@ -0,0 +1,3 @@
+export * from './SimpleListBox';
+export * from './CounterListBox';
+export * from './TrendListBox';

package/src/components/AnnouncementPanel/ListContentContainer.css

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

package/src/components/AnnouncementPanel/ListContentContainer.stories.tsx

@@ -0,0 +1,212 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ArrowUp, ArrowDown, TrendingUp, Users, Star } from 'lucide-react';
+import { ListContentContainer } from './ListContentContainer';
+import { SimpleListBox } from './ListBox/SimpleListBox';
+import { CounterListBox } from './ListBox/CounterListBox';
+import { TrendListBox } from './ListBox/TrendListBox';
+
+const meta: Meta<typeof ListContentContainer> = {
+  title: 'Components/ListContentContainer',
+  component: ListContentContainer,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'A horizontal container for grouping list components with consistent spacing and background.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    gap: {
+      control: { type: 'text' },
+      description: 'Space between items (e.g., "1rem", "10px")',
+    },
+    background: {
+      control: { type: 'color' },
+      description: 'Background color of the container',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    gap: '1rem',
+    background: '#008FBB',
+  },
+  render: (args) => (
+    <ListContentContainer {...args} style={{ width: 520 }}>
+      <SimpleListBox title='Admissions' data={['63 Patients']} />
+      <CounterListBox title='Summary' data={[['63', 'Patients']]} badgeColor='#06b6d4' />
+      <TrendListBox
+        title='Trend'
+        items={[
+          { label: 'MED', value: '+3', delta: 3, icon: <ArrowUp size={16} /> },
+          { label: 'SURG', value: '-2', delta: -2, icon: <ArrowDown size={16} /> },
+        ]}
+      />
+    </ListContentContainer>
+  ),
+};
+
+export const HealthcareDashboard: Story = {
+  name: 'Healthcare Dashboard',
+  args: {
+    background: '#0369a1',
+    gap: '0.8rem',
+  },
+  render: (args) => (
+    <ListContentContainer {...args} style={{ width: 600 }}>
+      <SimpleListBox title='Operating Rooms' data={['4 Occupied', '2 Available']} />
+      <CounterListBox title='Patients' data={[['128', 'Hospitalized']]} badgeColor='#dc2626' />
+      <TrendListBox
+        title='Admissions'
+        items={[
+          { label: 'Emergency', value: '+8', delta: 8, icon: <ArrowUp size={16} /> },
+          { label: 'Scheduled', value: '+3', delta: 3, icon: <ArrowUp size={16} /> },
+        ]}
+      />
+      <SimpleListBox title='Staff' data={['18 Doctors', '32 Nurses']} />
+    </ListContentContainer>
+  ),
+};
+
+export const BusinessMetrics: Story = {
+  name: 'Business Metrics',
+  args: {
+    background: '#059669',
+    gap: '1rem',
+  },
+  render: (args) => (
+    <ListContentContainer {...args} style={{ width: 650 }}>
+      <TrendListBox
+        title='Performance'
+        items={[
+          { label: 'Revenue', value: '€12.5K', delta: 12, icon: <TrendingUp size={16} /> },
+          { label: 'Users', value: '+42', delta: 8, icon: <Users size={16} /> },
+          { label: 'Growth', value: '+8.1%', delta: 8.1, icon: <ArrowUp size={16} /> },
+        ]}
+      />
+      <CounterListBox
+        title='Monthly Summary'
+        data={[
+          ['156', 'Orders Completed'],
+          ['€2.4K', 'Revenue Generated'],
+          ['24', 'Pending Orders'],
+        ]}
+        badgeColor='#f59e0b'
+      />
+      <SimpleListBox
+        title='Quick Stats'
+        data={[
+          ['Conversion Rate', '3.2%'],
+          ['Customer Satisfaction', '4.8/5'],
+        ]}
+      />
+    </ListContentContainer>
+  ),
+};
+
+export const RatingSystem: Story = {
+  name: 'Rating System',
+  args: {
+    background: '#7c3aed',
+    gap: '1.2rem',
+  },
+  render: (args) => (
+    <ListContentContainer {...args} style={{ width: 580 }}>
+      <TrendListBox
+        title='Quality Ratings'
+        items={[
+          {
+            label: 'Service',
+            value: '4.8/5',
+            delta: 0.2,
+            icon: <Star size={16} color='#f59e0b' fill='#f59e0b' />,
+          },
+          {
+            label: 'Response',
+            value: '4.5/5',
+            delta: -0.1,
+            icon: <Star size={16} color='#f59e0b' fill='#f59e0b' />,
+          },
+          {
+            label: 'Support',
+            value: '4.9/5',
+            delta: 0.3,
+            icon: <Star size={16} color='#f59e0b' fill='#f59e0b' />,
+          },
+        ]}
+      />
+      <CounterListBox
+        title='Review Summary'
+        data={[
+          ['156', '5-Star Reviews'],
+          ['24', '4-Star Reviews'],
+          ['8', '3-Star Reviews'],
+        ]}
+        badgeColor='#ec4899'
+      />
+    </ListContentContainer>
+  ),
+};
+
+export const SystemMonitoring: Story = {
+  name: 'System Monitoring',
+  args: {
+    background: '#dc2626',
+    gap: '0.8rem',
+  },
+  render: (args) => (
+    <ListContentContainer {...args} style={{ width: 550 }}>
+      <TrendListBox
+        title='System Metrics'
+        items={[
+          { label: 'CPU', value: '68%', delta: 2, icon: <ArrowUp size={16} /> },
+          { label: 'Memory', value: '45%', delta: -5, icon: <ArrowDown size={16} /> },
+          { label: 'Disk', value: '82%', delta: 1, icon: <ArrowUp size={16} /> },
+        ]}
+      />
+      <CounterListBox
+        title='Alerts'
+        data={[
+          ['3', 'Critical'],
+          ['7', 'Warning'],
+          ['12', 'Info'],
+        ]}
+        badgeColor='#ef4444'
+      />
+      <SimpleListBox title='Status' data={['All systems operational', 'Last updated: 2 min ago']} />
+    </ListContentContainer>
+  ),
+};
+
+export const CustomGap: Story = {
+  name: 'Custom Gap Sizes',
+  args: {
+    background: '#f59e0b',
+  },
+  render: (args) => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
+      <div>
+        <h4 style={{ marginBottom: '0.5rem' }}>Small Gap (0.5rem)</h4>
+        <ListContentContainer {...args} gap='0.5rem' style={{ width: 500 }}>
+          <SimpleListBox title='Compact' data={['Item 1', 'Item 2']} />
+          <CounterListBox title='Counters' data={[['1', 'First']]} badgeColor='#3b82f6' />
+        </ListContentContainer>
+      </div>
+
+      <div>
+        <h4 style={{ marginBottom: '0.5rem' }}>Large Gap (2rem)</h4>
+        <ListContentContainer {...args} gap='2rem' style={{ width: 500 }}>
+          <SimpleListBox title='Spacious' data={['Item 1', 'Item 2']} />
+          <CounterListBox title='Counters' data={[['1', 'First']]} badgeColor='#3b82f6' />
+        </ListContentContainer>
+      </div>
+    </div>
+  ),
+};

package/src/components/AnnouncementPanel/ListContentContainer.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import './ListContentContainer.css';
+
+export type ListContentContainerProps = {
+  className?: string;
+  style?: React.CSSProperties;
+  children?: React.ReactNode; // normally SimpleListBox/CounterListBox/TrendListBox
+  gap?: string;
+  background?: string;
+};
+
+export const ListContentContainer: React.FC<ListContentContainerProps> = ({
+  className = '',
+  style = {},
+  children,
+  gap = '1rem',
+  background = '#D9EEF5',
+}) => {
+  return (
+    <div
+      className={`lcc-root ${className}`}
+      style={{
+        background,
+        ...style,
+        ['--lcc-gap' as any]: gap,
+      }}
+    >
+      {React.Children.map(children, (child) => (
+        <div className='lcc-cell'>{child}</div>
+      ))}
+    </div>
+  );
+};

package/src/components/AnnouncementPanel/index.ts

@@ -0,0 +1,3 @@
+export * from './ListBox';
+export * from './FlexRowContainer';
+export * from './ListContentContainer';