trepur_components 2.3.2 → 2.3.4

package/archive/CardWithTopImage/CardWithTopImage.stories.tsx

@@ -0,0 +1,50 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { idAndClassName } from '@utils/controls';
+
+import CardWithTopImage from '.';
+
+const meta = {
+  title: 'Components/Card With Top Image',
+  component: CardWithTopImage,
+  argTypes: {
+    ...idAndClassName,
+    children: {
+      type: { name: 'other', value: 'string | React.ReactNode' },
+      description: 'The child elements to show in the component',
+      table: {
+        type: {
+          summary: 'Array',
+        },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    imageProps: {
+      type: { name: 'other', value: 'object' },
+      description: 'The props to pass to the image on the component',
+      table: {
+        type: {
+          summary: 'object',
+        },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+  },
+  args: {
+    imageProps: {
+      src: 'https://picsum.photos/500/300',
+      roundedFull: true,
+      width: 4,
+      height: 4,
+    },
+    children: [
+      <p key="1">This is a child</p>,
+      <p key="2">This is another child</p>,
+    ],
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/archive/CardWithTopImage/index.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import Image, { type Props as imageProps } from '@components/Image';
+import classNames from 'classnames';
+
+
+
+export interface Props {
+  id?: string;
+  className?: string;
+  children?: any;
+  imageProps?: imageProps;
+}
+
+const CardWithTopImage = ({
+  id,
+  className,
+  children,
+  imageProps,
+}: Props): JSX.Element => {
+  const src = imageProps?.src !== undefined ? imageProps.src : '';
+  const cardClassList = classNames(className, style.cardClasses, 'theme-local');
+  return (
+    <div
+      style={{
+        filter: 'drop-shadow(0 4px 8px rgb(154, 154, 154))',
+      }}
+      id={id}
+      className={cardClassList}
+    >
+      <div className={style.wrapperClassList}>
+        <Image src={src} {...imageProps} />
+      </div>
+      <div className={style.contentClassList}>{children}</div>
+    </div>
+  );
+};
+
+export default CardWithTopImage;

package/archive/CardWithTopImage/style.module.css

@@ -0,0 +1,11 @@
+.cardClasses {
+  max-width: 500px;
+}
+
+.wrapperClassList {
+  @apply mx-auto max-w-max rounded-full bg-white p-4;
+}
+
+.contentClassList {
+  @apply -mt-12 h-auto bg-white px-4 pb-16 pt-12 text-black;
+}

package/archive/Carousel/Carousel.stories.tsx

@@ -0,0 +1,451 @@
+import Card from '@components/Card';
+import { Meta, StoryObj } from '@storybook/react';
+import { idAndClassName } from '@utils/controls';
+
+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',
+  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',
+    },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};