trepur_components 2.3.9 → 2.3.11

package/src/components/Dropdown/index.tsx

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

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

@@ -1,45 +0,0 @@
-import classNames from 'classnames';
-
-interface FilePreviewProps {
-  id?: string;
-  className?: string;
-  fileData?: any;
-  onDismiss?: (e: any) => void;
-}
-
-export const FilePreview = ({
-  id,
-  className,
-  fileData,
-  onDismiss,
-}: FilePreviewProps) => {
-  const handleDismiss = (fileName: string): void => {
-    onDismiss?.(fileName);
-  };
-
-  return (
-    <ul
-      id={id}
-      className={classNames(className, 'flex w-full flex-wrap px-8 pt-4')}
-    >
-      {fileData?.map((file: any) => {
-        return (
-          <li
-            key={file.lastModified}
-            className="mx-2 cursor-pointer rounded-2xl border bg-secondary text-white hover:bg-primary"
-          >
-            <div
-              className="flex w-full justify-between px-4 py-1"
-              onClick={() => {
-                handleDismiss(file.name);
-              }}
-            >
-              <p>{file.name}</p>
-              <p className="ml-2 cursor-pointer">x</p>
-            </div>
-          </li>
-        );
-      })}
-    </ul>
-  );
-};

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

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

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

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

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

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

@@ -1,75 +0,0 @@
-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 };