@tsiky/components-r19 1.3.0 → 1.3.1

package/src/components/PerformanceCard/PerformanceCard.tsx

@@ -1,198 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import React from 'react';
-import MetricsPanel from '../MetricsPanel/MetricsPanel';
-import { usePerformanceCard } from './tools/usePerformanceCard';
-import { defaultHistogramRenderer } from './defaultHistogramRenderer';
-import type { PerformanceCardData, PerformanceCardProps as BaseProps } from './tools/types';
-import styles from './PerformanceCard.module.css';
-
-// icons
-import { TrendingUp, TrendingDown } from 'lucide-react';
-
-type PerformanceCardProps = BaseProps & {
-  /**
-   * Contrôles de dimensions simples.
-   * Exemples acceptés: '320px', '100%', '24rem'
-   */
-  width?: string;
-  maxWidth?: string;
-  height?: string;
-  /**
-   * Hauteur du container du graphique (ex: '92px', '120px')
-   */
-  chartHeight?: string;
-  /**
-   * style additionnel appliqué au root
-   */
-  style?: React.CSSProperties;
-};
-
-const PerformanceCard: React.FC<PerformanceCardProps> = ({
-  data,
-  className = '',
-  compact = false,
-  editable = false,
-  onChange,
-  mapToMetricsItem,
-  renderHistogram,
-  defaultColors,
-  // new sizing props
-  width,
-  maxWidth,
-  height,
-  chartHeight,
-  style,
-}) => {
-  const { local, histogramNormalized, autoFooter, updatePartial, toMetricsItems } =
-    usePerformanceCard(data, defaultColors);
-
-  const metricsPanelItems = toMetricsItems(local.topMetrics || [], mapToMetricsItem);
-
-  const handleUpdate = (next: Partial<PerformanceCardData>) => {
-    const merged = updatePartial(next);
-    onChange?.(merged);
-  };
-
-  const parseValue = (val?: React.ReactNode): number => {
-    if (val == null) return NaN;
-
-    if (typeof val === 'number') return val;
-
-    if (typeof val === 'string') {
-      return Number(val.replace('%', '').trim());
-    }
-
-    // JSX.Element, boolean, etc. → pas comparable
-    return NaN;
-  };
-
-  const normalize = (s?: string) =>
-    s
-      ?.normalize('NFD')
-      .replace(/[\u0300-\u036f]/g, '')
-      .toLowerCase() ?? '';
-
-  const prediction = local.topMetrics?.find((m) => normalize(m.label).includes('pred'));
-  const performance = local.topMetrics?.find((m) => normalize(m.label).includes('perf'));
-
-  const perfVal = parseValue(performance?.value);
-  const predVal = parseValue(prediction?.value);
-
-  const isUp = !isNaN(perfVal) && !isNaN(predVal) && perfVal >= predVal;
-
-  // CSS custom properties for sizing (fallbacks are in CSS)
-  const cssVars: React.CSSProperties = {
-    ['--pc-width' as any]: width,
-    ['--pc-max-width' as any]: maxWidth,
-    ['--pc-height' as any]: height,
-    ['--pc-chart-height' as any]: chartHeight,
-  };
-
-  return (
-    <div
-      className={[styles.card, compact ? styles.compact : '', className].join(' ')}
-      style={{ ...cssVars, ...(style ?? {}) }}
-    >
-      <div className={styles.headerRow}>
-        <div className={styles.title}>{local.title ?? 'Performance'}</div>
-        <div className={styles.headerActions} aria-hidden>
-          {isUp ? (
-            <TrendingUp size={18} className={styles.trendUp} />
-          ) : (
-            <TrendingDown size={18} className={styles.trendDown} />
-          )}
-        </div>
-      </div>
-
-      <div className={styles.metricsRow}>
-        <MetricsPanel
-          className={styles.metricsPanel}
-          items={metricsPanelItems}
-          summary
-          orientation='horizontal'
-        />
-      </div>
-
-      {renderHistogram
-        ? renderHistogram(histogramNormalized)
-        : defaultHistogramRenderer(histogramNormalized)}
-
-      <div className={styles.footerRow}>
-        <div className={styles.footerNote}>
-          {local.footerLeft ?? (autoFooter ? autoFooter.left : null) ?? (
-            <span className={styles.placeholder}>—</span>
-          )}
-        </div>
-        <div className={styles.footerNoteRight}>
-          {local.footerRight ?? (autoFooter ? autoFooter.right : null) ?? (
-            <span className={styles.placeholder}>—</span>
-          )}
-        </div>
-      </div>
-
-      {editable && (
-        <div className={styles.editorContainer}>
-          <div className={styles.editorColumn}>
-            <strong>Top metrics</strong>
-            <div className={styles.editorList}>
-              {local.topMetrics.map((m, idx) => (
-                <div className={styles.editorRow} key={m.id ?? `${m.label}-${idx}`}>
-                  <input
-                    className={styles.editorInputLabel}
-                    value={String(m.label)}
-                    onChange={(e) => {
-                      const next = [...local.topMetrics];
-                      next[idx] = { ...next[idx], label: e.target.value };
-                      handleUpdate({ topMetrics: next });
-                    }}
-                  />
-                  <input
-                    className={styles.editorInputValue}
-                    value={String(m.value)}
-                    onChange={(e) => {
-                      const next = [...local.topMetrics];
-                      next[idx] = { ...next[idx], value: e.target.value };
-                      handleUpdate({ topMetrics: next });
-                    }}
-                  />
-                </div>
-              ))}
-            </div>
-          </div>
-
-          <div className={styles.editorColumn}>
-            <strong>Histogram</strong>
-            <div className={styles.editorList}>
-              {local.histogram?.map((b, idx) => (
-                <div className={styles.editorRow} key={b.id ?? idx}>
-                  <input
-                    className={styles.editorInputLabel}
-                    value={String(b.label ?? '')}
-                    placeholder='label'
-                    onChange={(e) => {
-                      const next = (local.histogram || []).slice();
-                      next[idx] = { ...next[idx], label: e.target.value };
-                      handleUpdate({ histogram: next });
-                    }}
-                  />
-                  <input
-                    className={styles.editorInputValue}
-                    type='number'
-                    value={String(b.value)}
-                    onChange={(e) => {
-                      const next = (local.histogram || []).slice();
-                      next[idx] = { ...next[idx], value: Number(e.target.value) };
-                      handleUpdate({ histogram: next });
-                    }}
-                  />
-                </div>
-              ))}
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default React.memo(PerformanceCard);

package/src/components/PerformanceCard/defaultHistogramRenderer.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import styles from './PerformanceCard.module.css';
-
-interface HistogramBarNormalized {
-  id?: string | number;
-  label?: string;
-  value: number;
-  color?: string;
-  normalized: number;
-}
-
-export const defaultHistogramRenderer = (bars: HistogramBarNormalized[]) => (
-  <div className={styles.chartContainer} aria-hidden>
-    <div className={styles.chartInner}>
-      <div className={styles.dynamicBars} style={{ ['--bars-count' as never]: bars.length }}>
-        {bars.map((b) => (
-          <div key={String(b.id ?? b.label ?? Math.random())} className={styles.dynamicBarWrapper}>
-            <div
-              className={styles.dynamicBar}
-              title={`${b.label ?? ''}: ${b.value}`}
-              style={{
-                height: `${b.normalized}%`,
-                background: b.color,
-              }}
-            />
-            {b.label && <div className={styles.barLabel}>{b.label}</div>}
-          </div>
-        ))}
-      </div>
-    </div>
-  </div>
-);

package/src/components/PerformanceCard/tools/types.ts

@@ -1,50 +0,0 @@
-// types.ts
-import type { MetricsItem } from '../../MetricsPanel/tools/MetricsPanelTypes';
-
-export type TopMetric = {
-  id: string | number;
-  label: string;
-  value: string | number | React.ReactNode;
-  color?: string;
-  bgColor?: string;
-  borderColor?: string;
-  valueColor?: string;
-  subLabel?: string | React.ReactNode;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  badge?: any;
-};
-
-export type HistogramBar = {
-  id?: string | number;
-  label?: string;
-  value: number;
-  color?: string;
-};
-
-export type PerformanceCardColors = {
-  defaultMuted?: string;
-  defaultPrimary?: string;
-  defaultSuccess?: string;
-  accent?: string;
-};
-
-export type PerformanceCardData = {
-  id?: string | number;
-  title?: string;
-  topMetrics: TopMetric[];
-  histogram?: HistogramBar[];
-  footerLeft?: string | React.ReactNode;
-  footerRight?: string | React.ReactNode;
-  colors?: PerformanceCardColors;
-};
-
-export interface PerformanceCardProps {
-  data: PerformanceCardData;
-  className?: string;
-  compact?: boolean;
-  editable?: boolean;
-  onChange?: (next: PerformanceCardData) => void;
-  mapToMetricsItem?: (m: TopMetric) => MetricsItem;
-  renderHistogram?: (bars: HistogramBar[]) => React.ReactNode;
-  defaultColors?: PerformanceCardColors;
-}

package/src/components/PerformanceCard/tools/usePerformanceCard.ts

@@ -1,93 +0,0 @@
-import { useEffect, useMemo, useState } from 'react';
-import type { PerformanceCardColors, PerformanceCardData, TopMetric } from './types';
-
-export const DEFAULT_COLORS: PerformanceCardColors = {
-  defaultMuted: '#9ca3af',
-  defaultPrimary: '#4f46e5',
-  defaultSuccess: '#10b981',
-  accent: '#7c3aed',
-};
-
-export const usePerformanceCard = (
-  data: PerformanceCardData,
-  defaultColors?: PerformanceCardColors
-) => {
-  const [local, setLocal] = useState<PerformanceCardData>(data);
-
-  useEffect(() => setLocal(data), [data]);
-
-  const mergedColors: PerformanceCardColors = {
-    ...DEFAULT_COLORS,
-    ...(defaultColors || {}),
-    ...(data.colors || {}),
-  };
-
-  const defaultMap = (m: TopMetric) => ({
-    id: m.id ?? `${m.label}-${String(m.value)}`,
-    label: m.label,
-    subLabel: m.subLabel,
-    value: m.value,
-    valueColor: m.valueColor ?? m.color ?? undefined,
-    bgColor: m.bgColor,
-    borderColor: m.borderColor,
-    badge: m.badge,
-  });
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const toMetricsItems = (dataList: TopMetric[], mapToMetricsItem?: (m: TopMetric) => any) =>
-    dataList.map((m) => (mapToMetricsItem ? mapToMetricsItem(m) : defaultMap(m)));
-
-  const histogramBars = local.histogram ?? [];
-
-  const histogramNormalized = useMemo(() => {
-    if (!histogramBars.length) return [];
-    const vals = histogramBars.map((b) => (Number.isFinite(b.value) ? b.value : 0));
-    const max = Math.max(...vals, 1);
-    return histogramBars.map((b) => ({
-      ...b,
-      normalized: Math.max(0, Math.round((b.value / max) * 100)),
-      color: b.color ?? mergedColors.defaultPrimary,
-    }));
-  }, [histogramBars, mergedColors.defaultPrimary]);
-
-  const autoFooter = useMemo(() => {
-    if (!local.topMetrics || local.topMetrics.length < 2) return null;
-
-    const tryNumber = (v: unknown) => {
-      if (typeof v === 'number') return v;
-      if (typeof v === 'string') {
-        const n = parseFloat(v.replace('%', '').trim());
-        return Number.isFinite(n) ? n : NaN;
-      }
-      return NaN;
-    };
-
-    const a = tryNumber(local.topMetrics[0].value);
-    const b = tryNumber(local.topMetrics[1].value);
-
-    if (Number.isFinite(a) && Number.isFinite(b)) {
-      const diff = Math.round(a - b);
-      const sign = diff > 0 ? '+' : '';
-      return {
-        left: `${local.topMetrics[0].label} ${a}${typeof local.topMetrics[0].value === 'string' && String(local.topMetrics[0].value).includes('%') ? '%' : ''}`,
-        right: `${sign}${diff}${typeof local.topMetrics[0].value === 'string' && String(local.topMetrics[0].value).includes('%') ? '%' : ''}`,
-      };
-    }
-    return null;
-  }, [local.topMetrics]);
-
-  const updatePartial = (next: Partial<PerformanceCardData>) => {
-    const merged = { ...local, ...next };
-    setLocal(merged);
-    return merged;
-  };
-
-  return {
-    local,
-    mergedColors,
-    histogramNormalized,
-    autoFooter,
-    updatePartial,
-    toMetricsItems,
-  };
-};

package/src/components/PeriodRange/PeriodRange.module.css

@@ -1,158 +0,0 @@
-.wrapper {
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 10px 16px;
-  background: var(--color-card-background);
-  border-radius: 10px;
-  border: 1px solid rgba(16, 24, 40, 0.06);
-  box-shadow: 0 1px 0 rgba(16, 24, 40, 0.03);
-  width: 100%;
-}
-
-.label {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  color: var(--color-text);
-  font-size: 14px;
-  flex: 0 0 auto;
-}
-
-.labelText {
-  display: inline-block;
-  color: var(--color-text);
-}
-
-.calendarIcon {
-  opacity: 0.75;
-  display: block;
-}
-
-.rangeRow {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  width: 100%;
-  flex-wrap: nowrap;
-}
-
-.dateWrap {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  min-width: 0;
-  flex: 1 1 0;
-}
-
-.innerLabel {
-  font-size: 12px;
-  color: #6b7280;
-  display: block;
-}
-
-.dateInput {
-  -webkit-appearance: none;
-  appearance: none;
-  border: 1px solid;
-  padding: 8px 10px;
-  border-radius: 8px;
-  border-color: var(--color-border);
-  font-size: 14px;
-  background: transparent;
-  width: 100%;
-  box-sizing: border-box;
-  color: var(--color-text);
-}
-
-.sepWrap {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 6px;
-}
-
-.separator {
-  color: #9ca3af;
-  font-weight: 600;
-  user-select: none;
-}
-
-.samplingWrap {
-  display: flex;
-  /* position: absolute; */
-  flex-direction: column;
-  gap: 6px;
-  min-width: 160px;
-  flex: 0 0 auto;
-}
-
-.samplingLabel {
-  font-size: 12px;
-  color: #374151;
-}
-
-.samplingSelect {
-  padding: 8px 10px;
-  border-radius: 8px;
-  border: 1px solid rgba(16, 24, 40, 0.06);
-  background: var(--color-background);
-  font-size: 14px;
-  box-sizing: border-box;
-  width: 100%;
-  border-color: var(--color-border);
-  color: var(--color-text);
-  cursor: pointer;
-}
-
-/* Responsive: stack on smaller screens */
-@media (max-width: 720px) {
-  .wrapper {
-    padding: 10px;
-  }
-  .rangeRow {
-    gap: 8px;
-  }
-  .label {
-    font-size: 13px;
-  }
-  .samplingWrap {
-    min-width: 140px;
-  }
-}
-
-@media (max-width: 520px) {
-  .wrapper {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 10px;
-  }
-
-  .label {
-    order: 0;
-  }
-  .rangeRow {
-    flex-direction: row;
-    flex-wrap: wrap;
-    align-items: flex-start;
-  }
-
-  .dateWrap {
-    flex: 1 1 48%;
-  }
-  .sepWrap {
-    display: none;
-  }
-
-  .samplingWrap {
-    flex: 1 1 100%;
-    min-width: 0;
-  }
-}
-
-@media (max-width: 360px) {
-  .dateWrap {
-    flex: 1 1 100%;
-  }
-}

package/src/components/PeriodRange/PeriodRange.stories.tsx

@@ -1,66 +0,0 @@
-// components/PeriodRange/PeriodRange.stories.tsx
-import type { Meta, StoryObj } from '@storybook/react';
-import PeriodRange from './PeriodRange';
-
-const meta: Meta<typeof PeriodRange> = {
-  title: 'Components/PeriodRange',
-  component: PeriodRange,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      source: {
-        language: 'tsx',
-      },
-    },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof PeriodRange>;
-
-const DefaultCode = `<PeriodRange
-  start={new Date(new Date().setDate(new Date().getDate() - 7)).toISOString().slice(0, 10)}
-  end={new Date().toISOString().slice(0, 10)}
-  onChange={(range) => console.log('range', range)}
-  onSamplingChange={(sampling) => console.log('sampling', sampling)}
-/>`;
-
-export const Default: Story = {
-  args: {
-    start: new Date(new Date().setDate(new Date().getDate() - 7)).toISOString().slice(0, 10),
-    end: new Date().toISOString().slice(0, 10),
-    onChange: (r: any) => console.log('range', r),
-    onSamplingChange: (s: any) => console.log('sampling', s),
-  },
-  render: (args) => (
-    <div style={{ padding: 24, background: '#f8fafc' }}>
-      <PeriodRange {...args} />
-    </div>
-  ),
-  parameters: {
-    docs: {
-      source: {
-        code: DefaultCode,
-      },
-    },
-  },
-};
-
-const CompactCode = `<PeriodRange />`;
-
-export const Compact: Story = {
-  args: {},
-  render: (args) => (
-    <div style={{ padding: 24 }}>
-      <PeriodRange {...args} />
-    </div>
-  ),
-  parameters: {
-    docs: {
-      source: {
-        code: CompactCode,
-      },
-    },
-  },
-};