feat: add new components to Storybook

I included stories for the new components introduced by the Projects
page.

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

.prettierignore

@@ -17,3 +17,4 @@ node_modules
 pnpm-lock.yaml
 package-lock.json
 yarn.lock
+stories/*.mdx

src/lib/components/atoms/Avatar.svelte

@@ -16,11 +16,13 @@ You should have received a copy of the GNU Affero General Public License along w
 
 	/**
 	 * URL to Avatar image.
+	 * @type {string | undefined}
 	 */
 	export let avatar = '';
 
 	/**
 	 * Name to derive initials from if no avatar is given.
+	 * @type {string | undefined}
 	 */
 	export let displayName = '';
 </script>

src/lib/components/atoms/DisplayName.svelte

@@ -16,6 +16,7 @@ You should have received a copy of the GNU Affero General Public License along w
 
 	/**
 	 * Under which name shall the person be known?
+	 * @type {string}
 	 */
 	export let displayName = '';
 
@@ -28,6 +29,7 @@ You should have received a copy of the GNU Affero General Public License along w
 
 	/**
 	 * How to correctly address this person.
+	 * @type {string}
 	 */
 	export let pronoun = '';
 </script>

src/lib/components/templates/Profile.svelte

@@ -22,6 +22,10 @@ You should have received a copy of the GNU Affero General Public License along w
 	import History from '../molecules/History.svelte';
 	import Project from '../molecules/Project.svelte';
 
+	const i18n = {
+		heading: 'page.profile.heading'
+	};
+
 	/**
 	 * Translation keys.
 	 */
