trepur_components 2.3.9 → 2.3.11

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -1,27 +0,0 @@
-import { Checkbox } from './';
-import { action } from '@storybook/addon-actions';
-import { StoryObj, Meta } from '@storybook/react';
-
-const meta = {
-  title: 'V2Components/Checkbox',
-  component: Checkbox,
-  args: {
-    onClick: action('clicked'),
-    children: [<Checkbox.Label>Label</Checkbox.Label>],
-  },
-} satisfies Meta<typeof Checkbox>;
-
-export default meta;
-type Story = StoryObj<typeof Checkbox>;
-
-export const Checked: Story = {
-  args: {
-    checked: true,
-  },
-};
-
-export const Unchecked: Story = {
-  args: {
-    checked: false,
-  },
-};

package/src/components/Checkbox/index.tsx

@@ -1,44 +0,0 @@
-import { forwardRef, HTMLAttributes, useState } from 'react';
-
-export interface CheckboxProps {
-  label?: string;
-  onClick?: (isChecked: boolean) => void;
-  checked?: boolean;
-}
-
-const CheckboxComponent = forwardRef<
-  HTMLLabelElement,
-  HTMLAttributes<HTMLLabelElement> & CheckboxProps
->(({ children, checked, onClick }, ref) => {
-  const [isChecked, setIsChecked] = useState(checked);
-  return (
-    <label ref={ref} className="flex items-center gap-4 hover:cursor-pointer">
-      <input
-        className="h-6 w-6 rounded border-2"
-        onChange={() => {
-          setIsChecked(!isChecked);
-        }}
-        onClick={() => onClick?.(!isChecked)}
-        type="checkbox"
-        checked={isChecked}
-      />
-      {children}
-    </label>
-  );
-});
-
-const CheckboxLabel = forwardRef<
-  HTMLSpanElement,
-  HTMLAttributes<HTMLSpanElement> & CheckboxProps
->(({ children }, ref) => {
-  return <span ref={ref}>{children}</span>;
-});
-
-CheckboxComponent.displayName = 'Checkbox';
-CheckboxLabel.displayName = 'Checkbox.Label';
-
-const Checkbox = Object.assign(CheckboxComponent, {
-  Label: CheckboxLabel,
-});
-
-export { Checkbox };

package/src/components/Collapsible/Collapsible.stories.tsx

@@ -1,67 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { Collapsible } from '.';
-
-const meta = {
-  title: 'V2Components/Collapsible',
-  component: Collapsible,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-  },
-  args: {
-    children: [
-      <Collapsible.Header>
-        <Collapsible.Image src="https://picsum.photos/500/300" />
-        <Collapsible.HeaderContent>
-          <Collapsible.Label>This is a label</Collapsible.Label>
-          <Collapsible.Title>This is a title</Collapsible.Title>
-          <Collapsible.Subtitle>This is a subtitle</Collapsible.Subtitle>
-        </Collapsible.HeaderContent>
-      </Collapsible.Header>,
-      <Collapsible.Content>
-        <Collapsible.Text>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi,
-          nesciunt. Accusamus earum dolorum est, error dolor ipsam, consequatur
-          id corrupti atque nesciunt velit nam quibusdam voluptatem animi iusto,
-          numquam eaque! Lorem ipsum dolor sit amet consectetur adipisicing
-          elit. Nisi, nesciunt. Accusamus earum dolorum est, error dolor ipsam,
-          consequatur id corrupti atque nesciunt velit nam quibusdam voluptatem
-          animi iusto, numquam eaque! Lorem ipsum dolor sit amet consectetur
-          adipisicing elit. Nisi, nesciunt. Accusamus earum dolorum est, error
-          dolor ipsam, consequatur id corrupti atque nesciunt velit nam
-          quibusdam voluptatem animi iusto, numquam eaque! Lorem ipsum dolor sit
-          amet consectetur adipisicing elit. Nisi, nesciunt. Accusamus earum
-          dolorum est, error dolor ipsam, consequatur id corrupti atque nesciunt
-          velit nam quibusdam voluptatem animi iusto, numquam eaque! Lorem ipsum
-          dolor sit amet consectetur adipisicing elit. Nisi, nesciunt. Accusamus
-          earum dolorum est, error dolor ipsam, consequatur id corrupti atque
-          nesciunt velit nam quibusdam voluptatem animi iusto, numquam eaque!
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi,
-          nesciunt. Accusamus earum dolorum est, error dolor ipsam, consequatur
-          id corrupti atque nesciunt velit nam quibusdam voluptatem animi iusto,
-          numquam eaque! Lorem ipsum dolor sit amet consectetur adipisicing
-          elit. Nisi, nesciunt. Accusamus earum dolorum est, error dolor ipsam,
-          consequatur id corrupti atque nesciunt velit nam quibusdam voluptatem
-          animi iusto, numquam eaque! Lorem ipsum dolor sit amet consectetur
-          adipisicing elit. Nisi, nesciunt. Accusamus earum dolorum est, error
-          dolor ipsam, consequatur id corrupti atque nesciunt velit nam
-          quibusdam voluptatem animi iusto, numquam eaque! Lorem ipsum dolor sit
-          amet consectetur adipisicing elit. Nisi, nesciunt. Accusamus earum
-          dolorum est, error dolor ipsam, consequatur id corrupti atque nesciunt
-          velit nam quibusdam voluptatem animi iusto, numquam eaque! Lorem ipsum
-          dolor sit amet consectetur adipisicing elit. Nisi, nesciunt. Accusamus
-          earum dolorum est, error dolor ipsam, consequatur id corrupti atque
-          nesciunt velit nam quibusdam voluptatem animi iusto, numquam eaque!
-        </Collapsible.Text>
-      </Collapsible.Content>,
-    ],
-  },
-} satisfies Meta<typeof Collapsible>;
-
-export default meta;
-
-type Story = StoryObj<typeof Collapsible>;
-
-export const Default: Story = {};

