Update to vite and zendesk 8.76

.storybook/main.js

@@ -1,21 +1,20 @@
-/** @type { import('@storybook/react-webpack5').StorybookConfig } */
+/** @type { import('@storybook/react-vite').StorybookConfig } */
 const config = {
-  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
-    "@storybook/preset-create-react-app",
-    "@storybook/addon-a11y"
+    "@storybook/addon-a11y",
   ],
   framework: {
-    name: "@storybook/react-webpack5",
+    name: "@storybook/react-vite",
     options: {},
   },
   typescript: {
     check: false,
     checkOptions: {},
-    reactDocgen: 'react-docgen-typescript',
+    reactDocgen: "react-docgen-typescript",
     reactDocgenTypescriptOptions: {
       shouldExtractLiteralValuesFromEnum: true, // makes union prop types like variant and size appear as select controls
       shouldRemoveUndefinedFromOptional: true, // makes string and boolean types that can be undefined appear as inputs and switches
@@ -27,6 +26,12 @@ const config = {
   },
   core: {
     disableTelemetry: true,
+    builder: {
+      name: "@storybook/builder-vite",
+      options: {
+        viteConfigPath: "./vite.config.storybook.mts",
+      },
+    },
   },
 };
 export default config;

.storybook/manager.js

@@ -1,6 +1,6 @@
-import {addons} from '@storybook/addons';
-import unguessTheme from './unguessTheme';
+import { addons } from "@storybook/manager-api";
+import unguessTheme from "./unguessTheme";
 
 addons.setConfig({
-    theme: unguessTheme,
-});
+  theme: unguessTheme,
+});

.storybook/preview.js → .storybook/preview.tsx

@@ -1,4 +1,5 @@
 import { ThemeProvider } from "@zendeskgarden/react-theming";
+import React from "react";
 import { GlobalStyle } from "../src/stories/shared/globalStyle";
 import { theme } from "../src/stories/theme";
 

.vite/commands/setEnv.ts

@@ -0,0 +1,18 @@
+import { readFileSync } from "fs";
+import { loadEnv } from "vite";
+
+export function setEnv(mode: string) {
+  Object.assign(
+    process.env,
+    loadEnv(mode, ".", ["REACT_APP_", "NODE_ENV", "PUBLIC_URL"])
+  );
+  process.env.NODE_ENV ||= mode;
+  const { homepage } = JSON.parse(readFileSync("package.json", "utf-8"));
+  process.env.PUBLIC_URL ||= homepage
+    ? `${
+        homepage.startsWith("http") || homepage.startsWith("/")
+          ? homepage
+          : `/${homepage}`
+      }`.replace(/\/$/, "")
+    : "";
+}

.vite/plugins/svgr.ts

