trepur_components 2.3.9 → 2.3.11

package/src/components/Form/Form.stories.tsx

@@ -1,86 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { Form } from '.';
-
-const meta = {
-  title: 'Components/Form',
-  component: Form,
-  argTypes: {
-    ...idAndClassName,
-    title: {
-      type: { name: 'string', required: false },
-      description: 'The title to display on the component',
-      table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: 'undefined' },
-      },
-    },
-    onSubmit: {
-      type: { name: 'function', required: false },
-      description: 'The action to perform when submitting the component',
-      action: 'onClick',
-      table: {
-        type: {
-          summary: 'function',
-        },
-        defaultValue: { summary: 'undefined' },
-      },
-    },
-    ref: {
-      type: { name: 'other', value: 'RefObject<TouchableOpacity>' },
-      description: 'An ref for highlighting the current element',
-      table: {
-        type: {
-          summary: 'object',
-        },
-        defaultValue: { summary: 'undefined' },
-      },
-    },
-    components: {
-      description: 'An array of component objects to pass to the component',
-      control: 'array',
-      table: {
-        type: {
-          summary: 'array',
-        },
-        defaultValue: { summary: 'undefined' },
-      },
-    },
-  },
-  args: {
-    components: [
-      {
-        htmlType: 'Input',
-        label: 'This is a label',
-        placeholder: 'This is a placeholder',
-        children: 'Submit',
-        className: 'mb-4',
-      },
-      {
-        htmlType: 'Input',
-        label: 'This is a label',
-        placeholder: 'This is a placeholder',
-        children: 'Submit',
-        className: 'mb-4',
-      },
-      {
-        htmlType: 'Input',
-        label: 'This is a label',
-        placeholder: 'This is a placeholder',
-        children: 'Submit',
-        className: 'mb-4',
-      },
-      {
-        htmlType: 'Button',
-        children: 'Submit',
-      },
-    ],
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Form>;
-
-export const Default: Story = {};

package/src/components/Form/index.tsx

@@ -1,41 +0,0 @@
-import { Button, ButtonProps } from '@components/Button';
-import { Input, InputContextProps } from '@components/Input';
-import classNames from 'classnames';
-
-import { Card } from '..';
-
-export interface Props {
-  id?: string;
-  className?: string;
-  onSubmit?: () => void;
-  ref?: string;
-  components?: Array<InputContextProps & ButtonProps & { htmlType: string }>;
-}
-
-export const Form = ({ id, className, onSubmit, ref, components }: Props) => {
-  return (
-    <Card>
-      <form id={id} ref={ref} className={className} onSubmit={onSubmit}>
-        {components?.map((component, i) => {
-          if (component?.htmlType === 'Input') {
-            return (
-              <Input
-                key={`input_${i + 0}`}
-                label={component?.label}
-                placeholder={component?.placeholder}
-                type={component?.type}
-                name={component?.name}
-              />
-            );
-          } else if (component.htmlType === 'Button') {
-            return (
-              <Button key={`button_${i + 0}`} onClick={component?.onClick}>
-                <Button.Label></Button.Label>
-              </Button>
-            );
-          } else return <></>;
-        })}
-      </form>
-    </Card>
-  );
-};

package/src/components/Gallery/Gallery.stories.tsx

@@ -1,39 +0,0 @@
-import { Gallery } from './';
-import { Meta, StoryObj } from '@storybook/react';
-
-const meta = {
-  title: 'V2Components/Gallery',
-  component: Gallery,
-  args: {
-    className: 'grid-cols-7',
-    children: [
-      <Gallery.Item src="https://picsum.photos/200/200" />,
-      <Gallery.Item src="https://picsum.photos/201/200" />,
-      <Gallery.Item src="https://picsum.photos/202/200" />,
-      <Gallery.Item src="https://picsum.photos/203/200" />,
-      <Gallery.Item src="https://picsum.photos/204/200" />,
-      <Gallery.Item src="https://picsum.photos/205/200" />,
-      <Gallery.Item src="https://picsum.photos/206/200" />,
-      <Gallery.Item src="https://picsum.photos/207/200" />,
-      <Gallery.Item src="https://picsum.photos/208/200" />,
-      <Gallery.Item src="https://picsum.photos/209/200" />,
-      <Gallery.Item src="https://picsum.photos/210/200" />,
-      <Gallery.Item src="https://picsum.photos/200/201" />,
-      <Gallery.Item src="https://picsum.photos/200/202" />,
-      <Gallery.Item src="https://picsum.photos/200/203" />,
-      <Gallery.Item src="https://picsum.photos/200/204" />,
-      <Gallery.Item src="https://picsum.photos/200/205" />,
-      <Gallery.Item src="https://picsum.photos/200/206" />,
-      <Gallery.Item src="https://picsum.photos/200/207" />,
-      <Gallery.Item src="https://picsum.photos/200/208" />,
-      <Gallery.Item src="https://picsum.photos/200/209" />,
-      <Gallery.Item src="https://picsum.photos/200/210" />,
-    ],
-  },
-} satisfies Meta<typeof Gallery>;
-
-export default meta;
-
-type Story = StoryObj<typeof Gallery>;
-
-export const Default: Story = {};

package/src/components/Gallery/index.tsx

@@ -1,31 +0,0 @@
-import { forwardRef, HTMLAttributes } from 'react';
-
-import { Image, ImageProps } from '@components/Image';
-import clsx from 'clsx';
-
-const GalleryComponent = forwardRef<
-  HTMLDivElement,
-  HTMLAttributes<HTMLDivElement>
->(({ className, children, ...props }, ref) => {
-  return (
-    <div className={clsx('grid', className)} ref={ref} {...props}>
-      {children}
-    </div>
-  );
-});
-
-const GalleryItem = forwardRef<
-  HTMLDivElement,
-  HTMLAttributes<HTMLDivElement> & ImageProps
->(({ src }) => {
-  return <Image className="aspect-square w-full" src={src} />;
-});
-
-GalleryComponent.displayName = 'Gallery';
-GalleryItem.displayName = 'Gallery.Item';
-
-const Gallery = Object.assign(GalleryComponent, {
-  Item: GalleryItem,
-});
-
-export { Gallery };

package/src/components/Greeting/Greeting.stories.tsx

@@ -1,16 +0,0 @@
-import { Greeting } from './';
-import { Meta, StoryObj } from '@storybook/react';
-
-const meta = {
-  title: 'V2Components/Greeting',
-  component: Greeting,
-  args: {
-    morningMessage: 'What a beautiful morning it is today',
-  },
-} satisfies Meta<typeof Greeting>;
-
-export default meta;
-
-type Story = StoryObj<typeof Greeting>;
-
-export const Default: Story = {};

package/src/components/Greeting/index.tsx

@@ -1,49 +0,0 @@
-import { forwardRef, HTMLAttributes } from 'react';
-
-import { DateTime } from 'luxon';
-
-export interface GreetingProps {
-  morningMessage?: string;
-  afternoonMessage?: string;
-  eveningMessage?: string;
-}
-
-const GreetingComponent = forwardRef<
-  HTMLDivElement,
-  HTMLAttributes<HTMLParagraphElement> & GreetingProps
->(
-  (
-    {
-      morningMessage = 'Good morning',
-      afternoonMessage = 'Good afternoon',
-      eveningMessage = 'Good evening',
-      ...props
-    },
-    ref,
-  ) => {
-    const now = DateTime.now();
-    const midday = DateTime.now().set({ hour: 12, minute: 0, second: 0 });
-    const evening = DateTime.now().set({ hour: 17, minute: 0, second: 0 });
-
-    let message = '';
-    if (now < midday) {
-      message = morningMessage;
-    } else if (now >= midday && now < evening) {
-      message = afternoonMessage;
-    } else if (now >= evening) {
-      message = eveningMessage;
-    }
-
-    return (
-      <p {...props} ref={ref}>
-        {message}
-      </p>
-    );
-  },
-);
-
-GreetingComponent.displayName = 'Greeting';
-
-const Greeting = Object.assign(GreetingComponent);
-
-export { Greeting };

package/src/components/HamburgerIcon/HamburgerIcon.stories.tsx

@@ -1,14 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import { HamburgerIcon } from '.';
-
-const meta = {
-  title: 'V2Components/Hamburger Icon',
-  component: HamburgerIcon,
-} satisfies Meta<typeof HamburgerIcon>;
-
-export default meta;
-
-type Story = StoryObj<typeof HamburgerIcon>;
-
-export const Default: Story = {};

package/src/components/HamburgerIcon/index.tsx

@@ -1,75 +0,0 @@
-import { forwardRef, HTMLAttributes, useState } from 'react';
-
-import { Button, ButtonProps } from '@components/Button';
-import clsx from 'clsx';
-
-const HamburgerIconComponent = forwardRef<
-  HTMLButtonElement,
-  HTMLAttributes<HTMLButtonElement> & ButtonProps
->(({ className, onClick, variant = 'ghost' }, ref) => {
-  const [opened, setOpened] = useState(false);
-
-  const toggleOpened = (e: any): void => {
-    setOpened(!opened);
-    onClick?.(e);
-  };
-  return (
-    <Button
-      className={clsx('stroke-white', className)}
-      ref={ref}
-      onClick={(e) => {
-        toggleOpened(e);
-      }}
-      variant={variant}
-    >
-      <svg
-        className={clsx(
-          'transition-backgroundColor mx-auto transform overflow-visible duration-500',
-          {
-            'fill-button-primary-text': variant === 'primary',
-            'fill-button-secondary-text': variant === 'secondary',
-            'fill-button-ghost-text': variant === 'ghost',
-          },
-        )}
-        width="24"
-        height="24"
-        viewBox="0 0 24 15"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          className={clsx(
-            'origin-top-left transition-transform duration-200 ease-linear',
-            {
-              'origin-top-left -translate-y-0.5 translate-x-1 rotate-45':
-                opened,
-            },
-          )}
-          d="M0 1.5C0 0.947715 0.447715 0.5 1 0.5H21C21.5523 0.5 22 0.947715 22 1.5C22 2.05228 21.5523 2.5 21 2.5H1C0.447716 2.5 0 2.05228 0 1.5Z"
-        />
-        <path
-          className={clsx('transition-opacity duration-200 ease-linear', {
-            'opacity-0': opened,
-            'opacity-100': !opened,
-          })}
-          d="M0 7.5C0 6.94772 0.447715 6.5 1 6.5H21C21.5523 6.5 22 6.94772 22 7.5C22 8.05228 21.5523 8.5 21 8.5H1C0.447716 8.5 0 8.05228 0 7.5Z"
-        />
-        <path
-          className={clsx(
-            'origin-bottom-left transition-transform duration-200 ease-linear',
-            {
-              'origin-bottom-left translate-x-1 translate-y-px -rotate-45':
-                opened,
-            },
-          )}
-          d="M0 13.5C0 12.9477 0.447715 12.5 1 12.5H21C21.5523 12.5 22 12.9477 22 13.5C22 14.0523 21.5523 14.5 21 14.5H1C0.447716 14.5 0 14.0523 0 13.5Z"
-        />
-      </svg>
-    </Button>
-  );
-});
-
-HamburgerIconComponent.displayName = 'HamburgerIcon';
-
-const HamburgerIcon = Object.assign(HamburgerIconComponent);
-
-export { HamburgerIcon };

package/src/components/Icon/Icon.stories.tsx

@@ -1,41 +0,0 @@
-import { Icon } from './';
-import { faHeart, faSpinner } from '@fortawesome/fontawesome-free-solid';
-import { Meta, StoryObj } from '@storybook/react';
-
-const meta = {
-  title: 'V2Components/Icon',
-  component: Icon,
-  args: {
-    icon: faHeart,
-  },
-} satisfies Meta<typeof Icon>;
-
-export default meta;
-
-type Story = StoryObj<typeof Icon>;
-
-export const Default: Story = {};
-
-export const Colour: Story = {
-  ...Default,
-  args: {
-    ...Default.args,
-    className: 'text-error-light',
-  },
-};
-
-export const Size: Story = {
-  ...Default,
-  args: {
-    ...Default.args,
-    size: '2x',
-  },
-};
-
-export const Annimation: Story = {
-  ...Default,
-  args: {
-    icon: faSpinner,
-    className: 'animate-spin',
-  },
-};

package/src/components/Icon/index.tsx

@@ -1,33 +0,0 @@
-import { forwardRef } from 'react';
-
-import { IconDefinition } from '@fortawesome/fontawesome-free-solid';
-import { IconProp, SizeProp } from '@fortawesome/fontawesome-svg-core';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-
-export interface IconProps {
-  className?: string;
-  icon: IconProp | IconDefinition;
-  size: SizeProp;
-}
-
-const IconComponent = forwardRef(
-  (props: IconProps, ref: React.Ref<SVGSVGElement>) => {
-    const { className, size, icon, ...rest } = props;
-
-    return (
-      <FontAwesomeIcon
-        className={className}
-        ref={ref}
-        icon={icon as IconProp}
-        size={size}
-        {...rest}
-      />
-    );
-  },
-);
-
-IconComponent.displayName = 'Icon';
-
-const Icon = Object.assign(IconComponent);
-
-export { Icon };

package/src/components/Image/Image.stories.tsx

@@ -1,17 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import { Image } from '.';
-
-const meta = {
-  title: 'V2Components/Image',
-  component: Image,
-  args: {
-    src: 'https://picsum.photos/400/400',
-  },
-} satisfies Meta<typeof Image>;
-
-export default meta;
-
-type Story = StoryObj<typeof Image>;
-
-export const Default: Story = {};

package/src/components/Image/index.tsx

@@ -1,25 +0,0 @@
-import { forwardRef, HTMLAttributes } from 'react';
-
-import clsx from 'clsx';
-
-export interface ImageProps {
-  src: string;
-}
-
-const ImageComponent = forwardRef<
-  HTMLImageElement,
-  HTMLAttributes<HTMLImageElement> & ImageProps
->(({ className, src, ...props }, ref) => (
-  <img
-    className={clsx('h-full w-full', className)}
-    ref={ref}
-    src={src}
-    {...props}
-  />
-));
-
-ImageComponent.displayName = 'Image';
-
-const Image = Object.assign(ImageComponent);
-
-export { Image };

package/src/components/ImageCard/ImageCard.stories.tsx

@@ -1,29 +0,0 @@
-import { type Meta, StoryObj } from '@storybook/react';
-
-import { ImageCard } from '.';
-
-const meta = {
-  title: 'V2Components/ImageCard',
-  component: ImageCard,
-  args: {
-    children: [
-      <ImageCard.Image src="https://picsum.photos/500/300" />,
-      <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>,
-    ],
-  },
-} satisfies Meta<typeof ImageCard>;
-
-export default meta;
-
-type Story = StoryObj<typeof ImageCard>;
-
-export const Default: Story = {};

package/src/components/ImageCard/index.tsx

@@ -1,75 +0,0 @@
-import { forwardRef, HTMLAttributes } from 'react';
-
-import { Image, ImageProps } from '@components/Image';
-import clsx from 'clsx';
-
-const ImageCardComponent = forwardRef<
-  HTMLDivElement,
-  HTMLAttributes<HTMLDivElement>
->(({ className, children, ...props }, ref) => {
-  return (
-    <div
-      className={clsx(
-        'grid max-w-96 overflow-hidden rounded-xl bg-white drop-shadow',
-        className,
-      )}
-      ref={ref}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-});
-
-const ImageCardImage = forwardRef<
-  HTMLImageElement,
-  HTMLAttributes<ImageProps> & ImageProps
->(({ src, ...props }) => {
-  return (
-    <div className="h-64">
-      <Image src={src} {...props} />
-    </div>
-  );
-});
-
-const ImageCardContent = forwardRef<
-  HTMLDivElement,
-  HTMLAttributes<HTMLDivElement>
->(({ children, ...props }, ref) => (
-  <div className="px-2 pb-4 pt-2" ref={ref} {...props}>
-    {children}
-  </div>
-));
-
-const ImageCardTitle = forwardRef<
-  HTMLParagraphElement,
-  HTMLAttributes<HTMLParagraphElement>
->(({ ...props }, ref) => <p className="text-lg" ref={ref} {...props} />);
-
-const ImageCardSubtitle = forwardRef<
-  HTMLParagraphElement,
-  HTMLAttributes<HTMLParagraphElement>
->(({ ...props }, ref) => <p className="text-sm" ref={ref} {...props} />);
-
-const ImageCardText = forwardRef<
-  HTMLParagraphElement,
-  HTMLAttributes<HTMLParagraphElement>
->(({ ...props }, ref) => <p className="text-md pt-2" ref={ref} {...props} />);
-
-ImageCardComponent.displayName = 'ImageCard';
-
-ImageCardImage.displayName = 'ImageCard.Image';
-ImageCardTitle.displayName = 'ImageCard.Title';
-ImageCardSubtitle.displayName = 'ImageCard.Subtitle';
-ImageCardContent.displayName = 'ImageCard.Content';
-ImageCardText.displayName = 'ImageCard.Text';
-
-const ImageCard = Object.assign(ImageCardComponent, {
-  Image: ImageCardImage,
-  Content: ImageCardContent,
-  Title: ImageCardTitle,
-  Subtitle: ImageCardSubtitle,
-  Text: ImageCardText,
-});
-
-export { ImageCard };

package/src/components/Input/Input.stories.tsx

@@ -1,25 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import { Input } from '.';
-
-const meta = {
-  title: 'V2Components/Input',
-  component: Input,
-  args: {
-    placeholder: 'This is a placeholder',
-    errors: ['tyhj', 'sdfghjk'],
-    children: [
-      <Input.Item>
-        <Input.Label required>This is a label</Input.Label>
-        <Input.Box />
-        <Input.Validation />
-      </Input.Item>,
-    ],
-  },
-} satisfies Meta<typeof Input>;
-
-export default meta;
-
-type Story = StoryObj<typeof Input>;
-
-export const Default: Story = {};