package/src/components/Collapsible/index.tsx

@@ -1,169 +0,0 @@
-import {
-  forwardRef,
-  HTMLAttributes,
-  useContext,
-  createContext,
-  useState,
-  useMemo,
-} from 'react';
-
-import { Icon } from '@components/Icon';
-import { Image, ImageProps } from '@components/Image';
-import {
-  faChevronDown,
-  faChevronUp,
-} from '@fortawesome/fontawesome-free-solid';
-import clsx from 'clsx';
-
-export interface CollapsibleContextProps {
-  loading?: boolean;
-  expanded?: boolean;
-  setExpanded?: (expanded: boolean) => void;
-}
-
-const CollapsibleContext = createContext<CollapsibleContextProps | null>(null);
-
-const CollapsibleComponent = forwardRef<
-  HTMLDivElement,
-  HTMLAttributes<HTMLDivElement> & CollapsibleContextProps
->(({ id, className, children, loading, ...props }, ref) => {
-  const [expanded, setExpanded] = useState(false);
-
-  const state = useMemo(
-    () => ({
-      loading,
-      expanded,
-      setExpanded,
-    }),
-    [loading, expanded, setExpanded],
-  );
-
-  return (
-    <CollapsibleContext.Provider value={state}>
-      <div
-        id={id}
-        className="w-full rounded-2xl bg-white hover:cursor-pointer"
-        ref={ref}
-        {...props}
-      >
-        {children}
-      </div>
-    </CollapsibleContext.Provider>
-  );
-});
-
-const CollapsibleHeader = forwardRef<
-  HTMLDivElement,
-  HTMLAttributes<HTMLDivElement>
->(({ children, ...props }, ref) => {
-  const { expanded, setExpanded } = useContext(CollapsibleContext) || {};
-  return (
-    <div
-      className="flex h-24 pr-4 sm:pr-8"
-      onClick={() => setExpanded?.(!expanded)}
-      ref={ref}
-      {...props}
-    >
-      {children}
-      <div className="my-auto flex-none">
-        <Icon icon={expanded ? faChevronDown : faChevronUp} />
-      </div>
-    </div>
-  );
-});
-
-const CollapsibleHeaderContent = forwardRef<
-  HTMLDivElement,
-  HTMLAttributes<HTMLDivElement>
->(({ children, ...props }, ref) => (
-  <div className="mx-4 my-auto grid w-full" ref={ref} {...props}>
-    {children}
-  </div>
-));
-
-const CollapsibleImage = forwardRef<
-  HTMLDivElement,
-  HTMLAttributes<HTMLDivElement> & ImageProps
->(({ children, src, ...props }, ref) => (
-  <div className="aspect-square flex-none p-4">
-    <Image src={src} className="h-full rounded-2xl" {...props} />
-  </div>
-));
-
-const CollapsibleLabel = forwardRef<
-  HTMLParagraphElement,
-  HTMLAttributes<HTMLParagraphElement>
->(({ ...props }, ref) => (
-  <p
-    className="text-xxs text-light-grey truncate md:text-xs"
-    ref={ref}
-    {...props}
-  />
-));
-
-const CollapsibleTitle = forwardRef<
-  HTMLParagraphElement,
-  HTMLAttributes<HTMLParagraphElement>
->(({ ...props }, ref) => (
-  <p className="md:text-md truncate text-sm" ref={ref} {...props} />
-));
-
-const CollapsibleSubtitle = forwardRef<
-  HTMLParagraphElement,
-  HTMLAttributes<HTMLParagraphElement>
->(({ ...props }, ref) => (
-  <p className="truncate text-xs md:text-sm" ref={ref} {...props} />
-));
-
-const CollapsibleContent = forwardRef<
-  HTMLDivElement,
-  HTMLAttributes<HTMLDivElement>
->(({ children, ...props }, ref) => {
-  const { expanded } = useContext(CollapsibleContext) || {};
-  return (
-    <div
-      className={clsx(
-        'w-auto overflow-scroll px-4 transition-max-height duration-300',
-        {
-          'max-h-32': expanded,
-          'max-h-0': !expanded,
-        },
-      )}
-      ref={ref}
-      {...props}
-    >
-      <div className="pb-4">{children}</div>
-    </div>
-  );
-});
-
-const CollapsibleText = forwardRef<
-  HTMLParagraphElement,
-  HTMLAttributes<HTMLParagraphElement>
->(({ ...props }, ref) => (
-  <p className="text-xs md:text-sm" ref={ref} {...props} />
-));
-
-CollapsibleComponent.displayName = 'Collapsible';
-
-CollapsibleHeader.displayName = 'Collapsible.Header';
-CollapsibleContent.displayName = 'Collapsible.Content';
-CollapsibleImage.displayName = 'Collapsible.Image';
-CollapsibleLabel.displayName = 'Collapsible.Label';
-CollapsibleTitle.displayName = 'Collapsible.Title';
-CollapsibleSubtitle.displayName = 'Collapsible.Subtitle';
-CollapsibleHeaderContent.displayName = 'Collapsible.HeaderContent';
-CollapsibleText.displayName = 'Collapsible.Text';
-
-const Collapsible = Object.assign(CollapsibleComponent, {
-  Header: CollapsibleHeader,
-  HeaderContent: CollapsibleHeaderContent,
-  Image: CollapsibleImage,
-  Label: CollapsibleLabel,
-  Title: CollapsibleTitle,
-  Subtitle: CollapsibleSubtitle,
-  Content: CollapsibleContent,
-  Text: CollapsibleText,
-});
-
-export { Collapsible };

