From 769e3bcab357a4f3525c8c76e00c39e87112ba5c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Jaenisch?= Date: Thu, 14 Mar 2024 16:22:22 +0100 Subject: [PATCH] feat: add new components to Storybook MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit I included stories for the new components introduced by the Projects page. Signed-off-by: André Jaenisch --- .prettierignore | 1 + src/lib/components/atoms/Avatar.svelte | 2 + src/lib/components/atoms/DisplayName.svelte | 2 + src/lib/components/templates/Profile.svelte | 5 + stories/ColorPalette.mdx | 25 ++- stories/Typography.mdx | 26 +-- stories/atoms/Avatar.stories.ts | 2 +- stories/atoms/BlockOrReport.stories.ts | 8 +- stories/atoms/Created.stories.ts | 16 +- stories/atoms/DisplayName.stories.ts | 26 +-- stories/icons/ChevronLeft24.stories.ts | 36 ++++ stories/icons/ChevronRight24.stories.ts | 36 ++++ stories/icons/EyeClosed16.stories.ts | 36 ++++ stories/icons/Filter24.stories.ts | 36 ++++ stories/icons/RepoForked16.stories.ts | 36 ++++ stories/icons/Search24.stories.ts | 36 ++++ stories/icons/TriangleDown16.stories.ts | 36 ++++ stories/icons/TriangleDown24.stories.ts | 36 ++++ stories/molecules/MoreFilters.stories.ts | 32 ++++ stories/molecules/Pagination.stories.ts | 33 ++++ stories/molecules/Projects.stories.ts | 32 ++++ stories/molecules/Search.stories.ts | 33 ++++ stories/molecules/Starred.stories.ts | 32 ++++ stories/organisms/FileTable.stories.ts | 193 ++++++++++++++++++++ stories/organisms/LoginForm.stories.ts | 35 +++- stories/pages/Login.stories.ts | 9 + stories/pages/Projects.stories.ts | 26 +++ stories/templates/Login.stories.ts | 9 + stories/templates/Projects.stories.ts | 26 +++ 29 files changed, 794 insertions(+), 67 deletions(-) create mode 100644 stories/icons/ChevronLeft24.stories.ts create mode 100644 stories/icons/ChevronRight24.stories.ts create mode 100644 stories/icons/EyeClosed16.stories.ts create mode 100644 stories/icons/Filter24.stories.ts create mode 100644 stories/icons/RepoForked16.stories.ts create mode 100644 stories/icons/Search24.stories.ts create mode 100644 stories/icons/TriangleDown16.stories.ts create mode 100644 stories/icons/TriangleDown24.stories.ts create mode 100644 stories/molecules/MoreFilters.stories.ts create mode 100644 stories/molecules/Pagination.stories.ts create mode 100644 stories/molecules/Projects.stories.ts create mode 100644 stories/molecules/Search.stories.ts create mode 100644 stories/molecules/Starred.stories.ts create mode 100644 stories/organisms/FileTable.stories.ts create mode 100644 stories/pages/Projects.stories.ts create mode 100644 stories/templates/Projects.stories.ts diff --git a/.prettierignore b/.prettierignore index b2f5cc8..8d8d0a9 100644 --- a/.prettierignore +++ b/.prettierignore @@ -17,3 +17,4 @@ node_modules pnpm-lock.yaml package-lock.json yarn.lock +stories/*.mdx diff --git a/src/lib/components/atoms/Avatar.svelte b/src/lib/components/atoms/Avatar.svelte index f6fb609..f95d828 100644 --- a/src/lib/components/atoms/Avatar.svelte +++ b/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 = ''; diff --git a/src/lib/components/atoms/DisplayName.svelte b/src/lib/components/atoms/DisplayName.svelte index 5b4ab26..b5ec045 100644 --- a/src/lib/components/atoms/DisplayName.svelte +++ b/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 = ''; diff --git a/src/lib/components/templates/Profile.svelte b/src/lib/components/templates/Profile.svelte index aeded83..b5ce7b2 100644 --- a/src/lib/components/templates/Profile.svelte +++ b/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: '', diff --git a/stories/ColorPalette.mdx b/stories/ColorPalette.mdx index 039f19b..e5745e4 100644 --- a/stories/ColorPalette.mdx +++ b/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 . - \*/} +{/* + * 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 . + */} import { ColorItem, ColorPalette, Meta } from '@storybook/blocks'; diff --git a/stories/Typography.mdx b/stories/Typography.mdx index 3827a25..af90209 100644 --- a/stories/Typography.mdx +++ b/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 . - \*/} +{/* + * + * 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 . + */} import { Meta } from '@storybook/blocks'; diff --git a/stories/atoms/Avatar.stories.ts b/stories/atoms/Avatar.stories.ts index 3ae4a21..82cc6c6 100644 --- a/stories/atoms/Avatar.stories.ts +++ b/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; export default meta; diff --git a/stories/atoms/BlockOrReport.stories.ts b/stories/atoms/BlockOrReport.stories.ts index 85e9b64..a398159 100644 --- a/stories/atoms/BlockOrReport.stories.ts +++ b/stories/atoms/BlockOrReport.stories.ts @@ -23,10 +23,4 @@ const meta = { export default meta; type Story = StoryObj; -export const Plain: Story = { - parameters: { - controls: { - hideNoControlsWarning: true - } - } -}; +export const Plain: Story = {}; diff --git a/stories/atoms/Created.stories.ts b/stories/atoms/Created.stories.ts index 350e33e..d172224 100644 --- a/stories/atoms/Created.stories.ts +++ b/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; @@ -36,10 +33,7 @@ type Story = StoryObj; 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' } }; diff --git a/stories/atoms/DisplayName.stories.ts b/stories/atoms/DisplayName.stories.ts index a3bfdf1..6ddd60d 100644 --- a/stories/atoms/DisplayName.stories.ts +++ b/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; export default meta; type Story = StoryObj; -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' + } + } +}; diff --git a/stories/icons/ChevronLeft24.stories.ts b/stories/icons/ChevronLeft24.stories.ts new file mode 100644 index 0000000..f685b52 --- /dev/null +++ b/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; + +export default meta; +type Story = StoryObj; + +export const Plain: Story = {}; diff --git a/stories/icons/ChevronRight24.stories.ts b/stories/icons/ChevronRight24.stories.ts new file mode 100644 index 0000000..4f591b8 --- /dev/null +++ b/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; + +export default meta; +type Story = StoryObj; + +export const Plain: Story = {}; diff --git a/stories/icons/EyeClosed16.stories.ts b/stories/icons/EyeClosed16.stories.ts new file mode 100644 index 0000000..aaacdae --- /dev/null +++ b/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; + +export default meta; +type Story = StoryObj; + +export const Plain: Story = {}; diff --git a/stories/icons/Filter24.stories.ts b/stories/icons/Filter24.stories.ts new file mode 100644 index 0000000..52c7e57 --- /dev/null +++ b/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; + +export default meta; +type Story = StoryObj; + +export const Plain: Story = {}; diff --git a/stories/icons/RepoForked16.stories.ts b/stories/icons/RepoForked16.stories.ts new file mode 100644 index 0000000..496cbf3 --- /dev/null +++ b/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; + +export default meta; +type Story = StoryObj; + +export const Plain: Story = {}; diff --git a/stories/icons/Search24.stories.ts b/stories/icons/Search24.stories.ts new file mode 100644 index 0000000..14932cc --- /dev/null +++ b/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; + +export default meta; +type Story = StoryObj; + +export const Plain: Story = {}; diff --git a/stories/icons/TriangleDown16.stories.ts b/stories/icons/TriangleDown16.stories.ts new file mode 100644 index 0000000..5bc77e3 --- /dev/null +++ b/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; + +export default meta; +type Story = StoryObj; + +export const Plain: Story = {}; diff --git a/stories/icons/TriangleDown24.stories.ts b/stories/icons/TriangleDown24.stories.ts new file mode 100644 index 0000000..83f9194 --- /dev/null +++ b/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; + +export default meta; +type Story = StoryObj; + +export const Plain: Story = {}; diff --git a/stories/molecules/MoreFilters.stories.ts b/stories/molecules/MoreFilters.stories.ts new file mode 100644 index 0000000..e265119 --- /dev/null +++ b/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 . + */ + +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; + +export default meta; +type Story = StoryObj; + +export const Plain: Story = { + args: { + i18n: { + submit: 'page.projects.form.fields.more_filters.submit' + } + } +}; diff --git a/stories/molecules/Pagination.stories.ts b/stories/molecules/Pagination.stories.ts new file mode 100644 index 0000000..33e4050 --- /dev/null +++ b/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 . + */ + +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; + +export default meta; +type Story = StoryObj; + +export const Plain: Story = { + args: { + i18n: { + next: 'page.projects.nav.next', + previous: 'page.projects.nav.previous' + } + } +}; diff --git a/stories/molecules/Projects.stories.ts b/stories/molecules/Projects.stories.ts new file mode 100644 index 0000000..c1a8715 --- /dev/null +++ b/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 . + */ + +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; + +export default meta; +type Story = StoryObj; + +export const Plain: Story = { + args: { + i18n: { + submit: 'page.projects.form.fields.projects.submit' + } + } +}; diff --git a/stories/molecules/Search.stories.ts b/stories/molecules/Search.stories.ts new file mode 100644 index 0000000..efd7f3d --- /dev/null +++ b/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 . + */ + +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; + +export default meta; +type Story = StoryObj; + +export const Plain: Story = { + args: { + i18n: { + placeholder: 'page.projects.form.fields.search.placeholder', + submit: 'page.projects.form.fields.search.submit' + } + } +}; diff --git a/stories/molecules/Starred.stories.ts b/stories/molecules/Starred.stories.ts new file mode 100644 index 0000000..a7e255b --- /dev/null +++ b/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 . + */ + +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; + +export default meta; +type Story = StoryObj; + +export const Plain: Story = { + args: { + i18n: { + submit: 'page.projects.form.fields.starred.submit' + } + } +}; diff --git a/stories/organisms/FileTable.stories.ts b/stories/organisms/FileTable.stories.ts new file mode 100644 index 0000000..71c399a --- /dev/null +++ b/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 . + */ + +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; + +export default meta; +type Story = StoryObj; + +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' + } + ] + } + ] + } +}; diff --git a/stories/organisms/LoginForm.stories.ts b/stories/organisms/LoginForm.stories.ts index d0c5d50..25fd186 100644 --- a/stories/organisms/LoginForm.stories.ts +++ b/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; @@ -38,6 +35,13 @@ type Story = StoryObj; 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: [] + } } }; diff --git a/stories/pages/Login.stories.ts b/stories/pages/Login.stories.ts index e7d7865..8cacfea 100644 --- a/stories/pages/Login.stories.ts +++ b/stories/pages/Login.stories.ts @@ -28,6 +28,9 @@ type Story = StoryObj; 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, diff --git a/stories/pages/Projects.stories.ts b/stories/pages/Projects.stories.ts new file mode 100644 index 0000000..685be2a --- /dev/null +++ b/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 . + */ + +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; + +export default meta; +type Story = StoryObj; + +export const Plain: Story = {}; diff --git a/stories/templates/Login.stories.ts b/stories/templates/Login.stories.ts index 4f369b9..57776b3 100644 --- a/stories/templates/Login.stories.ts +++ b/stories/templates/Login.stories.ts @@ -36,6 +36,9 @@ type Story = StoryObj; 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, diff --git a/stories/templates/Projects.stories.ts b/stories/templates/Projects.stories.ts new file mode 100644 index 0000000..b975d5c --- /dev/null +++ b/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 . + */ + +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; + +export default meta; +type Story = StoryObj; + +export const Plain: Story = {};