trepur_components 2.3.7 → 2.3.8

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

@@ -1,20 +1,19 @@
 import React, { useState } from 'react';
 
 import { action } from '@storybook/addon-actions';
-import { type Meta } from '@storybook/react';
 
-import Dialog from '.';
-import Button from '../Button';
-import Modal from '../Modal';
+import { Dialog } from '.';
+import { Button } from '../Button';
+import { Modal } from '../Modal';
 
 const meta = {
-  title: 'Trepur Components/molecules/Dialog',
+  title: 'Components/Dialog',
   component: Dialog,
   parameters: {
     docs: {
       description: {
         component: 'A dialog component',
-      },
+      }
     },
     layout: 'padded',
   },
@@ -37,7 +36,7 @@ const meta = {
       table: {
         type: { summary: 'function' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     title: {
       type: { name: 'string', required: false },
@@ -45,7 +44,7 @@ const meta = {
       table: {
         type: { summary: 'string' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     paragraph: {
       type: { name: 'string', required: false },
@@ -54,7 +53,7 @@ const meta = {
       table: {
         type: { summary: 'string' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     dismissText: {
       type: { name: 'string', required: false },
@@ -62,7 +61,7 @@ const meta = {
       table: {
         type: { summary: 'string' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     primaryCta: {
       type: { name: 'other', value: 'ButtonProps', required: false },
@@ -74,7 +73,7 @@ const meta = {
       description:
         'A collection of props to pass to the second button component',
       table: { type: { summary: 'ButtonProps' } },
-    },
+    }
   },
   args: {
     title: 'This is a title',
@@ -91,11 +90,11 @@ const meta = {
       children: 'Add bank details',
       variant: 'secondary',
       palette: 'secondary',
-    },
-  },
+    }
+  }
 };
 
-const Template = (args): React.ReactElement => {
+const Template = (args: any): React.ReactElement => {
   const [visible, setVisible] = useState<boolean>(false);
 
   return (
@@ -124,7 +123,7 @@ const Template = (args): React.ReactElement => {
       </Modal>
     </div>
   );
-};
+}
 
 export const _Dialog = Template.bind({});
 

package/{archive → src/components}/Dialog/index.tsx

@@ -1,11 +1,7 @@
-import React from 'react';
-
-import Button, { type Props as ButtonProps } from '@components/Button';
-import Image from '@components/Image';
+import { Button, type Props as ButtonProps } from '@components/Button';
+import { Image } from '@components/Image';
 import classNames from 'classnames';
 
-
-
 export interface Props extends Partial<Pick<HTMLElement, 'className' | 'id'>> {
   title: string;
   paragraph: string;
@@ -13,11 +9,10 @@ export interface Props extends Partial<Pick<HTMLElement, 'className' | 'id'>> {
   onDismissClick?: () => void;
   primaryCta?: ButtonProps;
   secondaryCta?: ButtonProps;
-
   imageUrl?: string;
 }
 
-const Dialog = ({
+export const Dialog = ({
   id,
   className,
   title,
@@ -27,7 +22,7 @@ const Dialog = ({
   primaryCta,
   secondaryCta,
   imageUrl,
-}: Props): JSX.Element => {
+}: Props) => {
   const hasCta = Boolean(primaryCta?.children);
   const hasCta2 = Boolean(secondaryCta?.children);
 
@@ -36,10 +31,10 @@ const Dialog = ({
       {...primaryCta}
       className={classNames(
         {
-          [style.fullWidth]: hasCta2,
+          'w-full': hasCta2,
         },
         primaryCta?.className,
-        style.ctaBtn,
+        'mt-2 w-full md:ml-6 md:mt-0',
       )}
     />
   );
@@ -49,35 +44,44 @@ const Dialog = ({
       {...secondaryCta}
       className={classNames(
         {
-          [style.fullWidth]: hasCta,
+          'w-full': hasCta,
         },
         secondaryCta?.className,
-        style.cta2Btn,
+        'mt-2 w-full md:ml-6 md:mt-0',
       )}
     />
   );
 
   const buttonWrapperClassList = classNames(
     {
-      [style.fullWidth]: ctaButton2,
+      'w-full': ctaButton2,
     },
-    style.buttonWrapper,
-  );
+    'flex flex-wrap pt-6 md:flex-nowrap',
+  )
 
-  const titleClassList = classNames({}, style.title);
+  const titleClassList = classNames({}, 'text-md font-regular');
 
   return (
-    <div id={id} className={classNames(style.dialog, className, 'theme-local')}>
-      <div className={style.headingWrapper}>
+    <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={style.dismissText} onClick={onDismissClick}>
+        <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={style.paragraph}>{paragraph}</p>
+      <p className="pt-1 font-light">{paragraph}</p>
       {(hasCta || hasCta2) && (
         <div className={buttonWrapperClassList}>
           {ctaButton}
@@ -86,6 +90,4 @@ const Dialog = ({
       )}
     </div>
   );
-};
-
-export default Dialog;
+}

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

@@ -1,8 +1,8 @@
 import { action } from '@storybook/addon-actions';
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, type StoryObj } from '@storybook/react';
 import { idAndClassName } from '@utils/controls';
 
-import DropdownMenu from '.';
+import { DropdownMenu } from '.';
 
 const meta = {
   title: 'Components/Dropdown Menu',
@@ -25,8 +25,8 @@ const meta = {
       control: 'array',
       table: {
         type: { summary: 'array' },
-      },
-    },
+      }
+    }
   },
   args: {
     backgroundColour: 'white',
@@ -47,13 +47,13 @@ const meta = {
       {
         name: 'Wishlists',
         href: '#',
-      },
-    ],
+      }
+    ]
   },
-};
+}
 
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof DropdownMenu>;
 
 export const Default: Story = {};

package/{archive → src/components}/DropdownMenu/index.tsx

@@ -3,8 +3,6 @@ import React from 'react';
 import { type Colours } from '@utils/controls';
 import classNames from 'classnames';
 
-
-
 export interface Props {
   id?: string;
   className?: string;
@@ -14,19 +12,17 @@ export interface Props {
   onClick?: React.MouseEventHandler;
 }
 
-const DropdownMenu = ({
+export const DropdownMenu = ({
   id,
   className,
   backgroundColour = 'white',
   menuItems = [],
   onClick,
-}: Props): JSX.Element => {
+}: Props) => {
   const classList = classNames(
     className,
-    style.classList,
-    style[backgroundColour],
-    'theme-local',
-  );
+    'w-[250px] flex flex-col mt-2 rounded-2xl py-4 drop-shadow-lg absolute right-10',
+  )
 
   if (!menuItems) return <></>;
 
@@ -38,7 +34,7 @@ const DropdownMenu = ({
             key={i}
             href={item.href}
             onClick={(e) => onClick?.(e)}
-            className={style.menuItem}
+            className="px-4 py-2 text-ink hover:bg-lightest-grey"
           >
             {item.name}
           </a>
@@ -46,6 +42,4 @@ const DropdownMenu = ({
       })}
     </div>
   );
-};
-
-export default DropdownMenu;
+}

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

@@ -1,8 +1,10 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { faHeart } from '@fortawesome/fontawesome-free-solid';
+import { type IconProp } from '@fortawesome/fontawesome-svg-core';
+import { Meta, type StoryObj } from '@storybook/react';
 import { idAndClassName } from '@utils/controls';
 
-import DynamicTextSection from '.';
-import Icon from '../Icon';
+import { DynamicTextSection } from '.';
+import { Icon } from '../Icon';
 
 const meta = {
   title: 'Components/DynamicTextSection',
@@ -14,7 +16,7 @@ const meta = {
       table: {
         type: { summary: 'string' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     topLine: {
       description: 'Shows a top line',
@@ -44,7 +46,7 @@ const meta = {
         defaultValue: { summary: 'false' },
       },
       defaultValue: 'false',
-    },
+    }
   },
   args: {
     topLine: true,
@@ -52,23 +54,23 @@ const meta = {
     middleLine: false,
     children: [
       <div key="1" className="flex">
-        <Icon type="heart" hollow bgColour="white" />
+        <Icon icon={faHeart as IconProp} />
         <p>First Child</p>
       </div>,
       <div key="2" className="flex">
-        <Icon type="star" hollow bgColour="white" />
+        <Icon icon={faHeart as IconProp} />
         <p>Second Child</p>
       </div>,
       <div key="3" className="flex">
-        <Icon type="moon" hollow bgColour="white" />
+        <Icon icon={faHeart as IconProp} />
         <p>Third Child</p>
       </div>,
-    ],
-  },
+    ]
+  }
 };
 
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof DynamicTextSection>;
 
 export const Default: Story = {};

package/{archive → src/components}/DynamicTextSection/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import HorizontalLine from '@components/HorizontalLine';
+import { HorizontalLine } from '@components/HorizontalLine';
 import classNames from 'classnames';
 
 export interface Props {
@@ -13,24 +13,20 @@ export interface Props {
   middleLine?: boolean;
 }
 
-const DynamicTextSection = ({
+export const DynamicTextSection = ({
   id,
   className,
   children,
   topLine = false,
   bottomLine = false,
   middleLine = false,
-}: Props): JSX.Element => {
-  const classList = classNames(className, 'theme-local');
-
+}: Props) => {
   return (
-    <div id={id} className={classList}>
+    <div id={id} className={className}>
       {topLine && <HorizontalLine colour="grey" topLine />}
       {children}
       {bottomLine && <HorizontalLine colour="grey" bottomLine />}
       {middleLine && <HorizontalLine colour="grey" middleLine />}
     </div>
   );
-};
-
-export default DynamicTextSection;
+}

package/{archive → src/components}/FileUploader/FilePreview.tsx

@@ -1,48 +1,45 @@
-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);
-  };
+  }
 
   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>
         );
       })}
     </ul>
   );
-};
-
-export default FileUploader;
+}

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

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

package/{archive → src/components}/FileUploader/index.tsx

@@ -1,59 +1,55 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 
-import Image from '@components/Image';
+import { Image } from '@components/Image';
 import classNames from 'classnames';
 
-import FilePreview from './FilePreview';
+import { FilePreview } from './FilePreview';
 
-
-interface Props {
+export interface FileUploaderProps {
   id?: string;
   className?: string;
   ctaText: string;
   text?: string;
-
   imageUrl?: string;
   onDrop?: ([]) => void;
 }
 
-const FileUploader: React.FC<Props> = ({
+export const FileUploader = ({
   id,
   className,
   ctaText,
   text,
-
   imageUrl,
   onDrop,
-}) => {
+}: FileUploaderProps) => {
   const [inDropZone, setInDropZone] = useState(false);
   const [fileList, setFileList] = useState<any>([]);
 
   const classList = classNames(
     {
-      [style.inDropZone]: inDropZone,
+      'bg-lightest-grey': inDropZone,
     },
     className,
-    style.dropzone,
-    'theme-local',
-  );
+    'flex flex-col items-center justify-center rounded-2xl border-4 border-dashed border-light-grey py-8',
+  )
 
   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();
@@ -69,7 +65,7 @@ const FileUploader: React.FC<Props> = ({
       setInDropZone(false);
     }
     onDrop?.(files);
-  };
+  }
 
   const handleFileSelect = (e: any): void => {
     let files = [...e.target.files];
@@ -84,7 +80,7 @@ const FileUploader: React.FC<Props> = ({
 
   const handleDismiss = (fileName: string): void => {
     setFileList(fileList.filter((file: any) => file.name !== fileName));
-  };
+  }
 
   return (
     <div
@@ -111,25 +107,26 @@ const FileUploader: React.FC<Props> = ({
         id="fileSelect"
         type="file"
         multiple
-        className={style.files}
+        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={style.label} htmlFor="fileSelect">
+      <label
+        className="mb-2 mt-4 inline-block cursor-pointer text-center"
+        htmlFor="fileSelect"
+      >
         {ctaText}
       </label>
 
-      <h3 className={style.uploadMessage}>{text}</h3>
+      <h3 className="mt-8">{text}</h3>
       <FilePreview
         fileData={fileList}
-        onDismiss={(e) => {
+        onDismiss={(e: any) => {
           handleDismiss(e);
         }}
       />
     </div>
   );
-};
-
-export default FileUploader;
+}

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

@@ -1,8 +1,8 @@
 import { action } from '@storybook/addon-actions';
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, type StoryObj } from '@storybook/react';
 import { idAndClassName } from '@utils/controls';
 
-import FilterItem from '.';
+import { FilterItem } from '.';
 
 const meta = {
   title: 'Components/FilterItem',
@@ -16,18 +16,18 @@ const meta = {
       control: 'text',
       table: {
         category: '',
-      },
-    },
+      }
+    }
   },
   args: {
     title: 'This is a title',
     filters: ['filter 1', 'filter 2', 'filter 3', 'filter 4', 'filter 5'],
     onClick: action('clicked'),
-  },
-};
+  }
+}
 
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof FilterItem>;
 
 export const Default: Story = {};