trepur_components 2.3.7 → 2.3.8

package/{archive → src/components}/NavOld/NavOld.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 NavOld from '.';
+import { NavOld } from '.';
 
 const navLinks = [
   { title: 'Home', href: '/', isActive: true },
   { title: 'Resume', href: '/', isActive: false },
   { title: 'Contact Me', href: '/', isActive: false },
-];
+]
 
 const meta = {
   title: 'Components/Nav',
@@ -20,8 +20,8 @@ const meta = {
         {
           name: 'grey',
           value: '#f3f3f3',
-        },
-      ],
+        }
+      ]
     },
   },
   argTypes: {
@@ -30,7 +30,7 @@ const meta = {
       description: 'An array of nav links to display in the component',
       table: {
         type: { summary: 'array' },
-      },
+      }
     },
     withMobileSideBar: {
       type: { name: 'boolean', required: false },
@@ -63,56 +63,56 @@ const meta = {
       description: 'The logo to display on the component',
       table: {
         type: { summary: 'string' },
-      },
+      }
     },
     logoDarkTheme: {
       type: { name: 'string', required: false },
       description: 'An optional dark them logo for dark mode',
       table: {
         type: { summary: 'string' },
-      },
+      }
     },
     mobileLogo: {
       type: { name: 'string', required: false },
       description: 'An optional mobile logo for mobile devices',
       table: {
         type: { summary: 'string' },
-      },
+      }
     },
     mobileLogoDarkTheme: {
       type: { name: 'string', required: false },
       description: 'An optional dark them mobile logo for mobile dark mode',
       table: {
         type: { summary: 'string' },
-      },
+      }
     },
     logoLink: {
       type: { name: 'string', required: false },
       description: 'The link to navigate to when clicking on the logo',
       table: {
         type: { summary: 'string' },
-      },
+      }
     },
     mobileClasses: {
       type: { name: 'string', required: false },
       description: '',
       table: {
         type: { summary: 'string' },
-      },
+      }
     },
     fixedTop: {
       type: { name: 'boolean', required: false },
       description: 'Sets the header to fix at the top when true',
       table: {
         type: { summary: 'boolean' },
-      },
+      }
     },
     profileMenuItems: {
       type: { name: 'array', required: false },
       description: 'toggles the profile option',
       table: {
         type: { summary: 'array' },
-      },
+      }
     },
     getNavStatus: {
       type: { name: 'boolean', required: false },
@@ -120,7 +120,7 @@ const meta = {
         'Returns the status of the header, opened or closed in mobile',
       table: {
         type: { summary: 'function' },
-      },
+      }
     },
     variant: {
       type: { name: 'string', required: false },
@@ -159,7 +159,7 @@ const meta = {
         type: { summary: 'select' },
       },
       defaultValue: 'primary',
-    },
+    }
   },
   args: {
     logoLink: '/',
@@ -168,7 +168,7 @@ const meta = {
     logoDarkTheme: 'https://picsum.photos/201/201',
     mobileLogo: 'https://picsum.photos/201/200',
     mobileLogoDarkTheme: 'https://picsum.photos/200/201',
-    getNavStatus: (asSideBar, status) => {
+    getNavStatus: (asSideBar: any, status: any) => {
       action('nav status: [side bar, open]')(asSideBar, status);
     },
     withStickyNavShadow: true,
@@ -181,13 +181,13 @@ const meta = {
         { name: 'Whats on', href: '/whatson' },
         { name: 'Help', href: '/help' },
         { name: 'Log Out', href: '/logout' },
-      ],
-    },
+      ]
+    }
   },
-};
+}
 
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof NavOld>;
 
 export const Default: Story = {};

package/{archive → src/components}/NavOld/StickyNav.tsx

@@ -1,13 +1,11 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 
-import Container from '@components/Container';
-import HamburgerIcon from '@components/HamburgerIcon';
-import Image from '@components/Image';
-import NavItem, { type Props as navItemProps } from '@components/NavItem';
+import { Container } from '@components/Container';
+import { HamburgerIcon } from '@components/HamburgerIcon';
+import { Image } from '@components/Image';
+import { NavItem, type Props as navItemProps } from '@components/NavItem';
 import classNames from 'classnames';
 
