feat: chakra to tailwind

next.config.js

@@ -8,6 +8,10 @@ const nextConfig = {
     domains: ["files-eu.epusercontent.com"],
   },
   experimental: { images: { allowFutureImage: true } },
+  i18n: {
+    locales: ["en"],
+    defaultLocale: "en",
+  },
   webpack(config) {
     config.resolve.fallback = {
       ...config.resolve.fallback,
@@ -22,4 +26,9 @@ const nextConfig = {
     return config;
   },
 };
-module.exports = nextConfig;
+
+const withBundleAnalyzer = require("@next/bundle-analyzer")({
+  enabled: process.env.ANALYZE === "true",
+});
+
+module.exports = withBundleAnalyzer(nextConfig);

package.json

@@ -12,13 +12,16 @@
     "format:check": "prettier --check .",
     "format:fix": "prettier --write .",
     "type:check": "tsc --noEmit",
+    "analyze": "ANALYZE=true next build",
     "prepare": "husky install"
   },
   "dependencies": {
     "@chakra-ui/icons": "^2.0.8",
     "@chakra-ui/react": "^2.2.8",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
+    "@headlessui/react": "^1.7.4",
+    "@heroicons/react": "^2.0.13",
     "@moltin/sdk": "^18.1.0",
     "@stripe/react-stripe-js": "^1.10.0",
     "@stripe/stripe-js": "^1.35.0",
@@ -45,13 +48,15 @@
   },
   "devDependencies": {
     "@babel/core": "^7.18.10",
+    "@next/bundle-analyzer": "^13.0.4",
     "@svgr/webpack": "^6.3.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.3.0",
     "@types/braintree-web": "^3.75.20",
     "@types/braintree-web-drop-in": "^1.28.0",
     "@types/node": "18.7.3",
     "@types/react": "18.0.17",
+    "autoprefixer": "^10.4.13",
     "babel-loader": "^8.2.5",
     "eslint": "^8.22.0",
     "eslint-config-next": "12.2.5",
@@ -60,9 +65,11 @@
     "husky": "^8.0.1",
     "jest": "^28.1.3",
     "lint-staged": "^13.0.3",
+    "postcss": "^8.4.19",
     "prettier": "^2.7.1",
     "prettier-eslint": "^15.0.1",
     "prettier-eslint-cli": "^7.0.0",
+    "tailwindcss": "^3.2.4",
     "typescript": "4.7.4"
   },
   "resolutions": {

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

src/components/cart/CartMenu.tsx

@@ -29,7 +29,7 @@ export default function CartMenu(): JSX.Element {
       onOpen={onOpen}
     >
       <PopoverTrigger>
-        <Button variant="ghost" _focus={{ border: "none" }}>
+        <Button variant="ghost" _focus={{ border: "none" }} aria-label="Cart">
           <Icon
             viewBox="0 0 24 24"
             stroke="currentColor"

src/components/footer/Footer.tsx

@@ -1,4 +1,3 @@
-import Image from "next/image";
 import {
   Box,
   Container,
@@ -43,6 +42,7 @@ const Footer = (): JSX.Element => (
               _hover={{
                 color: "brand.primary",
               }}
+              aria-label="Go to repository on github"
             >
               <GithubIcon width={25} height={25} />
             </Link>
@@ -54,6 +54,7 @@ const Footer = (): JSX.Element => (
               _hover={{
                 color: "brand.primary",
               }}
+              aria-label="Go to Elasticpath home page"
             >
               <InfoIcon width={25} height={25} />
             </Link>
@@ -65,6 +66,7 @@ const Footer = (): JSX.Element => (
               _hover={{
                 color: "brand.primary",
               }}
+              aria-label="Go to Elasticpath contact us page"
             >
               <PhoneIcon width={25} height={25} />
             </Link>

src/components/header/Header.tsx

@@ -1,66 +1,48 @@
-import { Box, Flex } from "@chakra-ui/react";
 import { NavigationNode } from "../../lib/build-site-navigation";
-import { globalBaseWidth } from "../../styles/theme";
 import SearchModal from "../search/SearchModal";
 import MobileNavBar from "./navigation/MobileNavBar";
 import EpIcon from "../../../public/icons/ep-icon.svg";
 
 import NavBar from "./navigation/NavBar";
 import Link from "next/link";
 import CartMenu from "../cart/CartMenu";
+import { clsx } from "clsx";
 
 interface IHeader {
   nav: NavigationNode[];
 }
 
 const Header = ({ nav }: IHeader): JSX.Element => {
-  const headerPadding = 4;
-
   return (
-    <Box
-      p={headerPadding}
-      as="header"
-      pos="sticky"
-      top={0}
-      bg="white"
-      zIndex="sticky"
-      borderBottom="1px"
-      borderColor="gray.200"
+    <header
+      className={clsx(
+        `p-4 sticky top-0 bg-white z-sticky border-b border-gray-200`
+      )}
     >
-      <Flex
-        alignItems="center"
-        w="100%"
-        justifyContent="space-between"
-        display={{ base: "flex", sm: "flex", md: "none" }}
-      >
+      <div className="items-center w-full justify-between flex md:hidden">
         <MobileNavBar nav={nav} />
-      </Flex>
-      <Flex
-        alignItems="center"
-        w="100%"
-        justifyContent="space-between"
-        display={{ base: "none", sm: "none", md: "flex" }}
-      >
-        <Box flex={1} minW={16}>
+      </div>
+      <div className="items-center w-full justify-between hidden md:flex">
+        <div className="flex-1 min-w-[4rem]">
           <Link href="/">
-            <a>
-              <Box position="relative" minW={10} w={10} h={10}>
+            <a aria-label="Go to home page">
+              <div className="relative min-w-[2.5rem] w-10 h-10">
                 <EpIcon />
-              </Box>
+              </div>
             </a>
           </Link>
-        </Box>
+        </div>
 
-        <Box maxW={globalBaseWidth} w="100%">
-          <NavBar nav={nav} headerPadding={headerPadding} />
-        </Box>
+        <div className="max-w-global w-full">
+          <NavBar nav={nav} />
+        </div>
 
-        <Flex gap={4} flex={1} display="flex" justifyContent="flex-end">
+        <div className="flex gap flex-1 justify-end">
           <SearchModal />
           <CartMenu />
-        </Flex>
-      </Flex>
-    </Box>
+        </div>
+      </div>
+    </header>
   );
 };
 

src/components/header/navigation/MobileNavBar.tsx

@@ -39,13 +39,18 @@ const MobileNavBar = ({ nav }: IMobileNavBar): JSX.Element => {
   return (
     <Grid templateColumns="1fr auto 1fr" w="full">
       <GridItem>
-        <Button variant="ghost" color="gray.800" onClick={onOpen}>
+        <Button
+          variant="ghost"
+          color="gray.800"
+          onClick={onOpen}
+          aria-label="Menu"
+        >
           <HamburgerIcon />
         </Button>
       </GridItem>
       <GridItem>
         <Link href="/">
-          <a>
+          <a aria-label="Go to home page">
             <Box position="relative" minW={10} w={10} h={10}>
               <EpIcon />
             </Box>

src/components/header/navigation/NavBar.tsx

@@ -1,21 +1,19 @@
-import { Flex } from "@chakra-ui/react";
 import type { NavigationNode } from "../../../lib/build-site-navigation";
 
 import NavItem from "./NavItem";
 
 interface INavBar {
   nav: NavigationNode[];
-  headerPadding: number;
 }
 
-const NavBar = ({ nav, headerPadding }: INavBar): JSX.Element => {
+const NavBar = ({ nav }: INavBar): JSX.Element => {
   return (
-    <Flex w="100%" as="nav">
+    <nav className="grid grid-flow-col auto-cols-max">
       {nav &&
         nav.map((item: NavigationNode) => (
-          <NavItem key={item.id} item={item} headerPadding={headerPadding} />
+          <NavItem key={item.id} item={item} />
         ))}
-    </Flex>
+    </nav>
   );
 };
 

src/components/header/navigation/NavItem.tsx

@@ -1,56 +1,45 @@
-import { Button, Menu, MenuButton, MenuList, theme } from "@chakra-ui/react";
+import { theme } from "@chakra-ui/react";
 import type { NavigationNode } from "../../../lib/build-site-navigation";
 import { globalBaseWidth, styles } from "../../../styles/theme";
+import { Menu, Popover, Transition } from "@headlessui/react";
 
 import NavItemContent from "./NavItemContent";
+import { clsx } from "clsx";
+import { Fragment } from "react";
 
 interface INavItem {
   item: NavigationNode;
-  headerPadding: number;
 }
 
-const calculateOffset = (value: number, vertical: boolean = false) => {
-  const rem: string = theme.sizes[value as keyof typeof theme.sizes].toString();
-  const global = styles.global.html.fontSize;
-
-  // Adjusting the offset to align correctly
-  const result: number = parseFloat(rem) * parseFloat(global);
-  return vertical ? result + 10 : result * 2;
-};
-
-const NavItem = ({ item, headerPadding }: INavItem): JSX.Element => {
-  const menuListPadding = 4;
-
+const NavItem = ({ item }: INavItem): JSX.Element => {
   return (
-    <Menu
-      offset={[
-        -calculateOffset(menuListPadding),
-        calculateOffset(headerPadding, true),
-      ]}
-    >
-      <MenuButton
-        as={Button}
-        variant="link"
-        marginRight="2rem"
-        color="gray.800"
-        _expanded={{ color: "brand.primary" }}
-      >
-        {item.name}
-      </MenuButton>
-      <MenuList
-        w="100%"
-        maxW={globalBaseWidth}
-        p={menuListPadding}
-        borderTopLeftRadius={0}
-        borderTopRightRadius={0}
-        sx={{
-          // Workaround for https://github.com/chakra-ui/chakra-ui/issues/4276
-          boxShadow: `${theme.shadows["xl"]} !important`,
-        }}
-      >
-        <NavItemContent item={item} />
-      </MenuList>
-    </Menu>
+    <Popover>
+      {({ open }) => (
+        <>
+          <Popover.Button
+            className={clsx(
+              "mr-8",
+              open ? "text-brand-primary" : "text-gray-800"
+            )}
+          >
+            {item.name}
+          </Popover.Button>
+          <Transition
+            as={Fragment}
+            enter="transition ease-out duration-200"
+            enterFrom="opacity-0 -translate-y-1"
+            enterTo="opacity-100 translate-y-0"
+            leave="transition ease-in duration-150"
+            leaveFrom="opacity-100 translate-y-0"
+            leaveTo="opacity-0 -translate-y-1"
+          >
+            <Popover.Panel className="absolute mt-6 z-popover bg-white min-w-[14rem]w-full max-w-global p-4 shadow-xl">
+              <NavItemContent item={item} />
+            </Popover.Panel>
+          </Transition>
+        </>
+      )}
+    </Popover>
   );
 };