trepur_components 2.3.8 → 2.3.10

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

@@ -1,86 +0,0 @@
-import { Meta, type 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,46 +0,0 @@
-import { Button, type Props as buttonProps } from '@components/Button';
-import { Container } from '@components/Container';
-import { Input, type Props as inputProps } from '@components/Input';
-import classNames from 'classnames';
-
-export interface Props {
-  id?: string;
-  className?: string;
-  onSubmit?: () => void;
-  ref?: string;
-  components?: Array<inputProps & buttonProps & { htmlType: string }>;
-}
-
-export const Form = ({ id, className, onSubmit, ref, components }: Props) => {
-  return (
-    <Container withPadding>
-      <form id={id} ref={ref} className={className} onSubmit={onSubmit}>
-        {components?.map((component, i) => {
-          if (component?.htmlType === 'Input') {
-            return (
-              <Input
-                key={`input_${i + 0}`}
-                className={classNames(component?.className)}
-                label={component?.label}
-                placeholder={component?.placeholder}
-                type={component?.type}
-                name={component?.name}
-              />
-            );
-          } else if (component.htmlType === 'Button') {
-            return (
-              <Button
-                key={`button_${i + 0}`}
-                type={component?.type}
-                onClick={component?.onClick}
-                className={classNames(component?.className)}
-              >
-                {component?.children}
-              </Button>
-            );
-          } else return <></>;
-        })}
-      </form>
-    </Container>
-  );
-}

package/src/components/FyreCard/FyreCard.stories.tsx

@@ -1,31 +0,0 @@
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { FyreCard } from '.';
-
-const meta = {
-  title: 'Components/Fyre Card',
-  component: FyreCard,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-    image: {
-      description: '',
-      control: 'text',
-      table: {
-        category: '',
-      }
-    }
-  },
-  args: {
-    image: 'https://picsum.photos/500/300',
-    buttonProps: {
-      children: 'Shop Now',
-    }
-  }
-};
-export default meta;
-
-type Story = StoryObj<typeof FyreCard>;
-
-export const Default: Story = {};

package/src/components/FyreCard/index.tsx

@@ -1,44 +0,0 @@
-import { Button, type Props as buttonProps } from '@components/Button';
-import classNames from 'classnames';
-
-export interface Props {
-  id?: string;
-  className?: string;
-  image?: string;
-  imageClass?: string;
-  altText?: string;
-  bordered?: string;
-  buttonProps?: buttonProps;
-}
-
-export const FyreCard = ({
-  id,
-  className,
-  image,
-  imageClass,
-  altText,
-  bordered,
-  buttonProps,
-}: Props) => {
-  const classList = classNames(
-    {
-      'border border-grey border-opacity-100': bordered,
-    },
-    className,
-    'flex flex-col',
-  )
-  const imageClassList = classNames(imageClass, 'w-full');
-
-  return (
-    <div key={id} id={id} className={classList}>
-      <div className={classNames('flex flex-1 flex-col', 'card-content')}>
-        <div>
-          <img className={imageClassList} src={image} alt={altText} />
-        </div>
-        <div className="flex justify-end">
-          <Button {...buttonProps}>{buttonProps?.children}</Button>
-        </div>
-      </div>
-    </div>
-  );
-}

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

@@ -1,41 +0,0 @@
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { Greeting } from '.';
-
-const meta = {
-  title: 'Components/Greeting',
-  component: Greeting,
-  argTypes: {
-    ...idAndClassName,
-    morningMessage: {
-      type: { name: 'string', required: false },
-      description: 'Defines the morning message for the greeting component',
-      table: {
-        type: { summary: 'string' },
-      }
-    },
-    afternoonMessage: {
-      type: { name: 'string', required: false },
-      description: 'Defines the afternoon message for the greeting component',
-      table: {
-        type: { summary: 'string' },
-      }
-    },
-    eveningMessage: {
-      type: { name: 'string', required: false },
-      description: 'Defines the evening message for the greeting component',
-      table: {
-        type: { summary: 'string' },
-      }
-    }
-  },
-  args: {
-    morningMessage: 'What a beautiful morning it is today',
-  }
-}
-export default meta;
-
-type Story = StoryObj<typeof Greeting>;
-
-export const Default: Story = {};

package/src/components/Greeting/index.tsx