@@ -0,0 +1,40 @@
+import { readFileSync } from "node:fs";
+
+import { Plugin, createFilter, transformWithEsbuild } from "vite";
+
+// In Create React App, SVGs can be imported directly as React components. This is achieved by svgr libraries.
+// https://create-react-app.dev/docs/adding-images-fonts-and-files/#adding-svgs
+export function svgrPlugin(): Plugin {
+  const filter = createFilter("**/*.svg");
+  const postfixRE = /[?#].*$/s;
+
+  return {
+    name: "svgr-plugin",
+    async transform(code, id) {
+      if (filter(id)) {
+        const { transform } = await import("@svgr/core");
+        const { default: jsx } = await import("@svgr/plugin-jsx");
+
+        const filePath = id.replace(postfixRE, "");
+        const svgCode = readFileSync(filePath, "utf8");
+
+        const componentCode = await transform(svgCode, undefined, {
+          filePath,
+          caller: {
+            previousExport: code,
+            defaultPlugins: [jsx],
+          },
+        });
+
+        const res = await transformWithEsbuild(componentCode, id, {
+          loader: "jsx",
+        });
+
+        return {
+          code: res.code,
+          map: null,
+        };
+      }
+    },
+  };
+}

package.json

@@ -5,13 +5,16 @@
   "main": "build/index.js",
   "types": "build/index.d.ts",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "build": "yarn run clean && rollup -c",
-    "clean": "rimraf build",
+    "build": "vite build",
+    "build:watch": "vite build --mode development --watch",
     "release": "npx auto shipit --base-branch=master",
-    "type:check": "tsc"
+    "type:check": "tsc",
+    "dev": "vite",
+    "start": "vite",
+    "lint": "eslint --ext .tsx,.ts .",
+    "analyze": "npx vite-bundle-visualizer"
   },
   "repository": {
     "type": "git",
@@ -26,15 +29,15 @@
   "homepage": "https://github.com/AppQuality/unguess-design-system#readme",
   "dependencies": {
     "@appquality/stream-player": "1.0.6",
-    "@nivo/bar": "^0.80.0",
-    "@nivo/bullet": "^0.80.0",
-    "@nivo/core": "^0.80.0",
-    "@nivo/line": "^0.80.0",
-    "@nivo/pie": "^0.80.0",
-    "@nivo/stream": "^0.80.0",
-    "@nivo/sunburst": "^0.80.0",
-    "@nivo/tooltip": "^0.80.0",
-    "@nivo/waffle": "^0.80.0",
+    "@nivo/bar": "^0.87.0",
+    "@nivo/bullet": "^0.87.0",
+    "@nivo/core": "^0.87.0",
+    "@nivo/line": "^0.87.0",
+    "@nivo/pie": "^0.87.0",
+    "@nivo/stream": "^0.87.0",
+    "@nivo/sunburst": "^0.87.0",
+    "@nivo/tooltip": "^0.87.0",
+    "@nivo/waffle": "^0.87.0",
     "@sereneinserenade/tiptap-search-and-replace": "^0.1.1",
     "@tiptap/extension-bubble-menu": "2.4.0",
     "@tiptap/extension-character-count": "2.2.4",
@@ -51,25 +54,29 @@
     "@tiptap/react": "2.2.4",
     "@tiptap/starter-kit": "2.2.4",
     "@tiptap/suggestion": "2.2.4",
-    "@types/react-slick": "^0.23.10",
     "@zendeskgarden/container-utilities": "^2.0.0",
     "@zendeskgarden/css-bedrock": "^9.0.0",
-    "@zendeskgarden/react-accordions": "^8.49.0",
-    "@zendeskgarden/react-avatars": "^8.49.0",
-    "@zendeskgarden/react-breadcrumbs": "^8.49.0",
-    "@zendeskgarden/react-buttons": "^8.48.2",
-    "@zendeskgarden/react-chrome": "^8.49.0",
-    "@zendeskgarden/react-colorpickers": "^8.73.2",
-    "@zendeskgarden/react-grid": "^8.49.0",
-    "@zendeskgarden/react-loaders": "^8.49.0",
-    "@zendeskgarden/react-modals": "^8.49.0",
-    "@zendeskgarden/react-notifications": "^8.49.0",
-    "@zendeskgarden/react-pagination": "^8.49.0",
-    "@zendeskgarden/react-tables": "8.62.0",
-    "@zendeskgarden/react-tabs": "^8.49.0",
-    "@zendeskgarden/react-tags": "^8.49.0",
-    "@zendeskgarden/react-tooltips": "^8.49.0",
-    "@zendeskgarden/react-typography": "^8.49.0",
+    "@zendeskgarden/react-accordions": "8.76.8",
+    "@zendeskgarden/react-avatars": "8.76.8",
+    "@zendeskgarden/react-breadcrumbs": "8.76.8",
+    "@zendeskgarden/react-buttons": "8.76.8",
+    "@zendeskgarden/react-chrome": "8.76.8",
+    "@zendeskgarden/react-colorpickers": "8.76.8",
+    "@zendeskgarden/react-datepickers": "8.76.8",
+    "@zendeskgarden/react-dropdowns": "8.76.8",
+    "@zendeskgarden/react-dropdowns.next": "^8.76.8",
+    "@zendeskgarden/react-forms": "8.76.8",
+    "@zendeskgarden/react-grid": "8.76.8",
+    "@zendeskgarden/react-loaders": "8.76.8",
+    "@zendeskgarden/react-modals": "8.76.8",
+    "@zendeskgarden/react-notifications": "8.76.8",
+    "@zendeskgarden/react-pagination": "8.76.8",
+    "@zendeskgarden/react-tables": "8.76.8",
+    "@zendeskgarden/react-tabs": "8.76.8",
+    "@zendeskgarden/react-theming": "8.76.8",
+    "@zendeskgarden/react-tags": "8.76.8",
+    "@zendeskgarden/react-tooltips": "8.76.8",
+    "@zendeskgarden/react-typography": "8.76.8",
     "react-slick": "^0.29.0",
     "react-window": "^1.8.6",
     "tippy.js": "^6.3.7",
@@ -81,57 +88,70 @@
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.5",
     "@rollup/plugin-image": "^3.0.2",
-    "@storybook/addon-a11y": "^7.6.10",
-    "@storybook/addon-essentials": "^7.0.9",
-    "@storybook/addon-interactions": "^7.0.9",
-    "@storybook/addon-links": "^7.0.9",
-    "@storybook/blocks": "^7.0.9",
-    "@storybook/preset-create-react-app": "^7.0.9",
-    "@storybook/react": "^7.0.9",
-    "@storybook/react-webpack5": "^7.0.9",
-    "@storybook/testing-library": "^0.0.14-next.2",
+    "@storybook/addon-a11y": "^8.3.5",
+    "@storybook/addon-essentials": "^8.3.5",
+    "@storybook/addon-interactions": "^8.3.5",
+    "@storybook/addon-links": "^8.3.5",
+    "@storybook/blocks": "^8.3.5",
+    "@storybook/builder-vite": "^8.3.5",
+    "@storybook/preset-create-react-app": "^8.3.5",
+    "@storybook/react": "^8.3.5",
+    "@storybook/react-vite": "^8.3.5",
+    "@storybook/react-webpack5": "^8.3.5",
+    "@svgr/core": "^8.1.0",
+    "@svgr/plugin-jsx": "^8.1.0",
     "@svgr/rollup": "^8.0.1",
     "@types/jest": "^27.4.1",
-    "@types/node": "^16.11.26",
+    "@types/node": "^20.14.2",
     "@types/react": "^17.0.0 || ^18.0.0",
     "@types/react-dom": "^17.0.0 || ^18.0.0",
+    "@types/react-slick": "^0.23.10",
     "@types/react-window": "^1.8.5",
     "@types/ua-parser-js": "^0.7.36",
     "@types/uuid": "^9.0.8",
-    "@zendeskgarden/react-dropdowns": "^8.49.0",
-    "@zendeskgarden/react-forms": "8.49.0",
-    "@zendeskgarden/react-theming": "^8.48.2",
-    "@zendeskgarden/svg-icons": "^6.31.1",
+    "@typescript-eslint/parser": "^8.8.1",
+    "@vitejs/plugin-react": "^4.3.1",
+    "@zendeskgarden/svg-icons": "7.3.0",
     "auto": "^11.1.1",
+    "eslint": "^7.32.0",
+    "eslint-plugin-react": "^7.37.1",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.12",
     "formik": "^2.2.9",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-scripts": "^5.0.1",
     "rimraf": "3.0.2",
     "rollup": "~2.66",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-typescript2": "^0.34.1",
-    "storybook": "^7.0.9",
+    "storybook": "^8.3.5",
     "styled-components": "6.1.1",
     "typescript": "^4.5.0",
+    "vite": "^5.2.13",
+    "vite-plugin-chunk-split": "^0.5.0",
+    "vite-plugin-dts": "^4.2.3",
+    "vite-plugin-lib-inject-css": "^2.1.1",
+    "vite-tsconfig-paths": "^4.3.2",
     "web-vitals": "^2.1.4"
   },
   "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
+    "plugins": [
+      "react",
+      "react-hooks",
+      "react-refresh"
     ],
-    "overrides": [
-      {
-        "files": [
-          "**/*.stories.*"
-        ],
-        "rules": {
-          "import/no-anonymous-default-export": "off"
-        }
-      }
-    ]
+    "rules": {
+      "react-refresh/only-export-components": "warn"
+    },
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+      "ecmaFeatures": {
+        "jsx": true
+      },
+      "ecmaVersion": 12,
+      "sourceType": "module"
+    }
   },
   "browserslist": {
     "production": [
@@ -146,11 +166,6 @@
     ]
   },
   "peerDependencies": {
-    "@types/react": "^17.0.0 || ^18.0.0",
-    "@types/react-dom": "^17.0.0 || ^18.0.0",
-    "@zendeskgarden/react-dropdowns": "^8.49.0",
-    "@zendeskgarden/react-forms": "8.49.0",
-    "@zendeskgarden/react-theming": "^8.48.2",
     "formik": "^2.2.9",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0",

src/index.tsx

@@ -58,13 +58,18 @@ export * from "./stories/color-swatch";
 export * from "./stories/drawers";
 
 // --- Dropdowns ---
+export * from "./stories/buttonMenu";
+export * from "./stories/dotsMenu";
 export * from "./stories/dropdowns/autocomplete";
 export * from "./stories/dropdowns/countermultiselect";
-export * as DropdownField from "./stories/dropdowns/field";
+export * from "./stories/dropdowns/field";
+export * from "./stories/dropdowns/fieldNew";
 export * from "./stories/dropdowns/item";
 export * from "./stories/dropdowns/item-content";
 export * from "./stories/dropdowns/menu";
 export * from "./stories/dropdowns/menuheader";
+export * from "./stories/dropdowns/optGroup";
+export * from "./stories/dropdowns/option";
 export * from "./stories/dropdowns/select";
 
 // --- Editor ---
@@ -73,7 +78,7 @@ export * from "./stories/editor";
 // --- Forms ---
 export * from "./stories/forms/checkbox";
 export * from "./stories/forms/checkbox/cards";
-export * as FormField from "./stories/forms/field";
+export * from "./stories/forms/field";
 export * from "./stories/forms/input";
 export * from "./stories/forms/input-toggle";
 export * from "./stories/forms/mediaInput";
@@ -199,6 +204,10 @@ export * from "./stories/typography/paragraph";
 export * from "./stories/typography/span";
 export * from "./stories/typography/typescale";
 
+export * from "./stories/datepicker";
+export * from "./stories/tableNew";
 export * from "./stories/transcript";
 
+export { Message } from "@zendeskgarden/react-forms";
+
 export { GlobalStyle };