Update Storybook to 8, with Vite

Author: grapoza

.devcontainer/devcontainer.json

@@ -24,6 +24,7 @@
         // These are the extensions that are included in VS Code for the container
         "extensions": [
           "arcanis.vscode-zipfs",
+          "unifiedjs.vscode-mdx",
           "vitest.explorer",
           "Vue.volar"
         ]

.pnp.cjs

@@ -0,0 +1,47 @@
+// This is used to get tables in MDX
+import remarkGfm from 'remark-gfm';
+
+import type { StorybookConfig } from '@storybook/vue3-vite';
+
+import { join, dirname } from "path"
+
+/**
+* This function is used to resolve the absolute path of a package.
+* It is needed in projects that use Yarn PnP or are set up within a monorepo.
+*/
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, 'package.json')))
+}
+const config: StorybookConfig = {
+  "stories": [
+    "../src/**/*.mdx",
+    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+  ],
+  "addons": [
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@storybook/addon-links'),
+    getAbsolutePath('@chromatic-com/storybook'),
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        mdxPluginOptions: {
+          mdxCompileOptions: {
+            remarkPlugins: [remarkGfm],
+          },
+        },
+      },
+    },
+  ],
+  "framework": {
+    "name": getAbsolutePath('@storybook/vue3-vite'),
+    "options": {}
+  },
+  "core": {
+    disableTelemetry: true,
+  },
+  staticDirs: [ // Copy the data used in examples so they can be directly linked from story descriptions
+    { from: '../src/stories/assets/data', to: "assets_data" },
+    { from: '../src/stories/assets/css', to: 'assets_css' }
+  ],
+};
+export default config;

.storybook/main.js

@@ -0,0 +1,35 @@
+import type { Preview } from '@storybook/vue3'
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+       color: /(background|color)$/i,
+       date: /Date$/i,
+      },
+    },
+    options: {
+      // Sort the Home page before anything else. Then, sort by the type of documentation (docs or story).
+      // Finally, just pass through in import order.
+      // The `a` and `b` arguments in this function have a type of `import('@storybook/types').IndexEntry`,
+      // But Storybook doesn't like it if we use that type.
+      storySort: (a, b) => {
+        if (a.id === 'grapoza-vue-tree-home--docs') {
+          return -1;
+        }
+        if (b.id === 'grapoza-vue-tree-home--docs') {
+          return 1;
+        }
+
+        if (a.type !== b.type) {
+          return a.type === 'docs' ? -1 : 1;
+        }
+
+        return 0;
+      },
+    },
+  },
+};
+
+export default preview;