docs: create Stories for new pages and templates

I also extracted the Icons we use into a story and looked into how I
could potentially allow for changing the locale.

Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>

.storybook/main.ts

@@ -6,10 +6,11 @@ import { mergeConfig } from 'vite';
 const config: StorybookConfig = {
 	stories: ['../stories/**/*.mdx', '../stories/**/*.stories.ts'],
 	addons: [
-		'@storybook/addon-links',
+		'@storybook/addon-a11y',
 		'@storybook/addon-essentials',
+		'@storybook/addon-links',
 		'@storybook/addon-interactions',
-		'@storybook/addon-a11y'
+		'@storybook/addon-toolbar'
 	],
 	core: {
 		disableTelemetry: true

.storybook/preview.ts

@@ -1,4 +1,6 @@
 import type { Preview } from '@storybook/svelte';
+import { init, locale, register } from 'svelte-i18n';
+
 // See src/routes/+layout.svelte
 // Order is important!
 import '../src/theme.postcss';
@@ -6,7 +8,36 @@ import '../src/theme.postcss';
 import '../src/app.postcss';
 import './fix.css';
 
+register('de', () => import('../src/lib/i18n/locales/de.json'));
+register('en', () => import('../src/lib/i18n/locales/en.json'));
+register('he', () => import('../src/lib/i18n/locales/he.json'));
+init({ fallbackLocale: 'en', initialLocale: 'en' });
+locale.set('en');
+
 const preview: Preview = {
+	globalTypes: {
+		locale: {
+			description: 'Internationalization locale',
+			defaultValue: 'en',
+			toolbar: {
+				icon: 'globe',
+				items: [
+					{
+						value: 'de',
+						title: 'German'
+					},
+					{
+						value: 'en',
+						title: 'English'
+					},
+					{
+						value: 'he',
+						title: 'Hebrew'
+					}
+				]
+			}
+		}
+	},
 	parameters: {
 		actions: { argTypesRegex: '^on[A-Z].*' },
 		controls: {

stories/icons/AlertFill16.stories.ts

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/svelte';
+import AlertFill16 from 'svelte-octicons/lib/AlertFill16.svelte';
+
+const meta = {
+	title: 'Icons/AlertFill16',
+	component: AlertFill16,
+	tags: ['autodocs'],
+	argTypes: {
+		fill: {
+			control: 'color'
+		}
+	}
+} satisfies Meta<AlertFill16>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Plain: Story = {};

stories/icons/Info16.stories.ts

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/svelte';
+import Info16 from 'svelte-octicons/lib/Info16.svelte';
+
+const meta = {
+	title: 'Icons/Info16',
+	component: Info16,
+	tags: ['autodocs'],
+	argTypes: {
+		fill: {
+			control: 'color'
+		}
+	}
+} satisfies Meta<Info16>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Plain: Story = {};

stories/icons/Repo24.stories.ts

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/svelte';
+import Repo24 from 'svelte-octicons/lib/Repo24.svelte';
+
+const meta = {
+	title: 'Icons/Repo24',
+	component: Repo24,
+	tags: ['autodocs'],
+	argTypes: {
+		fill: {
+			control: 'color'
+		}
+	}
+} satisfies Meta<Repo24>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Plain: Story = {};

stories/icons/Upload16.stories.ts

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/svelte';
+import Upload16 from 'svelte-octicons/lib/Upload16.svelte';
+
+const meta = {
+	title: 'Icons/Upload16',
+	component: Upload16,
+	tags: ['autodocs'],
+	argTypes: {
+		fill: {
+			control: 'color'
+		}
+	}
+} satisfies Meta<Upload16>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Plain: Story = {};

stories/pages/ImportProject.stories.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import ImportProject from '$lib/components/pages/ImportProject.svelte';
+
+const meta = {
+	title: 'Pages/ImportProject',
+	component: ImportProject,
+	tags: ['autodocs']
+} satisfies Meta<ImportProject>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Plain: Story = {};

stories/templates/ImportProject.stories.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import ImportProject from '$lib/components/templates/ImportProject.svelte';
+
+const meta = {
+	title: 'Templates/ImportProject',
+	component: ImportProject,
+	tags: ['autodocs']
+} satisfies Meta<ImportProject>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Plain: Story = {};