@@ -1,30 +0,0 @@
-export interface Props {
-  id?: string;
-  className?: string;
-  morningMessage?: string;
-  afternoonMessage?: string;
-  eveningMessage?: string;
-}
-
-export const Greeting = ({
-  morningMessage = 'Good morning',
-  afternoonMessage = 'Good afternoon',
-  eveningMessage = 'Good evening',
-}: Props) => {
-  const today = new Date();
-  const hours = `0${today.getHours().toString()}`.slice(-2);
-  const minutes = `0${today.getMinutes().toString()}`.slice(-2);
-  const seconds = `0${today.getSeconds().toString()}`.slice(-2);
-  const time = parseInt(`${hours}${minutes}${seconds}`);
-
-  let message = '';
-  if (time < 120000) {
-    message = morningMessage;
-  } else if (time > 115959 && time < 170000) {
-    message = afternoonMessage;
-  } else if (time > 165959) {
-    message = eveningMessage;
-  }
-
-  return <p>{message}</p>;
-}

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

@@ -1,32 +0,0 @@
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { HamburgerIcon } from '.';
-
-const meta = {
-  title: 'Components/Hamburger Icon',
-  component: HamburgerIcon,
-  parameters: {
-    docs: {
-      description: {
-        component: 'An icon component',
-      }
-    },
-    layout: 'padded',
-  },
-  argTypes: {
-    ...idAndClassName,
-
-    onClick: {
-      type: { name: 'function', required: false },
-      description: 'Function to be called when the button is clicked',
-      table: { type: { summary: 'function' } },
-    }
-  }
-};
-
-export default meta;
-
-type Story = StoryObj<typeof HamburgerIcon>;
-
-export const Default: Story = {};

package/src/components/HamburgerIcon/index.tsx

@@ -1,97 +0,0 @@
-import React, { useState } from 'react';
-
-import { Button } from '@components/Button';
-import classNames from 'classnames';
-
-export interface Props extends Partial<Pick<HTMLElement, 'className' | 'id'>> {
-  onClick?: React.MouseEventHandler;
-  variant?: 'primary' | 'secondary' | 'tertiary';
-}
-
-export const HamburgerIcon = ({
-  id,
-  className,
-  onClick,
-  variant = 'primary',
-}: Props) => {
-  const [opened, setOpened] = useState(false);
-  const classList = classNames(
-    {
-      'transition-all duration-500 outline-none fill-primary':
-        variant === 'secondary',
-      'transition-all duration-500 outline-none fill-secondary':
-        variant === 'primary',
-      'transition-all duration-500 outline-none fill-tertiary':
-        variant === 'tertiary',
-    },
-    className,
-  )
-
-  const lineOneClassList = classNames(
-    {
-      'origin-top-left -translate-y-0.5 translate-x-1 rotate-45': opened,
-    },
-    'origin-top-left duration-200 ease-linear transition-transform',
-  )
-
-  const lineTwoClassList = classNames(
-    {
-      'opacity-0': opened,
-      'opacity-100': !opened,
-    },
-    'duration-200 ease-linear transition-opacity',
-  )
-
-  const lineThreeClassList = classNames(
-    {
-      'origin-bottom-left translate-x-1 translate-y-px -rotate-45': opened,
-    },
-    'origin-bottom-left duration-200 ease-linear transition-transform',
-  )
-
-  const toggleOpened = (e: any): void => {
-    setOpened(!opened);
-    onClick?.(e);
-  }
-
-  return (
-    <Button
-      id={id}
-      className={classList}
-      onClick={(e) => {
-        toggleOpened(e);
-      }}
-      variant={variant}
-      type="icon"
-      label="Mobile menu toggle"
-    >
-      <svg
-        className={classNames(
-          {
-            'fill-primary': variant === 'primary',
-            'fill-secondary': variant === 'secondary',
-            'fill-tertiary': variant === 'tertiary',
-          },
-          'transition-backgroundColor mx-auto transform overflow-visible duration-500',
-        )}
-        width="24"
-        height="24"
-        viewBox="0 0 24 15"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          className={lineOneClassList}
-          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={lineTwoClassList}
-          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={lineThreeClassList}
-          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>
-  );
-}

package/src/components/HorizontalLine/HorizontalLine.stories.tsx

@@ -1,54 +0,0 @@
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { HorizontalLine } from '.';
-
-const meta = {
-  title: 'Components/HorizontalLine',
-  component: HorizontalLine,
-  argTypes: {
-    ...idAndClassName,
-
-    colour: {
-      description: 'The colour of the component',
-      control: 'select',
-      table: {
-        type: { summary: 'select' },
-        defaultValue: { summary: 'primary' },
-      },
-      defaultValue: 'primary',
-    },
-    topLine: {
-      description: 'Adds margin underneath the component',
-      control: 'boolean',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-      },
-      defaultValue: 'false',
-    },
-    bottomLine: {
-      description: 'Adds margin above the component',
-      control: 'boolean',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-      },
-      defaultValue: 'false',
-    },
-    middleLine: {
-      description: 'Adds margin above and below the component',
-      control: 'boolean',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-      },
-      defaultValue: 'false',
-    }
-  }
-};
-export default meta;
-
-type Story = StoryObj<typeof HorizontalLine>;
-
-export const Default: Story = {};

