trepur_components 2.3.7 → 2.3.8

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

@@ -1,13 +1,9 @@
-import React from 'react';
-
-import Column from '@components/Column';
-import ComponentWrapper from '@components/ComponentWrapper';
-import Image, { type Props as imageProps } from '@components/Image';
+import { Column } from '@components/Column';
+import { ComponentWrapper } from '@components/ComponentWrapper';
+import { Image, type Props as imageProps } from '@components/Image';
 import { type Colours } from '@utils/controls';
 import classNames from 'classnames';
 
-
-
 export interface Props {
   id?: string;
   className?: string;
@@ -17,15 +13,15 @@ export interface Props {
   bgColour: Colours;
 }
 
-const Proficiencies = ({
+export const Proficiencies = ({
   id,
   className,
   title,
   description,
   proficiencies,
   bgColour,
-}: Props): JSX.Element => {
-  const classList = classNames(className, style.classList, 'theme-local');
+}: Props) => {
+  const classList = classNames(className, 'mx-auto w-full');
 
   return (
     <ComponentWrapper
@@ -35,18 +31,12 @@ const Proficiencies = ({
       description={description}
       bgColour={bgColour}
     >
-      <div className={style.columnWrapper}>
+      <div className="flex flex-wrap">
         {proficiencies.map((proficiency, i) => {
           return (
-            <Column
-              key={`stat_${i}`}
-              className={style.column}
-              lg={2}
-              md={2}
-              sm={4}
-            >
+            <Column key={`stat_${i}`} className="pb-4" lg={2} md={2} sm={4}>
               <Image
-                className={style.image}
+                className="mx-auto md:mx-0"
                 src={proficiency.src}
                 overlayText={proficiency.overlayText}
                 width={4}
@@ -58,6 +48,4 @@ const Proficiencies = ({
       </div>
     </ComponentWrapper>
   );
-};
-
-export default Proficiencies;
+}

package/{archive → src/components}/Profile/Profile.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 Profile from '.';
+import { Profile } from '.';
 
 const meta = {
   title: 'Components/Profile',
@@ -17,7 +17,7 @@ const meta = {
           summary: 'object',
         },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     alignment: {
       description: '',
@@ -25,25 +25,25 @@ const meta = {
       options: ['left', 'center', 'right'],
       table: {
         category: '',
-      },
+      }
     },
     profileLinks: {
       description: '',
       control: 'text',
       table: {
         category: '',
-      },
-    },
+      }
+    }
   },
   args: {
     imageProps: {
       src: 'https://picsum.photos/200/200',
-    },
-  },
+    }
+  }
 };
 
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof Profile>;
 
 export const Default: Story = {};

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

@@ -1,10 +1,8 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 
-import Image, { type Props as imageProps } from '@components/Image';
+import { Image, type Props as imageProps } from '@components/Image';
 import classNames from 'classnames';
 
-
-
 export interface Props {
   id?: string;
   className?: string;
@@ -17,7 +15,7 @@ export interface Props {
   imageProps?: imageProps;
 }
 
-const Profile = ({
+export const Profile = ({
   id,
   className,
   profileLinks,
@@ -27,41 +25,45 @@ const Profile = ({
   rounded,
   bordered,
   imageProps,
-}: Props): JSX.Element => {
+}: Props) => {
   const [profileState, setProfileState] = useState(false);
 
   const profileAlignment = classNames({
-    [style.floatRight]: alignment === 'right',
-    [style.floatLeft]: alignment === 'left',
-  });
+    'float-right': alignment === 'right',
+    'float-left': alignment === 'left',
+  })
 
   const dropdownAlignement = classNames({
-    [style.dropdownRight]: alignment === 'right',
-    [style.dropdownLeft]: alignment === 'left',
-  });
+    '-mr-16 mt-16': alignment === 'right',
+    ' -ml-16 mt-16': alignment === 'left',
+  })
 
   const dropdownTextAlignement = classNames({
-    [style.center]: alignment !== 'right' && alignment !== 'left',
-  });
+    'text-center': alignment !== 'right' && alignment !== 'left',
+  })
 
   const classList = classNames(
     {
-      [style.rounded]: rounded,
-      [style.bordered]: bordered,
+      'rounded-full': rounded,
+      border: bordered,
     },
     className,
-    style.classList,
     `h-${imageHeight} w-${imageWidth}`,
-    'theme-local',
-  );
+    'object-cover text-center',
+  )
 
   const src = imageProps?.src !== undefined ? imageProps.src : '';
   return (
     <>
       <div id={id} className={classList}>
-        <div className={classNames(style.buttonWrapper, profileAlignment)}>
+        <div
+          className={classNames(
+            'inset-y-0 hidden  sm:inline-flex',
+            profileAlignment,
+          )}
+        >
           <button
-            className={style.buttonClassList}
+            className="flex rounded-full"
             onClick={() => {
               setProfileState(!profileState);
             }}
@@ -74,7 +76,7 @@ const Profile = ({
         <div className={dropdownTextAlignement}>
           <div
             className={classNames(
-              style.linksWrapper,
+              'z-10 w-48 shadow-lg sm:inline-block',
               profileAlignment,
               dropdownAlignement,
             )}
@@ -84,7 +86,7 @@ const Profile = ({
                 <a
                   key={`profile_link_${i + 1}`}
                   href={link.link}
-                  className={style.linkClassList}
+                  className="block border-b px-4 py-2 text-sm font-bold"
                   role="menuitem"
                   // tabindex="-1"
                   id={`user-menu-item-${i + 1}`}
@@ -98,6 +100,4 @@ const Profile = ({
       )}
     </>
   );
-};
-
-export default Profile;
+}

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

@@ -1,8 +1,8 @@
-import CardWithTopImage from '@components/CardWithTopImage';
-import { Meta, StoryObj } from '@storybook/react';
+import { CardWithTopImage } from '@components/CardWithTopImage';
+import { Meta, type StoryObj } from '@storybook/react';
 import { idAndClassName } from '@utils/controls';
 
-import Row from '.';
+import { Row } from '.';
 
 const cardChild = (
   <CardWithTopImage
@@ -39,15 +39,15 @@ const meta = {
           summary: 'Array',
         },
         defaultValue: { summary: 'undefined' },
-      },
-    },
+      }
+    }
   },
   args: {
     children: cardChild,
-  },
-};
+  }
+}
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof Row>;
 
 export const Default: Story = {};

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

