docs: add support for css to storybook (#4950)

* docs: add support for css to storybook

* chore: remove commented code

* chore: add explicit dependency used by storybook tool

* chore: add dependency used by internal addon

* refactor: update internal storybook dependencies

* chore(deps): update deps version

* chore: run npm dedupe

* chore: update stories

* chore: try out different loader techniques

* refactor(storybook): update from @storybook/react-webpack5 to @storybook/react-vite

* chore: update settings to match rollup build output

* chore: remove top-level postcss config

---------

Co-authored-by: Josh Black <joshblack@users.noreply.github.com>

packages/react/.storybook/main.ts

@@ -0,0 +1,59 @@
+import {createRequire} from 'node:module'
+import path from 'node:path'
+import postcssPresetPrimer from 'postcss-preset-primer'
+import type {StorybookConfig} from '@storybook/react-vite'
+
+const require = createRequire(import.meta.url)
+
+const {DEPLOY_ENV = 'development'} = process.env
+
+const config: StorybookConfig = {
+  stories:
+    DEPLOY_ENV === 'development'
+      ? ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)']
+      : // Don't include dev stories in production
+        ['../src/**/*.mdx', '../src/**/!(*.dev).stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    {
+      name: '@storybook/addon-essentials',
+      options: {
+        backgrounds: false,
+      },
+    },
+    getAbsolutePath('@storybook/addon-storysource'),
+    getAbsolutePath('@storybook/addon-interactions'),
+    getAbsolutePath('@storybook/addon-a11y'),
+    getAbsolutePath('@storybook/addon-links'),
+  ],
+
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  async viteFinal(config) {
+    config.define = {
+      ...config.define,
+      __DEV__: JSON.stringify(true),
+    }
+
+    config.css = {
+      ...config.css,
+      modules: {
+        ...config.css?.modules,
+        generateScopedName: 'prc_[local]_[hash:base64:5]',
+      },
+      postcss: {
+        ...config.css?.postcss,
+        plugins: [postcssPresetPrimer()],
+      },
+    }
+
+    return config
+  },
+}
+
+export default config
+
+function getAbsolutePath(value) {
+  return path.dirname(require.resolve(path.join(value, 'package.json')))
+}

packages/react/.storybook/manager.js → packages/react/.storybook/manager.jsx

@@ -1,4 +1,4 @@
-import {addons, types} from '@storybook/addons'
+import {addons, types} from '@storybook/manager-api'
 import {useGlobals} from '@storybook/manager-api'
 import {IconButton, WithTooltip, TooltipLinkList} from '@storybook/components'
 import {BeakerIcon} from '@primer/octicons-react'

packages/react/.storybook/preview.js → packages/react/.storybook/preview.jsx

@@ -1,6 +1,6 @@
 import {PrimerBreakpoints} from '../src/utils/layout'
 import React, {useEffect} from 'react'
-import {ThemeProvider, BaseStyles, theme} from '../src'
+import {ThemeProvider, BaseStyles} from '../src'
 import {FeatureFlags} from '../src/FeatureFlags'
 import {DefaultFeatureFlags} from '../src/FeatureFlags/DefaultFeatureFlags'
 import {clsx} from 'clsx'

packages/react/.storybook/src/accessibility-tool.tsx

@@ -1,5 +1,5 @@
 import React, {useCallback} from 'react'
-import {useGlobals} from '@storybook/api'
+import {useGlobals} from '@storybook/manager-api'
 import {IconButton, Icons} from '@storybook/components'
 
 export const ADDON_ID = 'show-surrounding-links'

packages/react/package.json

@@ -137,20 +137,17 @@
     "@rollup/plugin-terser": "0.4.3",
     "@rollup/plugin-typescript": "11.1.5",
     "@rollup/plugin-virtual": "3.0.2",
-    "@storybook/addon-a11y": "^8.1.5",
-    "@storybook/addon-actions": "^8.1.5",
-    "@storybook/addon-essentials": "^8.1.5",
-    "@storybook/addon-interactions": "^8.1.5",
-    "@storybook/addon-links": "^8.1.5",
-    "@storybook/addon-storysource": "^8.1.5",
-    "@storybook/addon-styling": "1.3.7",
-    "@storybook/addon-webpack5-compiler-babel": "3.0.3",
-    "@storybook/addons": "7.6.17",
-    "@storybook/csf": "0.1.2",
-    "@storybook/react": "^8.1.5",
-    "@storybook/react-webpack5": "^8.1.5",
-    "@storybook/source-loader": "^8.1.5",
-    "@storybook/theming": "^8.1.5",
+    "@storybook/addon-a11y": "^8.3.0",
+    "@storybook/addon-actions": "^8.3.0",
+    "@storybook/addon-essentials": "^8.3.0",
+    "@storybook/addon-interactions": "^8.3.0",
+    "@storybook/addon-links": "^8.3.0",
+    "@storybook/addon-storysource": "^8.3.0",
+    "@storybook/preview-api": "^8.3.0",
+    "@storybook/react": "^8.3.0",
+    "@storybook/react-vite": "^8.3.0",
+    "@storybook/source-loader": "^8.3.0",
+    "@storybook/theming": "^8.3.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^16.0.0",
@@ -169,7 +166,6 @@
     "ajv": "8.16.0",
     "axe-core": "4.9.1",
     "babel-core": "7.0.0-bridge.0",
