migration wip

2025-12-29 18:18:48 +01:00
parent 292975299d
commit f86785bfb0
182 changed files with 30131 additions and 9321 deletions
--- a/components/forms/FormSuccess.tsx
+++ b/components/forms/FormSuccess.tsx
@@ -0,0 +1,132 @@
+import React, { useEffect, useState } from 'react';
+import { cn } from '@/lib/utils';
+
+/**
+ * FormSuccess Component
+ * Display success messages with different variants and auto-dismiss
+ */
+
+export interface FormSuccessProps {
+  message?: string;
+  variant?: 'inline' | 'block' | 'toast';
+  className?: string;
+  showIcon?: boolean;
+  animate?: boolean;
+  autoDismiss?: boolean;
+  autoDismissTimeout?: number;
+  onClose?: () => void;
+  id?: string;
+}
+
+export const FormSuccess: React.FC<FormSuccessProps> = ({
+  message,
+  variant = 'inline',
+  className,
+  showIcon = true,
+  animate = true,
+  autoDismiss = false,
+  autoDismissTimeout = 5000,
+  onClose,
+  id,
+}) => {
+  const [isVisible, setIsVisible] = useState(true);
+
+  useEffect(() => {
+    if (!message) {
+      setIsVisible(false);
+      return;
+    }
+
+    setIsVisible(true);
+
+    if (autoDismiss && autoDismissTimeout > 0) {
+      const timer = setTimeout(() => {
+        setIsVisible(false);
+        if (onClose) {
+          onClose();
+        }
+      }, autoDismissTimeout);
+
+      return () => clearTimeout(timer);
+    }
+  }, [message, autoDismiss, autoDismissTimeout, onClose]);
+
+  if (!message || !isVisible) {
+    return null;
+  }
+
+  const baseClasses = {
+    inline: 'text-sm text-success mt-1',
+    block: 'p-3 bg-success/10 border border-success/20 rounded-md text-success text-sm',
+    toast: 'fixed bottom-4 right-4 p-4 bg-success text-white rounded-lg shadow-lg max-w-md z-tooltip animate-slide-up',
+  };
+
+  const animationClasses = animate ? 'animate-fade-in' : '';
+
+  const Icon = () => (
+    <svg
+      className="w-4 h-4 mr-1 inline-block"
+      fill="currentColor"
+      viewBox="0 0 20 20"
+      aria-hidden="true"
+    >
+      <path
+        fillRule="evenodd"
+        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+
+  const handleClose = () => {
+    setIsVisible(false);
+    if (onClose) {
+      onClose();
+    }
+  };
+
+  return (
+    <div
+      role="status"
+      aria-live="polite"
+      id={id}
+      className={cn(
+        baseClasses[variant],
+        animationClasses,
+        'transition-all duration-200',
+        'flex items-start justify-between gap-2',
+        className
+      )}
+    >
+      <div className="flex items-start flex-1">
+        {showIcon && <Icon />}
+        <span>{message}</span>
+      </div>
+      
+      {autoDismiss && (
+        <button
+          type="button"
+          onClick={handleClose}
+          className="text-current opacity-70 hover:opacity-100 transition-opacity"
+          aria-label="Close notification"
+        >
+          <svg
+            className="w-4 h-4"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+          >
+            <path
+              fillRule="evenodd"
+              d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+              clipRule="evenodd"
+            />
+          </svg>
+        </button>
+      )}
+    </div>
+  );
+};
+
+FormSuccess.displayName = 'FormSuccess';
+
+export default FormSuccess;