@tsiky/components-r19 1.1.0 → 1.3.0

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

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