trepur_components 2.3.7 → 2.3.8

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

@@ -1,11 +1,14 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 
-import Checkbox from '@components/Checkbox';
-import Icon from '@components/Icon';
+import { Checkbox } from '@components/Checkbox';
+import { Icon } from '@components/Icon';
+import {
+  faChevronDown,
+  faChevronUp,
+} from '@fortawesome/fontawesome-free-solid';
+import { type IconProp } from '@fortawesome/fontawesome-svg-core';
 import classNames from 'classnames';
 
-
-
 export interface Props {
   id?: string;
   className?: string;
@@ -14,13 +17,13 @@ export interface Props {
   onClick?: () => void;
 }
 
-const FilterItem = ({
+export const FilterItem = ({
   id,
   className,
   title,
   filters,
   onClick,
-}: Props): JSX.Element => {
+}: Props) => {
   const [expanded, setExpanded] = useState(false);
 
   useEffect(() => {
@@ -28,7 +31,7 @@ const FilterItem = ({
     let i: number;
 
     for (i = 0; i < coll.length; i++) {
-      coll[i].addEventListener('click', function (this: any, err: any) {
+      coll[i]?.addEventListener('click', function (this: any, err: any) {
         const content = this.nextElementSibling;
 
         const scrollHeight: string = content.scrollHeight.toString();
@@ -41,19 +44,15 @@ const FilterItem = ({
     }
   });
 
-  const classList = classNames(
-    className,
-    style.classList,
-    'transition-opactiy theme-local',
-  );
+  const classList = classNames(className, 'duration-300 transition-opactiy');
 
   const contentWrapperClassList = classNames(
     {
-      [style.expanded]: expanded,
-      [style.collapsed]: !expanded,
+      'my-2 max-h-max': expanded,
+      'max-h-0': !expanded,
     },
-    style.contentWrapperClassList,
-  );
+    'w-auto overflow-hidden px-4',
+  )
 
   const expandItem = (e: any): void => {
     const content = e.currentTarget.nextElementSibling;
@@ -64,7 +63,7 @@ const FilterItem = ({
       content.style.maxHeight = '0px';
     }
     setExpanded(!expanded);
-  };
+  }
 
   return (
     <div id={id} className={classList}>
@@ -72,22 +71,21 @@ const FilterItem = ({
         onClick={(e) => {
           expandItem(e);
         }}
-        className={style.headingClassList}
+        className="flex w-full justify-between border-b px-6 py-3"
       >
         <h4>{title}</h4>
         <Icon
-          type={expanded ? 'chevron-up' : 'chevron-down'}
+          icon={
+            expanded ? (faChevronUp as IconProp) : (faChevronDown as IconProp)
+          }
           colour="black"
-          bgColour="white"
-          hoverColour="black"
-          hoverBgColour="white"
         />
       </div>
       <div className={contentWrapperClassList}>
         <ul>
           {filters?.map((filter, i) => {
             return (
-              <li className={style.li} key={`filter_${i}`}>
+              <li className="py-1" key={`filter_${i}`}>
                 <Checkbox label={filter} onClick={onClick} />
               </li>
             );
@@ -96,6 +94,4 @@ const FilterItem = ({
       </div>
     </div>
   );
-};
-
-export default FilterItem;
+}

package/{archive → src/components}/Footer/Footer.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 Footer from '.';
+import { Footer } from '.';
 
 const meta = {
   title: 'Components/Footer',
@@ -27,7 +27,7 @@ const meta = {
           summary: 'object',
         },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     variant: {
       type: { name: 'string', required: false },
@@ -39,7 +39,7 @@ const meta = {
       },
       defaultValue: 'light',
       control: { type: 'radio' },
-    },
+    }
   },
   args: {
     text: 'Copyright All rights reserved',
@@ -49,11 +49,11 @@ const meta = {
       onClick: action('button clicked'),
       href: '/',
       target: '_blank',
-    },
-  },
+    }
+  }
 };
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof Footer>;
 
 export const Default: Story = {};

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

@@ -1,11 +1,7 @@
-import React from 'react';
-
-import Button, { type Props as buttonProps } from '@components/Button';
-import Container from '@components/Container';
+import { Button, type Props as buttonProps } from '@components/Button';
+import { Container } from '@components/Container';
 import classNames from 'classnames';
 
-
-
 export interface Props {
   id?: string;
   className?: string;
@@ -14,21 +10,25 @@ export interface Props {
   variant?: 'light' | 'dark';
 }
 
-const Footer = ({
+export const Footer = ({
   id,
   className,
   text,
   buttonProps,
   variant,
-}: Props): JSX.Element => {
-  const colours = variant === 'dark' ? [style.dark] : [style.light];
-  const classList = classNames(className, colours, 'theme-local');
+}: Props) => {
+  const colours =
+    variant === 'dark' ? 'bg-primary text-white' : 'bg-white text-primary';
+  const classList = classNames(className, colours);
 
   return (
     <div id={id} className={classList}>
-      <Container withPadding className={style.classList}>
-        <p className={style.textClassList}>{text}</p>
-        <div className={style.buttonClassList}>
+      <Container
+        withPadding
+        className="block h-auto flex-wrap items-center justify-between md:flex"
+      >
+        <p className="pb-4 pt-8 text-center md:my-8 md:pb-0 md:pt-0">{text}</p>
+        <div className="pb-8 pt-4 text-center md:pb-0 md:pt-0">
           {buttonProps?.children !== undefined &&
             (buttonProps?.href !== undefined ||
               buttonProps?.onClick !== undefined) && (
@@ -45,6 +45,4 @@ const Footer = ({
       </Container>
     </div>
   );
-};
-
-export default Footer;
+}

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

@@ -1,8 +1,15 @@
+import {
+  faHeart,
+  faMoon,
+  faSnowflake,
+  faStar,
+  faSun,
+} from '@fortawesome/fontawesome-free-solid';
 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 FooterNav from '.';
+import { FooterNav } from '.';
 
 const meta = {
   title: 'Components/Footer Nav',
@@ -14,7 +21,7 @@ const meta = {
       description: 'The title to display on the component',
       table: {
         type: { summary: 'string' },
-      },
+      }
     },
     subtitle: {
       type: { name: 'string', value: 'string | number' },
@@ -24,7 +31,7 @@ const meta = {
           summary: 'string',
         },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     withAnimation: {
       type: { name: 'boolean', required: false },
@@ -47,7 +54,7 @@ const meta = {
       description: 'The props to pass to the icon to display on the component',
       table: {
         type: { summary: 'iconProps' },
-      },
+      }
     },
 
     large: {
@@ -58,7 +65,7 @@ const meta = {
         defaultValue: { summary: 'true' },
       },
       defaultValue: 'true',
-    },
+    }
   },
   args: {
     backgroundColour: 'white',
@@ -69,9 +76,7 @@ const meta = {
         title: 'wishlists',
         href: '#',
         iconProps: {
-          type: 'heart',
-          size: 2,
-          hollow: true,
+          icon: faHeart,
         },
         onClick: action('clicked wishlist'),
       },
@@ -79,9 +84,7 @@ const meta = {
         title: 'Profile',
         href: '#',
         iconProps: {
-          type: 'star',
-          size: 2,
-          hollow: true,
+          icon: faStar,
         },
         onClick: action('clicked profile'),
       },
@@ -89,9 +92,7 @@ const meta = {
         title: 'sun',
         href: '#',
         iconProps: {
-          type: 'sun',
-          size: 2,
-          hollow: true,
+          icon: faSun,
         },
         onClick: action('clicked sun'),
       },
@@ -99,9 +100,7 @@ const meta = {
         title: 'moon',
         href: '#',
         iconProps: {
-          type: 'moon',
-          size: 2,
-          hollow: true,
+          icon: faMoon,
         },
         onClick: action('clicked moon'),
       },
@@ -109,17 +108,15 @@ const meta = {
         title: 'snowflake',
         href: '#',
         iconProps: {
-          type: 'snowflake',
-          size: 2,
-          hollow: true,
+          icon: faSnowflake,
         },
         onClick: action('clicked snowflake'),
-      },
-    ],
+      }
+    ]
   },
-};
+}
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof FooterNav>;
 
 export const Default: Story = {};

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

@@ -1,13 +1,10 @@
-import React from 'react';
-
-import FooterNavItem, {
-  type Props as FooterNavItemProps,
+import {
+  FooterNavItem,
+  type FooterNavItemProps,
 } from '@components/FooterNavItem';
 import { type Colours } from '@utils/controls';
 import classNames from 'classnames';
 
-
-
 export interface Props {
   id: string;
   className?: string;
@@ -15,11 +12,10 @@ export interface Props {
   colour?: Colours;
   hoverColour?: Colours;
   hoverBgColour?: Colours;
-
   footerItems: FooterNavItemProps[];
 }
 
-const FooterNav = ({
+export const FooterNav = ({
   id,
   className,
   backgroundColour = 'white',
@@ -27,13 +23,11 @@ const FooterNav = ({
   hoverColour = 'black',
   hoverBgColour = 'black',
   footerItems,
-}: Props): JSX.Element => {
+}: Props) => {
   const classList = classNames(
     className,
-    style.classList,
-    style[backgroundColour],
-    'theme-local',
-  );
+    'fixed bottom-0 flex w-full justify-between px-4 border-t border-lightest-grey',
+  )
 
   return (
     <div id={id} className={classList}>
@@ -52,6 +46,4 @@ const FooterNav = ({
       })}
     </div>
   );
-};
-
-export default FooterNav;
+}

package/{archive → src/components}/FooterNavItem/FooterNavItem.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 FooterNavItem from '.';
+import { FooterNavItem } from '.';
 
 const meta = {
   title: 'Components/Footer Nav Item',
@@ -15,14 +15,14 @@ const meta = {
       description: 'The title to display on the component',
       table: {
         type: { summary: 'string' },
-      },
+      }
     },
     iconProps: {
       type: { name: 'iconProps', required: false },
       description: 'The props to pass to the icon to display on the component',
       table: {
         type: { summary: 'iconProps' },
-      },
+      }
     },
     backgroundColour: {
       type: { name: 'string', required: false },
@@ -33,7 +33,7 @@ const meta = {
       },
       defaultValue: 'primary',
       control: 'select',
-    },
+    }
   },
   args: {
     title: 'Wishlist',
@@ -44,10 +44,10 @@ const meta = {
       hollow: true,
     },
     onClick: action('clicked'),
-  },
-};
+  }
+}
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof FooterNavItem>;
 
 export const Default: Story = {};

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

@@ -1,26 +1,21 @@
-import React from 'react';
-
-import Icon, { type Props as iconProps } from '@components/Icon';
+import { Icon, type IconProps } from '@components/Icon';
 import { type Colours } from '@utils/controls';
 import classNames from 'classnames';
 
-
-
-export interface Props {
+export interface FooterNavItemProps {
   id: string;
   className?: string;
   title?: string;
-  iconProps?: iconProps;
+  iconProps?: IconProps;
   bgColour?: Colours;
   hoverBgColour?: Colours;
   colour?: Colours;
   hoverColour?: Colours;
-
   onClick?: () => void;
   href: string;
 }
 
-const FooterNavItem = ({
+export const FooterNavItem = ({
   id,
   className,
   title,
@@ -31,7 +26,7 @@ const FooterNavItem = ({
   hoverColour = 'white',
   onClick,
   href,
-}: Props): JSX.Element => {
+}: FooterNavItemProps) => {
   const formattedText =
     typeof colour === 'string' ? `text_${colour}` : 'text_primary';
   const formattedBg =
@@ -47,34 +42,17 @@ const FooterNavItem = ({
 
   const classList = classNames(
     className,
-    style.classList,
-    style[formattedBg],
-    style[formattedHoverBg],
-    style[formattedText],
-    style[formattedHoverText],
-    'theme-local',
-  );
+    'group w-full cursor-pointer py-2 text-center transition-all duration-500',
+  )
 
   return (
     <div id={id} className={classList}>
       <a href={href} onClick={onClick}>
-        {iconProps !== undefined && (
-          <Icon
-            {...iconProps}
-            className={style.icon}
-            bgColour={bgColour}
-            hoverBgColour={hoverBgColour}
-            colour={colour}
-            hoverColour={hoverColour}
-            rounded
-          />
-        )}
+        {iconProps !== undefined && <Icon {...iconProps} colour={colour} />}
         {title !== undefined && title !== '' && (
-          <p className={style.title}>{title}</p>
+          <p className="pt-0.5 text-xs font-regular">{title}</p>
         )}
       </a>
     </div>
   );
-};
-
-export default FooterNavItem;
+}

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

@@ -1,7 +1,7 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, type StoryObj } from '@storybook/react';
 import { idAndClassName } from '@utils/controls';
 
-import Form from '.';
+import { Form } from '.';
 
 const meta = {
   title: 'Components/Form',
@@ -14,7 +14,7 @@ const meta = {
       table: {
         type: { summary: 'string' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     onSubmit: {
       type: { name: 'function', required: false },
@@ -25,7 +25,7 @@ const meta = {
           summary: 'function',
         },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     ref: {
       type: { name: 'other', value: 'RefObject<TouchableOpacity>' },
@@ -35,7 +35,7 @@ const meta = {
           summary: 'object',
         },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     components: {
       description: 'An array of component objects to pass to the component',
@@ -45,8 +45,8 @@ const meta = {
           summary: 'array',
         },
         defaultValue: { summary: 'undefined' },
-      },
-    },
+      }
+    }
   },
   args: {
     components: [
@@ -74,13 +74,13 @@ const meta = {
       {
         htmlType: 'Button',
         children: 'Submit',
-      },
-    ],
+      }
+    ]
   },
-};
+}
 
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof Form>;
 
 export const Default: Story = {};

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

@@ -1,8 +1,6 @@
-import React from 'react';
-
-import Button, { type Props as buttonProps } from '@components/Button';
-import Container from '@components/Container';
-import Input, { type Props as inputProps } from '@components/Input';
+import { Button, type Props as buttonProps } from '@components/Button';
+import { Container } from '@components/Container';
+import { Input, type Props as inputProps } from '@components/Input';
 import classNames from 'classnames';
 
 export interface Props {
@@ -13,21 +11,10 @@ export interface Props {
   components?: Array<inputProps & buttonProps & { htmlType: string }>;
 }
 
-const Form = ({
-  id,
-  className,
-  onSubmit,
-  ref,
-  components,
-}: Props): JSX.Element => {
+export const Form = ({ id, className, onSubmit, ref, components }: Props) => {
   return (
     <Container withPadding>
-      <form
-        id={id}
-        ref={ref}
-        className={classNames(className, 'theme-local')}
-        onSubmit={onSubmit}
-      >
+      <form id={id} ref={ref} className={className} onSubmit={onSubmit}>
         {components?.map((component, i) => {
           if (component?.htmlType === 'Input') {
             return (
@@ -56,6 +43,4 @@ const Form = ({
       </form>
     </Container>
   );
-};
-
-export default Form;
+}

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

@@ -1,7 +1,7 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, type StoryObj } from '@storybook/react';
 import { idAndClassName } from '@utils/controls';
 
-import FyreCard from '.';
+import { FyreCard } from '.';
 
 const meta = {
   title: 'Components/Fyre Card',
@@ -14,18 +14,18 @@ const meta = {
       control: 'text',
       table: {
         category: '',
-      },
-    },
+      }
+    }
   },
   args: {
     image: 'https://picsum.photos/500/300',
     buttonProps: {
       children: 'Shop Now',
-    },
-  },
+    }
+  }
 };
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof FyreCard>;
 
 export const Default: Story = {};