@tsiky/components-r19 1.3.0 → 1.3.2

package/src/components/PerformanceCard/PerformanceCard.module.css

@@ -1,232 +0,0 @@
-.card {
-  background: transparent;
-  border-radius: 12px;
-  padding: 1rem; /* 16px → rem */
-  box-shadow: 0 0.375rem 1.125rem rgba(15, 23, 42, 0.04); /* 6px 18px */
-  border: 1px solid rgba(15, 23, 42, 0.04);
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem; /* 12px */
-  width: var(--pc-width, 100%);
-  max-width: var(--pc-max-width, 100%);
-  height: var(--pc-height, auto);
-  box-sizing: border-box;
-}
-
-.compact {
-  padding: 0.75rem; /* 12px */
-}
-
-/* Header */
-.headerRow {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.title {
-  font-family: var(--font-primary);
-  font-weight: var(--font-bold); /* 700 */
-  font-size: var(--text-small); /* 14px */
-  color: #0f172a;
-}
-
-.headerActions {
-  display: flex;
-  gap: 0.5rem; /* 8px */
-  align-items: center;
-  opacity: 0.85;
-}
-
-/* Metrics row */
-.metricsRow {
-  display: flex;
-  width: 100%;
-  box-sizing: border-box;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-}
-
-/* Container passé à MetricsPanel */
-.metricsPanel {
-  width: 100%;
-  max-width: 28.75rem; /* 460px */
-  display: flex;
-  gap: 0.75rem; /* 12px */
-  justify-content: space-between;
-  align-items: center;
-  padding: 0;
-  margin: 0;
-  background: transparent;
-  box-shadow: none;
-  border: none;
-  border-radius: 0;
-  box-sizing: border-box;
-}
-
-.metricsPanel > * {
-  flex: 1 1 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 0.375rem; /* 6px */
-  background: transparent;
-}
-
-.metricsPanel .metric {
-  width: 100%;
-  text-align: center;
-}
-
-.metricsPanel .metricValue {
-  font-family: var(--font-primary);
-  font-size: var(--h3); /* 20px → utiliser variable */
-  font-weight: var(--font-bold); /* 800 */
-  color: #0f172a;
-  line-height: 1;
-}
-
-.metricsPanel .metricLabel {
-  font-family: var(--font-primary);
-  font-size: var(--text-small); /* 12px */
-  color: #64748b;
-}
-
-/* Histogram */
-.chartContainer {
-  background: rgba(15, 23, 42, 0.03);
-  border-radius: 0.5rem; /* 8px */
-  padding: 0.875rem 0.75rem; /* 14px 12px */
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.chartInner {
-  width: 100%;
-  max-width: 26.25rem; /* 420px */
-  height: var(--pc-chart-height, 5.75rem); /* 92px */
-  display: flex;
-  align-items: flex-end;
-}
-
-/* Bars */
-.dynamicBars {
-  display: flex;
-  gap: 1rem; /* 16px */
-  width: 100%;
-  justify-content: center;
-  align-items: flex-end;
-  height: 100%;
-}
-
-.dynamicBarWrapper {
-  display: grid;
-  grid-template-rows: 1fr auto;
-  align-items: end;
-  width: calc((100% - (var(--bars-count) - 1) * 1rem) / var(--bars-count));
-  max-width: 3.5rem; /* 56px */
-  box-sizing: border-box;
-  height: 100%;
-  gap: 0.375rem; /* 6px */
-}
-
-.dynamicBar {
-  width: 100%;
-  border-radius: 0.375rem 0.375rem 0.125rem 0.125rem; /* 6px 6px 2px 2px */
-  transition:
-    height 420ms cubic-bezier(0.2, 0.9, 0.2, 1),
-    background 240ms;
-  min-height: 0.375rem; /* 6px */
-  align-self: end;
-  justify-self: stretch;
-  transform-origin: bottom;
-}
-
-.barLabel {
-  font-family: var(--font-primary);
-  font-size: var(--text-small); /* 11px → utiliser variable */
-  color: #64748b;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  text-align: center;
-  max-width: 100%;
-}
-
-/* Footer */
-.footerRow {
-  display: flex;
-  justify-content: space-between;
-  gap: 0.75rem; /* 12px */
-  font-family: var(--font-primary);
-  font-size: var(--text-small); /* 12px */
-  color: #475569;
-  align-items: center;
-}
-
-.footerNoteRight {
-  color: #059669;
-  font-weight: var(--font-bold); /* 700 */
-}
-
-.placeholder {
-  opacity: 0.45;
-}
-
-/* Editor */
-.editorContainer {
-  display: flex;
-  gap: 0.75rem; /* 12px */
-  margin-top: 0.5rem; /* 8px */
-  flex-wrap: wrap;
-}
-
-.editorColumn {
-  flex: 1 1 17.5rem; /* 280px */
-  min-width: 13.75rem; /* 220px */
-}
-
-.editorList {
-  margin-top: 0.5rem; /* 8px */
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem; /* 8px */
-}
-
-.editorRow {
-  display: flex;
-  gap: 0.5rem; /* 8px */
-  align-items: center;
-}
-
-.editorInputLabel {
-  flex: 1 1 50%;
-  padding: 0.375rem 0.5rem; /* 6px 8px */
-  border-radius: 0.5rem; /* 8px */
-  border: 1px solid rgba(15, 23, 42, 0.06);
-  font-family: var(--font-primary);
-  font-size: var(--text-small); /* 13px → approximation */
-}
-
-.editorInputValue {
-  width: 6.875rem; /* 110px */
-  padding: 0.375rem 0.5rem; /* 6px 8px */
-  border-radius: 0.5rem; /* 8px */
-  border: 1px solid rgba(15, 23, 42, 0.06);
-  text-align: right;
-  font-family: var(--font-primary);
-  font-weight: var(--font-bold); /* 700 */
-  font-size: var(--text-small); /* 13px → approximation */
-}
-
-/* Trends */
-.trendUp {
-  color: #059669;
-}
-
-.trendDown {
-  color: #dc2626;
-}

package/src/components/PerformanceCard/PerformanceCard.stories.tsx

@@ -1,441 +0,0 @@
-/* PerformanceCard.stories.tsx */
-import React from 'react';
-// eslint-disable-next-line storybook/no-renderer-packages
-import type { Meta, StoryObj } from '@storybook/react';
-import PerformanceCard from './PerformanceCard';
-import type { PerformanceCardData } from './tools/types';
-
-const meta: Meta<typeof PerformanceCard> = {
-  title: 'Components/PerformanceCard',
-  component: PerformanceCard,
-  parameters: { layout: 'padded' },
-  tags: ['autodocs'],
-  argTypes: {
-    compact: { control: 'boolean' },
-    editable: { control: 'boolean' },
-    width: { control: 'text' },
-    maxWidth: { control: 'text' },
-    height: { control: 'text' },
-    chartHeight: { control: 'text' },
-  },
-};
-export default meta;
-
-type Story = StoryObj<typeof PerformanceCard>;
-
-/* ---------------- SAMPLE (complet) DATA ---------------- */
-
-const SAMPLE_DATA: PerformanceCardData = {
-  title: 'Exemple Performance',
-  topMetrics: [
-    { id: 'm1', label: 'Prédiction', value: '88%', color: '#6b7280' },
-    { id: 'm2', label: 'Idéale', value: '92%', color: '#4f46e5' },
-    { id: 'm3', label: 'Performance', value: '90%', color: '#10b981' },
-  ],
-  histogram: [
-    { id: 'h1', value: 88, color: '#6b7280' },
-    { id: 'h2', value: 92, color: '#4f46e5' },
-    { id: 'h3', value: 90, color: '#10b981' },
-  ],
-  footerLeft: 'vs Idéale: -4%',
-  footerRight: 'vs Prédiction: +2%',
-};
-
-/* ---------------- SIMPLE (snippet montré dans "Show code") DATA ----------------
-   Ceci est la version minimale fournie dans les snippets "Show code" pour que
-   l'utilisateur copy/paste un exemple simple et fonctionnel.
-*/
-
-/* Small helper grid used by the Dashboard story */
-const DashboardGrid: React.FC<{ items?: PerformanceCardData[] }> = ({
-  items = [SAMPLE_DATA, SAMPLE_DATA, SAMPLE_DATA],
-}) => {
-  return (
-    <div style={{ display: 'flex', gap: 20, padding: 20 }}>
-      {items.map((d, i) => (
-        <PerformanceCard key={i} data={d} />
-      ))}
-    </div>
-  );
-};
-
-/* Custom histogram renderer used in a story */
-const CustomHistogramRenderer: React.FC<{
-  bars: { id?: string | number; value: number; color?: string }[];
-}> = ({ bars }) => (
-  <div style={{ display: 'flex', gap: 6, marginTop: 10 }}>
-    {bars.map((b) => (
-      <div
-        key={String(b.id ?? Math.random())}
-        style={{
-          height: `${b.value}%`,
-          width: 20,
-          background: b.color,
-          borderRadius: 4,
-        }}
-      />
-    ))}
-  </div>
-);
-
-/* ---------------- Stories ---------------- */
-
-/** Default */
-export const Default: Story = {
-  args: { data: SAMPLE_DATA },
-  parameters: {
-    docs: {
-      source: {
-        code: `// Simple copy/paste example
-const SIMPLE_DATA = {
-  title: 'Simple Performance',
-  topMetrics: [
-    { id: 's1', label: 'Prédiction', value: '80%', color: '#6b7280' },
-    { id: 's2', label: 'Performance', value: '85%', color: '#10b981' },
-  ],
-  histogram: [
-    { id: 'h1', value: 80, color: '#6b7280' },
-    { id: 'h2', value: 85, color: '#10b981' },
-  ],
-};
-
-<PerformanceCard data={SIMPLE_DATA} />`,
-      },
-    },
-  },
-};
-
-/** Compact — demonstration via args */
-export const Compact: Story = {
-  args: { data: SAMPLE_DATA, compact: true },
-  parameters: {
-    docs: {
-      source: {
-        code: `// Simple compact example
-const SIMPLE_DATA = {
-  title: 'Simple Performance',
-  topMetrics: [
-    { id: 's1', label: 'Prédiction', value: '80%', color: '#6b7280' },
-    { id: 's2', label: 'Performance', value: '85%', color: '#10b981' },
-  ],
-  histogram: [
-    { id: 'h1', value: 80, color: '#6b7280' },
-    { id: 'h2', value: 85, color: '#10b981' },
-  ],
-};
-
-<PerformanceCard data={SIMPLE_DATA} compact />`,
-      },
-    },
-  },
-};
-
-/** Editable — via args */
-export const Editable: Story = {
-  args: { data: SAMPLE_DATA, editable: true },
-  parameters: {
-    docs: {
-      source: {
-        code: `// Simple editable example
-const SIMPLE_DATA = {
-  title: 'Simple Performance',
-  topMetrics: [
-    { id: 's1', label: 'Prédiction', value: '80%', color: '#6b7280' },
-    { id: 's2', label: 'Performance', value: '85%', color: '#10b981' },
-  ],
-};
-
-<PerformanceCard data={SIMPLE_DATA} editable />`,
-      },
-    },
-  },
-};
-
-/** SummaryHorizontal — render direct (no wrapper div) pour code propre */
-export const SummaryHorizontal: Story = {
-  args: { data: SAMPLE_DATA },
-  render: (args) => <PerformanceCard {...args} />,
-  parameters: {
-    docs: {
-      source: {
-        code: `// Simple summary horizontal usage
-const SIMPLE_DATA = {
-  title: 'Simple Performance',
-  topMetrics: [
-    { id: 's1', label: 'Prédiction', value: '80%', color: '#6b7280' },
-    { id: 's2', label: 'Performance', value: '85%', color: '#10b981' },
-  ],
-  histogram: [
-    { id: 'h1', value: 80, color: '#6b7280' },
-    { id: 'h2', value: 85, color: '#10b981' },
-  ],
-};
-
-<PerformanceCard data={SIMPLE_DATA} />`,
-      },
-    },
-  },
-};
-
-/** CustomHistogram — on fournit un renderer nommé et on force le snippet de docs */
-export const CustomHistogram: Story = {
-  args: {
-    data: SAMPLE_DATA,
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    renderHistogram: (bars: any) => <CustomHistogramRenderer bars={bars} />,
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `// Exemple avec renderer personnalisé
-const SIMPLE_DATA = {
-  title: 'Simple Performance',
-  topMetrics: [
-    { id: 's1', label: 'Prédiction', value: '80%', color: '#6b7280' },
-    { id: 's2', label: 'Performance', value: '85%', color: '#10b981' },
-  ],
-  histogram: [
-    { id: 'h1', value: 80, color: '#6b7280' },
-    { id: 'h2', value: 85, color: '#10b981' },
-  ],
-};
-
-<PerformanceCard
-  data={SIMPLE_DATA}
-  renderHistogram={(bars) => (
-    <div style={{ display: 'flex', gap: 6, marginTop: 10 }}>
-      {bars.map(b => (
-        <div key={b.id} style={{ height: b.value + '%', width: 20, background: b.color, borderRadius: 4 }} />
-      ))}
-    </div>
-  )}
-/>`,
-      },
-    },
-  },
-};
-
-/** CustomColors — args only */
-export const CustomColors: Story = {
-  args: {
-    data: {
-      ...SAMPLE_DATA,
-      topMetrics: [
-        {
-          id: 'm1',
-          label: 'Min',
-          value: '72%',
-          color: '#dc2626',
-          bgColor: '#fee2e2',
-          borderColor: '#fca5a5',
-        },
-        {
-          id: 'm2',
-          label: 'Moyenne',
-          value: '85%',
-          color: '#d97706',
-          bgColor: '#fffbeb',
-          borderColor: '#fed7aa',
-        },
-        {
-          id: 'm3',
-          label: 'Max',
-          value: '98%',
-          color: '#059669',
-          bgColor: '#f0fdf4',
-          borderColor: '#bbf7d0',
-        },
-      ],
-    } as PerformanceCardData,
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `// Exemple couleurs personnalisées (SIMPLE_DATA minimal pour copy/paste)
-const SIMPLE_DATA = {
-  title: 'Simple Performance',
-  topMetrics: [
-    { id: 's1', label: 'Prédiction', value: '80%', color: '#6b7280' },
-    { id: 's2', label: 'Performance', value: '85%', color: '#10b981' },
-  ],
-};
-
-<PerformanceCard data={SIMPLE_DATA} />`,
-      },
-    },
-  },
-};
-
-/* Trend examples */
-export const TrendUp: Story = {
-  args: {
-    data: {
-      title: 'Performance > Prédiction',
-      topMetrics: [
-        { id: 'p', label: 'Prédiction', value: '80%', color: '#6b7280' },
-        { id: 'perf', label: 'Performance', value: '90%', color: '#10b981' },
-      ],
-      histogram: [
-        { id: 'p', value: 80, color: '#6b7280' },
-        { id: 'perf', value: 90, color: '#10b981' },
-      ],
-      footerLeft: 'vs Prédiction: +10%',
-    } as PerformanceCardData,
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `// Trend up simple example
-const SIMPLE_DATA = {
-  title: 'Trend Up',
-  topMetrics: [
-    { id: 'p', label: 'Prédiction', value: '80%', color: '#6b7280' },
-    { id: 'perf', label: 'Performance', value: '90%', color: '#10b981' },
-  ],
-  histogram: [
-    { id: 'p', value: 80 },
-    { id: 'perf', value: 90 },
-  ],
-  footerLeft: 'vs Prédiction: +10%',
-};
-
-<PerformanceCard data={SIMPLE_DATA} />`,
-      },
-    },
-  },
-};
-
-export const TrendDown: Story = {
-  args: {
-    data: {
-      title: 'Performance < Prédiction',
-      topMetrics: [
-        { id: 'p', label: 'Prédiction', value: '95%', color: '#6b7280' },
-        { id: 'perf', label: 'Performance', value: '85%', color: '#dc2626' },
-      ],
-      histogram: [
-        { id: 'p', value: 95, color: '#6b7280' },
-        { id: 'perf', value: 85, color: '#dc2626' },
-      ],
-      footerLeft: 'vs Prédiction: -10%',
-    } as PerformanceCardData,
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `// Trend down simple example
-const SIMPLE_DATA = {
-  title: 'Trend Down',
-  topMetrics: [
-    { id: 'p', label: 'Prédiction', value: '95%', color: '#6b7280' },
-    { id: 'perf', label: 'Performance', value: '85%', color: '#dc2626' },
-  ],
-  histogram: [
-    { id: 'p', value: 95 },
-    { id: 'perf', value: 85 },
-  ],
-  footerLeft: 'vs Prédiction: -10%',
-};
-
-<PerformanceCard data={SIMPLE_DATA} />`,
-      },
-    },
-  },
-};
-
-/** Fixed width example (nouvelle story) */
-export const FixedWidth320: Story = {
-  args: { data: SAMPLE_DATA, width: '320px' },
-  parameters: {
-    docs: {
-      source: {
-        code: `// Forcer la largeur à 320px (SIMPLE_DATA fourni)
-const SIMPLE_DATA = {
-  title: 'Simple Performance',
-  topMetrics: [
-    { id: 's1', label: 'Prédiction', value: '80%', color: '#6b7280' },
-    { id: 's2', label: 'Performance', value: '85%', color: '#10b981' },
-  ],
-};
-
-<PerformanceCard data={SIMPLE_DATA} width="320px" />`,
-      },
-    },
-  },
-};
-
-/** Max width example (nouvelle story) */
-export const MaxWidth300: Story = {
-  args: { data: SAMPLE_DATA, maxWidth: '300px' },
-  parameters: {
-    docs: {
-      source: {
-        code: `// Limiter la largeur maximale (SIMPLE_DATA fourni)
-const SIMPLE_DATA = {
-  title: 'Simple Performance',
-  topMetrics: [
-    { id: 's1', label: 'Prédiction', value: '80%', color: '#6b7280' },
-    { id: 's2', label: 'Performance', value: '85%', color: '#10b981' },
-  ],
-};
-
-<PerformanceCard data={SIMPLE_DATA} maxWidth="300px" />`,
-      },
-    },
-  },
-};
-
-/** Taller card + larger chart (nouvelle story) */
-export const TallerCardAndBiggerChart: Story = {
-  args: { data: SAMPLE_DATA, height: '420px', chartHeight: '160px' },
-  parameters: {
-    docs: {
-      source: {
-        code: `// Forcer la hauteur totale de la carte et agrandir la hauteur du graphique
-const SIMPLE_DATA = {
-  title: 'Simple Performance',
-  topMetrics: [
-    { id: 's1', label: 'Prédiction', value: '80%', color: '#6b7280' },
-    { id: 's2', label: 'Performance', value: '85%', color: '#10b981' },
-  ],
-  histogram: [
-    { id: 'h1', value: 80, color: '#6b7280' },
-    { id: 'h2', value: 85, color: '#10b981' },
-  ],
-};
-
-<PerformanceCard data={SIMPLE_DATA} height="420px" chartHeight="160px" />`,
-      },
-    },
-  },
-};
-
-/** Dashboard: plusieurs cartes côte à côte (layout fullscreen pour la story) */
-export const Dashboard: Story = {
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      source: {
-        code: `// Trois cartes côte-à-côte (SIMPLE_DATA fourni)
-const SIMPLE_DATA = {
-  title: 'Simple Performance',
-  topMetrics: [
-    { id: 's1', label: 'Prédiction', value: '80%', color: '#6b7280' },
-    { id: 's2', label: 'Performance', value: '85%', color: '#10b981' },
-  ],
-  histogram: [
-    { id: 'h1', value: 80, color: '#6b7280' },
-    { id: 'h2', value: 85, color: '#10b981' },
-  ],
-};
-
-<div style={{ display: 'flex', gap: 20 }}>
-  <PerformanceCard data={SIMPLE_DATA} />
-  <PerformanceCard data={SIMPLE_DATA} />
-  <PerformanceCard data={SIMPLE_DATA} />
-</div>`,
-      },
-    },
-  },
-  render: () => <DashboardGrid />,
-};