@tsiky/components-r19 1.1.0 → 1.2.0

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

@@ -1,329 +1,329 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { ArrowUp, ArrowDown, TrendingUp, Users } from 'lucide-react';
-import { FlexRowContainer } from './FlexRowContainer';
-import { ListContentContainer } from './ListContentContainer';
-import { CounterListBox } from './ListBox/CounterListBox';
-import { SimpleListBox } from './ListBox/SimpleListBox';
-import { TrendListBox } from './ListBox/TrendListBox';
-
-const meta: Meta<typeof FlexRowContainer> = {
-  title: 'Components/FlexRowContainer',
-  component: FlexRowContainer,
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: {
-        component:
-          'An adaptive flex container that allows children to take their natural size and wrap to new lines when needed.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    gap: {
-      control: 'text',
-      description: 'Space between items',
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const AdaptiveDashboard: Story = {
-  name: 'Adaptive Dashboard',
-  args: {
-    gap: '1.5rem',
-    style: {
-      padding: '2rem',
-      background: '#f8fafc',
-    },
-  },
-  render: (args) => (
-    <FlexRowContainer {...args}>
-      {/* Small counter box */}
-      <ListContentContainer background='#0ea5e9'>
-        <CounterListBox title='Patients' data={[['63', 'Total']]} badgeColor='#0ea5e9' />
-      </ListContentContainer>
-
-      {/* Medium box with multiple lists */}
-      <ListContentContainer background='#0ea5e9'>
-        <SimpleListBox
-          title='Available beds'
-          data={[
-            ['MED', '21 beds'],
-            ['SURG', '2 beds'],
-            ['ER', '12 beds'],
-          ]}
-        />
-        <SimpleListBox title='Overdue patients' data={['623152385 - MED', '623168542 - SURG']} />
-        <SimpleListBox title='Overdue patients' data={['623152385 - MED', '623168542 - SURG']} />
-        <SimpleListBox title='Overdue patients' data={['623152385 - MED', '623168542 - SURG']} />
-      </ListContentContainer>
-
-      {/* Large trend box */}
-      <ListContentContainer background='#0ea5e9'>
-        <TrendListBox
-          title='3h Trend'
-          items={[
-            { label: 'MED', value: '+3', delta: 3, icon: <ArrowUp size={16} /> },
-            { label: 'SURG', value: '-2', delta: -2, icon: <ArrowDown size={16} /> },
-            { label: 'ER', value: '+5', delta: 5, icon: <ArrowUp size={16} /> },
-            { label: 'PED', value: '+1', delta: 1, icon: <ArrowUp size={16} /> },
-          ]}
-        />
-      </ListContentContainer>
-
-      {/* Very wide box */}
-      <ListContentContainer background='#0ea5e9'>
-        <SimpleListBox
-          title='General information'
-          data={[
-            'All services are operating normally',
-            'Planned maintenance tonight at 10pm',
-            'Daily report available',
-          ]}
-        />
-      </ListContentContainer>
-    </FlexRowContainer>
-  ),
-};
-
-export const MixedSizes: Story = {
-  name: 'Mixed Content Sizes',
-  args: {
-    gap: '1rem',
-    style: {
-      padding: '1.5rem',
-      background: '#f1f5f9',
-    },
-  },
-  render: (args) => (
-    <FlexRowContainer {...args}>
-      {/* Tiny box */}
-      <ListContentContainer background='#10b981'>
-        <CounterListBox title='Alerts' data={[['3', 'Critical']]} badgeColor='#ef4444' />
-      </ListContentContainer>
-
-      {/* Small box */}
-      <ListContentContainer background='#10b981'>
-        <TrendListBox
-          title='Stats'
-          items={[{ label: 'Up', value: '+5', icon: <ArrowUp size={14} /> }]}
-        />
-      </ListContentContainer>
-
-      {/* Medium box */}
-      <ListContentContainer background='#10b981'>
-        <SimpleListBox
-          title='Status'
-          data={[
-            ['System', 'Operational'],
-            ['Database', 'Connected'],
-          ]}
-        />
-      </ListContentContainer>
-
-      {/* Large box */}
-      <ListContentContainer background='#10b981'>
-        <CounterListBox
-          title='Details'
-          data={[
-            ['156', 'Orders processed'],
-            ['42', 'New customers'],
-            ['24', 'Pending'],
-            ['8', 'Overdue'],
-          ]}
-          badgeColor='#8b5cf6'
-        />
-      </ListContentContainer>
-
-      {/* Extra large box */}
-      <ListContentContainer background='#10b981'>
-        <TrendListBox
-          title='Detailed Performance'
-          items={[
-            { label: 'Response time', value: '125ms', delta: -12, icon: <ArrowDown size={16} /> },
-            { label: 'CPU usage', value: '45%', delta: 2, icon: <ArrowUp size={16} /> },
-            { label: 'Memory', value: '68%', delta: 5, icon: <ArrowUp size={16} /> },
-            { label: 'Storage', value: '82%', delta: 8, icon: <ArrowUp size={16} /> },
-          ]}
-        />
-      </ListContentContainer>
-    </FlexRowContainer>
-  ),
-};
-
-export const BusinessAdaptive: Story = {
-  name: 'Business Adaptive Layout',
-  args: {
-    gap: '1.5rem',
-    style: {
-      padding: '2rem',
-      background: '#f8fafc',
-      minHeight: '100vh',
-    },
-  },
-  render: (args) => (
-    <FlexRowContainer {...args}>
-      {/* Sales metrics */}
-      <ListContentContainer background='#0ea5e9'>
-        <CounterListBox
-          title='Sales'
-          data={[
-            ['156', 'Orders'],
-            ['€2.4K', 'Revenue'],
-            ['42', 'Customers'],
-          ]}
-          badgeColor='#0ea5e9'
-        />
-      </ListContentContainer>
-
-      {/* Performance trends */}
-      <ListContentContainer background='#0ea5e9'>
-        <TrendListBox
-          title='Performance'
-          items={[
-            { label: 'Revenue', value: '+12%', delta: 12, icon: <TrendingUp size={16} /> },
-            { label: 'Users', value: '+8%', delta: 8, icon: <Users size={16} /> },
-            { label: 'Engagement', value: '-2%', delta: -2, icon: <ArrowDown size={16} /> },
-          ]}
-        />
-      </ListContentContainer>
-
-      {/* Quick stats */}
-      <ListContentContainer background='#0ea5e9'>
-        <SimpleListBox
-          title='Quick metrics'
-          data={[
-            ['Conversion rate', '3.2%'],
-            ['Average order value', '€68.50'],
-            ['Customer satisfaction', '4.8/5'],
-          ]}
-        />
-      </ListContentContainer>
-
-      {/* System status */}
-      <ListContentContainer background='#0ea5e9'>
-        <SimpleListBox
-          title='System status'
-          data={['All services operational', 'Backup successful', 'Update available']}
-        />
-      </ListContentContainer>
-
-      {/* Detailed analytics */}
-      <ListContentContainer background='#0ea5e9'>
-        <TrendListBox
-          title='Detailed analytics'
-          items={[
-            { label: 'New signups', value: '24', delta: 4, icon: <ArrowUp size={16} /> },
-            { label: 'Retention', value: '88%', delta: 2, icon: <ArrowUp size={16} /> },
-            { label: 'Bounce rate', value: '32%', delta: -3, icon: <ArrowDown size={16} /> },
-            { label: 'Avg. session time', value: '4:12', delta: 0.5, icon: <ArrowUp size={16} /> },
-          ]}
-        />
-      </ListContentContainer>
-    </FlexRowContainer>
-  ),
-};
-
-export const CompactAdaptive: Story = {
-  name: 'Compact Adaptive',
-  args: {
-    gap: '0.8rem',
-    style: {
-      padding: '1rem',
-      background: '#f1f5f9',
-    },
-  },
-  render: (args) => (
-    <FlexRowContainer {...args}>
-      <ListContentContainer background='#0ea5e9'>
-        <CounterListBox title='Active' data={[['42', 'Users']]} badgeColor='#0ea5e9' />
-      </ListContentContainer>
-
-      <ListContentContainer background='#0ea5e9'>
-        <SimpleListBox title='Status' data={['System normal']} />
-      </ListContentContainer>
-
-      <ListContentContainer background='#0ea5e9'>
-        <TrendListBox
-          title='Trends'
-          items={[
-            { label: 'Up', value: '+3', icon: <ArrowUp size={14} /> },
-            { label: 'Down', value: '-1', icon: <ArrowDown size={14} /> },
-          ]}
-        />
-      </ListContentContainer>
-
-      <ListContentContainer background='#0ea5e9'>
-        <CounterListBox title='Alerts' data={[['2', 'Minor']]} badgeColor='#f59e0b' />
-      </ListContentContainer>
-    </FlexRowContainer>
-  ),
-};
-
-export const ResponsiveBehavior: Story = {
-  name: 'Responsive Behavior Demo',
-  args: {
-    gap: '1rem',
-    style: {
-      padding: '1.5rem',
-      background: '#f8fafc',
-      border: '2px dashed #cbd5e1',
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'This demo shows how items naturally wrap to new lines based on their content size and available space. Resize the browser window to see the adaptive behavior.',
-      },
-    },
-  },
-  render: (args) => (
-    <div>
-      <div
-        style={{
-          textAlign: 'center',
-          marginBottom: '1rem',
-          color: '#64748b',
-          fontStyle: 'italic',
-        }}
-      >
-        ↓ Resize the window to see adaptive behavior ↓
-      </div>
-      <FlexRowContainer {...args}>
-        <ListContentContainer background='#0ea5e9'>
-          <SimpleListBox title='Small' data={['Short content']} />
-        </ListContentContainer>
-
-        <ListContentContainer background='#0ea5e9'>
-          <SimpleListBox title='Medium' data={['Medium-length content', 'Another line here']} />
-        </ListContentContainer>
-
-        <ListContentContainer background='#0ea5e9'>
-          <SimpleListBox
-            title='Large'
-            data={[
-              'Very long content that takes more space',
-              'Another line with extra text',
-              'Yet another line to show behavior',
-            ]}
-          />
-        </ListContentContainer>
-
-        <ListContentContainer background='#0ea5e9'>
-          <SimpleListBox
-            title='Extra Large'
-            data={[
-              'Extremely long content that will take up a lot of width in the layout',
-              'A second line also with lots of text for demonstration',
-              'Third line to complete the showcase',
-            ]}
-          />
-        </ListContentContainer>
-      </FlexRowContainer>
-    </div>
-  ),
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { ArrowUp, ArrowDown, TrendingUp, Users } from 'lucide-react';
+import { FlexRowContainer } from './FlexRowContainer';
+import { ListContentContainer } from './ListContentContainer';
+import { CounterListBox } from './ListBox/CounterListBox';
+import { SimpleListBox } from './ListBox/SimpleListBox';
+import { TrendListBox } from './ListBox/TrendListBox';
+
+const meta: Meta<typeof FlexRowContainer> = {
+  title: 'Components/FlexRowContainer',
+  component: FlexRowContainer,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'An adaptive flex container that allows children to take their natural size and wrap to new lines when needed.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    gap: {
+      control: 'text',
+      description: 'Space between items',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const AdaptiveDashboard: Story = {
+  name: 'Adaptive Dashboard',
+  args: {
+    gap: '1.5rem',
+    style: {
+      padding: '2rem',
+      background: '#f8fafc',
+    },
+  },
+  render: (args) => (
+    <FlexRowContainer {...args}>
+      {/* Small counter box */}
+      <ListContentContainer background='#0ea5e9'>
+        <CounterListBox title='Patients' data={[['63', 'Total']]} badgeColor='#0ea5e9' />
+      </ListContentContainer>
+
+      {/* Medium box with multiple lists */}
+      <ListContentContainer background='#0ea5e9'>
+        <SimpleListBox
+          title='Available beds'
+          data={[
+            ['MED', '21 beds'],
+            ['SURG', '2 beds'],
+            ['ER', '12 beds'],
+          ]}
+        />
+        <SimpleListBox title='Overdue patients' data={['623152385 - MED', '623168542 - SURG']} />
+        <SimpleListBox title='Overdue patients' data={['623152385 - MED', '623168542 - SURG']} />
+        <SimpleListBox title='Overdue patients' data={['623152385 - MED', '623168542 - SURG']} />
+      </ListContentContainer>
+
+      {/* Large trend box */}
+      <ListContentContainer background='#0ea5e9'>
+        <TrendListBox
+          title='3h Trend'
+          items={[
+            { label: 'MED', value: '+3', delta: 3, icon: <ArrowUp size={16} /> },
+            { label: 'SURG', value: '-2', delta: -2, icon: <ArrowDown size={16} /> },
+            { label: 'ER', value: '+5', delta: 5, icon: <ArrowUp size={16} /> },
+            { label: 'PED', value: '+1', delta: 1, icon: <ArrowUp size={16} /> },
+          ]}
+        />
+      </ListContentContainer>
+
+      {/* Very wide box */}
+      <ListContentContainer background='#0ea5e9'>
+        <SimpleListBox
+          title='General information'
+          data={[
+            'All services are operating normally',
+            'Planned maintenance tonight at 10pm',
+            'Daily report available',
+          ]}
+        />
+      </ListContentContainer>
+    </FlexRowContainer>
+  ),
+};
+
+export const MixedSizes: Story = {
+  name: 'Mixed Content Sizes',
+  args: {
+    gap: '1rem',
+    style: {
+      padding: '1.5rem',
+      background: '#f1f5f9',
+    },
+  },
+  render: (args) => (
+    <FlexRowContainer {...args}>
+      {/* Tiny box */}
+      <ListContentContainer background='#10b981'>
+        <CounterListBox title='Alerts' data={[['3', 'Critical']]} badgeColor='#ef4444' />
+      </ListContentContainer>
+
+      {/* Small box */}
+      <ListContentContainer background='#10b981'>
+        <TrendListBox
+          title='Stats'
+          items={[{ label: 'Up', value: '+5', icon: <ArrowUp size={14} /> }]}
+        />
+      </ListContentContainer>
+
+      {/* Medium box */}
+      <ListContentContainer background='#10b981'>
+        <SimpleListBox
+          title='Status'
+          data={[
+            ['System', 'Operational'],
+            ['Database', 'Connected'],
+          ]}
+        />
+      </ListContentContainer>
+
+      {/* Large box */}
+      <ListContentContainer background='#10b981'>
+        <CounterListBox
+          title='Details'
+          data={[
+            ['156', 'Orders processed'],
+            ['42', 'New customers'],
+            ['24', 'Pending'],
+            ['8', 'Overdue'],
+          ]}
+          badgeColor='#8b5cf6'
+        />
+      </ListContentContainer>
+
+      {/* Extra large box */}
+      <ListContentContainer background='#10b981'>
+        <TrendListBox
+          title='Detailed Performance'
+          items={[
+            { label: 'Response time', value: '125ms', delta: -12, icon: <ArrowDown size={16} /> },
+            { label: 'CPU usage', value: '45%', delta: 2, icon: <ArrowUp size={16} /> },
+            { label: 'Memory', value: '68%', delta: 5, icon: <ArrowUp size={16} /> },
+            { label: 'Storage', value: '82%', delta: 8, icon: <ArrowUp size={16} /> },
+          ]}
+        />
+      </ListContentContainer>
+    </FlexRowContainer>
+  ),
+};
+
+export const BusinessAdaptive: Story = {
+  name: 'Business Adaptive Layout',
+  args: {
+    gap: '1.5rem',
+    style: {
+      padding: '2rem',
+      background: '#f8fafc',
+      minHeight: '100vh',
+    },
+  },
+  render: (args) => (
+    <FlexRowContainer {...args}>
+      {/* Sales metrics */}
+      <ListContentContainer background='#0ea5e9'>
+        <CounterListBox
+          title='Sales'
+          data={[
+            ['156', 'Orders'],
+            ['€2.4K', 'Revenue'],
+            ['42', 'Customers'],
+          ]}
+          badgeColor='#0ea5e9'
+        />
+      </ListContentContainer>
+
+      {/* Performance trends */}
+      <ListContentContainer background='#0ea5e9'>
+        <TrendListBox
+          title='Performance'
+          items={[
+            { label: 'Revenue', value: '+12%', delta: 12, icon: <TrendingUp size={16} /> },
+            { label: 'Users', value: '+8%', delta: 8, icon: <Users size={16} /> },
+            { label: 'Engagement', value: '-2%', delta: -2, icon: <ArrowDown size={16} /> },
+          ]}
+        />
+      </ListContentContainer>
+
+      {/* Quick stats */}
+      <ListContentContainer background='#0ea5e9'>
+        <SimpleListBox
+          title='Quick metrics'
+          data={[
+            ['Conversion rate', '3.2%'],
+            ['Average order value', '€68.50'],
+            ['Customer satisfaction', '4.8/5'],
+          ]}
+        />
+      </ListContentContainer>
+
+      {/* System status */}
+      <ListContentContainer background='#0ea5e9'>
+        <SimpleListBox
+          title='System status'
+          data={['All services operational', 'Backup successful', 'Update available']}
+        />
+      </ListContentContainer>
+
+      {/* Detailed analytics */}
+      <ListContentContainer background='#0ea5e9'>
+        <TrendListBox
+          title='Detailed analytics'
+          items={[
+            { label: 'New signups', value: '24', delta: 4, icon: <ArrowUp size={16} /> },
+            { label: 'Retention', value: '88%', delta: 2, icon: <ArrowUp size={16} /> },
+            { label: 'Bounce rate', value: '32%', delta: -3, icon: <ArrowDown size={16} /> },
+            { label: 'Avg. session time', value: '4:12', delta: 0.5, icon: <ArrowUp size={16} /> },
+          ]}
+        />
+      </ListContentContainer>
+    </FlexRowContainer>
+  ),
+};
+
+export const CompactAdaptive: Story = {
+  name: 'Compact Adaptive',
+  args: {
+    gap: '0.8rem',
+    style: {
+      padding: '1rem',
+      background: '#f1f5f9',
+    },
+  },
+  render: (args) => (
+    <FlexRowContainer {...args}>
+      <ListContentContainer background='#0ea5e9'>
+        <CounterListBox title='Active' data={[['42', 'Users']]} badgeColor='#0ea5e9' />
+      </ListContentContainer>
+
+      <ListContentContainer background='#0ea5e9'>
+        <SimpleListBox title='Status' data={['System normal']} />
+      </ListContentContainer>
+
+      <ListContentContainer background='#0ea5e9'>
+        <TrendListBox
+          title='Trends'
+          items={[
+            { label: 'Up', value: '+3', icon: <ArrowUp size={14} /> },
+            { label: 'Down', value: '-1', icon: <ArrowDown size={14} /> },
+          ]}
+        />
+      </ListContentContainer>
+
+      <ListContentContainer background='#0ea5e9'>
+        <CounterListBox title='Alerts' data={[['2', 'Minor']]} badgeColor='#f59e0b' />
+      </ListContentContainer>
+    </FlexRowContainer>
+  ),
+};
+
+export const ResponsiveBehavior: Story = {
+  name: 'Responsive Behavior Demo',
+  args: {
+    gap: '1rem',
+    style: {
+      padding: '1.5rem',
+      background: '#f8fafc',
+      border: '2px dashed #cbd5e1',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'This demo shows how items naturally wrap to new lines based on their content size and available space. Resize the browser window to see the adaptive behavior.',
+      },
+    },
+  },
+  render: (args) => (
+    <div>
+      <div
+        style={{
+          textAlign: 'center',
+          marginBottom: '1rem',
+          color: '#64748b',
+          fontStyle: 'italic',
+        }}
+      >
+        ↓ Resize the window to see adaptive behavior ↓
+      </div>
+      <FlexRowContainer {...args}>
+        <ListContentContainer background='#0ea5e9'>
+          <SimpleListBox title='Small' data={['Short content']} />
+        </ListContentContainer>
+
+        <ListContentContainer background='#0ea5e9'>
+          <SimpleListBox title='Medium' data={['Medium-length content', 'Another line here']} />
+        </ListContentContainer>
+
+        <ListContentContainer background='#0ea5e9'>
+          <SimpleListBox
+            title='Large'
+            data={[
+              'Very long content that takes more space',
+              'Another line with extra text',
+              'Yet another line to show behavior',
+            ]}
+          />
+        </ListContentContainer>
+
+        <ListContentContainer background='#0ea5e9'>
+          <SimpleListBox
+            title='Extra Large'
+            data={[
+              'Extremely long content that will take up a lot of width in the layout',
+              'A second line also with lots of text for demonstration',
+              'Third line to complete the showcase',
+            ]}
+          />
+        </ListContentContainer>
+      </FlexRowContainer>
+    </div>
+  ),
+};