refactor(Storybook): Migrate to Storybook v10 with Vite for faster builds (#2074)

Author: ze-flo

.storybook/main.js

@@ -0,0 +1,83 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
+import { readdirSync } from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import type { StorybookConfig } from '@storybook/react-vite';
+import svgr from 'vite-plugin-svgr';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const PACKAGE_NAMES = readdirSync(path.resolve(__dirname, '../packages')).filter(
+ name => name !== '.template'
+);
+
+const config: StorybookConfig = {
+ stories: ['../packages/*/demo/**/*.@(mdx|stories.@(js|jsx|ts|tsx))'],
+ staticDirs: ['./static'],
+
+ addons: ['@storybook/addon-a11y', '@storybook/addon-designs', '@storybook/addon-docs'],
+
+ framework: {
+ name: '@storybook/react-vite',
+ options: {
+ strictMode: true
+ }
+ },
+
+ core: {
+ disableWhatsNewNotifications: true,
+ disableTelemetry: true
+ },
+
+ viteFinal: async viteConfig => {
+ const { mergeConfig } = await import('vite');
+
+ return mergeConfig(viteConfig, {
+ assetsInclude: ['**/*.md'],
+ define: {
+ PACKAGE_VERSION: JSON.stringify('storybook')
+ },
+ plugins: [
+ svgr({
+ include: '**/*.svg',
+ svgrOptions: {
+ plugins: ['@svgr/plugin-svgo', '@svgr/plugin-jsx'],
+ svgoConfig: {
+ plugins: [
+ {
+ name: 'addAttributesToSVGElement',
+ params: {
+ attributes: [{ focusable: 'false' }, { 'aria-hidden': 'true' }]
+ }
+ }
+ ]
+ }
+ }
+ })
+ ],
+ resolve: {
+ alias: PACKAGE_NAMES.reduce<Record<string, string>>((aliases, packageName) => {
+ aliases[`@zendeskgarden/react-${packageName}`] = path.resolve(
+ __dirname,
+ `../packages/${packageName}/src`
+ );
+
+ return aliases;
+ }, {})
+ }
+ });
+ },
+
+ typescript: {
+ reactDocgen: 'react-docgen-typescript'
+ }
+};
+
+export default config;

.storybook/main.ts

@@ -5,16 +5,16 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import { create } from '@storybook/theming/create';
-import { addons } from '@storybook/addons';
+import { create } from 'storybook/theming/create';
+import { addons } from 'storybook/manager-api';
 import { DEFAULT_THEME } from '../packages/theming/src';
 
 addons.setConfig({
  panelPosition: 'right',
+ // @ts-expect-error - Storybook types don't match implementation; omitting `base` allows OS theme inheritance
  theme: create({
  brandTitle: 'Zendesk Garden React Components',
  brandUrl: 'https://github.com/zendeskgarden/react-components',
- brandImage: null,
  colorSecondary: DEFAULT_THEME.palette.blue[600],
  fontBase: DEFAULT_THEME.fonts.system,
  fontCode: DEFAULT_THEME.fonts.mono