169 lines
3.3 KiB
JavaScript
169 lines
3.3 KiB
JavaScript
import ImageUploader from '$lib/components/admin/ImageUploader.svelte'
|
|
|
|
// Mock Media object for testing
|
|
const mockMedia = {
|
|
id: 1,
|
|
filename: 'sample-image.jpg',
|
|
originalName: 'sample-image.jpg',
|
|
mimeType: 'image/jpeg',
|
|
size: 1024000,
|
|
width: 1920,
|
|
height: 1080,
|
|
url: 'https://via.placeholder.com/400x300/0066cc/ffffff?text=Sample+Image',
|
|
thumbnailUrl: 'https://via.placeholder.com/400x300/0066cc/ffffff?text=Sample+Image',
|
|
altText: 'A beautiful sample image',
|
|
description: 'This is a sample image for testing purposes',
|
|
createdAt: new Date(),
|
|
updatedAt: new Date()
|
|
}
|
|
|
|
export default {
|
|
title: 'Admin/Form Components/ImageUploader',
|
|
component: ImageUploader,
|
|
tags: ['autodocs'],
|
|
argTypes: {
|
|
aspectRatio: {
|
|
control: { type: 'select' },
|
|
options: ['', '1:1', '16:9', '4:3', '3:2']
|
|
},
|
|
required: {
|
|
control: 'boolean'
|
|
},
|
|
allowAltText: {
|
|
control: 'boolean'
|
|
},
|
|
showBrowseLibrary: {
|
|
control: 'boolean'
|
|
},
|
|
maxFileSize: {
|
|
control: 'number'
|
|
},
|
|
label: {
|
|
control: 'text'
|
|
},
|
|
placeholder: {
|
|
control: 'text'
|
|
},
|
|
helpText: {
|
|
control: 'text'
|
|
},
|
|
error: {
|
|
control: 'text'
|
|
}
|
|
}
|
|
}
|
|
|
|
// Empty uploader
|
|
export const Empty = {
|
|
args: {
|
|
label: 'Featured Image',
|
|
placeholder: 'Drag and drop an image here, or click to browse',
|
|
allowAltText: true,
|
|
required: false,
|
|
maxFileSize: 10
|
|
}
|
|
}
|
|
|
|
// With uploaded image
|
|
export const WithImage = {
|
|
args: {
|
|
label: 'Project Logo',
|
|
value: mockMedia,
|
|
allowAltText: true,
|
|
aspectRatio: '1:1'
|
|
}
|
|
}
|
|
|
|
// Square aspect ratio
|
|
export const SquareAspectRatio = {
|
|
args: {
|
|
label: 'Square Logo',
|
|
aspectRatio: '1:1',
|
|
placeholder: 'Upload a square logo',
|
|
allowAltText: true,
|
|
required: true
|
|
}
|
|
}
|
|
|
|
// Wide aspect ratio
|
|
export const WideAspectRatio = {
|
|
args: {
|
|
label: 'Hero Banner',
|
|
aspectRatio: '16:9',
|
|
placeholder: 'Upload a banner image',
|
|
allowAltText: true,
|
|
helpText: 'Recommended size: 1920x1080 pixels'
|
|
}
|
|
}
|
|
|
|
// Required field
|
|
export const Required = {
|
|
args: {
|
|
label: 'Required Image',
|
|
required: true,
|
|
allowAltText: true,
|
|
placeholder: 'This field is required'
|
|
}
|
|
}
|
|
|
|
// With error
|
|
export const WithError = {
|
|
args: {
|
|
label: 'Image with Error',
|
|
error: 'Please select a valid image file',
|
|
allowAltText: true
|
|
}
|
|
}
|
|
|
|
// With help text
|
|
export const WithHelpText = {
|
|
args: {
|
|
label: 'Profile Picture',
|
|
helpText: 'Upload a clear photo of yourself. This will be displayed on your profile.',
|
|
allowAltText: true,
|
|
aspectRatio: '1:1',
|
|
maxFileSize: 5
|
|
}
|
|
}
|
|
|
|
// Without alt text
|
|
export const WithoutAltText = {
|
|
args: {
|
|
label: 'Decorative Image',
|
|
allowAltText: false,
|
|
placeholder: 'Upload a decorative image',
|
|
helpText: 'This image is purely decorative and does not need alt text.'
|
|
}
|
|
}
|
|
|
|
// With browse library option
|
|
export const WithBrowseLibrary = {
|
|
args: {
|
|
label: 'Featured Image',
|
|
allowAltText: true,
|
|
showBrowseLibrary: true,
|
|
placeholder: 'Upload a new image or browse existing ones'
|
|
}
|
|
}
|
|
|
|
// Small file size limit
|
|
export const SmallFileLimit = {
|
|
args: {
|
|
label: 'Small Image',
|
|
maxFileSize: 1,
|
|
allowAltText: true,
|
|
helpText: 'Maximum file size: 1MB'
|
|
}
|
|
}
|
|
|
|
// Interactive playground
|
|
export const Playground = {
|
|
args: {
|
|
label: 'Image Upload',
|
|
placeholder: 'Drag and drop an image here',
|
|
allowAltText: true,
|
|
required: false,
|
|
maxFileSize: 10,
|
|
showBrowseLibrary: false
|
|
}
|
|
}
|