@tsiky/components-r19 1.0.0 → 1.2.0

package/src/components/MetricsPanel/MetricsPanel.tsx

@@ -1,282 +1,220 @@
-/* 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);
+/* 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);