technical improvements

.github/workflows/main.yml

@@ -16,9 +16,9 @@ jobs:
         uses: actions/checkout@v2
 
       - name: Setup node
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v3
         with:
-          node-version: '16.x'
+          node-version: 20
           registry-url: 'https://registry.npmjs.org'
           cache: 'npm'
 
@@ -31,7 +31,7 @@ jobs:
         run: tar czf /tmp/artifact.tar.gz .
 
       - name: Upload artifact
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v3
         with:
           name: ui-kit-artifact
           path: /tmp/artifact.tar.gz
@@ -43,13 +43,18 @@ jobs:
     needs: [install]
     continue-on-error: false
     steps:
+      - name: Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+
       - name: Download artifact
-        uses: actions/download-artifact@v2
+        uses: actions/download-artifact@v3
         with:
           name: ui-kit-artifact
 
       - name: Unpack artifact
-        run: tar xf artifact.tar.gz
+        run: tar xf artifact.tar.gz   
 
       - name: Run eslint
         run: npm run lint
@@ -60,13 +65,18 @@ jobs:
     needs: [install]
     continue-on-error: false
     steps:
+      - name: Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+
       - name: Download artifact
-        uses: actions/download-artifact@v2
+        uses: actions/download-artifact@v3
         with:
           name: ui-kit-artifact
 
       - name: Unpack artifact
-        run: tar xf artifact.tar.gz
+        run: tar xf artifact.tar.gz  
 
       - name: Run typescript compile
         run: yarn tsc --noEmit
@@ -78,7 +88,7 @@ jobs:
     continue-on-error: false
     steps:
       - name: Download artifact
-        uses: actions/download-artifact@v2
+        uses: actions/download-artifact@v3
         with:
           name: ui-kit-artifact
 
@@ -95,7 +105,7 @@ jobs:
     continue-on-error: false
     steps:
       - name: Download artifact
-        uses: actions/download-artifact@v2
+        uses: actions/download-artifact@v3
         with:
           name: ui-kit-artifact
 

.github/workflows/release.yml

@@ -29,7 +29,7 @@ jobs:
         uses: ./.github/actions/release
         id: release
         with:
-          node-version: 16
+          node-version: 20
           release-pr-title: 'chore(release): :package: version update for packages'
           release-commit-message: 'chore(release): version update for packages'
           github-token: ${{ secrets.GITHUB_TOKEN }}
@@ -56,7 +56,7 @@ jobs:
       - name: Prepare
         uses: ./.github/actions/prepare-packages
         with:
-          node-version: 16
+          node-version: 20
           build-command: 'lib'
 
   publish-npm:
@@ -74,7 +74,7 @@ jobs:
       - name: Publish to NPM
         uses: ./.github/actions/publish
         with:
-          node-version: 16
+          node-version: 20
           registry-url: 'https://registry.npmjs.org/'
           artifact-name: 'package-artifact'
           scope: '@macpaw'
@@ -95,7 +95,7 @@ jobs:
       - name: Publish to NPM
         uses: ./.github/actions/publish
         with:
-          node-version: 16
+          node-version: 20
           registry-url: https://npm.pkg.github.com/
           artifact-name: 'package-artifact'
           scope: '@macpaw'

.infrastructure/docker/ui/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:16
+FROM node:20
 
 ARG NPM_TOKEN
 

internal/ActiveLink/ActiveLink.js

@@ -28,8 +28,8 @@ const ActiveLink = ({ children, className, activeClassName, ...props }) => {
   }, [asPath, isReady, props.as, props.href, computedClassName]);
 
   return (
-    <Link {...props}>
-      <a className={computedClassName}>{children}</a>
+    <Link {...props} className={computedClassName}>
+      {children}
     </Link>
   );
 };

internal/HomePage/HomePage.js

@@ -13,10 +13,10 @@ export default function HomePage() {
             you're crafting experiences.
           </span>
           <div className={styles.buttons}>
-            <Link href="/docs">
+            <Link href="/docs" legacyBehavior>
               <Button color="contrast">Read Docs</Button>
             </Link>
-            <Link href="https://github.com/MacPaw/macpaw-ui" target="_blank">
+            <Link href="https://github.com/MacPaw/macpaw-ui" target="_blank" legacyBehavior>
               <Button
                 iconRight={
                   <img

internal/MobileNavigation/MobileNavigation.js

@@ -9,9 +9,9 @@ const MobileNavigation = () => {
     <div className={styles.container}>
       <div className={styles.logo}>
         <Link href="/">
-          <a>
-            <MacPawLogo />
-          </a>
+
+          <MacPawLogo />
+
         </Link>
       </div>
       <Dropdown
@@ -23,24 +23,12 @@ const MobileNavigation = () => {
         position="right"
         className={styles.dropdown}
       >
-        <DropdownItem>
-          <ActiveLink
-            href="/docs"
-            className={styles.navigationLink}
-            activeClassName={styles.activeLink}
-          >
-            Installation
-          </ActiveLink>
+        <DropdownItem component={ActiveLink} href="/docs" className={styles.navigationLink} activeClassName={styles.activeLink}>
+          Installation
         </DropdownItem>
         {pages.map((link) => (
-          <DropdownItem key={link}>
-            <ActiveLink
-              href={`/docs/${link}`}
-              className={styles.navigationLink}
-              activeClassName={styles.activeLink}
-            >
-              {link.replace('-', ' ')}
-            </ActiveLink>
+          <DropdownItem key={link} component={ActiveLink} href={`/docs/${link}`} className={styles.navigationLink} activeClassName={styles.activeLink}>
+            {link.replace('-', ' ')}
           </DropdownItem>
         ))}
       </Dropdown>

internal/MobileNavigation/mobileNavigation.module.css

@@ -14,7 +14,6 @@
 }
 
 .navigationLink {
-  margin: 8px 0;
   display: block;
   color: #000;
   text-decoration: none;

internal/Navigation/Navigation.js

@@ -7,8 +7,8 @@ import ActiveLink from '../ActiveLink/ActiveLink';
 const Navigation = () => {
   return (
     <div className={styles.navigation}>
-      <Link href="/">
-        <a className={styles.projectLink}>MacPaw UI Kit</a>
+      <Link href="/" className={styles.projectLink}>
+        MacPaw UI Kit
       </Link>
       <div className={styles.navigationLinks}>
         <ActiveLink