@tsiky/components-r19 1.3.0 → 1.3.1

package/src/components/AnnouncementPanel/ListContentContainer.stories.tsx

@@ -1,212 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { ArrowUp, ArrowDown, TrendingUp, Users, Star } from 'lucide-react';
-import { ListContentContainer } from './ListContentContainer';
-import { SimpleListBox } from './ListBox/SimpleListBox';
-import { CounterListBox } from './ListBox/CounterListBox';
-import { TrendListBox } from './ListBox/TrendListBox';
-
-const meta: Meta<typeof ListContentContainer> = {
-  title: 'Components/ListContentContainer',
-  component: ListContentContainer,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          'A horizontal container for grouping list components with consistent spacing and background.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    gap: {
-      control: { type: 'text' },
-      description: 'Space between items (e.g., "1rem", "10px")',
-    },
-    background: {
-      control: { type: 'color' },
-      description: 'Background color of the container',
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    gap: '1rem',
-    background: '#008FBB',
-  },
-  render: (args) => (
-    <ListContentContainer {...args} style={{ width: 520 }}>
-      <SimpleListBox title='Admissions' data={['63 Patients']} />
-      <CounterListBox title='Summary' data={[['63', 'Patients']]} badgeColor='#06b6d4' />
-      <TrendListBox
-        title='Trend'
-        items={[
-          { label: 'MED', value: '+3', delta: 3, icon: <ArrowUp size={16} /> },
-          { label: 'SURG', value: '-2', delta: -2, icon: <ArrowDown size={16} /> },
-        ]}
-      />
-    </ListContentContainer>
-  ),
-};
-
-export const HealthcareDashboard: Story = {
-  name: 'Healthcare Dashboard',
-  args: {
-    background: '#0369a1',
-    gap: '0.8rem',
-  },
-  render: (args) => (
-    <ListContentContainer {...args} style={{ width: 600 }}>
-      <SimpleListBox title='Operating Rooms' data={['4 Occupied', '2 Available']} />
-      <CounterListBox title='Patients' data={[['128', 'Hospitalized']]} badgeColor='#dc2626' />
-      <TrendListBox
-        title='Admissions'
-        items={[
-          { label: 'Emergency', value: '+8', delta: 8, icon: <ArrowUp size={16} /> },
-          { label: 'Scheduled', value: '+3', delta: 3, icon: <ArrowUp size={16} /> },
-        ]}
-      />
-      <SimpleListBox title='Staff' data={['18 Doctors', '32 Nurses']} />
-    </ListContentContainer>
-  ),
-};
-
-export const BusinessMetrics: Story = {
-  name: 'Business Metrics',
-  args: {
-    background: '#059669',
-    gap: '1rem',
-  },
-  render: (args) => (
-    <ListContentContainer {...args} style={{ width: 650 }}>
-      <TrendListBox
-        title='Performance'
-        items={[
-          { label: 'Revenue', value: '€12.5K', delta: 12, icon: <TrendingUp size={16} /> },
-          { label: 'Users', value: '+42', delta: 8, icon: <Users size={16} /> },
-          { label: 'Growth', value: '+8.1%', delta: 8.1, icon: <ArrowUp size={16} /> },
-        ]}
-      />
-      <CounterListBox
-        title='Monthly Summary'
-        data={[
-          ['156', 'Orders Completed'],
-          ['€2.4K', 'Revenue Generated'],
-          ['24', 'Pending Orders'],
-        ]}
-        badgeColor='#f59e0b'
-      />
-      <SimpleListBox
-        title='Quick Stats'
-        data={[
-          ['Conversion Rate', '3.2%'],
-          ['Customer Satisfaction', '4.8/5'],
-        ]}
-      />
-    </ListContentContainer>
-  ),
-};
-
-export const RatingSystem: Story = {
-  name: 'Rating System',
-  args: {
-    background: '#7c3aed',
-    gap: '1.2rem',
-  },
-  render: (args) => (
-    <ListContentContainer {...args} style={{ width: 580 }}>
-      <TrendListBox
-        title='Quality Ratings'
-        items={[
-          {
-            label: 'Service',
-            value: '4.8/5',
-            delta: 0.2,
-            icon: <Star size={16} color='#f59e0b' fill='#f59e0b' />,
-          },
-          {
-            label: 'Response',
-            value: '4.5/5',
-            delta: -0.1,
-            icon: <Star size={16} color='#f59e0b' fill='#f59e0b' />,
-          },
-          {
-            label: 'Support',
-            value: '4.9/5',
-            delta: 0.3,
-            icon: <Star size={16} color='#f59e0b' fill='#f59e0b' />,
-          },
-        ]}
-      />
-      <CounterListBox
-        title='Review Summary'
-        data={[
-          ['156', '5-Star Reviews'],
-          ['24', '4-Star Reviews'],
-          ['8', '3-Star Reviews'],
-        ]}
-        badgeColor='#ec4899'
-      />
-    </ListContentContainer>
-  ),
-};
-
-export const SystemMonitoring: Story = {
-  name: 'System Monitoring',
-  args: {
-    background: '#dc2626',
-    gap: '0.8rem',
-  },
-  render: (args) => (
-    <ListContentContainer {...args} style={{ width: 550 }}>
-      <TrendListBox
-        title='System Metrics'
-        items={[
-          { label: 'CPU', value: '68%', delta: 2, icon: <ArrowUp size={16} /> },
-          { label: 'Memory', value: '45%', delta: -5, icon: <ArrowDown size={16} /> },
-          { label: 'Disk', value: '82%', delta: 1, icon: <ArrowUp size={16} /> },
-        ]}
-      />
-      <CounterListBox
-        title='Alerts'
-        data={[
-          ['3', 'Critical'],
-          ['7', 'Warning'],
-          ['12', 'Info'],
-        ]}
-        badgeColor='#ef4444'
-      />
-      <SimpleListBox title='Status' data={['All systems operational', 'Last updated: 2 min ago']} />
-    </ListContentContainer>
-  ),
-};
-
-export const CustomGap: Story = {
-  name: 'Custom Gap Sizes',
-  args: {
-    background: '#f59e0b',
-  },
-  render: (args) => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
-      <div>
-        <h4 style={{ marginBottom: '0.5rem' }}>Small Gap (0.5rem)</h4>
-        <ListContentContainer {...args} gap='0.5rem' style={{ width: 500 }}>
-          <SimpleListBox title='Compact' data={['Item 1', 'Item 2']} />
-          <CounterListBox title='Counters' data={[['1', 'First']]} badgeColor='#3b82f6' />
-        </ListContentContainer>
-      </div>
-
-      <div>
-        <h4 style={{ marginBottom: '0.5rem' }}>Large Gap (2rem)</h4>
-        <ListContentContainer {...args} gap='2rem' style={{ width: 500 }}>
-          <SimpleListBox title='Spacious' data={['Item 1', 'Item 2']} />
-          <CounterListBox title='Counters' data={[['1', 'First']]} badgeColor='#3b82f6' />
-        </ListContentContainer>
-      </div>
-    </div>
-  ),
-};

package/src/components/AnnouncementPanel/ListContentContainer.tsx

@@ -1,33 +0,0 @@
-import React from 'react';
-import './ListContentContainer.css';
-
-export type ListContentContainerProps = {
-  className?: string;
-  style?: React.CSSProperties;
-  children?: React.ReactNode; // normally SimpleListBox/CounterListBox/TrendListBox
-  gap?: string;
-  background?: string;
-};
-
-export const ListContentContainer: React.FC<ListContentContainerProps> = ({
-  className = '',
-  style = {},
-  children,
-  gap = '1rem',
-  background = '#D9EEF5',
-}) => {
-  return (
-    <div
-      className={`lcc-root ${className}`}
-      style={{
-        background,
-        ...style,
-        ['--lcc-gap' as any]: gap,
-      }}
-    >
-      {React.Children.map(children, (child) => (
-        <div className='lcc-cell'>{child}</div>
-      ))}
-    </div>
-  );
-};

package/src/components/BandChart/index.tsx

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

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