trepur_components 2.3.8 → 2.3.9

package/src/components/Carousel/Carousel.stories.tsx

@@ -1,449 +1,42 @@
-import { Card } from '@components/Card';
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
+import { ImageCard } from '@components/ImageCard';
+import { Meta, StoryObj } from '@storybook/react';
 
 import { Carousel } from '.';
 
-const slides = [
-  <Card
-    key="card_1"
-    className="keen-slider__slide bg-white text-black"
-    imageProps={{
-      src: 'https://picsum.photos/500/300',
-    }}
-    title="This is a title"
-    subTitle="This is a subtitle"
-    description="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga excepturi itaque in. Debitis et velit explicabo id quo repellendus architecto hic quis repellat corporis cumque dolorem officiis animi, dicta praesentium."
-    buttonProps={{
-      children: 'Click Me',
-    }}
-    href="/"
-  />,
-  <Card
-    key="card_2"
-    className="keen-slider__slide bg-white text-black"
-    imageProps={{
-      src: 'https://picsum.photos/501/300',
-    }}
-    title="This is a title"
-    subTitle="This is a subtitle"
-    description="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga excepturi itaque in. Debitis et velit explicabo id quo repellendus architecto hic quis repellat corporis cumque dolorem officiis animi, dicta praesentium."
-    buttonProps={{
-      children: 'Click Me',
-    }}
-  />,
-  <Card
-    key="card_3"
-    className="keen-slider__slide bg-white text-black"
-    imageProps={{
-      src: 'https://picsum.photos/500/302',
-    }}
-    title="This is a title"
-    subTitle="This is a subtitle"
-    description="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga excepturi itaque in. Debitis et velit explicabo id quo repellendus architecto hic quis repellat corporis cumque dolorem officiis animi, dicta praesentium."
-    href="/"
-  />,
-  <Card
-    key="card_4"
-    className="keen-slider__slide bg-white text-black"
-    imageProps={{
-      src: 'https://picsum.photos/500/301',
-    }}
-    title="This is a title"
-    subTitle="This is a subtitle"
-    description="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga excepturi itaque in. Debitis et velit explicabo id quo repellendus architecto hic quis repellat corporis cumque dolorem officiis animi, dicta praesentium."
-    href="/"
-  />,
-  <Card
-    key="card_5"
-    className="keen-slider__slide bg-white text-black"
-    imageProps={{
-      src: 'https://picsum.photos/500/301',
-    }}
-    title="This is a title"
-    subTitle="This is a subtitle"
-    description="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga excepturi itaque in. Debitis et velit explicabo id quo repellendus architecto hic quis repellat corporis cumque dolorem officiis animi, dicta praesentium."
-    href="/"
-  />,
-  <Card
-    key="card_6"
-    className="keen-slider__slide bg-white text-black"
-    imageProps={{
-      src: 'https://picsum.photos/500/301',
-    }}
-    title="This is a title"
-    subTitle="This is a subtitle"
-    description="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga excepturi itaque in. Debitis et velit explicabo id quo repellendus architecto hic quis repellat corporis cumque dolorem officiis animi, dicta praesentium."
-    href="/"
-  />,
-  <Card
-    key="card_7"
-    className="keen-slider__slide bg-white text-black"
-    imageProps={{
-      src: 'https://picsum.photos/500/301',
-    }}
-    title="This is a title"
-    subTitle="This is a subtitle"
-    description="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga excepturi itaque in. Debitis et velit explicabo id quo repellendus architecto hic quis repellat corporis cumque dolorem officiis animi, dicta praesentium."
-    href="/"
-  />,
-  <Card
-    key="card_8"
-    className="keen-slider__slide bg-white text-black"
-    imageProps={{
-      src: 'https://picsum.photos/500/301',
-    }}
-    title="This is a title"
-    subTitle="This is a subtitle"
-    description="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga excepturi itaque in. Debitis et velit explicabo id quo repellendus architecto hic quis repellat corporis cumque dolorem officiis animi, dicta praesentium."
-    href="/"
-  />,
-  <Card
-    key="card_9"
-    className="keen-slider__slide bg-white text-black"
-    imageProps={{
-      src: 'https://picsum.photos/500/301',
-    }}
-    title="This is a title"
-    subTitle="This is a subtitle"
-    description="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga excepturi itaque in. Debitis et velit explicabo id quo repellendus architecto hic quis repellat corporis cumque dolorem officiis animi, dicta praesentium."
-    href="/"
-  />,
-  <Card
-    key="card_10"
-    className="keen-slider__slide bg-white text-black"
-    imageProps={{
-      src: 'https://picsum.photos/500/301',
-    }}
-    title="This is a title"
-    subTitle="This is a subtitle"
-    description="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga excepturi itaque in. Debitis et velit explicabo id quo repellendus architecto hic quis repellat corporis cumque dolorem officiis animi, dicta praesentium."
-    href="/"
-  />,
-]
-
 const meta = {
-  title: 'Components/Carousel',
+  title: 'V2Components/Carousel',
   component: Carousel,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-    breakpoints: {
-      type: { name: 'number', required: false },
-      description: 'The slide to begin on',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'number' },
-        defaultValue: { summary: 'undefined' },
-      }
-    },
-    defaultAnimation: {
-      type: { name: 'number', required: false },
-      description: 'The slide to begin on',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'number' },
-        defaultValue: { summary: 'undefined' },
-      }
-    },
-    drag: {
-      type: { name: 'boolean', required: false },
-      description: 'Can the carousel be dragged or not',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' },
-      }
-    },
-    dragSpeed: {
-      type: { name: 'number', required: false },
-      description: 'The slide to begin on',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'number' },
-        defaultValue: { summary: 'undefined' },
-      }
-    },
-    initial: {
-      type: { name: 'number', required: false },
-      description: 'The slide to begin on',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'number' },
-        defaultValue: { summary: 'undefined' },
-      }
-    },
-    loop: {
-      type: { name: 'boolean', required: false },
-      description: 'loop the end back to the start',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' },
-      }
-    },
-    mode: {
-      type: { name: 'string', required: false },
-      description: 'snap, free or snap-free',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'string' },
-        defaultValue: { summary: 'undefined' },
-      }
-    },
-    range: {
-      type: { name: 'number', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'number' },
-        defaultValue: { summary: 'undefined' },
-      }
-    },
-    renderMode: {
-      type: { name: 'number', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'number' },
-        defaultValue: { summary: 'undefined' },
-      }
-    },
-    rtl: {
-      type: { name: 'boolean', required: false },
-      description: 'to display right to left',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' },
-      }
-    },
-    rubberband: {
-      type: { name: 'boolean', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' },
-      }
-    },
-    slides: {
-      type: { name: 'boolean', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' },
-      }
-    },
-    vertical: {
-      type: { name: 'boolean', required: false },
-      description: 'displays the slider vertically',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' },
-      }
-    },
-    animationStarted: {
-      type: { name: 'boolean', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' },
-      }
-    },
-    animationStopped: {
-      type: { name: 'boolean', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' },
-      }
-    },
-    animationEnded: {
-      type: { name: 'boolean', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' },
-      }
-    },
-    destroyed: {
-      type: { name: 'boolean', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' },
-      }
-    },
-    detailsChanged: {
-      type: { name: 'boolean', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' },
-      }
-    },
-    dragged: {
-      type: { name: 'boolean', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' },
-      }
-    },
-    dragStarted: {
-      type: { name: 'boolean', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' },
-      }
-    },
-    dragChecked: {
-      type: { name: 'boolean', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' },
-      }
-    },
-    dragEnded: {
-      type: { name: 'boolean', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' },
-      }
-    },
-    beforeOptionsChanged: {
-      type: { name: 'boolean', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' },
-      }
-    },
-    optionsChanged: {
-      type: { name: 'boolean', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' },
-      }
-    },
-    updated: {
-      type: { name: 'boolean', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' },
-      }
-    },
-    perView: {
-      type: { name: 'number', required: false },
-      description: 'The number of slides to show at a time',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'number' },
-        defaultValue: { summary: 'undefined' },
-      }
-    },
-    spacing: {
-      type: { name: 'number', required: false },
-      description: 'The spacing left and right of each slide',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'number' },
-        defaultValue: { summary: 'undefined' },
-      }
-    },
-    number: {
-      type: { name: 'number', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'number' },
-        defaultValue: { summary: 'undefined' },
-      }
-    },
-    origin: {
-      type: { name: 'boolean', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' },
-      }
-    }
-  },
   args: {
-    title: 'Card Carousel',
-    description: 'what do you think to this?',
-    loop: true,
-    drag: true,
-    slides,
-    spacing: 16,
     perView: 4,
-    arrows: {
-      visible: false,
-      colour: 'white',
-      bgColour: 'primary',
-      hoverColour: 'white',
-      hoverBgColour: 'primary',
-    },
-    dots: {
-      visible: true,
-      colour: 'white',
-      bgColour: 'white',
-      hoverColour: 'secondary',
-      hoverBgColour: 'secondary',
-      wrapperBgColour: 'white',
-    }
-  }
-};
+    spacing: 16,
+    loop: true,
+    children: [
+      <Carousel.Content>
+        <Carousel.Arrow />
+        <Carousel.Slides>
+          {[...Array(5)].map((_, i) => (
+            <ImageCard className="keen-slider__slide">
+              <ImageCard.Image src={`https://picsum.photos/10${i}/100`} />
+              <ImageCard.Content>
+                <ImageCard.Title>This is a title</ImageCard.Title>
+                <ImageCard.Subtitle>This is a subtitle</ImageCard.Subtitle>
+                <ImageCard.Text>
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+                  Eaque, est iusto. Veniam ullam impedit expedita perferendis
+                  cumque culpa saepe magni velit quia nemo suscipit, reiciendis
+                  ad libero, voluptate incidunt fugiat?
+                </ImageCard.Text>
+              </ImageCard.Content>
+            </ImageCard>
+          ))}
+        </Carousel.Slides>
+        <Carousel.Arrow rightArrow />
+      </Carousel.Content>,
+      <Carousel.Dots />,
+    ],
+  },
+} satisfies Meta<typeof Carousel>;
+
 export default meta;
 
 type Story = StoryObj<typeof Carousel>;