trepur_components 2.3.8 → 2.3.10

package/src/components/InformationIconBlock/index.tsx

@@ -1,56 +0,0 @@
-import { ComponentWrapper } from '@components/ComponentWrapper';
-import { Container } from '@components/Container';
-import { type IconProps } from '@components/Icon';
-import { InformationIcon } from '@components/InformationIcon';
-import { type Colours } from '@utils/controls';
-
-export interface Props {
-  id?: string;
-  className?: string;
-  title?: string;
-  description?: string;
-  bgColour?: Colours;
-  icons?: IconProps[];
-}
-
-export const InformationIconBlock = ({
-  id,
-  className,
-  title,
-  description,
-  bgColour,
-  icons,
-}: Props) => {
-  const classList = className;
-  return (
-    <ComponentWrapper
-      id={id}
-      className={classList}
-      title={title}
-      description={description}
-      bgColour={bgColour}
-    >
-      <Container
-        className="grid grid-cols-2 gap-4 xl:grid-cols-4"
-        withPadding={false}
-      >
-        {icons?.map((icon: any, i: number) => {
-          return (
-            <InformationIcon
-              key={i}
-              iconProps={{
-                size: '2x',
-                icon: icon.icon,
-                colour: 'primary',
-              }}
-              id={icon.name.replace(/\s+/g, '')}
-              title={icon.name}
-              subtitle={icon.value}
-              withAnimation
-            />
-          );
-        })}
-      </Container>
-    </ComponentWrapper>
-  );
-}

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

@@ -1,84 +0,0 @@
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { Input } from '.';
-
-const meta = {
-  title: 'Components/Input',
-  component: Input,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-
-    label: {
-      description: '',
-      control: 'text',
-      table: {
-        category: '',
-      }
-    },
-    placeholder: {
-      description: '',
-      control: 'text',
-      table: {
-        category: '',
-      }
-    },
-    bold: {
-      description: '',
-      control: 'boolean',
-      table: {
-        category: '',
-      }
-    },
-    required: {
-      description: '',
-      control: 'boolean',
-      table: {
-        category: '',
-      }
-    },
-    withValidation: {
-      description: '',
-      control: 'boolean',
-      table: {
-        category: '',
-      }
-    },
-    errors: {
-      description: 'An array of errors to display',
-      control: 'array',
-      table: {
-        category: '',
-      }
-    },
-    value: {
-      description: 'The default value of the input',
-      control: 'text',
-      table: {
-        category: '',
-      }
-    },
-    bgColour: {
-      type: { name: 'string', required: false },
-      options: ['primary', 'secondary', 'white', 'black', 'gold'],
-      description: 'The background colour of the component',
-      table: {
-        type: { summary: 'string' },
-      },
-      defaultValue: 'primary',
-      control: 'select',
-    }
-  },
-  args: {
-    label: 'This is a label',
-    placeholder: 'This is a placeholder',
-    errors: [],
-  }
-}
-
-export default meta;
-
-type Story = StoryObj<typeof Input>;
-
-export const Default: Story = {};

package/src/components/Input/index.tsx

