trepur_components 2.3.8 → 2.3.9

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

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 
 import { action } from '@storybook/addon-actions';
+import { Meta } from '@storybook/react';
 
 import { Dialog } from '.';
 import { Button } from '../Button';
@@ -9,72 +10,6 @@ import { Modal } from '../Modal';
 const meta = {
   title: 'Components/Dialog',
   component: Dialog,
-  parameters: {
-    docs: {
-      description: {
-        component: 'A dialog component',
-      }
-    },
-    layout: 'padded',
-  },
-  argTypes: {
-    id: {
-      type: { name: 'string', required: false },
-      description: 'HTML id attribute',
-      table: { type: { summary: 'string' } },
-    },
-    className: {
-      type: { name: 'string', required: false },
-      description: 'Additional classes to be appended to the component',
-      table: { type: { summary: 'string' } },
-    },
-    onDismissClick: {
-      type: { name: 'function', required: false },
-      description:
-        'Used to determine the onClick action when the dismiss cta is pressed',
-      action: 'onClick',
-      table: {
-        type: { summary: 'function' },
-        defaultValue: { summary: 'undefined' },
-      }
-    },
-    title: {
-      type: { name: 'string', required: false },
-      description: 'Used to specify the title to display on the component',
-      table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: 'undefined' },
-      }
-    },
-    paragraph: {
-      type: { name: 'string', required: false },
-      description:
-        'Used to the specify paragraph text to display on the component',
-      table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: 'undefined' },
-      }
-    },
-    dismissText: {
-      type: { name: 'string', required: false },
-      description: 'Used to specify dismiss text to display on the component',
-      table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: 'undefined' },
-      }
-    },
-    primaryCta: {
-      type: { name: 'other', value: 'ButtonProps', required: false },
-      description: 'A collection of props to pass to the button component',
-      table: { type: { summary: 'ButtonProps' } },
-    },
-    secondaryCta: {
-      type: { name: 'other', value: 'ButtonProps', required: false },
-      description:
-        'A collection of props to pass to the second button component',
-      table: { type: { summary: 'ButtonProps' } },
-    }
-  },
   args: {
     title: 'This is a title',
     paragraph:
@@ -82,17 +17,17 @@ const meta = {
     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',
-    }
-  }
-};
+    // 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);
@@ -123,7 +58,7 @@ const Template = (args: any): React.ReactElement => {
       </Modal>
     </div>
   );
-}
+};
 
 export const _Dialog = Template.bind({});
 

package/src/components/Dialog/index.tsx

@@ -1,7 +1,9 @@
-import { Button, type Props as ButtonProps } from '@components/Button';
+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;
@@ -23,71 +25,5 @@ export const Dialog = ({
   secondaryCta,
   imageUrl,
 }: Props) => {
-  const hasCta = Boolean(primaryCta?.children);
-  const hasCta2 = Boolean(secondaryCta?.children);
-
-  const ctaButton = hasCta && (
-    <Button
-      {...primaryCta}
-      className={classNames(
-        {
-          'w-full': hasCta2,
-        },
-        primaryCta?.className,
-        'mt-2 w-full md:ml-6 md:mt-0',
-      )}
-    />
-  );
-
-  const ctaButton2 = hasCta2 && (
-    <Button
-      {...secondaryCta}
-      className={classNames(
-        {
-          'w-full': hasCta,
-        },
-        secondaryCta?.className,
-        'mt-2 w-full md:ml-6 md:mt-0',
-      )}
-    />
-  );
-
-  const buttonWrapperClassList = classNames(
-    {
-      'w-full': ctaButton2,
-    },
-    'flex flex-wrap pt-6 md:flex-nowrap',
-  )
-
-  const titleClassList = classNames({}, 'text-md font-regular');
-
-  return (
-    <div
-      id={id}
-      className={classNames(
-        className,
-        'mx-auto w-full rounded-xl bg-white p-6 text-ink md:w-[608px]',
-      )}
-    >
-      <div className="relative pb-2">
-        {imageUrl !== undefined && (
-          <Image src={imageUrl} height={3} width={3} />
-        )}
-        <p
-          className="absolute right-0 top-0 cursor-pointer text-sm font-regular"
-          onClick={onDismissClick}
-        >
-          {dismissText}
-        </p>
-      </div>
-      <p className={titleClassList}>{title}</p>
-      <p className="pt-1 font-light">{paragraph}</p>
-      {(hasCta || hasCta2) && (
-        <div className={buttonWrapperClassList}>
-          {ctaButton}
-          {ctaButton2}
-        </div>
-      )}
-    </div>
-  );
-}
+  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 = {};