-
-
 export interface Props {
   id?: string;
   className?: string;
@@ -28,7 +26,7 @@ export interface Props {
   withShadow?: boolean;
 }
 
-const StickyNav = ({
+export const StickyNav = ({
   id,
   className,
   navLinks,
@@ -47,41 +45,39 @@ const StickyNav = ({
   visible = false,
   tabindex = 0,
   withShadow = false,
-}: Props): JSX.Element => {
+}: Props) => {
   const [showSideNav, setShowSideNav] = useState(false);
   const [showDropdownNav, setShowDropdownNav] = useState(false);
 
-  const colours = [style[variant]];
-
   const classList = classNames(
     {
-      [style.showStickyNav]: visible,
-      [style.stickyNavDropShadow]: withShadow,
+      'opacity-100 transition-all duration-1000': visible,
+      'drop-shadow-lg': withShadow,
     },
     className,
-    colours,
-    style.stickyNav,
-    'theme-local',
-  );
+    'fixed top-0 z-40 w-full overflow-hidden opacity-0 transition-all duration-500',
+  )
 
   const sideNavClasses = classNames(
     {
-      [style.sideBarCollapsed]: !showSideNav,
-      [style.sideBarExpanded]: showSideNav,
+      'w-0': !showSideNav,
+      'h-screen w-full sm:w-1/3': showSideNav,
     },
-    style.sideNavClassList,
-    colours,
-  );
+    'fixed z-50 h-full overflow-hidden duration-700 md:hidden',
+  )
 
   const dropdownNavClasses = classNames(
     {
-      [style.dropDownCollapsed]: !showDropdownNav,
+      'h-0': !showDropdownNav,
       [`h-${dropdownNavHeight}`]: showDropdownNav,
     },
-    style.dropDownNavClassList,
-  );
+    'z-50 overflow-hidden md:hidden',
+  )
 
-  const mobileContainer = classNames(style.mobileContainer, mobileClasses);
+  const mobileContainer = classNames(
+    'flex items-center md:hidden',
+    mobileClasses,
+  )
 
   const toggleMenu = (): void => {
     getNavStatus?.(withMobileSideBar, !showSideNav);
@@ -92,47 +88,49 @@ const StickyNav = ({
     }
   };
 
-  const themeString: string = 'theme-local';
   return (
     <div id={`sticky_${id ?? 'nav'}`} className={classList}>
       {/* Mobile Nav */}
       <Container withPadding className={mobileContainer}>
-        <div className={style.collapseBtnWrapper}>
+        <div className="absolute inset-y-0 left-8 top-4">
           <HamburgerIcon onClick={toggleMenu} variant={variant} />
         </div>
-        <a className={style.mobileLogo} href={logoLink} tabIndex={tabindex}>
-          <Image
-            src={mobileLogo}
-            // title={`${theme.split('-')[1]}-sticky-mobile-logo`}
-            // altText={`${theme.split('-')[1]}-sticky-mobile-logo`}
-            height={5}
-            width={5}
-          />
+        <a
+          className="mx-auto my-2 focus:border-2 focus:border-white"
+          href={logoLink}
+          tabIndex={tabindex}
+        >
+          <Image src={mobileLogo} height={5} width={5} />
         </a>
       </Container>
 
       {/* Desktop Nav */}
-      <Container withPadding className={style.desktopNav}>
-        <div className={style.logoClassList}>
-          <a className={style.desktopLogo} href={logoLink} tabIndex={tabindex}>
+      <Container
+        withPadding
+        className="relative z-50 flex items-center justify-between"
+      >
+        <div className="my-2 hidden w-96 md:flex">
+          <a
+            className="focus:border-2 focus:border-white"
+            href={logoLink}
+            tabIndex={tabindex}
+          >
             <Image
               src={logo}
-              title={`${themeString?.split('-')[1] ?? 'a'}-sticky-desktop-logo`}
-              altText={`${
-                themeString?.split('-')[1] ?? 'a'
-              }-sticky-desktop-logo`}
+              title="sticky-desktop-logo"
+              altText="sticky-desktop-logo"
               height={5}
               width={5}
             />
           </a>
         </div>
-        <nav className={style.navItems}>
+        <nav className="hidden w-96 justify-center py-6 md:flex md:pr-16 lg:pr-0">
           {navLinks?.map((navLink, i) => {
             return (
               <NavItem
                 key={`desktop_nav_item_${i}`}
                 {...navLink}
-                className={style.navItemPadding}
+                className="mx-auto w-24 text-center"
                 bordered={false}
                 rounded={false}
                 underlineOnHover
@@ -153,7 +151,7 @@ const StickyNav = ({
               <NavItem
                 key={`sidebar_nav_item_${i}`}
                 {...navLink}
-                className={classNames(colours, style.mobileSideBarMenuNavItems)}
+                className="pl-2 pt-4 focus:border-2 focus:border-white"
                 bordered={false}
                 rounded={false}
                 underlineOnHover
@@ -166,13 +164,13 @@ const StickyNav = ({
       )}
       {withMobileDropdown && (
         <div className={dropdownNavClasses}>
-          <div className={style.mobileDropDownMenu}>
+          <div className="space-y-1 pb-3 pt-2">
             {navLinks?.map((navLink, i) => {
               return (
                 <NavItem
                   key={`dropdown_nav_item_${i}`}
                   {...navLink}
-                  className={style.mobileDropDownMenuNavItems}
+                  className="pl-8 pt-2"
                   bordered={false}
                   rounded={false}
                   underlineOnHover
@@ -186,6 +184,4 @@ const StickyNav = ({
       )}
     </div>
   );
-};
-
-export default StickyNav;
+}

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

@@ -1,17 +1,17 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
-import Container from '@components/Container';
-import HamburgerIcon from '@components/HamburgerIcon';
-import HorizontalLine from '@components/HorizontalLine';
-import Image from '@components/Image';
-import MenuButton, {
+import { Container } from '@components/Container';
+import { HamburgerIcon } from '@components/HamburgerIcon';
+import { HorizontalLine } from '@components/HorizontalLine';
+import { Image } from '@components/Image';
+import {
+  MenuButton,
   type Props as MenuButtonProps,
 } from '@components/MenuButton';
-import NavItem, { type Props as navItemProps } from '@components/NavItem';
+import { NavItem, type Props as navItemProps } from '@components/NavItem';
 import classNames from 'classnames';
 
-import StickyNav from './StickyNav';
-
+import { StickyNav } from './StickyNav';
 
 export interface Props {
   id?: string;
@@ -36,7 +36,7 @@ export interface Props {
   profileMenu?: MenuButtonProps;
 }
 
-const NavOld = ({
+export const NavOld = ({
   id,
   className,
   navLinks,
@@ -57,63 +57,59 @@ const NavOld = ({
   withStickyNavShadow = false,
   withDesktopShadow = false,
   profileMenu,
-}: Props): JSX.Element => {
+}: Props) => {
   const [showSideNav, setShowSideNav] = useState(false);
   const [showDropdownNav, setShowDropdownNav] = useState(false);
   const [showStickyNav, setShowStickyNav] = useState(false);
   const [navOpen, setNavOpen] = useState(false);
-  const colours = [style[variant]];
+
   const classList = classNames(
     {
       // [style.desktopNavDropShadow]: withDesktopShadow && !showStickyNav && !showSideNav
     },
     className,
-    style.nav,
-    'theme-local',
-    colours,
-  );
+  )
 
   const stickyClassList = classNames(
     {
-      [style.showStickyNav]: showStickyNav,
+      'opacity-100 transition-all duration-1000': showStickyNav,
     },
-    style.stickyNav,
-  );
+    'fixed top-0 z-40 w-full overflow-hidden opacity-0 transition-all duration-500',
+  )
 
   const isSticky = (): void => {
     window.scrollY >= 80 ? setShowStickyNav(true) : setShowStickyNav(false);
-  };
+  }
 
   useEffect(() => {
     window.addEventListener('scroll', isSticky);
     return () => {
       window.removeEventListener('scroll', isSticky);
-    };
+    }
   });
 
   const sideNavClasses = classNames(
     {
-      [style.sideBarCollapsed]: !showSideNav,
-      [style.sideBarExpanded]: showSideNav,
+      ' w-0': !showSideNav,
+      'h-screen w-full sm:w-1/3': showSideNav,
     },
-    style.sideNavClassList,
-    colours,
-  );
+    'fixed z-50 h-full overflow-hidden duration-700 md:hidden',
+  )
 
   const dropdownNavClasses = classNames(
     {
-      [style.dropDownCollapsed]: !showDropdownNav,
-      [style.dropDownExpanded]: showDropdownNav,
+      'h-0': !showDropdownNav,
+      '': showDropdownNav,
       [`h-${dropdownNavHeight}`]: showDropdownNav,
     },
-    style.dropDownNavClassList,
-  );
+    'z-50 overflow-hidden md:hidden',
+  )
 
   const mobileContainer = classNames(
-    style.mobileContainer,
-    style.mobileNav,
+    'flex items-center md:hidden',
+    'relative z-50',
     mobileClasses,
-  );
+  )
 
   const toggleMenu = (): void => {
     setNavOpen(!navOpen);
@@ -128,49 +124,48 @@ const NavOld = ({
   };
 
   return (
-    <div className={style.wrapperClasses}>
+    <div className="flex min-h-screen flex-col">
       <div
         className={classNames(
-          style.defaultNavClasses,
-          [navOpen] && style.navOpen,
-          [!navOpen] && style.navClosed,
+          ' fixed bottom-0 left-0 right-0 top-0 z-50 h-full w-full bg-primary transition-opacity duration-700',
+          [navOpen] && 'visible opacity-100',
+          [!navOpen] && 'invisible opacity-0',
         )}
       />
       <header id={id} className={classList}>
         {/* Mobile Nav */}
         <Container withPadding className={mobileContainer}>
           {(withMobileSideBar || withMobileDropdown) && (
-            <div className={style.collapseBtnWrapper}>
+            <div className="absolute inset-y-0 left-8 top-4">
               <HamburgerIcon onClick={toggleMenu} variant={variant} />
             </div>
           )}
-          <a
-            className={style.mobileLogo}
-            href={logoLink}
-            aria-label="mobile-logo"
-          >
+          <a className="mx-auto my-2" href={logoLink} aria-label="mobile-logo">
             <Image src={mobileLogo} height={5} width={5} />
           </a>
         </Container>
 
         {/* Desktop Nav */}
-        <Container withPadding className={style.desktopNav}>
-          <div className={style.logoClassList}>
+        <Container
+          withPadding
+          className="relative z-50 flex items-center justify-between"
+        >
+          <div className="my-2 hidden w-96 md:flex">
             <a
-              className={style.desktopLogo}
+              className="border-2 border-white"
               href={logoLink}
               aria-label="desktop-logo"
             >
               <Image src={logo} height={5} width={5} />
             </a>
           </div>
-          <nav className={style.navItems}>
+          <nav className="hidden w-96 justify-center py-6 md:flex md:pr-16 lg:pr-0">
             {navLinks?.map((navLink, i) => {
               return (
                 <NavItem
                   key={`desktop_nav_item_${i}`}
                   {...navLink}
-                  className={style.navItemPadding}
+                  className="mx-auto w-24 text-center"
                   bordered={false}
                   rounded={false}
                   underlineOnHover
@@ -180,12 +175,12 @@ const NavOld = ({
             })}
           </nav>
           {!profileMenu?.menuItems !== undefined && (
-            <div className={style.textClassList}>
+            <div className="hidden w-96 flex-row-reverse lg:flex">
               {text !== undefined && (
                 <NavItem
                   title={text}
                   href={textLink}
-                  className={style.navItemPadding}
+                  className="mx-auto w-24 text-center"
                   underlineOnHover
                   variant={variant}
                 />
@@ -193,7 +188,7 @@ const NavOld = ({
             </div>
           )}
           {profileMenu?.menuItems && (
-            <div className={style.profileClassList}>
+            <div className="hidden w-96 flex-row-reverse md:flex">
               <MenuButton {...profileMenu} menuItems={profileMenu?.menuItems} />
             </div>
           )}
@@ -209,8 +204,7 @@ const NavOld = ({
                   <NavItem
                     {...navLink}
                     className={classNames(
-                      colours,
-                      style.mobileSideBarMenuNavItems,
+                      'pl-2 pt-4 focus:border-2 focus:border-white',
                       'justify-center pb-4 pt-2',
                     )}
                     bordered={false}
@@ -230,13 +224,13 @@ const NavOld = ({
         )}
         {withMobileDropdown && (
           <div className={dropdownNavClasses}>
-            <div className={style.mobileDropDownMenu}>
+            <div className="space-y-1 pb-3 pt-2">
               {navLinks?.map((navLink, i) => {
                 return (
                   <NavItem
                     key={`dropdown_nav_item_${i}`}
                     {...navLink}
-                    className={style.mobileDropDownMenuNavItems}
+                    className="pl-8 pt-2"
                     bordered={false}
                     rounded={false}
                     underlineOnHover
@@ -268,6 +262,4 @@ const NavOld = ({
       </header>
     </div>
   );
-};
-
-export default NavOld;
+}

package/{archive → src/components}/NavTwo/Dropdown.tsx

@@ -1,9 +1,5 @@
-import React from 'react';
-
 import classNames from 'classnames';
 
-
-
 export interface Props {
   id?: string;
   className?: string;
@@ -16,20 +12,19 @@ export const Dropdown = ({
   className,
   children,
   visible = false,
-}: Props): JSX.Element => {
+}: Props) => {
   const dropdownNavClasses = classNames(
     {
-      [style.dropDownCollapsed]: !visible,
-      [style.dropDownExpanded]: visible,
-      [`h-auto`]: visible,
+      'hidden h-0': !visible,
+      'h-auto': visible,
     },
-    style.dropDownNavClassList,
+    'z-50 overflow-hidden md:hidden',
     className,
-  );
+  )
 
   return (
     <div id={id} className={dropdownNavClasses}>
-      <div className={style.mobileDropDownMenu}>{children}</div>
+      <div className="space-y-1 pb-3 pt-2">{children}</div>
     </div>
   );
-};
+}

package/{archive → src/components}/NavTwo/Nav.stories.tsx

@@ -1,13 +1,7 @@
-import React, { useEffect, useState } from 'react';
-
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, type StoryObj } from '@storybook/react';
 import { idAndClassName } from '@utils/controls';
 
 import Nav from '.';
-import Container from '../Container';
-import HamburgerIcon from '../HamburgerIcon';
-import Image from '../Image';
-import NavItem from '../NavItem';
 
 const meta = {
   title: 'Components/NavTwo',
@@ -19,8 +13,8 @@ const meta = {
         {
           name: 'grey',
           value: '#f3f3f3',
-        },
-      ],
+        }
+      ]
     },
   },
   argTypes: {
@@ -29,10 +23,10 @@ const meta = {
   },
   args: {
     className: 'bg-primary text-white py-4',
-  },
-};
+  }
+}
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof Nav>;
 
 export const Default: Story = {};

package/{archive → src/components}/NavTwo/Sidebar.tsx

@@ -1,9 +1,5 @@
-import React from 'react';
-
 import classNames from 'classnames';
 
-
-
 export interface Props {
   id?: string;
   className?: string;
@@ -16,19 +12,19 @@ export const Sidebar = ({
   className,
   children,
   visible = false,
-}: Props): JSX.Element => {
+}: Props) => {
   const sideNavClasses = classNames(
     {
-      [style.sideBarCollapsed]: !visible,
-      [style.sideBarExpanded]: visible,
+      'w-0': !visible,
+      'h-screen w-full sm:w-1/3': visible,
     },
-    style.sideNavClassList,
+    'fixed z-50 h-full overflow-hidden duration-700 md:hidden',
     className,
-  );
+  )
 
   return (
     <div id={id} className={sideNavClasses}>
       {children}
     </div>
   );
-};
+}