chore: update to storybook 7

.eslintrc.js

@@ -3,7 +3,7 @@ module.exports = {
     browser: true,
     es2021: true,
   },
-  extends: ['plugin:react/recommended', 'standard-with-typescript', 'prettier'],
+  extends: ['plugin:react/recommended', 'standard-with-typescript', 'prettier', 'plugin:storybook/recommended'],
   overrides: [],
   parserOptions: {
     ecmaVersion: 'latest',

.storybook/main.ts

@@ -0,0 +1,18 @@
+import type { StorybookConfig } from '@storybook/react-vite'
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-styling',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+}
+export default config

.storybook/preview.ts

@@ -0,0 +1,16 @@
+import type { Preview } from '@storybook/react'
+import '../src/lib/tailwind/theme.css'
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+}
+
+export default preview

README.md

@@ -3,7 +3,7 @@
 ## Features
 
 - ⚛️ [React 18](https://reactjs.org/)
-- 📚 [Storybook 6](https://storybook.js.org/) - Components preview
+- 📚 [Storybook 7](https://storybook.js.org/) - Components preview
 - 🖌️ [Tailwind CSS 3](https://tailwindcss.com/)
 - ⏩ [Vite](https://vitejs.dev/) - Run and build the project blazingly fast!
 - ⚡ [Vitest](https://vitest.dev/) - Components Unit Testing
@@ -18,7 +18,7 @@
 
 1. Create a new repository using this one as template
 2. Clone your repo
-3. Install dependencies with `pnpm` (first run `corepack enable` to enable pnpm)
+3. Install dependencies with `pnpm i` (first run `corepack enable` to enable pnpm)
 4. Run `pnpm prepare` command to setup [Husky](https://typicode.github.io/husky) pre-commit hooks.
 
 ### Main Scripts

a.js

@@ -0,0 +1,31 @@
+module.exports = {
+  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-styling',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  features: {
+    storyStoreV7: true,
+  },
+  docs: {
+    autodocs: true,
+  },
+}
+
+import '../src/lib/tailwind/theme.css'
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

package.json

@@ -17,8 +17,8 @@
     "node": "18.14.2"
   },
   "scripts": {
-    "dev": "start-storybook -p 6006",
-    "build": "build-storybook",
+    "dev": "storybook dev -p 6006",
+    "build": "storybook build",
     "build:lib": "tsc && vite build",
     "lint:fix": "eslint --ext .js,.jsx,.ts,.tsx --fix",
     "format:prettier": "prettier --write \"src/**/*.{ts,tsx,js,mdx}\"",
@@ -28,19 +28,19 @@
     "prepack": "json -f package.json -I -e \"delete this.devDependencies; delete this.dependencies\""
   },
   "dependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",
-    "@storybook/addon-actions": "^6.5.15",
-    "@storybook/addon-essentials": "^6.5.15",
-    "@storybook/addon-interactions": "^6.5.15",
-    "@storybook/addon-links": "^6.5.15",
-    "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/builder-vite": "^0.3.0",
-    "@storybook/react": "^6.5.15",
-    "@storybook/testing-library": "^0.0.13",
+    "@storybook/addon-essentials": "^7.0.9",
+    "@storybook/addon-interactions": "^7.0.9",
+    "@storybook/addon-links": "^7.0.9",
+    "@storybook/addon-styling": "^1.0.6",
+    "@storybook/blocks": "^7.0.9",
+    "@storybook/react": "^7.0.9",
+    "@storybook/react-vite": "^7.0.9",
+    "@storybook/testing-library": "^0.0.14-next.2",
     "@testing-library/react": "^13.4.0",
     "@types/node": "^18.11.18",
     "@types/react": "^18.0.26",
@@ -57,14 +57,17 @@
     "eslint-plugin-n": "^15.0.0",
     "eslint-plugin-promise": "^6.0.0",
     "eslint-plugin-react": "^7.32.1",
+    "eslint-plugin-storybook": "^0.6.12",
     "husky": ">=6",
     "jsdom": "^21.0.0",
     "json": "^11.0.0",
     "lint-staged": ">=10",
     "postcss": "^8.4.21",
     "prettier": "^2.8.3",
+    "prop-types": "^15.8.1",
+    "storybook": "^7.0.9",
     "tailwindcss": "^3.2.4",
-    "typescript": "*",
+    "typescript": "5.0.4",
     "vite": "^4.0.0",
     "vite-plugin-dts": "^1.7.1",
     "vitest": "^0.27.2"