package/src/components/Dropdown/index.tsx

@@ -0,0 +1,117 @@
+import {
+  useState,
+  forwardRef,
+  HTMLAttributes,
+  useContext,
+  createContext,
+  useMemo,
+  useRef,
+} from 'react';
+
+import { Button } from '../';
+import { ButtonProps } from '@components/Button';
+import { faChevronDown } from '@fortawesome/fontawesome-free-solid';
+
+import { useClickOutside } from './utils';
+
+export interface DropdownContextProps {
+  showDropdown?: boolean;
+  setShowDropdown?: (val: boolean) => void;
+}
+
+const DropdownContext = createContext<DropdownContextProps | null>(null);
+
+const DropdownComponent = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(({ children }) => {
+  const [showDropdown, setShowDropdown] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  const state = useMemo(
+    () => ({
+      showDropdown,
+      setShowDropdown,
+    }),
+    [showDropdown, setShowDropdown],
+  );
+
+  useClickOutside(ref, () => {
+    setShowDropdown(false);
+  });
+
+  return (
+    <DropdownContext.Provider value={state}>
+      <div ref={ref} className="relative inline-block text-left">
+        {children}
+      </div>
+    </DropdownContext.Provider>
+  );
+});
+
+const DropdownLabel = forwardRef<
+  HTMLButtonElement,
+  HTMLAttributes<HTMLButtonElement> & ButtonProps
+>(({ children }) => {
+  const { showDropdown, setShowDropdown } = useContext(DropdownContext) || {};
+  return (
+    <Button onClick={() => setShowDropdown?.(!showDropdown)}>
+      {children}
+      <Button.Icon icon={faChevronDown} />
+    </Button>
+  );
+});
+
+const DropdownList = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ children }) => {
+    const { showDropdown } = useContext(DropdownContext) || {};
+    if (!showDropdown) return <div></div>;
+    return (
+      <div
+        className="z-50 mt-2 w-48 rounded-lg border-2 bg-primary text-white"
+        role="menu"
+        aria-orientation="vertical"
+        aria-labelledby="menu-button"
+      >
+        <ul className="py-1 text-sm">{children}</ul>
+      </div>
+    );
+  },
+);
+
+const DropdownItem = forwardRef<HTMLLIElement, HTMLAttributes<HTMLLIElement>>(
+  ({ children, onClick }) => {
+    const { showDropdown, setShowDropdown } = useContext(DropdownContext) || {};
+    return (
+      <li
+        className="px-4 py-2"
+        onClick={(e) => {
+          const target = e?.target as HTMLElement;
+          // onClick?.(target?.parentNode?.textContent ?? '');
+          setShowDropdown?.(false);
+        }}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            const target = e?.target as HTMLElement;
+            // onClick?.(target?.parentNode?.textContent ?? '');
+          }
+        }}
+      >
+        {children}
+      </li>
+    );
+  },
+);
+
+DropdownComponent.displayName = 'Dropdown';
+DropdownLabel.displayName = 'Dropdown.Label';
+DropdownList.displayName = 'Dropdown.List';
+DropdownItem.displayName = 'Dropdown.Item';
+
+const Dropdown = Object.assign(DropdownComponent, {
+  Label: DropdownLabel,
+  List: DropdownList,
+  Item: DropdownItem,
+});
+
+export { Dropdown };

package/src/components/Dropdown/utils.ts

