trepur_components 2.3.7 → 2.3.9

package/src/components/Checkbox/index.tsx

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

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

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

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

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

@@ -0,0 +1,37 @@
+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/{archive → src/components}/DetailUpdater/index.tsx

@@ -1,12 +1,10 @@
 import React, { useState } from 'react';
 
-import Button from '@components/Button';
-import classNames from 'classnames';
+import { Card } from '../';
+import { Button } from '@components/Button';
 import 'keen-slider/keen-slider.min.css';
 
-
-
-export interface Props {
+export interface DetailUpdatesProps {
   id?: string;
   className?: string;
   title: string;
@@ -16,14 +14,13 @@ export interface Props {
   ctaText: string;
   onClick?: (fieldValues: any) => void;
   onChange?: (fieldValues: any) => void;
-
   children: React.ReactNode;
   onSubmit?: () => void;
   onCancel?: () => void;
   value?: string;
 }
 
-const DetailUpdater: React.FC<Props> = ({
+export const DetailUpdater = ({
   id,
   className,
   title,
@@ -37,9 +34,8 @@ const DetailUpdater: React.FC<Props> = ({
   onSubmit,
   onCancel,
   value,
-}) => {
+}: DetailUpdatesProps) => {
   const [expanded, setExpanded] = useState(false);
-  const classList = classNames(className, style.classList, 'theme-local');
 
   const handleSubmit = (): void => {
     onSubmit?.();
@@ -66,13 +62,13 @@ const DetailUpdater: React.FC<Props> = ({
   // }
 
   return (
-    <div id={id} className={classList}>
+    <Card id={id} className={className}>
       {!expanded && (
-        <div className={style.class}>
-          <div className={style.wrapper}>
-            <p className={style.title}>{title}</p>
+        <div className="mx-4 py-6">
+          <div className="flex justify-between">
+            <p className="font-semiBold text-ink">{title}</p>
             <p
-              className={style.expandText}
+              className="font-semiBold text-ink cursor-pointer underline"
               onClick={() => {
                 setExpanded(true);
               }}
@@ -80,15 +76,15 @@ const DetailUpdater: React.FC<Props> = ({
               {expandText}
             </p>
           </div>
-          <p className={style.value}>{value !== undefined ? value : '-'}</p>
+          <p className="text-ink">{value !== undefined ? value : '-'}</p>
         </div>
       )}
       {expanded && (
-        <div className={style.class}>
-          <div className={style.wrapper}>
-            <p className={style.title}>{title}</p>
+        <div className="mx-4 py-6">
+          <div className="flex justify-between">
+            <p className="font-semiBold text-ink">{title}</p>
             <p
-              className={style.expandText}
+              className="font-semiBold text-ink cursor-pointer underline"
               onClick={() => {
                 onCancel?.();
                 setExpanded(false);
@@ -97,16 +93,15 @@ const DetailUpdater: React.FC<Props> = ({
               {collapseText}
             </p>
           </div>
-          <p className={style.description}>{description}</p>
-          <div className={style.inputWrapper}>{children}</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>
       )}
-      <hr className={style.hr} />
-    </div>
+    </Card>
   );
 };
-
-export default DetailUpdater;

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

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

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

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