@tsiky/components-r19 1.0.0

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

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

package/src/components/AnnouncementPanel/FlexRowContainer.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import './FlexRowContainer.css';
+
+export type FlexRowContainerProps = {
+  className?: string;
+  style?: React.CSSProperties;
+  children?: React.ReactNode; // normally ListContentContainer nodes
+  gap?: string;
+};
+
+export const FlexRowContainer: React.FC<FlexRowContainerProps> = ({
+  className = '',
+  style = {},
+  children,
+  gap = '1rem',
+}) => {
+  return (
+    <div className={`frc-root ${className}`} style={{ ...style, ['--frc-gap' as any]: gap }}>
+      {React.Children.map(children, (child) => (
+        <div className='frc-item'>{child}</div>
+      ))}
+    </div>
+  );
+};

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

@@ -0,0 +1,56 @@
+.clb-root {
+  padding: 0.125rem;
+}
+.clb-title {
+  font-weight: var(--font-bold);
+  padding: 0.0625rem 0.125rem;
+  margin-bottom: 0.0625rem;
+}
+
+.clb-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+.clb-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--col-gap, 0.5rem);
+  align-items: center;
+  padding: 0;
+}
+
+.clb-badge-col {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+.counter-badge {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  color: #fff;
+  min-width: 0;
+  white-space: nowrap;
+  line-height: 1;
+  padding: 0.25rem 0.5rem;
+  box-sizing: border-box;
+}
+.clb-text {
+  padding: 0.25rem 0;
+  min-width: 0;
+  overflow: hidden;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+.clb-fullrow {
+  grid-column: 1 / -1;
+  padding: 0.25rem 0.125rem;
+  text-align: center;
+}
+.clb-empty-badge {
+  min-height: 1px;
+}

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

@@ -0,0 +1,292 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { CounterListBox } from './CounterListBox';
+
+const meta: Meta<typeof CounterListBox> = {
+  title: 'Components/ListBox/CounterListBox',
+  component: CounterListBox,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A list component with circular badges for displaying counters and metrics.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    badgeColor: {
+      control: 'color',
+      description: 'Default badge color',
+    },
+    badgePadding: {
+      control: 'text',
+      description: 'Badge padding (e.g., "8px 16px")',
+    },
+    badgeWidth: {
+      control: 'text',
+      description: 'Forced badge width (e.g., "40px", "60px")',
+    },
+    data: {
+      control: 'object',
+      description: 'Array of strings or [badge, text] tuples',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  name: 'Default',
+  args: {
+    title: 'Statistics',
+    data: [
+      ['15', 'New messages'],
+      ['42', 'Active users'],
+      ['128', 'Total visits'],
+      ['7', 'Pending'],
+    ],
+    badgeColor: '#0ea5e9',
+  },
+};
+
+export const MixedTypes: Story = {
+  name: 'Mixed Types',
+  args: {
+    title: 'System Dashboard',
+    data: [
+      ['99+', 'Unread notifications'],
+      'No action required currently',
+      ['7', 'Overdue tasks'],
+      'All systems functioning normally',
+      ['3', 'Unresolved alerts'],
+      'Maintenance scheduled this weekend',
+    ],
+    badgeColor: '#8b5cf6',
+  },
+};
+
+export const ColorfulBadges: Story = {
+  name: 'Colorful Badges',
+  args: {
+    title: 'Performance Evaluation',
+    data: [
+      ['A+', 'Excellent'],
+      ['B', 'Good'],
+      ['C', 'Average'],
+      ['D', 'Needs improvement'],
+      ['F', 'Critical'],
+    ],
+    badgeColor: '#6b7280',
+    badgeColors: {
+      0: '#10b981',
+      1: '#22c55e',
+      2: '#f59e0b',
+      3: '#f97316',
+      4: '#ef4444',
+    },
+  },
+};
+
+export const TicketPriorities: Story = {
+  name: 'Ticket Priorities',
+  args: {
+    title: 'Tickets by Priority',
+    data: [
+      ['5', 'Critical - Immediate intervention required'],
+      ['12', 'High - Resolution within 24h'],
+      ['28', 'Medium - Resolution within 48h'],
+      ['45', 'Low - Resolution within 7 days'],
+    ],
+    badgeColor: '#ef4444',
+    badgeColors: {
+      0: '#dc2626',
+      1: '#f97316',
+      2: '#eab308',
+      3: '#84cc16',
+    },
+    lineClasses: {
+      0: 'ticket-critical',
+      1: 'ticket-high',
+      2: 'ticket-medium',
+    },
+  },
+  decorators: [
+    (Story) => (
+      <>
+        <style>
+          {`
+            .ticket-critical { background-color: #fef2f2; }
+            .ticket-high { background-color: #fffbeb; }
+            .ticket-medium { background-color: #f0f9ff; }
+          `}
+        </style>
+        <Story />
+      </>
+    ),
+  ],
+};
+
+export const ProgressIndicators: Story = {
+  name: 'Progress Indicators',
+  args: {
+    title: 'Project Progress',
+    data: [
+      ['75%', 'Website - Frontend development'],
+      ['90%', 'Mobile app - User testing'],
+      ['50%', 'API backend - Service integration'],
+      ['25%', 'Documentation - Writing in progress'],
+    ],
+    badgeColor: '#3b82f6',
+    badgePadding: '0.5rem 0.75rem',
+  },
+};
+
+export const RatingSystem: Story = {
+  name: 'Rating System',
+  args: {
+    title: 'Customer Reviews',
+    data: [
+      ['4.8', '⭐ Excellent - Exceptional service'],
+      ['4.2', '⭐ Very good - Very satisfied'],
+      ['3.5', '⭐ Average - Could be better'],
+      ['2.1', '⭐ Poor - Disappointed'],
+    ],
+    badgeColor: '#f59e0b',
+  },
+};
+
+export const SmallCounters: Story = {
+  name: 'Small Counters',
+  args: {
+    title: 'System Logs',
+    data: [
+      ['1', 'Critical error'],
+      ['5', 'Warnings'],
+      ['42', 'Information'],
+      ['128', 'Debug messages'],
+    ],
+    badgeColor: '#6366f1',
+    badgePadding: '0.25rem 0.5rem',
+  },
+};
+
+export const StatusIndicators: Story = {
+  name: 'Status Indicators',
+  args: {
+    title: 'Server Status',
+    data: [
+      ['🟢', 'Main server - Online'],
+      ['🟢', 'Database - Online'],
+      ['🟡', 'Cache - Degraded'],
+      ['🔴', 'Backup - Offline'],
+      ['🟢', 'CDN - Online'],
+    ],
+    badgeColor: '#6b7280',
+    badgePadding: '0.375rem 0.5rem',
+  },
+};
+
+export const LargeNumbers: Story = {
+  name: 'Large Numbers',
+  args: {
+    title: 'Global Statistics',
+    data: [
+      ['1.2K', 'Active users'],
+      ['45.8K', 'Total views'],
+      ['2.4M', 'Impressions'],
+      ['156.7K', 'Interactions'],
+    ],
+    badgeColor: '#8b5cf6',
+    badgePadding: '0.5rem 0.75rem',
+  },
+};
+
+export const FixedWidthBadges: Story = {
+  name: 'Fixed Width Badges',
+  args: {
+    title: 'Controlled Width Badges',
+    data: [
+      ['1', 'Single digit'],
+      ['42', 'Two digits'],
+      ['999', 'Three digits'],
+      ['1K', 'Short text'],
+      ['10K+', 'Longer text'],
+    ],
+    badgeColor: '#8b5cf6',
+    badgeWidth: '48px',
+    badgePadding: '0.5rem 0.25rem',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Using the `badgeWidth` prop to force a fixed width on all badges, creating perfect alignment.',
+      },
+    },
+  },
+};
+
+export const CompactFixedBadges: Story = {
+  name: 'Compact Fixed Badges',
+  args: {
+    title: 'System Metrics',
+    data: [
+      ['CPU', '45%'],
+      ['RAM', '68%'],
+      ['SSD', '82%'],
+      ['NET', '24%'],
+    ],
+    badgeColor: '#06b6d4',
+    badgeWidth: '40px',
+    badgePadding: '0.375rem',
+  },
+};
+
+export const UniformBadges: Story = {
+  name: 'Uniform Badges',
+  args: {
+    title: 'Uniform Statistics',
+    data: [
+      ['A+', 'Excellent'],
+      ['B', 'Good'],
+      ['C', 'Average'],
+      ['D', 'Poor'],
+    ],
+    badgeColor: '#f59e0b',
+    badgeWidth: '44px',
+    badgePadding: '0.375rem 0.25rem',
+    badgeColors: {
+      0: '#10b981',
+      1: '#22c55e',
+      2: '#f59e0b',
+      3: '#ef4444',
+    },
+  },
+};
+
+export const AdaptiveVsFixed: Story = {
+  name: 'Adaptive vs Fixed Comparison',
+  args: {
+    title: 'Adaptive (without badgeWidth)',
+    data: [
+      ['1', 'Small'],
+      ['42', 'Medium'],
+      ['999', 'Large'],
+      ['1K+', 'Very large'],
+    ],
+    badgeColor: '#0ea5e9',
+  },
+  render: (args) => (
+    <div style={{ display: 'flex', gap: '2rem', alignItems: 'flex-start' }}>
+      <div>
+        <h4 style={{ marginBottom: '0.5rem' }}>Adaptive (without badgeWidth)</h4>
+        <CounterListBox {...args} />
+      </div>
+      <div>
+        <h4 style={{ marginBottom: '0.5rem' }}>Fixed (with badgeWidth="48px")</h4>
+        <CounterListBox {...args} badgeWidth='48px' />
+      </div>
+    </div>
+  ),
+};