trepur_components 2.3.9 → 2.3.11

package/src/components/NavItem/index.tsx

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

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

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

@@ -1,63 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { Search } from '.';
-
-const meta = {
-  title: 'Components/Search',
-  component: Search,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-    leftIconProps: {
-      description:
-        'An optional param to display an icon to the left of the search bar',
-      control: 'text',
-      table: {
-        category: '',
-      },
-    },
-    rightIconProps: {
-      description:
-        'An optional param to display an icon to the right of the search bar',
-      control: 'text',
-      table: {
-        category: '',
-      },
-    },
-    placeholder: {
-      description:
-        'An optional param to display a placeholder inside the search box',
-      control: 'text',
-      table: {
-        category: '',
-      },
-    },
-    text: {
-      description:
-        'An optional param to display a label on the left of the search bar',
-      control: 'text',
-      table: {
-        category: '',
-      },
-    },
-  },
-  args: {
-    placeholder: 'search...',
-    leftIconProps: {
-      type: 'heart',
-      className: 'absolute mt-2 left-3 flex items-center',
-      bgColour: 'white',
-    },
-    rightIconProps: {
-      type: 'heart',
-      className: 'absolute mt-2 right-3 flex items-center',
-      bgColour: 'white',
-    },
-  },
-};
-export default meta;
-
-type Story = StoryObj<typeof Search>;
-
-export const Default: Story = {};

package/src/components/Search/index.tsx

@@ -1,64 +0,0 @@
-import { type ChangeEventHandler } from 'react';
-
-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;
-}
-
-export const Search = ({
-  id,
-  className,
-  onChange,
-  placeholder,
-  text,
-  leftIconProps,
-  rightIconProps,
-}: Props) => {
-  const classList = classNames(className, 'flex');
-
-  const inputClasses = classNames(
-    {
-      'pl-9': leftIconProps !== undefined,
-      'pl-2': leftIconProps === undefined,
-    },
-    'w-full rounded-md border-2 py-2 pr-9',
-  );
-
-  const onChangeFunc: ChangeEventHandler<HTMLInputElement> | undefined =
-    onChange != null
-      ? (e: any) => {
-          onChange(e.target.value);
-        }
-      : undefined;
-
-  return (
-    <div id={id} className={classList}>
-      <div>
-        {text !== undefined && (
-          <h2 className="font-base-lg py-2 pr-4">{text}</h2>
-        )}
-      </div>
-      <div>
-        <div className="relative flex w-full">
-          {leftIconProps !== undefined && <Icon {...leftIconProps} />}
-          <input
-            className={inputClasses}
-            onChange={onChangeFunc}
-            placeholder={placeholder}
-            type="text"
-            name="search"
-          />
-          {rightIconProps !== undefined && <Icon {...rightIconProps} />}
-        </div>
-      </div>
-    </div>
-  );
-};

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

