@tsiky/components-r19 1.0.0

package/src/components/Alert/Alert.stories.tsx

@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Alert } from './Alert';
+import { alertModels } from './AlertModels';
+
+const meta: Meta<typeof Alert> = {
+  title: 'Components/Alert',
+  component: Alert,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: { type: 'text' },
+      description: "Alert width (e.g., '100%', '300px', or number)",
+    },
+    text: { control: 'text', description: 'Main text' },
+    subtext: { control: 'text', description: 'Subtext' },
+    background: { control: 'color', description: 'Background color' },
+    colorTextPrimary: { control: 'color', description: 'Primary text color' },
+    colorTextSub: { control: 'color', description: 'Secondary text color' },
+    onClick: { action: 'clicked' },
+    onClose: { action: 'closed' },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof Alert>;
+
+/**
+ * --- STORIES ---
+ */
+
+export const Default: Story = {
+  args: {
+    text: 'This is a default alert',
+    subtext: 'A secondary message',
+    background: '#f3f4f6',
+    colorTextPrimary: '#111827',
+    colorTextSub: '#4b5563',
+  },
+};
+
+export const Info: Story = {
+  args: {
+    text: 'Important information',
+    subtext: 'Additional details',
+    model: alertModels.info,
+  },
+};
+
+export const Success: Story = {
+  args: {
+    text: 'Operation successful',
+    subtext: 'Everything went well',
+    model: alertModels.success,
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    text: 'Attention required',
+    subtext: 'Please verify your actions',
+    model: alertModels.warning,
+  },
+};
+
+export const Error: Story = {
+  args: {
+    text: 'An error occurred',
+    subtext: 'Please try again later',
+    model: alertModels.error,
+  },
+};
+
+export const Custom: Story = {
+  args: {
+    text: 'Custom alert',
+    subtext: 'With direct props',
+    background: '#ede9fe',
+    colorTextPrimary: '#5b21b6',
+    colorTextSub: '#7c3aed',
+    icon: 'Bell',
+  },
+};

package/src/components/Alert/Alert.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import * as Icons from 'lucide-react';
+import type { LucideProps } from 'lucide-react';
+import './Alert.css';
+
+export type AlertModel = {
+  background: string;
+  icon?: string;
+  colorTextPrimary: string;
+  colorTextSub?: string;
+};
+
+export type AlertProps = {
+  id?: string;
+  size?: number | string;
+  background?: string;
+  icon?: string;
+  text: string;
+  subtext?: string;
+  onClose?: () => void;
+  onClick?: () => void;
+  style?: React.CSSProperties;
+  className?: string;
+  colorTextPrimary?: string;
+  colorTextSub?: string;
+  model?: AlertModel;
+};
+
+export const Alert: React.FC<AlertProps> = ({
+  id,
+  size = '100%',
+  background,
+  icon,
+  text,
+  subtext,
+  onClose,
+  onClick,
+  style,
+  className = '',
+  colorTextPrimary,
+  colorTextSub,
+  model,
+}) => {
+  const LucideIcon =
+    icon || model?.icon
+      ? (Icons[(icon || model?.icon) as keyof typeof Icons] as React.ComponentType<LucideProps>)
+      : null;
+
+  return (
+    <div
+      id={id}
+      className={`alert ${className}`}
+      style={{
+        width: typeof size === 'number' ? `${size}px` : size,
+        background: background || model?.background,
+        ...style,
+      }}
+      role='alert'
+      onClick={onClick}
+    >
+      {LucideIcon && (
+        <LucideIcon
+          className='alert-icon'
+          size={20}
+          color={colorTextPrimary || model?.colorTextPrimary}
+        />
+      )}
+      <div className='alert-content'>
+        <span className='alert-text' style={{ color: colorTextPrimary || model?.colorTextPrimary }}>
+          {text}
+        </span>
+        {subtext && (
+          <span className='alert-subtext' style={{ color: colorTextSub || model?.colorTextSub }}>
+            {subtext}
+          </span>
+        )}
+      </div>
+      {onClose && (
+        <button className='alert-close' onClick={onClose} aria-label='Fermer'>
+          ✕
+        </button>
+      )}
+    </div>
+  );
+};

