trepur_components 2.3.8 → 2.3.9

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

@@ -1,87 +1,14 @@
-import { action } from '@storybook/addon-actions';
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { NavItem } from '.';
+import { NavItem } from './';
+import { Meta, StoryObj } from '@storybook/react';
 
 const meta = {
-  title: 'Components/Nav Item',
+  title: 'V2Components/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'),
-  }
-}
+    className: 'text-primary after:border-primary',
+    children: [<NavItem.Label>Nav Item 1</NavItem.Label>],
+  },
+} satisfies Meta<typeof NavItem>;
 
 export default meta;
 

package/src/components/NavItem/index.tsx

@@ -1,43 +1,39 @@
-import React from 'react';
+import { forwardRef, HTMLAttributes } from 'react';
 
-import classNames from 'classnames';
+import clsx from 'clsx';
 
-export interface Props {
-  id?: string;
-  className?: string;
-  title: string;
-  href?: string;
-  onClick?: React.MouseEventHandler;
-  bordered?: boolean;
-  rounded?: boolean;
-  underlineOnHover?: boolean;
-  isActive?: boolean;
-  variant?: 'primary' | 'secondary' | 'tertiary';
-  tabindex?: number;
-}
+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>
+  );
+});
 
-export const NavItem = ({
-  id,
-  className,
-  title,
-  href = '/',
-  onClick,
-  tabindex,
-}: Props) => {
-  const classList = classNames(className, 'w-auto list-none');
+const NavItemLabel = forwardRef<
+  HTMLParagraphElement,
+  HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p className="text-xl font-normal tracking-wider" ref={ref} {...props} />
+));
 
-  const anchorClassList = 'rounded-xl border-2 border-transparent p-2';
+NavItemComponent.displayName = 'NavItem';
 
-  return (
-    <div id={id} className={classList}>
-      <a
-        href={href}
-        onClick={onClick}
-        className={anchorClassList}
-        {...(tabindex !== undefined && { tabIndex: tabindex })}
-      >
-        <span className="whitespace-nowrap text-center">{title}</span>
-      </a>
-    </div>
-  );
-}
+NavItemLabel.displayName = 'NavItem.Label';
+
+const NavItem = Object.assign(NavItemComponent, {
+  Label: NavItemLabel,
+});
+
+export { NavItem };

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

@@ -1,44 +1,51 @@
-import { action } from '@storybook/addon-actions';
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { Pill } from '.';
+import { Pill } from './';
+import { faHeart } from '@fortawesome/fontawesome-free-solid';
+import { Meta, StoryObj } from '@storybook/react';
 
 const meta = {
-  title: 'Components/Pill',
+  title: 'V2Components/Pill',
   component: Pill,
-  argTypes: {
-    ...idAndClassName,
-    text: {
-      type: { name: 'string', required: false },
-      description: 'The text to display in 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' },
-      }
-    },
-    dismissOnClick: {
-      type: { name: 'boolean', required: false },
-      description: 'To toggle the disappearance of the component on click',
-      table: {
-        type: { summary: 'boolean' },
-      }
-    }
-  },
   args: {
-    text: 'This is a pill',
-    onClick: action('pill clicked'),
-  }
-}
+    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

@@ -1,54 +1,69 @@
-import { useState } from 'react';
+import { ComponentPropsWithoutRef, forwardRef, HTMLAttributes } from 'react';
+
+import clsx from 'clsx';
 
-import { faCrosshairs } from '@fortawesome/fontawesome-free-solid';
-import { type IconProp } from '@fortawesome/fontawesome-svg-core';
-import classNames from 'classnames';
 import { Icon } from '..';
 
-export interface Props {
-  id?: string;
-  className?: string;
-  text: string;
-  onClick?: () => void;
-  dismissOnClick?: boolean;
-}
+// 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 const Pill = ({
-  id,
-  className,
-  text,
-  onClick,
-  dismissOnClick = false,
-}: Props) => {
-  const [shouldDisplay, setShouldDisplay] = useState(true);
-
-  const classList = classNames(
-    {
-      invisible: !shouldDisplay,
-      'px-4': !dismissOnClick,
-      'pl-4 pr-1': dismissOnClick,
-    },
-    className,
-    'rounded-full border-2 py-1 inline-block border-primary text-primary',
-  )
-
-  const handleOnClick = (): void => {
-    if (dismissOnClick) {
-      setShouldDisplay(false);
-    }
-    onClick?.();
-  }
-
-  return shouldDisplay ? (
-    <button id={id} className={classList} onClick={handleOnClick}>
-      <div className="flex">
-        <p>{text}</p>
-        {dismissOnClick && (
-          <Icon icon={faCrosshairs as IconProp} colour="primary" />
-        )}
-      </div>
-    </button>
-      ) : (
-    <></>
-      );
+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/src/components/Search/Search.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, type StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 import { idAndClassName } from '@utils/controls';
 
 import { Search } from '.';
@@ -15,7 +15,7 @@ const meta = {
       control: 'text',
       table: {
         category: '',
-      }
+      },
     },
     rightIconProps: {
       description:
@@ -23,7 +23,7 @@ const meta = {
       control: 'text',
       table: {
         category: '',
-      }
+      },
     },
     placeholder: {
       description:
@@ -31,7 +31,7 @@ const meta = {
       control: 'text',
       table: {
         category: '',
-      }
+      },
     },
     text: {
       description:
@@ -39,8 +39,8 @@ const meta = {
       control: 'text',
       table: {
         category: '',
-      }
-    }
+      },
+    },
   },
   args: {
     placeholder: 'search...',
@@ -53,8 +53,8 @@ const meta = {
       type: 'heart',
       className: 'absolute mt-2 right-3 flex items-center',
       bgColour: 'white',
-    }
-  }
+    },
+  },
 };
 export default meta;
 

package/src/components/Search/index.tsx

@@ -1,6 +1,6 @@
 import { type ChangeEventHandler } from 'react';
 
-import { Icon, type IconProps } from '@components/Icon';
+import { Icon, IconProps } from '@components/Icon';
 import classNames from 'classnames';
 
 export interface Props {
@@ -30,7 +30,7 @@ export const Search = ({
       'pl-2': leftIconProps === undefined,
     },
     'w-full rounded-md border-2 py-2 pr-9',
-  )
+  );
 
   const onChangeFunc: ChangeEventHandler<HTMLInputElement> | undefined =
     onChange != null
@@ -61,4 +61,4 @@ export const Search = ({
       </div>
     </div>
   );
-}
+};

package/src/components/Select/Select.stories.tsx

@@ -1,5 +1,5 @@
 import { Select } from './';
-import { Meta, type StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 import { idAndClassName } from '@utils/controls';
 
 const meta = {
@@ -14,8 +14,8 @@ const meta = {
       control: 'text',
       table: {
         category: '',
-      }
-    }
+      },
+    },
   },
   args: {
     label: 'This is a label',
@@ -44,8 +44,8 @@ const meta = {
       'Option 2',
       'Option 3',
       'Option 4',
-    ]
-  }
+    ],
+  },
 };
 
 export default meta;