From 8ed9837feaea4d67abbdbe2cc04f5bf0226cbc37 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Jaenisch?= <andre.jaenisch@posteo.de>
Date: Fri, 9 Feb 2024 15:40:26 +0100
Subject: [PATCH] docs: write Storybook for Avatar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

For some reason, the JSDoc annotation is not picked up yet. Need to
investigate more.

Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
---
 .storybook/main.ts              | 13 ++++++++++---
 stories/atoms/Avatar.stories.ts | 22 ++++++++++++++++++++++
 2 files changed, 32 insertions(+), 3 deletions(-)
 create mode 100644 stories/atoms/Avatar.stories.ts

diff --git a/.storybook/main.ts b/.storybook/main.ts
index a7f2a69..7d83757 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -1,10 +1,10 @@
-import { join, dirname } from 'node:path';
+import { dirname, join, resolve } from 'node:path';
 
 import type { StorybookConfig } from '@storybook/sveltekit';
 import { mergeConfig } from 'vite';
 
 const config: StorybookConfig = {
-	stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+	stories: ['../stories/**/*.mdx', '../stories/**/*.stories.ts'],
 	addons: [
 		'@storybook/addon-links',
 		'@storybook/addon-essentials',
@@ -21,12 +21,19 @@ const config: StorybookConfig = {
 		autodocs: 'tag'
 	},
 	async viteFinal(config) {
+		const allowFiles = config.server?.fs?.allow || [];
+		const storyFiles = resolve('stories');
+
 		return mergeConfig(config, {
+			alias: {
+				...config.alias,
+				$lib: resolve('..', 'src', 'lib')
+			},
 			server: {
 				...config.server,
 				fs: {
 					...config.server?.fs,
-					allow: [].concat(config.server?.fs?.allow || []).concat('stories')
+					allow: [...allowFiles, storyFiles]
 				}
 			}
 		});
diff --git a/stories/atoms/Avatar.stories.ts b/stories/atoms/Avatar.stories.ts
new file mode 100644
index 0000000..358b5da
--- /dev/null
+++ b/stories/atoms/Avatar.stories.ts
@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import Avatar from '$lib/components/atoms/Avatar.svelte';
+
+const meta = {
+	title: 'Atoms/Avatar',
+	component: Avatar,
+	tags: ['autodocs'],
+	argTypes: {
+		avatar: { control: 'text' },
+		displayName: { control: 'text' }
+	}
+} satisfies Meta<Avatar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Plain: Story = {
+	args: {
+		displayName: 'Jane Doe'
+	}
+};