@adlas/create-app 1.0.7 → 1.0.8

package/templates/boilerplate/components/ui/DocumentUpload.tsx

@@ -0,0 +1,415 @@
+'use client';
+
+import type { ChangeEvent, DragEvent, KeyboardEvent } from 'react';
+
+import { memo, useCallback, useEffect, useRef, useState } from 'react';
+
+import { Spinner } from '@heroui/react';
+import clsx from 'clsx';
+import { useLocale, useTranslations } from 'next-intl';
+import Image from 'next/image';
+
+import { uploadImageToSaleor } from '@/services/user';
+import {
+  compressImage,
+  FILE_CONFIG,
+  formatFileSize,
+  getAllowedExtensions,
+  getFileInfoText,
+} from '@/utils/file';
+import { getOptimalCompressionOptions } from '@/utils/file/imageCompression';
+
+import { Button } from './Button';
+import { Icon } from './Icon';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export type FileValidationError = {
+  isValidationError: true;
+  errorMessage: string;
+};
+
+type DocumentUploadProps = {
+  label: string;
+  description?: string;
+  onChange: (file: File | FileValidationError | null) => void;
+  onImageUploaded?: (imageId: string, imageUrl: string) => void;
+  onError?: (error: string) => void;
+  className?: string;
+  value?: string | null;
+  hasError?: boolean;
+  errorMessage?: string;
+  accept?: string;
+  required?: boolean;
+  maxSize?: number;
+  /** If true, file will not be uploaded immediately - parent handles upload */
+  deferUpload?: boolean;
+};
+
+// ============================================================================
+// Constants
+// ============================================================================
+
+const CONTAINER_HEIGHT = 'h-40';
+const ICON_SIZE = 'size-5';
+
+// ============================================================================
+// Helper Functions
+// ============================================================================
+
+/**
+ * Validates a file against size and type constraints
+ */
+function validateFile(
+  file: File,
+  accept: string,
+  maxFileSize: number,
+  t: ReturnType<typeof useTranslations>,
+  locale: 'en' | 'de',
+): string | null {
+  // Check file size
+  if (file.size > maxFileSize) {
+    return t('fileSizeError', { maxSize: formatFileSize(maxFileSize, locale) });
+  }
+
+  // Check file type
+  const allowedExtensions = getAllowedExtensions(accept);
+  const fileExtension = file.name.split('.').pop()?.toUpperCase();
+
+  if (fileExtension && !allowedExtensions.includes(fileExtension)) {
+    return t('fileTypeError');
+  }
+
+  return null;
+}
+
+/**
+ * Cleans up blob URL if it exists
+ */
+function revokeObjectURL(url: string | null) {
+  if (url && url.startsWith('blob:')) {
+    URL.revokeObjectURL(url);
+  }
+}
+
+// ============================================================================
+// Component
+// ============================================================================
+
+function DocumentUploadComponent({
+  label,
+  onChange,
+  onImageUploaded,
+  onError,
+  className,
+  errorMessage,
+  value,
+  hasError,
+  accept = 'image/*,.pdf',
+  maxSize,
+  deferUpload = false,
+}: DocumentUploadProps) {
+  const t = useTranslations('FileUpload');
+  const locale = useLocale() as 'en' | 'de';
+  const [previewUrl, setPreviewUrl] = useState<string | null>(value || null);
+  const [isDragOver, setIsDragOver] = useState(false);
+  const [validationError, setValidationError] = useState<string | null>(null);
+  const [isCompressing, setIsCompressing] = useState(false);
+  const [isUploading, setIsUploading] = useState(false);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  const maxFileSize = maxSize || FILE_CONFIG.MAX_FILE_SIZE;
+
+  // ============================================================================
+  // Effects
+  // ============================================================================
+
+  // Sync previewUrl with value prop from form
+  useEffect(() => {
+    if (value && typeof value === 'string') {
+      setPreviewUrl(value);
+    }
+  }, [value]);
+
+  // Cleanup object URLs on unmount or when preview changes
+  useEffect(() => {
+    return () => {
+      revokeObjectURL(previewUrl);
+    };
+  }, [previewUrl]);
+
+  // ============================================================================
+  // Handlers
+  // ============================================================================
+
+  const handleFileChange = useCallback(
+    async (file: File | null) => {
+      setValidationError(null);
+
+      if (file) {
+        try {
+          let processedFile = file;
+
+          // Compress image files before validation
+          if (file.type.startsWith('image/')) {
+            setIsCompressing(true);
+            const compressionOptions = getOptimalCompressionOptions(file);
+
+            processedFile = await compressImage(file, compressionOptions);
+            setIsCompressing(false);
+          }
+
+          const error = validateFile(processedFile, accept, maxFileSize, t, locale);
+
+          if (error) {
+            setValidationError(error);
+            setPreviewUrl(null);
+            onChange({
+              isValidationError: true,
+              errorMessage: error,
+            });
+            if (inputRef.current) {
+              inputRef.current.value = '';
+            }
+
+            return;
+          }
+
+          // Set preview immediately for better UX
+          const objectUrl = URL.createObjectURL(processedFile);
+          setPreviewUrl(objectUrl);
+          onChange(processedFile);
+
+          // Upload to Saleor if it's an image and deferUpload is false
+          if (!deferUpload && processedFile.type.startsWith('image/') && onImageUploaded) {
+            setIsUploading(true);
+
+            try {
+              const result = await uploadImageToSaleor(processedFile);
+
+              if (result.success && result.imageId && result.imageUrl) {
+                // Notify parent component with the uploaded image URL
+                onImageUploaded(result.imageId, result.imageUrl);
+                // Revoke the blob URL before setting the new URL
+                revokeObjectURL(previewUrl);
+                setPreviewUrl(result.imageUrl);
+              } else {
+                console.error('❌ Image upload failed:', result.error);
+                onError?.(result.error || t('uploadFailed'));
+                setValidationError(result.error || t('uploadFailed'));
+              }
+            } catch (uploadError) {
+              console.error('❌ Image upload error:', uploadError);
+              const errorMsg =
+                uploadError instanceof Error ? uploadError.message : t('uploadFailed');
+
+              onError?.(errorMsg);
+              setValidationError(errorMsg);
+            } finally {
+              setIsUploading(false);
+            }
+          }
+        } catch (compressionError) {
+          console.error('Image compression failed:', compressionError);
+          const errorMsg = t('compressionError');
+
+          setValidationError(errorMsg);
+          setPreviewUrl(null);
+          onChange({
+            isValidationError: true,
+            errorMessage: errorMsg,
+          });
+          if (inputRef.current) {
+            inputRef.current.value = '';
+          }
+          setIsCompressing(false);
+        }
+      } else {
+        onChange(file);
+        setPreviewUrl(file);
+      }
+    },
+    [accept, maxFileSize, onChange, onError, onImageUploaded, previewUrl, t, locale, deferUpload],
+  );
+
+  const handleChange = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      const file = e.target.files?.[0] || null;
+      handleFileChange(file);
+    },
+    [handleFileChange],
+  );
+
+  const handleDragOver = useCallback(
+    (e: DragEvent<HTMLDivElement>) => {
+      e.preventDefault();
+      if (!isCompressing && !isUploading) {
+        setIsDragOver(true);
+      }
+    },
+    [isCompressing, isUploading],
+  );
+
+  const handleDragLeave = useCallback((e: DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    setIsDragOver(false);
+  }, []);
+
+  const handleDrop = useCallback(
+    (e: DragEvent<HTMLDivElement>) => {
+      e.preventDefault();
+      setIsDragOver(false);
+
+      if (isCompressing || isUploading) {
+        return;
+      }
+
+      const files = e.dataTransfer.files;
+
+      if (files.length > 0) {
+        handleFileChange(files[0] || null);
+      }
+    },
+    [handleFileChange, isCompressing, isUploading],
+  );
+
+  const handleTriggerInput = useCallback(() => {
+    if (!isCompressing && !isUploading) {
+      inputRef.current?.click();
+    }
+  }, [isCompressing, isUploading]);
+
+  const handleRemoveFile = useCallback(() => {
+    setValidationError(null);
+    if (inputRef.current) {
+      inputRef.current.value = '';
+    }
+    handleTriggerInput();
+  }, [handleTriggerInput]);
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLDivElement>) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        handleTriggerInput();
+      }
+    },
+    [handleTriggerInput],
+  );
+
+  // ============================================================================
+  // Render
+  // ============================================================================
+
+  return (
+    <div
+      className={clsx(
+        'relative flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden border border-dashed border-default-200 p-4 transition-all duration-200 hover:border-default-500',
+        CONTAINER_HEIGHT,
+        {
+          'border-danger!': hasError || validationError,
+          'border-default-500! bg-default-50!': isDragOver,
+          'border-transparent!': previewUrl,
+          'hover:border-default-300':
+            !hasError && !isDragOver && !validationError && !isCompressing && !isUploading,
+          'cursor-not-allowed! opacity-60': isCompressing || isUploading,
+        },
+        className,
+      )}
+      role="button"
+      tabIndex={0}
+      onClick={handleTriggerInput}
+      onDragLeave={handleDragLeave}
+      onDragOver={handleDragOver}
+      onDrop={handleDrop}
+      onKeyDown={handleKeyDown}
+    >
+      {/* Background Image */}
+      {previewUrl && (
+        <>
+          <Image fill alt="Preview" className="object-cover" src={previewUrl} />
+          {/* Dark Overlay */}
+          <div className="absolute inset-0 bg-black/30" />
+        </>
+      )}
+
+      {/* Content */}
+      <div className="relative z-10 flex flex-col items-center justify-center">
+        <div className="flex items-center justify-center">
+          {isCompressing || isUploading ? (
+            <Spinner color="white" />
+          ) : (
+            !previewUrl && (
+              <Icon
+                className={clsx(ICON_SIZE, 'stroke-default-700 stroke-1.5', {
+                  'stroke-danger!': hasError || validationError,
+                })}
+                name="UploadIcon"
+              />
+            )
+          )}
+        </div>
+        <input
+          ref={inputRef}
+          accept={accept}
+          className="hidden"
+          type="file"
+          onChange={handleChange}
+        />
+        <div className="mt-2 flex flex-col items-center justify-center text-center">
+          {isCompressing || isUploading ? null : (
+            <span
+              className={clsx('text-base leading-6 font-semibold', {
+                'text-white': previewUrl,
+                'text-default-800': !previewUrl,
+              })}
+            >
+              {label}
+            </span>
+          )}
+          {(hasError || validationError) && (
+            <span className="mt-0.5 text-sm leading-5 font-medium text-danger">
+              {validationError || errorMessage}
+            </span>
+          )}
+          {!hasError && !validationError && (
+            <p
+              className={clsx('mt-0.5 text-sm leading-5 font-medium', {
+                'text-white': previewUrl,
+                'text-default-600': !previewUrl,
+              })}
+            >
+              {isCompressing
+                ? t('compressing')
+                : isUploading
+                  ? t('uploading')
+                  : previewUrl
+                    ? null
+                    : t('clickOrDrag')}
+            </p>
+          )}
+          {!previewUrl && (
+            <p className="mt-3 text-xs leading-4 font-medium text-default-500">
+              {getFileInfoText(accept, maxFileSize, locale, t('format'), t('max'))}
+            </p>
+          )}
+          {previewUrl && !isCompressing && !isUploading && (
+            <Button
+              className="mt-2 bg-white text-primary"
+              size="sm"
+              variant="solid"
+              onClick={e => e.stopPropagation()}
+              onPress={handleRemoveFile}
+            >
+              {t('changeImage')}
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export const DocumentUpload = memo(DocumentUploadComponent);

package/templates/boilerplate/components/ui/Icon.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import type { SVGProps } from 'react';
+
+import { memo } from 'react';
+
+import clsx from 'clsx';
+
+import * as Icons from '@/components/icons';
+
+export type IconName = keyof typeof Icons;
+
+/**
+ * Icon component for displaying SVG icons
+ *
+ * @example
+ * // Single color icon (default: size-5, stroke-1.5)
+ * <Icon name="HeartIcon" className="stroke-blue-500" />
+ *
+ * @example
+ * // Two-tone icon with nth-child selectors
+ * <Icon
+ *   name="CheckBookmarkIcon"
+ *   className="[&_path:nth-child(1)]:stroke-primary [&_path:nth-child(2)]:stroke-default-300"
+ * />
+ */
+export type IconProps = {
+  name: IconName;
+} & SVGProps<SVGSVGElement>;
+
+const IconComponent = ({ name, className = '', ...props }: IconProps) => {
+  const Component = Icons[name];
+
+  if (!Component) {
+    return null;
+  }
+
+  return <Component className={clsx('size-4 stroke-1.5 outline-none', className)} {...props} />;
+};
+
+IconComponent.displayName = 'Icon';
+
+export const Icon = memo(IconComponent);

package/templates/boilerplate/components/ui/Input.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import type { ComponentProps } from 'react';
+
+import { extendVariants, Input as HerouiInput } from '@heroui/react';
+
+const BaseInput = extendVariants(HerouiInput, {
+  variants: {
+    color: {},
+    isDisabled: { true: {} },
+    size: {
+      sm: {},
+      md: {},
+      lg: {},
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+  compoundVariants: [],
+});
+
+const Input = (props: ComponentProps<typeof BaseInput>) => {
+  return <BaseInput {...props} />;
+};
+
+export { Input };

package/templates/boilerplate/components/ui/Modal.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import type { ComponentProps } from 'react';
+
+import {
+  extendVariants,
+  Modal as HeroUIModal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+} from '@heroui/react';
+
+import { Button } from './Button';
+import { Icon } from './Icon';
+
+const Modal = extendVariants(HeroUIModal, {
+  slots: {
+    backdrop: '',
+    base: '',
+    wrapper: '',
+    body: '',
+    closeButton: '',
+  },
+  variants: {
+    radius: {},
+  },
+  defaultVariants: {
+    radius: 'none',
+    shadow: 'none',
+    placement: 'center',
+    backdrop: 'blur',
+  },
+});
+
+const CustomModal = (props: ComponentProps<typeof Modal>) => {
+  const { ...restProps } = props;
+
+  return (
+    <Modal
+      closeButton={
+        <Button isIconOnly size="sm" variant="flat">
+          <Icon name="CloseIcon" className="size-5! stroke-default-700" />
+        </Button>
+      }
+      {...restProps}
+    />
+  );
+};
+
+export { CustomModal as Modal, ModalBody, ModalContent, ModalFooter, ModalHeader };

package/templates/boilerplate/components/ui/NumberInput.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import type { ChangeEvent, ComponentProps } from 'react';
+
+import { Input } from './Input';
+
+type NumberInputProps = {
+  formatOptions?: Intl.NumberFormatOptions;
+  onValueChange?: (value: string) => void;
+};
+
+const NumberInput = (props: ComponentProps<typeof Input> & NumberInputProps) => {
+  const { value, onChange, onValueChange, formatOptions, ...restProps } = props;
+
+  const handleInput = (e: ChangeEvent<HTMLInputElement>) => {
+    let rawInput = e.target.value;
+
+    if (rawInput.startsWith(' ')) {
+      rawInput = rawInput.trimStart();
+      e.target.value = rawInput;
+    }
+
+    const processedInput = rawInput.replace(/\D/g, '');
+
+    if (processedInput !== rawInput) {
+      e.target.value = processedInput;
+    }
+
+    if (onChange && typeof onChange === 'function') {
+      const newEvent = {
+        ...e,
+        target: {
+          ...e.target,
+          value: processedInput,
+        },
+      };
+
+      onChange(newEvent);
+    }
+
+    if (onValueChange) {
+      if (processedInput === '') {
+        onValueChange('');
+      } else {
+        onValueChange(processedInput);
+      }
+    }
+  };
+
+  // Apply number formatting if formatOptions are provided
+  const formattedValue =
+    formatOptions && value
+      ? new Intl.NumberFormat(undefined, formatOptions).format(Number(value))
+      : value;
+
+  return <Input type="text" value={formattedValue} onInput={handleInput} {...restProps} />;
+};
+
+export { NumberInput };

package/templates/boilerplate/components/ui/PasswordInput.tsx

@@ -0,0 +1,51 @@
+'use client';
+import type { ComponentProps, FormEvent } from 'react';
+
+import { useState } from 'react';
+
+import { Button } from './Button';
+import { Icon } from './Icon';
+import { Input } from './Input';
+
+const PasswordInput = (props: ComponentProps<typeof Input>) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const { onInput, ...restProps } = props;
+
+  const toggleVisibility = () => setIsVisible(!isVisible);
+
+  const handleInput = (e: FormEvent<HTMLInputElement>) => {
+    const target = e.target as HTMLInputElement;
+
+    if (target.value.startsWith(' ')) {
+      target.value = target.value.trimStart();
+    }
+
+    if (onInput) {
+      onInput(e);
+    }
+  };
+
+  return (
+    <Input
+      endContent={
+        <Button
+          size="sm"
+          variant="light"
+          aria-label="toggle password visibility"
+          className="min-w-0 self-center focus:outline-none"
+          onPress={toggleVisibility}
+        >
+          <Icon
+            name={isVisible ? 'EyeSlashIcon' : 'EyeIcon'}
+            className="pointer-events-none size-4 stroke-default-400 stroke-1.5"
+          />
+        </Button>
+      }
+      type={isVisible ? 'text' : 'password'}
+      onInput={handleInput}
+      {...restProps}
+    />
+  );
+};
+
+export { PasswordInput };

package/templates/boilerplate/components/ui/RadioGroup.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import type { ComponentProps } from 'react';
+
+import {
+  extendVariants,
+  Radio as HerouiRadio,
+  RadioGroup as HerouiRadioGroup,
+} from '@heroui/react';
+
+const RadioGroup = extendVariants(HerouiRadioGroup, {
+  variants: {
+    orientation: {
+      vertical: {
+        wrapper: '',
+      },
+      horizontal: {
+        wrapper: '',
+      },
+    },
+  },
+  defaultVariants: {
+    orientation: 'horizontal',
+  },
+});
+
+const BaseRadio = extendVariants(HerouiRadio, {
+  variants: {
+    color: {},
+    isDisabled: { true: {} },
+    size: {
+      sm: {},
+      md: {},
+      lg: {},
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+  compoundVariants: [],
+});
+
+type RadioProps = ComponentProps<typeof BaseRadio>;
+const Radio = (props: RadioProps) => {
+  const { ...restProps } = props;
+
+  return <BaseRadio {...restProps}>{restProps.children}</BaseRadio>;
+};
+
+export { Radio, RadioGroup };