trepur_components 2.3.7 → 2.3.9

package/src/components/MenuButton/index.tsx

@@ -0,0 +1,66 @@
+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/{archive → src/components}/Modal/Modal.stories.tsx

@@ -1,12 +1,11 @@
 import React, { useState } from 'react';
 
-import { type Meta } from '@storybook/react';
 import classNames from 'classnames';
 
-import Modal from '.';
+import { Modal } from '.';
 
 const meta = {
-  title: 'Trepur Components/molecules/Modal',
+  title: 'Components/Modal',
   component: Modal,
   parameters: {
     docs: {
@@ -44,10 +43,7 @@ const meta = {
   args: {
     visible: true,
     children: (
-      <div
-        style={{ maxWidth: '609px' }}
-        className={classNames('theme-local rounded-2xl bg-white p-4')}
-      >
+      <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.
@@ -64,7 +60,7 @@ const meta = {
   },
 };
 
-const Template = (args): React.ReactElement => {
+const Template = (args: any): React.ReactElement => {
   const [visible, setVisible] = useState<boolean>(false);
 
   return (

package/{archive → src/components}/Modal/index.tsx

@@ -2,8 +2,6 @@ import React, { useState, useEffect } from 'react';
 
 import classNames from 'classnames';
 
-
-
 export interface Props extends Partial<Pick<HTMLElement, 'className' | 'id'>> {
   children?: React.ReactNode;
   visible?: boolean;
@@ -12,7 +10,7 @@ export interface Props extends Partial<Pick<HTMLElement, 'className' | 'id'>> {
   animationStyle?: 'fade' | 'slideBottom';
 }
 
-const Modal = ({
+export const Modal = ({
   id,
   className,
   children,
@@ -20,7 +18,7 @@ const Modal = ({
   onOverlayClick,
   mobileGutter,
   animationStyle = 'fade',
-}: Props): JSX.Element => {
+}: Props) => {
   const [hidden, setHidden] = useState(!visible);
   const [showModal, setShowModal] = useState(visible);
 
@@ -46,19 +44,20 @@ const Modal = ({
 
   const classList = classNames(
     {
-      [style.visible]: !hidden && showModal,
+      'opacity-100': !hidden && showModal,
     },
-    style.overlay,
+    '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(
     {
-      [style.visible]: showModal,
-      [style.mobileGutter]: mobileGutter,
-      [style.slideBottom]: animationStyle === 'slideBottom',
+      'opacity-100': showModal,
+      'px-4 md:px-0': mobileGutter,
+      'transition-transform duration-300 ease-linear ease-out opacity-100 translate-y-full':
+        animationStyle === 'slideBottom',
     },
-    style.children,
+    ' 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 <></>;
@@ -70,5 +69,3 @@ const Modal = ({
     </>
   );
 };
-
-export default Modal;

package/src/components/Nav/Nav.stories.tsx

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

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

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

package/src/components/NavItem/index.tsx

@@ -0,0 +1,39 @@
+import { forwardRef, HTMLAttributes } from 'react';
+
+import clsx from 'clsx';
+
+const NavItemComponent = forwardRef<
+  HTMLAnchorElement,
+  HTMLAttributes<HTMLAnchorElement> & { href: string }
+>(({ children, className, href, ...props }, ref) => {
+  return (
+    <a
+      href={href}
+      ref={ref}
+      className={clsx(
+        'mx-auto h-8 py-0 text-white after:block after:scale-x-0 after:border-b-4 after:transition-all after:duration-300 after:ease-in-out hover:cursor-pointer hover:after:scale-x-100',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </a>
+  );
+});
+
+const NavItemLabel = forwardRef<
+  HTMLParagraphElement,
+  HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p className="text-xl font-normal tracking-wider" ref={ref} {...props} />
+));
+
+NavItemComponent.displayName = 'NavItem';
+
+NavItemLabel.displayName = 'NavItem.Label';
+
+const NavItem = Object.assign(NavItemComponent, {
+  Label: NavItemLabel,
+});
+
+export { NavItem };

package/src/components/Pill/Pill.stories.tsx

@@ -0,0 +1,51 @@
+import { Pill } from './';
+import { faHeart } from '@fortawesome/fontawesome-free-solid';
+import { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  title: 'V2Components/Pill',
+  component: Pill,
+  args: {
+    children: [
+      <Pill.Icon icon={faHeart} />,
+      <Pill.Label>This is a pill</Pill.Label>,
+    ],
+  },
+} satisfies Meta<typeof Pill>;
+export default meta;
+
+type Story = StoryObj<typeof Pill>;
+
+export const Default: Story = {};
+
+export const Error: Story = {
+  ...Default,
+  args: {
+    ...Default.args,
+    variant: 'error',
+  },
+};
+
+export const Warning: Story = {
+  ...Default,
+  args: {
+    ...Default.args,
+    variant: 'warning',
+  },
+};
+
+export const Success: Story = {
+  ...Default,
+  args: {
+    ...Default.args,
+    variant: 'success',
+  },
+};
+
+export const Info: Story = {
+  ...Default,
+  args: {
+    ...Default.args,
+    variant: 'info',
+  },
+};

package/src/components/Pill/index.tsx

@@ -0,0 +1,69 @@
+import { ComponentPropsWithoutRef, forwardRef, HTMLAttributes } from 'react';
+
+import clsx from 'clsx';
+
+import { Icon } from '..';
+
+// Enhanced version of `Pick` that works with union types and retains whether a property is optional (Pick does not)
+// See https://github.com/microsoft/TypeScript/issues/28483#issuecomment-438084079
+export type PickU<T, K extends keyof T> = T extends any
+  ? { [P in K]: T[P] }
+  : never;
+
+export type PillVariant = 'default' | 'warning' | 'error' | 'info' | 'success';
+
+export interface PillProps {
+  variant?: PillVariant;
+  loading?: boolean;
+}
+
+const PillComponent = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement> & PillProps
+>(({ children, variant = 'default' }, ref) => {
+  return (
+    <div
+      ref={ref}
+      className={clsx(
+        'inline-grid grid-flow-col items-center gap-1 rounded-full border px-2 py-0.5',
+        {
+          '': variant === 'default',
+          'border-error-default bg-error-light text-error-default':
+            variant === 'error',
+          'border-info-default bg-info-light text-info-default':
+            variant === 'info',
+          'border-success-default bg-success-light text-success-default':
+            variant === 'success',
+          'border-warning-default bg-warning-light text-warning-default':
+            variant === 'warning',
+        },
+      )}
+    >
+      {children}
+    </div>
+  );
+});
+
+const PillLabel = forwardRef<
+  HTMLParagraphElement,
+  HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p className={clsx('text-xs', className)} ref={ref} {...props} />
+));
+
+const PillIcon = forwardRef<
+  SVGSVGElement,
+  PickU<ComponentPropsWithoutRef<typeof Icon>, 'icon'>
+>(({ icon }, ref) => <Icon size="xs" ref={ref} icon={icon} />);
+
+PillComponent.displayName = 'Pill';
+PillIcon.displayName = 'Pill.Icon';
+
+PillLabel.displayName = 'Chip.Label';
+
+const Pill = Object.assign(PillComponent, {
+  Icon: PillIcon,
+  Label: PillLabel,
+});
+
+export { Pill };

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

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { idAndClassName } from '@utils/controls';
 
-import Search from '.';
+import { Search } from '.';
 
 const meta = {
   title: 'Components/Search',
@@ -58,6 +58,6 @@ const meta = {
 };
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof Search>;
 
 export const Default: Story = {};

package/{archive → src/components}/Search/index.tsx

@@ -1,21 +1,19 @@
-import React, { ChangeEventHandler } from 'react';
+import { type ChangeEventHandler } from 'react';
 
-import Icon, { type Props as iconProps } from '@components/Icon';
+import { Icon, IconProps } from '@components/Icon';
 import classNames from 'classnames';
 
-
-
 export interface Props {
   id?: string;
   className?: string;
   onChange?: (val: string | number) => void;
   placeholder?: string;
   text?: string;
-  leftIconProps?: iconProps;
-  rightIconProps?: iconProps;
+  leftIconProps?: IconProps;
+  rightIconProps?: IconProps;
 }
 
-const Search = ({
+export const Search = ({
   id,
   className,
   onChange,
@@ -23,15 +21,15 @@ const Search = ({
   text,
   leftIconProps,
   rightIconProps,
-}: Props): JSX.Element => {
-  const classList = classNames(className, style.classList, 'theme-local');
+}: Props) => {
+  const classList = classNames(className, 'flex');
 
   const inputClasses = classNames(
     {
-      [style.leftIcon]: leftIconProps !== undefined,
-      [style.noLeftIcon]: leftIconProps === undefined,
+      'pl-9': leftIconProps !== undefined,
+      'pl-2': leftIconProps === undefined,
     },
-    style.inputClassList,
+    'w-full rounded-md border-2 py-2 pr-9',
   );
 
   const onChangeFunc: ChangeEventHandler<HTMLInputElement> | undefined =
@@ -45,11 +43,11 @@ const Search = ({
     <div id={id} className={classList}>
       <div>
         {text !== undefined && (
-          <h2 className={classNames(style.text, 'font-base-lg')}>{text}</h2>
+          <h2 className="font-base-lg py-2 pr-4">{text}</h2>
         )}
       </div>
       <div>
-        <div className={style.inputWrapper}>
+        <div className="relative flex w-full">
           {leftIconProps !== undefined && <Icon {...leftIconProps} />}
           <input
             className={inputClasses}
@@ -64,5 +62,3 @@ const Search = ({
     </div>
   );
 };
-
-export default Search;

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

@@ -1,8 +1,7 @@
+import { Select } from './';
 import { Meta, StoryObj } from '@storybook/react';
 import { idAndClassName } from '@utils/controls';
 
-import Select from '.';
-
 const meta = {
   title: 'Components/Select',
   component: Select,
@@ -51,6 +50,6 @@ const meta = {
 
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof Select>;
 
 export const Default: Story = {};