Migrate to React 18 (#658)

Author: nowyDEV

.storybook/main.ts

@@ -1,4 +1,5 @@
 import type { StorybookConfig } from "@storybook/react-vite";
+import react from "@vitejs/plugin-react";
 
 const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.@(story|stories).@(ts|tsx)"],
@@ -16,9 +17,7 @@ const config: StorybookConfig = {
 
   framework: {
     name: "@storybook/react-vite",
-    options: {
-      legacyRootApi: true,
-    },
+    options: {},
   },
 
   core: {
@@ -29,6 +28,30 @@ const config: StorybookConfig = {
     autodocs: "tag",
     defaultName: "Docs",
   },
+
+  // eslint-disable-next-line @typescript-eslint/require-await -- setup support for css prop
+  async viteFinal(viteConfig) {
+    viteConfig.plugins = viteConfig.plugins?.filter(
+      (plugin) =>
+        !(Array.isArray(plugin) &&
+        plugin[0] != null &&
+        typeof plugin[0] === "object" &&
+        "name" in plugin[0]
+          ? plugin[0].name.includes("vite:react")
+          : false)
+    );
+
+    viteConfig.plugins?.push(
+      react({
+        exclude: [/\.stories\.(t|j)sx?$/, /node_modules/],
+        babel: {
+          plugins: ["babel-plugin-styled-components"],
+        },
+      })
+    );
+
+    return viteConfig;
+  },
 };
 
 export default config;

.storybook/preview.tsx

@@ -8,7 +8,6 @@ const preview: Preview = {
   parameters: {
     viewport: {
       viewports: INITIAL_VIEWPORTS, // newViewports would be an ViewportMap. (see below for examples)
-      defaultViewport: "desktop",
     },
 
     options: {

knip.jsonc

@@ -1,7 +1,7 @@
 {
   "$schema": "https://unpkg.com/knip@next/schema.json",
   "entry": ["src/index.ts!"],
-  "project": ["src/**/*.{ts,tsx,mdx}!", ".storybook/**/*.js"],
+  "project": ["src/**/*.{ts,tsx,mdx}!", ".storybook/**/*.{js,ts}"],
   "ignoreDependencies": [
     // False-positives
     "@typescript-eslint/parser",
@@ -14,7 +14,9 @@
     // Can be listed explicitly in the future
     "@types/eslint",
     // Used in `src/setupTests.ts`
-    "@testing-library/jest-dom"
+    "@testing-library/jest-dom",
+    "@vitejs/plugin-react",
+    "babel-plugin-styled-components"
   ],
   "rules": {
     "enumMembers": "warn"