@@ -1,23 +1,17 @@
-import React from 'react';
-
 import classNames from 'classnames';
 
-
-
 export interface Props {
   id?: string;
   className?: string;
   children: any;
 }
 
-const Row = ({ id, className, children }: Props): JSX.Element => {
-  const classList = classNames(className, style.classList, 'theme-local');
+export const Row = ({ id, className, children }: Props) => {
+  const classList = classNames(className, 'flex flex-wrap');
 
   return (
     <div id={id} className={classList}>
       {children}
     </div>
   );
-};
-
-export default Row;
+}

package/{archive → src/components}/Search/Search.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 Search from '.';
+import { Search } from '.';
 
 const meta = {
   title: 'Components/Search',
@@ -15,7 +15,7 @@ const meta = {
       control: 'text',
       table: {
         category: '',
-      },
+      }
     },
     rightIconProps: {
       description:
@@ -23,7 +23,7 @@ const meta = {
       control: 'text',
       table: {
         category: '',
-      },
+      }
     },
     placeholder: {
       description:
@@ -31,7 +31,7 @@ const meta = {
       control: 'text',
       table: {
         category: '',
-      },
+      }
     },
     text: {
       description:
@@ -39,8 +39,8 @@ const meta = {
       control: 'text',
       table: {
         category: '',
-      },
-    },
+      }
+    }
   },
   args: {
     placeholder: 'search...',
@@ -53,11 +53,11 @@ const meta = {
       type: 'heart',
       className: 'absolute mt-2 right-3 flex items-center',
       bgColour: 'white',
-    },
-  },
+    }
+  }
 };
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof Search>;
 
 export const Default: Story = {};

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

@@ -1,21 +1,19 @@
-import React, { ChangeEventHandler } from 'react';
+import { type ChangeEventHandler } from 'react';
 
-import Icon, { type Props as iconProps } from '@components/Icon';
+import { Icon, type IconProps } from '@components/Icon';
 import classNames from 'classnames';
 
-
-
 export interface Props {
   id?: string;
   className?: string;
   onChange?: (val: string | number) => void;
   placeholder?: string;
   text?: string;
-  leftIconProps?: iconProps;
-  rightIconProps?: iconProps;
+  leftIconProps?: IconProps;
+  rightIconProps?: IconProps;
 }
 
