@tsiky/components-r19 1.0.0

package/src/components/BandChart/index.tsx

@@ -0,0 +1,282 @@
+import React from 'react';
+import Chart from 'react-apexcharts';
+
+export interface BandChartData {
+  labels: string[];
+  main: number[];
+  upper: number[];
+  lower: number[];
+  histogram?: number[];
+}
+
+export type DisplayConditionFn = (data: BandChartData) => boolean;
+
+export interface RangeBandConfig {
+  id: string;
+  lowerKey: keyof BandChartData;
+  upperKey: keyof BandChartData;
+  visible?: boolean;
+  color?: string;
+  opacity?: number;
+}
+
+export interface LineConfig {
+  id: string;
+  key: keyof BandChartData;
+  label?: string;
+  visible?: boolean;
+  color?: string;
+  width?: number;
+  dash?: number;
+}
+
+export interface BubbleConfig {
+  visible?: boolean;
+  values?: number[];
+  color?: string;
+  size?: number;
+}
+
+export interface BandChartConfig {
+  rangeBands?: RangeBandConfig[];
+  lines?: LineConfig[];
+  showHistogram?: boolean;
+  histogramKey?: keyof BandChartData;
+  histogramColor?: string;
+  bubble?: BubbleConfig;
+  displayCondition?: DisplayConditionFn | null;
+  responsive?: boolean;
+}
+
+interface Props {
+  data: BandChartData;
+  config?: BandChartConfig;
+  height?: number;
+}
+
+const defaultConfig: BandChartConfig = {
+  rangeBands: [
+    {
+      id: 'band1',
+      lowerKey: 'lower',
+      upperKey: 'upper',
+      visible: true,
+      color: '#cbd7ea',
+      opacity: 0.22,
+    },
+  ],
+  lines: [
+    { id: 'upper', key: 'upper', label: 'Max', visible: true, color: '#082b4d', width: 1, dash: 0 },
+    {
+      id: 'main',
+      key: 'main',
+      label: 'Predictions',
+      visible: true,
+      color: '#6fb0ff',
+      width: 1.5,
+      dash: 0,
+    },
+    { id: 'lower', key: 'lower', label: 'Min', visible: true, color: '#082b4d', width: 1, dash: 6 },
+  ],
+  showHistogram: true,
+  histogramKey: 'histogram',
+  histogramColor: '#6f6f6f',
+  bubble: { visible: true, values: [], color: '#0b66ff', size: 6 },
+  displayCondition: null,
+  responsive: true,
+};
+
+export const BandChart: React.FC<Props> = ({ data, config = defaultConfig, height = 350 }) => {
+  // Merge defaults (shallow)
+  const cfg: BandChartConfig = { ...defaultConfig, ...config };
+
+  // Display condition
+  if (cfg.displayCondition && !cfg.displayCondition(data)) {
+    return <div style={{ padding: 12 }}>Chart hidden by displayCondition</div>;
+  }
+
+  // Prepare containers used to build Apex options
+  const series: any[] = [];
+  const strokeWidths: number[] = [];
+  const strokeDashArray: number[] = [];
+  const colors: string[] = [];
+  const fillTypes: string[] = [];
+  const fillOpacities: number[] = [];
+
+  // 1) Lines (upper/main/lower)
+  if (cfg.lines) {
+    cfg.lines.forEach((ln) => {
+      if (!ln.visible) return;
+      const arr = data[ln.key] as unknown as number[] | undefined;
+      if (!arr) return;
+
+      series.push({
+        name: ln.id,
+        type: 'line',
+        data: arr.map((v, i) => ({ x: data.labels[i], y: v })),
+      });
+
+      strokeWidths.push(typeof ln.width === 'number' ? ln.width : 2);
+      strokeDashArray.push(typeof ln.dash === 'number' ? ln.dash : 0);
+      colors.push(ln.color ?? '#003366');
+      fillTypes.push('solid');
+      fillOpacities.push(1);
+    });
+  }
+
+  // 2) Scatter (bubble) series - markers will be created via markers.discrete later
+  if (cfg.bubble && cfg.bubble.visible && cfg.bubble.values && cfg.bubble.values.length > 0) {
+    const bvals = cfg.bubble.values;
+    series.push({
+      name: 'Correct Predictions',
+      type: 'scatter',
+      data: bvals.map((v, i) => ({ x: data.labels[i], y: v })),
+    });
+    strokeWidths.push(0);
+    strokeDashArray.push(0);
+    colors.push(cfg.bubble.color ?? '#0b66ff');
+    fillTypes.push('solid');
+    fillOpacities.push(1);
+  }
+
+  // compute scatter series index (used for markers)
+  const scatterSeriesIndex = series.findIndex((s) => s.type === 'scatter');
+
+  // Build markers.discrete for bubble coloring relative to main
+  const markersDiscrete: any[] = [];
+  if (scatterSeriesIndex >= 0 && cfg.bubble && cfg.bubble.values) {
+    const bvals = cfg.bubble.values;
+    const mainArr = data.main as unknown as number[] | undefined;
+    const size = cfg.bubble.size ?? 6;
+
+    for (let i = 0; i < bvals.length; i++) {
+      const b = bvals[i];
+      const mainVal = mainArr && mainArr[i] !== undefined ? mainArr[i] : null;
+
+      // color logic: > main => red, < main => green, == => blue (fallback)
+      let fillColor = '#0b66ff'; // equal/fallback
+      if (mainVal !== null) {
+        if (b > mainVal)
+          fillColor = '#ff4d4f'; // red
+        else if (b < mainVal)
+          fillColor = '#28a745'; // green
+        else fillColor = '#0b66ff'; // equal
+      } else {
+        // no main value -> fallback to bubble color or blue
+        fillColor = cfg.bubble.color ?? '#0b66ff';
+      }
+
+      markersDiscrete.push({
+        seriesIndex: scatterSeriesIndex,
+        dataPointIndex: i,
+        fillColor,
+        strokeColor: '#ffffff',
+        size,
+      });
+    }
+  }
+
+  // 3) Histogram / column
+  if (cfg.showHistogram && cfg.histogramKey) {
+    const hArr = data[cfg.histogramKey] as unknown as number[] | undefined;
+    if (hArr) {
+      series.push({
+        name: 'Real',
+        type: 'column',
+        data: hArr.map((v, i) => ({ x: data.labels[i], y: v })),
+      });
+      strokeWidths.push(0);
+      strokeDashArray.push(0);
+      colors.push(cfg.histogramColor ?? '#888888');
+      fillTypes.push('solid');
+      fillOpacities.push(0.4);
+    }
+  }
+
+  // 4) Range bands (rangeArea)
+  if (cfg.rangeBands) {
+    cfg.rangeBands.forEach((rb) => {
+      if (!rb.visible) return;
+      const lowerArr = data[rb.lowerKey] as unknown as number[] | undefined;
+      const upperArr = data[rb.upperKey] as unknown as number[] | undefined;
+      if (!lowerArr || !upperArr) return;
+
+      series.push({
+        name: rb.id,
+        type: 'rangeArea',
+        data: upperArr.map((u, i) => ({ x: data.labels[i], y: [lowerArr[i], u] })),
+      });
+
+      // band: no stroke by default, filled with gradient
+      strokeWidths.push(0);
+      strokeDashArray.push(0);
+      colors.push(rb.color ?? '#b0c4de');
+      fillTypes.push('gradient');
+      fillOpacities.push(typeof rb.opacity === 'number' ? rb.opacity : 0.25);
+    });
+  }
+
+  // Apex options
+  const options: ApexCharts.ApexOptions = {
+    chart: {
+      type: 'rangeArea',
+      toolbar: { show: false, offsetY: -20 },
+      height,
+      zoom: { enabled: true, type: 'x', autoScaleYaxis: true },
+      animations: { enabled: true },
+    },
+    stroke: {
+      curve: 'smooth',
+      width: strokeWidths,
+      dashArray: strokeDashArray,
+    },
+    colors,
+    fill: {
+      type: fillTypes,
+      opacity: fillOpacities,
+      gradient: {
+        type: 'vertical',
+        shadeIntensity: 0.4,
+        inverseColors: false,
+        opacityFrom: Math.max(...fillOpacities),
+        opacityTo: Math.min(...fillOpacities),
+        stops: [0, 100],
+      },
+    },
+    xaxis: {
+      categories: data.labels,
+      tickPlacement: 'on',
+    },
+    yaxis: { min: 0, tickAmount: 6 },
+    dataLabels: { enabled: false },
+    legend: { show: true, position: 'top' },
+    grid: { borderColor: '#e0e0e0' },
+    markers: {
+      shape: 'circle', // default shape
+      size: 0,
+      discrete: markersDiscrete,
+    },
+    tooltip: {
+      shared: true,
+      intersect: false,
+      y: {
+        formatter: (val: any) => (typeof val === 'number' ? `${val}` : String(val)),
+      },
+    },
+    responsive: cfg.responsive
+      ? [
+          {
+            breakpoint: 768,
+            options: {
+              chart: { height: Math.max(250, Math.round(height * 0.6)), width: 350 },
+              legend: { position: 'top' },
+            },
+          },
+        ]
+      : undefined,
+  };
+
+  return <Chart options={options} series={series} type='rangeArea' height={height} width={500} />;
+};
+
+export default BandChart;