@@ -36,6 +40,7 @@ You should have received a copy of the GNU Affero General Public License along w
 
 	/**
 	 * Required context for populating the template.
+	 * @type {*}
 	 */
 	export let data = {
 		locale: '',

stories/ColorPalette.mdx

@@ -1,16 +1,15 @@
-{/\*
-
-- Describe the color palette in use.
-- Copyright (C) 2024 André Jaenisch
-- SPDX-FileCopyrightText: 2024 André Jaenisch
-- SPDX-License-Identifier: AGPL-3.0-or-later
--
-- This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
--
-- This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
--
-- You should have received a copy of the GNU Affero General Public License along with this program. If not, see <http://www.gnu.org/licenses/>.
-  \*/}
+{/*
+  * Describe the color palette in use.
+  * Copyright (C) 2024 André Jaenisch
+  * SPDX-FileCopyrightText: 2024 André Jaenisch
+  * SPDX-License-Identifier: AGPL-3.0-or-later
+  *
+  * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
+  *
+  * This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
+  *
+  * You should have received a copy of the GNU Affero General Public License along with this program. If not, see <http://www.gnu.org/licenses/>.
+  */}
 
 import { ColorItem, ColorPalette, Meta } from '@storybook/blocks';
 

stories/Typography.mdx

@@ -1,16 +1,16 @@
-{/\*
-
-- Describe the typography in use.
-- Copyright (C) 2024 André Jaenisch
-- SPDX-FileCopyrightText: 2024 André Jaenisch
-- SPDX-License-Identifier: AGPL-3.0-or-later
--
-- This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
--
-- This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
--
-- You should have received a copy of the GNU Affero General Public License along with this program. If not, see <http://www.gnu.org/licenses/>.
-  \*/}
+{/*
+  * 
+  * Describe the typography in use.
+  * Copyright (C) 2024 André Jaenisch
+  * SPDX-FileCopyrightText: 2024 André Jaenisch
+  * SPDX-License-Identifier: AGPL-3.0-or-later
+  *
+  * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
+  *
+  * This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
+  *
+  * You should have received a copy of the GNU Affero General Public License along with this program. If not, see <http://www.gnu.org/licenses/>.
+  */}
 
 import { Meta } from '@storybook/blocks';
 

stories/atoms/Avatar.stories.ts

@@ -17,7 +17,7 @@ import Avatar from '$lib/components/atoms/Avatar.svelte';
 const meta = {
 	title: 'Atoms/Avatar',
 	component: Avatar,
-	tags: ['autodocs'],
+	tags: ['autodocs']
 } satisfies Meta<Avatar>;
 
 export default meta;

stories/atoms/BlockOrReport.stories.ts

@@ -23,10 +23,4 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Plain: Story = {
-	parameters: {
-		controls: {
-			hideNoControlsWarning: true
-		}
-	}
-};
+export const Plain: Story = {};

stories/atoms/Created.stories.ts

@@ -19,13 +19,10 @@ const meta = {
 	component: Created,
 	tags: ['autodocs'],
 	argTypes: {
-		created_at: {
-			control: 'date',
-			description: 'Date of creation'
-		},
-		created_at_formatted: {
-			control: 'text',
-			description: 'Localised version of created_at'
+		created_at: { control: 'date' },
+		locale: {
+			control: 'radio',
+			options: ['en', 'de', 'he']
 		}
 	}
 } satisfies Meta<Created>;
@@ -36,10 +33,7 @@ type Story = StoryObj<typeof meta>;
 export const Plain: Story = {
 	args: {
 		created_at: new Date(),
-		created_at_formatted: (function () {
-			const locale = 'en-US';
-			return new Intl.DateTimeFormat(locale).format(new Date());
-		})()
+		locale: 'en'
 	}
 };
 

stories/atoms/DisplayName.stories.ts

@@ -17,25 +17,27 @@ import DisplayName from '$lib/components/atoms/DisplayName.svelte';
 const meta = {
 	title: 'Atoms/DisplayName',
 	component: DisplayName,
-	tags: ['autodocs'],
-	argTypes: {
-		displayName: {
-			control: 'text',
-			description: 'Under which name shall the person be known?'
-		},
-		pronoun: {
-			control: 'text',
-			description: 'How shall the person be adressed?'
-		}
-	}
+	tags: ['autodocs']
 } satisfies Meta<DisplayName>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Plain: Story = {
+export const WithPronoun: Story = {
 	args: {
 		displayName: 'Jane Doe',
+		i18n: {
+			heading: 'page.profile.heading'
+		},
 		pronoun: 'she/her'
 	}
 };
+
+export const WithoutPronoun: Story = {
+	args: {
+		displayName: 'Jane Doe',
+		i18n: {
+			heading: 'page.profile.heading'
+		}
+	}
+};

stories/icons/ChevronLeft24.stories.ts

@@ -0,0 +1,36 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Eric Liu
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ */
+
+/*
+ * SPDX-FileCopyrightText: 2020 - 2024 Eric Liu
+ * SPDX-License-Identifier: MIT
+ */
+
+import type { Meta, StoryObj } from '@storybook/svelte';
+import { ChevronLeft24 } from 'svelte-octicons';
+
+const meta = {
+	title: 'Icons/ChevronLeft24',
+	component: ChevronLeft24,
+	tags: ['autodocs'],
+	argTypes: {
+		fill: {
+			control: 'color'
+		}
+	}
+} satisfies Meta<ChevronLeft24>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Plain: Story = {};

stories/icons/ChevronRight24.stories.ts

@@ -0,0 +1,36 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Eric Liu
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ */
+
+/*
+ * SPDX-FileCopyrightText: 2020 - 2024 Eric Liu
+ * SPDX-License-Identifier: MIT
+ */
+
+import type { Meta, StoryObj } from '@storybook/svelte';
+import { ChevronRight24 } from 'svelte-octicons';
+
+const meta = {
+	title: 'Icons/ChevronRight24',
+	component: ChevronRight24,
+	tags: ['autodocs'],
+	argTypes: {
+		fill: {
+			control: 'color'
+		}
+	}
+} satisfies Meta<ChevronRight24>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Plain: Story = {};

stories/icons/EyeClosed16.stories.ts

@@ -0,0 +1,36 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Eric Liu
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ */
+
+/*
+ * SPDX-FileCopyrightText: 2020 - 2024 Eric Liu
+ * SPDX-License-Identifier: MIT
+ */
+
+import type { Meta, StoryObj } from '@storybook/svelte';
+import { EyeClosed16 } from 'svelte-octicons';
+
+const meta = {
+	title: 'Icons/EyeClosed16',
+	component: EyeClosed16,
+	tags: ['autodocs'],
+	argTypes: {
+		fill: {
+			control: 'color'
+		}
+	}
+} satisfies Meta<EyeClosed16>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Plain: Story = {};

stories/icons/Filter24.stories.ts

@@ -0,0 +1,36 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Eric Liu
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ */
+
+/*
+ * SPDX-FileCopyrightText: 2020 - 2024 Eric Liu
+ * SPDX-License-Identifier: MIT
+ */
+
+import type { Meta, StoryObj } from '@storybook/svelte';
+import { Filter24 } from 'svelte-octicons';
+
+const meta = {
+	title: 'Icons/Filter24',
+	component: Filter24,
+	tags: ['autodocs'],
+	argTypes: {
+		fill: {
+			control: 'color'
+		}
+	}
+} satisfies Meta<Filter24>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Plain: Story = {};

stories/icons/RepoForked16.stories.ts

@@ -0,0 +1,36 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Eric Liu
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ */
+
+/*
+ * SPDX-FileCopyrightText: 2020 - 2024 Eric Liu
+ * SPDX-License-Identifier: MIT
+ */
+
+import type { Meta, StoryObj } from '@storybook/svelte';
+import { RepoForked16 } from 'svelte-octicons';
+
+const meta = {
+	title: 'Icons/RepoForked16',
+	component: RepoForked16,
+	tags: ['autodocs'],
+	argTypes: {
+		fill: {
+			control: 'color'
+		}
+	}
+} satisfies Meta<RepoForked16>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Plain: Story = {};

stories/icons/Search24.stories.ts

@@ -0,0 +1,36 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Eric Liu
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ */
+
+/*
+ * SPDX-FileCopyrightText: 2020 - 2024 Eric Liu
+ * SPDX-License-Identifier: MIT
+ */
+
+import type { Meta, StoryObj } from '@storybook/svelte';
+import { Search24 } from 'svelte-octicons';
+
+const meta = {
+	title: 'Icons/Search24',
+	component: Search24,
+	tags: ['autodocs'],
+	argTypes: {
+		fill: {
+			control: 'color'
+		}
+	}
+} satisfies Meta<Search24>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Plain: Story = {};

stories/icons/TriangleDown16.stories.ts

@@ -0,0 +1,36 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Eric Liu
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ */
+
+/*
+ * SPDX-FileCopyrightText: 2020 - 2024 Eric Liu
+ * SPDX-License-Identifier: MIT
+ */
+
+import type { Meta, StoryObj } from '@storybook/svelte';
+import { TriangleDown16 } from 'svelte-octicons';
+
+const meta = {
+	title: 'Icons/TriangleDown16',
+	component: TriangleDown16,
+	tags: ['autodocs'],
+	argTypes: {
+		fill: {
+			control: 'color'
+		}
+	}
+} satisfies Meta<TriangleDown16>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Plain: Story = {};

stories/icons/TriangleDown24.stories.ts

@@ -0,0 +1,36 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Eric Liu
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ */
+
+/*
+ * SPDX-FileCopyrightText: 2020 - 2024 Eric Liu
+ * SPDX-License-Identifier: MIT
+ */
+
+import type { Meta, StoryObj } from '@storybook/svelte';
+import { TriangleDown24 } from 'svelte-octicons';
+
+const meta = {
+	title: 'Icons/TriangleDown24',
+	component: TriangleDown24,
+	tags: ['autodocs'],
+	argTypes: {
+		fill: {
+			control: 'color'
+		}
+	}
+} satisfies Meta<TriangleDown24>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Plain: Story = {};

stories/molecules/MoreFilters.stories.ts

@@ -0,0 +1,32 @@
+/* Stories for MoreFilters molecule.
+ * Copyright (C) 2024 André Jaenisch
+ * SPDX-FileCopyrightText: 2024 André Jaenisch
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import MoreFilters from '$lib/components/molecules/MoreFilters.svelte';
+
+const meta = {
+	title: 'Molecules/MoreFilters',
+	component: MoreFilters,
+	tags: ['autodocs']
+} satisfies Meta<MoreFilters>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Plain: Story = {
+	args: {
+		i18n: {
+			submit: 'page.projects.form.fields.more_filters.submit'
+		}
+	}
+};

stories/molecules/Pagination.stories.ts

@@ -0,0 +1,33 @@
+/* Stories for Pagination molecule.
+ * Copyright (C) 2024 André Jaenisch
+ * SPDX-FileCopyrightText: 2024 André Jaenisch
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import Pagination from '$lib/components/molecules/Pagination.svelte';
+
+const meta = {
+	title: 'Molecules/Pagination',
+	component: Pagination,
+	tags: ['autodocs']
+} satisfies Meta<Pagination>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Plain: Story = {
+	args: {
+		i18n: {
+			next: 'page.projects.nav.next',
+			previous: 'page.projects.nav.previous'
+		}
+	}
+};

stories/molecules/Projects.stories.ts

@@ -0,0 +1,32 @@
+/* Stories for Projects molecule.
+ * Copyright (C) 2024 André Jaenisch
+ * SPDX-FileCopyrightText: 2024 André Jaenisch
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import Projects from '$lib/components/molecules/Projects.svelte';
+
+const meta = {
+	title: 'Molecules/Projects',
+	component: Projects,
+	tags: ['autodocs']
+} satisfies Meta<Projects>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Plain: Story = {
+	args: {
+		i18n: {
+			submit: 'page.projects.form.fields.projects.submit'
+		}
+	}
+};

stories/molecules/Search.stories.ts

@@ -0,0 +1,33 @@
+/* Stories for Search molecule.
+ * Copyright (C) 2024 André Jaenisch
+ * SPDX-FileCopyrightText: 2024 André Jaenisch
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import Search from '$lib/components/molecules/Search.svelte';
+
+const meta = {
+	title: 'Molecules/Search',
+	component: Search,
+	tags: ['autodocs']
+} satisfies Meta<Search>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Plain: Story = {
+	args: {
+		i18n: {
+			placeholder: 'page.projects.form.fields.search.placeholder',
+			submit: 'page.projects.form.fields.search.submit'
+		}
+	}
+};

stories/molecules/Starred.stories.ts

@@ -0,0 +1,32 @@
+/* Stories for Starred molecule.
+ * Copyright (C) 2024 André Jaenisch
+ * SPDX-FileCopyrightText: 2024 André Jaenisch
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import Starred from '$lib/components/molecules/Starred.svelte';
+
+const meta = {
+	title: 'Molecules/Starred',
+	component: Starred,
+	tags: ['autodocs']
+} satisfies Meta<Starred>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Plain: Story = {
+	args: {
+		i18n: {
+			submit: 'page.projects.form.fields.starred.submit'
+		}
+	}
+};

stories/organisms/FileTable.stories.ts

@@ -0,0 +1,193 @@
+/* Stories for FileTable organism.
+ * Copyright (C) 2024 André Jaenisch
+ * SPDX-FileCopyrightText: 2024 André Jaenisch
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { withActions } from '@storybook/addon-actions/decorator';
+import { withLinks } from '@storybook/addon-links';
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import FileTable from '$lib/components/organisms/FileTable.svelte';
+
+const meta = {
+	title: 'Organisms/FileTable',
+	component: FileTable,
+	tags: ['autodocs'],
+	args: {
+		sb: 'Templates/Profile'
+	},
+	argTypes: {
+		onSubmit: { action: 'submit' },
+		sb: { control: 'radio', options: ['Templates/Profile'] }
+	},
+	decorators: [withActions, withLinks]
+} satisfies Meta<FileTable>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const NoProjects: Story = {
+	args: {
+		i18n: {
+			heading: {
+				lastUpdated: 'page.projects.table.heading.last_updated',
+				name: 'page.projects.table.heading.name'
+			},
+			table: {
+				updated: 'page.projects.file_table.updated'
+			}
+		},
+		projects: []
+	}
+};
+
+export const SingleProject: Story = {
+	args: {
+		i18n: {
+			heading: {
+				lastUpdated: 'page.projects.table.heading.last_updated',
+				name: 'page.projects.table.heading.name'
+			},
+			table: {
+				updated: 'page.projects.file_table.updated'
+			}
+		},
+		projects: [
+			{
+				name: 'Project A',
+				description:
+					'This software project is a web-based application that will allow users to book appointments online.',
+				avatar: 'https://example.com',
+				// Date back three months
+				lastUpdated: new Date(Date.now() - 3 * 30 * 24 * 60 * 60 * 1000),
+				members: [
+					{
+						name: 'Person A',
+						avatar: 'https://example.com',
+						slug: 'a'
+					},
+					{
+						name: 'Person B',
+						avatar: 'https://example.com',
+						slug: 'b'
+					},
+					{
+						name: 'Person C',
+						avatar: 'https://example.com',
+						slug: 'c'
+					}
+				],
+				tags: [
+					{
+						name: 'ActivityPub',
+						link: '/tag/ActivityPub'
+					},
+					{
+						name: 'css',
+						link: '/tag/css'
+					},
+					{
+						name: 'guile',
+						link: '/tag/guile'
+					}
+				]
+			}
+		]
+	}
+};
+
+export const MultipleProjects: Story = {
+	args: {
+		i18n: {
+			heading: {
+				lastUpdated: 'page.projects.table.heading.last_updated',
+				name: 'page.projects.table.heading.name'
+			},
+			table: {
+				updated: 'page.projects.file_table.updated'
+			}
+		},
+		projects: [
+			{
+				name: 'Project A',
+				description:
+					'This software project is a web-based application that will allow users to book appointments online.',
+				avatar: 'https://example.com',
+				// Date back three months
+				lastUpdated: new Date(Date.now() - 3 * 30 * 24 * 60 * 60 * 1000),
+				members: [
+					{
+						name: 'Person A',
+						avatar: 'https://example.com',
+						slug: 'a'
+					},
+					{
+						name: 'Person B',
+						avatar: 'https://example.com',
+						slug: 'b'
+					},
+					{
+						name: 'Person C',
+						avatar: 'https://example.com',
+						slug: 'c'
+					}
+				],
+				tags: [
+					{
+						name: 'ActivityPub',
+						link: '/tag/ActivityPub'
+					},
+					{
+						name: 'css',
+						link: '/tag/css'
+					},
+					{
+						name: 'guile',
+						link: '/tag/guile'
+					}
+				]
+			},
+			{
+				name: 'Project B',
+				description:
+					'This software project is a web-based application that will allow users to book appointments online.',
+				avatar: 'https://example.com',
+				// Date back three months
+				lastUpdated: new Date(Date.now() - 3 * 30 * 24 * 60 * 60 * 1000),
+				members: [
+					{
+						name: 'Person A',
+						avatar: 'https://example.com',
+						slug: 'a'
+					},
+					{
+						name: 'Person B',
+						avatar: 'https://example.com',
+						slug: 'b'
+					}
+				],
+				tags: [
+					{
+						name: 'ActivityPub',
+						link: '/tag/ActivityPub'
+					},
+					{
+						name: 'css',
+						link: '/tag/css'
+					},
+					{
+						name: 'guile',
+						link: '/tag/guile'
+					}
+				]
+			}
+		]
+	}
+};

stories/organisms/LoginForm.stories.ts

@@ -24,11 +24,8 @@ const meta = {
 		sb: 'Templates/Profile'
 	},
 	argTypes: {
-		form: { controls: 'object' },
-		i18n: { controls: 'object' },
 		onSubmit: { action: 'submit' },
-		sb: { control: 'radio', options: ['Templates/Profile'] },
-		servers: { controls: 'object' }
+		sb: { control: 'radio', options: ['Templates/Profile'] }
 	},
 	decorators: [withActions, withLinks]
 } satisfies Meta<LoginForm>;
@@ -38,6 +35,13 @@ type Story = StoryObj<typeof meta>;
 
 export const Plain: Story = {
 	args: {
+		data: {
+			servers: {
+				1: 'fig.fr33domlover.site',
+				2: 'grape.fr33domlover.site',
+				3: 'walnut.fr33domlover.site'
+			}
+		},
 		form: {
 			account: 'jane.doe@domain.example',
 			incorrect: false,
@@ -62,13 +66,19 @@ export const Plain: Story = {
 				incorrect: 'page.login.form.validation.incorrect',
 				missing: 'page.login.form.validation.missing'
 			}
-		},
-		servers: []
+		}
 	}
 };
 
 export const MissingInput: Story = {
 	args: {
+		data: {
+			servers: {
+				1: 'fig.fr33domlover.site',
+				2: 'grape.fr33domlover.site',
+				3: 'walnut.fr33domlover.site'
+			}
+		},
 		form: {
 			account: '',
 			incorrect: false,
@@ -93,13 +103,19 @@ export const MissingInput: Story = {
 				incorrect: 'page.login.form.validation.incorrect',
 				missing: 'page.login.form.validation.missing'
 			}
-		},
-		servers: []
+		}
 	}
 };
 
 export const InvalidFormData: Story = {
 	args: {
+		data: {
+			servers: {
+				1: 'fig.fr33domlover.site',
+				2: 'grape.fr33domlover.site',
+				3: 'walnut.fr33domlover.site'
+			}
+		},
 		form: {
 			account: 'jane.doe@domain.example',
 			incorrect: true,
@@ -124,7 +140,6 @@ export const InvalidFormData: Story = {
 				incorrect: 'page.login.form.validation.incorrect',
 				missing: 'page.login.form.validation.missing'
 			}
-		},
-		servers: []
+		}
 	}
 };

stories/pages/Login.stories.ts

@@ -28,6 +28,9 @@ type Story = StoryObj<typeof meta>;
 
 export const Plain: Story = {
 	args: {
+		data: {
+			servers: {}
+		},
 		form: {
 			account: 'jane.doe@domain.example',
 			incorrect: false,
@@ -38,6 +41,9 @@ export const Plain: Story = {
 
 export const MissingInput: Story = {
 	args: {
+		data: {
+			servers: {}
+		},
 		form: {
 			account: '',
 			incorrect: false,
@@ -48,6 +54,9 @@ export const MissingInput: Story = {
 
 export const InvalidFormData: Story = {
 	args: {
+		data: {
+			servers: {}
+		},
 		form: {
 			account: 'jane.doe@domain.example',
 			incorrect: true,

stories/pages/Projects.stories.ts

@@ -0,0 +1,26 @@
+/* Stories for Projects page.
+ * Copyright (C) 2024 André Jaenisch
+ * SPDX-FileCopyrightText: 2024 André Jaenisch
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import Projects from '$lib/components/pages/Projects.svelte';
+
+const meta = {
+	title: 'Pages/Projects',
+	component: Projects,
+	tags: ['autodocs']
+} satisfies Meta<Projects>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Plain: Story = {};

stories/templates/Login.stories.ts

@@ -36,6 +36,9 @@ type Story = StoryObj<typeof meta>;
 
 export const Plain: Story = {
 	args: {
+		data: {
+			servers: {}
+		},
 		form: {
 			account: 'jane.doe@domain.example',
 			incorrect: false,
@@ -46,6 +49,9 @@ export const Plain: Story = {
 
 export const MissingInput: Story = {
 	args: {
+		data: {
+			servers: {}
+		},
 		form: {
 			account: '',
 			incorrect: false,
@@ -56,6 +62,9 @@ export const MissingInput: Story = {
 
 export const InvalidFormData: Story = {
 	args: {
+		data: {
+			servers: {}
+		},
 		form: {
 			account: 'jane.doe@domain.example',
 			incorrect: true,

stories/templates/Projects.stories.ts

@@ -0,0 +1,26 @@
+/* Stories for Projects template.
+ * Copyright (C) 2024 André Jaenisch
+ * SPDX-FileCopyrightText: 2024 André Jaenisch
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import Projects from '$lib/components/templates/Projects.svelte';
+
+const meta = {
+	title: 'Templates/Projects',
+	component: Projects,
+	tags: ['autodocs']
+} satisfies Meta<Projects>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Plain: Story = {};