docs: write Storybook for Avatar

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

@@ -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]
 				}
 			}
 		});

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'
+	}
+};