package/src/components/Button/Button.module.css

@@ -0,0 +1,165 @@
+/* Button.module.css */
+.button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  cursor: pointer;
+  transition:
+    border-color 0.25s,
+    background-color 0.25s,
+    color 0.25s;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+/* Variants */
+.primary {
+  background-color: #646cff;
+  color: white;
+}
+
+.primary:hover {
+  background-color: #747bff;
+}
+
+.secondary {
+  background-color: #71717a;
+  color: white;
+}
+
+.secondary:hover {
+  background-color: #81818a;
+}
+
+.accent {
+  background-color: #ec4899;
+  color: white;
+}
+
+.accent:hover {
+  background-color: #f472b6;
+}
+
+.outline {
+  background-color: transparent;
+  border: 1px solid currentColor;
+}
+
+.outline:hover {
+  background-color: rgba(100, 108, 255, 0.1);
+}
+
+.success {
+  background-color: #22c55e;
+  color: white;
+}
+
+.success:hover {
+  background-color: #4ade80;
+}
+
+.danger {
+  background-color: #ef4444;
+  color: white;
+}
+
+.danger:hover {
+  background-color: #f87171;
+}
+
+.warning {
+  background-color: #f59e0b;
+  color: white;
+}
+
+.warning:hover {
+  background-color: #fbbf24;
+}
+
+.info {
+  background-color: #3b82f6;
+  color: white;
+}
+
+.info:hover {
+  background-color: #60a5fa;
+}
+
+/* Sizes */
+.sm {
+  padding: 0.4em 0.8em;
+  font-size: 0.875em;
+}
+
+.md {
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+}
+
+.lg {
+  padding: 0.8em 1.6em;
+  font-size: 1.125em;
+}
+
+/* Styles pour le mode light */
+@media (prefers-color-scheme: light) {
+  .button {
+    background-color: #f9f9f9;
+    color: #213547;
+  }
+
+  .outline {
+    color: #646cff;
+  }
+
+  .outline:hover {
+    background-color: rgba(100, 108, 255, 0.1);
+  }
+}
+
+/* État focus pour l'accessibilité */
+.button:focus,
+.button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+/* État disabled */
+.button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.storybook-button {
+  display: inline-block;
+  cursor: pointer;
+  border: 0;
+  border-radius: 3em;
+  font-weight: 700;
+  line-height: 1;
+}
+.storybook-button--primary {
+  background-color: #555ab9;
+  color: white;
+}
+.storybook-button--secondary {
+  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
+  background-color: transparent;
+  color: #333;
+}
+.storybook-button--small {
+  padding: 10px 16px;
+  font-size: 12px;
+}
+.storybook-button--medium {
+  padding: 11px 20px;
+  font-size: 14px;
+}
+.storybook-button--large {
+  padding: 12px 24px;
+  font-size: 16px;
+}