-const Search = ({
+export const Search = ({
   id,
   className,
   onChange,
@@ -23,16 +21,16 @@ const Search = ({
   text,
   leftIconProps,
   rightIconProps,
-}: Props): JSX.Element => {
-  const classList = classNames(className, style.classList, 'theme-local');
+}: Props) => {
+  const classList = classNames(className, 'flex');
 
   const inputClasses = classNames(
     {
-      [style.leftIcon]: leftIconProps !== undefined,
-      [style.noLeftIcon]: leftIconProps === undefined,
+      'pl-9': leftIconProps !== undefined,
+      'pl-2': leftIconProps === undefined,
     },
-    style.inputClassList,
-  );
+    'w-full rounded-md border-2 py-2 pr-9',
+  )
 
   const onChangeFunc: ChangeEventHandler<HTMLInputElement> | undefined =
     onChange != null
@@ -45,11 +43,11 @@ const Search = ({
     <div id={id} className={classList}>
       <div>
         {text !== undefined && (
-          <h2 className={classNames(style.text, 'font-base-lg')}>{text}</h2>
+          <h2 className="font-base-lg py-2 pr-4">{text}</h2>
         )}
       </div>
       <div>
-        <div className={style.inputWrapper}>
+        <div className="relative flex w-full">
           {leftIconProps !== undefined && <Icon {...leftIconProps} />}
           <input
             className={inputClasses}
@@ -63,6 +61,4 @@ const Search = ({
       </div>
     </div>
   );
-};
-
-export default Search;
+}

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

@@ -1,8 +1,7 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Select } from './';
+import { Meta, type StoryObj } from '@storybook/react';
 import { idAndClassName } from '@utils/controls';
 
-import Select from '.';
-
 const meta = {
   title: 'Components/Select',
   component: Select,
@@ -15,8 +14,8 @@ const meta = {
       control: 'text',
       table: {
         category: '',
-      },
-    },
+      }
+    }
   },
   args: {
     label: 'This is a label',
@@ -45,12 +44,12 @@ const meta = {
       'Option 2',
       'Option 3',
       'Option 4',
-    ],
-  },
+    ]
+  }
 };
 
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof Select>;
 
 export const Default: Story = {};

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

@@ -1,11 +1,11 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 
-import Icon from '@components/Icon';
+import { Icon } from '@components/Icon';
+import { faChevronDown } from '@fortawesome/fontawesome-free-solid';
+import { type IconProp } from '@fortawesome/fontawesome-svg-core';
 import classNames from 'classnames';
 
