Use primer/react-scripts toolchain

.storybook/main.js

@@ -1,15 +1,20 @@
+const path = require('path')
+const defaultConfig = require('@primer/react-scripts/storybook/main')
+
 module.exports = {
-  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  ...defaultConfig,
   addons: [
-    '@storybook/addon-a11y',
-    '@storybook/addon-links',
-    {name: '@storybook/addon-essentials', options: {backgrounds: false}},
-    'storybook-addon-performance/register',
-    {name: 'storybook-addon-turbo-build', options: {optimizationLevel: 2}},
+    ...defaultConfig.addons,
+
     ...(process.env.NODE_ENV === 'production' && process.env.GITHUB_JOB !== 'chromatic'
       ? ['@whitespace/storybook-addon-html']
       : [])
   ],
+  webpackFinal: config => {
+    // we alias node_modules/@primer/react for storybook to use local version instead
+    config.resolve.alias['@primer/react/lib-esm'] = path.resolve(__dirname, '../src')
+    return config
+  },
   babel: options => {
     options.plugins.push(['open-source', {editor: process.env.NODE_ENV === 'production' ? 'github' : 'vscode'}])
     return options

.storybook/preview.js

@@ -1,18 +1,10 @@
-import {addons} from '@storybook/addons'
-import {withPerformance} from 'storybook-addon-performance'
-import {withThemeProvider, toolbarTypes} from '../src/utils/story-helpers'
-
-export const globalTypes = toolbarTypes
-export const decorators = [withThemeProvider, withPerformance]
-
-addons.setConfig({
-  // Some stories may set up keyboard event handlers, which can be interfered
-  // with by these keyboard shortcuts.
-  enableShortcuts: false
-})
+export * from '@primer/react-scripts/storybook/preview'
 
+// additional parameters for addons
 export const parameters = {
   actions: {argTypesRegex: '^on[A-Z].*'},
+
+  // for @whitespace/storybook-addon-html,
   html: {
     root: '#html-addon-root',
     removeEmptyComments: true