package/src/components/Counter/Counter.stories.tsx

@@ -1,20 +0,0 @@
-import { Counter } from './';
-import { Meta, StoryObj } from '@storybook/react';
-
-const meta = {
-  title: 'V2Components/Counter',
-  component: Counter,
-  args: {
-    children: [
-      <Counter.DecrementIcon />,
-      <Counter.Count />,
-      <Counter.IncrementIcon />,
-    ],
-  },
-} satisfies Meta<typeof Counter>;
-
-export default meta;
-
-type Story = StoryObj<typeof Counter>;
-
-export const Default: Story = {};

package/src/components/Counter/index.tsx

@@ -1,98 +0,0 @@
-import {
-  createContext,
-  forwardRef,
-  HTMLAttributes,
-  useContext,
-  useMemo,
-  useState,
-} from 'react';
-
-import { Icon } from '@components/Icon';
-import {
-  faChevronCircleLeft,
-  faChevronCircleRight,
-} from '@fortawesome/fontawesome-free-solid';
-
-export interface CounterContextProps {
-  currentCount?: number;
-  setCurrentCount?: (val: number) => void;
-  count?: number;
-  onClick?: (count: number) => void;
-}
-
-const CounterContext = createContext<CounterContextProps | null>(null);
-
-const CounterComponent = forwardRef<
-  HTMLDivElement,
-  HTMLAttributes<HTMLDivElement> & CounterContextProps
->(({ children, count = 0 }, ref) => {
-  const [currentCount, setCurrentCount] = useState(count);
-
-  const state = useMemo(
-    () => ({
-      currentCount,
-      setCurrentCount,
-    }),
-    [currentCount, setCurrentCount],
-  );
-
-  return (
-    <CounterContext.Provider value={state}>
-      <div ref={ref} className="flex gap-6 rounded-lg ">
-        {children}
-      </div>
-    </CounterContext.Provider>
-  );
-});
-
-const CounterDecrementIcon = forwardRef<
-  HTMLDivElement,
-  HTMLAttributes<HTMLDivElement>
->(() => {
-  const { setCurrentCount, currentCount = 0 } =
-    useContext(CounterContext) || {};
-  return (
-    <div className="my-auto cursor-pointer">
-      <Icon
-        icon={faChevronCircleLeft}
-        onClick={() => setCurrentCount?.(currentCount - 1)}
-      />
-    </div>
-  );
-});
-
-const CounterIncrementIcon = forwardRef<
-  HTMLDivElement,
-  HTMLAttributes<HTMLDivElement>
->(() => {
-  const { setCurrentCount, currentCount = 0 } =
-    useContext(CounterContext) || {};
-  return (
-    <div className="my-auto cursor-pointer">
-      <Icon
-        icon={faChevronCircleRight}
-        onClick={() => setCurrentCount?.(currentCount + 1)}
-      />
-    </div>
-  );
-});
-
-const CounterCount = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
-  () => {
-    const { currentCount } = useContext(CounterContext) || {};
-    return <div className="overflow-hidden text-center">{currentCount}</div>;
-  },
-);
-
-CounterComponent.displayName = 'Counter';
-CounterDecrementIcon.displayName = 'Counter.DecrementIcon';
-CounterIncrementIcon.displayName = 'Counter.IncrementIcon';
-CounterCount.displayName = 'Counter.Count';
-
-const Counter = Object.assign(CounterComponent, {
-  DecrementIcon: CounterDecrementIcon,
-  IncrementIcon: CounterIncrementIcon,
-  Count: CounterCount,
-});
-
-export { Counter };