@@ -1,130 +0,0 @@
-import { useRef } from 'react';
-
-import { type Colours } from '@utils/controls';
-import classNames from 'classnames';
-
-export interface Props {
-  id?: string;
-  className?: string;
-  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[];
-  errorState?: boolean;
-  value?: string;
-  bgColour?: Colours;
-}
-
-export const Input = ({
-  id,
-  className,
-  autoComplete,
-  disabled,
-  formId,
-  height,
-  maxLength,
-  minLength,
-  pattern,
-  required = false,
-  readOnly,
-  label,
-  type,
-  name,
-  placeholder,
-  onChange,
-  onBlur,
-  onFocus,
-  onClick,
-  withValidation,
-  errors,
-  errorState = false,
-  value,
-}: Props) => {
-  const newId = id !== undefined ? `-${id}` : '';
-
-  const valueClassList = classNames(
-    {
-      'border-2 border-error': errors != null || errorState,
-    },
-    'w-full rounded-md bg-white py-2 pl-4 text-ink cursor-pointer border border-black text-md',
-  )
-
-  const labelClassList = classNames({
-    'text-error': errors != null || errorState,
-  })
-
-  const headerClassList = classNames(
-    className,
-    'mt-4 w-full bg-white cursor-pointer',
-  )
-
-  const btnRef = useRef<any>(null);
-
-  const handleClick = (): void => {
-    btnRef.current?.focus();
-  }
-
-  return (
-    <>
-      <div id={id} className={headerClassList} onClick={handleClick}>
-        <div className="absolute -mt-3 ml-3 flex rounded-2xl bg-white px-1 text-sm font-regular">
-          <p className={labelClassList}>{label}</p>
-          {required && <p className="font-semiBold text-error">&nbsp;*</p>}
-        </div>
-        <input
-          ref={btnRef}
-          id={`input${newId}`}
-          className={valueClassList}
-          autoComplete={autoComplete}
-          disabled={disabled}
-          form={formId}
-          height={height}
-          maxLength={maxLength}
-          minLength={minLength}
-          pattern={pattern}
-          required={required}
-          readOnly={readOnly}
-          type={type}
-          name={name}
-          value={value}
-          placeholder={placeholder}
-          onChange={(e) => {
-            onChange?.(e);
-          }}
-          onBlur={onBlur}
-          onFocus={onFocus}
-          onClick={onClick}
-        />
-      </div>
-      {withValidation && (
-        <div id={`errors${newId}`} className="text-sm font-regular text-error">
-          {errors?.map((error, i) => {
-            return (
-              <p
-                key={`error-msg-${i + 0}`}
-                className="mt-1 border-l-4 border-error pl-3"
-              >
-                {error}
-              </p>
-            );
-          })}
-        </div>
-      )}
-    </>
-  );
-}

package/src/components/Jumbotron/Jumbotron.stories.tsx

@@ -1,21 +0,0 @@
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { Jumbotron } from '.';
-
-const meta = {
-  title: 'Components/Jumbotron',
-  component: Jumbotron,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-  },
-  args: {
-    image: 'https://picsum.photos/1000/1000',
-  }
-}
-export default meta;
-
-type Story = StoryObj<typeof Jumbotron>;
-
-export const Default: Story = {};

package/src/components/Jumbotron/index.tsx

@@ -1,19 +0,0 @@
-import classNames from 'classnames';
-
-export interface Props {
-  id?: string;
-  className?: string;
-  image?: string;
-  altText?: string;
-  title?: string;
-}
-
-export const Jumbotron = ({ id, className, image, altText, title }: Props) => {
-  const classList = classNames(className, 'h-96 overflow-hidden w-full');
-  const imageClassList = 'h-full w-full object-cover';
-  return (
-    <div id={id} className={classList}>
-      <img className={imageClassList} src={image} alt={altText} title={title} />
-    </div>
-  );
-}

package/src/components/MenuButton/MenuButton.stories.tsx

@@ -1,46 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { MenuButton } from '.';
-
-const meta = {
-  title: 'Components/Menu Button',
-  component: MenuButton,
-  argTypes: {
-    ...idAndClassName,
-    backgroundColour: {
-      type: { name: 'string', required: false },
-      options: ['primary', 'secondary', 'white', 'black', 'gold'],
-      description: 'The background colour of the component',
-      table: {
-        type: { summary: 'string' },
-      },
-      defaultValue: 'primary',
-      control: 'select',
-    },
-
-    menuItems: {
-      description: 'The items to show in the menu',
-      control: 'array',
-      table: {
-        type: { summary: 'array' },
-      }
-    }
-  },
-  args: {
-    backgroundColour: 'white',
-    onClick: action('clicked'),
-    menuItems: [
-      { name: 'Menu Item 1', href: '#' },
-      { name: 'Menu Item 2', href: '#' },
-      { name: 'Menu Item 3', href: '#' },
-      { name: 'Menu Item 4', href: '#' },
-    ]
-  }
-};
-export default meta;
-
-type Story = StoryObj<typeof MenuButton>;
-
-export const Default: Story = {};

package/src/components/MenuButton/index.tsx

