From 91f6e242807c8236cbf0cd0a4dd193ef7fcf86fd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Jaenisch?= Date: Sun, 17 Mar 2024 16:18:13 +0100 Subject: [PATCH] fix: add stories for Projects MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit I noticed that I missed stories for one or two projects in Storybook. Signed-off-by: André Jaenisch --- src/lib/components/templates/Profile.svelte | 4 - stories/pages/Projects.stories.ts | 138 +++++++++++++++++++- stories/templates/Projects.stories.ts | 138 +++++++++++++++++++- 3 files changed, 274 insertions(+), 6 deletions(-) diff --git a/src/lib/components/templates/Profile.svelte b/src/lib/components/templates/Profile.svelte index b5ce7b2..185dbeb 100644 --- a/src/lib/components/templates/Profile.svelte +++ b/src/lib/components/templates/Profile.svelte @@ -22,10 +22,6 @@ 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. */ diff --git a/stories/pages/Projects.stories.ts b/stories/pages/Projects.stories.ts index 685be2a..adfc514 100644 --- a/stories/pages/Projects.stories.ts +++ b/stories/pages/Projects.stories.ts @@ -23,4 +23,140 @@ const meta = { export default meta; type Story = StoryObj; -export const Plain: Story = {}; +export const NoProjects: Story = { + args: { + data: { + projects: [] + } + } +}; + +export const SingleProject: Story = { + args: { + data: { + 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: { + data: { + 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/templates/Projects.stories.ts b/stories/templates/Projects.stories.ts index b975d5c..9d854f7 100644 --- a/stories/templates/Projects.stories.ts +++ b/stories/templates/Projects.stories.ts @@ -23,4 +23,140 @@ const meta = { export default meta; type Story = StoryObj; -export const Plain: Story = {}; +export const NoProjects: Story = { + args: { + data: { + projects: [] + } + } +}; + +export const SingleProject: Story = { + args: { + data: { + 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: { + data: { + 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' + } + ] + } + ] + } + } +};