@adlas/create-app 1.0.0

package/templates/boilerplate/styles/globals.css

@@ -0,0 +1,308 @@
+@import 'tailwindcss';
+@plugin './hero.ts';
+@source '../../node_modules/@heroui/theme/dist';
+
+@custom-variant dark (&:is(.dark *));
+@custom-variant max-2xl (@media (max-width: 1440px));
+@custom-variant max-xl (@media (max-width: 1280px));
+@custom-variant max-lg (@media (max-width: 1024px));
+@custom-variant max-md (@media (max-width: 768px));
+@custom-variant max-sm (@media (max-width: 640px));
+@custom-variant max-xs (@media (max-width: 480px));
+@custom-variant max-2xs (@media (max-width: 390px));
+
+@theme {
+  /* Fonts */
+  --font-raleway: Raleway, sans-serif;
+  --font-inter: Inter, sans-serif;
+  --font-waterbrush: Waterbrush, sans-serif;
+  --default-font-family: var(--font-raleway);
+
+  /* Custom font sizes */
+  --text-2xs: 0.625rem;
+
+  /* Line heights */
+  --full: 100%;
+
+  /* Stroke widths */
+  --stroke-width-1.5: 1.5px;
+
+  /* Custom box shadows */
+  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.08);
+
+  --shadow-carousel: 0 4px 16px rgba(0, 0, 0, 0.1);
+
+  /* Custom breakpoints for mobile-first utilities (min-width) */
+  --breakpoint-2xs: 390px;
+  --breakpoint-xs: 480px;
+  /* Standard Tailwind breakpoints stay at defaults for min-width utilities */
+  /* Use max-* variants for desktop-first approach (max-width) */
+
+  --color-default-25: #fcfcfc;
+  --color-danger-25: #f8e9e7;
+  --color-success-25: #e9f9ed;
+  --color-warning-25: #fefce8;
+  --color-info-25: #e8f4f9;
+  --color-info-50: #d6ebf5;
+  --color-info-100: #add7eb;
+  --color-info-200: #85c3e1;
+  --color-info-300: #5cafd7;
+  --color-info-400: #339bcd;
+  --color-info-500: #2a7ca4;
+  --color-info-600: #215d7b;
+  --color-info-700: #183e52;
+  --color-info-800: #0f1f29;
+  --color-info-900: #060f14;
+  --color-info-DEFAULT: #2a7ca4;
+
+  /* Tertiary colors - Light theme */
+  --color-tertiary-50: #faf8f9;
+  --color-tertiary-100: #f5f0f3;
+  --color-tertiary-200: #ebe1e6;
+  --color-tertiary-300: #e0d2da;
+  --color-tertiary-400: #d2bbc5;
+  --color-tertiary-500: #c4a4b0;
+  --color-tertiary-600: #a8849a;
+  --color-tertiary-700: #8a6a7e;
+  --color-tertiary-800: #6d5364;
+  --color-tertiary-900: #523e4b;
+  --color-tertiary: #d2bbc5;
+
+  /* Custom animations */
+  --animate-flash: flash 1s ease-in-out 3;
+  --animate-scale-in: scale-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
+
+  @keyframes flash {
+    0%,
+    100% {
+      background-color: transparent;
+    }
+    50% {
+      background-color: rgb(244 244 245);
+    }
+  }
+
+  @keyframes scale-in {
+    0% {
+      transform: scale(0);
+      opacity: 0;
+    }
+    100% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+}
+
+@theme dark {
+  /* Tertiary colors - Dark theme */
+  --color-tertiary-50: #523e4b;
+  --color-tertiary-100: #6d5364;
+  --color-tertiary-200: #8a6a7e;
+  --color-tertiary-300: #a8849a;
+  --color-tertiary-400: #c4a4b0;
+  --color-tertiary-500: #d2bbc5;
+  --color-tertiary-600: #e0d2da;
+  --color-tertiary-700: #ebe1e6;
+  --color-tertiary-800: #f5f0f3;
+  --color-tertiary-900: #faf8f9;
+  --color-tertiary: #d2bbc5;
+}
+
+#__next {
+  @apply flex h-full flex-col overflow-x-hidden;
+}
+
+@layer base {
+  html {
+    @apply h-full w-full;
+    padding-top: env(safe-area-inset-top);
+    padding-bottom: env(safe-area-inset-bottom);
+    padding-left: env(safe-area-inset-left);
+    padding-right: env(safe-area-inset-right);
+  }
+
+  body {
+    @apply bg-background text-primary h-dvh w-full antialiased;
+  }
+
+  * {
+    -webkit-tap-highlight-color: transparent;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-appearance: none !important;
+    appearance: none !important;
+  }
+
+  /* Remove outline from all HeroUI components */
+  [data-slot] {
+    outline: none !important;
+  }
+
+  button:focus,
+  input:focus,
+  textarea:focus,
+  select:focus,
+  [role='button']:focus,
+  [role='checkbox']:focus,
+  [role='radio']:focus,
+  [role='switch']:focus,
+  [role='slider']:focus,
+  [role='tab']:focus {
+    outline: none !important;
+  }
+
+  /* Remove Tailwind ring utilities */
+  .ring,
+  .ring-0,
+  .ring-1,
+  .ring-2,
+  .ring-3,
+  .ring-4,
+  .ring-8,
+  [class*='ring-'],
+  [class*='focus:ring'],
+  [class*='focus-visible:ring'] {
+    --tw-ring-shadow: 0 0 #0000 !important;
+    --tw-ring-offset-shadow: 0 0 #0000 !important;
+    box-shadow: none !important;
+  }
+
+  *::-webkit-scrollbar {
+    @apply h-1 w-1;
+  }
+
+  *::-webkit-scrollbar-track {
+    @apply bg-default-50 w-1;
+  }
+
+  *::-webkit-scrollbar-thumb {
+    @apply bg-default-300 rounded-md border-0;
+  }
+}
+
+@layer utilities {
+  .auth-container {
+    @apply mx-auto flex min-h-full max-w-444 flex-1 flex-row;
+  }
+
+  .dashboard-container {
+    @apply mx-auto my-18 box-border flex w-full max-w-310 flex-col gap-16;
+    @apply max-lg:max-w-full max-lg:px-4 max-md:my-10 max-md:gap-10;
+    @apply max-2xs:gap-6 max-xs:my-10 max-xs:gap-10 max-xs:px-4 max-2xs:my-6;
+  }
+  .navbar-container {
+    @apply mx-auto my-0 box-border flex max-w-7xl flex-row items-center justify-between;
+  }
+
+  .footer-container {
+    @apply bg-primary mx-auto flex w-full max-w-281 flex-col items-center py-20;
+  }
+
+  .web-container {
+    @apply max-xs:px-4 mx-auto my-0 box-border flex w-full max-w-324 flex-col px-20 max-lg:px-12 max-md:px-8 max-sm:px-6;
+  }
+
+  .header-title {
+    @apply mt-15 mb-12 text-4xl font-medium max-lg:my-8 max-lg:text-3xl;
+  }
+
+  /* Toast Styles - Sonner */
+  [data-sonner-toast] {
+    @apply shadow-card! font-raleway! rounded-none! border-1!;
+  }
+
+  [data-sonner-toast][data-type='success'] {
+    @apply bg-success-25! border-success! text-success-900!;
+  }
+
+  [data-sonner-toast][data-type='success'] [data-icon] {
+    @apply text-success!;
+  }
+
+  [data-sonner-toast][data-type='error'] {
+    @apply bg-danger-25! border-danger! text-danger-900!;
+  }
+
+  [data-sonner-toast][data-type='error'] [data-icon] {
+    @apply text-danger!;
+  }
+
+  [data-sonner-toast][data-type='warning'] {
+    @apply bg-warning-25! border-warning! text-warning-900!;
+  }
+
+  [data-sonner-toast][data-type='warning'] [data-icon] {
+    @apply text-warning-700!;
+  }
+
+  [data-sonner-toast][data-type='info'] {
+    @apply bg-info-25! border-info-DEFAULT! text-info-900!;
+  }
+
+  [data-sonner-toast][data-type='info'] [data-icon] {
+    @apply text-info-DEFAULT!;
+  }
+
+  /* Toast description styling */
+  [data-sonner-toast] [data-description] {
+    @apply text-current! opacity-80!;
+  }
+
+  /* Toast button styling */
+  [data-sonner-toast] [data-button] {
+    @apply text-background! bg-current!;
+  }
+
+  /* Toast close button */
+  [data-sonner-toast] [data-close-button] {
+    @apply border-current! bg-transparent! text-current! hover:bg-current/10!;
+  }
+
+  .leaflet-container {
+    @apply h-full w-full flex-1;
+  }
+
+  /* Grayscale filter for the entire map */
+  .leaflet-tile-pane {
+    filter: grayscale(100%) brightness(1.1) contrast(0.9);
+  }
+
+  /* Remove default marker styling */
+  .store-marker,
+  .store-marker-selected {
+    @apply border-none! bg-transparent!;
+  }
+
+  /* Zoom control styling */
+  .leaflet-control-zoom {
+    @apply border-primary! border-1!;
+  }
+
+  .leaflet-control-zoom a {
+    @apply text-primary! border-none! bg-white!;
+  }
+
+  .leaflet-control-zoom a:hover {
+    @apply bg-secondary!;
+  }
+
+  /* Attribution styling */
+  .leaflet-control-attribution {
+    @apply hidden!;
+  }
+
+  .tickCircleFillIcon {
+    @apply [&_path]:stroke-background [&_rect]:fill-success;
+  }
+
+  /* Editor.js content link styling */
+  .editor-js-content a {
+    @apply text-primary decoration-primary hover:text-primary/80 underline underline-offset-4 transition-all duration-200;
+  }
+
+  /* Animation utilities */
+  .animate-flash {
+    animation: var(--animate-flash);
+  }
+}