-
-
-interface Props {
+export interface SelectProps {
   id?: string;
   className?: string;
   options: string[];
@@ -16,7 +16,7 @@ interface Props {
   required?: boolean;
 }
 
-const Select: React.FC<Props> = ({
+export const Select = ({
   id,
   className,
   options,
@@ -25,36 +25,35 @@ const Select: React.FC<Props> = ({
   onClick,
   required = false,
   fullWidth = false,
-}) => {
+}: SelectProps) => {
   const [showDropDown, setShowDropDown] = useState(false);
   const [activeValue, setActiveValue] = useState(
     value !== undefined ? value : options?.[0],
-  );
+  )
 
   const handleOptionClick = (e: any): void => {
     onClick(e.target.textContent);
     setActiveValue(e.target.textContent);
     setShowDropDown(false);
-  };
+  }
 
   const fullWidthClasses = classNames({
-    [style.fullWidth]: fullWidth,
-    [style.notFullWidth]: !fullWidth,
-  });
+    'w-full': fullWidth,
+    'sm:w-72': !fullWidth,
+  })
 
   const headerClassList = classNames(
     fullWidthClasses,
-    style.classList,
     className,
-    'theme-local',
-  );
+    'w-full rounded-xl bg-white shadow drop-shadow flex cursor-pointer flex-row justify-between px-4',
+  )
 
   const dropdownClassList = classNames(
     fullWidthClasses,
-    style.optionList,
-    'theme-local',
-  );
-  const dropdownItemClassList = classNames(style.option, 'theme-local');
+    'absolute w-full bg-white mt-2 rounded-2xl py-4 shadow-xl border border-lightest-grey h-64 overflow-scroll',
+  )
+  const dropdownItemClassList =
+    'bg-white text-ink hover:bg-lightest-grey hover:cursor-pointer px-4 py-2';
 
   return (
     <>
@@ -65,24 +64,19 @@ const Select: React.FC<Props> = ({
           setShowDropDown(!showDropDown);
         }}
       >
-        <div className={style.labelContainer}>
-          <div className={style.labelWrapper}>
-            <p className={style.label}>{label}</p>
-            {required && <p className={style.required}>&nbsp;*</p>}
+        <div className="flex flex-col">
+          <div className="absolute mt-2 flex bg-white text-xs font-thin">
+            <p>{label}</p>
+            {required && <p className="font-semiBold text-error">&nbsp;*</p>}
           </div>
-          <p className={style.value}>{activeValue}</p>
+          <p className="flex justify-between rounded-xl border-ink bg-white pb-1 pt-6 text-ink">
+            {activeValue}
+          </p>
         </div>
-        <Icon
-          className={style.icon}
-          bgColour="white"
-          colour="ink"
-          hoverBgColour="white"
-          hoverColour="ink"
-          type="chevron-down"
-        />
+        <Icon colour="ink" icon={faChevronDown as IconProp} />
       </div>
       {showDropDown && (
-        <div className={classNames(style.dropdownWrapper, fullWidthClasses)}>
+        <div className={classNames('relative z-20', fullWidthClasses)}>
           <ul className={dropdownClassList}>
             {options?.map((option: string, i) => (
               <li
@@ -101,6 +95,4 @@ const Select: React.FC<Props> = ({
       )}
     </>
   );
-};
-
-export default Select;
+}

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

@@ -1,8 +1,9 @@
+import { faChevronDown } 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 Showcase from '.';
+import { Showcase } from '.';
 
 const meta = {
   title: 'Components/Showcase',
@@ -17,14 +18,14 @@ const meta = {
     bgColour: 'white',
     size: 'large',
     iconProps: {
-      type: 'chevron-down',
+      icon: faChevronDown,
       onClick: action('Icon click'),
-    },
-  },
+    }
+  }
 };
 
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof Showcase>;
 
 export const Default: Story = {};

package/src/components/Showcase/index.tsx

@@ -0,0 +1,69 @@
+import { Avatar } from '@components/Avatar';
+import { ComponentWrapper } from '@components/ComponentWrapper';
+import { Container } from '@components/Container';
+import { Icon, type IconProps } from '@components/Icon';
+import { type Colours } from '@utils/controls';
+import classNames from 'classnames';
+
+export interface Props {
+  id: string;
+  className?: string;
+  title: string;
+  subTitle: string;
+  description: string;
+  bgColour?: Colours;
+  image: string;
+  size?: 'small' | 'medium' | 'large';
+  iconProps?: IconProps;
+}
+
+export const Showcase = ({
+  id,
+  className,
+  title,
+  subTitle,
+  description,
+  bgColour,
+  size = 'large',
+  iconProps,
+}: Props) => {
+  const classList = className;
+
+  const containerSize = classNames(
+    {
+      'h-56': size === 'small',
+      'h-96': size === 'medium',
+      'min-h-[calc(100vh-176px)]': size === 'large',
+    },
+    'flex flex-wrap text-center md:flex-nowrap md:text-left',
+  )
+
+  return (
+    <ComponentWrapper id={id} className={classList} bgColour={bgColour}>
+      <Container className={containerSize}>
+        <div className="m-auto w-full md:w-2/3 md:pl-16 md:pr-4 lg:pl-32 lg:pr-8 xl:pl-64">
+          <h2 className="text-lg font-bold leading-tight text-primary md:text-xxl">
+            {title}
+          </h2>
+          <h2 className="text-lg font-bold leading-tight text-black md:text-xxl">
+            {subTitle}
+          </h2>
+          <p className="pt-4 text-sm text-black md:text-md">{description}</p>
+        </div>
+        <div className="m-auto flex w-full justify-center md:w-1/3 md:pb-20">
+          <Avatar />
+        </div>
+      </Container>
+      {iconProps?.icon && (
+        <div className="flex justify-center">
+          <Icon
+            size="2x"
+            {...iconProps}
+            icon={iconProps.icon}
+            onClick={iconProps.onClick}
+          />
+        </div>
+      )}
+    </ComponentWrapper>
+  );
+}