@12-apps/ui 1.0.0 → 1.3.1

package/src/components/form/Toggle/Toggle.tsx

@@ -1,62 +1,15 @@
-import type { Theme} from '@mui/material';
-import { alpha, keyframes,ToggleButton } from '@mui/material';
+import { ToggleButton } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import React, { forwardRef } from 'react';
 
+import {
+  baseStyles,
+  effectStyles,
+  getColorFromTheme,
+  variantStyles,
+} from './Toggle.styles';
 import type { ToggleProps } from './Toggle.types';
 
-const glowAnimation = keyframes`
-  0% { box-shadow: 0 0 5px currentColor; }
-  50% { box-shadow: 0 0 15px currentColor, 0 0 25px currentColor; }
-  100% { box-shadow: 0 0 5px currentColor; }
-`;
-
-// Ripple animation - reserved for future use
-// const rippleAnimation = keyframes`
-//   0% {
-//     transform: scale(0);
-//     opacity: 1;
-//   }
-//   100% {
-//     transform: scale(4);
-//     opacity: 0;
-//   }
-// `;
-
-const floatAnimation = keyframes`
-  0%, 100% { transform: translateY(0px); }
-  50% { transform: translateY(-2px); }
-`;
-
-const getColorFromTheme = (theme: Theme, color: string) => {
-  if (color === 'neutral') {
-    return {
-      main: theme.palette.grey?.[700] || '#616161',
-      dark: theme.palette.grey?.[800] || '#424242',
-      light: theme.palette.grey?.[500] || '#9e9e9e',
-      contrastText: '#fff',
-    };
-  }
-
-  const colorMap: Record<string, typeof theme.palette.primary> = {
-    primary: theme.palette.primary,
-    secondary: theme.palette.secondary,
-    success: theme.palette.success,
-    warning: theme.palette.warning,
-    danger: theme.palette.error,
-  };
-
-  const palette = colorMap[color] || theme.palette.primary;
-
-  // Ensure palette has required properties
-  return {
-    main: palette?.main || theme.palette.primary.main,
-    dark: palette?.dark || palette?.main || theme.palette.primary.dark,
-    light: palette?.light || palette?.main || theme.palette.primary.light,
-    contrastText: palette?.contrastText || '#fff',
-  };
-};
-
 const StyledToggle = styled(ToggleButton, {
   shouldForwardProp: (prop) =>
     !['customVariant', 'customColor', 'customSize', 'glow', 'glass', 'gradient'].includes(
@@ -80,138 +33,10 @@ const StyledToggle = styled(ToggleButton, {
 }) => {
   const colorPalette = getColorFromTheme(theme, customColor);
 
-  const sizeMap = {
-    xs: { padding: '4px 8px', fontSize: '0.75rem' },
-    sm: { padding: '6px 12px', fontSize: '0.875rem' },
-    md: { padding: '8px 16px', fontSize: '1rem' },
-    lg: { padding: '10px 20px', fontSize: '1.125rem' },
-    xl: { padding: '12px 24px', fontSize: '1.25rem' },
-  };
-
-  const baseStyles = {
-    textTransform: 'none' as const,
-    fontWeight: 500,
-    borderRadius: theme.spacing(1),
-    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-    border: `2px solid ${alpha(theme.palette.divider, 0.3)}`,
-    color: theme.palette.text.primary,
-    backgroundColor: 'transparent',
-    position: 'relative' as const,
-    overflow: 'hidden' as const,
-
-    '&::before': {
-      content: '""',
-      position: 'absolute',
-      top: '50%',
-      left: '50%',
-      width: 0,
-      height: 0,
-      borderRadius: '50%',
-      backgroundColor: alpha(colorPalette.main, 0.2),
-      transform: 'translate(-50%, -50%)',
-      transition: 'width 0.4s, height 0.4s',
-    },
-
-    '&:hover': {
-      backgroundColor: alpha(colorPalette.main, 0.08),
-      borderColor: colorPalette.main,
-      transform: 'translateY(-1px)',
-      boxShadow: `0 4px 8px ${alpha(colorPalette.main, 0.15)}`,
-      animation: `${floatAnimation} 2s ease-in-out infinite`,
-
-      '&::before': {
-        width: '100%',
-        height: '100%',
-      },
-    },
-
-    '&:active': {
-      transform: 'scale(0.98)',
-    },
-
-    '&.Mui-selected': {
-      backgroundColor: colorPalette.main,
-      color: colorPalette.contrastText || '#fff',
-      borderColor: colorPalette.main,
-      boxShadow: `0 2px 8px ${alpha(colorPalette.main, 0.3)}`,
-
-      '&::after': {
-        content: '""',
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        background: `linear-gradient(135deg, transparent, ${alpha('#fff', 0.1)})`,
-        pointerEvents: 'none',
-      },
-
-      '&:hover': {
-        backgroundColor: colorPalette.dark,
-        transform: 'translateY(-2px) scale(1.02)',
-        boxShadow: `0 6px 20px ${alpha(colorPalette.main, 0.4)}`,
-      },
-    },
-
-    ...sizeMap[customSize as keyof typeof sizeMap],
-  };
-
-  const variantStyles = {
-    ...(customVariant === 'outline' && {
-      backgroundColor: 'transparent',
-      border: `2px solid ${colorPalette.main}`,
-      color: colorPalette.main,
-
-      '&.Mui-selected': {
-        backgroundColor: colorPalette.main,
-        color: colorPalette.contrastText || '#fff',
-      },
-    }),
-
-    ...(customVariant === 'soft' && {
-      backgroundColor: alpha(colorPalette.main, 0.1),
-      border: 'none',
-      color: colorPalette.main,
-
-      '&.Mui-selected': {
-        backgroundColor: alpha(colorPalette.main, 0.2),
-        color: colorPalette.main,
-      },
-    }),
-  };
-
-  const effectStyles = {
-    ...(glass && {
-      backgroundColor: alpha(theme.palette.background.paper, 0.1),
-      backdropFilter: 'blur(20px)',
-      border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
-    }),
-
-    ...(gradient && {
-      '&.Mui-selected': {
-        background: `linear-gradient(135deg, ${colorPalette.light}, ${colorPalette.main}, ${colorPalette.dark})`,
-        backgroundSize: '200% 200%',
-        animation: `${floatAnimation} 3s ease-in-out infinite`,
-        border: 'none',
-
-        '&:hover': {
-          backgroundPosition: '100% 100%',
-        },
-      },
-    }),
-
-    ...(glow && {
-      '&.Mui-selected': {
-        animation: `${glowAnimation} 2s ease-in-out infinite`,
-        boxShadow: `0 0 15px ${alpha(colorPalette.main, 0.6)}`,
-      },
-    }),
-  };
-
   return {
-    ...baseStyles,
-    ...variantStyles,
-    ...effectStyles,
+    ...baseStyles(theme, colorPalette, customSize),
+    ...variantStyles(customVariant, colorPalette),
+    ...effectStyles(theme, colorPalette, { glass, gradient, glow }),
   };
 });
 

package/src/components/form/UploadButton/UploadButton.hooks.ts

@@ -0,0 +1,323 @@
+import { useCallback, useId, useMemo, useRef, useState } from 'react';
+import type React from 'react';
+
+import type { UploadButtonProps, UploadButtonState } from './UploadButton.types';
+
+/** The props {@link useUploadButton} reads — the component's own props. */
+type UploadButtonHookProps = UploadButtonProps;
+
+/** Percent the simulated progress creeps to while waiting on `onUpload`. */
+const SIMULATED_PROGRESS_CEILING = 90;
+const SIMULATED_PROGRESS_STEP = 10;
+const SIMULATED_PROGRESS_INTERVAL_MS = 100;
+const PROGRESS_RESET_DELAY_MS = 1000;
+const BYTES_PER_MB = 1024 * 1024;
+
+const INITIAL_STATE: UploadButtonState = {
+  isDragOver: false,
+  isUploading: false,
+  uploadProgress: 0,
+  error: null,
+};
+
+/** Narrowed `setState` for the pieces below. */
+type SetState = React.Dispatch<React.SetStateAction<UploadButtonState>>;
+
+/** The size/custom validation applied to every file, in both modes. */
+function useFileValidator(
+  maxSizeMB: number | undefined,
+  validate: ((file: globalThis.File) => string | null) | undefined,
+): (file: globalThis.File) => string | null {
+  return useCallback(
+    (file: globalThis.File): string | null => {
+      if (maxSizeMB && file.size > maxSizeMB * BYTES_PER_MB) {
+        return `File size must be less than ${maxSizeMB}MB`;
+      }
+      return validate ? validate(file) : null;
+    },
+    [maxSizeMB, validate],
+  );
+}
+
+/**
+ * The built-in upload path, reachable from BOTH selection modes.
+ *
+ * Kept apart from selection because it is the only asynchronous part: left
+ * inline it was single-file only, which made `onUpload` a silent no-op for a
+ * multi-file caller — the worst kind of contract, since nothing fails.
+ */
+function useUploadRunner(
+  onUpload: ((file: globalThis.File) => Promise<void>) | undefined,
+  externalUploading: boolean,
+  setState: SetState,
+): (file: globalThis.File) => Promise<void> {
+  return useCallback(
+    async (file: globalThis.File) => {
+      if (!onUpload || externalUploading) return;
+      try {
+        setState((prev) => ({ ...prev, isUploading: true, uploadProgress: 0 }));
+        // The real percentage is unknowable through a bare promise, so the bar
+        // creeps to a ceiling and only completes when the promise does.
+        const timer = globalThis.setInterval(() => {
+          setState((prev) => {
+            if (prev.uploadProgress >= SIMULATED_PROGRESS_CEILING) {
+              globalThis.clearInterval(timer);
+              return prev;
+            }
+            return { ...prev, uploadProgress: prev.uploadProgress + SIMULATED_PROGRESS_STEP };
+          });
+        }, SIMULATED_PROGRESS_INTERVAL_MS);
+
+        await onUpload(file);
+
+        globalThis.clearInterval(timer);
+        setState((prev) => ({ ...prev, isUploading: false, uploadProgress: 100 }));
+        globalThis.setTimeout(() => {
+          setState((prev) => ({ ...prev, uploadProgress: 0 }));
+        }, PROGRESS_RESET_DELAY_MS);
+      } catch (error) {
+        setState((prev) => ({
+          ...prev,
+          isUploading: false,
+          uploadProgress: 0,
+          error: error instanceof Error ? error.message : 'Upload failed',
+        }));
+      }
+    },
+    [onUpload, externalUploading, setState],
+  );
+}
+
+/**
+ * What {@link useUploadSelection} hands back. Module-private: the published
+ * surface is {@link useUploadButton}, not the shape of its internals.
+ */
+interface UploadSelection {
+  state: UploadButtonState;
+  setDragOver: (isDragOver: boolean) => void;
+  /** Route a picked/dropped selection through validation and the callbacks. */
+  handleFiles: (files: globalThis.File[]) => void;
+}
+
+interface UploadSelectionOptions {
+  onSelect: (file: globalThis.File) => void;
+  multiple: boolean;
+  onSelectMany?: (files: globalThis.File[]) => void;
+  onUpload?: (file: globalThis.File) => Promise<void>;
+  externalUploading: boolean;
+  validateFile: (file: globalThis.File) => string | null;
+}
+
+/**
+ * Selection, validation and the optional built-in upload.
+ *
+ * The rendering layer only reads `state` and calls `handleFiles`; every rule
+ * about what a selection means lives here.
+ */
+function useUploadSelection({
+  onSelect,
+  multiple,
+  onSelectMany,
+  onUpload,
+  externalUploading,
+  validateFile,
+}: UploadSelectionOptions): UploadSelection {
+  const [state, setState] = useState<UploadButtonState>(INITIAL_STATE);
+  const runUpload = useUploadRunner(onUpload, externalUploading, setState);
+
+  const selectOne = useCallback(
+    (file: globalThis.File) => {
+      const error = validateFile(file);
+      setState((prev) => ({ ...prev, error }));
+      if (error) return;
+      onSelect(file);
+      void runUpload(file);
+    },
+    [onSelect, runUpload, validateFile],
+  );
+
+  /**
+   * Multi-file mode is deliberately forgiving: the valid files are handed over
+   * and the first rejection is reported alongside them, so dropping a folder
+   * that also contains a PDF imports the rest instead of refusing the lot.
+   */
+  const selectMany = useCallback(
+    (files: globalThis.File[], accept: (files: globalThis.File[]) => void) => {
+      const accepted: globalThis.File[] = [];
+      let rejection: string | null = null;
+      for (const file of files) {
+        const error = validateFile(file);
+        if (error) rejection ??= error;
+        else accepted.push(file);
+      }
+      setState((prev) => ({ ...prev, error: rejection }));
+      if (accepted.length === 0) return;
+      accept(accepted);
+      // `onUpload` applies here too, one file after another, so the prop means
+      // the same thing in both modes. Sequential because the progress bar is a
+      // single indicator — overlapping uploads would report nonsense.
+      void (async () => {
+        for (const file of accepted) await runUpload(file);
+      })();
+    },
+    [runUpload, validateFile],
+  );
+
+  const handleFiles = useCallback(
+    (files: globalThis.File[]) => {
+      if (files.length === 0) return;
+      if (multiple && onSelectMany) selectMany(files, onSelectMany);
+      else selectOne(files[0] as globalThis.File);
+    },
+    [multiple, onSelectMany, selectMany, selectOne],
+  );
+
+  const setDragOver = useCallback((isDragOver: boolean) => {
+    setState((prev) => ({ ...prev, isDragOver }));
+  }, []);
+
+  return useMemo(() => ({ state, setDragOver, handleFiles }), [state, setDragOver, handleFiles]);
+}
+
+/** Drag-and-drop wiring for the dropzone variant. */
+export interface DragHandlers {
+  onDragEnter: (event: React.DragEvent) => void;
+  onDragLeave: (event: React.DragEvent) => void;
+  onDragOver: (event: React.DragEvent) => void;
+  onDrop: (event: React.DragEvent) => void;
+}
+
+const swallow = (event: React.DragEvent): void => {
+  event.preventDefault();
+  event.stopPropagation();
+};
+
+function useDragHandlers(
+  disabled: boolean,
+  setDragOver: (isDragOver: boolean) => void,
+  handleFiles: (files: globalThis.File[]) => void,
+): DragHandlers {
+  return {
+    onDragEnter: (event) => {
+      swallow(event);
+      if (!disabled) setDragOver(true);
+    },
+    onDragLeave: (event) => {
+      swallow(event);
+      setDragOver(false);
+    },
+    onDragOver: swallow,
+    onDrop: (event) => {
+      swallow(event);
+      setDragOver(false);
+      if (!disabled) handleFiles(Array.from(event.dataTransfer.files));
+    },
+  };
+}
+
+/** Everything the component needs, assembled from its props in one call. */
+interface UploadButtonKit {
+  inputRef: React.RefObject<HTMLInputElement | null>;
+  inputId: string;
+  state: UploadButtonState;
+  drag: DragHandlers;
+  derived: DerivedUploadState;
+  openPicker: () => void;
+  handleInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+/**
+ * The component's whole behaviour in one hook, so the render body stays a thin
+ * piece of wiring rather than a place where rules accumulate.
+ */
+export function useUploadButton(props: UploadButtonHookProps): UploadButtonKit {
+  const {
+    onSelect,
+    multiple = false,
+    onSelectMany,
+    onUpload,
+    uploading: externalUploading = false,
+    progress: externalProgress = 0,
+    maxSizeMB,
+    validate,
+    helperText,
+    errorText,
+    disabled = false,
+  } = props;
+
+  const inputRef = useRef<HTMLInputElement>(null);
+  const inputId = `upload-button-${useId()}`;
+  const validateFile = useFileValidator(maxSizeMB, validate);
+  const { state, setDragOver, handleFiles } = useUploadSelection({
+    onSelect,
+    multiple,
+    onSelectMany,
+    onUpload,
+    externalUploading,
+    validateFile,
+  });
+  const drag = useDragHandlers(disabled, setDragOver, handleFiles);
+  const derived = useDerivedUploadState({
+    state,
+    inputId,
+    externalUploading,
+    externalProgress,
+    errorText,
+    helperText,
+  });
+
+  const openPicker = useCallback(() => inputRef.current?.click(), []);
+  const handleInputChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      handleFiles(Array.from(event.target.files ?? []));
+      // Let the same file be picked twice in a row — without this the input
+      // holds the old value and re-selecting it fires no change event.
+      event.target.value = '';
+    },
+    [handleFiles],
+  );
+
+  return { inputRef, inputId, state, drag, derived, openPicker, handleInputChange };
+}
+
+/** The values the render derives from props + internal state. */
+interface DerivedUploadState {
+  isUploading: boolean;
+  progress: number;
+  error: string | null;
+  helperId?: string;
+  errorId?: string;
+  describedBy?: string;
+}
+
+/**
+ * Fold props and internal state into what the render actually shows. External
+ * state wins whenever the caller drives it.
+ */
+function useDerivedUploadState({
+  state,
+  inputId,
+  externalUploading,
+  externalProgress,
+  errorText,
+  helperText,
+}: {
+  state: UploadButtonState;
+  inputId: string;
+  externalUploading: boolean;
+  externalProgress: number;
+  errorText?: string;
+  helperText?: string;
+}): DerivedUploadState {
+  const error = errorText || state.error;
+  const helperId = helperText ? `${inputId}-helper` : undefined;
+  const errorId = error ? `${inputId}-error` : undefined;
+  return {
+    isUploading: externalUploading || state.isUploading,
+    progress: externalUploading ? externalProgress : state.uploadProgress,
+    error,
+    helperId,
+    errorId,
+    describedBy: [helperId, errorId].filter(Boolean).join(' ') || undefined,
+  };
+}