trepur_components 2.3.9 → 2.3.10

package/src/components/Input/index.tsx

@@ -1,139 +0,0 @@
-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/src/components/MenuButton/MenuButton.stories.tsx

@@ -1,46 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { Meta, 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 { Dropdown } from '@components/Dropdown';
-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>
-          <Dropdown />
-        </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/Nav/Nav.stories.tsx

@@ -1,80 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import { Nav, NavItem } from '..';
-
-const meta = {
-  title: 'V2Components/Nav',
-  component: Nav,
-  parameters: {
-    docs: {
-      story: { iframe: '1300px' },
-    },
-  },
-  args: {
-    children: [
-      <Nav.Header logo="https://picsum.photos/300/300">
-        <Nav.DesktopHeader>
-          <Nav.LeftSection>
-            <Nav.Folder label="about">
-              <NavItem href="">
-                <NavItem.Label>Item 1.1</NavItem.Label>
-              </NavItem>
-              <NavItem href="">
-                <NavItem.Label>Item 1.2</NavItem.Label>
-              </NavItem>
-            </Nav.Folder>
-            <NavItem href="">
-              <NavItem.Label>Item 2</NavItem.Label>
-            </NavItem>
-            <NavItem href="">
-              <NavItem.Label>Item 3</NavItem.Label>
-            </NavItem>
-          </Nav.LeftSection>
-          <Nav.Logo src="https://picsum.photos/300/300" />
-          <Nav.RightSection>
-            <NavItem href="">
-              <NavItem.Label>Item 4</NavItem.Label>
-            </NavItem>
-            <NavItem href="">
-              <NavItem.Label>Item 5</NavItem.Label>
-            </NavItem>
-            <NavItem href="">
-              <NavItem.Label>Item 6</NavItem.Label>
-            </NavItem>
-          </Nav.RightSection>
-        </Nav.DesktopHeader>
-      </Nav.Header>,
-      <Nav.Body>
-        <Nav.Folder label="about">
-          <NavItem href="">
-            <NavItem.Label>Item 1.1</NavItem.Label>
-          </NavItem>
-          <NavItem href="">
-            <NavItem.Label>Item 1.2</NavItem.Label>
-          </NavItem>
-        </Nav.Folder>
-        <NavItem href="">
-          <NavItem.Label>Item 2</NavItem.Label>
-        </NavItem>
-        <NavItem href="">
-          <NavItem.Label>Item 3</NavItem.Label>
-        </NavItem>
-        <NavItem href="">
-          <NavItem.Label>Item 4</NavItem.Label>
-        </NavItem>
-        <NavItem href="">
-          <NavItem.Label>Item 5</NavItem.Label>
-        </NavItem>
-        <NavItem href="">
-          <NavItem.Label>Item 6</NavItem.Label>
-        </NavItem>
-      </Nav.Body>,
-    ],
-  },
-} satisfies Meta<typeof Nav>;
-
-export default meta;
-
-type Story = StoryObj<typeof Nav>;
-
-export const Default: Story = {};

package/src/components/Nav/index.tsx

@@ -1,171 +0,0 @@
-import {
-  createContext,
-  forwardRef,
-  HTMLAttributes,
-  useContext,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-
-import { useClickOutside } from '@components/Dropdown/utils';
-import { HamburgerIcon } from '@components/HamburgerIcon';
-import { faChevronDown } from '@fortawesome/fontawesome-free-solid';
-import clsx from 'clsx';
-
-import { Icon, NavItem } from '..';
-import { ImageProps } from '../Image';
-
-export interface NavContextProps {
-  expanded?: boolean;
-  setExpanded?: (val: boolean) => void;
-}
-
-const NavContext = createContext<NavContextProps | null>(null);
-
-const NavComponent = forwardRef<
-  HTMLDivElement,
-  HTMLAttributes<HTMLDivElement> & NavContextProps
->(({ children }, ref) => {
-  const [expanded, setExpanded] = useState(false);
-
-  const state = useMemo(
-    () => ({
-      expanded,
-      setExpanded,
-    }),
-    [expanded, setExpanded],
-  );
-
-  return (
-    <NavContext.Provider value={state}>
-      <div>{children}</div>
-    </NavContext.Provider>
-  );
-});
-
-const NavHeader = forwardRef<
-  HTMLDivElement,
-  HTMLAttributes<HTMLDivElement> & { logo: string }
->(({ children, logo }, ref) => {
-  const { setExpanded, expanded } = useContext(NavContext) || {};
-  return (
-    <div ref={ref} className={clsx('relative h-20 w-full bg-nav px-2 py-2')}>
-      <div className="flex h-full md:hidden">
-        <div className="my-auto">
-          <HamburgerIcon
-            onClick={() => setExpanded?.(!expanded)}
-            className="aspect-square"
-          />
-        </div>
-        <div className="absolute left-1/2 top-full w-28 -translate-x-1/2 -translate-y-1/2 transform">
-          <NavLogo src={logo} />
-        </div>
-      </div>
-      {children}
-    </div>
-  );
-});
-
-const NavBody = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
-  ({ children }, ref) => {
-    const { expanded } = useContext(NavContext) || {};
-    if (!expanded) return <></>;
-    return (
-      <div className="h-screen bg-nav px-8 pb-12 pt-20 md:hidden">
-        <div className="grid grid-cols-1 gap-4 md:hidden">{children}</div>
-      </div>
-    );
-  },
-);
-
-const NavDesktopHeader = forwardRef<
-  HTMLDivElement,
-  HTMLAttributes<HTMLDivElement>
->(({ children }, ref) => {
-  return <div className="hidden grid-cols-7 gap-8 md:grid">{children}</div>;
-});
-
-const NavLeftSection = forwardRef<
-  HTMLDivElement,
-  HTMLAttributes<HTMLDivElement>
->(({ children }, ref) => {
-  return (
-    <div className="col-span-3 my-4 justify-between text-center md:flex">
-      {children}
-    </div>
-  );
-});
-
-const NavFolder = forwardRef<
-  HTMLDivElement,
-  HTMLAttributes<HTMLDivElement> & { label: string }
->(({ label, children }) => {
-  const [expanded, setExpanded] = useState(false);
-  const ref = useRef<HTMLDivElement>(null);
-
-  return (
-    <div
-      ref={ref}
-      onClick={() => setExpanded(true)}
-      onMouseLeave={() => setExpanded(false)}
-      className="mx-auto text-xl font-normal tracking-wider text-white hover:cursor-pointer"
-    >
-      <div className="flex items-center gap-2">
-        <p>{label}</p>
-        <Icon icon={faChevronDown} />
-      </div>
-      {expanded && (
-        <div className="mb:pb-2 grid grid-cols-1 bg-nav md:gap-5 md:pt-8">
-          {children}
-        </div>
-      )}
-    </div>
-  );
-});
-
-const NavLogo = forwardRef<
-  HTMLImageElement,
-  HTMLAttributes<HTMLImageElement> & ImageProps
->(({ className, src, ...props }, ref) => (
-  <div className="flex-none">
-    <img
-      className={clsx('rounded-full', className)}
-      ref={ref}
-      src={src}
-      {...props}
-    />
-  </div>
-));
-
-const NavRightSection = forwardRef<
-  HTMLDivElement,
-  HTMLAttributes<HTMLDivElement>
->(({ children }, ref) => {
-  return (
-    <div className="col-span-3 my-4 justify-between text-center md:flex">
-      {children}
-    </div>
-  );
-});
-
-NavComponent.displayName = 'Nav';
-NavHeader.displayName = 'Nav.Header';
-NavDesktopHeader.displayName = 'Nav.DesktopHeader';
-NavLogo.displayName = 'Nav.Logo';
-NavLeftSection.displayName = 'Nav.LeftSection';
-NavRightSection.displayName = 'Nav.RightSection';
-NavBody.displayName = 'Nav.Body';
-NavFolder.displayName = 'Nav.Folder';
-
-const Nav = Object.assign(NavComponent, {
-  Header: NavHeader,
-  DesktopHeader: NavDesktopHeader,
-  LeftSection: NavLeftSection,
-  RightSection: NavRightSection,
-  Logo: NavLogo,
-  Body: NavBody,
-  Folder: NavFolder,
-});
-
-export { Nav };

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

@@ -1,17 +0,0 @@
-import { NavItem } from './';
-import { Meta, StoryObj } from '@storybook/react';
-
-const meta = {
-  title: 'V2Components/Nav Item',
-  component: NavItem,
-  args: {
-    className: 'text-primary after:border-primary',
-    children: [<NavItem.Label>Nav Item 1</NavItem.Label>],
-  },
-} satisfies Meta<typeof NavItem>;
-
-export default meta;
-
-type Story = StoryObj<typeof NavItem>;
-
-export const Default: Story = {};