update the whole repository setup

Author: ValentinH

.babelrc

@@ -1,15 +1,27 @@
 {
   "extends": [
     "plugin:@typescript-eslint/recommended",
-    "react-app",
-    "prettier",
-    "prettier/@typescript-eslint",
-    "prettier/react"
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "prettier"
   ],
-  "plugins": ["@typescript-eslint/eslint-plugin"],
+  "plugins": ["@typescript-eslint"],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 2020,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
   "rules": {
     "@typescript-eslint/explicit-function-return-type": 0,
-    "@typescript-eslint/ban-ts-ignore": 0,
+    "@typescript-eslint/ban-ts-comment": 0,
     "@typescript-eslint/explicit-module-boundary-types": 0,
     "@typescript-eslint/ban-types": 0
   }

.eslintrc.json

@@ -13,10 +13,10 @@ jobs:
     steps:
       - uses: actions/checkout@v2
 
-      - name: Use Node.js 18.x
+      - name: Use Node.js 22.x
         uses: actions/setup-node@v1
         with:
-          node-version: 18.x
+          node-version: 22.x
 
       # setup cache
       - name: Get yarn cache directory path

.github/workflows/github-pages.yml

@@ -1 +1 @@
-18
+22

.nvmrc

@@ -0,0 +1,8 @@
+import { create } from 'storybook/theming'
+
+export default create({
+  base: 'light',
+  brandTitle: 'react-easy-sort',
+  brandUrl: 'https://valentinh.github.io/react-easy-sort',
+  brandTarget: '_self',
+})

.storybook/custom-theme.ts

@@ -1,4 +1,9 @@
-module.exports = {
+import type { StorybookConfig } from '@storybook/nextjs-vite'
+
+const config: StorybookConfig = {
+  framework: '@storybook/nextjs-vite',
   stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: ['@storybook/addon-essentials', '@storybook/addon-links'],
+  addons: ['@storybook/addon-links', '@storybook/addon-docs'],
 }
+
+export default config

.storybook/main.ts

@@ -1,11 +1,6 @@
-import { addons } from '@storybook/addons'
-import { create } from '@storybook/theming'
-
-const theme = create({
-  base: 'light',
-  brandTitle: 'react-easy-sort',
-})
+import { addons } from 'storybook/manager-api'
+import customTheme from './custom-theme'
 
 addons.setConfig({
-  theme,
+  theme: customTheme,
 })

.storybook/manager.ts

@@ -0,0 +1,16 @@
+import './tailwind.css'
+
+import type { Preview } from '@storybook/react'
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+}
+
+export default preview

.storybook/preview.ts

@@ -0,0 +1 @@
+@import "tailwindcss";

.storybook/tailwind.css

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  // This is only needed for Storybook
+}
+
+module.exports = nextConfig