Feature/more migration (#212)

* mv breadcrumbs

* wip

* refactor

* story

* fix

* rm storybook from nextjs

* dep

* waitfor check

.github/workflows/code-check.yml

@@ -83,22 +83,22 @@ jobs:
         run: pnpm build
 
       - name: "Storybook: Install Extra Dependencies"
-        working-directory: packages/nextjs
+        working-directory: packages/shared-ui
         run: pnpm exec playwright install
 
       - name: "Storybook: Build"
-        working-directory: packages/nextjs
+        working-directory: packages/shared-ui
         run: pnpm run storybook:build
 
       - name: "Storybook: Chromatic"
         uses: chromaui/action@v1
         # Chromatic GitHub Action options
         with:
-          workingDir: packages/nextjs
+          workingDir: packages/shared-ui
           storybookBuildDir: storybook-static
           exitOnceUploaded: true
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
 
       - name: "Storybook: Run Tests"
-        working-directory: packages/nextjs
+        working-directory: packages/shared-ui
         run: pnpm run test:storybook:start

package.json

@@ -27,15 +27,6 @@
     "test:e2e-mock:start": "start-server-and-test next:dev:mock http://localhost:3000 test:e2e-mock"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "^7.4.0",
-    "@storybook/addon-interactions": "^7.4.0",
-    "@storybook/addon-links": "^7.4.0",
-    "@storybook/addon-onboarding": "^1.0.8",
-    "@storybook/blocks": "^7.4.0",
-    "@storybook/jest": "^0.2.2",
-    "@storybook/react": "^7.4.0",
-    "@storybook/test-runner": "^0.13.0",
-    "@storybook/testing-library": "^0.2.0",
     "@types/node": "20.8.7",
     "@types/react": "18.2.0",
     "@types/react-dom": "18.2.0",
@@ -52,7 +43,6 @@
     "plop": "^4.0.0",
     "prettier": "^2.8.2",
     "start-server-and-test": "^1.15.2",
-    "storybook": "^7.4.0",
     "tailwindcss": "^3.1.8",
     "typescript": "5.2.2"
   },

packages/nextjs/components/Breadcrumbs/Breadcrumbs.tsx → packages/nextjs/components/Breadcrumbs.tsx

@@ -1,20 +1,15 @@
 import React from "react";
 import { useRouter } from "next/router";
 import { MdOutlineHome } from "react-icons/md";
-import { capitalizeWords } from "utils/capitalizeWords";
-import { BreadcrumbsContainer } from "./BreadcrumbsContainer";
-import { BreadcrumbItem } from "./BreadcrumbItem";
-
-type BreadcrumbsProps = React.PropsWithChildren & {
-  separator?: string;
-};
+import { BreadcrumbItem, BreadcrumbsContainer, capitalizeWords } from "shared-ui";
+import Link from "next/link";
 
 type LinkElement = {
   title: string;
   href: string;
 };
 
