trepur_components 2.3.7 → 2.3.8

package/{archive → src/components}/SideNav/SideNav.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 SideNav from '.';
+import { SideNav } from '.';
 
 const meta = {
   title: 'Components/SideNav',
@@ -13,8 +13,8 @@ const meta = {
         {
           name: 'grey',
           value: '#f3f3f3',
-        },
-      ],
+        }
+      ]
     },
   },
   argTypes: {
@@ -24,7 +24,7 @@ const meta = {
       description: 'An array of nav links to display in the component',
       table: {
         type: { summary: 'array' },
-      },
+      }
     },
     bgColour: {
       type: { name: 'string', required: false },
@@ -35,16 +35,16 @@ const meta = {
       },
       defaultValue: 'primary',
       control: 'select',
-    },
+    }
   },
   args: {
     children: <p>dfghj</p>,
     showNav: true,
-  },
-};
+  }
+}
 
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof SideNav>;
 
 export const Default: Story = {};

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

@@ -1,10 +1,6 @@
-import React from 'react';
-
 import { type Colours } from '@utils/controls';
 import classNames from 'classnames';
 
-
-
 export interface Props {
   id: string;
   className: string;
@@ -15,32 +11,29 @@ export interface Props {
   leftExpand?: boolean;
 }
 
-const SideNav = ({
+export const SideNav = ({
   id,
   className,
   children,
   bgColour = 'primary',
   showNav = false,
   leftExpand = true,
-}: Props): JSX.Element => {
+}: Props) => {
   const sideNavClasses = classNames(
     {
-      [style.sideBarCollapsed]: !showNav,
-      [style.sideBarExpanded]: showNav,
-      [style.leftExpand]: leftExpand,
-      [style.rightExpand]: !leftExpand,
+      'w-0': !showNav,
+      'w-full sm:w-1/3': showNav,
+      'left-0': leftExpand,
+      'right-0': !leftExpand,
     },
-    style[bgColour],
-    style.sideNavClassList,
+
     className,
-    'theme-local',
-  );
+    'absolute z-50 h-full overflow-hidden duration-700',
+  )
 
   return (
     <div id={id} className={sideNavClasses}>
       {children}
     </div>
   );
-};
-
-export default SideNav;
+}

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

@@ -1,14 +1,14 @@
 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 SocialBlock from '.';
