[release]: first release v0.1.0

.eslintignore

@@ -0,0 +1,2 @@
+
+dist/

.eslintrc

@@ -0,0 +1,31 @@
+{
+  "plugins": ["@typescript-eslint"],
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "rules": {
+    "quotes": ["error", "single"],
+    "semi": ["error", "always"],
+    "eol-last": ["error", "always"],
+    "comma-dangle": [
+      "error",
+      {
+        "arrays": "always-multiline",
+        "objects": "always-multiline",
+        "imports": "always-multiline",
+        "exports": "always-multiline",
+        "functions": "never"
+      }
+    ],
+    "arrow-parens": ["error", "always"],
+    "no-trailing-spaces": ["error", { "skipBlankLines": true }],
+    "prefer-const": "warn",
+    "accessor-pairs": "off",
+    "no-async-promise-executor": "off",
+    "no-unused-vars": "off",
+    "node/no-missing-require": "off",
+    "no-console": "warn"
+  }
+}

.github/problemMatchers/eslint.json

@@ -0,0 +1,22 @@
+{
+	"problemMatcher": [
+		{
+			"owner": "eslint-stylish",
+			"pattern": [
+				{
+					"regexp": "^([^\\s].*)$",
+					"file": 1
+				},
+				{
+					"regexp": "^\\s+(\\d+):(\\d+)\\s+(error|warning|info)\\s+(.*)\\s\\s+(.*)$",
+					"line": 1,
+					"column": 2,
+					"severity": 3,
+					"message": 4,
+					"code": 5,
+					"loop": true
+				}
+			]
+		}
+	]
+}

.github/problemMatchers/tsc.json

@@ -0,0 +1,17 @@
+{
+	"problemMatcher": [
+		{
+			"owner": "tsc",
+			"pattern": [
+				{
+					"regexp": "^(?:\\s+\\d+\\>)?([^\\s].*)\\((\\d+|\\d+,\\d+|\\d+,\\d+,\\d+,\\d+)\\)\\s*:\\s+(error|warning|info)\\s+(\\w{1,2}\\d+)\\s*:\\s*(.*)$",
+					"file": 1,
+					"location": 2,
+					"severity": 3,
+					"code": 4,
+					"message": 5
+				}
+			]
+		}
+	]
+}

.github/workflows/continuous-integration.yml

@@ -0,0 +1,46 @@
+name: Continuous Integration
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+
+jobs:
+  Linting:
+    name: Linting
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Project
+        uses: actions/checkout@2541b1294d2704b0964813337f33b291d3f8596b # tag=v3
+      - name: Add problem matcher
+        run: echo "::add-matcher::.github/problemMatchers/eslint.json"
+      - name: Use Node.js v16
+        uses: actions/setup-node@2fddd8803e2f5c9604345a0b591c3020ee971a93 # tag=v3
+        with:
+          node-version: 16
+          cache: yarn
+          registry-url: https://registry.npmjs.org/
+      - name: Install Dependencies
+        run: yarn --frozen-lockfile
+      - name: Run ESLint
+        run: yarn lint --fix=false
+
+  Building:
+    name: Compile source code
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Project
+        uses: actions/checkout@2541b1294d2704b0964813337f33b291d3f8596b # tag=v3
+      - name: Add problem matcher
+        run: echo "::add-matcher::.github/problemMatchers/tsc.json"
+      - name: Use Node.js v16
+        uses: actions/setup-node@eeb10cff27034e7acf239c5d29f62154018672fd # tag=v3
+        with:
+          node-version: 16
+          cache: yarn
+          registry-url: https://registry.npmjs.org/
+      - name: Install Dependencies
+        run: yarn --frozen-lockfile
+      - name: Typecheck And Build Code
+        run: yarn typecheck && yarn build

.gitignore

@@ -12,7 +12,7 @@
 # next.js build output
 .next
 
-*node_modules
+node_modules
 .idea
 .DS_Store
 dist

.prettierrc

@@ -0,0 +1,6 @@
+{
+	"printWidth": 120,
+	"singleQuote": true,
+	"quoteProps": "as-needed",
+	"endOfLine": "lf"
+}

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true
+}

CHANGELOG.md

@@ -1,42 +1 @@
 # Changelogs
-
-## v0.0.16
-
-- Use `React.memo` for better performance
-- Allow passing custom css tag in props
-
-## v0.0.15
-
-- Properly handle `routeChangeError` event
-
-## v0.0.14
-
-### Added
-
-- Added nonce support
-- Added autocomplete for advanced options
-
-## v0.0.13
-
-### Fixed
-
-- Fixed react version issue
-
-## v0.0.12
-
-### Updated
-
-- Updated README.md's 'How to use' section to be more clear and consise. Also added further context to Default Config.
-- Updated Next.js version to v12
-
-## v0.0.11
-
-### Added
-
-- Added next.js version 11.0.0 in package.json `peerDependancies`.
-- Added color highlight to the code in the README.md file.
-- Added type of showOnShallow of NextNProgress class in `index.d.ts`.
-
-### Updated
-
-- Upgraded the `next` version to 11.0.0 in `devDependencies`.

LICENSE

@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.

README.md

@@ -1,46 +1,75 @@
-# Next.js Progressbar
+# Next.js 13 Progressbar
 