package/src/components/DetailUpdater/DetailUpdater.stories.tsx

@@ -1,37 +0,0 @@
-import { DetailUpdater } from './';
-import { Input } from '@components/Input';
-import { action } from '@storybook/addon-actions';
-import { Meta, StoryObj } from '@storybook/react';
-
-const meta = {
-  title: 'Components/Detail Updater',
-  component: DetailUpdater,
-  args: {
-    title: 'Legal Name',
-    description: 'This is a description to let you know what to do',
-    expandText: 'Edit',
-    collapseText: 'Cancel',
-    ctaText: 'Save',
-    onClick: (fieldValues: any) => {
-      action('Submitted')(fieldValues);
-    },
-    onChange: (value: any) => {
-      action('Updated')(value);
-    },
-    children: (
-      <Input placeholder="Insert title here">
-        <Input.Item>
-          <Input.Label required>Title</Input.Label>
-          <Input.Box />
-          <Input.Validation />
-        </Input.Item>
-      </Input>
-    ),
-  },
-} satisfies Meta<typeof DetailUpdater>;
-
-export default meta;
-
-type Story = StoryObj<typeof DetailUpdater>;
-
-export const Default: Story = {};

package/src/components/DetailUpdater/index.tsx

@@ -1,107 +0,0 @@
-import React, { useState } from 'react';
-
-import { Card } from '../';
-import { Button } from '@components/Button';
-import 'keen-slider/keen-slider.min.css';
-
-export interface DetailUpdatesProps {
-  id?: string;
-  className?: string;
-  title: string;
-  description?: string;
-  expandText: string;
-  collapseText: string;
-  ctaText: string;
-  onClick?: (fieldValues: any) => void;
-  onChange?: (fieldValues: any) => void;
-  children: React.ReactNode;
-  onSubmit?: () => void;
-  onCancel?: () => void;
-  value?: string;
-}
-
-export const DetailUpdater = ({
-  id,
-  className,
-  title,
-  description,
-  expandText,
-  collapseText,
-  ctaText,
-  onClick,
-  onChange,
-  children,
-  onSubmit,
-  onCancel,
-  value,
-}: DetailUpdatesProps) => {
-  const [expanded, setExpanded] = useState(false);
-
-  const handleSubmit = (): void => {
-    onSubmit?.();
-    setExpanded(false);
-  };
-  // const handleChange = (e: any): void => {
-  //   const value = e.target.value
-  //   const id = e.target.id
-
-  //   const newFieldValues = fieldValues.map((fieldValue) => {
-  //     return fieldValue.id !== id.split('-')[1]
-  //       ? fieldValue
-  //       : { ...fieldValue, value }
-  //   })
-
-  //   onChange?.(newFieldValues)
-
-  //   setFieldValues(newFieldValues)
-  // }
-
-  // const handleSubmit = (): void => {
-  //   onClick?.(fieldValues)
-  //   setState(false)
-  // }
-
-  return (
-    <Card id={id} className={className}>
-      {!expanded && (
-        <div className="mx-4 py-6">
-          <div className="flex justify-between">
-            <p className="font-semiBold text-ink">{title}</p>
-            <p
-              className="font-semiBold text-ink cursor-pointer underline"
-              onClick={() => {
-                setExpanded(true);
-              }}
-            >
-              {expandText}
-            </p>
-          </div>
-          <p className="text-ink">{value !== undefined ? value : '-'}</p>
-        </div>
-      )}
-      {expanded && (
-        <div className="mx-4 py-6">
-          <div className="flex justify-between">
-            <p className="font-semiBold text-ink">{title}</p>
-            <p
-              className="font-semiBold text-ink cursor-pointer underline"
-              onClick={() => {
-                onCancel?.();
-                setExpanded(false);
-              }}
-            >
-              {collapseText}
-            </p>
-          </div>
-          <p className="text-light-grey">{description}</p>
-          <div className="grid w-full grid-cols-1 gap-0 py-4 md:grid-cols-2 md:gap-4 lg:w-2/3">
-            {children}
-          </div>
-          <Button variant="secondary" onClick={handleSubmit}>
-            {ctaText}
-          </Button>
-        </div>
-      )}
-    </Card>
-  );
-};