+import { SocialBlock } from '.';
 
 const socialButtons = [
   { type: 'facebook', href: '/facebook' },
   { type: 'instagram', href: '/insta' },
   { type: 'github', href: '/github' },
-];
+]
 
 const meta = {
   title: 'Components/Social Block',
@@ -29,7 +29,7 @@ const meta = {
       table: {
         type: { summary: 'function' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     variant: {
       type: { name: 'string', required: false },
@@ -38,7 +38,7 @@ const meta = {
       table: { type: { summary: 'dark' }, defaultValue: { summary: 'dark' } },
       defaultValue: 'dark',
       control: { type: 'radio' },
-    },
+    }
   },
   args: {
     title: 'Why not connect with me on LinkedIn or Facebook?',
@@ -49,10 +49,10 @@ const meta = {
     onSave: action('button-save'),
     withLiveUpdates: true,
     socialButtons,
-  },
-};
+  }
+}
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof SocialBlock>;
 
 export const Default: Story = {};

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

@@ -1,9 +1,9 @@
-import ComponentWrapper from '@components/ComponentWrapper';
-import SocialButton from '@components/SocialButton';
+import { ComponentWrapper } from '@components/ComponentWrapper';
+import { SocialButton } from '@components/SocialButton';
 import { type Colours } from '@utils/controls';
 import classNames from 'classnames';
 
-export interface Props {
+export interface SocialBlockProps {
   id?: string;
   className?: string;
   title?: string;
@@ -13,7 +13,7 @@ export interface Props {
   variant: 'light' | 'dark';
 }
 
-const SocialBlock = ({
+export const SocialBlock = ({
   id,
   className,
   title,
@@ -21,14 +21,12 @@ const SocialBlock = ({
   bgColour,
   socialButtons,
   variant = 'light',
-}: Props): JSX.Element => {
-  const colours = variant === 'dark' ? 'bg-primary text-white placeholder-white' : 'bg-white text-black placeholder-primary';
-  const classList = classNames(
-    'w-full',
-    className,
-    colours,
-    'theme-local',
-  );
+}: SocialBlockProps) => {
+  const colours =
+    variant === 'dark'
+      ? 'bg-primary text-white placeholder-white'
+      : 'bg-white text-black placeholder-primary';
+  const classList = classNames('w-full', className, colours);
 
   return (
     <ComponentWrapper
@@ -38,15 +36,15 @@ const SocialBlock = ({
       description={description}
       bgColour={bgColour}
     >
-      <div className='flex w-full'>
-        <div className='mx-auto inline-block rounded-full px-2'>
-          <div className='flex'>
+      <div className="flex w-full">
+        <div className="mx-auto inline-block rounded-full px-2">
+          <div className="flex">
             {socialButtons?.map((button: any, i: number) => {
               return (
                 button.href !== undefined && (
                   <SocialButton
                     key={`socual_button_${i}`}
-                    className='mx-1 my-2'
+                    className="mx-1 my-2"
                     type={button.type}
                     href={button.href}
                   />
@@ -58,6 +56,4 @@ const SocialBlock = ({
       </div>
     </ComponentWrapper>
   );
-};
-
-export default SocialBlock;
+}

package/{archive → src/components}/SocialButton/SocialButton.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 SocialButton from '.';
+import { SocialButton } from '.';
 
 const meta = {
   title: 'Components/SocialButton',
@@ -12,8 +12,8 @@ const meta = {
       description: {
         component:
           'A SocialButton which can either be internal, external or social as well as a standard design or a slide design.',
-      },
-    },
+      }
+    }
   },
   argTypes: {
     ...idAndClassName,
@@ -26,7 +26,7 @@ const meta = {
           summary: 'function',
         },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     type: {
       type: {
@@ -41,7 +41,7 @@ const meta = {
         },
         defaultValue: {
           summary: 'default',
-        },
+        }
       },
       defaultValue: 'default',
       control: { type: 'radio' },
@@ -55,8 +55,8 @@ const meta = {
         },
         defaultValue: {
           summary: 'undefined',
-        },
-      },
+        }
+      }
     },
     openInNewTab: {
       type: { name: 'boolean', required: false },
@@ -71,18 +71,18 @@ const meta = {
           summary: 'Array',
         },
         defaultValue: { summary: 'undefined' },
-      },
-    },
+      }
+    }
   },
   args: {
     type: 'facebook',
     href: '/',
     onClick: action('SocialButton clicked'),
-  },
-};
+  }
+}
 
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof SocialButton>;
 
 export const Default: Story = {};

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

@@ -1,11 +1,11 @@
 import React from 'react';
 
-import Icon from '@components/Icon';
-import { Colours, SocialTypes } from '@utils/controls';
+import { Icon } from '@components/Icon';
+import { faStar } from '@fortawesome/fontawesome-free-solid';
+import { type IconProp } from '@fortawesome/fontawesome-svg-core';
+import { type Colours, type SocialTypes } from '@utils/controls';
 import classNames from 'classnames';
 
-
-
 export interface Props {
   id?: string;
   className?: string;
@@ -15,57 +15,50 @@ export interface Props {
   openInNewTab?: boolean;
 }
 
-const SocialButton = ({
+export const SocialButton = ({
   id,
   className,
   onClick,
   type = 'facebook',
   href,
   openInNewTab = false,
-}: Props): JSX.Element => {
+}: Props) => {
   const getColours = (type: Colours): Colours => {
     const typeString: string = type;
     const colour: string = `interactive-${typeString}`;
     return colour as Colours;
-  };
+  }
 
   const classList = classNames(
-    style.classList,
-    style[type],
+    'flex h-16 w-16 transform rounded-full duration-500',
     className,
-    'theme-local',
-  );
+    {
+      'bg-facebook hover:bg-interactive-facebook': type === 'facebook',
+      'bg-github hover:bg-interactive-github': type === 'github',
+      '': type === 'instagram',
+      'bg-linkedin hover:bg-interactive-linkedin': type === 'linkedin',
+    }
+  )
 
   const iconType = {
     facebook: 'facebook-f',
     instagram: 'instagram',
     github: 'github',
     linkedin: 'linkedin-in',
-  };
+  }
 
   const typeString: string = type.toString();
   return (
     <a
-      className={style.anchor}
+      className="rounded-full"
       href={href}
       aria-label={`view me on ${typeString}`}
       onClick={onClick}
       {...(openInNewTab && { target: '_blank' })}
     >
       <div id={id} className={classList}>
-        <Icon
-          type={iconType[type]}
-          className="mx-auto my-auto"
-          size={2}
-          brand
-          rounded
-          bgColour={type}
-          colour="white"
-          hoverBgColour={getColours(type as Colours)}
-        />
+        <Icon icon={faStar as IconProp} size="2x" colour="white" />
       </div>
     </a>
   );
-};
-
-export default SocialButton;
+}

package/{archive → src/components}/StarRating/StarRating.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 StarRating from '.';
+import { StarRating } from '.';
 
 const meta = {
   title: 'Components/Star Rating',
@@ -13,11 +13,11 @@ const meta = {
   args: {
     stars: 3,
     size: 2,
-  },
-};
+  }
+}
 
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof StarRating>;
 
 export const Default: Story = {};

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

@@ -1,71 +1,65 @@
-import Icon from '@components/Icon';
+import { Icon } from '@components/Icon';
+import { faStar } from '@fortawesome/fontawesome-free-solid';
+import {
+  type IconProp,
+  type SizeProp,
+} from '@fortawesome/fontawesome-svg-core';
 import classNames from 'classnames';
 
 export interface Props {
   id?: string;
   className?: string;
   stars?: number;
-  size?: number;
+  size?: SizeProp;
 }
 
