trepur_components 2.3.8 → 2.3.9

package/src/components/CarouselThumbnail/CarouselThumbnail.stories.tsx

@@ -1,347 +1,26 @@
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { CarouselThumbnail } from '.';
-
-const slides = [
-  <img
-    key={1}
-    className="keen-slider__slide number-slide1"
-    src="https://picsum.photos/500/300"
-  />,
-  <img
-    key={2}
-    className="keen-slider__slide number-slide2"
-    src="https://picsum.photos/500/301"
-  />,
-  <img
-    key={3}
-    className="keen-slider__slide number-slide3"
-    src="https://picsum.photos/500/302"
-  />,
-  <img
-    key={4}
-    className="keen-slider__slide number-slide4"
-    src="https://picsum.photos/500/303"
-  />,
-  <img
-    key={5}
-    className="keen-slider__slide number-slide5"
-    src="https://picsum.photos/500/304"
-  />,
-  <img
-    key={6}
-    className="keen-slider__slide number-slide6"
-    src="https://picsum.photos/500/30"
-  />,
-]
+import { CarouselThumbnail } from './';
+import { Meta, StoryObj } from '@storybook/react';
 
 const meta = {
-  title: 'Components/CarouselThumbnail',
+  title: 'V2Components/CarouselThumbnail',
   component: CarouselThumbnail,
-  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?',
+    children: [
+      <CarouselThumbnail.Slides>
+        <CarouselThumbnail.Slide src="https://picsum.photos/500/500" />
+        <CarouselThumbnail.Slide src="https://picsum.photos/501/500" />
+        <CarouselThumbnail.Slide src="https://picsum.photos/502/500" />
+        <CarouselThumbnail.Slide src="https://picsum.photos/503/500" />
+        <CarouselThumbnail.Slide src="https://picsum.photos/504/500" />
+        <CarouselThumbnail.Slide src="https://picsum.photos/505/500" />
+      </CarouselThumbnail.Slides>,
+    ],
     loop: true,
     drag: true,
-    slides,
+    rubberband: true,
     spacing: 16,
-  }
-}
+  },
+} satisfies Meta<typeof CarouselThumbnail>;
 
 export default meta;
 

package/src/components/CarouselThumbnail/const.ts

@@ -0,0 +1,17 @@
+export const breakpointsToRender: any = {
+  '(min-width: 320px)': {
+    slides: { perView: 1, spacing: 25 },
+  },
+  '(max-width: 500px)': {
+    slides: { perView: 1, spacing: 25 },
+  },
+  '(min-width: 768px)': {
+    slides: { perView: 1, spacing: 25 },
+  },
+  '(min-width: 1024px)': {
+    slides: { perView: 2, spacing: 20 },
+  },
+  '(min-width: 1280px)': {
+    slides: { perView: 2, spacing: 10 },
+  },
+};