@getmicdrop/svelte-components 5.3.15 → 5.4.0

package/dist/recipes/ImageUploader/ImageUploader.stories.svelte

@@ -1,125 +1,125 @@
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import ImageUploader from './ImageUploader.svelte';
-
-  const { Story } = defineMeta({
-    title: 'Recipes/ImageUploader',
-    component: ImageUploader,
-    tags: ['autodocs'],
-    argTypes: {
-      shape: {
-        control: 'select',
-        options: ['square', 'wide'],
-        description: 'Shape of the dropzone/images',
-      },
-      maxImages: {
-        control: { type: 'number', min: 1, max: 12 },
-        description: 'Maximum number of images (1 for single mode)',
-      },
-      enableCrop: {
-        control: 'boolean',
-        description: 'Enable cropping step after file selection',
-      },
-      enableReorder: {
-        control: 'boolean',
-        description: 'Enable drag-to-reorder in multi-image mode',
-      },
-      showMainBadge: {
-        control: 'boolean',
-        description: 'Show "Main" badge on first image in multi mode',
-      },
-    },
-  });
-
-  // Mock upload function
-  async function mockUpload(file) {
-    await new Promise((resolve) => setTimeout(resolve, 1000));
-    return URL.createObjectURL(file);
-  }
-
-  // Sample images for demo
-  const sampleImages = [
-    'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop',
-    'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop',
-    'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop',
-  ];
-</script>
-
-<!-- Single Square (Default) - Uses args pattern -->
-<Story
-  name="Single Square (Default)"
-  args={{
-    images: '',
-    maxImages: 1,
-    shape: 'square',
-    onUpload: mockUpload,
-    helperText: 'Upload a profile picture',
-  }}
-/>
-
-<!-- Wide Dropzone (Event Poster) -->
-<Story
-  name="Wide Dropzone (Event Poster)"
-  args={{
-    images: '',
-    maxImages: 1,
-    shape: 'wide',
-    enableCrop: true,
-    cropAspectRatio: '16:9',
-    onUpload: mockUpload,
-    helperText: 'Recommended size: 1920x1080 or 16:9 aspect ratio',
-  }}
-/>
-
-<!-- Multi-Image Grid (Performer Photos) -->
-<Story
-  name="Multi-Image Grid (Performer Photos)"
-  args={{
-    images: [],
-    maxImages: 6,
-    shape: 'square',
-    enableCrop: true,
-    enableReorder: true,
-    showMainBadge: true,
-    onUpload: mockUpload,
-    helperText: 'Upload up to 6 photos. Drag to reorder.',
-  }}
-/>
-
-<!-- Pre-populated -->
-<Story
-  name="Pre-populated"
-  args={{
-    images: sampleImages,
-    maxImages: 6,
-    shape: 'square',
-    enableReorder: true,
-    showMainBadge: true,
-    onUpload: mockUpload,
-    helperText: 'These images came from props',
-  }}
-/>
-
-<!-- Disabled State -->
-<Story
-  name="Disabled"
-  args={{
-    images: sampleImages.slice(0, 2),
-    maxImages: 6,
-    shape: 'square',
-    disabled: true,
-    helperText: 'This uploader is disabled',
-  }}
-/>
-
-<!-- With Error -->
-<Story
-  name="With Error"
-  args={{
-    images: '',
-    maxImages: 1,
-    shape: 'square',
-    onUpload: mockUpload,
-    error: 'File is too large. Maximum size is 10MB.',
-  }}
-/>
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import ImageUploader from './ImageUploader.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Recipes/ImageUploader',
+    component: ImageUploader,
+    tags: ['autodocs'],
+    argTypes: {
+      shape: {
+        control: 'select',
+        options: ['square', 'wide'],
+        description: 'Shape of the dropzone/images',
+      },
+      maxImages: {
+        control: { type: 'number', min: 1, max: 12 },
+        description: 'Maximum number of images (1 for single mode)',
+      },
+      enableCrop: {
+        control: 'boolean',
+        description: 'Enable cropping step after file selection',
+      },
+      enableReorder: {
+        control: 'boolean',
+        description: 'Enable drag-to-reorder in multi-image mode',
+      },
+      showMainBadge: {
+        control: 'boolean',
+        description: 'Show "Main" badge on first image in multi mode',
+      },
+    },
+  });
+
+  // Mock upload function
+  async function mockUpload(file) {
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+    return URL.createObjectURL(file);
+  }
+
+  // Sample images for demo
+  const sampleImages = [
+    'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop',
+    'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop',
+    'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop',
+  ];
+</script>
+
+<!-- Single Square (Default) - Uses args pattern -->
+<Story
+  name="Single Square (Default)"
+  args={{
+    images: '',
+    maxImages: 1,
+    shape: 'square',
+    onUpload: mockUpload,
+    helperText: 'Upload a profile picture',
+  }}
+/>
+
+<!-- Wide Dropzone (Event Poster) -->
+<Story
+  name="Wide Dropzone (Event Poster)"
+  args={{
+    images: '',
+    maxImages: 1,
+    shape: 'wide',
+    enableCrop: true,
+    cropAspectRatio: '16:9',
+    onUpload: mockUpload,
+    helperText: 'Recommended size: 1920x1080 or 16:9 aspect ratio',
+  }}
+/>
+
+<!-- Multi-Image Grid (Performer Photos) -->
+<Story
+  name="Multi-Image Grid (Performer Photos)"
+  args={{
+    images: [],
+    maxImages: 6,
+    shape: 'square',
+    enableCrop: true,
+    enableReorder: true,
+    showMainBadge: true,
+    onUpload: mockUpload,
+    helperText: 'Upload up to 6 photos. Drag to reorder.',
+  }}
+/>
+
+<!-- Pre-populated -->
+<Story
+  name="Pre-populated"
+  args={{
+    images: sampleImages,
+    maxImages: 6,
+    shape: 'square',
+    enableReorder: true,
+    showMainBadge: true,
+    onUpload: mockUpload,
+    helperText: 'These images came from props',
+  }}
+/>
+
+<!-- Disabled State -->
+<Story
+  name="Disabled"
+  args={{
+    images: sampleImages.slice(0, 2),
+    maxImages: 6,
+    shape: 'square',
+    disabled: true,
+    helperText: 'This uploader is disabled',
+  }}
+/>
+
+<!-- With Error -->
+<Story
+  name="With Error"
+  args={{
+    images: '',
+    maxImages: 1,
+    shape: 'square',
+    onUpload: mockUpload,
+    error: 'File is too large. Maximum size is 10MB.',
+  }}
+/>