@tsiky/components-r19 1.1.0 → 1.2.0

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

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

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

package/src/components/AnnouncementPanel/ListContentContainer.css

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

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