feat: setup storybook for glyphdiff project

.storybook/main.ts

@@ -0,0 +1,22 @@
+import type { StorybookConfig } from '@storybook/svelte-vite';
+
+const config: StorybookConfig = {
+    'stories': [
+        '../src/**/*.mdx',
+        '../src/**/*.stories.@(js|ts|svelte)',
+    ],
+    'addons': [
+        {
+            name: '@storybook/addon-svelte-csf',
+            options: {
+                legacyTemplate: true, // Enables the legacy template syntax
+            },
+        },
+        '@chromatic-com/storybook',
+        '@storybook/addon-vitest',
+        '@storybook/addon-a11y',
+        '@storybook/addon-docs',
+    ],
+    'framework': '@storybook/svelte-vite',
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,23 @@
+import type { Preview } from '@storybook/svelte-vite';
+
+import '../src/app/styles/app.css';
+
+const preview: Preview = {
+    parameters: {
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i,
+            },
+        },
+
+        a11y: {
+            // 'todo' - show a11y violations in the test UI only
+            // 'error' - fail CI on a11y violations
+            // 'off' - skip a11y checks entirely
+            test: 'todo',
+        },
+    },
+};
+
+export default preview;

.storybook/vitest.setup.ts

@@ -0,0 +1,7 @@
+import * as a11yAddonAnnotations from '@storybook/addon-a11y/preview';
+import { setProjectAnnotations } from '@storybook/svelte-vite';
+import * as projectAnnotations from './preview';
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);