cdc-open-viz/.storybook/main.ts at e0f0c8b8dd6c6e3718954c52e284c6ca080c60ca · CDCgov/cdc-open-viz · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
// This file has been automatically migrated to valid ESM format by Storybook.
import { createRequire } from 'node:module'
import { dirname, join } from 'node:path'
import { mergeConfig } from 'vite'
import type { StorybookConfig } from '@storybook/react-vite'
import react from '@vitejs/plugin-react'
import svgr from 'vite-plugin-svgr' // Svg Support

const require = createRequire(import.meta.url)

const config: StorybookConfig = {
  stories: [
    '../_stories/*.stories.@(js|jsx|ts|tsx)',
    '../packages/**/_stories/*.stories.@(js|jsx|ts|tsx)',
    '../_stories/private/**/*.stories.@(js|jsx|ts|tsx)'
  ],

  addons: [
    getAbsolutePath('@storybook/addon-links'),
    // getAbsolutePath("storybook-addon-fetch-mock"), // Incompatible with Storybook 9 - cannot resolve @storybook/preview-api
    getAbsolutePath('@storybook/addon-a11y'),
    getAbsolutePath('@storybook/addon-docs'),
    getAbsolutePath('@storybook/addon-vitest')
  ],

  staticDirs: ['./assets'],

  framework: {
    name: getAbsolutePath('@storybook/react-vite'),
    options: {}
  },

  core: {
    disableTelemetry: true
  },

  typescript: {
    reactDocgen: false // https://github.com/storybookjs/storybook/issues/22164#issuecomment-1603627308
  },

  viteFinal: async (config, { configType }) => {
    console.log('Storybook build mode: ', configType)

    // Common SVG configuration for both dev and build
    const svgrConfig = {
      svgrOptions: {
        exportType: 'default',
        ref: true,
        svgo: false,
        titleProp: true
      },
      include: '**/*.svg'
    }

    if (configType === 'DEVELOPMENT') {
      // run Storybook locally
      return mergeConfig(config, {
        css: {
          preprocessorOptions: {
            scss: {
              // Suppress SASS @import deprecation warnings (same as packages)
              quietDeps: true,
              silenceDeprecations: ['legacy-js-api', 'import']
            }
          }
        },
        plugins: [react({ jsxRuntime: 'automatic' }), svgr(svgrConfig)]
      })
    }

    return mergeConfig(config, {
      commonjsOptions: {
        include: [/@cdc\/core/, /node_modules/]
      },
      css: {
        preprocessorOptions: {
          scss: {
            // Suppress SASS @import deprecation warnings (same as packages)
            quietDeps: true,
            silenceDeprecations: ['legacy-js-api', 'import']
          }
        }
      },
      build: {
        sourcemap: false,
        lib: {
          entry: `src/storybook`,
          formats: ['es'],
          fileName: format => `storybook.js`
        },
        rollupOptions: {
          output: {
            chunkFileNames: `storybook-[name]-[hash].[format].js`
          }
        }
      },
      plugins: [
        // changed from classic to automatic 02/21 for import React error.
        react({ jsxRuntime: 'automatic' }), //https://github.com/babel/babel/discussions/13013
        svgr(svgrConfig)
      ]
    })
  }
}

export default config

function getAbsolutePath(value: string): any {
  return dirname(require.resolve(join(value, 'package.json')))
}