Merge pull request #1050 from patrickcate/feature/000/storybook-8

build(storybook): update storybook to v8

Author: patrickcate

.storybook/main.cjs

@@ -0,0 +1,40 @@
+import path from 'node:path'
+import { loadConfigFromFile, mergeConfig } from 'vite'
+
+export default {
+  stories: [
+    '../docs/**/*.mdx',
+    '../stories/**/*.mdx',
+    '../src/**/*.stories.@(js|jsx|ts|tsx)',
+  ],
+
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-mdx-gfm',
+  ],
+
+  core: {
+    disableTelemetry: true,
+  },
+
+  framework: {
+    name: '@storybook/vue3-vite',
+    options: {
+      docgen: 'vue-component-meta',
+    },
+  },
+
+  async viteFinal(config, { configType }) {
+    const { config: userConfig } = await loadConfigFromFile(
+      path.resolve(__dirname, '..', 'vite.config.js'),
+    )
+    return mergeConfig(config, {
+      ...userConfig,
+      base: '/vue-uswds/',
+      // manually specify plugins to avoid conflict
+      plugins: [],
+    })
+  },
+  docs: {},
+}

.storybook/main.js

@@ -1,4 +1,4 @@
-import { addons } from '@storybook/addons'
+import { addons } from '@storybook/manager-api'
 import theme from './theme.js'
 
 addons.setConfig({

.storybook/manager.js

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs'
+import { Meta } from '@storybook/blocks'
 
 <Meta title='Guide/Installation' />
 

docs/guide/0-installation.stories.mdx renamed to docs/guide/0-installation.mdx

@@ -1,10 +1,10 @@
-import { Meta } from '@storybook/addon-docs'
+import { Meta } from '@storybook/blocks'
 
-<Meta title='Guide/Usage' />
+<Meta title="Guide/Usage" />
 
 # Usage
 
-When importing the library via NPM you can import all components or use the _À La Carte_ method to import only specific components. The _À La Carte_ method makes it easier to reduce the final bundle size of your application by only including components you are using.
+When importing the library via NPM you can import all components or use the *À La Carte* method to import only specific components. The *À La Carte* method makes it easier to reduce the final bundle size of your application by only including components you are using.
 
 ## All Components
 

docs/guide/1-configuration.stories.mdx renamed to docs/guide/1-configuration.mdx

@@ -1,6 +1,6 @@
-import { Meta } from '@storybook/addon-docs'
+import { Meta } from '@storybook/blocks'
 
-<Meta title='Guide/Configuration' />
+<Meta title="Guide/Configuration" />
 
 # Configuration