package/src/components/HorizontalLine/index.tsx

@@ -1,32 +0,0 @@
-import { type Colours } from '@utils/controls';
-import classNames from 'classnames';
-
-export interface Props {
-  id?: string;
-  className?: string;
-  colour?: Colours;
-  topLine?: boolean;
-  bottomLine?: boolean;
-  middleLine?: boolean;
-}
-
-export const HorizontalLine = ({
-  id,
-  className,
-  colour = 'primary',
-  topLine = false,
-  bottomLine = false,
-  middleLine = false,
-}: Props) => {
-  const classList = classNames(
-    {
-      'mb-6': topLine,
-      'mt-6': bottomLine,
-      'my-6': middleLine,
-    },
-    className,
-    'my-0 h-0.5 border-none py-0',
-  )
-
-  return <hr id={id} className={classList} />;
-}

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

@@ -1,22 +0,0 @@
-import { faHeart } from '@fortawesome/fontawesome-free-solid';
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { Icon } from '.';
-
-const meta = {
-  title: 'Components/Icon',
-  component: Icon,
-  argTypes: {
-    ...idAndClassName,
-  },
-  args: {
-    icon: faHeart,
-  }
-}
-
-export default meta;
-
-type Story = StoryObj<typeof Icon>;
-
-export const Default: Story = {};

package/src/components/Icon/index.tsx

@@ -1,25 +0,0 @@
-import {
-  type IconProp,
-  type SizeProp,
-} from '@fortawesome/fontawesome-svg-core';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-
-export interface IconProps {
-  id?: string;
-  icon: IconProp;
-  colour?: string;
-  size?: SizeProp;
-  onClick?: () => void;
-}
-
-export const Icon = ({ id, icon, colour, size = '1x', onClick }: IconProps) => {
-  return (
-    <FontAwesomeIcon
-      onClick={onClick}
-      id={id}
-      icon={icon}
-      size={size}
-      color={colour}
-    />
-  );
-}

package/src/components/IconCard/IconCard.stories.tsx

@@ -1,26 +0,0 @@
-import { faHeading } from '@fortawesome/fontawesome-free-solid';
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { IconCard } from '.';
-
-const meta = {
-  title: 'Components/IconCard',
-  component: IconCard,
-  argTypes: {
-    ...idAndClassName,
-  },
-  args: {
-    title: 'This is a title',
-    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.',
-    iconProps: {
-      icon: faHeading,
-    }
-  }
-};
-export default meta;
-
-type Story = StoryObj<typeof IconCard>;
-
-export const Default: Story = {};

package/src/components/IconCard/index.tsx

@@ -1,54 +0,0 @@
-import React from 'react';
-
-import { Icon, type IconProps } from '@components/Icon';
-import classNames from 'classnames';
-
-interface AnchorAttributes
-  extends Partial<
-    Pick<JSX.IntrinsicElements['a'], 'href' | 'title' | 'target'>
-  > {}
-
-export interface IconCardProps {
-  id?: string;
-  className?: string;
-  title: string;
-  description: string;
-  iconProps: IconProps;
-  href?: string;
-  target?: string;
-  onClick?: () => void;
-}
-
-export const IconCard = ({
-  id,
-  className,
-  title,
-  description,
-  iconProps,
-  href,
-  target,
-  onClick,
-}: IconCardProps) => {
-  const classList = classNames(
-    className,
-    'flex flex-col bg-white hover:bg-lightest-grey cursor-pointer shadow-xl drop-shadow mx-auto my-auto w-full rounded-2xl p-4',
-  )
-
-  let Tag: keyof Pick<JSX.IntrinsicElements, 'a' | 'div'> = 'div';
-  let attributes: AnchorAttributes = {};
-
-  if (Boolean(href) || Boolean(target)) {
-    Tag = 'a';
-    attributes = { href, title, target };
-  }
-
-  return (
-    <Tag id={id} className={classList} onClick={onClick} {...attributes}>
-      <div className="py-2">
-        <Icon {...iconProps} size="2x" />
-      </div>
-      <p className="pt-6 text-md font-semiBold text-ink">{title}</p>
-      <p className="text-light-grey">{description}</p>
-    </Tag>
-  );
-}