docs: expose getting started and vision in storybook (#2616)

.storybook/main.ts

@@ -2,7 +2,7 @@ import type { StorybookConfig } from '@storybook/web-components-vite';
 import { type BuildOptions, type UserConfig, mergeConfig } from 'vite';
 
 const config: StorybookConfig = {
-  stories: ['../src/**/*.stories.ts'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.ts'],
   addons: ['@storybook/addon-essentials', '@storybook/addon-a11y', '@storybook/addon-interactions'],
   framework: {
     name: '@storybook/web-components-vite',

.storybook/preview.ts

@@ -65,15 +65,7 @@ export const parameters = {
     storySort: {
       // Story section order.
       // https://storybook.js.org/docs/react/writing-stories/naming-components-and-hierarchy#sorting-stories
-      order: [
-        'pages',
-        ['home', 'home personalized'],
-        'components',
-        ['*', 'form elements', 'cards', 'layout'],
-        'styles',
-        'timetable',
-        'internals',
-      ],
+      order: ['introduction', 'pages', 'components', 'styles', 'timetable', 'internals'],
     },
   },
 };

src/storybook/docs/getting-started.mdx

@@ -0,0 +1,7 @@
+import { Markdown, Meta } from '@storybook/blocks';
+
+import GettingStarted from '../../../docs/GETTING_STARTED.md?raw';
+
+<Meta title="introduction/Getting Started" />
+
+<Markdown>{GettingStarted}</Markdown>

src/storybook/docs/vision.mdx

@@ -0,0 +1,7 @@
+import { Markdown, Meta } from '@storybook/blocks';
+
+import Vision from '../../../docs/VISION.md?raw';
+
+<Meta title="introduction/Vision" />
+
+<Markdown>{Vision}</Markdown>