-A simple Next.js progressbar component using [NProgress](http://ricostacruz.com/nprogress/).
+A simple Next.js progressbar component using [NProgress](http://ricostacruz.com/nprogress/) with support of next.js 13 app dir.
 
-> [I've created this Blog to help you create your own progressbar](https://gosink.in/next-js-make-your-own-progress-bar-indicator-component-easily/)
+<!-- > [I've created this Blog to help you create your own progressbar](https://gosink.in/next-js-make-your-own-progress-bar-indicator-component-easily/) -->
 
-**Demo**: [https://demo-nextjs-progressbar.vercel.app](https://demo-nextjs-progressbar.vercel.app/)
+**Demo**: [https://demo-next13-progressbar.vercel.app](https://demo-next13-progressbar.vercel.app/)
 
 ## How to install?
 
 ```bash
-npm i nextjs-progressbar
+npm i next13-progressbar
 ```
 
 ## How to use?
 
-After installing the package, import `NextNProgress` in your `pages/_app.js` file:
+After installing the package, create `providers.tsx` file in app directory to handle contexts and mark it `use client`. see [contexts in app dir](https://nextjs.org/docs/getting-started/react-essentials#context) and import `NProvider;
 
-```js
-import NextNProgress from 'nextjs-progressbar';
+```jsx
+'use client';
+import React from 'react';
+import { NProvider } from 'next13-progressbar';
+
+const Providers = ({ children }: { children: React.ReactNode }) => {
+  return <NProvider color="#fff">{children}</NProvider>;
+};
+
+export default Providers;
 ```
 
-And for rendering add `<NextNProgress />` to your `return()` in `MyApp()`:
+Wrap your providers in `layout.tsx/js`
 
-```js
-import NextNProgress from 'nextjs-progressbar';
+```jsx
+import Providers from './providers';
 
-export default function MyApp({ Component, pageProps }) {
+export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <>
-      <NextNProgress />
-      <Component {...pageProps} />;
-    </>
+    <html lang="en">
+      <body className={inter.className}>
+        <Providers>{children}</Providers>
+      </body>
+    </html>
   );
 }
 ```
 
+Use `Link` component form `next13-progressbar` in your entire app instead of native `next/link` to navigate with progressbar
+
+```jsx
+'use client';
+import { Link } from 'next13-progressbar';
+
+export default function NavBar() {
+  return (
+    <div className="navbar">
+      <Link href={'/'}>Home</Link>
+      <Link href={'/about'}>About</Link>
+      <Link href={'/contact'}>Contact</Link>
+    </div>
+  );
+}
+```
+
+And you are done. You can now customize you progress bar as you need!
+⚠️ Note: You must use `Link` component inside client components only.
+
 ### Default Config
 
-If no props are passed to `<NextNProgress />`, below is the default configuration applied.
+If no props are passed to `<NProvider />`, below is the default configuration applied.
 
 ```jsx
-<NextNProgress color="#29D" startPosition={0.3} stopDelayMs={200} height={3} showOnShallow={true} />
+<NProvider color="#29D" startPosition={0.3} stopDelayMs={200} height={3} showOnShallow={true} />
 ```
 
 - `color`: to change the default color of progressbar. You can also use `rgb(,,)` or `rgba(,,,)`.
@@ -53,10 +82,10 @@ If no props are passed to `<NextNProgress />`, below is the default configuratio
 
 #### Adding nonce
 
-We use internal css in this package. If you are using csp, you can add nonce to the `<style>` tag by providing `nonce` prop to `<NextNProgress />` component.
+We use internal css in this package. If you are using csp, you can add nonce to the `<style>` tag by providing `nonce` prop to `<NProvider />` component.
 
 ```jsx
-<NextNProgress nonce="my-nonce" />
+<NProvider nonce="my-nonce" />
 ```
 
 #### Custom CSS
@@ -65,7 +94,7 @@ You can use `transformCSS` prop to pass custom css.
 **Note:** You must return a `JSX.Element` from the function.
 
 ```jsx
-<NextNProgress
+<NProvider
   transformCSS={(css) => {
     // css is the default css string. You can modify it and return it or return your own css.
     return <style>{css}</style>;
@@ -78,5 +107,13 @@ You can use `transformCSS` prop to pass custom css.
 You can use [other configurations](https://github.com/rstacruz/nprogress#configuration) which NProgress provides by adding a JSON in `options` props.
 
 ```jsx
-<NextNProgress options={{ easing: 'ease', speed: 500 }} />
+<NProvider options={{ easing: 'ease', speed: 500 }} />
 ```
+
+## Contributing
+
+Any Contribution of any kind are appreciated. You can start by forking this repository and make your changes then submit a pull request
+
+## Author
+
+- [Ndungutse Charles](https://github.com/NdungutseCharles103)

example/package.json

@@ -19,5 +19,8 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "typescript": "5.1.5"
+  },
+  "devDependencies": {
+    "husky": "^8.0.3"
   }
 }

example/src/app/about/page.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const AboutPage = () => {
+  return <div>AboutPage</div>;
+};
+
+export default AboutPage;

example/src/app/contact/page.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const ContactPage = () => {
+  return <div>ContactPage</div>;
+};
+
+export default ContactPage;