package/src/components/Alert/AlertContext.tsx

@@ -0,0 +1,200 @@
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from 'react';
+import { createPortal } from 'react-dom';
+import { Alert, type AlertModel } from './Alert';
+
+// --- Types -------------------------------------------------
+export type ShowAlertOptions = {
+  text: string;
+  subtext?: string;
+  model?: AlertModel;
+  icon?: string;
+  background?: string;
+  colorTextPrimary?: string;
+  colorTextSub?: string;
+  duration?: number; // ms (if 0 or undefined = use defaultDuration; if -1 => never auto-dismiss)
+};
+
+export type AlertItem = ShowAlertOptions & {
+  id: string;
+  createdAt: number;
+};
+
+export type AlertsContextValue = {
+  showAlert: (opts: ShowAlertOptions) => string;
+  dismissAlert: (id: string) => void;
+  updateAlert: (id: string, patch: Partial<ShowAlertOptions>) => void;
+  clearAlerts: () => void;
+  setContainerRef: (el: HTMLElement | null) => void;
+  getAlertsSnapshot: () => AlertItem[];
+};
+
+// --- Context -------------------------------------------------
+const AlertsContext = createContext<AlertsContextValue | null>(null);
+
+// --- Helpers -------------------------------------------------
+const genId = (prefix = 'alert') => `${prefix}_${Math.random().toString(36).slice(2, 9)}`;
+
+// --- Provider -------------------------------------------------
+export const AlertsProvider: React.FC<{
+  children?: ReactNode;
+  defaultDuration?: number; // ms
+  maxAlerts?: number; // initial max limit (undefined => unlimited)
+}> = ({ children, defaultDuration = 5000, maxAlerts: initialMax }) => {
+  const [alerts, setAlerts] = useState<AlertItem[]>([]);
+  const timeouts = useRef(new Map<string, number>());
+  const containerRef = useRef<HTMLElement | null>(null);
+  const externalContainerRef = useRef<HTMLElement | null>(null);
+  const maxAlertsRef = useRef<number | undefined>(initialMax);
+
+  useEffect(() => {
+    return () => {
+      // cleanup timeouts on unmount
+      timeouts.current.forEach((t) => window.clearTimeout(t));
+      timeouts.current.clear();
+    };
+  }, []);
+
+  // --- internal helpers
+  const scheduleAutoDismiss = (id: string, duration?: number) => {
+    // duration === -1 => never auto dismiss
+    const d = duration === undefined || duration === 0 ? defaultDuration : duration;
+    if (d === -1) return;
+    const t = window.setTimeout(() => {
+      dismissAlert(id);
+    }, d);
+    timeouts.current.set(id, t);
+  };
+
+  const cancelAutoDismiss = (id: string) => {
+    const t = timeouts.current.get(id);
+    if (t) {
+      window.clearTimeout(t);
+      timeouts.current.delete(id);
+    }
+  };
+
+  const showAlert = (opts: ShowAlertOptions) => {
+    const id = genId();
+    const item: AlertItem = { ...opts, id, createdAt: Date.now() };
+
+    setAlerts((prev) => {
+      // newest first => unshift-like
+      const next = [item, ...prev];
+      const max = maxAlertsRef.current;
+      if (typeof max === 'number' && max >= 0 && next.length > max) {
+        // remove oldest (end of array)
+        const removed = next.slice(max);
+        // clear their timeouts
+        removed.forEach((r) => cancelAutoDismiss(r.id));
+        return next.slice(0, max);
+      }
+      return next;
+    });
+
+    // schedule dismissal
+    scheduleAutoDismiss(id, opts.duration);
+
+    return id;
+  };
+
+  const dismissAlert = (id: string) => {
+    cancelAutoDismiss(id);
+    setAlerts((prev) => prev.filter((a) => a.id !== id));
+  };
+
+  const updateAlert = (id: string, patch: Partial<ShowAlertOptions>) => {
+    setAlerts((prev) => prev.map((a) => (a.id === id ? { ...a, ...patch } : a)));
+  };
+
+  const clearAlerts = () => {
+    timeouts.current.forEach((t) => window.clearTimeout(t));
+    timeouts.current.clear();
+    setAlerts([]);
+  };
+
+  const setContainerRef = (el: HTMLElement | null) => {
+    externalContainerRef.current = el;
+  };
+
+  const getAlertsSnapshot = () => alerts.slice();
+
+  const value = useMemo<AlertsContextValue>(
+    () => ({
+      showAlert,
+      dismissAlert,
+      updateAlert,
+      clearAlerts,
+      setContainerRef,
+      getAlertsSnapshot,
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [alerts]
+  );
+
+  // decide which container to render into
+  const target = externalContainerRef.current;
+  const alertsList = (
+    <>
+      {alerts.map((a) => (
+        <Alert
+          key={a.id}
+          id={a.id}
+          text={a.text}
+          subtext={a.subtext}
+          icon={a.icon}
+          background={a.background}
+          colorTextPrimary={a.colorTextPrimary}
+          colorTextSub={a.colorTextSub}
+          model={a.model}
+          onClose={() => dismissAlert(a.id)}
+          size='100%'
+        />
+      ))}
+    </>
+  );
+  const alertsNode = (
+    <div
+      ref={(el) => {
+        if (!externalContainerRef.current) containerRef.current = el;
+      }}
+      style={{
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 5,
+        ...(alerts.length && { padding: '20px' }),
+      }}
+      aria-live='polite'
+    >
+      {alertsList}
+    </div>
+  );
+
+  return (
+    <AlertsContext.Provider value={value}>
+      {target ? createPortal(alertsList, target) : alertsNode}
+      {children}
+    </AlertsContext.Provider>
+  );
+};
+
+// --- Hook -------------------------------------------------
+export const useAlerts = (): AlertsContextValue => {
+  const ctx = useContext(AlertsContext);
+  if (!ctx) throw new Error('useAlerts must be used inside an AlertsProvider');
+  return ctx;
+};
+
+// --- Minimal CSS (you can move to Alert.css) --------------
+// .alert-container { display:flex; flex-direction:column; gap:8px; align-items:stretch; padding:8px; /* decorative only - NOT positioned */ }
+// .alert { border-radius:8px; padding:8px 12px; box-shadow:0 6px 18px rgba(0,0,0,0.06); display:flex; gap:8px; align-items:center; }
+
+export default AlertsProvider;

package/src/components/Alert/AlertModels.ts

@@ -0,0 +1,34 @@
+import type { AlertModel } from './Alert';
+
+export const alertModels: Record<string, AlertModel> = {
+  default: {
+    background: '#f3f4f6',
+    icon: 'Info',
+    colorTextPrimary: '#111827',
+    colorTextSub: '#4b5563',
+  },
+  info: {
+    background: '#dbeafe',
+    icon: 'Info',
+    colorTextPrimary: '#1e40af',
+    colorTextSub: '#3b82f6',
+  },
+  success: {
+    background: '#dcfce7',
+    icon: 'CheckCircle2',
+    colorTextPrimary: '#166534',
+    colorTextSub: '#22c55e',
+  },
+  warning: {
+    background: '#fef3c7',
+    icon: 'AlertTriangle',
+    colorTextPrimary: '#92400e',
+    colorTextSub: '#f59e0b',
+  },
+  error: {
+    background: '#fee2e2',
+    icon: 'XCircle',
+    colorTextPrimary: '#991b1b',
+    colorTextSub: '#ef4444',
+  },
+};

package/src/components/Alert/index.ts

@@ -0,0 +1,3 @@
+export * from './AlertContext';
+export * from './AlertModels';
+export * from './Alert';

package/src/components/AnnouncementPanel/FlexRowContainer.css

@@ -0,0 +1,17 @@
+.frc-root {
+  display: flex;
+  gap: var(--frc-gap, 12px);
+  flex-wrap: wrap;
+}
+
+.frc-item {
+  box-sizing: border-box;
+  display: flex;
+  flex: 1 1 auto;
+  min-width: min-content;
+}
+
+.frc-item > * {
+  width: 100%;
+  min-width: 0;
+}