wip(comp > navigation): improves API design

wethegit · Nov 20, 2023 · 2694ac5 · 2694ac5
1 parent 07c1fbc
commit 2694ac5
Show file tree

Hide file tree

Showing 10 changed files with 332 additions and 116 deletions.
diff --git a/packages/wethegit-components-cli/package.json b/packages/wethegit-components-cli/package.json
@@ -14,7 +14,7 @@
   },
   "scripts": {
     "build": "tsup",
-    "clean": "rm -rf .turbo node_modules dist",
+    "clean": "rm -rf node_modules dist",
     "dev": "tsup --watch",
     "lint": "eslint src/",
     "typecheck": "tsc --noEmit"

diff --git a/packages/wethegit-components/package.json b/packages/wethegit-components/package.json
@@ -19,16 +19,16 @@
   },
   "scripts": {
     "build": "storybook build --docs",
-    "clean": "rm -rf .turbo node_modules dist storybook-static",
+    "clean": "rm -rf node_modules dist storybook-static",
     "dev": "storybook dev -p 6006",
     "lint": "eslint src/",
     "stylelint": "stylelint **/*.{css,scss}",
     "preview-storybook": "serve storybook-static",
     "typecheck": "tsc --noEmit"
   },
   "peerDependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.0.2",
+    "react-dom": "^18.0.2",
     "typescript": "5.1.6"
   },
   "devDependencies": {
@@ -42,14 +42,14 @@
     "@storybook/react": "^7.5.3",
     "@storybook/react-vite": "^7.5.3",
     "@storybook/theming": "^7.5.3",
-    "@types/react": "^17.0.39",
-    "@types/react-dom": "^17.0.11",
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
     "@vitejs/plugin-react": "^1.3.2",
     "eslint": "^8.15.0",
     "eslint-config-custom": "*",
     "eslint-plugin-storybook": "^0.6.15",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.0.2",
+    "react-dom": "^18.0.2",
     "sass": "^1.69.5",
     "serve": "^13.0.4",
     "storybook": "^7.5.3",

diff --git a/...ages/wethegit-components/src/components/navigation/components/overlay/overlay.module.scss b/...ages/wethegit-components/src/components/navigation/components/overlay/overlay.module.scss
@@ -15,9 +15,3 @@
   opacity: 0.95;
   pointer-events: auto;
 }
-
-@media #{$medium-up} {
-  .overlay {
-    display: none;
-  }
-}
diff --git a/...ages/wethegit-components/src/components/navigation/components/toggler/toggler.module.scss b/...ages/wethegit-components/src/components/navigation/components/toggler/toggler.module.scss
@@ -62,11 +62,3 @@
     }
   }
 }
-
-// Feel free to change the breakpoint where the nav goes from hamburger to full
-// Also change the breakpoint in the Navigation and NavList components
-@media #{$medium-up} {
-  .toggler {
-    display: none;
-  }
-}
diff --git a/packages/wethegit-components/src/components/navigation/components/toggler/toggler.tsx b/packages/wethegit-components/src/components/navigation/components/toggler/toggler.tsx
@@ -20,7 +20,7 @@ export const Toggler = fixedForwardRef<HTMLButtonElement, TogglerProps>(function
       {...props}
     >
       <span className={styles.togglerIcon} />
-      <VisuallyHidden>{open ? "Close" : "Open"}</VisuallyHidden>
+      <VisuallyHidden>{open ? "Close menu" : "Open menu"}</VisuallyHidden>
     </button>
   )
 })
diff --git a/packages/wethegit-components/src/components/navigation/navigation.module.scss b/packages/wethegit-components/src/components/navigation/navigation.module.scss
@@ -16,7 +16,7 @@
 }
 
 // Feel free to change the breakpoint where the nav goes from hamburger to full
-// Also change the breakpoint in the Toggler and NavList components
+// Also change the breakpoint in the NavList component
 @media #{$medium-up} {
   .navBar {
     left: 0;
@@ -34,4 +34,9 @@
       position: relative;
     }
   }
+
+  .overlay,
+  .toggler {
+    display: none;
+  }
 }