package/templates/boilerplate/types/i18n.ts

@@ -0,0 +1,10 @@
+import type { routing } from '@/libs/I18nRouting';
+import type messages from '@/locales/en.json';
+
+declare module 'next-intl' {
+  // eslint-disable-next-line ts/consistent-type-definitions
+  interface AppConfig {
+    Locale: (typeof routing.locales)[number];
+    Messages: typeof messages;
+  }
+}

package/templates/boilerplate/types/locale.ts

@@ -0,0 +1,8 @@
+export const Locales = {
+  EN: 'en',
+  DE: 'de',
+} as const;
+
+export type Locale = (typeof Locales)[keyof typeof Locales];
+
+export const LOCALES = [Locales.EN, Locales.DE] as const;

package/templates/boilerplate/utils/file/fileConfig.ts

@@ -0,0 +1,123 @@
+import { siteConfig } from '@/config/site';
+
+export const FILE_CONFIG = {
+  MAX_FILE_SIZE: 10 * 1024 * 1024, // 10MB in bytes
+  ALLOWED_EXTENSIONS: {
+    IMAGES: ['JPG', 'JPEG', 'PNG', 'WEBP', 'HEIC', 'JPEG', 'HEIF', 'AVIF'],
+    DOCUMENTS: ['PDF', 'DOC', 'DOCX'],
+    VIDEOS: ['MP4', 'MOV', 'AVI', 'MKV', 'WMV', 'FLV', 'WEBM'],
+    AUDIO: ['MP3', 'WAV', 'OGG', 'AAC'],
+  },
+  MIME_TYPE_EXTENSIONS: {
+    'image/*': ['JPG', 'PNG', 'WEBP', 'HEIC', 'JPEG', 'HEIF', 'AVIF'],
+    'application/pdf': ['PDF'],
+    'video/*': ['MP4', 'MOV', 'AVI', 'MKV', 'WEBM'],
+    'audio/*': ['MP3', 'WAV', 'OGG'],
+  },
+} as const;
+
+// File size units for different locales
+const FILE_SIZE_UNITS = {
+  en: ['Bytes', 'KB', 'MB', 'GB'],
+  de: ['Bytes', 'KB', 'MB', 'GB'],
+} as const;
+
+// Helper function to format file size
+export const formatFileSize = (bytes: number, locale: 'en' | 'de' = 'en'): string => {
+  if (bytes === 0) {
+    return `0 ${FILE_SIZE_UNITS[locale][0]}`;
+  }
+
+  const k = 1024;
+  const sizes = FILE_SIZE_UNITS[locale];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  const size = Number.parseFloat((bytes / k ** i).toFixed(1));
+
+  return `${size} ${sizes[i]}`;
+};
+
+// Helper function to get allowed extensions from accept string
+export const getAllowedExtensions = (accept: string): string[] => {
+  const acceptTypes = accept.split(',').map(type => type.trim());
+  const extensions = new Set<string>();
+
+  acceptTypes.forEach(type => {
+    if (type.includes('.')) {
+      // Direct extension like .pdf, .jpg
+      extensions.add(type.replace('.', '').toUpperCase());
+    } else if (
+      FILE_CONFIG.MIME_TYPE_EXTENSIONS[type as keyof typeof FILE_CONFIG.MIME_TYPE_EXTENSIONS]
+    ) {
+      // MIME type like image/*, video/*
+      const typeExtensions =
+        FILE_CONFIG.MIME_TYPE_EXTENSIONS[type as keyof typeof FILE_CONFIG.MIME_TYPE_EXTENSIONS];
+
+      typeExtensions.forEach(ext => extensions.add(ext));
+    }
+  });
+
+  return Array.from(extensions).sort();
+};
+
+// Helper function to generate file info text
+export const getFileInfoText = (
+  accept: string,
+  maxSize?: number,
+  locale: 'en' | 'de' = 'en',
+  formatLabel?: string,
+  maxLabel?: string,
+): string => {
+  const allowedExtensions = getAllowedExtensions(accept);
+  const maxFileSize = maxSize || FILE_CONFIG.MAX_FILE_SIZE;
+  const formattedSize = formatFileSize(maxFileSize, locale);
+
+  const format = formatLabel || (locale === siteConfig.locales[1] ? 'Format' : 'Format');
+  const max = maxLabel || (locale === siteConfig.locales[1] ? 'max' : 'max');
+
+  return `${format}: ${allowedExtensions.join(', ')} (${max} ${formattedSize})`;
+};
+
+const FILE_TYPES = {
+  IMAGES: {
+    ALL: 'image/*',
+    JPEG: 'image/jpeg',
+    JPG: 'image/jpg', // Non-standard but used by some browsers
+    PNG: 'image/png',
+    WEBP: 'image/webp',
+    AVIF: 'image/avif',
+    HEIC: 'image/heic',
+    HEIF: 'image/heif',
+    GIF: 'image/gif',
+    SVG: 'image/svg+xml',
+    BMP: 'image/bmp',
+  },
+  DOCUMENTS: {
+    PDF: 'application/pdf',
+    DOC: 'application/msword',
+    DOCX: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+  },
+  VIDEOS: {
+    ALL: 'video/*',
+    MP4: 'video/mp4',
+    MOV: 'video/quicktime',
+    AVI: 'video/x-msvideo',
+    MKV: 'video/x-matroska',
+    WMV: 'video/x-ms-wmv',
+    FLV: 'video/x-flv',
+    WEBM: 'video/webm',
+  },
+  AUDIO: {
+    ALL: 'audio/*',
+    MP3: 'audio/mpeg',
+    WAV: 'audio/wav',
+    OGG: 'audio/ogg',
+  },
+} as const;
+
+export const ACCEPT_TYPES = {
+  IMAGES_ONLY: FILE_TYPES.IMAGES.ALL,
+  IMAGES_AND_PDF: `${FILE_TYPES.IMAGES.ALL},${FILE_TYPES.DOCUMENTS.PDF}`,
+  VIDEOS_ONLY: FILE_TYPES.VIDEOS.ALL,
+  DOCUMENTS_ONLY: FILE_TYPES.DOCUMENTS.PDF,
+  ALL_MEDIA: `${FILE_TYPES.IMAGES.ALL},${FILE_TYPES.VIDEOS.ALL},${FILE_TYPES.DOCUMENTS.PDF}`,
+} as const;

