@tsiky/components-r19 1.0.0

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

@@ -0,0 +1,232 @@
+.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

@@ -0,0 +1,441 @@
+/* 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 />,
+};