feat: improve css

.github/workflows/main.yml

@@ -58,4 +58,17 @@ jobs:
         run: pnpm build
 
       - name: Build NextJS example
-        run: cd examples/nextjs-example && pnpm install && pnpm link next-protect --global && pnpm build
+        run: cd examples/nextjs-example && pnpm install && pnpm link next-protect --global && pnpm build && cd ../..
+
+      - name: Install Playwright Browsers
+        run: pnpm exec playwright install --with-deps
+
+      - name: Run Playwright tests
+        run: pnpm exec playwright test
+
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -32,3 +32,7 @@ yarn-error.log*
 .env.production.local
 
 storybook-static
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

README.md

@@ -4,11 +4,11 @@ Protect your Next.js app with a password. A drop-in solution to keep your deploy
 
 ## ✨ Features
 
-- [x] Integrates with Next.js App Router.
-- [x] Supports Next.js Middleware, Edge runtime, RSC and SSR out of the box.
+- [x] App Router support out of the box.
+- [x] Supports Next.js Middleware, Edge runtime, RSC and SSR.
 - [x] Protect just a specific page or the entire app.
 - [x] Use one or more passwords.
-- [x] Customizable form.
+- [x] Customizable form and styles.
 
 > Check-out a [NextJS example](./examples/nextjs-example/) or view the [Demo](https://next-protect.vercel.app/).
 
@@ -65,6 +65,7 @@ Create a `src/app/next-protect/page.tsx` file and simply re-export the `NextProt
 
 ```tsx
 /* src/app/next-protect/page.tsx */
+import 'next-protect/styles.css';
 import { NextProtect } from 'next-protect/react';
 
 const Page = () => <NextProtect />;
@@ -78,15 +79,15 @@ Done! Now open your browser and navigate to `http://localhost:3000`. You will be
 
 ## 💪 Advanced usage
 
-### Server side rendering (without middleware)
+### 🤖 Server side rendering (without middleware)
 
 If you are using React Server Components (RSC), you can call `await np.isProtected()` in your `async` React component to check if the user is authenticated.
 
 > ❗ Important note: just because a layout component is protected does not mean that its child pages are protected.
 
 ```tsx
 /* src/app/page.tsx */
-'use server';
+import 'next-protect/styles.css';
 import { NextProtect } from 'next-protect/react';
 
 const Page = async () => {
@@ -100,12 +101,13 @@ const Page = async () => {
 };
 ```
 
-### Client side rendering (without middleware)
+### 🖥️ Client side rendering (without middleware)
 
 If you are using React Client Components, simply render a `NextProtect` component without any props. Internally the logic will fall-back to sending a request to `/api/next-protect` to check if the user is authenticated.
 
 ```tsx
 /* src/app/page.tsx */
+import 'next-protect/styles.css';
 import { NextProtect } from 'next-protect/react';
 
 const Page = () => {
@@ -119,7 +121,7 @@ const Page = () => {
 export default Page;
 ```
 
-### Multiple Passwords
+### 🔑 Multiple Passwords
 
 You can configure multiple passwords to be used for authentication by passing an array of passwords to the `NextProtect` component.
 
@@ -132,12 +134,13 @@ export const np = new NextProtect({
 });
 ```
 
-### Customizing the Form
+### 🎨 Customizing and Styling the Form
 
 The `NextProtect` component accepts a number of props that allow you to customize the form. Here are some examples:
 
 ```tsx
 /* src/app/next-protect/page.tsx */
+import 'next-protect/styles.css';
 import { NextProtect } from 'next-protect/react';
 
 const Page = () => (
@@ -155,7 +158,7 @@ const Page = () => (
 export default Page;
 ```
 
-### Custom redirects and rewrites
+### 🔄 Custom redirects and rewrites
 
 You can customize the redirect and rewrite behavior of the `NextProtect` component by passing the following options to the `NextProtect` constructor.
 
@@ -171,7 +174,7 @@ export const np = new NextProtect({
 });
 ```
 
-### Custom API endpoint
+### ⌨️ Custom API endpoint
 
 By default, the `NextProtect` component will use the `/api/next-protect` endpoint to check if the user is authenticated. You can customize this endpoint by passing the `api` prop to the `NextProtect` component.
 
@@ -186,6 +189,7 @@ export const np = new NextProtect({
 
 ```tsx
 /* src/app/next-protect/page.tsx */
+import 'next-protect/styles.css';
 import { NextProtect } from 'next-protect/react';
 
 const Page = () => <NextProtect api="/api/my-custom-endpoint" />;

examples/nextjs-example/src/app/layout.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
 import './globals.css';
 import { ReactNode } from 'react';
+// Enable for SSR
 // import { NextProtect } from 'next-protect/react';
 // import { np } from './api/next-protect';
 
@@ -20,6 +21,7 @@ export default async function RootLayout({
   return (
     <html lang="en">
       <body className={inter.className}>
+        {/* Enable for SSR */}
         {/* <NextProtect isProtected={await np.isProtected()}> */}
         {children}
         {/* </NextProtect> */}

examples/nextjs-example/src/app/next-protect/page.tsx

@@ -1,3 +1,5 @@
+import 'next-protect/styles.css';
+
 import { NextProtect } from 'next-protect/react';
 
 const Page = () => (

package.json

@@ -27,13 +27,14 @@
     "url": "https://github.com/TimMikeladze/next-protect"
   },
   "scripts": {
-    "dev": "concurrently \"pnpm build --watch\" \"pnpm test\" ",
+    "dev": "concurrently \"pnpm build --watch\"",
     "build": "tsup",
     "type-check": "tsc",
     "lint": "eslint --ignore-path .gitignore \"{src,tests}/**/*.+(ts|js|tsx|jsx)\"",
     "lint:fix": "pnpm lint --fix && prettier --write .",
-    "test": "vitest",
-    "test:ci": "vitest run --coverage",
+    "test": "pnpm playwright",
+    "test:ci": "pnpm playwright",
+    "playwright": "pnpm exec playwright test",
     "prepare": "husky",
     "commit": "cz",
     "storybook": "storybook dev -p 6006",
@@ -55,6 +56,10 @@
     "./react": {
       "require": "./dist/react/index.js",
       "import": "./dist/react/index.mjs"
+    },
+    "./styles.css": {
+      "require": "./dist/styles.css",
+      "import": "./dist/styles.css"
     }
   },
   "files": [
@@ -90,6 +95,7 @@
     "@babel/preset-env": "7.25.3",
     "@babel/preset-react": "7.24.7",
     "@babel/preset-typescript": "7.24.7",
+    "@playwright/test": "^1.45.3",
     "@ryansonshine/commitizen": "4.2.8",
     "@ryansonshine/cz-conventional-changelog": "3.3.4",
     "@storybook/addon-essentials": "8.2.6",
@@ -144,7 +150,7 @@
     "vitest": "2.0.5"
   },
   "peerDependencies": {
-    "next": ">=14",
+    "next": ">=13",
     "react": ">=17",
     "react-dom": ">=17"
   },

playwright.config.ts

@@ -0,0 +1,79 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './tests',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    // baseURL: 'http://127.0.0.1:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    // {
+    //   name: 'firefox',
+    //   use: { ...devices['Desktop Firefox'] },
+    // },
+
+    // {
+    //   name: 'webkit',
+    //   use: { ...devices['Desktop Safari'] },
+    // },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command:
+      'pnpm build && cd examples/nextjs-example && pnpm link next-protect --global && pnpm build && pnpm start',
+    url: 'http://127.0.0.1:3000',
+    reuseExistingServer: !process.env.CI,
+  },
+});

src/index.ts

@@ -0,0 +1 @@
+export {};