Use Vite

.changeset/unlucky-squids-attack.md

@@ -0,0 +1,5 @@
+---
+'@fluent-blocks/react': patch
+---
+
+Use Vite to build and run Storybook.

packages/react/.gitignore

@@ -1 +1,2 @@
 types
+storybook-static

packages/react/.storybook/main.js

@@ -1,7 +1,10 @@
 const path = require('path')
 const tsconfig = path.resolve(__dirname, '../tsconfig.json')
+const { mergeConfig } = require('vite')
+const get = require('lodash/get')
 
 module.exports = {
+  core: { builder: '@storybook/builder-vite' },
   stories: [
     '../src/**/*.stories.mdx',
     '../src/**/*.stories.@(ts|tsx)',
@@ -26,4 +29,25 @@ module.exports = {
     './addons/expand-all/register.js',
   ],
   staticDirs: ['./public'],
+  async viteFinal(config, { configType }) {
+    // return the customized config
+    return mergeConfig(config, {
+      // customize the Vite config here
+      optimizeDeps: {
+        include: [
+          ...get(config, ['optimizeDeps', 'include'], []),
+          '@storybook/react/dist/esm/client/docs/config',
+          '@storybook/react/dist/esm/client/preview/config',
+          '@storybook/addon-links/preview.js',
+          '@storybook/addon-docs/preview.js',
+          '@storybook/addon-actions/preview.js',
+          '@storybook/addon-measure/preview.js',
+          'faker/locale/en_US',
+          'lodash/range',
+          'lodash/find',
+          'chromatic/isChromatic',
+        ],
+      },
+    })
+  },
 }

packages/react/package.json

@@ -44,11 +44,21 @@
   },
   "devDependencies": {
     "@babel/core": "latest",
+    "@babel/preset-env": "latest",
     "@fluentui/react-components": "latest",
+    "@mdx-js/react": "^1.6.22",
     "@storybook/addon-actions": "next",
     "@storybook/addon-essentials": "next",
+    "@storybook/addon-backgrounds": "next",
+    "@storybook/addon-docs": "next",
     "@storybook/addon-links": "next",
+    "@storybook/addon-measure": "next",
+    "@storybook/addon-outline": "next",
     "@storybook/addons": "next",
+    "@storybook/client-api": "next",
+    "@storybook/client-logger": "next",
+    "@storybook/builder-vite": "latest",
+    "@storybook/core-common": "next",
     "@storybook/react": "next",
     "@storybook/theming": "next",
     "@types/chart.js": "^2.9.29",
@@ -66,6 +76,7 @@
     "expect": "latest",
     "faker": "thure/faker.js#v5.1.2",
     "http-proxy-middleware": "latest",
+    "iterall": "latest",
     "just-scripts": "latest",
     "mocha": "latest",
     "playwright-chromium": "latest",
@@ -76,7 +87,7 @@
     "ts-mocha": "latest",
     "ts-node": "latest",
     "typescript": ">=4.4.0 <5.0.0",
-    "webpack": "latest"
+    "vite": "latest"
   },
   "dependencies": {
     "@fluent-blocks/basic-icons": "workspace:9.1.0-next.2",

packages/react/src/inputs/RadioGroup/RadioGroup.tsx

@@ -1,13 +1,14 @@
 import { ReactElement } from 'react'
 
 import { RadioGroupProps as NaturalRadioGroupProps } from '@fluent-blocks/schemas'
-import { mergeClasses as cx, makeStyles } from '@fluentui/react-components'
-// todo: fix this import when it stabilizes
 import {
   RadioGroup as FluentRadioGroup,
-  Label,
   Radio,
-} from '@fluentui/react-components/unstable'
+  mergeClasses as cx,
+  makeStyles,
+} from '@fluentui/react-components'
+// todo: fix this import when it stabilizes
+import { Label } from '@fluentui/react-components/unstable'
 
 import { InlineContent } from '../../inlines'
 import { makeLabelId, useCommonStyles } from '../../lib'