refactor: migrates to monorepo (#5)

* refactor: migrates to monorepo

* chore: adds example

* ci: changes test step

* ci: changes ubuntu to macos

---------

Co-authored-by: Kevin Hermawan <[email protected]>

.github/workflows/code-quality.yml

@@ -10,7 +10,7 @@ on:
 
 jobs:
   test:
-    runs-on: ubuntu-latest
+    runs-on: macos-latest
 
     strategy:
       matrix:
@@ -31,13 +31,10 @@ jobs:
         run: npm run lint
 
       - name: Run unit test
-        run: npm run test:coverage
-
-      - name: Upload coverage
-        uses: codecov/codecov-action@v4
+        run: npm run test
 
   build:
-    runs-on: ubuntu-latest
+    runs-on: macos-latest
 
     strategy:
       matrix:

.github/workflows/release.yml

@@ -6,7 +6,7 @@ on:
 
 jobs:
   release:
-    runs-on: ubuntu-latest
+    runs-on: macos-latest
     permissions:
       contents: read
       id-token: write
@@ -26,7 +26,14 @@ jobs:
       - name: Build package
         run: npm run build
 
-      - name: Release package
+      - name: Release @hyperjumptech/react-next-pathname
         run: npm publish --provenance --access public
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+        working-directory: packages/react-next-pathname
+
+      - name: Release @hyperjumptech/react-next-pathname-nextjs
+        run: npm publish --provenance --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+        working-directory: packages/react-next-pathname-nextjs

.gitignore

@@ -1,24 +1,38 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+# Dependencies
 node_modules
+.pnp
+.pnp.js
+
+# Local env files
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Testing
 coverage
+
+# Turbo
+.turbo
+
+# Vercel
+.vercel
+
+# Build Outputs
+.next/
+out/
+build
 dist
-*.local
 
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
+
+# Debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Misc
 .DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
+*.pem

README.md

@@ -1,8 +1,12 @@
 # About
 
-![Minified size](https://img.shields.io/bundlephobia/min/@hyperjumptech/react-next-pathname) ![Test coverage](https://img.shields.io/codecov/c/github/hyperjumptech/react-next-pathname) ![Monthly download](https://img.shields.io/npm/dm/@hyperjumptech/react-next-pathname)
+![Minified size](https://img.shields.io/bundlephobia/min/@hyperjumptech/react-next-pathname) ![Monthly download](https://img.shields.io/npm/dm/@hyperjumptech/react-next-pathname)
 
-This is a helper tool you can use in your React application to make it feel faster and smoother when navigating between pages. Say you have a sidebar that contains links to different pages. When you click a link, the component that displays the link will show that it's currently active—usually like this:
+`@hyperjumptech/react-next-pathname` is a helper tool designed to enhance the user experience in React applications by improving the responsiveness and feedback when navigating between pages. It ensures that the active state of links in components like sidebars is updated immediately upon clicking, even if the new page is slow to load.
+
+## Problem
+
+When a user clicks a link, the typical implementation updates the link's active state based on the current pathname, which only changes after the new page loads. This delay can confuse users, making them think that their click did not register. For example:
 
 ```tsx
 const isPathActive = (pathname: string) => {
@@ -15,15 +19,12 @@ const Sidebar = () => {
       {[
         { pathname: "/", title: "Home" },
         { pathname: "/about", title: "About" },
-        {
-          pathname: "/contact",
-          title: "Contact",
-        },
+        { pathname: "/contact", title: "Contact" },
       ].map(({ pathname, title }) => (
         <a
           key={pathname}
           href={pathname}
-          className={`${ispathActive(pathname) ? "active" : ""}`}
+          className={`${isPathActive(pathname) ? "active" : ""}`}
         >
           {title}
         </a>
@@ -33,9 +34,9 @@ const Sidebar = () => {
 };
 ```
 
-The problem is that when the clicked page is slow to load due to bad network conditions or slow server response, the clicked link will not immediately show that it's active. This is because the `window.location.pathname` is not updated until the page has fully loaded. Users might think that nothing is happening when they click the link, and they will be confused.
+## Solution
 
-This library helps you solve this problem by allowing you to get the next pathname immediately when a link is clicked, without waiting for the new page to load.
+`@hyperjumptech/react-next-pathname` solves this problem by providing the next pathname immediately when a link is clicked, without waiting for the new page to load. This ensures that the active state is updated right away, providing immediate feedback to the user.
 
 ## Installation
 
@@ -96,15 +97,12 @@ const Sidebar = () => {
       {[
         { pathname: "/", title: "Home" },
         { pathname: "/about", title: "About" },
-        {
-          pathname: "/contact",
-          title: "Contact",
-        },
+        { pathname: "/contact", title: "Contact" },
       ].map(({ pathname, title }) => (
         <a
           key={pathname}
           href={pathname}
-          className={`${ispathActive(pathname, nextPathname) ? "active" : ""}`}
+          className={`${isPathActive(pathname, nextPathname) ? "active" : ""}`}
         >
           {title}
         </a>
@@ -114,6 +112,10 @@ const Sidebar = () => {
 };
 ```
 
+## Next.js Support
+
+Currently, the `@hyperjumptech/react-next-pathname-nextjs` package only supports the Page Router. If you are using the App Router, you can use the `@hyperjumptech/react-next-pathname` package. However, please note that it is not fully optimized for the App Router.
+
 ## License
 
 [MIT License](/LICENSE)

apps/example-nextjs/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

apps/example-nextjs/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

apps/example-nextjs/.prettierrc

@@ -0,0 +1,3 @@
+{
+    "bracketSameLine": true
+}

apps/example-nextjs/README.md

@@ -0,0 +1,40 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

apps/example-nextjs/next.config.mjs

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+};
+
+export default nextConfig;

apps/example-nextjs/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "example-nextjs",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@hyperjumptech/react-next-pathname-nextjs": "*",
+    "react": "^18",
+    "react-dom": "^18",
+    "next": "14.2.4"
+  },
+  "devDependencies": {
+    "typescript": "^5",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.4"
+  }
+}

apps/example-nextjs/postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;

apps/example-nextjs/src/components/navbar.tsx

@@ -0,0 +1,41 @@
+import { useNextPathname } from "../../../../packages/react-next-pathname-nextjs/dist/index.mjs";
+import Link from "next/link";
+
+const tabs = [
+  { name: "Home", pathname: "/" },
+  { name: "Slow Page", pathname: "/slow-page" },
+  { name: "Very Slow Page", pathname: "/very-slow-page" },
+];
+
+function classNames(...classes: string[]) {
+  return classes.filter(Boolean).join(" ");
+}
+
+export default function Navbar() {
+  const { nextPathname } = useNextPathname();
+
+  function isActive(pathname: string) {
+    return nextPathname === pathname;
+  }
+
+  return (
+    <div className="border-b border-gray-200">
+      <nav aria-label="Tabs" className="-mb-px flex">
+        {tabs.map((tab) => (
+          <Link
+            key={tab.name}
+            href={tab.pathname}
+            aria-current={isActive(tab.pathname) ? "page" : undefined}
+            className={classNames(
+              isActive(tab.pathname)
+                ? "border-indigo-500 text-indigo-600"
+                : "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700",
+              "w-1/3 border-b-2 px-1 py-4 text-center text-sm font-medium"
+            )}>
+            {tab.name}
+          </Link>
+        ))}
+      </nav>
+    </div>
+  );
+}

apps/example-nextjs/src/pages/_app.tsx

@@ -0,0 +1,14 @@
+import "~/styles/globals.css";
+
+import type { AppProps } from "next/app";
+import { NextPathnameProvider } from "../../../../packages/react-next-pathname-nextjs/dist/index.mjs";
+import Navbar from "~/components/navbar";
+
+export default function App({ Component, pageProps }: AppProps) {
+  return (
+    <NextPathnameProvider>
+      <Navbar />
+      <Component {...pageProps} />
+    </NextPathnameProvider>
+  );
+}

apps/example-nextjs/src/pages/_document.tsx

@@ -0,0 +1,13 @@
+import { Html, Head, Main, NextScript } from "next/document";
+
+export default function Document() {
+  return (
+    <Html lang="en">
+      <Head />
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}

apps/example-nextjs/src/pages/index.tsx

@@ -0,0 +1,7 @@
+export default function Home() {
+  return (
+    <div className="min-h-screen flex flex-col justify-center items-center">
+      <h1 className="text-lg font-semibold">Home</h1>
+    </div>
+  );
+}