@tsiky/components-r19 1.3.0 → 1.3.1

package/src/components/MetricsPanel/MetricsPanel.stories.tsx

@@ -1,692 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import React from 'react';
-// eslint-disable-next-line storybook/no-renderer-packages
-import type { Meta, StoryObj } from '@storybook/react';
-import MetricsPanel from './MetricsPanel';
-import type { MetricsItem } from './tools/MetricsPanelTypes';
-import { hexToRgba as utilHexToRgba } from './tools/colorUtils';
-import {
-  Users,
-  CheckCircle,
-  Bed,
-  XCircle,
-  Lock,
-  Clock,
-  AlertCircle,
-  Home,
-  Plane,
-  Calendar,
-} from 'lucide-react';
-
-const meta: Meta<typeof MetricsPanel> = {
-  title: 'Components/MetricsPanel',
-  component: MetricsPanel,
-  parameters: { layout: 'padded' },
-  tags: ['autodocs'],
-};
-export default meta;
-type Story = StoryObj<typeof MetricsPanel>;
-
-const hexToRgba = (color: string, alpha = 1) => {
-  try {
-    return utilHexToRgba(color, alpha);
-  } catch {
-    return `rgba(124, 58, 237, ${alpha})`;
-  }
-};
-
-/* ---- demo items (shared) ---- */
-const demoItems: MetricsItem[] = [
-  {
-    id: 1,
-    label: 'DMS',
-    subLabel: '2023-08-02',
-    value: '3.8h',
-    badge: { text: 'Prédiction', color: 'transparent', textColor: '#6b7280', small: true },
-  } as any,
-  {
-    id: 2,
-    label: 'Admissions',
-    subLabel: '03.08',
-    value: '205',
-    badge: { text: '205', subText: '100%', color: '#10b981', small: true },
-  } as any,
-  {
-    id: 3,
-    label: 'Tension',
-    subLabel: '03.08',
-    value: '68',
-    badge: { text: '30', subText: '78%', color: '#fb923c', small: true },
-  } as any,
-  {
-    id: 4,
-    label: 'Hospitalisations',
-    subLabel: '03.08',
-    value: '48',
-    badge: { text: '33', subText: '66%', color: '#fb7185', small: true },
-  } as any,
-  {
-    id: 5,
-    label: 'Imagerie',
-    subLabel: '03.08',
-    value: '109',
-    badge: { text: '104', subText: '95%', color: '#10b981', small: true },
-  } as any,
-  {
-    id: 6,
-    label: 'Sorties',
-    subLabel: '03.08',
-    value: '219',
-    badge: { text: '211', subText: '97%', color: '#10b981', small: true },
-  } as any,
-  {
-    id: 7,
-    label: '> 75 ans',
-    subLabel: '03.08',
-    value: '38',
-    badge: { text: '30', subText: '78%', color: '#fb923c', small: true },
-  } as any,
-  {
-    id: 8,
-    label: 'Charge des médecins',
-    subLabel: '03.08',
-    value: '12',
-    badge: { text: '10', subText: '85%', color: '#10b981', small: true },
-  } as any,
-];
-
-/* ---------------- Stories ---------------- */
-
-/* Default (compact preset) */
-export const Default: Story = {
-  render: (args) => (
-    <MetricsPanel
-      {...(args as any)}
-      items={demoItems}
-      title='Mesures'
-      color='#7c3aed'
-      layout='vertical'
-      compact
-      preset='compact'
-      onItemClick={(it) => console.log('clicked', it)}
-    />
-  ),
-  parameters: {
-    docs: {
-      source: {
-        code: `import React from 'react';
-import MetricsPanel from './MetricsPanel';
-
-const items = ${JSON.stringify(demoItems, null, 2)};
-
-<MetricsPanel
-  title="Mesures"
-  items={items}
-  color="#7c3aed"
-  layout="vertical"
-  compact
-  preset="compact"
-/>`,
-      },
-    },
-  },
-};
-
-/* Compact sized: montre comment forcer largeur/hauteur des items compact */
-export const CompactSized: Story = {
-  render: (args) => (
-    <MetricsPanel
-      {...(args as any)}
-      items={demoItems}
-      title='Compact — taille fixe des items'
-      color='#7c3aed'
-      layout='vertical'
-      compact
-      preset='compact'
-      compactItemWidth={280}
-      compactItemHeight={96}
-      compactItemStyle={{ borderRadius: 12, padding: 10 }}
-      onItemClick={(it) => console.log('clicked', it)}
-    />
-  ),
-  parameters: {
-    docs: {
-      source: {
-        code: `import React from 'react';
-import MetricsPanel from './MetricsPanel';
-
-const items = ${JSON.stringify(demoItems, null, 2)};
-
-<MetricsPanel
-  title="Compact — taille fixe des items"
-  items={items}
-  layout="vertical"
-  compact
-  preset="compact"
-  compactItemWidth={280}
-  compactItemHeight={96}
-  compactItemStyle={{ borderRadius: 12, padding: 10 }}
-/>`,
-      },
-    },
-  },
-};
-
-/* Summary style (démo couleurs) */
-export const SummaryStyle: Story = {
-  args: {
-    summaryBgColors: [
-      'rgba(239,68,68,0.08)',
-      'rgba(249,115,22,0.08)',
-      'rgba(234,179,8,0.08)',
-      'rgba(34,197,94,0.08)',
-    ],
-    summaryBorderColors: [
-      'rgba(239,68,68,0.12)',
-      'rgba(249,115,22,0.12)',
-      'rgba(234,179,8,0.12)',
-      'rgba(34,197,94,0.12)',
-    ],
-    summaryValueColors: ['#dc2626', '#ea580c', '#a16207', '#15803d'],
-  },
-  render: (args) => (
-    <MetricsPanel
-      {...(args as any)}
-      items={[
-        { id: 's1', label: 'Précision moyenne', value: '92%' } as any,
-        { id: 's2', label: 'Métriques suivies', value: '8' } as any,
-        { id: 's3', label: 'Alertes actives', value: '3' } as any,
-        { id: 's4', label: 'Période analysée', value: '24h' } as any,
-      ]}
-      title='Résumé de performance'
-      summary
-      preset='summary'
-      onItemClick={(it) => console.log('summary clicked', it)}
-    />
-  ),
-  parameters: {
-    docs: {
-      source: {
-        code: `import React from 'react';
-import MetricsPanel from './MetricsPanel';
-
-const items = [
-  { id: 's1', label: 'Précision moyenne', value: '92%' },
-  { id: 's2', label: 'Métriques suivies', value: '8' },
-  { id: 's3', label: 'Alertes actives', value: '3' },
-  { id: 's4', label: 'Période analysée', value: '24h' },
-];
-
-const summaryBgColors = [
-  'rgba(239,68,68,0.08)',
-  'rgba(249,115,22,0.08)',
-  'rgba(234,179,8,0.08)',
-  'rgba(34,197,94,0.08)',
-];
-
-const summaryBorderColors = [
-  'rgba(239,68,68,0.12)',
-  'rgba(249,115,22,0.12)',
-  'rgba(234,179,8,0.12)',
-  'rgba(34,197,94,0.12)',
-];
-
-const summaryValueColors = ['#dc2626', '#ea580c', '#a16207', '#15803d'];
-
-<MetricsPanel
-  title="Résumé de performance"
-  summary
-  preset="summary"
-  items={items}
-  summaryBgColors={summaryBgColors}
-  summaryBorderColors={summaryBorderColors}
-  summaryValueColors={summaryValueColors}
-/>`,
-      },
-    },
-  },
-};
-
-/* Summary sized: fixe largeur/hauteur des cartes summary */
-export const SummarySized: Story = {
-  render: (args) => (
-    <MetricsPanel
-      {...(args as any)}
-      items={[
-        { id: 's1', label: 'Précision moyenne', value: '92%', valueColor: '#059669' } as any,
-        { id: 's2', label: 'Métriques suivies', value: '8', valueColor: '#2563eb' } as any,
-        { id: 's3', label: 'Alertes actives', value: '3', valueColor: '#b45309' } as any,
-        { id: 's4', label: 'Période analysée', value: '24h', valueColor: '#7c3aed' } as any,
-      ]}
-      title='Summary — taille fixe des cartes'
-      summary
-      orientation='horizontal'
-      preset='summary'
-      summaryCardWidth='220px'
-      summaryCardHeight={100}
-      summaryCardStyle={{ borderRadius: 12, boxShadow: '0 10px 24px rgba(15,23,42,0.06)' }}
-    />
-  ),
-  parameters: {
-    docs: {
-      source: {
-        code: `import React from 'react';
-import MetricsPanel from './MetricsPanel';
-
-const items = [
-  { id: 's1', label: 'Précision moyenne', value: '92%', valueColor: '#059669' },
-  { id: 's2', label: 'Métriques suivies', value: '8', valueColor: '#2563eb' },
-  { id: 's3', label: 'Alertes actives', value: '3', valueColor: '#b45309' },
-  { id: 's4', label: 'Période analysée', value: '24h', valueColor: '#7c3aed' },
-];
-
-<MetricsPanel
-  title="Summary — taille fixe des cartes"
-  summary
-  orientation="horizontal"
-  preset="summary"
-  items={items}
-  summaryCardWidth="220px"
-  summaryCardHeight={100}
-  summaryCardStyle={{ borderRadius: 12, boxShadow: '0 10px 24px rgba(15,23,42,0.06)' }}
-/>`,
-      },
-    },
-  },
-};
-
-/* AlternateHorizontal */
-export const AlternateHorizontal: Story = {
-  render: (args) => (
-    <MetricsPanel
-      {...(args as any)}
-      items={[
-        {
-          id: 'a1',
-          label: "ER Temps d'attente",
-          subLabel: '04.09',
-          value: '1.2h',
-          badge: { text: 'Trend', subText: '+5%', color: '#fb923c', small: true },
-        } as any,
-        {
-          id: 'a2',
-          label: 'Consultations',
-          subLabel: '04.09',
-          value: '482',
-          badge: { text: '482', subText: '↑', color: '#10b981', small: true },
-        } as any,
-        {
-          id: 'a3',
-          label: 'Imagerie urg.',
-          subLabel: '04.09',
-          value: '76',
-          badge: { text: '76', subText: '↓', color: '#fb7185', small: true },
-        } as any,
-        {
-          id: 'a4',
-          label: 'Opérations',
-          subLabel: '04.09',
-          value: '34',
-          badge: { text: '34', subText: 'OK', color: '#2563eb', small: true },
-        } as any,
-      ]}
-      title='Vue rapide (Horizontal)'
-      color='#0ea5a4'
-      layout='horizontal'
-      orientation='horizontal'
-      compact
-      preset='alternateHorizontal'
-    />
-  ),
-  parameters: {
-    docs: {
-      source: {
-        code: `import React from 'react';
-import MetricsPanel from './MetricsPanel';
-
-const items = [
-  { id: 'a1', label: 'ER Temps d\\'attente', subLabel: '04.09', value: '1.2h', badge: { text: 'Trend', subText: '+5%', color:'#fb923c' } },
-  { id: 'a2', label: 'Consultations', subLabel: '04.09', value: '482', badge: { text: '482', subText: '↑', color:'#10b981' } },
-  { id: 'a3', label: 'Imagerie urg.', subLabel: '04.09', value: '76', badge: { text: '76', subText: '↓', color:'#fb7185' } },
-  { id: 'a4', label: 'Opérations', subLabel: '04.09', value: '34', badge: { text: '34', subText: 'OK', color:'#2563eb' } },
-];
-
-<MetricsPanel
-  title="Vue rapide (Horizontal)"
-  items={items}
-  color="#0ea5a4"
-  layout="horizontal"
-  orientation="horizontal"
-  compact
-  preset="alternateHorizontal"
-/>`,
-      },
-    },
-  },
-};
-
-/* CustomColors */
-export const CustomColors: Story = {
-  render: (args) => (
-    <MetricsPanel
-      {...(args as any)}
-      items={[
-        { id: 'c1', label: 'Urgences', value: '124' } as any,
-        { id: 'c2', label: 'Consultations', value: '58' } as any,
-        { id: 'c3', label: 'Hospitalisations', value: '23' } as any,
-        { id: 'c4', label: 'Opérations', value: '12' } as any,
-      ]}
-      title='Statistiques personnalisées'
-      summary
-      layout='horizontal'
-      orientation='horizontal'
-      summaryBgColors={[
-        'rgba(255,0,0,0.08)',
-        'rgba(0,255,0,0.08)',
-        'rgba(0,0,255,0.08)',
-        'rgba(255,255,0,0.08)',
-      ]}
-      summaryBorderColors={[
-        'rgba(255,0,0,0.12)',
-        'rgba(0,255,0,0.12)',
-        'rgba(0,0,255,0.12)',
-        'rgba(255,255,0,0.12)',
-      ]}
-      summaryValueColors={['#ff0000', '#00ff00', '#0000ff', '#ffff00']}
-      preset='summary'
-    />
-  ),
-  parameters: {
-    docs: {
-      source: {
-        code: `import React from 'react';
-import MetricsPanel from './MetricsPanel';
-
-const items = [
-  { id: 'c1', label: 'Urgences', value: '124' },
-  { id: 'c2', label: 'Consultations', value: '58' },
-  { id: 'c3', label: 'Hospitalisations', value: '23' },
-  { id: 'c4', label: 'Opérations', value: '12' },
-];
-
-const summaryBgColors = [
-  'rgba(255,0,0,0.08)',
-  'rgba(0,255,0,0.08)',
-  'rgba(0,0,255,0.08)',
-  'rgba(255,255,0,0.08)',
-];
-
-const summaryBorderColors = [
-  'rgba(255,0,0,0.12)',
-  'rgba(0,255,0,0.12)',
-  'rgba(0,0,255,0.12)',
-  'rgba(255,255,0,0.12)',
-];
-
-const summaryValueColors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00'];
-
-<MetricsPanel
-  title="Statistiques personnalisées"
-  summary
-  layout="horizontal"
-  orientation="horizontal"
-  preset="summary"
-  items={items}
-  summaryBgColors={summaryBgColors}
-  summaryBorderColors={summaryBorderColors}
-  summaryValueColors={summaryValueColors}
-/>`,
-      },
-    },
-  },
-};
-
-/* ImageExample */
-const imageItems: MetricsItem[] = [
-  {
-    id: 'c-patients',
-    label: 'Patients entrants',
-    value: '694',
-    bgColor: hexToRgba('#7c3aed', 0.03),
-    borderColor: hexToRgba('#7c3aed', 0.08),
-    iconComponent: Users,
-    iconSquareBg: hexToRgba('#7c3aed', 0.12),
-    iconColor: '#7c3aed',
-  } as any,
-  {
-    id: 'c-disponibles',
-    label: 'Disponibles',
-    value: '336',
-    bgColor: hexToRgba('#10b981', 0.03),
-    borderColor: hexToRgba('#10b981', 0.08),
-    iconComponent: CheckCircle,
-    iconSquareBg: hexToRgba('#10b981', 0.12),
-    iconColor: '#10b981',
-  } as any,
-  {
-    id: 'c-occupes',
-    label: 'Occupés',
-    value: '655',
-    bgColor: hexToRgba('#f59e0b', 0.03),
-    borderColor: hexToRgba('#f59e0b', 0.08),
-    iconComponent: Bed,
-    iconSquareBg: hexToRgba('#f59e0b', 0.12),
-    iconColor: '#f59e0b',
-  } as any,
-  {
-    id: 'c-indispo',
-    label: 'Indisponibles',
-    value: '0',
-    bgColor: hexToRgba('#ef4444', 0.03),
-    borderColor: hexToRgba('#ef4444', 0.08),
-    iconComponent: XCircle,
-    iconSquareBg: hexToRgba('#ef4444', 0.12),
-    iconColor: '#ef4444',
-  } as any,
-  {
-    id: 'c-femmes',
-    label: 'Femmes',
-    value: '76',
-    bgColor: hexToRgba('#374151', 0.03),
-    borderColor: hexToRgba('#374151', 0.08),
-    iconComponent: Lock,
-    iconSquareBg: hexToRgba('#374151', 0.12),
-    iconColor: '#374151',
-  } as any,
-  {
-    id: 'c-permis',
-    label: 'Permis Durée Déterminée',
-    value: '43',
-    bgColor: hexToRgba('#7c3aed', 0.03),
-    borderColor: hexToRgba('#7c3aed', 0.08),
-    iconComponent: Clock,
-    iconSquareBg: hexToRgba('#a855f7', 0.12),
-    iconColor: '#7c3aed',
-  } as any,
-];
-
-/* ImageBasedExample (custom itemsContainerStyle) */
-export const ImageBasedExample: Story = {
-  render: () => (
-    <MetricsPanel
-      title='Tableau de bord'
-      summary
-      orientation='horizontal'
-      itemsContainerStyle={{
-        display: 'flex',
-        flexDirection: 'row',
-        flexWrap: 'wrap',
-        gap: '8px',
-        justifyContent: 'flex-start',
-      }}
-      items={[
-        {
-          id: 'un-count',
-          label: 'Un Count',
-          value: '950',
-          bgColor: hexToRgba('#7c3aed', 0.03),
-          borderColor: hexToRgba('#7c3aed', 0.08),
-          valueColor: '#7c3aed',
-          iconComponent: Users,
-          iconSquareBg: hexToRgba('#7c3aed', 0.12),
-          iconColor: '#7c3aed',
-        } as any,
-        {
-          id: 'un-month',
-          label: 'Un Month',
-          value: '40',
-          bgColor: hexToRgba('#10b981', 0.03),
-          borderColor: hexToRgba('#10b981', 0.08),
-          valueColor: '#10b981',
-          iconComponent: Calendar,
-          iconSquareBg: hexToRgba('#10b981', 0.12),
-          iconColor: '#10b981',
-        } as any,
-        {
-          id: 'departure',
-          label: 'Departure',
-          value: '307',
-          bgColor: hexToRgba('#f59e0b', 0.03),
-          borderColor: hexToRgba('#f59e0b', 0.08),
-          valueColor: '#f59e0b',
-          iconComponent: Plane,
-          iconSquareBg: hexToRgba('#f59e0b', 0.12),
-          iconColor: '#f59e0b',
-        } as any,
-        {
-          id: 'oversite',
-          label: 'Oversite',
-          value: '643',
-          bgColor: hexToRgba('#ef4444', 0.03),
-          borderColor: hexToRgba('#ef4444', 0.08),
-          valueColor: '#ef4444',
-          iconComponent: Home,
-          iconSquareBg: hexToRgba('#ef4444', 0.12),
-          iconColor: '#ef4444',
-        } as any,
-        {
-          id: 'tier-accident',
-          label: 'Tier (Accident)',
-          value: '67.68%',
-          bgColor: hexToRgba('#374151', 0.03),
-          borderColor: hexToRgba('#374151', 0.08),
-          valueColor: '#374151',
-          iconComponent: AlertCircle,
-          iconSquareBg: hexToRgba('#374151', 0.12),
-          iconColor: '#374151',
-        } as any,
-      ]}
-      preset='image'
-    />
-  ),
-  parameters: {
-    docs: {
-      source: {
-        code: `import React from 'react';
-import MetricsPanel from './MetricsPanel';
-import { hexToRgba } from './tools/colorUtils';
-
-const items = [
-  { id: 'un-count', label: 'Un Count', value: '950', bgColor: hexToRgba('#7c3aed', 0.03), borderColor: hexToRgba('#7c3aed', 0.08) },
-  { id: 'un-month', label: 'Un Month', value: '40', bgColor: hexToRgba('#10b981', 0.03), borderColor: hexToRgba('#10b981', 0.08) },
-  { id: 'departure', label: 'Departure', value: '307', bgColor: hexToRgba('#f59e0b', 0.03), borderColor: hexToRgba('#f59e0b', 0.08) },
-  { id: 'oversite', label: 'Oversite', value: '643', bgColor: hexToRgba('#ef4444', 0.03), borderColor: hexToRgba('#ef4444', 0.08) },
-  { id: 'tier-accident', label: 'Tier (Accident)', value: '67.68%', bgColor: hexToRgba('#374151', 0.03), borderColor: hexToRgba('#374151', 0.08) },
-];
-
-<MetricsPanel
-  title="Tableau de bord"
-  summary
-  orientation="horizontal"
-  itemsContainerStyle={{
-    display: 'flex',
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    gap: '8px',
-    justifyContent: 'flex-start'
-  }}
-  items={items}
-  preset="image"
-/>`,
-      },
-    },
-  },
-};
-
-/* PertinenceCards */
-export const PertinenceCards: Story = {
-  render: () => (
-    <MetricsPanel
-      summary
-      title=''
-      orientation='horizontal'
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore optional
-      summaryGridColumns={3}
-      items={[
-        {
-          id: 'p1',
-          label: 'Pertinence heure (h) de sortie',
-          value: '4.1',
-          valueColor: '#7c3aed',
-          bgColor: '#ffffff',
-          borderColor: 'rgba(15,23,42,0.08)',
-        } as any,
-        {
-          id: 'p2',
-          label: 'Pertinence séquence (s)',
-          value: '100%',
-          valueColor: '#7c3aed',
-          bgColor: '#ffffff',
-          borderColor: 'rgba(15,23,42,0.08)',
-        } as any,
-        {
-          id: 'p3',
-          label: 'Pertinence type (t) de sortie',
-          value: '0%',
-          valueColor: '#7c3aed',
-          bgColor: '#ffffff',
-          borderColor: 'rgba(15,23,42,0.08)',
-        } as any,
-      ]}
-      itemsContainerStyle={{
-        display: 'grid',
-        gridTemplateColumns: 'repeat(3, 1fr)',
-        gap: 18,
-        alignItems: 'stretch',
-        width: '100%',
-      }}
-      preset='pertinence'
-    />
-  ),
-  parameters: {
-    docs: {
-      source: {
-        code: `import React from 'react';
-import MetricsPanel from './MetricsPanel';
-
-const items = [
-  { id: 'p1', label: 'Pertinence heure (h) de sortie', value: '4.1', valueColor: '#7c3aed', bgColor: '#ffffff', borderColor: 'rgba(15,23,42,0.08)' },
-  { id: 'p2', label: 'Pertinence séquence (s)', value: '100%', valueColor: '#7c3aed', bgColor: '#ffffff', borderColor: 'rgba(15,23,42,0.08)' },
-  { id: 'p3', label: 'Pertinence type (t) de sortie', value: '0%', valueColor: '#7c3aed', bgColor: '#ffffff', borderColor: 'rgba(15,23,42,0.08)' },
-];
-
-<MetricsPanel
-  summary
-  title=""
-  orientation="horizontal"
-  summaryGridColumns={3}
-  items={items}
-  itemsContainerStyle={{
-    display: 'grid',
-    gridTemplateColumns: 'repeat(3, 1fr)',
-    gap: 18,
-    alignItems: 'stretch',
-    width: '100%',
-  }}
-  preset="pertinence"
-/>`,
-      },
-    },
-  },
-};