@@ -0,0 +1,15 @@
+import { useEffect } from 'react';
+
+export function useClickOutside(ref: any, onClickOutside: () => void) {
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (ref.current && !ref.current.contains(event.target)) {
+        onClickOutside();
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [ref, onClickOutside]);
+}

package/src/components/FileUploader/FilePreview.tsx

@@ -15,7 +15,7 @@ export const FilePreview = ({
 }: FilePreviewProps) => {
   const handleDismiss = (fileName: string): void => {
     onDismiss?.(fileName);
-  }
+  };
 
   return (
     <ul
@@ -42,4 +42,4 @@ export const FilePreview = ({
       })}
     </ul>
   );
-}
+};

package/src/components/FileUploader/FileUploader.stories.tsx

@@ -1,23 +1,25 @@
 import { FileUploader } from './';
 import { action } from '@storybook/addon-actions';
-import { Meta, type StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 import { idAndClassName } from '@utils/controls';
 
 const meta = {
-  title: 'Components/FileUploader',
+  title: 'V2Components/FileUploader',
   component: FileUploader,
   argTypes: {
     ...idAndClassName,
   },
   args: {
-    ctaText: 'You can select multiple Files',
-    text: 'or drag & drop your files here',
-    imageUrl: 'https://picsum.photos/500/300',
+    children: [
+      <FileUploader.Input>You can select multiple Files</FileUploader.Input>,
+      <FileUploader.Text>or drag & drop your files here</FileUploader.Text>,
+      <FileUploader.FilePreview />,
+    ],
     onDrop: (files: any) => {
       action('files:')(files[0].name);
-    }
-  }
-};
+    },
+  },
+} satisfies Meta<typeof FileUploader>;
 
 export default meta;
 

package/src/components/FileUploader/index.tsx

@@ -1,55 +1,61 @@
-import { useState } from 'react';
-
-import { Image } from '@components/Image';
-import classNames from 'classnames';
+import {
+  createContext,
+  forwardRef,
+  HTMLAttributes,
+  useContext,
+  useMemo,
+  useState,
+} from 'react';
 
 import { FilePreview } from './FilePreview';
 
