diff --git a/next.config.js b/next.config.js index 14c79799..625559c7 100644 --- a/next.config.js +++ b/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); diff --git a/package.json b/package.json index f3ad9f28..9e9ee436 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "format:check": "prettier --check .", "format:fix": "prettier --write .", "type:check": "tsc --noEmit", + "analyze": "ANALYZE=true next build", "prepare": "husky install" }, "dependencies": { @@ -19,6 +20,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,6 +48,7 @@ }, "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", @@ -52,6 +56,7 @@ "@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": { diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 00000000..12a703d9 --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +}; diff --git a/src/components/cart/CartMenu.tsx b/src/components/cart/CartMenu.tsx index 1a2791a7..f8971b7c 100644 --- a/src/components/cart/CartMenu.tsx +++ b/src/components/cart/CartMenu.tsx @@ -29,7 +29,7 @@ export default function CartMenu(): JSX.Element { onOpen={onOpen} > - - + diff --git a/src/components/header/navigation/NavBar.tsx b/src/components/header/navigation/NavBar.tsx index 2d6e5d85..a416c201 100644 --- a/src/components/header/navigation/NavBar.tsx +++ b/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 ( - + ); }; diff --git a/src/components/header/navigation/NavItem.tsx b/src/components/header/navigation/NavItem.tsx index b7e8184b..8b1b35ed 100644 --- a/src/components/header/navigation/NavItem.tsx +++ b/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 ( - - - {item.name} - - - - - + + {({ open }) => ( + <> + + {item.name} + + + + + + + + )} + ); }; diff --git a/src/components/header/navigation/NavItemContent.tsx b/src/components/header/navigation/NavItemContent.tsx index b35ca435..0ac31482 100644 --- a/src/components/header/navigation/NavItemContent.tsx +++ b/src/components/header/navigation/NavItemContent.tsx @@ -1,97 +1,80 @@ -import { - Flex, - Link, - MenuGroup, - MenuItem, - SimpleGrid, - Text, -} from "@chakra-ui/react"; +import { Flex, MenuGroup, MenuItem, SimpleGrid, Text } from "@chakra-ui/react"; import NextLink from "next/link"; import { NavigationNode } from "../../../lib/build-site-navigation"; -import { ArrowForwardIcon } from "@chakra-ui/icons"; +import { Menu } from "@headlessui/react"; +import { forwardRef, ReactNode } from "react"; +import { clsx } from "clsx"; +import { ArrowRightIcon } from "@heroicons/react/24/outline"; interface INavItemContent { item: NavigationNode; triggered?: () => void; } -const menuItemInteractionStyle = { - bg: "none", - color: "brand.primary", -}; +const menuItemInteractionStyle = "hover:bg-none text-brand-primary"; -const menuItemStyleProps = { - _hover: menuItemInteractionStyle, - _active: menuItemInteractionStyle, - _focus: menuItemInteractionStyle, - color: "gray.500", - margin: "1", -}; +const MyLink = forwardRef< + HTMLAnchorElement, + { children: ReactNode } & React.AnchorHTMLAttributes +>((props, ref) => { + let { href, children, ...rest }: any = props; + return ( + + + {children} + + + ); +}); const NavItemContent = ({ item, triggered }: INavItemContent): JSX.Element => { const buildStack = (item: NavigationNode) => { return ( - +
+

{item.name}

{item.children.map((child: NavigationNode) => ( - - - {child.name} - - - ))} - - - Browse All - - - + {child.name} +
+ ))} +
+ + Browse All + +
+ ); }; return ( - - +
+
{item.children.map((parent: NavigationNode, index: number) => { return
{buildStack(parent)}
; })} - - - - +
+ + + Browse All {item.name} - - - + + + - +
); }; diff --git a/src/components/search/SearchModal.tsx b/src/components/search/SearchModal.tsx index b964647e..07731411 100644 --- a/src/components/search/SearchModal.tsx +++ b/src/components/search/SearchModal.tsx @@ -182,6 +182,7 @@ export const SearchModal = (): JSX.Element => { onClick={onOpen} fontWeight="normal" justifyContent="left" + aria-label="Search" > diff --git a/src/layouts/main-layout/MainLayout.tsx b/src/layouts/main-layout/MainLayout.tsx index 075a0fc0..7f865da4 100644 --- a/src/layouts/main-layout/MainLayout.tsx +++ b/src/layouts/main-layout/MainLayout.tsx @@ -4,6 +4,7 @@ import Footer from "../../components/footer/Footer"; import type { ReactNode } from "react"; import type { NavigationNode } from "../../lib/build-site-navigation"; import { Toaster } from "../../components/toast/toaster"; +import Head from "next/head"; interface IMainLayout { nav: NavigationNode[]; @@ -13,6 +14,13 @@ interface IMainLayout { const MainLayout = ({ nav, children }: IMainLayout): JSX.Element => { return ( <> + + D2C Starter Kit + +
{children} diff --git a/src/styles/globals.css b/src/styles/globals.css index d196ebe4..b7f772cc 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -1,3 +1,13 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer utilities { + .max-w-global { + @apply max-w-7xl; + } +} + html, body { padding: 0; diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 00000000..cf869577 --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,16 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: [ + "./src/pages/**/*.{js,ts,jsx,tsx}", + "./src/components/**/*.{js,ts,jsx,tsx}", + ], + theme: { + extend: { + zIndex: { + sticky: "1100", + popover: "1500", + }, + }, + }, + plugins: [], +};