diff --git a/packages/wethegit-components/src/components/navigation/navigation.stories.tsx b/packages/wethegit-components/src/components/navigation/navigation.stories.tsx
@@ -2,9 +2,24 @@ import type { Meta, StoryObj } from "@storybook/react"
 
 import { Navigation } from "."
 
+const LINKS = {
+  home: {
+    label: "Home",
+    path: "/",
+  },
+  about: {
+    label: "About",
+    path: "/about",
+  },
+}
+
 const meta: Meta<typeof Navigation> = {
   title: "components/navigation",
   component: Navigation,
+  args: {
+    links: LINKS,
+    "aria-label": "Main navigation",
+  },
   decorators: [
     (Story) => (
       <div

diff --git a/packages/wethegit-components/src/components/navigation/navigation.tsx b/packages/wethegit-components/src/components/navigation/navigation.tsx
@@ -1,39 +1,43 @@
 "use client"
 
-import { useRef, useState } from "react"
+import { useId, useRef, useState } from "react"
 
 import { classnames } from "@local/utilities"
 
 import { NavList, NavListItem, Overlay, Toggler } from "./components"
 import styles from "./navigation.module.scss"
 
-const MAIN_NAV_ID = "main-site-nav"
-const LINKS = {
-  home: {
-    label: "Home",
-    path: "/",
-  },
-  about: {
-    label: "About",
-    path: "/about",
-  },
+export type NavigationLinks = {
+  [key: string]: {
+    label: string
+    path: string
+  }
 }
 
 export interface NavigationProps {
   /**
    * The currently selected navigation item, used to highlight the selected item and to set the `aria-current` attribute.
    * This is based on the `key` of the `LINKS` object.
    */
-  currentPage?: keyof typeof LINKS
+  currentPage?: keyof NavigationProps["links"]
+  /**
+   * Mandatory `aria-label` attribute.
+   */
+  "aria-label": string
+  /**
+   * The links to display in the navigation.
+   */
+  links: NavigationLinks
 }
 
 /**
  * At it's basic form, the navigation component is a hamburger menu that opens a list of links on the `sm` breakpoint and from the `md` breakpoint and up, it's a horizontal list of links that is sticky to the top of the viewport.
  */
-export function Navigation({ currentPage }: NavigationProps) {
+export function Navigation({ currentPage, links, ...props }: NavigationProps) {
   const [open, setOpen] = useState(false)
   const focusLoopEnd = useRef<HTMLSpanElement>(null)
   const menuToggler = useRef<HTMLButtonElement>(null)
+  const id = useId()
 
   const toggle = () => {
     setOpen(!open)
@@ -52,15 +56,16 @@ export function Navigation({ currentPage }: NavigationProps) {
       <Toggler
         ref={menuToggler}
         open={open}
-        aria-controls={MAIN_NAV_ID}
+        aria-controls={id}
         onClick={toggle}
+        className={styles.toggler}
       />
 
-      <Overlay open={open} />
+      <Overlay open={open} onClick={toggle} className={styles.overlay} />
 
-      <nav className={styles.mainNav} aria-label="Main Navigation" id={MAIN_NAV_ID}>
+      <nav className={styles.mainNav} aria-label={props["aria-label"]} id={id}>
         <NavList>
-          {Object.entries(LINKS).map(([key, { label, path }]) => (
+          {Object.entries(links).map(([key, { label, path }]) => (
             <NavListItem key={key} selected={key === currentPage}>
               <a href={path} onClick={handleLinkClick}>
                 {label}

diff --git a/packages/wethegit-components/src/components/navigation/readme.stories.mdx b/packages/wethegit-components/src/components/navigation/readme.stories.mdx
@@ -16,7 +16,7 @@ npx @wethegit/components-cli add navigation
 
 ## Navigation items
 
-Inside the `navigation.tsx` file, you'll find a `LINKS` object. This is where you can edit your navigation items.
+The `Navigation` is designed so handling the links is completely open to the developer. By default you'll find a `LINKS` object inside the `navigation.tsx` file that's simply looped over to render the links but you can use whatever you want.
 
 ```tsx
 const LINKS = {