package/templates/boilerplate/utils/file/fileValidation.ts

@@ -0,0 +1,78 @@
+import { FILE_CONFIG } from './fileConfig';
+
+/**
+ * Result of image validation
+ */
+type ImageValidationResult = {
+  valid: boolean;
+  error?: string;
+};
+
+/**
+ * Type for i18n translation function (next-intl compatible)
+ */
+type TranslationFunction = (key: string, params?: Record<string, string | number>) => string;
+
+/**
+ * Sanitize filename to prevent path traversal and other security issues
+ * @param filename - The original filename
+ * @returns Sanitized filename
+ */
+export function sanitizeFilename(filename: string): string {
+  // Remove any path components
+  const name = filename.split('/').pop()?.split('\\').pop() || 'upload';
+
+  // Remove special characters except dots and hyphens
+  const sanitized = name.replace(/[^a-z0-9.-]/gi, '_');
+
+  // If no extension, add .jpg as default
+  const hasExtension = sanitized.includes('.') && sanitized.split('.').length > 1;
+
+  if (!hasExtension) {
+    return `${sanitized}.jpg`;
+  }
+
+  return sanitized;
+}
+
+/**
+ * Validate image file for Saleor upload
+ *
+ * Validates against Saleor's supported image formats:
+ * - JPEG/JPG
+ * - PNG
+ * - WebP
+ *
+ * Also checks file size (max 10MB from FILE_CONFIG)
+ *
+ * @param file - The file to validate
+ * @param t - Translation function for error messages (optional)
+ * @returns Validation result with error message if invalid
+ */
+export function validateImageFile(file: File, t?: TranslationFunction): ImageValidationResult {
+  // Check if file is an image (Saleor accepts any image/* MIME type)
+  if (!file.type.startsWith('image/')) {
+    return {
+      valid: false,
+      error: t
+        ? t('imageFileTypeError')
+        : 'File must be an image. Please upload a valid image file.',
+    };
+  }
+
+  // Check file size
+  if (file.size > FILE_CONFIG.MAX_FILE_SIZE) {
+    const maxSizeMB = FILE_CONFIG.MAX_FILE_SIZE / (1024 * 1024);
+
+    return {
+      valid: false,
+      error: t
+        ? t('imageSizeError', { maxSize: maxSizeMB.toString() })
+        : `Image file size exceeds ${maxSizeMB}MB limit.`,
+    };
+  }
+
+  // No extension check needed - we trust the MIME type
+  // This allows files without extensions (like macOS screenshots)
+  return { valid: true };
+}