-    "babel-loader": "^9.1.0",
     "babel-plugin-add-react-displayname": "0.0.5",
     "babel-plugin-dev-expression": "0.2.3",
     "babel-plugin-macros": "3.1.0",
@@ -212,8 +208,7 @@
     "rollup-plugin-postcss": "4.0.2",
     "rollup-plugin-visualizer": "5.9.2",
     "semver": "7.6.2",
-    "storybook": "^8.1.5",
-    "storybook-addon-turbo-build": "2.0.1",
+    "storybook": "^8.3.0",
     "styled-components": "5.3.11",
     "terser": "5.31.0",
     "ts-toolbelt": "9.6.0",
@@ -223,7 +218,6 @@
     "unist-util-find": "3.0.0",
     "unist-util-find-before": "4.0.0",
     "unist-util-flat-filter": "2.0.0",
-    "webpack": "5.94.0",
     "yaml": "2.3.4"
   },
   "peerDependencies": {

packages/react/src/drafts/MarkdownEditor/MarkdownEditor.features.stories.tsx

@@ -1,7 +1,6 @@
 import {DiffIcon, PlusIcon} from '@primer/octicons-react'
 import type {Meta} from '@storybook/react'
-import React from '@storybook/react'
-import {useRef, useState} from 'react'
+import React, {useRef, useState} from 'react'
 import Box from '../../Box'
 import type {Emoji, Mentionable, Reference, SavedReply} from '.'
 import MarkdownEditor from '.'

packages/react/src/drafts/MarkdownEditor/MarkdownEditor.stories.tsx

@@ -1,6 +1,5 @@
 import type {Meta} from '@storybook/react'
-import React from '@storybook/react'
-import {useState} from 'react'
+import React, {useState} from 'react'
 import BaseStyles from '../../BaseStyles'
 import Box from '../../Box'
 import type {Emoji, Mentionable, Reference, SavedReply} from '.'

packages/react/src/drafts/MarkdownViewer/MarkdownViewer.features.stories.tsx

@@ -1,7 +1,6 @@
 import type {Meta} from '@storybook/react'
-import React from '@storybook/react'
 import {debounce} from 'lodash'
-import {useCallback, useMemo, useState} from 'react'
+import React, {useCallback, useMemo, useState} from 'react'
 import BaseStyles from '../../BaseStyles'
 import Box from '../../Box'
 import ThemeProvider from '../../ThemeProvider'

packages/react/src/drafts/MarkdownViewer/MarkdownViewer.stories.tsx

@@ -1,7 +1,6 @@
 import type {Meta} from '@storybook/react'
-import React from '@storybook/react'
 import {debounce} from 'lodash'
-import {useCallback, useMemo, useState} from 'react'
+import React, {useCallback, useMemo, useState} from 'react'
 import BaseStyles from '../../BaseStyles'
 import Box from '../../Box'
 import ThemeProvider from '../../ThemeProvider'

packages/react/src/utils/theme.js → packages/react/src/utils/theme.ts

@@ -1,8 +1,10 @@
-// Utility functions used in theme-preval.js
-// This file needs to be a JavaScript file using CommonJS to be compatible with preval
+// Temporarily disabling since this is originally a JavaScript that needed to be
+// migrated to TypeScript for exports to work as correctly in Vite.
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
 
-const isEmpty = require('lodash.isempty')
-const isObject = require('lodash.isobject')
+import isEmpty from 'lodash.isempty'
+import isObject from 'lodash.isobject'
 
 function fontStack(fonts) {
   return fonts.map(font => (font.includes(' ') ? `"${font}"` : font)).join(', ')
@@ -54,15 +56,21 @@ function partitionColors(colors) {
 }
 
 function omitScale(obj) {
+  // This is intentionally removing `scale` from the provided object
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const {scale, ...rest} = obj
   return rest
 }
 
-module.exports = {
+const themeUtils = {
   fontStack,
   isShadowValue,
   isColorValue,
   filterObject,
   partitionColors,
   omitScale,
 }
+
+export {fontStack, isShadowValue, isColorValue, filterObject, partitionColors, omitScale}
+
+export default themeUtils