@@ -1,55 +0,0 @@
-import { Select } from './';
-import { Meta, StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-const meta = {
-  title: 'Components/Select',
-  component: Select,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-
-    label: {
-      description: '',
-      control: 'text',
-      table: {
-        category: '',
-      },
-    },
-  },
-  args: {
-    label: 'This is a label',
-    options: [
-      'Option 1',
-      'Option 2',
-      'Option 3',
-      'Option 4',
-      'Option 1',
-      'Option 2',
-      'Option 3',
-      'Option 4',
-      'Option 1',
-      'Option 2',
-      'Option 3',
-      'Option 4',
-      'Option 1',
-      'Option 2',
-      'Option 3',
-      'Option 4',
-      'Option 1',
-      'Option 2',
-      'Option 3',
-      'Option 4',
-      'Option 1',
-      'Option 2',
-      'Option 3',
-      'Option 4',
-    ],
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Select>;
-
-export const Default: Story = {};

package/src/components/Select/index.tsx

@@ -1,97 +0,0 @@
-import { useState } from 'react';
-
-import { Icon } from '@components/Icon';
-import { faChevronDown } from '@fortawesome/fontawesome-free-solid';
-import classNames from 'classnames';
-
-export interface SelectProps {
-  id?: string;
-  className?: string;
-  options: string[];
-  label: string;
-  value?: string;
-  onClick?: any;
-  fullWidth?: boolean;
-  required?: boolean;
-}
-
-export const Select = ({
-  id,
-  className,
-  options,
-  value,
-  label,
-  onClick,
-  required = false,
-  fullWidth = false,
-}: SelectProps) => {
-  const [showDropDown, setShowDropDown] = useState(false);
-  const [activeValue, setActiveValue] = useState(
-    value !== undefined ? value : options?.[0],
-  );
-
-  const handleOptionClick = (e: any): void => {
-    onClick(e.target.textContent);
-    setActiveValue(e.target.textContent);
-    setShowDropDown(false);
-  };
-
-  const fullWidthClasses = classNames({
-    'w-full': fullWidth,
-    'sm:w-72': !fullWidth,
-  });
-
-  const headerClassList = classNames(
-    fullWidthClasses,
-    className,
-    'w-full rounded-xl bg-white shadow drop-shadow flex cursor-pointer flex-row justify-between px-4',
-  );
-
-  const dropdownClassList = classNames(
-    fullWidthClasses,
-    'absolute w-full bg-white mt-2 rounded-2xl py-4 shadow-xl border border-lightest-grey h-64 overflow-scroll',
-  );
-  const dropdownItemClassList =
-    'bg-white text-ink hover:bg-lightest-grey hover:cursor-pointer px-4 py-2';
-
-  return (
-    <>
-      <div
-        id={id}
-        className={headerClassList}
-        onClick={() => {
-          setShowDropDown(!showDropDown);
-        }}
-      >
-        <div className="flex flex-col">
-          <div className="absolute mt-2 flex bg-white text-xs font-thin">
-            <p>{label}</p>
-            {required && <p className="font-semiBold text-error">&nbsp;*</p>}
-          </div>
-          <p className="border-ink text-ink flex justify-between rounded-xl bg-white pb-1 pt-6">
-            {activeValue}
-          </p>
-        </div>
-        <Icon colour="ink" icon={faChevronDown} />
-      </div>
-      {showDropDown && (
-        <div className={classNames('relative z-20', fullWidthClasses)}>
-          <ul className={dropdownClassList}>
-            {options?.map((option: string, i) => (
-              <li
-                key={`key_${i}`}
-                className={dropdownItemClassList}
-                value={option}
-                onClick={(e) => {
-                  handleOptionClick(e);
-                }}
-              >
-                {option}
-              </li>
-            ))}
-          </ul>
-        </div>
-      )}
-    </>
-  );
-};

package/src/components/Showcase/Showcase.stories.tsx

@@ -1,31 +0,0 @@
-import { faChevronDown } from '@fortawesome/fontawesome-free-solid';
-import { action } from '@storybook/addon-actions';
-import { Meta, StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { Showcase } from '.';
-
-const meta = {
-  title: 'Components/Showcase',
-  component: Showcase,
-  argTypes: {
-    ...idAndClassName,
-  },
-  args: {
-    title: 'This is a title',
-    subTitle: 'This is a subtitle',
-    description: 'This is a description',
-    bgColour: 'white',
-    size: 'large',
-    iconProps: {
-      icon: faChevronDown,
-      onClick: action('Icon click'),
-    },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Showcase>;
-
-export const Default: Story = {};

package/src/components/Showcase/index.tsx

@@ -1,62 +0,0 @@
-import { Avatar } from '@components/Avatar';
-import { Icon, IconProps } from '@components/Icon';
-import { Colours } from '@utils/controls';
-import classNames from 'classnames';
-
-export interface Props {
-  id: string;
-  className?: string;
-  title: string;
-  subTitle: string;
-  description: string;
-  bgColour?: Colours;
-  image: string;
-  size?: 'small' | 'medium' | 'large';
-  iconProps?: IconProps;
-}
-
-export const Showcase = ({
-  id,
-  className,
-  title,
-  subTitle,
-  description,
-  bgColour,
-  size = 'large',
-  iconProps,
-}: Props) => {
-  const classList = className;
-
-  const containerSize = classNames(
-    {
-      'h-56': size === 'small',
-      'h-96': size === 'medium',
-      'min-h-[calc(100vh-176px)]': size === 'large',
-    },
-    'flex flex-wrap text-center md:flex-nowrap md:text-left',
-  );
-
-  return (
-    <div>
-      <div className={containerSize}>
-        <div className="m-auto w-full md:w-2/3 md:pl-16 md:pr-4 lg:pl-32 lg:pr-8 xl:pl-64">
-          <h2 className="md:text-xxl text-lg font-bold leading-tight text-primary">
-            {title}
-          </h2>
-          <h2 className="md:text-xxl text-lg font-bold leading-tight text-black">
-            {subTitle}
-          </h2>
-          <p className="md:text-md pt-4 text-sm text-black">{description}</p>
-        </div>
-        <div className="m-auto flex w-full justify-center md:w-1/3 md:pb-20">
-          <Avatar />
-        </div>
-      </div>
-      {iconProps?.icon && (
-        <div className="flex justify-center">
-          <Icon {...iconProps} size="2x" icon={iconProps.icon} />
-        </div>
-      )}
-    </div>
-  );
-};

package/src/components/SideNav/SideNav.stories.tsx

@@ -1,50 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { SideNav } from '.';
-
-const meta = {
-  title: 'Components/SideNav',
-  component: SideNav,
-  parameters: {
-    backgrounds: {
-      default: 'grey',
-      values: [
-        {
-          name: 'grey',
-          value: '#f3f3f3',
-        },
-      ],
-    },
-  },
-  argTypes: {
-    ...idAndClassName,
-
-    navLinks: {
-      description: 'An array of nav links to display in the component',
-      table: {
-        type: { summary: 'array' },
-      },
-    },
-    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: {
-    children: <p>dfghj</p>,
-    showNav: true,
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof SideNav>;
-
-export const Default: Story = {};

package/src/components/SideNav/index.tsx

@@ -1,39 +0,0 @@
-import { type Colours } from '@utils/controls';
-import classNames from 'classnames';
-
-export interface Props {
-  id: string;
-  className: string;
-  children: any;
-  getNavStatus: (asSideBar: boolean, open: boolean) => void;
-  bgColour?: Colours;
-  showNav?: boolean;
-  leftExpand?: boolean;
-}
-
-export const SideNav = ({
-  id,
-  className,
-  children,
-  bgColour = 'primary',
-  showNav = false,
-  leftExpand = true,
-}: Props) => {
-  const sideNavClasses = classNames(
-    {
-      'w-0': !showNav,
-      'w-full sm:w-1/3': showNav,
-      'left-0': leftExpand,
-      'right-0': !leftExpand,
-    },
-
-    className,
-    'absolute z-50 h-full overflow-hidden duration-700',
-  );
-
-  return (
-    <div id={id} className={sideNavClasses}>
-      {children}
-    </div>
-  );
-};