Merge pull request #23 from ixartz/june-2024-update

feat: update to Drizzle Kit 0.22, Storybook 8, migrate to vitest

.env

@@ -1,14 +1,14 @@
 # FIXME: Configure environment variables for your project
 
 # For security reason, don't push secret key in your git repo.
-# Append .local to the environement files to prevent your secret key from being commited to Git.
+# Append .local to the environment files to prevent your secret key from being commited to Git.
 
 # Hosting
-# Replace by your domain name
-NEXT_PUBLIC_APP_URL=https://example.com
+# Replace by your domain name, only for production
+# NEXT_PUBLIC_APP_URL=https://example.com
 
 # Database
-# Please use a working DATABASE_URL. Otherwise, Next.js build will timeout and you will get the following error: "because it took more than 60 seconds"
+# Using an incorrect DATABASE_URL value, Next.js build will timeout and you will get the following error: "because it took more than 60 seconds"
 # DATABASE_URL=libsql://[RANDOM-CHARS]-[DB-NAME]-[ORG-NAME].turso.io
 DATABASE_URL=file:next-js-boilerplate.db
 
@@ -18,14 +18,18 @@ NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_Z2FtZS13b29kY29jay00NC5jbGVyay5hY2NvdW
 NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
 
 # Stripe
-NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_51Ilz7WEK74ldPEzAEv0ob3pQuxSEvPp8pWNOsBXtU1MFdxchmlmIvpjiJxJfTELoViteODEmAwNwOoktE3FCMRDl00nTXobyBe
+# If you need a real Stripe subscription payment with checkout page, customer portal, webhook, etc.
+# You can check out the Next.js Boilerplate Pro: https://nextjs-boilerplate.com/pro-saas-starter-kit
+NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_51PNk4fKOp3DEwzQle6Cx1j3IW1Lze5nFKZ4JBX0gLpNQ3hjFbMiT25gw7LEr369ge7JIsVA2qRhdKQm1NAmVehXl00FQxwRfh1
+# Use Stripe test mode price id or production price id
+BILLING_PLAN_ENV=dev
 
 ######## [BEGIN] SENSITIVE DATA ######## For security reason, don't update the following variables (secret key) directly in this file.
 ######## Please create a new file named `.env.local`, all environment files ending with `.local` won't be tracked by Git.
 ######## After creating the file, you can add the following variables.
 CLERK_SECRET_KEY=your_clerk_secret_key
 
-# DATABASE_AUTH_TOKEN=
+DATABASE_AUTH_TOKEN=your_database_auth_token
 
 # LOGTAIL_SOURCE_TOKEN=
 

.eslintrc.json

