@wakastellar/ui 2.3.4 → 2.4.0

package/src/components/waka-carousel/WakaCarousel.stories.tsx

@@ -0,0 +1,296 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaCarousel } from './index'
+import type { CarouselImage } from './index'
+
+const meta: Meta<typeof WakaCarousel> = {
+  title: 'Components/Display/WakaCarousel',
+  component: WakaCarousel,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A feature-rich image carousel with autoplay, thumbnails, transitions, and touch support.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    autoplay: {
+      control: 'boolean',
+      description: 'Enable autoplay',
+    },
+    transition: {
+      control: 'select',
+      options: ['fade', 'slide', 'zoom', 'flip'],
+      description: 'Transition effect',
+    },
+    aspectRatio: {
+      control: 'select',
+      options: ['16/9', '4/3', '1/1', '3/2', 'auto'],
+      description: 'Aspect ratio',
+    },
+    showIndicators: {
+      control: 'boolean',
+      description: 'Show dot indicators',
+    },
+    showNavigation: {
+      control: 'boolean',
+      description: 'Show navigation arrows',
+    },
+    showThumbnails: {
+      control: 'boolean',
+      description: 'Show thumbnails',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaCarousel>
+
+const sampleImages: CarouselImage[] = [
+  {
+    src: 'https://images.unsplash.com/photo-1682687220742-aba13b6e50ba?w=800&q=80',
+    alt: 'Mountain landscape',
+    title: 'Mountain View',
+    description: 'Beautiful mountain landscape at sunset',
+  },
+  {
+    src: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&q=80',
+    alt: 'Lake reflection',
+    title: 'Serene Lake',
+    description: 'Calm lake with perfect reflections',
+  },
+  {
+    src: 'https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=800&q=80',
+    alt: 'Forest path',
+    title: 'Forest Trail',
+    description: 'A peaceful path through the woods',
+  },
+  {
+    src: 'https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=800&q=80',
+    alt: 'Beach sunset',
+    title: 'Golden Beach',
+    description: 'Stunning sunset over the ocean',
+  },
+]
+
+export const Default: Story = {
+  args: {
+    images: sampleImages,
+    className: 'w-[600px]',
+  },
+}
+
+export const WithAutoplay: Story = {
+  args: {
+    images: sampleImages,
+    autoplay: true,
+    autoplayInterval: 3000,
+    className: 'w-[600px]',
+  },
+}
+
+export const WithThumbnails: Story = {
+  args: {
+    images: sampleImages,
+    showThumbnails: true,
+    className: 'w-[600px]',
+  },
+}
+
+export const WithProgress: Story = {
+  args: {
+    images: sampleImages,
+    autoplay: true,
+    showProgress: true,
+    className: 'w-[600px]',
+  },
+}
+
+export const WithCounter: Story = {
+  args: {
+    images: sampleImages,
+    showCounter: true,
+    className: 'w-[600px]',
+  },
+}
+
+export const FullFeatured: Story = {
+  args: {
+    images: sampleImages,
+    autoplay: true,
+    showThumbnails: true,
+    showCounter: true,
+    showProgress: true,
+    showFullscreen: true,
+    className: 'w-[700px]',
+  },
+}
+
+export const AspectRatios: Story = {
+  render: () => (
+    <div className="space-y-8">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">16:9</p>
+        <WakaCarousel
+          images={sampleImages}
+          aspectRatio="16/9"
+          className="w-[500px]"
+        />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">4:3</p>
+        <WakaCarousel
+          images={sampleImages}
+          aspectRatio="4/3"
+          className="w-[500px]"
+        />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">1:1 (Square)</p>
+        <WakaCarousel
+          images={sampleImages}
+          aspectRatio="1/1"
+          className="w-[400px]"
+        />
+      </div>
+    </div>
+  ),
+}
+
+export const IndicatorStyles: Story = {
+  render: () => (
+    <div className="space-y-8">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Circle (Default)</p>
+        <WakaCarousel
+          images={sampleImages}
+          indicatorShape="circle"
+          className="w-[500px]"
+        />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Square</p>
+        <WakaCarousel
+          images={sampleImages}
+          indicatorShape="square"
+          className="w-[500px]"
+        />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Line</p>
+        <WakaCarousel
+          images={sampleImages}
+          indicatorShape="line"
+          className="w-[500px]"
+        />
+      </div>
+    </div>
+  ),
+}
+
+export const NavigationSizes: Story = {
+  render: () => (
+    <div className="space-y-8">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Small Navigation</p>
+        <WakaCarousel
+          images={sampleImages}
+          navigationSize="small"
+          className="w-[500px]"
+        />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Large Navigation</p>
+        <WakaCarousel
+          images={sampleImages}
+          navigationSize="large"
+          className="w-[500px]"
+        />
+      </div>
+    </div>
+  ),
+}
+
+export const NoNavigation: Story = {
+  args: {
+    images: sampleImages,
+    showNavigation: false,
+    showIndicators: true,
+    className: 'w-[600px]',
+  },
+}
+
+export const MinimalCarousel: Story = {
+  args: {
+    images: sampleImages,
+    showNavigation: false,
+    showIndicators: false,
+    autoplay: true,
+    className: 'w-[600px]',
+  },
+}
+
+export const ProductCarousel: Story = {
+  render: () => {
+    const productImages: CarouselImage[] = [
+      { src: 'https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=800&q=80', alt: 'Product front' },
+      { src: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=800&q=80', alt: 'Product side' },
+      { src: 'https://images.unsplash.com/photo-1572569511254-d8f925fe2cbb?w=800&q=80', alt: 'Product detail' },
+    ]
+
+    return (
+      <div className="border rounded-lg p-4 w-[400px]">
+        <WakaCarousel
+          images={productImages}
+          aspectRatio="1/1"
+          showThumbnails
+          thumbnailSize="small"
+          showNavigation={false}
+        />
+        <div className="mt-4">
+          <h3 className="font-semibold text-lg">Premium Watch</h3>
+          <p className="text-sm text-muted-foreground">Elegant timepiece with leather strap</p>
+          <p className="text-xl font-bold mt-2">$299.99</p>
+        </div>
+      </div>
+    )
+  },
+}
+
+export const GalleryWithCaptions: Story = {
+  render: () => {
+    const galleryImages: CarouselImage[] = [
+      {
+        src: 'https://images.unsplash.com/photo-1682687220742-aba13b6e50ba?w=800&q=80',
+        alt: 'Mountain',
+        title: 'Swiss Alps',
+        description: 'Majestic mountain peaks covered in snow',
+        caption: 'Photo by John Doe',
+      },
+      {
+        src: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&q=80',
+        alt: 'Lake',
+        title: 'Mirror Lake',
+        description: 'Perfect reflections on a calm morning',
+        caption: 'Photo by Jane Smith',
+      },
+      {
+        src: 'https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=800&q=80',
+        alt: 'Forest',
+        title: 'Ancient Forest',
+        description: 'Sunlight filtering through the canopy',
+        caption: 'Photo by Mike Johnson',
+      },
+    ]
+
+    return (
+      <WakaCarousel
+        images={galleryImages}
+        showFullscreen
+        showCounter
+        className="w-[700px]"
+      />
+    )
+  },
+}