package/src/components/Dialog/Dialog.stories.tsx

@@ -1,65 +0,0 @@
-import React, { useState } from 'react';
-
-import { action } from '@storybook/addon-actions';
-import { Meta } from '@storybook/react';
-
-import { Dialog } from '.';
-import { Button } from '../Button';
-import { Modal } from '../Modal';
-
-const meta = {
-  title: 'Components/Dialog',
-  component: Dialog,
-  args: {
-    title: 'This is a title',
-    paragraph:
-      'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sapiente itaque repellendus, ab rerum explicabo ducimus culpa incidunt consequatur, corporis, sequi dolor in praesentium ea maxime perferendis autem aliquam impedit. Debitis.',
-    dismissText: 'Close',
-    imageUrl: 'https://picsum.photos/500/300',
-    onDismissClick: action('dismissed'),
-    // primaryCta: {
-    //   children: 'Add bank details',
-    //   palette: 'secondary',
-    // },
-    // secondaryCta: {
-    //   children: 'Add bank details',
-    //   variant: 'secondary',
-    //   palette: 'secondary',
-    // },
-  },
-} satisfies Meta<typeof Dialog>;
-
-const Template = (args: any): React.ReactElement => {
-  const [visible, setVisible] = useState<boolean>(false);
-
-  return (
-    <div style={{ height: '350vh' }}>
-      <Button
-        onClick={() => {
-          setVisible(true);
-        }}
-      >
-        Click Me!
-      </Button>
-      <Modal
-        visible={visible}
-        mobileGutter
-        onOverlayClick={() => {
-          setVisible(false);
-        }}
-      >
-        <Dialog
-          {...args}
-          onDismissClick={() => {
-            action('dismiss click');
-            setVisible(!visible);
-          }}
-        />
-      </Modal>
-    </div>
-  );
-};
-
-export const _Dialog = Template.bind({});
-
-export default meta;

package/src/components/Dialog/index.tsx

@@ -1,29 +0,0 @@
-import { Button, ButtonProps } from '@components/Button';
-import { Image } from '@components/Image';
-import classNames from 'classnames';
-
-import { Card } from '..';
-
-export interface Props extends Partial<Pick<HTMLElement, 'className' | 'id'>> {
-  title: string;
-  paragraph: string;
-  dismissText: string;
-  onDismissClick?: () => void;
-  primaryCta?: ButtonProps;
-  secondaryCta?: ButtonProps;
-  imageUrl?: string;
-}
-
-export const Dialog = ({
-  id,
-  className,
-  title,
-  paragraph,
-  dismissText,
-  onDismissClick,
-  primaryCta,
-  secondaryCta,
-  imageUrl,
-}: Props) => {
-  return <Card className="max-w-[600px]"></Card>;
-};

package/src/components/Dropdown/Dropdown.stories.tsx

@@ -1,22 +0,0 @@
-import { Dropdown } from './';
-import { Meta, StoryObj } from '@storybook/react';
-
-const meta = {
-  title: 'V2Components/Dropdown',
-  component: Dropdown,
-  args: {
-    children: [
-      <Dropdown.Label>Label</Dropdown.Label>,
-      <Dropdown.List>
-        <Dropdown.Item>Item 1</Dropdown.Item>
-        <Dropdown.Item>Item 2</Dropdown.Item>
-      </Dropdown.List>,
-    ],
-  },
-} satisfies Meta<typeof Dropdown>;
-
-export default meta;
-
-type Story = StoryObj<typeof Dropdown>;
-
-export const Default: Story = {};