-export const Breadcrumbs = ({ separator = "/" }: BreadcrumbsProps) => {
+export const Breadcrumbs = () => {
   const { query, asPath } = useRouter();
   // Remove query string.
   const urlPath = asPath.split("?")[0];
@@ -52,12 +47,12 @@ export const Breadcrumbs = ({ separator = "/" }: BreadcrumbsProps) => {
   }, []);
 
   return (
-    <BreadcrumbsContainer aria-label="breadcrumb" separator={separator}>
+    <BreadcrumbsContainer aria-label="breadcrumb">
       <BreadcrumbItem href="/">
         <MdOutlineHome className="mr-2" /> Home
       </BreadcrumbItem>
       {elements.map(({ title, href }, index) => (
-        <BreadcrumbItem key={`${href}-${index}`} href={`${href}`} isLast={index == elements.length - 1}>
+        <BreadcrumbItem as={Link} key={`${href}-${index}`} href={`${href}`} isLast={index == elements.length - 1}>
           {title}
         </BreadcrumbItem>
       ))}

packages/nextjs/components/Header/Header.tsx

@@ -1,58 +1,48 @@
 import * as React from "react";
 import Link from "next/link";
-import classNames from "classnames";
-import { Cart, CartContent, Button, useCart } from "shared-ui";
+import { Button, useCart, Header as BaseHeader, useMobileNav } from "shared-ui";
 import { Search } from "components/Search";
-import { MobileHeaderItems } from "./MobileHeaderItems";
-import { NAV_ITEMS } from "./NavItems";
-import { MobileNavMenu } from "./MobileNavMenu";
-import { DesktopNavItem } from "./DesktopNavItem";
-import { Logo } from "./Logo";
+import { useRouter } from "next/router";
+import { NAV_ITEMS } from "shared-ui";
+import { DesktopNavItem } from "shared-ui";
+import { Cart } from "shared-ui";
+import { CartContent } from "shared-ui";
+import { Logo } from "shared-ui";
+import { MobileNavMenu } from "shared-ui";
 
 export const Header = () => {
-  const [isNavOpen, setIsNavOpen] = React.useState(false);
   const { toggleCartOpen } = useCart();
-
-  const onMobileNavClick = () => setIsNavOpen((prev) => !prev);
-  const onMobileNavClose = () => setIsNavOpen(false);
-
-  React.useEffect(() => {
-    document.body.classList[isNavOpen ? "add" : "remove"]("overflow-hidden");
-  }, [isNavOpen]);
+  const { pathname } = useRouter();
+  const { onMobileNavClose } = useMobileNav();
 
   return (
-    <header className={classNames("sticky top-0 z-10 flex flex-col", isNavOpen && "h-screen")}>
-      <nav className="h-[66px] sm:h-[110px] border-b-2 border-b-primary bg-secondary shadow transition-all text-primary">
-        <div className="h-full container flex items-center justify-between px-6">
-          <div className="flex items-center">
-            <Link href="/" onClick={onMobileNavClose}>
-              <Logo className="w-24" />
-            </Link>
-            <ul className="ml-8 hidden sm:flex sm:flex-1">
-              {/* Desktop Nav */}
-              {NAV_ITEMS.map(({ href, label }) => (
-                <DesktopNavItem key={`${href}-${label}`} href={href} label={label} />
-              ))}
-            </ul>
-          </div>
-          <div className="flex items-center">
-            <Search />
-            <Cart onMobileNavClose={onMobileNavClose}>
-              <CartContent
-                ProductListLink={
-                  <Link href="/products" passHref legacyBehavior>
-                    <Button as="a" variant="secondary" onClick={() => toggleCartOpen(false)}>
-                      View Products
-                    </Button>
-                  </Link>
-                }
-              />
-            </Cart>
-            <MobileNavMenu navOpen={isNavOpen} onMobileNavClick={onMobileNavClick} />
-          </div>
-        </div>
-      </nav>
-      <MobileHeaderItems navOpen={isNavOpen} onMobileNavClose={onMobileNavClose} />
-    </header>
+    <BaseHeader LinkElement={Link} currentRoute={pathname}>
+      <div className="flex items-center">
+        <Link href="/" onClick={onMobileNavClose}>
+          <Logo className="w-24" />
+        </Link>
+        <ul className="ml-8 hidden sm:flex sm:flex-1">
+          {/* Desktop Nav */}
+          {NAV_ITEMS.map(({ href, label }) => (
+            <DesktopNavItem as={Link} isActive={pathname === href} key={`${href}-${label}`} href={href} label={label} />
+          ))}
+        </ul>
+      </div>
+      <div className="flex items-center">
+        <Search />
+        <Cart onMobileNavClose={onMobileNavClose}>
+          <CartContent
+            ProductListLink={
+              <Link href="/products" passHref legacyBehavior>
+                <Button as="a" variant="secondary" onClick={() => toggleCartOpen(false)}>
+                  View Products
+                </Button>
+              </Link>
+            }
+          />
+        </Cart>
+        <MobileNavMenu />
+      </div>
+    </BaseHeader>
   );
 };

packages/nextjs/components/ImageCarousel.tsx

@@ -14,7 +14,7 @@ export const ImageCarousel = ({ productImages }: ImageCarouselProps) => {
         <Image
           className="rounded-2xl aspect-square w-full"
           layout="fill"
-          key={image?.name}
+          key={image?._key}
           src={image ?? ""}
           alt={image?.name ?? ""}
         />