package/src/components/Button/Button.stories.ts

@@ -0,0 +1,132 @@
+import React from 'react';
+// eslint-disable-next-line storybook/no-renderer-packages
+import type { Meta, StoryObj } from '@storybook/react';
+import Button from './Button';
+
+// Définir le type des propriétés du bouton pour plus de clarté
+type ButtonProps = React.ComponentProps<typeof Button>;
+
+const meta: Meta<ButtonProps> = {
+  title: 'Components/Button',
+  component: Button,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: { type: 'select' },
+      options: [
+        'primary',
+        'secondary',
+        'accent',
+        'outline',
+        'success',
+        'danger',
+        'warning',
+        'info',
+      ],
+    },
+    size: {
+      control: { type: 'radio' },
+      options: ['sm', 'md', 'lg'],
+    },
+    disabled: {
+      control: { type: 'boolean' },
+    },
+  },
+  args: {
+    children: 'Button',
+  },
+};
+
+export default meta;
+type Story = StoryObj<ButtonProps>;
+
+// Stories de base pour chaque variant
+export const Primary: Story = {
+  args: {
+    variant: 'primary',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    variant: 'secondary',
+  },
+};
+
+export const Accent: Story = {
+  args: {
+    variant: 'accent',
+  },
+};
+
+export const Outline: Story = {
+  args: {
+    variant: 'outline',
+  },
+};
+
+export const Success: Story = {
+  args: {
+    variant: 'success',
+  },
+};
+
+export const Danger: Story = {
+  args: {
+    variant: 'danger',
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    variant: 'warning',
+  },
+};
+
+export const Info: Story = {
+  args: {
+    variant: 'info',
+  },
+};
+
+// Stories pour les différentes tailles
+export const Small: Story = {
+  args: {
+    size: 'sm',
+    variant: 'primary',
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    size: 'md',
+    variant: 'primary',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'lg',
+    variant: 'primary',
+  },
+};
+
+// Story pour l'état désactivé
+export const Disabled: Story = {
+  args: {
+    variant: 'primary',
+    disabled: true,
+  },
+};
+
+// Story avec un contenu personnalisé - version sans JSX
+export const WithIcon: Story = {
+  render: (args) =>
+    React.createElement(Button, args, React.createElement('span', null, '⭐'), ' Button with icon'),
+  args: {
+    variant: 'primary',
+  },
+};

