@tsiky/components-r19 1.0.0 → 1.2.0

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>
+  ),
+};

package/src/components/Confirmationpopup/ConfirmationPopup.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import styles from './ConfirmationPopup.module.css';
+
+interface ConfirmationPopupProps {
+  isOpen: boolean;
+  title: string;
+  message: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+  confirmText?: string;
+  cancelText?: string;
+  type?: 'warning' | 'info' | 'danger';
+}
+
+export const ConfirmationPopup: React.FC<ConfirmationPopupProps> = ({
+  isOpen,
+  title,
+  message,
+  onConfirm,
+  onCancel,
+  confirmText = 'Confirmer',
+  cancelText = 'Annuler',
+  type = 'warning',
+}) => {
+  if (!isOpen) return null;
+
+  return (
+    <div className={styles.overlay}>
+      <div className={`${styles.popup} ${styles[type]}`}>
+        <div className={styles.header}>
+          <h3>{title}</h3>
+        </div>
+        <div className={styles.body}>
+          <p>{message}</p>
+        </div>
+        <div className={styles.footer}>
+          <button className={styles.cancelButton} onClick={onCancel}>
+            {cancelText}
+          </button>
+          <button className={styles.confirmButton} onClick={onConfirm}>
+            {confirmText}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/Confirmationpopup/index.ts

@@ -0,0 +1,6 @@
+import { ConfirmationPopup } from './ConfirmationPopup';
+import { useConfirmationPopup } from './useConfirmationPopup';
+
+export { ConfirmationPopup, useConfirmationPopup };
+
+export default { ConfirmationPopup, useConfirmationPopup };

package/src/components/Confirmationpopup/useConfirmationPopup.ts

@@ -0,0 +1,48 @@
+import { useState, useCallback } from 'react';
+
+interface ConfirmationState {
+  isOpen: boolean;
+  title: string;
+  message: string;
+  onConfirm: (() => void) | null;
+}
+
+export const useConfirmationPopup = () => {
+  const [confirmationState, setConfirmationState] = useState<ConfirmationState>({
+    isOpen: false,
+    title: '',
+    message: '',
+    onConfirm: null,
+  });
+
+  const showConfirmation = useCallback((title: string, message: string, onConfirm: () => void) => {
+    setConfirmationState({
+      isOpen: true,
+      title,
+      message,
+      onConfirm,
+    });
+  }, []);
+
+  const hideConfirmation = useCallback(() => {
+    setConfirmationState((prev) => ({
+      ...prev,
+      isOpen: false,
+      onConfirm: null,
+    }));
+  }, []);
+
+  const handleConfirm = useCallback(() => {
+    confirmationState.onConfirm?.();
+    hideConfirmation();
+  }, [confirmationState.onConfirm, hideConfirmation]);
+
+  return {
+    isOpen: confirmationState.isOpen,
+    title: confirmationState.title,
+    message: confirmationState.message,
+    showConfirmation,
+    hideConfirmation,
+    handleConfirm,
+  };
+};