@@ -1,66 +0,0 @@
-import React, { useState } from 'react';
-
-import { DropdownMenu } from '@components/DropdownMenu';
-import { Image } from '@components/Image';
-import { type Colours } from '@utils/controls';
-import classNames from 'classnames';
-
-export interface Props {
-  id?: string;
-  className?: string;
-  backgroundColour?: Colours;
-
-  menuItems: Array<{ name: string; href: string }>;
-  onClick?: React.MouseEventHandler;
-}
-
-export const MenuButton = ({
-  id,
-  className,
-  backgroundColour = 'white',
-
-  menuItems,
-  onClick,
-}: Props) => {
-  const [showMenu, setShowMenu] = useState(false);
-  const classList = classNames(
-    className,
-    'h-[45px] w-[80px] overflow-hidden rounded-full border-2 border-lightest-grey my-auto flex cursor-pointer justify-between pl-2 text-center hover:shadow-md',
-  )
-
-  if (!menuItems) return <></>;
-
-  return (
-    <div>
-      <div
-        id={id}
-        className={classList}
-        onClick={() => {
-          setShowMenu(!showMenu);
-        }}
-      >
-        <div className="mx-auto my-auto" onClick={(e) => onClick?.(e)}>
-          <svg
-            width="18"
-            height="24"
-            viewBox="0 0 24 15"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path 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 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 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>
-        </div>
-        <Image
-          src="https://picsum.photos/300/300"
-          className="mx-auto my-auto h-8 w-8 rounded-full object-contain"
-        />
-      </div>
-      {showMenu && (
-        <div>
-          <DropdownMenu menuItems={menuItems} />
-        </div>
-      )}
-    </div>
-  );
-}

package/src/components/Modal/Modal.stories.tsx

@@ -1,82 +0,0 @@
-import React, { useState } from 'react';
-
-import classNames from 'classnames';
-
-import { Modal } from '.';
-
-const meta = {
-  title: 'Components/Modal',
-  component: Modal,
-  parameters: {
-    docs: {
-      description: {
-        component: 'A Modal component',
-      }
-    }
-  },
-  argTypes: {
-    id: {
-      type: { name: 'string', required: false },
-      description: 'HTML id attribute',
-      table: { type: { summary: 'string' } },
-    },
-    className: {
-      type: { name: 'string', required: false },
-      description: 'Additional classes to be appended to the component',
-      table: { type: { summary: 'string' } },
-    },
-    children: {
-      type: { name: 'other', value: 'string | React.ReactNode' },
-      description: 'The elements to show in the component',
-      table: {
-        type: {
-          summary: 'Array',
-        },
-        defaultValue: { summary: 'undefined' },
-      }
-    },
-    onOverlayClick: {
-      type: { name: 'function', required: false },
-      description: 'Specifies the action to take when the overlay is clicked',
-    }
-  },
-  args: {
-    visible: true,
-    children: (
-      <div style={{ maxWidth: '609px' }} className="rounded-2xl bg-white p-4">
-        <p className="py-4">
-          This is a child of the modal component, add any child to this
-          component to show in this location.
-        </p>
-        <p className="py-4">
-          Clicking outside of this child, will close the modal
-        </p>
-        <p className="py-4">
-          To bring me back up, just toggle the &apos;visible&apos; control in
-          storybook&apos;s controls
-        </p>
-      </div>
-    ),
-  }
-}
-
-const Template = (args: any): React.ReactElement => {
-  const [visible, setVisible] = useState<boolean>(false);
-
-  return (
-    <div style={{ height: '350vh' }}>
-      <Modal
-        visible={visible}
-        mobileGutter
-        onOverlayClick={() => {
-          setVisible(false);
-        }}
-        {...args}
-      />
-    </div>
-  );
-}
-
-export const _Modal = Template.bind({});
-
-export default meta;

package/src/components/Modal/index.tsx

