From 0f936ec0e7606cb79434d94096b6e113a7ce78eb Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Fri, 15 Dec 2023 18:35:16 +0100 Subject: refactor(stories): migrate stories to CSF3 format --- .../organisms/posts-list/posts-list.stories.tsx | 259 +++++++-------------- 1 file changed, 83 insertions(+), 176 deletions(-) (limited to 'src/components/organisms/posts-list/posts-list.stories.tsx') diff --git a/src/components/organisms/posts-list/posts-list.stories.tsx b/src/components/organisms/posts-list/posts-list.stories.tsx index 0a00afe..5ed1f44 100644 --- a/src/components/organisms/posts-list/posts-list.stories.tsx +++ b/src/components/organisms/posts-list/posts-list.stories.tsx @@ -1,181 +1,88 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { PostsList } from './posts-list'; +import type { Meta, StoryObj } from '@storybook/react'; +import NextImage from 'next/image'; +import { wpPostsFixture } from '../../../../tests/fixtures'; +import { type PostData, PostsList } from './posts-list'; -/** - * PostsList - Storybook Meta - */ -export default { - title: 'Organisms/PostsList', +const meta = { component: PostsList, - args: {}, - argTypes: { - baseUrl: { - control: { - type: 'text', - }, - description: 'The pagination base url.', - table: { - category: 'Options', - defaultValue: { summary: '/page/' }, - }, - type: { - name: 'string', - required: false, - }, - }, - byYear: { - control: { - type: 'boolean', - }, - description: 'True to display the posts by year.', - table: { - category: 'Options', - defaultValue: { summary: false }, - }, - type: { - name: 'boolean', - required: false, - }, - }, - isLoading: { - control: { - type: 'boolean', - }, - description: 'Determine if the data is loading.', - table: { - category: 'Options', - defaultValue: { summary: false }, - }, - type: { - name: 'boolean', - required: false, - }, - }, - loadMore: { - control: { - type: null, - }, - description: 'A function to load more posts on button click.', - table: { - category: 'Events', - }, - type: { - name: 'function', - required: false, - }, - }, - pageNumber: { - control: { - type: 'number', - }, - description: 'The current page number.', - table: { - category: 'Options', - defaultValue: { summary: 1 }, - }, - type: { - name: 'number', - required: false, - }, - }, - posts: { - description: 'The posts data.', - type: { - name: 'object', - required: true, - value: {}, - }, - }, - showLoadMoreBtn: { - control: { - type: 'boolean', - }, - description: 'Determine if the load more button should be visible.', - table: { - category: 'Options', - defaultValue: { summary: false }, - }, - type: { - name: 'boolean', - required: false, - }, - }, - siblings: { - control: { - type: 'number', - }, - description: 'The number of page siblings inside pagination.', - table: { - category: 'Options', - defaultValue: { summary: 1 }, - }, - type: { - name: 'number', - required: false, - }, - }, - titleLevel: { - control: { - type: 'number', - min: 1, - max: 6, - }, - description: 'The title level (hn).', - table: { - category: 'Options', - defaultValue: { summary: 2 }, - }, - type: { - name: 'number', - required: false, - }, - }, - total: { - control: { - type: 'number', - }, - description: 'The number of posts.', - type: { - name: 'number', - required: true, - }, - }, - }, -} as ComponentMeta; + title: 'Organisms/PostsList', +} satisfies Meta; + +export default meta; -const Template: ComponentStory = (args) => ( - -); +type Story = StoryObj; -/** - * PostsList Stories - Default - */ -export const Default = Template.bind({}); -Default.args = { - posts: [ - { - excerpt: - 'Omnis voluptatem et sit sit porro possimus quo rerum. Natus et sint cupiditate magnam omnis a consequuntur reprehenderit. Ex omnis voluptatem itaque id laboriosam qui dolorum facilis architecto. Impedit aliquid et qui quae dolorum accusamus rerum.', - heading: 'Post 1', - id: 'post1', - meta: { publicationDate: '2023-11-06' }, - url: '#post1', - }, - { - excerpt: - 'Nobis omnis excepturi deserunt laudantium unde totam quam. Voluptates maiores minima voluptatem nihil ea voluptatem similique. Praesentium ratione necessitatibus et et dolore voluptas illum dignissimos ipsum. Eius tempore ex.', - heading: 'Post 2', - id: 'post2', - meta: { publicationDate: '2023-11-05' }, - url: '#post2', - }, - { - excerpt: - 'Doloremque est dolorum explicabo. Laudantium quos delectus odit esse fugit officiis. Fugit provident vero harum atque. Eos nam qui sit ut minus voluptas. Reprehenderit rerum ut nostrum. Eos dolores mollitia quia ea voluptatem rerum vel.', - heading: 'Post 3', - id: 'post3', - meta: { publicationDate: '2023-11-04' }, - url: '#post3', - }, - ], +export const Example: Story = { + args: { + posts: wpPostsFixture.map((post): PostData => { + return { + ...post, + cover: post.featuredImage ? ( + + ) : undefined, + excerpt: post.contentParts.beforeMore, + heading: post.title, + id: post.databaseId, + meta: { + author: post.author.node.name, + comments: post.commentCount + ? { + count: post.commentCount, + postHeading: post.title, + } + : undefined, + publicationDate: post.date, + updateDate: post.modified, + wordsCount: post.info.wordsCount, + }, + url: post.slug, + }; + }), + total: wpPostsFixture.length, + }, +}; + +export const WithLoadMoreButton: Story = { + args: { + posts: wpPostsFixture + .map((post): PostData => { + return { + ...post, + cover: post.featuredImage ? ( + + ) : undefined, + excerpt: post.contentParts.beforeMore, + heading: post.title, + id: post.databaseId, + meta: { + author: post.author.node.name, + comments: post.commentCount + ? { + count: post.commentCount, + postHeading: post.title, + } + : undefined, + publicationDate: post.date, + updateDate: post.modified, + wordsCount: post.info.wordsCount, + }, + url: post.slug, + }; + }) + // eslint-disable-next-line @typescript-eslint/no-magic-numbers + .slice(0, 5), + total: wpPostsFixture.length, + }, }; -- cgit v1.2.3