@tsiky/components-r19 1.0.0 → 1.1.0

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

@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import Chart from 'react-apexcharts';
 import type { ApexOptions } from 'apexcharts';
+import { Move } from 'lucide-react';
 
 /* ---------- Types ---------- */
 export interface BandChartData {
@@ -59,6 +60,9 @@ interface Props {
   config?: BandChartConfig;
   height?: number;
   useOnGoing?: boolean;
+  draggable?: boolean;
+  tooltipEnabled?: boolean;
+  // zoomEnabled removed as separate prop — zoom/pan follow tooltipEnabled
 }
 
 /* ---------- Local series item types (compat Apex) ---------- */
@@ -140,7 +144,24 @@ const MixedChart: React.FC<Props> = ({
   config = defaultConfig,
   height = 350,
   useOnGoing,
+  draggable = false,
+  tooltipEnabled = true,
 }) => {
+  const [renderKey, setRenderKey] = useState(0);
+  const [loading, setLoading] = useState(false);
+
+  // Lorsque draggable passe de true → false, on force remount
+  useEffect(() => {
+    if (!draggable) {
+      setLoading(true);
+      const timeout = setTimeout(() => {
+        setRenderKey((k) => k + 1); // nouvelle key → remount Chart
+        setLoading(false);
+      }, 10); // très court délai pour permettre le placeholder
+      return () => clearTimeout(timeout);
+    }
+  }, [draggable]);
+
   // merge defaults and provided config
   const merged = { ...defaultConfig, ...config };
   // minimal override: if caller provided useOnGoing boolean, it forces merged.showOnGoing
@@ -480,9 +501,26 @@ const MixedChart: React.FC<Props> = ({
     chart: {
       foreColor: 'var(--color-text)',
       type: 'line',
-      toolbar: { show: false, offsetY: -20 },
+      toolbar: {
+        show: false,
+        offsetY: -20,
+        autoSelected: 'pan',
+        tools: {
+          download: false,
+          selection: true,
+          zoom: true,
+          zoomin: true,
+          zoomout: true,
+          pan: true,
+          reset: true,
+        },
+      },
       width: '100%',
-      zoom: { enabled: false, type: 'x', autoScaleYaxis: true },
+      zoom: {
+        enabled: tooltipEnabled,
+        type: 'x',
+        autoScaleYaxis: true,
+      },
       animations: {
         enabled: true,
         animateGradually: { enabled: true, delay: 80 },
@@ -525,6 +563,7 @@ const MixedChart: React.FC<Props> = ({
     // CUSTOM TOOLTIP: show only defined values, keep Real and OnGoing separate,
     // skip outlier points flagged _outside, skip column placeholder zeros
     tooltip: {
+      enabled: tooltipEnabled,
       shared: true,
       intersect: false,
       followCursor: true,
@@ -613,12 +652,29 @@ const MixedChart: React.FC<Props> = ({
   };
 
   return (
-    <Chart
-      options={options}
-      series={series as unknown as ApexOptions['series']}
-      type='line'
-      height={height}
-    />
+    <div style={{ position: 'relative', width: '100%', height }}>
+      {draggable && !loading ? (
+        <div
+          style={{
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <Move size={48} strokeWidth={1.5} style={{ opacity: 0.8 }} />
+        </div>
+      ) : (
+        <Chart
+          key={renderKey} // force remount si besoin
+          options={options}
+          series={series as unknown as ApexOptions['series']}
+          type="line"
+          height={height}
+        />
+      )}
+    </div>
   );
 };
 

package/src/components/Charts/sankey-chart/SankeyChart.tsx

@@ -1,155 +1,183 @@
-import React, { useEffect, useRef } from 'react';
-import { color } from 'storybook/internal/theming';
-
-export type SankeyLink = { source: string; target: string; value: number; color?: string };
-
-interface Props {
-  links?: SankeyLink[];
-  height?: number;
-  nodeWidth?: number;
-  enableToolbar?: boolean;
-  annotatePercent?: boolean;
-  maxLeftFraction?: number;
-  className?: string;
-}
-
-const SankeyChart: React.FC<Props> = ({
-  links,
-  height = 480,
-  nodeWidth = 5,
-  enableToolbar = false,
-  annotatePercent = true,
-  maxLeftFraction = 0.45,
-  className,
-}) => {
-  const containerRef = useRef<HTMLDivElement | null>(null);
-
-  useEffect(() => {
-    let sInstance: { render: (d: unknown) => void; destroy?: () => void } | null = null;
-    let mounted = true;
-
-    (async () => {
-      try {
-        const mod = await import('apexsankey');
-        const ApexSankey = mod?.default as unknown;
-
-        if (!mounted) return;
-        const mountEl = containerRef.current;
-        if (!mountEl) return;
-
-        const defaultLinks: SankeyLink[] = [
-          { source: 'non-seniors', target: 'retour', value: 73.9 },
-          { source: 'non-seniors', target: 'hospitalisations', value: 23.9 },
-          { source: 'non-seniors', target: 'transfert', value: 2.1 },
-          { source: 'non-seniors', target: 'maison_medicale_de_garde', value: 0.1 },
-          { source: 'non-seniors', target: 'deces', value: 0.1 },
-          { source: 'seniors', target: 'retour', value: 75.6 },
-          { source: 'seniors', target: 'hospitalisations', value: 20.4 },
-          { source: 'seniors', target: 'transfert', value: 3.1 },
-          { source: 'seniors', target: 'maison_medicale_de_garde', value: 0.1 },
-          { source: 'seniors', target: 'deces', value: 0.8 },
-        ];
-        const usedLinks = links && links.length ? links : defaultLinks;
-
-        const nodeSet = new Set<string>();
-        usedLinks.forEach((l) => {
-          nodeSet.add(l.source);
-          nodeSet.add(l.target);
-        });
-
-        const orderedNodes = [
-          'non-seniors',
-          'seniors',
-          'retour',
-          'hospitalisations',
-          'transfert',
-          'maison_medicale_de_garde',
-          'deces',
-        ].filter((id) => nodeSet.has(id));
-        for (const id of nodeSet) if (!orderedNodes.includes(id)) orderedNodes.push(id);
-
-        const totalsBySource: Record<string, number> = {};
-        const totalsByTarget: Record<string, number> = {};
-        let overall = 0;
-        usedLinks.forEach((l) => {
-          totalsBySource[l.source] = (totalsBySource[l.source] || 0) + (l.value ?? 0);
-          totalsByTarget[l.target] = (totalsByTarget[l.target] || 0) + (l.value ?? 0);
-          overall += l.value ?? 0;
-        });
-
-        const nodes = orderedNodes.map((id) => {
-          let title = id;
-          if (annotatePercent) {
-            const srcVal = totalsBySource[id];
-            if (typeof srcVal === 'number' && overall > 0) {
-              const pct = Math.round((srcVal / overall) * 1000) / 10;
-              title = `${id} (${pct}%)`;
-            } else {
-              const t = totalsByTarget[id];
-              if (typeof t === 'number' && overall > 0) {
-                const pct = Math.round((t / overall) * 1000) / 10;
-                title = `${id} (${pct}%)`;
-              }
-            }
-          }
-          return { id, title };
-        });
-
-        const edges = usedLinks.map((l) => ({
-          source: l.source,
-          target: l.target,
-          value: l.value,
-        }));
-        const data = { nodes, edges };
-
-        const parent = mountEl?.parentElement;
-        const containerWidth = parent ? parent.clientWidth || 420 : mountEl?.clientWidth || 420;
-
-        const graphOptions = {
-          nodeWidth,
-          fontFamily:
-            "Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial",
-          fontWeight: '600',
-          fontColor: 'var(--color-text)',
-          height,
-          enableToolbar,
-          viewPortWidth: containerWidth,
-          viewPortHeight: height,
-          width: containerWidth,
-          nodeAlignment: 'top',
-          colors: {
-            text: 'var(--color-text)',
-            background: '#fff',
-          },
-          linkOpacity: 0.6,
-          canvasStyle: {},
-        };
-
-        // constructor type
-        const SankeyCtor = ApexSankey as unknown as new (
-          el: Element,
-          opts: unknown
-        ) => { render: (d: unknown) => void; destroy?: () => void };
-        sInstance = new SankeyCtor(mountEl as Element, graphOptions as unknown);
-        sInstance.render(data as unknown);
-      } catch (err) {
-        console.error('Erreur lors du rendu ApexSankey :', err);
-      }
-    })();
-
-    return () => {
-      mounted = false;
-      try {
-        if (sInstance && typeof sInstance.destroy === 'function') sInstance.destroy();
-      } catch {
-        /* noop */
-      }
-    };
-  }, [links, height, nodeWidth, enableToolbar, annotatePercent, maxLeftFraction]);
-
-  return (
-    <div ref={containerRef} className={className} style={{ height: height, overflow: 'hidden' }} />
-  );
-};
-
-export default SankeyChart;
+import { Move } from 'lucide-react';
+import React, { useEffect, useRef } from 'react';
+
+export type SankeyLink = { source: string; target: string; value: number; color?: string };
+
+interface Props {
+  links?: SankeyLink[];
+  height?: number;
+  nodeWidth?: number;
+  enableToolbar?: boolean;
+  annotatePercent?: boolean;
+  maxLeftFraction?: number;
+  className?: string;
+  draggable?: boolean;
+}
+
+const SankeyChart: React.FC<Props> = ({
+  links,
+  height = 480,
+  nodeWidth = 5,
+  enableToolbar = false,
+  annotatePercent = true,
+  maxLeftFraction = 0.45,
+  className,
+  draggable = false,
+}) => {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    let sInstance: { render: (d: unknown) => void; destroy?: () => void } | null = null;
+    let mounted = true;
+
+    (async () => {
+      try {
+        const mod = await import('apexsankey');
+        const ApexSankey = mod?.default as unknown;
+
+        if (!mounted) return;
+        const mountEl = containerRef.current;
+        if (!mountEl) return;
+
+        const defaultLinks: SankeyLink[] = [
+          { source: 'non-seniors', target: 'retour', value: 73.9 },
+          { source: 'non-seniors', target: 'hospitalisations', value: 23.9 },
+          { source: 'non-seniors', target: 'transfert', value: 2.1 },
+          { source: 'non-seniors', target: 'maison_medicale_de_garde', value: 0.1 },
+          { source: 'non-seniors', target: 'deces', value: 0.1 },
+          { source: 'seniors', target: 'retour', value: 75.6 },
+          { source: 'seniors', target: 'hospitalisations', value: 20.4 },
+          { source: 'seniors', target: 'transfert', value: 3.1 },
+          { source: 'seniors', target: 'maison_medicale_de_garde', value: 0.1 },
+          { source: 'seniors', target: 'deces', value: 0.8 },
+        ];
+        const usedLinks = links && links.length ? links : defaultLinks;
+
+        const nodeSet = new Set<string>();
+        usedLinks.forEach((l) => {
+          nodeSet.add(l.source);
+          nodeSet.add(l.target);
+        });
+
+        const orderedNodes = [
+          'non-seniors',
+          'seniors',
+          'retour',
+          'hospitalisations',
+          'transfert',
+          'maison_medicale_de_garde',
+          'deces',
+        ].filter((id) => nodeSet.has(id));
+        for (const id of nodeSet) if (!orderedNodes.includes(id)) orderedNodes.push(id);
+
+        const totalsBySource: Record<string, number> = {};
+        const totalsByTarget: Record<string, number> = {};
+        let overall = 0;
+        usedLinks.forEach((l) => {
+          totalsBySource[l.source] = (totalsBySource[l.source] || 0) + (l.value ?? 0);
+          totalsByTarget[l.target] = (totalsByTarget[l.target] || 0) + (l.value ?? 0);
+          overall += l.value ?? 0;
+        });
+
+        const nodes = orderedNodes.map((id) => {
+          let title = id;
+          if (annotatePercent) {
+            const srcVal = totalsBySource[id];
+            if (typeof srcVal === 'number' && overall > 0) {
+              const pct = Math.round((srcVal / overall) * 1000) / 10;
+              title = `${id} (${pct}%)`;
+            } else {
+              const t = totalsByTarget[id];
+              if (typeof t === 'number' && overall > 0) {
+                const pct = Math.round((t / overall) * 1000) / 10;
+                title = `${id} (${pct}%)`;
+              }
+            }
+          }
+          return { id, title };
+        });
+
+        const edges = usedLinks.map((l) => ({
+          source: l.source,
+          target: l.target,
+          value: l.value,
+        }));
+        const data = { nodes, edges };
+
+        const parent = mountEl?.parentElement;
+        const containerWidth = parent ? parent.clientWidth || 420 : mountEl?.clientWidth || 420;
+
+        const graphOptions = {
+          nodeWidth,
+          fontFamily:
+            "Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial",
+          fontWeight: '600',
+          fontColor: 'var(--color-text)',
+          height,
+          enableToolbar,
+          viewPortWidth: containerWidth,
+          viewPortHeight: height,
+          width: containerWidth,
+          nodeAlignment: 'top',
+          colors: {
+            text: 'var(--color-text)',
+            background: '#fff',
+          },
+          linkOpacity: 0.6,
+          canvasStyle: {},
+        };
+
+        // constructor type
+        const SankeyCtor = ApexSankey as unknown as new (
+          el: Element,
+          opts: unknown
+        ) => { render: (d: unknown) => void; destroy?: () => void };
+        sInstance = new SankeyCtor(mountEl as Element, graphOptions as unknown);
+        sInstance.render(data as unknown);
+      } catch (err) {
+        console.error('Erreur lors du rendu ApexSankey :', err);
+      }
+    })();
+
+    return () => {
+      mounted = false;
+      try {
+        if (sInstance && typeof sInstance.destroy === 'function') sInstance.destroy();
+      } catch {
+        /* noop */
+      }
+    };
+  }, [links, height, nodeWidth, enableToolbar, annotatePercent, maxLeftFraction]);
+
+  return (
+    <div style={{ position: 'relative', height }}>
+      {/* Chart container, masqué si draggable */}
+      <div
+        ref={containerRef}
+        className={className}
+        style={{ height, overflow: 'hidden', opacity: draggable ? 0 : 1 }}
+      />
+
+      {/* Overlay Move */}
+      {draggable && (
+        <div
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            pointerEvents: 'none',
+          }}
+        >
+          <Move size={32} strokeWidth={1.5} style={{ opacity: 0.8 }} />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default SankeyChart;

package/src/components/Confirmationpopup/ConfirmationPopup.module.css

@@ -0,0 +1,88 @@
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.popup {
+  background: white;
+  border-radius: 8px;
+  min-width: 400px;
+  max-width: 500px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.header {
+  padding: 1rem;
+  border-bottom: 1px solid #e5e5e5;
+}
+
+.header h3 {
+  margin: 0;
+  font-size: 1.25rem;
+}
+
+.body {
+  padding: 1.5rem;
+}
+
+.body p {
+  margin: 0;
+  line-height: 1.5;
+}
+
+.footer {
+  padding: 1rem;
+  border-top: 1px solid #e5e5e5;
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+}
+
+.confirmButton,
+.cancelButton {
+  padding: 0.5rem 1rem;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.875rem;
+  transition: all 0.2s;
+}
+
+.confirmButton {
+  background-color: #dc3545;
+  color: white;
+}
+
+.confirmButton:hover {
+  background-color: #c82333;
+}
+
+.cancelButton {
+  background-color: #6c757d;
+  color: white;
+}
+
+.cancelButton:hover {
+  background-color: #5a6268;
+}
+
+/* Types variants */
+.warning .header {
+  border-left: 4px solid #ffc107;
+}
+
+.danger .header {
+  border-left: 4px solid #dc3545;
+}
+
+.info .header {
+  border-left: 4px solid #17a2b8;
+}

package/src/components/Confirmationpopup/ConfirmationPopup.stories.tsx

@@ -0,0 +1,94 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ConfirmationPopup } from './ConfirmationPopup';
+import { useConfirmationPopup } from './useConfirmationPopup';
+
+const meta: Meta<typeof ConfirmationPopup> = {
+  title: 'Components/ConfirmationPopup',
+  component: ConfirmationPopup,
+  tags: ['autodocs'],
+  args: {
+    title: 'Supprimer cet élément ?',
+    message: 'Cette action est irréversible. Voulez-vous vraiment supprimer cet élément ?',
+    confirmText: 'Oui, supprimer',
+    cancelText: 'Annuler',
+    type: 'warning',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ConfirmationPopup>;
+
+export const Default: Story = {
+  args: {
+    isOpen: true,
+    onConfirm: () => console.log('Confirmé!'),
+    onCancel: () => console.log('Annulé!'),
+  },
+};
+
+export const ControlledExample = () => {
+  const { isOpen, title, message, showConfirmation, hideConfirmation, handleConfirm } =
+    useConfirmationPopup();
+
+  const handleDelete = () => {
+    console.log('Element supprimé!');
+  };
+
+  return (
+    <div>
+      <button
+        onClick={() =>
+          showConfirmation(
+            'Supprimer cet élément ?',
+            'Cette action est irréversible.',
+            handleDelete
+          )
+        }
+      >
+        Supprimer un élément
+      </button>
+
+      <ConfirmationPopup
+        isOpen={isOpen}
+        title={title}
+        message={message}
+        onConfirm={handleConfirm}
+        onCancel={hideConfirmation}
+        confirmText='Confirmer'
+        cancelText='Annuler'
+        type='danger'
+      />
+    </div>
+  );
+};
+
+export const DifferentTypes: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
+      <ConfirmationPopup
+        isOpen={true}
+        title='Information'
+        message='Ceci est une information'
+        onConfirm={() => {}}
+        onCancel={() => {}}
+        type='info'
+      />
+      <ConfirmationPopup
+        isOpen={true}
+        title='Attention'
+        message='Ceci est un avertissement'
+        onConfirm={() => {}}
+        onCancel={() => {}}
+        type='warning'
+      />
+      <ConfirmationPopup
+        isOpen={true}
+        title='Danger'
+        message='Ceci est une action dangereuse'
+        onConfirm={() => {}}
+        onCancel={() => {}}
+        type='danger'
+      />
+    </div>
+  ),
+};