@adlas/create-app 1.0.11 → 1.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adlas/create-app",
-  "version": "1.0.11",
+  "version": "1.0.13",
   "description": "Adlas project initializer with Figma and Swagger integration",
   "type": "module",
   "main": "./dist/cli.js",

package/templates/boilerplate/assets/icons/chevron-down-icon.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M4 6L8 10L12 6" stroke="#000" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/templates/boilerplate/components/icons/ChevronDownIcon.tsx

@@ -0,0 +1,8 @@
+import type { SVGProps } from 'react';
+
+const ChevronDownIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg viewBox="0 0 16 16" fill="none" stroke="foreground" width="1em" height="1em" {...props}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="m4 6 4 4 4-4" />
+  </svg>
+);
+export default ChevronDownIcon;

package/templates/boilerplate/components/icons/index.ts

@@ -0,0 +1 @@
+export { default as ChevronDownIcon } from './ChevronDownIcon';

package/templates/boilerplate/components/ui/form/Form.tsx

@@ -15,8 +15,6 @@ import type { FormFieldValidation } from '@/validations';
 
 import { createZodErrorMap } from '@/validations/zodErrorMap';
 
-import type { FileValidationError } from '../DocumentUpload';
-
 import { FormContext } from './FormContext';
 
 /**
@@ -87,7 +85,7 @@ type FormProps<T extends FieldValues> = {
 
 export type FieldEvent = {
   target?: {
-    value?: string | File | FileValidationError | null;
+    value?: string | File | null;
   };
 };
 

package/templates/boilerplate/components/ui/index.ts

@@ -4,7 +4,6 @@ export * from './Button';
 export * from './Checkbox';
 export * from './Chip';
 export * from './DatePicker';
-export * from './DocumentUpload';
 export * from './form/Form';
 export * from './form/FormContext';
 export * from './form/FormGenerator';

package/templates/boilerplate/validations/commonValidations.ts

@@ -2,8 +2,6 @@ import type { useTranslations } from 'next-intl';
 
 import { z } from 'zod';
 
-import type { FileValidationError } from '@/components/ui';
-
 // ==================== Types ====================
 
 /**
@@ -176,22 +174,10 @@ export function optional<T extends z.ZodTypeAny>(schema: T) {
   return schema.optional().or(z.literal(''));
 }
 
-/**
- * Type guard for file validation errors
- */
-const isFileValidationError = (value: unknown): value is FileValidationError => {
-  return (
-    typeof value === 'object' &&
-    value !== null &&
-    'isValidationError' in value &&
-    value.isValidationError === true
-  );
-};
-
 /**
  * Valid file input types for validation
  */
-type FileInput = File | string | FileValidationError | null | undefined;
+type FileInput = File | string | null | undefined;
 
 /**
  * Creates a file validation schema with i18n support
@@ -200,13 +186,6 @@ type FileInput = File | string | FileValidationError | null | undefined;
 export const createFileValidation = (required = false) =>
   z.custom<FileInput>().superRefine((value, ctx) => {
     // Handle validation error objects
-    if (isFileValidationError(value)) {
-      ctx.addIssue({
-        code: 'custom',
-        message: value.errorMessage,
-      });
-      return;
-    }
 
     // If required, reject null/undefined/empty string
     if (required && !value) {

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

@@ -1,415 +0,0 @@
-'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);