@tsiky/components-r19 1.1.0 → 1.3.0

package/src/components/AnnouncementPanel/ListContentContainer.tsx

@@ -1,33 +1,33 @@
-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>
-  );
-};
+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/AnnouncementPanel/index.ts

@@ -1,3 +1,3 @@
-export * from './ListBox';
-export * from './FlexRowContainer';
-export * from './ListContentContainer';
+export * from './ListBox';
+export * from './FlexRowContainer';
+export * from './ListContentContainer';

package/src/components/Charts/area-chart-admission/AreaChartAdmission.tsx

@@ -15,7 +15,13 @@ interface ChartProps {
 
 const defaultColors = ['#e24b33', '#e2b23a', '#6feff0', '#2f5be8'];
 
-const Area: React.FC<ChartProps> = ({ categories, series, height = 350, title = 'Admissions', draggable = false }) => {
+const Area: React.FC<ChartProps> = ({
+  categories,
+  series,
+  height = 350,
+  title = 'Admissions',
+  draggable = false,
+}) => {
   const maxStack = Math.max(
     ...categories.map((_, i) => series.reduce((s, ser) => s + (ser.data[i] ?? 0), 0))
   );

package/src/components/Charts/bar-chart/BarChart.tsx

@@ -37,7 +37,11 @@ type HBarSeries = ReadonlyArray<{
   data: ReadonlyArray<number>;
 }>;
 
-const HorizontalBarChart: React.FC<Props> = ({ data, config = defaultConfig, draggable = false }) => {
+const HorizontalBarChart: React.FC<Props> = ({
+  data,
+  config = defaultConfig,
+  draggable = false,
+}) => {
   const cfg: HorizontalBarConfig = { ...defaultConfig, ...config };
 
   const labels = data.labels ?? [];
@@ -137,7 +141,7 @@ const HorizontalBarChart: React.FC<Props> = ({ data, config = defaultConfig, dra
           series={series as unknown as ApexOptions['series']}
           type='bar'
           height={cfg.height}
-          width="100%"
+          width='100%'
         />
       </div>
 

package/src/components/Charts/boxplot-chart/BoxPlotChart.tsx

@@ -1,114 +1,114 @@
-import React from 'react';
-import Chart from 'react-apexcharts';
-import type { ApexOptions } from 'apexcharts';
-
-export interface BoxPoint {
-  x: string | number;
-  y: [number, number, number, number, number]; // [min, q1, median, q3, max]
-}
-
-export interface BoxPlotData {
-  series: BoxPoint[];
-}
-
-export interface BoxPlotConfig {
-  colorUpper?: string;
-  colorLower?: string;
-  color?: string;
-  showOutliers?: boolean;
-  tooltipFormatter?: (val: number) => string;
-  height?: number;
-  responsive?: boolean;
-}
-
-interface Props {
-  data: BoxPlotData;
-  config?: BoxPlotConfig;
-}
-
-const defaultConfig: BoxPlotConfig = {
-  colorUpper: '#2db85bff',
-  colorLower: '#b3761bff',
-  color: '#5f9ec4',
-  showOutliers: true,
-  tooltipFormatter: (v) => String(v),
-  height: 420,
-  responsive: true,
-};
-
-/** Série locale pour boxPlot */
-type BoxPlotSeries = ReadonlyArray<{
-  name: string;
-  data: ReadonlyArray<{ x: string | number; y: [number, number, number, number, number] }>;
-}>;
-
-const BoxPlotChart: React.FC<Props> = ({ data, config = defaultConfig }) => {
-  const cfg: BoxPlotConfig = { ...defaultConfig, ...config };
-
-  const seriesPoints = Array.isArray(data?.series) ? data.series : [];
-  const apexSeries: BoxPlotSeries = [
-    {
-      name: 'Distribution',
-      data: seriesPoints.map((p) => ({ x: p.x, y: p.y })),
-    },
-  ];
-  const options: ApexOptions = {
-    chart: {
-      foreColor: 'var(--color-text)',
-      type: 'boxPlot',
-      toolbar: { show: false },
-      height: cfg.height,
-    },
-    yaxis: {
-      tickAmount: 10,
-      labels: {
-        formatter: function (val: number) {
-          return val.toFixed(0);
-        },
-      },
-    },
-    plotOptions: {
-      boxPlot: {
-        colors: {
-          upper: cfg.colorUpper,
-          lower: cfg.colorLower,
-        },
-      },
-    },
-    stroke: { show: true, width: 1, colors: ['var(--color-secondary)'] },
-    markers: { size: 0 },
-    tooltip: {
-      shared: false,
-      y: {
-        formatter: (val: number | string | unknown) => {
-          if (typeof val === 'number') return cfg.tooltipFormatter!(val);
-          return String(val);
-        },
-      },
-    },
-    grid: { borderColor: '#e6e6e6' },
-    dataLabels: { enabled: false },
-    legend: { show: false },
-    responsive: cfg.responsive
-      ? [
-          // {
-          //   breakpoint: 768,
-          //   options: {
-          //     chart: { height: Math.max(220, Math.round((cfg.height ?? 380) * 0.6)) },
-          //   },
-          // },
-        ]
-      : undefined,
-  };
-
-  return (
-    <Chart
-      options={options}
-      series={apexSeries as unknown as ApexOptions['series']}
-      type='boxPlot'
-      height={cfg.height}
-    />
-  );
-};
-
-export default BoxPlotChart;
+import React from 'react';
+import Chart from 'react-apexcharts';
+import type { ApexOptions } from 'apexcharts';
+
+export interface BoxPoint {
+  x: string | number;
+  y: [number, number, number, number, number]; // [min, q1, median, q3, max]
+}
+
+export interface BoxPlotData {
+  series: BoxPoint[];
+}
+
+export interface BoxPlotConfig {
+  colorUpper?: string;
+  colorLower?: string;
+  color?: string;
+  showOutliers?: boolean;
+  tooltipFormatter?: (val: number) => string;
+  height?: number;
+  responsive?: boolean;
+}
+
+interface Props {
+  data: BoxPlotData;
+  config?: BoxPlotConfig;
+}
+
+const defaultConfig: BoxPlotConfig = {
+  colorUpper: '#2db85bff',
+  colorLower: '#b3761bff',
+  color: '#5f9ec4',
+  showOutliers: true,
+  tooltipFormatter: (v) => String(v),
+  height: 420,
+  responsive: true,
+};
+
+/** Série locale pour boxPlot */
+type BoxPlotSeries = ReadonlyArray<{
+  name: string;
+  data: ReadonlyArray<{ x: string | number; y: [number, number, number, number, number] }>;
+}>;
+
+const BoxPlotChart: React.FC<Props> = ({ data, config = defaultConfig }) => {
+  const cfg: BoxPlotConfig = { ...defaultConfig, ...config };
+
+  const seriesPoints = Array.isArray(data?.series) ? data.series : [];
+  const apexSeries: BoxPlotSeries = [
+    {
+      name: 'Distribution',
+      data: seriesPoints.map((p) => ({ x: p.x, y: p.y })),
+    },
+  ];
+  const options: ApexOptions = {
+    chart: {
+      foreColor: 'var(--color-text)',
+      type: 'boxPlot',
+      toolbar: { show: false },
+      height: cfg.height,
+    },
+    yaxis: {
+      tickAmount: 10,
+      labels: {
+        formatter: function (val: number) {
+          return val.toFixed(0);
+        },
+      },
+    },
+    plotOptions: {
+      boxPlot: {
+        colors: {
+          upper: cfg.colorUpper,
+          lower: cfg.colorLower,
+        },
+      },
+    },
+    stroke: { show: true, width: 1, colors: ['var(--color-secondary)'] },
+    markers: { size: 0 },
+    tooltip: {
+      shared: false,
+      y: {
+        formatter: (val: number | string | unknown) => {
+          if (typeof val === 'number') return cfg.tooltipFormatter!(val);
+          return String(val);
+        },
+      },
+    },
+    grid: { borderColor: '#e6e6e6' },
+    dataLabels: { enabled: false },
+    legend: { show: false },
+    responsive: cfg.responsive
+      ? [
+          // {
+          //   breakpoint: 768,
+          //   options: {
+          //     chart: { height: Math.max(220, Math.round((cfg.height ?? 380) * 0.6)) },
+          //   },
+          // },
+        ]
+      : undefined,
+  };
+
+  return (
+    <Chart
+      options={options}
+      series={apexSeries as unknown as ApexOptions['series']}
+      type='boxPlot'
+      height={cfg.height}
+    />
+  );
+};
+
+export default BoxPlotChart;

package/src/components/Charts/mixed-chart/MixedChart.tsx

@@ -670,7 +670,7 @@ const MixedChart: React.FC<Props> = ({
           key={renderKey} // force remount si besoin
           options={options}
           series={series as unknown as ApexOptions['series']}
-          type="line"
+          type='line'
           height={height}
         />
       )}

package/src/components/Charts/sankey-adaptation/sankey.tsx

@@ -1,70 +1,70 @@
-// MySankeyChart.tsx
-
-import React from 'react';
-import { ResponsiveSankey } from '@nivo/sankey';
-import type { SankeyDataProps } from '@nivo/sankey';
-// Définissez vos données avec le type approprié pour une meilleure intégrité
-const data: SankeyDataProps = {
-  nodes: [
-    { id: 'start', color: '#61cdbb' },
-    { id: 'process_a', color: '#97e6a6' },
-    { id: 'process_b', color: '#e8c1a0' },
-    { id: 'end_result', color: '#f1e15b' },
-  ],
-  links: [
-    { source: 'start', target: 'process_a', value: 100 },
-    { source: 'start', target: 'process_b', value: 50 },
-    { source: 'process_a', target: 'end_result', value: 75 },
-    { source: 'process_a', target: 'process_b', value: 25 },
-    { source: 'process_b', target: 'end_result', value: 75 },
-  ],
-};
-
-const MySankeyChart: React.FC = () => {
-  return (
-    <div style={{ height: '500px', width: '100%' }}>
-      <ResponsiveSankey
-        data={data}
-        margin={{ top: 10, right: 10, bottom: 10, left: 10 }}
-        align='justify'
-        colors={{ scheme: 'category10' }}
-        nodeOpacity={1}
-        nodeThickness={18}
-        nodeInnerPadding={8}
-        nodeSpacing={24}
-        linkOpacity={0.5}
-        nodeBorderWidth={0}
-        nodeBorderColor={{
-          from: 'color',
-          modifiers: [['darker', 0.8]],
-        }}
-        // Active l'affichage des étiquettes
-        enableLabels={true}
-        // Positionne les étiquettes à l'extérieur des nœuds
-        labelPosition='outside'
-        // Oriente les étiquettes horizontalement
-        labelOrientation='horizontal'
-        // Ajoute un espacement entre les nœuds et les étiquettes
-        labelPadding={16}
-        // Personnalise la couleur du texte des étiquettes
-        labelTextColor={{
-          from: 'color',
-          modifiers: [['darker', 1.5]],
-        }}
-        animate={true}
-        motionConfig='stiff'
-        // Personnalise les styles via le thème
-        theme={{
-          labels: {
-            text: {
-              fontSize: 14,
-              fontWeight: 'bold',
-            },
-          },
-        }}
-      />
-    </div>
-  );
-};
-
-export default MySankeyChart;
+// MySankeyChart.tsx
+
+import React from 'react';
+import { ResponsiveSankey } from '@nivo/sankey';
+import type { SankeyDataProps } from '@nivo/sankey';
+// Définissez vos données avec le type approprié pour une meilleure intégrité
+const data: SankeyDataProps = {
+  nodes: [
+    { id: 'start', color: '#61cdbb' },
+    { id: 'process_a', color: '#97e6a6' },
+    { id: 'process_b', color: '#e8c1a0' },
+    { id: 'end_result', color: '#f1e15b' },
+  ],
+  links: [
+    { source: 'start', target: 'process_a', value: 100 },
+    { source: 'start', target: 'process_b', value: 50 },
+    { source: 'process_a', target: 'end_result', value: 75 },
+    { source: 'process_a', target: 'process_b', value: 25 },
+    { source: 'process_b', target: 'end_result', value: 75 },
+  ],
+};
+
+const MySankeyChart: React.FC = () => {
+  return (
+    <div style={{ height: '500px', width: '100%' }}>
+      <ResponsiveSankey
+        data={data}
+        margin={{ top: 10, right: 10, bottom: 10, left: 10 }}
+        align='justify'
+        colors={{ scheme: 'category10' }}
+        nodeOpacity={1}
+        nodeThickness={18}
+        nodeInnerPadding={8}
+        nodeSpacing={24}
+        linkOpacity={0.5}
+        nodeBorderWidth={0}
+        nodeBorderColor={{
+          from: 'color',
+          modifiers: [['darker', 0.8]],
+        }}
+        // Active l'affichage des étiquettes
+        enableLabels={true}
+        // Positionne les étiquettes à l'extérieur des nœuds
+        labelPosition='outside'
+        // Oriente les étiquettes horizontalement
+        labelOrientation='horizontal'
+        // Ajoute un espacement entre les nœuds et les étiquettes
+        labelPadding={16}
+        // Personnalise la couleur du texte des étiquettes
+        labelTextColor={{
+          from: 'color',
+          modifiers: [['darker', 1.5]],
+        }}
+        animate={true}
+        motionConfig='stiff'
+        // Personnalise les styles via le thème
+        theme={{
+          labels: {
+            text: {
+              fontSize: 14,
+              fontWeight: 'bold',
+            },
+          },
+        }}
+      />
+    </div>
+  );
+};
+
+export default MySankeyChart;

package/src/components/DraggableSwitcher/DraggableSwitcherButton.tsx

@@ -1,58 +1,58 @@
-'use client';
-import { useEffect, useState } from 'react';
-import { useDraggableSwitcher } from './context/useDraggableSwitcher';
-import { Switcher } from '../Switcher/Switcher';
-
-export interface DraggableSwitcherButtonProps {
-  leftIcon?: string;
-  rightIcon?: string;
-  colors?: {
-    bg?: string;
-    activeBg?: string;
-    border?: string;
-    circle?: string;
-    icon?: string;
-    icon2?: string;
-  };
-  size?: number;
-}
-
-export const DraggableSwitcherButton = ({
-  leftIcon = 'Move',
-  rightIcon = 'MoveDiagonal',
-  colors = {
-    bg: '#e5e7eb',
-    activeBg: '#10b981',
-    border: '#ffffff',
-    circle: '#ffffff',
-    icon: '#10b981',
-    icon2: '#ffffff',
-  },
-  size = 24,
-}: DraggableSwitcherButtonProps) => {
-  const { isDraggable, switchDraggable } = useDraggableSwitcher();
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  if (!mounted) return null;
-
-  const handleToggle = (checked: boolean) => {
-    switchDraggable(checked);
-  };
-
-  return (
-    <Switcher
-      leftIcon={leftIcon}
-      rightIcon={rightIcon}
-      checked={isDraggable}
-      onToggle={handleToggle}
-      colors={colors}
-      size={size}
-    />
-  );
-};
-
-export default DraggableSwitcherButton;
+'use client';
+import { useEffect, useState } from 'react';
+import { useDraggableSwitcher } from './context/useDraggableSwitcher';
+import { Switcher } from '../Switcher/Switcher';
+
+export interface DraggableSwitcherButtonProps {
+  leftIcon?: string;
+  rightIcon?: string;
+  colors?: {
+    bg?: string;
+    activeBg?: string;
+    border?: string;
+    circle?: string;
+    icon?: string;
+    icon2?: string;
+  };
+  size?: number;
+}
+
+export const DraggableSwitcherButton = ({
+  leftIcon = 'Move',
+  rightIcon = 'MoveDiagonal',
+  colors = {
+    bg: '#e5e7eb',
+    activeBg: '#10b981',
+    border: '#ffffff',
+    circle: '#ffffff',
+    icon: '#10b981',
+    icon2: '#ffffff',
+  },
+  size = 24,
+}: DraggableSwitcherButtonProps) => {
+  const { isDraggable, switchDraggable } = useDraggableSwitcher();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) return null;
+
+  const handleToggle = (checked: boolean) => {
+    switchDraggable(checked);
+  };
+
+  return (
+    <Switcher
+      leftIcon={leftIcon}
+      rightIcon={rightIcon}
+      checked={isDraggable}
+      onToggle={handleToggle}
+      colors={colors}
+      size={size}
+    />
+  );
+};
+
+export default DraggableSwitcherButton;