Merge pull request #280 from ixartz/vitest

Update to Storybook to version 8 and migrate from Jest to Vitest

.env

@@ -4,8 +4,8 @@
 # Append .local to the environement 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"

.eslintrc.json

@@ -70,9 +70,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,
+    },
   },
 };
 

.vscode/extensions.json

@@ -4,7 +4,7 @@
     "mikestead.dotenv",
     "csstools.postcss",
     "bradlc.vscode-tailwindcss",
-    "Orta.vscode-jest",
+    "vitest.explorer",
     "humao.rest-client",
     "yoavbls.pretty-ts-errors",
     "ms-playwright.playwright",

.vscode/settings.json

@@ -20,17 +20,7 @@
     "lucide-react"
   ],
   "typescript.preferences.preferTypeOnlyAutoImports": true, // Prefer type-only imports
-  "jest.runMode": {
-    "type": "on-save",
-    "testFileOnly": true,
-    "coverage": true
-  }, // Configure Jest extension
-  "jest.outputConfig": {
-    "revealOn": "error",
-    "revealWithFocus": "test-results",
-    "clearOnRun": "none"
-  }, // Switch to test-results view when test fails
-  "testing.openTesting": "neverOpen", // For a consistent Jest output experience, the simplest solution is to set to "neverOpen"
+  "testing.openTesting": "neverOpen", // Don't open the testing view automatically when running tests
   // Multiple language settings for json and jsonc files
   "[json][jsonc][yaml]": {
     "editor.formatOnSave": 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 ⚡️ Prioritizing developer experience first: Next.js, TypeScript, ESLint, Prettier, Husky, Lint-Staged, Jest, Testing Library, Commitlint, VSCode, PostCSS, Tailwind CSS, Authentication with [Clerk](https://clerk.com?utm_source=github&utm_medium=sponsorship&utm_campaign=nextjs-boilerplate), 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 ⚡️ Prioritizing developer experience first: Next.js, TypeScript, ESLint, Prettier, Husky, Lint-Staged, Jest (replaced by Vitest), Testing Library, Commitlint, VSCode, PostCSS, Tailwind CSS, Authentication with [Clerk](https://clerk.com?utm_source=github&utm_medium=sponsorship&utm_campaign=nextjs-boilerplate), 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 [Next.js](https://nextjs.org) project. You can check a [Next js templates demo](https://creativedesignsguru.com/demo/Nextjs-Boilerplate/).
 
@@ -77,11 +77,6 @@ Clone this project and use it to create your own [Next.js](https://nextjs.org) p
     </td>
   </tr>
   <tr height="187px">
-    <td align="center" width="33%">
-      <a href="https://upstash.com/?utm_source=nextjs-boilerplate">
-        <img src="https://raw.githubusercontent.com/upstash/sponsorship/master/redis.png" alt="Upstash">
-      </a>
-    </td>
     <td align="center" width="33%">
       <a href="https://www.checklyhq.com/?utm_source=github&utm_medium=sponsorship&utm_campaign=next-js-boilerplate">
         <picture>
@@ -127,7 +122,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
@@ -290,7 +285,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
@@ -403,7 +398,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.
 
@@ -486,11 +481,6 @@ See [LICENSE](LICENSE) for more information.
     </td>
   </tr>
   <tr height="187px">
-    <td align="center" width="33%">
-      <a href="https://upstash.com/?utm_source=nextjs-boilerplate">
-        <img src="https://raw.githubusercontent.com/upstash/sponsorship/master/redis.png" alt="Upstash">
-      </a>
-    </td>
     <td align="center" width="33%">
       <a href="https://www.checklyhq.com/?utm_source=github&utm_medium=sponsorship&utm_campaign=next-js-boilerplate">
         <picture>

next.config.mjs

@@ -29,17 +29,6 @@ export default withSentryConfig(
         // 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;
-      },
     }),
   ),
   {