-const StarRating = ({
+export const StarRating = ({
   id,
   className,
   stars = 1,
-  size = 1,
-}: Props): JSX.Element => {
-  const classList = classNames(className, 'flex theme-local');
+  size = '2x',
+}: Props) => {
+  const classList = classNames(className, 'flex');
 
-  const getStars = (): JSX.Element[] => {
+  const getStars = () => {
     const starsArr = [];
     for (let i = 0; i < stars; i++) {
       starsArr.push(
         <Icon
           key={`checked_star_${i + 0}`}
           id={`checked-${i}`}
-          className='checked'
-          type="star"
+          icon={faStar as IconProp}
           size={size}
           colour="gold"
-          bgColour="white"
-          hoverColour="gold"
-          hoverBgColour="white"
         />,
-      );
+      )
     }
     return starsArr;
-  };
+  }
 
-  const getStarsChecked = (): JSX.Element[] => {
+  const getStarsChecked = () => {
     const starsArr = [];
     for (let i = 0; i < 5 - stars; i++) {
       starsArr.push(
         <Icon
           key={`unchecked_star_${i + 0}`}
           id={`unchecked-${i}`}
-          className='opacity-30 unchecked gold'
-          type="star"
+          icon={faStar as IconProp}
           size={size}
-          colour="gold"
-          bgColour="white"
-          hoverColour="gold"
-          hoverBgColour="white"
         />,
-      );
+      )
     }
     return starsArr;
-  };
+  }
 
-  const getAllStars = (): JSX.Element[] => {
+  const getAllStars = () => {
     const starArray = [...getStars(), ...getStarsChecked()];
     return starArray;
-  };
+  }
 
   return (
     <div id={id} className={classList}>
       {getAllStars()}
     </div>
   );
-};
-
-export default StarRating;
+}

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

@@ -1,12 +1,11 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, type StoryObj } from '@storybook/react';
 import { idAndClassName } from '@utils/controls';
 
-import Testimonial from '.';
+import { Testimonial } from '.';
 
 const meta = {
   title: 'Components/Testimonial',
   component: Testimonial,
-  parameters: {},
   argTypes: {
     ...idAndClassName,
     text: {
@@ -81,8 +80,8 @@ const meta = {
           summary: 'object',
         },
         defaultValue: { summary: 'undefined' },
-      },
-    },
+      }
+    }
   },
   args: {
     imageProps: {
@@ -100,11 +99,11 @@ const meta = {
     date: 'Date',
     companyName: 'Company Name',
     text: 'This is some text',
-  },
-};
+  }
+}
 
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof Testimonial>;
 
 export const Default: Story = {};

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

@@ -1,11 +1,7 @@
-import React from 'react';
-
-import Container from '@components/Container';
-import Image, { type Props as imageProps } from '@components/Image';
+import { Container } from '@components/Container';
+import { Image, type Props as imageProps } from '@components/Image';
 import classNames from 'classnames';
 
-
-
 export interface Props {
   id?: string;
   className?: string;
@@ -20,7 +16,7 @@ export interface Props {
   authorsPosition?: string;
 }
 
-const Testimonial = ({
+export const Testimonial = ({
   id,
   className,
   text,
@@ -32,30 +28,28 @@ const Testimonial = ({
   positionEndDate,
   authorsName,
   authorsPosition,
-}: Props): JSX.Element => {
-  const classList = classNames(className, style.classList, 'theme-local');
+}: Props) => {
+  const classList = classNames(className, 'text-center');
   const src = imageProps?.src !== undefined ? imageProps?.src : '';
 
   return (
     <div id={id} className={classList}>
       <Container withPadding>
-        <div className={style.imageWrapper}>
+        <div className="mx-auto">
           <Image src={src} {...imageProps} />
         </div>
         <div>
-          <h3 className={style.companyName}>{companyName}</h3>
-          <p className={style.position}>{position}</p>
-          <p className={style.dates}>
+          <h3 className="text-lg font-medium">{companyName}</h3>
+          <p className="pt-2 text-md font-regular">{position}</p>
+          <p className="text-sm font-regular">
             {positionStartDate} - {positionEndDate}
           </p>
-          <p className={style.text}>{text}</p>
-          <p className={style.author}>
+          <p className="py-4 text-md font-light">{text}</p>
+          <p className="text-sm font-medium">
             {authorsName} - {authorsPosition}: {date}
           </p>
         </div>
       </Container>
     </div>
   );
-};
-
-export default Testimonial;
+}

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

@@ -1,9 +1,9 @@
-import Greeting from '@components/Greeting';
+import { Greeting } from '@components/Greeting';
 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 TextAndTitle from '.';
+import { TextAndTitle } from '.';
 
 const meta = {
   title: 'Components/Text And Title',
@@ -20,7 +20,7 @@ const meta = {
           summary: 'function',
         },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     bgColour: {
       type: { name: 'string', required: false },
@@ -31,7 +31,7 @@ const meta = {
       },
       defaultValue: 'primary',
       control: 'select',
-    },
+    }
   },
   args: {
     title: 'This is a title',
@@ -60,11 +60,12 @@ const meta = {
     cancelButtonProps: {
       className: 'mt-4 ml-4',
       children: 'Cancel',
-    },
-  },
+    }
+  }
 };
+
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof TextAndTitle>;
 
 export const Default: Story = {};