@tsiky/components-r19 1.0.0

package/src/components/MetricsPanel/MetricsPanel.tsx

@@ -0,0 +1,282 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* MetricsPanel.tsx (réorganisé — importe les sous-composants) */
+import React, { useMemo } from 'react';
+import styles from './MetricsPanel.module.css';
+import MetricsItem from './MetricsItem';
+import PanelHeader from './PanelHeader';
+import chooseDefaultRender from './tools/chooseDefaultRender';
+import SummaryCard from './SummaryCard';
+import { hexToRgba as utilHexToRgba } from './tools/colorUtils';
+import type { MetricsPanelProps, MetricsItem as ItemType } from './tools/MetricsPanelTypes';
+import { Grid } from '../Grid';
+const DEFAULT_SUMMARY_BG_COLORS = ['transparent', 'transparent', 'transparent', 'transparent'];
+const DEFAULT_SUMMARY_BORDER_COLORS = ['transparent', 'transparent', 'transparent', 'transparent'];
+const DEFAULT_SUMMARY_VALUE_COLORS = ['#059669', '#2563eb', '#b45309', '#7c3aed'];
+
+const hexToRgba = (c: string | undefined | null, a = 1) => {
+  try {
+    return utilHexToRgba(c as any, a);
+  } catch {
+    return `rgba(124, 58, 237, ${a})`;
+  }
+};
+
+type LocalProps = {
+  itemsContainerStyle?: React.CSSProperties;
+  itemsContainerClassName?: string;
+  summaryGridColumns?: number;
+
+  compactItemWidth?: string | number;
+  compactItemHeight?: string | number;
+  compactItemStyle?: React.CSSProperties;
+
+  summaryCardWidth?: string | number;
+  summaryCardHeight?: string | number;
+  summaryCardStyle?: React.CSSProperties;
+
+  grid?: boolean;
+  orderGrid?: number[];
+  draggableGrid?: boolean;
+  onSwapGrid?: (dragIndex: number, dropIndex: number) => void;
+};
+
+export const MetricsPanel: React.FC<MetricsPanelProps & LocalProps> = (props) => {
+  const {
+    items = [],
+    layout = 'vertical',
+    orientation = 'auto',
+    shape = 'rounded',
+    color = '#7c3aed',
+    compact = false,
+    title,
+    onItemClick,
+    className = '',
+    loading = false,
+    emptyMessage = 'Aucun élément',
+    renderItem,
+    summary = false,
+    summaryBgColors = DEFAULT_SUMMARY_BG_COLORS,
+    summaryBorderColors = DEFAULT_SUMMARY_BORDER_COLORS,
+    summaryValueColors = DEFAULT_SUMMARY_VALUE_COLORS,
+    preset,
+    background,
+    grid = false,
+    orderGrid = [],
+    draggableGrid = false,
+    onSwapGrid,
+  } = props as any;
+
+  const {
+    itemsContainerStyle,
+    itemsContainerClassName,
+    summaryGridColumns,
+    compactItemWidth,
+    compactItemHeight,
+    compactItemStyle,
+    summaryCardWidth,
+    summaryCardHeight,
+    summaryCardStyle,
+  } = props as LocalProps;
+
+  const isVertical = layout === 'vertical';
+  const rootStyle = {
+    ['--mp-accent' as any]: color,
+    ['--mp-accent-soft' as any]: hexToRgba(color, 0.08),
+    ['--mp-bg-primary' as any]: background,
+  } as React.CSSProperties & Record<string, string>;
+
+  const panelClasses = [
+    styles.mpRoot,
+    isVertical ? styles.mpVertical : styles.mpHorizontal,
+    compact ? styles.mpCompact : '',
+    summary ? styles.mpSummaryRoot : '',
+    orientation !== 'auto'
+      ? orientation === 'vertical'
+        ? styles.mpOrientationVertical
+        : styles.mpOrientationHorizontal
+      : '',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  const effectiveRenderItem = useMemo(() => {
+    if (renderItem) return renderItem;
+    const chosen = chooseDefaultRender(preset);
+    return chosen ?? undefined;
+  }, [renderItem, preset]);
+
+  if (summary) {
+    const summaryContainerClass =
+      orientation === 'horizontal' ? styles.mpSummaryFlex : styles.mpSummaryVertical;
+
+    const gridStyle: React.CSSProperties | undefined = summaryGridColumns
+      ? {
+          display: 'grid',
+          gridTemplateColumns: `repeat(${summaryGridColumns}, 1fr)`,
+          gap: 18,
+          alignItems: 'stretch',
+          width: '100%',
+        }
+      : undefined;
+
+    const mergedStyle = { ...(gridStyle ?? {}), ...(itemsContainerStyle ?? {}) };
+
+    return (
+      <div className={panelClasses} style={rootStyle} aria-busy={loading}>
+        {title && <PanelHeader title={title} />}
+        <div className={styles.mpSummaryInner}>
+          <div
+            className={`${summaryContainerClass} ${itemsContainerClassName ?? ''}`}
+            style={mergedStyle}
+          >
+            {items.length === 0 ? (
+              <div className={styles.mpEmpty}>{emptyMessage}</div>
+            ) : (
+              items.map((item: ItemType, i: number) => {
+                const bg = item.bgColor ?? summaryBgColors[i % summaryBgColors.length];
+                const border =
+                  item.borderColor ?? summaryBorderColors[i % summaryBorderColors.length];
+                const valueColor =
+                  item.valueColor ?? summaryValueColors[i % summaryValueColors.length];
+
+                if (effectiveRenderItem) {
+                  return (
+                    <div
+                      key={item.id}
+                      className={
+                        orientation === 'horizontal'
+                          ? styles.mpSummaryCardWrapperHorizontal
+                          : styles.mpSummaryCardWrapper
+                      }
+                      style={{
+                        width: summaryCardWidth ?? undefined,
+                        height: summaryCardHeight ?? undefined,
+                        ...(summaryCardStyle ?? {}),
+                      }}
+                    >
+                      {effectiveRenderItem(item, i)}
+                    </div>
+                  );
+                }
+
+                return (
+                  <SummaryCard
+                    key={item.id}
+                    item={item}
+                    orientation={orientation === 'horizontal' ? 'horizontal' : 'vertical'}
+                    bg={bg}
+                    border={border}
+                    valueColor={valueColor}
+                    onClick={onItemClick}
+                    width={summaryCardWidth ?? undefined}
+                    height={summaryCardHeight ?? undefined}
+                    extraStyle={summaryCardStyle}
+                  />
+                );
+              })
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  /* non-summary list mode */
+  return (
+    <div className={panelClasses} style={rootStyle} aria-busy={loading}>
+      {title && <PanelHeader title={title} />}
+
+      {grid ? (
+        <Grid
+          parent
+          container
+          order={orderGrid}
+          draggable={draggableGrid}
+          onSwap={onSwapGrid}
+          xs={12}
+          className={styles.mpList}
+          style={{ alignItems: 'stretch', height: '100%', ...itemsContainerStyle }}
+        >
+          {loading ? (
+            <div className={styles.mpEmpty}>Chargement…</div>
+          ) : items.length === 0 ? (
+            <div className={styles.mpEmpty}>{emptyMessage}</div>
+          ) : (
+            items.map((item: ItemType, index: number) => {
+              const wrapperStyle: React.CSSProperties | undefined = compact
+                ? {
+                    width: compactItemWidth,
+                    height: compactItemHeight,
+                    boxSizing: 'border-box',
+                    ...compactItemStyle,
+                  }
+                : undefined;
+
+              return (
+                <Grid item xs={12} key={item.id} uniqueKey={index}>
+                  <div
+                    className={compact ? styles.compactItemWrapper : undefined}
+                    style={wrapperStyle}
+                  >
+                    <MetricsItem
+                      item={item}
+                      shape={shape}
+                      onItemClick={onItemClick}
+                      color={color}
+                      renderItem={
+                        effectiveRenderItem
+                          ? (it) => effectiveRenderItem(it, items.indexOf(it))
+                          : undefined
+                      }
+                    />
+                  </div>
+                </Grid>
+              );
+            })
+          )}
+        </Grid>
+      ) : (
+        <div className={styles.mpList} style={itemsContainerStyle}>
+          {loading ? (
+            <div className={styles.mpEmpty}>Chargement…</div>
+          ) : items.length === 0 ? (
+            <div className={styles.mpEmpty}>{emptyMessage}</div>
+          ) : (
+            items.map((item: ItemType) => {
+              const wrapperStyle: React.CSSProperties | undefined = compact
+                ? {
+                    width: compactItemWidth ?? undefined,
+                    height: compactItemHeight ?? undefined,
+                    boxSizing: 'border-box',
+                    ...(compactItemStyle ?? {}),
+                  }
+                : undefined;
+
+              return (
+                <div
+                  key={item.id}
+                  className={compact ? styles.compactItemWrapper : undefined}
+                  style={wrapperStyle}
+                >
+                  <MetricsItem
+                    item={item}
+                    shape={shape}
+                    onItemClick={onItemClick}
+                    color={color}
+                    renderItem={
+                      effectiveRenderItem
+                        ? (it) => effectiveRenderItem(it, items.indexOf(it))
+                        : undefined
+                    }
+                  />
+                </div>
+              );
+            })
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+export default React.memo(MetricsPanel);

package/src/components/MetricsPanel/PanelHeader.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import styles from './MetricsPanel.module.css';
+
+interface PanelHeaderProps {
+  title?: string;
+  right?: React.ReactNode;
+}
+
+const PanelHeader: React.FC<PanelHeaderProps> = ({ title, right }) => {
+  if (!title && !right) return null;
+  return (
+    <div className={styles.mpHeader}>
+      <div className={styles.mpTitle}>{title}</div>
+      <div>{right}</div>
+    </div>
+  );
+};
+
+export default PanelHeader;

package/src/components/MetricsPanel/SummaryCard.tsx

@@ -0,0 +1,61 @@
+/* SummaryCard.tsx */
+import React from 'react';
+import styles from './MetricsPanel.module.css';
+import type { MetricsItem as ItemType } from './tools/MetricsPanelTypes';
+
+interface Props {
+  item: ItemType;
+  orientation: 'horizontal' | 'vertical' | 'auto';
+  bg?: string;
+  border?: string;
+  valueColor?: string;
+  onClick?: (item: ItemType) => void;
+  width?: string | number;
+  height?: string | number;
+  extraStyle?: React.CSSProperties;
+}
+
+const SummaryCard: React.FC<Props> = ({
+  item,
+  orientation,
+  bg,
+  border,
+  valueColor,
+  onClick,
+  width,
+  height,
+  extraStyle,
+}) => {
+  const isHorizontal = orientation === 'horizontal';
+  const className = isHorizontal ? styles.mpSummaryCardHorizontal : styles.mpSummaryCard;
+  return (
+    <div
+      className={className}
+      style={{
+        background: bg,
+        border: `1px solid ${border}`,
+        width: width ?? undefined,
+        height: height ?? undefined,
+        ...(extraStyle ?? {}),
+      }}
+      role={onClick ? 'button' : 'group'}
+      tabIndex={onClick ? 0 : -1}
+      onClick={() => onClick?.(item)}
+    >
+      {item.badge && (
+        <div className={styles.mpSummaryBadge}>
+          {item.badge.text}
+          {item.badge.subText && (
+            <div className={styles.mpSummaryBadgeSub}>{item.badge.subText}</div>
+          )}
+        </div>
+      )}
+      <div className={styles.mpSummaryValue} style={{ color: valueColor }}>
+        {item.value}
+      </div>
+      <div className={styles.mpSummaryLabel}>{item.label}</div>
+    </div>
+  );
+};
+
+export default SummaryCard;

package/src/components/MetricsPanel/index.ts

@@ -0,0 +1,4 @@
+export * from './MetricsItem';
+export * from './MetricsPanel';
+export * from './PanelHeader';
+export * from './tools';

package/src/components/MetricsPanel/renderers/CompactRenderer.tsx

@@ -0,0 +1,125 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* CompactRenderer.tsx */
+import React from 'react';
+import { hexToRgba as utilHexToRgba } from '../tools/colorUtils';
+import type { MetricsItem as ItemType } from '../tools/MetricsPanelTypes';
+
+const hexToRgba = (c: string | undefined | null, a = 1) => {
+  try {
+    return utilHexToRgba(c as any, a);
+  } catch {
+    return `rgba(124, 58, 237, ${a})`;
+  }
+};
+
+const CompactRenderer = (item: ItemType) => (
+  <div
+    style={{
+      display: 'grid',
+      gridTemplateRows: 'auto 1fr',
+      width: '100%',
+      gap: 6,
+      alignItems: 'center',
+      boxSizing: 'border-box',
+      // allow the content to shrink nicely
+      minWidth: 0,
+    }}
+  >
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'space-between-left',
+        alignItems: 'baseline',
+        gap: 8,
+        width: '100%',
+      }}
+    >
+      <div
+        style={{
+          fontWeight: 700,
+          fontSize: 'clamp(12px, 1.05vw, 13px)',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+          minWidth: 0,
+        }}
+      >
+        {item.label}
+      </div>
+      {item.subLabel ? (
+        <div
+          style={{
+            fontSize: 'clamp(11px, 0.9vw, 12px)',
+            fontWeight: 600,
+            whiteSpace: 'nowrap',
+          }}
+        >
+          {item.subLabel}
+        </div>
+      ) : null}
+    </div>
+
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        gap: 12,
+        width: '100%',
+      }}
+    >
+      <div
+        style={{
+          fontWeight: 900,
+          fontSize: 'clamp(18px, 2.0vw, 20px)',
+          color: (item as any).valueColor,
+          lineHeight: 1,
+          minWidth: 0,
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+        }}
+      >
+        {item.value}
+      </div>
+
+      {item.badge ? (
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: '4px 6px',
+            borderRadius: 8,
+            backgroundColor: (item as any).badge.bg
+              ? (item as any).badge.bg
+              : hexToRgba('#7c3aed', 0.08),
+            border: `1px solid ${
+              (item as any).badge.bg ? (item as any).badge.bg : hexToRgba('#7c3aed', 0.12)
+            }`,
+            color: (item as any).badge.textColor || '#0f172a',
+            fontWeight: 700,
+            fontSize: 'clamp(10px, 1vw, 11px)',
+            maxWidth: '40%',
+            minWidth: 48,
+            textAlign: 'center',
+            boxSizing: 'border-box',
+            overflow: 'hidden',
+          }}
+        >
+          <div style={{ fontSize: 'clamp(10px, 0.9vw, 11px)', fontWeight: 800, lineHeight: 1 }}>
+            {(item as any).badge.text}
+          </div>
+          {(item as any).badge.subText ? (
+            <div style={{ fontSize: 'clamp(9px, 0.8vw, 10px)', marginTop: 2, fontWeight: 600 }}>
+              {(item as any).badge.subText}
+            </div>
+          ) : null}
+        </div>
+      ) : null}
+    </div>
+  </div>
+);
+
+export default CompactRenderer;

package/src/components/MetricsPanel/renderers/ImageCard.tsx

@@ -0,0 +1,62 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* ImageCard.tsx */
+import React from 'react';
+import { hexToRgba as utilHexToRgba } from '../tools/colorUtils';
+import type { MetricsItem as ItemType } from '../tools/MetricsPanelTypes';
+
+const hexToRgba = (c: string | undefined | null, a = 1) => {
+  try {
+    return utilHexToRgba(c as any, a);
+  } catch {
+    return `rgba(124, 58, 237, ${a})`;
+  }
+};
+
+const ImageCard: React.FC<{ item: ItemType }> = ({ item }) => (
+  <div
+    style={{
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      padding: 14,
+      borderRadius: 12,
+      minHeight: 88,
+      boxSizing: 'border-box',
+      background: (item as any).bgColor ?? 'transparent',
+      border: `1px solid ${(item as any).borderColor ?? 'transparent'}`,
+      boxShadow: '0 4px 10px rgba(15,23,42,0.03)',
+    }}
+  >
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+      <div style={{ fontSize: 13, fontWeight: 700, color: '#475569' }}>{item.label}</div>
+      <div style={{ fontSize: 26, fontWeight: 900, color: '#0f172a', lineHeight: 1 }}>
+        {item.value}
+      </div>
+    </div>
+
+    <div
+      title={String(item.label)}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: 48,
+        height: 48,
+        borderRadius: 10,
+        background: (item as any).iconSquareBg ?? hexToRgba('#7c3aed', 0.12),
+        border: `1px solid ${hexToRgba((item as any).iconColor ?? '#7c3aed', 0.12)}`,
+        boxShadow: 'none',
+      }}
+    >
+      {(item as any).iconComponent
+        ? React.createElement((item as any).iconComponent, {
+            size: 18,
+            color: (item as any).iconColor ?? '#7c3aed',
+            strokeWidth: 1.6,
+          })
+        : null}
+    </div>
+  </div>
+);
+
+export default ImageCard;

package/src/components/MetricsPanel/renderers/PertinenceCard.tsx

@@ -0,0 +1,55 @@
+/* PertinenceCard.tsx */
+import React from 'react';
+import type { MetricsItem as ItemType } from '../tools/MetricsPanelTypes';
+import styles from '../MetricsPanel.module.css';
+
+interface Props {
+  item: ItemType;
+  bg?: string;
+  border?: string;
+  valueColor?: string;
+  onClick?: (item: ItemType) => void;
+  width?: string | number;
+  height?: string | number;
+  extraStyle?: React.CSSProperties;
+}
+
+const PertinenceCard: React.FC<Props> = ({ item, bg, onClick, width, height, extraStyle }) => {
+  return (
+    <div
+      className={styles.mpSummaryCard}
+      style={{
+        background: bg,
+        width: width ?? undefined,
+        height: height ?? undefined,
+        ...(extraStyle ?? {}),
+      }}
+      role={onClick ? 'button' : 'group'}
+      tabIndex={onClick ? 0 : -1}
+      onClick={() => onClick?.(item)}
+    >
+      {/* Label */}
+      <div className={styles.mpSummaryLabel}>{item.label}</div>
+
+      {/* Valeur */}
+      <div
+        className={styles.mpSummaryValue}
+        style={{ color: (item.valueColor as string) ?? '#2a24deff' }}
+      >
+        {item.value}
+      </div>
+
+      {/* Autre info si nécessaire */}
+      {item.badge && (
+        <div className={styles.mpSummaryBadge}>
+          {item.badge.text}
+          {item.badge.subText && (
+            <div className={styles.mpSummaryBadgeSub}>{item.badge.subText}</div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default PertinenceCard;

package/src/components/MetricsPanel/tools/MetricsPanelTypes.ts

@@ -0,0 +1,62 @@
+// MetricsPanelTypes.ts
+import React from 'react';
+
+export interface Badge {
+  text: string;
+  subText?: string;
+  color?: string; // hex, 'transparent' or any CSS color
+  bg?: string;
+  textColor?: string;
+  small?: boolean;
+}
+
+export interface MetricsItem {
+  id: string | number;
+  label: string;
+  subLabel?: string | React.ReactNode;
+  value: string | number | React.ReactNode;
+  date?: string;
+  icon?: React.ReactNode;
+  badge?: Badge;
+  hint?: string;
+  // optional visual overrides for summary-like cards
+  bgColor?: string;
+  borderColor?: string;
+  valueColor?: string;
+}
+
+export type Preset =
+  | 'default'
+  | 'compact'
+  | 'summary'
+  | 'image'
+  | 'pertinence'
+  | 'alternateHorizontal';
+
+export interface MetricsPanelProps {
+  items: MetricsItem[];
+  layout?: 'vertical' | 'horizontal';
+  orientation?: 'auto' | 'vertical' | 'horizontal';
+  shape?: 'rounded' | 'pill';
+  color?: string;
+  compact?: boolean;
+  title?: string | React.ReactNode;
+  onItemClick?: (item: MetricsItem) => void;
+  className?: string;
+  loading?: boolean;
+  emptyMessage?: string | React.ReactNode;
+  renderItem?: (item: MetricsItem, index: number) => React.ReactNode;
+  summary?: boolean;
+  // Nouveaux props pour les couleurs personnalisables
+  summaryBgColors?: string[];
+  summaryBorderColors?: string[];
+  summaryValueColors?: string[];
+
+  // NEW: preset to auto-select rendering style so stories don't need renderItem
+  preset?: Preset;
+  itemsContainerStyle?: React.CSSProperties;
+  itemsContainerClassName?: string;
+  summaryGridColumns?: number;
+
+  background?: string;
+}