trepur_components 2.3.7 → 2.3.9

package/src/components/Form/index.tsx

@@ -0,0 +1,41 @@
+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

@@ -0,0 +1,39 @@
+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

@@ -0,0 +1,31 @@
+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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,49 @@
+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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,75 @@
+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

@@ -0,0 +1,41 @@
+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

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1,75 @@
+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

@@ -0,0 +1,25 @@
+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 = {};

package/src/components/Input/index.tsx

@@ -0,0 +1,139 @@
+import {
+  createContext,
+  forwardRef,
+  HTMLAttributes,
+  useContext,
+  useMemo,
+  useRef,
+} from 'react';
+
+import clsx from 'clsx';
+
+export interface InputContextProps {
+  autoComplete?: string;
+  disabled?: boolean;
+  formId?: string;
+  height?: string;
+  maxLength?: number;
+  minLength?: number;
+  pattern?: string;
+  required?: boolean;
+  readOnly?: boolean;
+  label?: string;
+  type?: string;
+  name?: string;
+  placeholder?: string;
+  withValidation?: boolean;
+  onChange?: (e: any) => void;
+  onBlur?: () => void;
+  onFocus?: () => void;
+  onClick?: () => void;
+  errors?: string[];
+  value?: string;
+}
+
+const InputContext = createContext<InputContextProps | null>(null);
+
+const InputComponent = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement> & InputContextProps
+>(({ children, errors, placeholder, ...props }, ref) => {
+  const state = useMemo(
+    () => ({
+      errors,
+      placeholder,
+      ...props,
+    }),
+    [errors, props],
+  );
+  return (
+    <InputContext.Provider value={state}>
+      <div ref={ref}>{children}</div>
+    </InputContext.Provider>
+  );
+});
+
+const InputItem = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ children, ...props }, ref) => {
+    const btnRef = useRef<any>(null);
+    return (
+      <div
+        className="mt-4 w-full cursor-pointer bg-white"
+        onClick={() => btnRef.current?.focus()}
+        ref={ref}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+
+const InputLabel = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement> & { required?: boolean }
+>(({ children, required = false }, ref) => {
+  return (
+    <div
+      ref={ref}
+      className="font-regular absolute -mt-3 ml-3 flex items-center rounded-2xl bg-white px-1 text-sm"
+    >
+      <p>{children}</p>
+      {required && (
+        <p className="font-semiBold text-lg text-error-default">&nbsp;*</p>
+      )}
+    </div>
+  );
+});
+
+const InputBox = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ ...props }) => {
+    const { errors, placeholder } = useContext(InputContext) || {};
+
+    return (
+      <input
+        placeholder={placeholder}
+        className={clsx(
+          'text-ink text-md w-full cursor-pointer rounded-md border border-black bg-white py-2 pl-4',
+          {
+            'border-error border-2': errors != null,
+          },
+        )}
+        {...props}
+      />
+    );
+  },
+);
+
+const InputValidation = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(({ children, ...props }, ref) => {
+  const { errors } = useContext(InputContext) || {};
+  return (
+    <div
+      ref={ref}
+      className="font-regular gap-y-2 text-sm text-error-default"
+      {...props}
+    >
+      {errors?.map((error, i) => {
+        return <p key={`error-msg-${i + 1}`}>{error}</p>;
+      })}
+    </div>
+  );
+});
+
+InputComponent.displayName = 'Input';
+InputItem.displayName = 'Input.Item';
+InputLabel.displayName = 'Input.Label';
+InputBox.displayName = 'Input.Box';
+InputValidation.displayName = 'Input.Validation';
+
+const Input = Object.assign(InputComponent, {
+  Item: InputItem,
+  Label: InputLabel,
+  Box: InputBox,
+  Validation: InputValidation,
+});
+
+export { Input };

package/{archive → src/components}/MenuButton/MenuButton.stories.tsx

@@ -2,7 +2,7 @@ import { action } from '@storybook/addon-actions';
 import { Meta, StoryObj } from '@storybook/react';
 import { idAndClassName } from '@utils/controls';
 
-import MenuButton from '.';
+import { MenuButton } from '.';
 
 const meta = {
   title: 'Components/Menu Button',
@@ -41,6 +41,6 @@ const meta = {
 };
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof MenuButton>;
 
 export const Default: Story = {};