@tsiky/components-r19 1.3.0 → 1.3.1

package/src/components/MetricsPanel/MetricsPanel.tsx

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

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

@@ -1,61 +0,0 @@
-/* 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/renderers/CompactRenderer.tsx

@@ -1,148 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-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: 8,
-      alignItems: 'center',
-      boxSizing: 'border-box',
-      minWidth: 0,
-    }}
-  >
-    <div
-      style={{
-        display: 'flex',
-        justifyContent: 'space-between-left',
-        alignItems: 'baseline',
-        gap: 10,
-        width: '100%',
-      }}
-    >
-      <div
-        style={{
-          fontWeight: 700,
-          fontSize: 'clamp(14px, 1.2vw, 16px)',
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-          whiteSpace: 'nowrap',
-          minWidth: 0,
-        }}
-      >
-        {item.label}
-      </div>
-      {item.subLabel ? (
-        <div
-          style={{
-            fontSize: 'clamp(13px, 1.1vw, 15px)',
-            fontWeight: 600,
-            whiteSpace: 'nowrap',
-          }}
-        >
-          {item.subLabel}
-        </div>
-      ) : null}
-    </div>
-
-    <div
-      style={{
-        display: 'flex',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        gap: 15,
-        width: '100%',
-      }}
-    >
-      <div
-        style={{
-          fontWeight: 900,
-          fontSize: 'clamp(16px, 1.6vw, 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: '8px 12px',
-            borderRadius: 10,
-            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(12px, 1.2vw, 14px)',
-            width: '120px',
-            height: '52px',
-            textAlign: 'center',
-            boxSizing: 'border-box',
-            overflow: 'hidden',
-            boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
-            lineHeight: 1.2,
-            flexShrink: 0,
-          }}
-        >
-          <div
-            style={{
-              fontSize: 14,
-              fontWeight: 800,
-              lineHeight: 1.2,
-              letterSpacing: '0.02em',
-              width: '100%',
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-              whiteSpace: 'nowrap',
-            }}
-          >
-            {(item as any).badge.text}
-          </div>
-          {(item as any).badge.subText ? (
-            <div
-              style={{
-                fontSize: 13,
-                marginTop: 4,
-                fontWeight: 700,
-                letterSpacing: '0.01em',
-                width: '100%',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-                whiteSpace: 'nowrap',
-              }}
-            >
-              {(item as any).badge.subText}
-            </div>
-          ) : null}
-        </div>
-      ) : null}
-    </div>
-  </div>
-);
-
-export default CompactRenderer;

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

@@ -1,62 +0,0 @@
-/* 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

@@ -1,55 +0,0 @@
-/* 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

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

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

@@ -1,50 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* chooseDefaultRender.ts
-   Retourne une fonction de rendu (RenderFn) compatible .ts (pas de JSX).
-*/
-import React from 'react';
-import ImageCard from '../renderers/ImageCard';
-import PertinenceCard from '../renderers/PertinenceCard';
-import CompactRenderer from '../renderers/CompactRenderer';
-import type { Preset } from './MetricsPanelTypes';
-import type { MetricsItem as ItemType } from './MetricsPanelTypes';
-
-export type RenderFn = (item: ItemType, index?: number) => React.ReactNode;
-
-const callCompactRenderer = (renderer: any, item: ItemType): React.ReactNode => {
-  try {
-    if (typeof renderer === 'function') {
-      const res = (renderer as any)(item);
-      if (res !== undefined) return res;
-    }
-  } catch {
-    /* empty */
-  }
-  try {
-    return React.createElement(renderer as any, { item });
-  } catch (e) {
-    console.warn('chooseDefaultRender: impossible de rendre CompactRenderer', e);
-    return null;
-  }
-};
-
-const chooseDefaultRender = (preset?: Preset): RenderFn | undefined => {
-  switch (preset) {
-    case 'image':
-      // React.createElement pour éviter le JSX dans un fichier .ts
-      return (item: ItemType) => React.createElement(ImageCard as any, { item });
-    case 'pertinence':
-      return (item: ItemType) => React.createElement(PertinenceCard as any, { item });
-    case 'alternateHorizontal':
-      return (item: ItemType) => callCompactRenderer(CompactRenderer as any, item);
-    case 'compact':
-      return (item: ItemType) => callCompactRenderer(CompactRenderer as any, item);
-    case 'summary':
-      return undefined;
-    case 'default':
-    default:
-      return undefined;
-  }
-};
-
-export default chooseDefaultRender;