-export interface FileUploaderProps {
-  id?: string;
-  className?: string;
-  ctaText: string;
-  text?: string;
-  imageUrl?: string;
-  onDrop?: ([]) => void;
+export interface FileUploaderContextProps {
+  fileList?: any;
+  setFileList: (open: any) => void;
+  inDropZone?: boolean;
+  setInDropZone?: (val: boolean) => void;
+  onDrop: React.DragEventHandler<HTMLDivElement> | undefined;
 }
 
-export const FileUploader = ({
-  id,
-  className,
-  ctaText,
-  text,
-  imageUrl,
-  onDrop,
-}: FileUploaderProps) => {
+const FileUploaderContext = createContext<FileUploaderContextProps | null>(
+  null,
+);
+
+const FileUploaderComponent = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement> & FileUploaderContextProps
+>(({ children, onDrop }, ref) => {
   const [inDropZone, setInDropZone] = useState(false);
   const [fileList, setFileList] = useState<any>([]);
 
-  const classList = classNames(
-    {
-      'bg-lightest-grey': inDropZone,
-    },
-    className,
-    'flex flex-col items-center justify-center rounded-2xl border-4 border-dashed border-light-grey py-8',
-  )
+  const state = useMemo(
+    () => ({
+      onDrop,
+      inDropZone,
+      setInDropZone,
+      fileList,
+      setFileList,
+    }),
+    [inDropZone, setInDropZone, fileList, setFileList, onDrop],
+  );
 
   const handleDragEnter = (e: any): void => {
     e.preventDefault();
     e.stopPropagation();
     setInDropZone(true);
-  }
+  };
 
   const handleDragLeave = (e: any): void => {
     e.preventDefault();
     e.stopPropagation();
     setInDropZone(false);
-  }
+  };
 
   const handleDragOver = (e: any): void => {
     e.preventDefault();
     e.stopPropagation();
     setInDropZone(true);
-  }
+  };
 
   const handleDrop = (e: any): void => {
     e.preventDefault();
@@ -64,8 +70,39 @@ export const FileUploader = ({
       setFileList(files);
       setInDropZone(false);
     }
-    onDrop?.(files);
-  }
+    onDrop?.(files[0]);
+  };
+
+  return (
+    <FileUploaderContext.Provider value={state}>
+      <div
+        ref={ref}
+        className="flex flex-col items-center justify-center rounded-2xl border-4 border-dashed border-primary py-8"
+        onDragEnter={(e) => {
+          handleDragEnter(e);
+        }}
+        onDragOver={(e) => {
+          handleDragOver(e);
+        }}
+        onDragLeave={(e) => {
+          handleDragLeave(e);
+        }}
+        onDrop={(e) => {
+          handleDrop(e);
+        }}
+      >
+        {children}
+      </div>
+    </FileUploaderContext.Provider>
+  );
+});
+
+const FileUploaderInput = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(({ children }, ref) => {
+  const { onDrop, fileList, setFileList } =
+    useContext(FileUploaderContext) || {};
 
   const handleFileSelect = (e: any): void => {
     let files = [...e.target.files];
@@ -73,36 +110,13 @@ export const FileUploader = ({
     if (files?.length > 0) {
       const existingFiles = fileList?.fileList?.map((f: any) => f.name);
       files = files.filter((f) => !existingFiles?.includes(f.name));
-      setFileList(files);
-      onDrop?.(files);
+      setFileList?.(files);
+      onDrop?.(files[0]);
     }
   };
 
-  const handleDismiss = (fileName: string): void => {
-    setFileList(fileList.filter((file: any) => file.name !== fileName));
-  }
-
   return (
-    <div
-      id={id}
-      className={classList}
-      onDragEnter={(e) => {
-        handleDragEnter(e);
-      }}
-      onDragOver={(e) => {
-        handleDragOver(e);
-      }}
-      onDragLeave={(e) => {
-        handleDragLeave(e);
-      }}
-      onDrop={(e) => {
-        handleDrop(e);
-      }}
-    >
-      {imageUrl && (
-        <Image src={imageUrl} altText="upload" height={5} width={5} />
-      )}
-
+    <div ref={ref}>
       <input
         id="fileSelect"
         type="file"
@@ -112,21 +126,52 @@ export const FileUploader = ({
           handleFileSelect(e);
         }}
       />
-
       <label
         className="mb-2 mt-4 inline-block cursor-pointer text-center"
         htmlFor="fileSelect"
       >
-        {ctaText}
+        {children}
       </label>
-
-      <h3 className="mt-8">{text}</h3>
-      <FilePreview
-        fileData={fileList}
-        onDismiss={(e: any) => {
-          handleDismiss(e);
-        }}
-      />
     </div>
   );
-}
+});
+
+const FileUploaderFilePreview = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(() => {
+  const { fileList, setFileList } = useContext(FileUploaderContext) || {};
+
+  const handleDismiss = (fileName: string): void => {
+    setFileList?.(fileList.filter((file: any) => file.name !== fileName));
+  };
+
+  return (
+    <FilePreview
+      fileData={fileList}
+      onDismiss={(e: any) => {
+        handleDismiss(e);
+      }}
+    />
+  );
+});
+
+const FileUploaderText = forwardRef<
+  HTMLParagraphElement,
+  HTMLAttributes<HTMLParagraphElement>
+>(({ ...props }, ref) => (
+  <p className="md:text-md truncate text-sm" ref={ref} {...props} />
+));
+
+FileUploaderComponent.displayName = 'FileUploader';
+FileUploaderInput.displayName = 'FileUploader.Input';
+FileUploaderText.displayName = 'FileUploader.Text';
+FileUploaderFilePreview.displayName = 'FileUploader.FilePreview';
+
+const FileUploader = Object.assign(FileUploaderComponent, {
+  Input: FileUploaderInput,
+  Text: FileUploaderText,
+  FilePreview: FileUploaderFilePreview,
+});
+
+export { FileUploader };