package/src/components/Button/Button.tsx

@@ -0,0 +1,55 @@
+// Button.tsx
+import React from 'react';
+import styles from './Button.module.css';
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?:
+    | 'primary'
+    | 'secondary'
+    | 'accent'
+    | 'outline'
+    | 'success'
+    | 'danger'
+    | 'warning'
+    | 'info';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const Button: React.FC<ButtonProps> = ({
+  children,
+  variant = 'primary',
+  size = 'md',
+  className = '',
+  type = 'button',
+  ...props
+}) => {
+  const variantClasses: Record<string, string> = {
+    primary: styles.primary,
+    secondary: styles.secondary,
+    accent: styles.accent,
+    outline: styles.outline,
+    success: styles.success,
+    danger: styles.danger,
+    warning: styles.warning,
+    info: styles.info,
+  };
+
+  const sizeClasses: Record<string, string> = {
+    sm: styles.sm,
+    md: styles.md,
+    lg: styles.lg,
+  };
+
+  const classes = [styles.button, variantClasses[variant] ?? '', sizeClasses[size] ?? '', className]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <button type={type} className={classes} {...props}>
+      {children}
+    </button>
+  );
+};
+
+export default Button;

package/src/components/Button/button.css

@@ -0,0 +1,29 @@
+.storybook-button {
+  display: inline-block;
+  cursor: pointer;
+  border: 0;
+  border-radius: 3em;
+  font-weight: 700;
+  line-height: 1;
+}
+.storybook-button--primary {
+  background-color: #555ab9;
+  color: white;
+}
+.storybook-button--secondary {
+  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
+  background-color: transparent;
+  color: #333;
+}
+.storybook-button--small {
+  padding: 10px 16px;
+  font-size: 12px;
+}
+.storybook-button--medium {
+  padding: 11px 20px;
+  font-size: 14px;
+}
+.storybook-button--large {
+  padding: 12px 24px;
+  font-size: 16px;
+}

package/src/components/Button/index.ts

@@ -0,0 +1,2 @@
+export { default as Button } from './Button';
+export type { ButtonProps } from './Button';