@@ -22,7 +22,7 @@
   "overrides": [
     // Configuration for TypeScript files
     {
-      "files": ["**/*.ts", "**/*.tsx"],
+      "files": ["**/*.ts", "**/*.tsx", "**/*.mts"],
       "plugins": [
         "@typescript-eslint",
         "unused-imports",
@@ -36,6 +36,7 @@
         "next/core-web-vitals",
         "plugin:prettier/recommended"
       ],
+      "parser": "@typescript-eslint/parser",
       "parserOptions": {
         "project": "./tsconfig.json"
       },
@@ -76,9 +77,9 @@
     // Configuration for testing
     {
       "files": ["**/*.test.ts", "**/*.test.tsx"],
-      "plugins": ["jest", "jest-formatting", "testing-library", "jest-dom"],
+      "plugins": ["vitest", "jest-formatting", "testing-library", "jest-dom"],
       "extends": [
-        "plugin:jest/recommended",
+        "plugin:vitest/recommended",
         "plugin:jest-formatting/recommended",
         "plugin:testing-library/react",
         "plugin:jest-dom/recommended"

.gitignore

@@ -13,6 +13,7 @@
 
 # storybook
 storybook-static
+*storybook.log
 
 # playwright
 /test-results/

.storybook/main.ts

@@ -1,19 +1,18 @@
 import type { StorybookConfig } from '@storybook/nextjs';
 
 const config: StorybookConfig = {
-  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
+    '@storybook/addon-onboarding',
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
   ],
   framework: {
     name: '@storybook/nextjs',
-    options: { builder: { useSWC: true } },
-  },
-  docs: {
-    autodocs: 'tag',
+    options: {},
   },
+  staticDirs: ['../public'],
   core: {
     disableTelemetry: true,
   },

.storybook/preview.ts

@@ -4,13 +4,15 @@ import type { Preview } from '@storybook/react';
 
 const preview: Preview = {
   parameters: {
-    actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {
       matchers: {
         color: /(background|color)$/i,
-        date: /Date$/,
+        date: /Date$/i,
       },
     },
+    nextjs: {
+      appDirectory: true,
+    },
   },
 };
 

README.md

@@ -4,7 +4,7 @@
   <a href="https://creativedesignsguru.com/demo/Nextjs-Boilerplate/"><img height="300" src="public/assets/images/nextjs-starter-banner.png?raw=true" alt="Next js starter banner"></a>
 </p>
 
-🚀 Boilerplate and Starter for Next.js with App Router support, Tailwind CSS and TypeScript ⚡️ Made with developer experience first: Next.js, TypeScript, ESLint, Prettier, Husky, Lint-Staged, Jest, Testing Library, Commitlint, VSCode, PostCSS, Tailwind CSS, Authentication with [Clerk](https://go.clerk.com/zGlzydF), Database with DrizzleORM (SQLite, PostgreSQL, and MySQL) and [Turso](https://turso.tech/?utm_source=nextjsstarterbp), Error Monitoring with [Sentry](https://sentry.io/for/nextjs/?utm_source=github&utm_medium=paid-community&utm_campaign=general-fy25q1-nextjs&utm_content=github-banner-nextjsboilerplate-logo), Logging with Pino.js and Log Management, Monitoring as Code, Storybook, Multi-language (i18n), and more.
+🚀 Boilerplate and Starter for Next.js with App Router support, Tailwind CSS and TypeScript ⚡️ Made with developer experience first: Next.js, TypeScript, ESLint, Prettier, Husky, Lint-Staged, Vitest (replacing Jest), Testing Library, Commitlint, VSCode, PostCSS, Tailwind CSS, Authentication with [Clerk](https://go.clerk.com/zGlzydF), Database with DrizzleORM (SQLite, PostgreSQL, and MySQL) and [Turso](https://turso.tech/?utm_source=nextjsstarterbp), Error Monitoring with [Sentry](https://sentry.io/for/nextjs/?utm_source=github&utm_medium=paid-community&utm_campaign=general-fy25q1-nextjs&utm_content=github-banner-nextjsboilerplate-logo), Logging with Pino.js and Log Management, Monitoring as Code, Storybook, Multi-language (i18n), and more.
 
 Clone this project and use it to create your own SaaS. You can check the live demo at [SaaS Boilerplate](https://react-saas.com).
 
@@ -17,7 +17,7 @@ Clone this project and use it to create your own SaaS. You can check the live de
         <picture>
           <source media="(prefers-color-scheme: dark)" srcset="https://github.com/ixartz/SaaS-Boilerplate/assets/1328388/6fb61971-3bf1-4580-98a0-10bd3f1040a2">
           <source media="(prefers-color-scheme: light)" srcset="https://github.com/ixartz/SaaS-Boilerplate/assets/1328388/f80a8bb5-66da-4772-ad36-5fabc5b02c60">
-          <img alt="Clerk – Authentication & User Management for Next.js" src="https://github.com/ixartz/SaaS-Boilerplate/assets/1328388/6fb61971-3bf1-4580-98a0-10bd3f1040a2">
+          <img alt="Clerk – Authentication & User Management for Next.js" src="https://github.com/ixartz/SaaS-Boilerplate/assets/1328388/f80a8bb5-66da-4772-ad36-5fabc5b02c60">
         </picture>
       </a>
     </td>
@@ -74,6 +74,7 @@ Developer experience first, extremely flexible code structure and only keep what
 - 💎 Integrate with [Tailwind CSS](https://tailwindcss.com) and Shadcn UI
 - ✅ Strict Mode for TypeScript and React 18
 - 🔒 Authentication with [Clerk](https://go.clerk.com/zGlzydF): Sign up, Sign in, Sign out, Forgot password, Reset password, and more.
+- 👤 Passwordless Authentication with Magic Links, Multi-Factor Auth (MFA), Social Auth (Google, Facebook, Twitter, GitHub, Apple, and more), Passwordless login with Passkeys, User Impersonation
 - 👥 Multi-tenancy & team support: create, switch, update organization and invite team members
 - 📝 Role-based access control and permissions
 - 👤 Multi-Factor Auth (MFA), Social Auth (Google, Facebook, Twitter, GitHub, Apple, and more), User Impersonation
@@ -89,7 +90,7 @@ Developer experience first, extremely flexible code structure and only keep what
 - 🚫 Lint-staged for running linters on Git staged files
 - 🚓 Lint git commit with Commitlint
 - 📓 Write standard compliant commit messages with Commitizen
-- 🦺 Unit Testing with Jest and React Testing Library
+- 🦺 Unit Testing with Vitest and React Testing Library
 - 🧪 Integration and E2E Testing with Playwright
 - 👷 Run tests on pull request with GitHub Actions
 - 🎉 Storybook for UI development
@@ -251,7 +252,7 @@ One of the benefits of using Conventional Commits is that it allows us to automa
 
 ### Testing
 
-All unit tests are located with the source code inside the same directory. So, it makes it easier to find them. The project uses Jest and React Testing Library for unit testing. You can run the tests with:
+All unit tests are located with the source code inside the same directory. So, it makes it easier to find them. The project uses Vitest and React Testing Library for unit testing. You can run the tests with:
 
 ```shell
 npm run test
@@ -364,7 +365,7 @@ Then, you can open https://local.drizzle.studio with your favorite browser to ex
 
 If you are VSCode users, you can have a better integration with VSCode by installing the suggested extension in `.vscode/extension.json`. The starter code comes up with Settings for a seamless integration with VSCode. The Debug configuration is also provided for frontend and backend debugging experience.
 
-With the plugins installed on your VSCode, ESLint and Prettier can automatically fix the code and show you the errors. Same goes for testing, you can install VSCode Jest extension to automatically run your tests and it also show the code coverage in context.
+With the plugins installed on your VSCode, ESLint and Prettier can automatically fix the code and show you the errors. Same goes for testing, you can install VSCode Vitest extension to automatically run your tests and it also show the code coverage in context.
 
 Pro tips: if you need a project wide type checking with TypeScript, you can run a build with <kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>B</kbd> on Mac.
 
@@ -387,7 +388,7 @@ See [LICENSE](LICENSE) for more information.
         <picture>
           <source media="(prefers-color-scheme: dark)" srcset="https://github.com/ixartz/SaaS-Boilerplate/assets/1328388/6fb61971-3bf1-4580-98a0-10bd3f1040a2">
           <source media="(prefers-color-scheme: light)" srcset="https://github.com/ixartz/SaaS-Boilerplate/assets/1328388/f80a8bb5-66da-4772-ad36-5fabc5b02c60">
-          <img alt="Clerk – Authentication & User Management for Next.js" src="https://github.com/ixartz/SaaS-Boilerplate/assets/1328388/6fb61971-3bf1-4580-98a0-10bd3f1040a2">
+          <img alt="Clerk – Authentication & User Management for Next.js" src="https://github.com/ixartz/SaaS-Boilerplate/assets/1328388/f80a8bb5-66da-4772-ad36-5fabc5b02c60">
         </picture>
       </a>
     </td>

drizzle.config.ts

@@ -4,8 +4,12 @@ import type { Config } from 'drizzle-kit';
 export default {
   out: './migrations',
   schema: './src/models/Schema.ts',
-  driver: 'libsql',
+  dialect: 'sqlite',
+  driver: 'turso',
   dbCredentials: {
     url: process.env.DATABASE_URL ?? '',
+    authToken: process.env.DATABASE_AUTH_TOKEN ?? '',
   },
+  verbose: true,
+  strict: true,
 } satisfies Config;

migrations/meta/0000_snapshot.json

@@ -1,7 +1,7 @@
 {
-  "version": "5",
+  "version": "6",
   "dialect": "sqlite",
-  "id": "e906680d-a028-4a58-a167-190a4b938a4f",
+  "id": "a54e8325-0562-48ea-80c1-e811c6115651",
   "prevId": "00000000-0000-0000-0000-000000000000",
   "tables": {
     "organization": {
@@ -136,5 +136,8 @@
     "schemas": {},
     "tables": {},
     "columns": {}
+  },
+  "internal": {
+    "indexes": {}
   }
 }

migrations/meta/_journal.json

@@ -1,12 +1,12 @@
 {
-  "version": "5",
+  "version": "7",
   "dialect": "sqlite",
   "entries": [
     {
       "idx": 0,
-      "version": "5",
-      "when": 1711410457358,
-      "tag": "0000_vengeful_bill_hollister",
+      "version": "6",
+      "when": 1717543980997,
+      "tag": "0000_init_db",
       "breakpoints": true
     }
   ]

next.config.mjs

@@ -25,21 +25,6 @@ export default withSentryConfig(
       },
       poweredByHeader: false,
       reactStrictMode: true,
-      experimental: {
-        // Related to Pino error with RSC: https://github.com/orgs/vercel/discussions/3150
-        serverComponentsExternalPackages: ['pino'],
-      },
-      webpack: (config) => {
-        // config.externals is needed to resolve the following errors:
-        // Module not found: Can't resolve 'bufferutil'
-        // Module not found: Can't resolve 'utf-8-validate'
-        config.externals.push({
-          bufferutil: 'bufferutil',
-          'utf-8-validate': 'utf-8-validate',
-        });
-
-        return config;
-      },
     }),
   ),
   {