@@ -1,71 +0,0 @@
-import React, { useState, useEffect } from 'react';
-
-import classNames from 'classnames';
-
-export interface Props extends Partial<Pick<HTMLElement, 'className' | 'id'>> {
-  children?: React.ReactNode;
-  visible?: boolean;
-  onOverlayClick?: () => void;
-  mobileGutter?: boolean;
-  animationStyle?: 'fade' | 'slideBottom';
-}
-
-export const Modal = ({
-  id,
-  className,
-  children,
-  visible = false,
-  onOverlayClick,
-  mobileGutter,
-  animationStyle = 'fade',
-}: Props) => {
-  const [hidden, setHidden] = useState(!visible);
-  const [showModal, setShowModal] = useState(visible);
-
-  useEffect(() => {
-    let timeoutId: ReturnType<typeof setTimeout>;
-
-    if (visible) {
-      setHidden(false);
-      timeoutId = setTimeout(() => {
-        setShowModal(true);
-      }, 100);
-    } else {
-      setShowModal(false);
-      timeoutId = setTimeout(() => {
-        setHidden(true);
-      }, 300);
-    }
-
-    return () => {
-      clearTimeout(timeoutId);
-    }
-  }, [visible]);
-
-  const classList = classNames(
-    {
-      'opacity-100': !hidden && showModal,
-    },
-    'block h-screen w-screen fixed right-0 top-0 z-50 opacity-0 transition-opacity duration-300 ease-linear ease-out',
-    className,
-  )
-
-  const childrenClassList = classNames(
-    {
-      'opacity-100': showModal,
-      'px-4 md:px-0': mobileGutter,
-      'transition-transform duration-300 ease-linear ease-out opacity-100 translate-y-full':
-        animationStyle === 'slideBottom',
-    },
-    ' mx-auto flex w-full md:w-auto fixed left-1/2 top-1/2 z-50 block -translate-x-1/2 -translate-y-1/2 transform opacity-0 transition-opacity duration-300 ease-linear ease-out',
-  )
-
-  if (hidden) return <></>;
-
-  return (
-    <>
-      <div id={id} className={classList} onClick={onOverlayClick} />
-      {children && <div className={childrenClassList}>{children}</div>}
-    </>
-  );
-}

package/src/components/NavItem/NavItem.stories.tsx

@@ -1,90 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { NavItem } from '.';
-
-const meta = {
-  title: 'Components/Nav Item',
-  component: NavItem,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-    title: {
-      type: { name: 'string', required: false },
-      description: 'A title for the component',
-      table: {
-        type: { summary: 'string' },
-      }
-    },
-    href: {
-      type: { name: 'string', required: false },
-      description: 'A href for the component',
-      table: {
-        type: { summary: 'string' },
-      }
-    },
-    onClick: {
-      type: { name: 'function', required: false },
-      description:
-        'An on click handle to execute when clicking on the component',
-      table: {
-        type: { summary: 'function' },
-      }
-    },
-    bordered: {
-      type: { name: 'boolean', required: false },
-      description: 'Enables borders around the component',
-      table: {
-        type: { summary: 'boolean' },
-      },
-      defaultValue: false,
-    },
-    rounded: {
-      type: { name: 'boolean', required: false },
-      description: 'Roundes the corners of the component',
-      table: {
-        type: { summary: 'boolean' },
-      },
-      defaultValue: true,
-    },
-    underlineOnHover: {
-      type: { name: 'boolean', required: false },
-      description: 'Underlines the title when hovering over the component',
-      table: {
-        type: { summary: 'boolean' },
-      },
-      defaultValue: true,
-    },
-    isActive: {
-      type: { name: 'boolean', required: false },
-      description: 'Set the active state to the component',
-      table: {
-        type: { summary: 'array' },
-      },
-      defaultValue: false,
-    },
-    variant: {
-      type: { name: 'string', required: false },
-      options: ['primary', 'secondary', 'tertiary'],
-      description: 'The varient of the component to render',
-      table: {
-        type: { summary: 'string' },
-      },
-      defaultValue: 'primary',
-      control: 'radio',
-    }
-  },
-  args: {
-    title: 'Home',
-    href: '/',
-    underlineOnHover: true,
-    onClick: action('button-click'),
-  }
-}
-
-export default meta;
-
-type Story = StoryObj<typeof NavItem>;
-
-export const Default: Story = {};