package/templates/boilerplate/utils/file/imageCompression.ts

@@ -0,0 +1,182 @@
+/**
+ * Image compression utility for reducing file size while maintaining quality
+ */
+
+type CompressionOptions = {
+  maxWidth?: number;
+  maxHeight?: number;
+  quality?: number;
+  maxSizeKB?: number;
+  outputFormat?: 'jpeg' | 'webp' | 'png';
+};
+
+const DEFAULT_OPTIONS: Required<CompressionOptions> = {
+  maxWidth: 1920,
+  maxHeight: 1080,
+  quality: 0.8,
+  maxSizeKB: 2 * 1024, // 2MB
+  outputFormat: 'jpeg',
+};
+
+/**
+ * Compresses an image file by resizing and adjusting quality
+ */
+export async function compressImage(file: File, options: CompressionOptions = {}): Promise<File> {
+  const opts = { ...DEFAULT_OPTIONS, ...options };
+
+  // Skip compression for non-image files
+  if (!file.type.startsWith('image/')) {
+    return file;
+  }
+
+  // Skip compression if file is already small enough
+  if (file.size <= opts.maxSizeKB * 1024) {
+    return file;
+  }
+
+  return new Promise((resolve, reject) => {
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    const img = new Image();
+
+    if (!ctx) {
+      reject(new Error('Canvas context not available'));
+
+      return;
+    }
+
+    img.onload = () => {
+      try {
+        // Calculate new dimensions while maintaining aspect ratio
+        const { width: newWidth, height: newHeight } = calculateDimensions(
+          img.width,
+          img.height,
+          opts.maxWidth,
+          opts.maxHeight,
+        );
+
+        // Set canvas dimensions
+        canvas.width = newWidth;
+        canvas.height = newHeight;
+
+        // Draw and compress the image
+        ctx.drawImage(img, 0, 0, newWidth, newHeight);
+
+        // Convert to blob with compression
+        canvas.toBlob(
+          blob => {
+            if (!blob) {
+              reject(new Error('Failed to compress image'));
+
+              return;
+            }
+
+            // Create new file with compressed data
+            const compressedFile = new File(
+              [blob],
+              getCompressedFileName(file.name, opts.outputFormat),
+              {
+                type: `image/${opts.outputFormat}`,
+                lastModified: Date.now(),
+              },
+            );
+
+            // If still too large, try with lower quality
+            if (compressedFile.size > opts.maxSizeKB * 1024 && opts.quality > 0.3) {
+              const lowerQualityOptions = { ...opts, quality: opts.quality * 0.7 };
+
+              compressImage(file, lowerQualityOptions).then(resolve).catch(reject);
+            } else {
+              resolve(compressedFile);
+            }
+          },
+          `image/${opts.outputFormat}`,
+          opts.quality,
+        );
+      } catch (error) {
+        reject(error);
+      }
+    };
+
+    img.onerror = () => {
+      reject(new Error('Failed to load image'));
+    };
+
+    // Load the image
+    img.src = URL.createObjectURL(file);
+  });
+}
+
+/**
+ * Calculate new dimensions while maintaining aspect ratio
+ */
+function calculateDimensions(
+  originalWidth: number,
+  originalHeight: number,
+  maxWidth: number,
+  maxHeight: number,
+): { width: number; height: number } {
+  const { width, height } = { width: originalWidth, height: originalHeight };
+
+  // If image is smaller than max dimensions, don't upscale
+  if (width <= maxWidth && height <= maxHeight) {
+    return { width, height };
+  }
+
+  // Calculate scaling factor
+  const widthRatio = maxWidth / width;
+  const heightRatio = maxHeight / height;
+  const scalingFactor = Math.min(widthRatio, heightRatio);
+
+  return {
+    width: Math.round(width * scalingFactor),
+    height: Math.round(height * scalingFactor),
+  };
+}
+
+/**
+ * Generate compressed file name
+ */
+function getCompressedFileName(originalName: string, outputFormat: string): string {
+  const nameWithoutExtension = originalName.replace(/\.[^/.]+$/, '');
+
+  return `${nameWithoutExtension}_compressed.${outputFormat}`;
+}
+
+/**
+ * Get optimal compression options based on file size and type
+ */
+export function getOptimalCompressionOptions(file: File): CompressionOptions {
+  const fileSizeKB = file.size / 1024;
+
+  // For very large files, use more aggressive compression
+  if (fileSizeKB > 2000) {
+    return {
+      maxWidth: 1280,
+      maxHeight: 720,
+      quality: 0.7,
+      maxSizeKB: 400,
+      outputFormat: 'jpeg',
+    };
+  }
+
+  // For medium files, moderate compression
+  if (fileSizeKB > 1000) {
+    return {
+      maxWidth: 1600,
+      maxHeight: 900,
+      quality: 0.8,
+      maxSizeKB: 500,
+      outputFormat: 'jpeg',
+    };
+  }
+
+  // For smaller files, light compression
+  return {
+    maxWidth: 1920,
+    maxHeight: 1080,
+    quality: 0.85,
+    maxSizeKB: 600,
+    outputFormat: 'jpeg',
+  };
+}