trepur_components 2.3.7 → 2.3.9

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/{archive → src/components}/FileUploader/FilePreview.tsx

@@ -1,22 +1,18 @@
-import React from 'react';
-
 import classNames from 'classnames';
 
-
-
-interface Props {
+interface FilePreviewProps {
   id?: string;
   className?: string;
   fileData?: any;
   onDismiss?: (e: any) => void;
 }
 
-const FileUploader: React.FC<Props> = ({
+export const FilePreview = ({
   id,
   className,
   fileData,
   onDismiss,
-}) => {
+}: FilePreviewProps) => {
   const handleDismiss = (fileName: string): void => {
     onDismiss?.(fileName);
   };
@@ -24,19 +20,22 @@ const FileUploader: React.FC<Props> = ({
   return (
     <ul
       id={id}
-      className={classNames(className, style.fileList, 'theme-local')}
+      className={classNames(className, 'flex w-full flex-wrap px-8 pt-4')}
     >
       {fileData?.map((file: any) => {
         return (
-          <li key={file.lastModified} className={classNames(style.file)}>
+          <li
+            key={file.lastModified}
+            className="mx-2 cursor-pointer rounded-2xl border bg-secondary text-white hover:bg-primary"
+          >
             <div
-              className={style.nameWrapper}
+              className="flex w-full justify-between px-4 py-1"
               onClick={() => {
                 handleDismiss(file.name);
               }}
             >
-              <p className={style.name}>{file.name}</p>
-              <p className={style.dismiss}>x</p>
+              <p>{file.name}</p>
+              <p className="ml-2 cursor-pointer">x</p>
             </div>
           </li>
         );
@@ -44,5 +43,3 @@ const FileUploader: React.FC<Props> = ({
     </ul>
   );
 };
-
-export default FileUploader;

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

@@ -0,0 +1,28 @@
+import { FileUploader } from './';
+import { action } from '@storybook/addon-actions';
+import { Meta, StoryObj } from '@storybook/react';
+import { idAndClassName } from '@utils/controls';
+
+const meta = {
+  title: 'V2Components/FileUploader',
+  component: FileUploader,
+  argTypes: {
+    ...idAndClassName,
+  },
+  args: {
+    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;
+
+type Story = StoryObj<typeof FileUploader>;
+
+export const Default: Story = {};

package/src/components/FileUploader/index.tsx

@@ -0,0 +1,177 @@
+import {
+  createContext,
+  forwardRef,
+  HTMLAttributes,
+  useContext,
+  useMemo,
+  useState,
+} from 'react';
+
+import { FilePreview } from './FilePreview';
+
+export interface FileUploaderContextProps {
+  fileList?: any;
+  setFileList: (open: any) => void;
+  inDropZone?: boolean;
+  setInDropZone?: (val: boolean) => void;
+  onDrop: React.DragEventHandler<HTMLDivElement> | undefined;
+}
+
+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 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();
+    e.stopPropagation();
+
+    let files = [...e.dataTransfer.files];
+
+    if (files?.length > 0) {
+      const existingFiles = fileList?.fileList?.map((f: any) => f.name);
+      files = files.filter((f) => !existingFiles?.includes(f.name));
+
+      setFileList(files);
+      setInDropZone(false);
+    }
+    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];
+
+    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[0]);
+    }
+  };
+
+  return (
+    <div ref={ref}>
+      <input
+        id="fileSelect"
+        type="file"
+        multiple
+        className="absolute mb-2 mt-4 inline-block h-px w-px cursor-pointer overflow-hidden whitespace-nowrap border-none p-0 text-center"
+        onChange={(e) => {
+          handleFileSelect(e);
+        }}
+      />
+      <label
+        className="mb-2 mt-4 inline-block cursor-pointer text-center"
+        htmlFor="fileSelect"
+      >
+        {children}
+      </label>
+    </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 };

package/src/components/Footer/Footer.stories.tsx

@@ -0,0 +1,47 @@
+import { Footer } from './';
+import { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  title: 'V2Components/Footer',
+  component: Footer,
+  args: {
+    children: [
+      <Footer.Section>
+        <Footer.Column>
+          <Footer.Title>Title</Footer.Title>
+          <Footer.Text>
+            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure hic
+            itaque dolore doloribus ducimus iste qui totam. Adipisci recusandae
+            sed voluptatum odio consequuntur, amet sint totam libero quasi
+            tenetur expedita?
+          </Footer.Text>
+        </Footer.Column>
+        <Footer.Column>
+          <Footer.Title>Title</Footer.Title>
+          <Footer.Text>
+            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure hic
+            itaque dolore doloribus ducimus iste qui totam. Adipisci recusandae
+            sed voluptatum odio consequuntur, amet sint totam libero quasi
+            tenetur expedita?
+          </Footer.Text>
+        </Footer.Column>
+        <Footer.Column>
+          <Footer.Title>Title</Footer.Title>
+          <Footer.Text>
+            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure hic
+            itaque dolore doloribus ducimus iste qui totam. Adipisci recusandae
+            sed voluptatum odio consequuntur, amet sint totam libero quasi
+            tenetur expedita?
+          </Footer.Text>
+        </Footer.Column>
+      </Footer.Section>,
+      <Footer.Bar>All right reserved</Footer.Bar>,
+    ],
+  },
+} satisfies Meta<typeof Footer>;
+
+export default meta;
+
+type Story = StoryObj<typeof Footer>;
+
+export const Default: Story = {};

package/src/components/Footer/index.tsx

@@ -0,0 +1,96 @@
+import { forwardRef, HTMLAttributes } from 'react';
+
+import clsx from 'clsx';
+
+export interface Props {
+  id?: string;
+  className?: string;
+  text?: string;
+  variant?: 'light' | 'dark';
+}
+
+const FooterComponent = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(({ children, className }, ref) => {
+  return (
+    <div
+      ref={ref}
+      className={clsx(
+        'grid grid-cols-1 gap-y-12 bg-footer-bg p-8 text-footer-text',
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+});
+
+const FooterBar = forwardRef<
+  HTMLParagraphElement,
+  HTMLAttributes<HTMLParagraphElement>
+>(({ children, className }, ref) => {
+  return (
+    <p ref={ref} className={clsx('text-center', className)}>
+      {children}
+    </p>
+  );
+});
+
+const FooterSection = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(({ children, className }, ref) => {
+  return (
+    <div ref={ref} className={clsx('grid grid-cols-3 gap-12', className)}>
+      {children}
+    </div>
+  );
+});
+
+const FooterColumn = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ children, className }, ref) => {
+    return (
+      <div ref={ref} className={className}>
+        {children}
+      </div>
+    );
+  },
+);
+
+const FooterTitle = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ children, className }, ref) => {
+    return (
+      <div ref={ref} className={className}>
+        {children}
+      </div>
+    );
+  },
+);
+
+const FooterText = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ children, className }, ref) => {
+    return (
+      <div ref={ref} className={className}>
+        {children}
+      </div>
+    );
+  },
+);
+
+FooterComponent.displayName = 'Footer';
+FooterBar.displayName = 'Footer.Bar';
+FooterSection.displayName = 'Footer.Section';
+FooterColumn.displayName = 'Footer.Column';
+FooterTitle.displayName = 'Footer.Title';
+FooterText.displayName = 'Footer.Text';
+
+const Footer = Object.assign(FooterComponent, {
+  Bar: FooterBar,
+  Section: FooterSection,
+  Column: FooterColumn,
+  Title: FooterTitle,
+  Text: FooterText,
+});
+
+export { Footer };

package/src/components/FooterNav/FooterNav.stories.tsx

@@ -0,0 +1,32 @@
+import { FooterNav } from './';
+import {
+  faHeart,
+  faMoon,
+  faSnowflake,
+  faStar,
+  faSun,
+} from '@fortawesome/fontawesome-free-solid';
+import { action } from '@storybook/addon-actions';
+import { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  title: 'V2Components/Footer Nav',
+  component: FooterNav,
+  args: {
+    children: [
+      <FooterNav.Item>
+        <FooterNav.Label>Item 1</FooterNav.Label>
+        <FooterNav.Icon icon={faHeart} />
+      </FooterNav.Item>,
+      <FooterNav.Item>
+        <FooterNav.Label>Item 2</FooterNav.Label>
+        <FooterNav.Icon icon={faMoon} />
+      </FooterNav.Item>,
+    ],
+  },
+} satisfies Meta<typeof FooterNav>;
+export default meta;
+
+type Story = StoryObj<typeof FooterNav>;
+
+export const Default: Story = {};

package/src/components/FooterNav/index.tsx

@@ -0,0 +1,75 @@
+import { forwardRef, HTMLAttributes } from 'react';
+
+import { IconDefinition } from '@fortawesome/fontawesome-free-solid';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import clsx from 'clsx';
+
+import { Icon } from '..';
+
+const FooterNavComponent = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(({ className, children, ...props }, ref) => {
+  return (
+    <div
+      className={clsx(
+        'border-lightest-grey fixed bottom-0 flex w-full justify-between border-t px-4',
+        className,
+      )}
+      ref={ref}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+});
+
+const FooterNavItem = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement> & { href?: string; onClick?: any }
+>(({ className, children, href, onClick, ...props }) => {
+  return (
+    <div
+      className={clsx(
+        'group w-full cursor-pointer py-2 text-center transition-all duration-500',
+        className,
+      )}
+      {...props}
+    >
+      <a href={href} onClick={onClick}>
+        {children}
+      </a>
+    </div>
+  );
+});
+
+const FooterNavLabel = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(({ className, children, ...props }, ref) => {
+  return (
+    <p className={(clsx('font-regular pt-0.5 text-xs'), className)} {...props}>
+      {children}
+    </p>
+  );
+});
+
+const FooterNavIcon = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement> & { icon: IconDefinition | IconProp }
+>(({ className, icon, ...props }) => {
+  return <Icon icon={icon} {...props} />;
+});
+
+FooterNavComponent.displayName = 'FooterNav';
+FooterNavItem.displayName = 'FooterNav.Item';
+FooterNavIcon.displayName = 'FooterNav.Icon';
+FooterNavLabel.displayName = 'FooterNav.Label';
+
+const FooterNav = Object.assign(FooterNavComponent, {
+  Item: FooterNavItem,
+  Label: FooterNavLabel,
+  Icon: FooterNavIcon,
+});
+
+export { FooterNav };

package/{archive → src/components}/Form/Form.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { idAndClassName } from '@utils/controls';
 
-import Form from '.';
+import { Form } from '.';
 
 const meta = {
   title: 'Components/Form',
@@ -81,6 +81,6 @@ const meta = {
 
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof Form>;
 
 export const Default: Story = {};