Migrate to vite 4

.devcontainer/Dockerfile

@@ -1,6 +1,6 @@
 # See here for image contents: https://github.com/microsoft/vscode-dev-containers/tree/v0.145.1/containers/typescript-node/.devcontainer/base.Dockerfile
 
-ARG VARIANT="16-bullseye"
+ARG VARIANT="18-bullseye"
 FROM mcr.microsoft.com/vscode/devcontainers/typescript-node:0-${VARIANT}
 
 # [Optional] Uncomment this section to install additional OS packages.

.devcontainer/devcontainer.json

@@ -2,7 +2,7 @@
   "name": "react-vite-storybook-typescript-starter",
   "build": {
     "dockerfile": "Dockerfile",
-    "args": { "VARIANT": "16" }
+    "args": { "VARIANT": "18-bullseye" }
   },
 
   // Add the IDs of extensions you want installed when the container is created.
@@ -22,7 +22,7 @@
   // "forwardPorts": [],
 
   // Use 'postCreateCommand' to run commands after the container is created.
-  "postCreateCommand": "npm install"
+  "postCreateCommand": "npm install --legacy-peer-deps"
 
   // Uncomment to connect as a non-root user. See https://aka.ms/vscode-remote/containers/non-root.
   // "remoteUser": "node"

.eslintrc.js

@@ -27,5 +27,6 @@ module.exports = {
     'import/no-extraneous-dependencies': 'off',
     'react/require-default-props': 'off',
     'react/jsx-fragments': ['error', 'element'],
+    'react/no-unknown-property': ['error', { ignore: ['css'] }],
   },
 };

.github/workflows/cd-npm.yml

@@ -13,16 +13,16 @@ jobs:
       - name: Checkout repo
         uses: actions/checkout@v3
         with:
-          fetch-depth: '0'
+          fetch-depth: '1'
 
       - name: Configure node for npmjs.org as registry
         uses: actions/setup-node@v3
         with:
-          node-version: '16.x'
+          node-version: '18.x'
           registry-url: 'https://registry.npmjs.org'
 
       - name: Install dependencies
-        run: npm ci
+        run: npm ci --legacy-peer-deps
 
       - name: Build
         run: npm run build

.github/workflows/cd-storybook.yml

@@ -17,10 +17,10 @@ jobs:
       - name: Use nodejs
         uses: actions/setup-node@v3
         with:
-          node-version: '16.x'
+          node-version: '18.x'
 
       - name: Install dependencies
-        run: npm ci
+        run: npm ci --legacy-peer-deps
 
       - name: Build storybook
         run: npm run build:storybook

.github/workflows/check-size.yml

@@ -15,6 +15,15 @@ jobs:
       - name: Checkout repo
         uses: actions/checkout@v3
 
+      - name: Use nodejs
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18.x'
+
+      - name: Install dependencies
+        run: npm ci --legacy-peer-deps
+
       - uses: andresz1/size-limit-action@v1
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
+          skip_step: install

.github/workflows/ci.yml

@@ -8,7 +8,7 @@ jobs:
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        node: ['14.x', '16.x']
+        node: ['18.x']
         os: [ubuntu-latest, windows-latest, macOS-latest]
 
     steps:
@@ -22,7 +22,7 @@ jobs:
           cache: npm
 
       - name: Install dependencies
-        run: npm ci
+        run: npm ci --legacy-peer-deps
 
       - name: Check format
         run: npm run check:format

.storybook/main.js

@@ -1,43 +1,44 @@
 const react = require("@vitejs/plugin-react");
-
 module.exports = {
   stories: ["../stories/Start.stories.mdx", "../stories/**/*.stories.mdx", "../stories/**/*.stories.@(js|jsx|ts|tsx)"],
-  staticDirs: [{ from: '../docs', to: '/docs'}],
+  staticDirs: [{
+    from: '../docs',
+    to: '/docs'
+  }],
   addons: [{
     name: '@storybook/addon-docs',
     options: {
       configureJSX: true,
       transcludeMarkdown: true
     }
   }, "@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-storysource"],
-  core: {
-    "builder": "@storybook/builder-vite"
-  },
-
   async viteFinal(config, {
     configType
   }) {
     config.plugins = config.plugins.filter(plugin => !(Array.isArray(plugin) && plugin[0]?.name.includes("vite:react")));
-
     if (config.optimizeDeps) {
       config.optimizeDeps.include = [...(config.optimizeDeps.include || []), '@emotion/react/jsx-dev-runtime'];
     }
-
     config.plugins.push(react({
       exclude: [/\.stories\.(t|j)sx?$/, /node_modules/],
       jsxImportSource: "@emotion/react",
       babel: {
         plugins: ["@emotion/babel-plugin"]
       }
     }));
-
     if (configType === "PRODUCTION") {
-      return { ...config,
+      return {
+        ...config,
         base: './'
       };
     }
-
     return config;
+  },
+  framework: {
+    name: "@storybook/react-vite",
+    options: {}
+  },
+  docs: {
+    docsPage: "automatic"
   }
-
-};
+};