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 --- .../approved-comment/approved-comment.stories.ts | 65 ++++++ .../approved-comment/approved-comment.stories.tsx | 126 ---------- .../pending-comment/pending-comment.stories.ts | 15 ++ .../pending-comment/pending-comment.stories.tsx | 21 -- .../reply-comment-form.stories.tsx | 30 +-- .../comments-list/comments-list.stories.ts | 142 +++++++++++ .../comments-list/comments-list.stories.tsx | 188 --------------- .../forms/comment-form/comment-form.stories.ts | 23 ++ .../forms/comment-form/comment-form.stories.tsx | 44 ---- .../forms/contact-form/contact-form.stories.ts | 23 ++ .../forms/contact-form/contact-form.stories.tsx | 35 --- .../forms/search-form/search-form.stories.ts | 30 +++ .../forms/search-form/search-form.stories.tsx | 46 ---- .../ackee-toggle/ackee-toggle.stories.ts | 15 ++ .../ackee-toggle/ackee-toggle.stories.tsx | 21 -- .../motion-toggle/motion-toggle.stories.ts | 15 ++ .../motion-toggle/motion-toggle.stories.tsx | 21 -- .../prism-theme-toggle.stories.ts | 15 ++ .../prism-theme-toggle.stories.tsx | 20 -- .../forms/settings-form/settings-form.stories.ts | 24 ++ .../forms/settings-form/settings-form.stories.tsx | 21 -- .../theme-toggle/theme-toggle.stories.ts | 15 ++ .../theme-toggle/theme-toggle.stories.tsx | 20 -- .../nav/breadcrumbs/breadcrumbs.stories.ts | 36 +++ .../nav/breadcrumbs/breadcrumbs.stories.tsx | 55 ----- .../organisms/nav/main-nav/main-nav.stories.tsx | 107 ++++----- .../organisms/nav/pagination/pagination.stories.ts | 95 ++++++++ .../nav/pagination/pagination.stories.tsx | 150 ------------ .../navbar/navbar-item/navbar-item.stories.ts | 30 +++ .../navbar/navbar-item/navbar-item.stories.tsx | 38 --- src/components/organisms/navbar/navbar.stories.tsx | 108 ++++----- .../post-preview/post-preview.stories.tsx | 204 +++++----------- .../organisms/posts-list/posts-list.stories.tsx | 259 +++++++-------------- src/components/organisms/posts-list/posts-list.tsx | 2 +- .../project-overview/project-overview.stories.tsx | 90 +++---- .../widgets/image-widget/image-widget.stories.tsx | 141 ++++------- .../widgets/links-widget/links-widget.stories.tsx | 72 +++--- .../sharing-widget/sharing-widget.stories.tsx | 59 ++--- .../social-media-widget.stories.tsx | 49 ++-- .../widgets/toc-widget/toc-widget.stories.tsx | 63 ++--- 40 files changed, 947 insertions(+), 1586 deletions(-) create mode 100644 src/components/organisms/comment/approved-comment/approved-comment.stories.ts delete mode 100644 src/components/organisms/comment/approved-comment/approved-comment.stories.tsx create mode 100644 src/components/organisms/comment/pending-comment/pending-comment.stories.ts delete mode 100644 src/components/organisms/comment/pending-comment/pending-comment.stories.tsx create mode 100644 src/components/organisms/comments-list/comments-list.stories.ts delete mode 100644 src/components/organisms/comments-list/comments-list.stories.tsx create mode 100644 src/components/organisms/forms/comment-form/comment-form.stories.ts delete mode 100644 src/components/organisms/forms/comment-form/comment-form.stories.tsx create mode 100644 src/components/organisms/forms/contact-form/contact-form.stories.ts delete mode 100644 src/components/organisms/forms/contact-form/contact-form.stories.tsx create mode 100644 src/components/organisms/forms/search-form/search-form.stories.ts delete mode 100644 src/components/organisms/forms/search-form/search-form.stories.tsx create mode 100644 src/components/organisms/forms/settings-form/ackee-toggle/ackee-toggle.stories.ts delete mode 100644 src/components/organisms/forms/settings-form/ackee-toggle/ackee-toggle.stories.tsx create mode 100644 src/components/organisms/forms/settings-form/motion-toggle/motion-toggle.stories.ts delete mode 100644 src/components/organisms/forms/settings-form/motion-toggle/motion-toggle.stories.tsx create mode 100644 src/components/organisms/forms/settings-form/prism-theme-toggle/prism-theme-toggle.stories.ts delete mode 100644 src/components/organisms/forms/settings-form/prism-theme-toggle/prism-theme-toggle.stories.tsx create mode 100644 src/components/organisms/forms/settings-form/settings-form.stories.ts delete mode 100644 src/components/organisms/forms/settings-form/settings-form.stories.tsx create mode 100644 src/components/organisms/forms/settings-form/theme-toggle/theme-toggle.stories.ts delete mode 100644 src/components/organisms/forms/settings-form/theme-toggle/theme-toggle.stories.tsx create mode 100644 src/components/organisms/nav/breadcrumbs/breadcrumbs.stories.ts delete mode 100644 src/components/organisms/nav/breadcrumbs/breadcrumbs.stories.tsx create mode 100644 src/components/organisms/nav/pagination/pagination.stories.ts delete mode 100644 src/components/organisms/nav/pagination/pagination.stories.tsx create mode 100644 src/components/organisms/navbar/navbar-item/navbar-item.stories.ts delete mode 100644 src/components/organisms/navbar/navbar-item/navbar-item.stories.tsx (limited to 'src/components/organisms') diff --git a/src/components/organisms/comment/approved-comment/approved-comment.stories.ts b/src/components/organisms/comment/approved-comment/approved-comment.stories.ts new file mode 100644 index 0000000..ac24463 --- /dev/null +++ b/src/components/organisms/comment/approved-comment/approved-comment.stories.ts @@ -0,0 +1,65 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { ApprovedComment } from './approved-comment'; + +const meta = { + component: ApprovedComment, + title: 'Organisms/Comment/Approved', +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Example: Story = { + args: { + author: { + name: 'Kameron.Conn', + }, + content: + 'Quia est eos deserunt qui perferendis est pariatur eaque. Deserunt omnis quis consectetur ea quam a cupiditate. Velit laboriosam rem nihil numquam quia.', + id: 1, + publicationDate: '2023-11-06', + }, +}; + +export const WithAvatar: Story = { + args: { + author: { + avatar: { + alt: 'Kameron.Conn avatar', + src: 'https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/82.jpg', + }, + name: 'Kameron.Conn', + }, + content: + 'Quia est eos deserunt qui perferendis est pariatur eaque. Deserunt omnis quis consectetur ea quam a cupiditate. Velit laboriosam rem nihil numquam quia.', + id: 2, + publicationDate: '2023-11-06', + }, +}; + +export const WithWebsite: Story = { + args: { + author: { + name: 'Kameron.Conn', + website: 'https://www.armandphilippot.com/', + }, + content: + 'Quia est eos deserunt qui perferendis est pariatur eaque. Deserunt omnis quis consectetur ea quam a cupiditate. Velit laboriosam rem nihil numquam quia.', + id: 3, + publicationDate: '2023-11-06', + }, +}; + +export const WithReplyBtn: Story = { + args: { + author: { + name: 'Kameron.Conn', + }, + content: + 'Quia est eos deserunt qui perferendis est pariatur eaque. Deserunt omnis quis consectetur ea quam a cupiditate. Velit laboriosam rem nihil numquam quia.', + id: 4, + publicationDate: '2023-11-06', + replyBtn: 'Reply', + }, +}; diff --git a/src/components/organisms/comment/approved-comment/approved-comment.stories.tsx b/src/components/organisms/comment/approved-comment/approved-comment.stories.tsx deleted file mode 100644 index 36afa6b..0000000 --- a/src/components/organisms/comment/approved-comment/approved-comment.stories.tsx +++ /dev/null @@ -1,126 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { ApprovedComment } from './approved-comment'; - -/** - * ApprovedComment - Storybook Meta - */ -export default { - title: 'Organisms/Comment/ApprovedComment', - component: ApprovedComment, - argTypes: { - author: { - description: 'The author data.', - type: { - name: 'object', - required: true, - value: {}, - }, - }, - content: { - control: { - type: 'text', - }, - description: 'The comment body.', - type: { - name: 'string', - required: true, - }, - }, - id: { - control: { - type: 'string', - }, - description: 'The comment id.', - type: { - name: 'string', - required: true, - }, - }, - publicationDate: { - control: { - type: 'text', - }, - description: 'The publication date.', - type: { - name: 'string', - required: true, - }, - }, - replyBtn: { - control: { - type: null, - }, - description: 'Add a reply button.', - type: { - name: 'function', - required: false, - }, - }, - }, -} as ComponentMeta; - -const Template: ComponentStory = (args) => ( - -); - -/** - * ApprovedComment Stories - Default - */ -export const Default = Template.bind({}); -Default.args = { - author: { - name: 'Kameron.Conn', - }, - content: - 'Quia est eos deserunt qui perferendis est pariatur eaque. Deserunt omnis quis consectetur ea quam a cupiditate. Velit laboriosam rem nihil numquam quia.', - id: 1, - publicationDate: '2023-11-06', -}; - -/** - * ApprovedComment Stories - WithAvatar - */ -export const WithAvatar = Template.bind({}); -WithAvatar.args = { - author: { - avatar: { - alt: 'Kameron.Conn avatar', - src: 'https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/82.jpg', - }, - name: 'Kameron.Conn', - }, - content: - 'Quia est eos deserunt qui perferendis est pariatur eaque. Deserunt omnis quis consectetur ea quam a cupiditate. Velit laboriosam rem nihil numquam quia.', - id: 2, - publicationDate: '2023-11-06', -}; - -/** - * ApprovedComment Stories - WithWebsite - */ -export const WithWebsite = Template.bind({}); -WithWebsite.args = { - author: { - name: 'Kameron.Conn', - website: 'https://www.armandphilippot.com/', - }, - content: - 'Quia est eos deserunt qui perferendis est pariatur eaque. Deserunt omnis quis consectetur ea quam a cupiditate. Velit laboriosam rem nihil numquam quia.', - id: 3, - publicationDate: '2023-11-06', -}; - -/** - * ApprovedComment Stories - WithReplyBtn - */ -export const WithReplyBtn = Template.bind({}); -WithReplyBtn.args = { - author: { - name: 'Kameron.Conn', - }, - content: - 'Quia est eos deserunt qui perferendis est pariatur eaque. Deserunt omnis quis consectetur ea quam a cupiditate. Velit laboriosam rem nihil numquam quia.', - id: 4, - publicationDate: '2023-11-06', - replyBtn: 'Reply', -}; diff --git a/src/components/organisms/comment/pending-comment/pending-comment.stories.ts b/src/components/organisms/comment/pending-comment/pending-comment.stories.ts new file mode 100644 index 0000000..d823082 --- /dev/null +++ b/src/components/organisms/comment/pending-comment/pending-comment.stories.ts @@ -0,0 +1,15 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { PendingComment } from './pending-comment'; + +const meta = { + component: PendingComment, + title: 'Organisms/Comment/Pending', +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Example: Story = { + args: {}, +}; diff --git a/src/components/organisms/comment/pending-comment/pending-comment.stories.tsx b/src/components/organisms/comment/pending-comment/pending-comment.stories.tsx deleted file mode 100644 index 1b6e1d9..0000000 --- a/src/components/organisms/comment/pending-comment/pending-comment.stories.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { PendingComment } from './pending-comment'; - -/** - * PendingComment - Storybook Meta - */ -export default { - title: 'Organisms/Comment/PendingComment', - component: PendingComment, - argTypes: {}, -} as ComponentMeta; - -const Template: ComponentStory = (args) => ( - -); - -/** - * PendingComment Stories - Default - */ -export const Default = Template.bind({}); -Default.args = {}; diff --git a/src/components/organisms/comment/reply-comment-form/reply-comment-form.stories.tsx b/src/components/organisms/comment/reply-comment-form/reply-comment-form.stories.tsx index 57174ea..1638e15 100644 --- a/src/components/organisms/comment/reply-comment-form/reply-comment-form.stories.tsx +++ b/src/components/organisms/comment/reply-comment-form/reply-comment-form.stories.tsx @@ -1,25 +1,19 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { Heading } from '../../../atoms'; import { ReplyCommentForm } from './reply-comment-form'; -/** - * ReplyCommentForm - Storybook Meta - */ -export default { - title: 'Organisms/Comment/ReplyCommentForm', +const meta = { component: ReplyCommentForm, - argTypes: {}, -} as ComponentMeta; + title: 'Organisms/Comment/Reply Form', +} satisfies Meta; -const Template: ComponentStory = (args) => ( - -); +export default meta; -/** - * ReplyCommentForm Stories - Default - */ -export const Default = Template.bind({}); -Default.args = { - commentId: 5, - heading: Reply to comment 5, +type Story = StoryObj; + +export const Example: Story = { + args: { + commentId: 5, + heading: Reply to comment 5, + }, }; diff --git a/src/components/organisms/comments-list/comments-list.stories.ts b/src/components/organisms/comments-list/comments-list.stories.ts new file mode 100644 index 0000000..24c05cb --- /dev/null +++ b/src/components/organisms/comments-list/comments-list.stories.ts @@ -0,0 +1,142 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import type { CommentFormSubmit } from '../forms'; +import { type CommentData, CommentsList } from './comments-list'; + +const meta = { + component: CommentsList, + title: 'Organisms/CommentsList', +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +const saveComment: CommentFormSubmit = () => { + console.log('Comment saved!'); + + return undefined; +}; + +const comments = [ + { + author: { + name: 'Milan0', + avatar: { + alt: 'Milan0 avatar', + src: 'https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/976.jpg', + }, + }, + content: 'Fugit veniam quas qui dolor explicabo.', + id: 1, + isApproved: true, + publicationDate: '2023-01-23', + replies: [ + { + author: { name: 'Haskell42' }, + content: 'Error quas accusamus nesciunt enim quae a.', + id: 25, + isApproved: true, + publicationDate: '2023-02-04', + }, + { + author: { name: 'Hanna49', website: 'https://www.armandphilippot.com' }, + content: 'Ut ducimus neque aliquam soluta sed totam commodi cum sit.', + id: 30, + isApproved: true, + publicationDate: '2023-03-10', + }, + ], + }, + { + author: { + name: 'Corrine9', + avatar: { + alt: 'Corrine9 avatar', + src: 'https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/539.jpg', + }, + }, + content: + 'Dolore hic iure voluptatum quam error minima. Quas ut aperiam sit commodi cumque consequatur. Voluptas debitis veritatis officiis in voluptas ea et laborum animi. Voluptatem qui enim neque. Et sunt quo neque assumenda iure. Non vel ut consectetur.', + id: 2, + isApproved: true, + publicationDate: '2023-04-20', + }, + { + author: { name: 'Presley12' }, + content: + 'Nulla eaque similique recusandae enim aut eligendi iure consequatur. Et aut qui. Voluptatem a voluptatem consequatur aliquid distinctio ex culpa. Adipisci animi amet reprehenderit autem quia commodi voluptatum commodi.', + id: 3, + isApproved: true, + publicationDate: '2023-05-01', + replies: [ + { + author: { + name: 'Ana_Haley33', + avatar: { + alt: 'Ana_Haley33 avatar', + src: 'https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/881.jpg', + }, + }, + content: 'Ab ea et fugit autem.', + id: 17, + isApproved: true, + publicationDate: '2023-05-01', + }, + { + author: { name: 'Santos.Harris17' }, + content: + 'Illo dolores voluptatem similique voluptas quasi hic aspernatur ab nisi.', + id: 18, + isApproved: false, + publicationDate: '2023-05-02', + }, + ], + }, + { + author: { name: 'Julius.Borer' }, + content: 'Ea fugit totam et voluptatum quidem laborum explicabo fuga quod.', + id: 4, + isApproved: true, + publicationDate: '2023-06-15', + }, + { + author: { name: 'Geo87' }, + content: + 'Enim consequatur deleniti aliquid adipisci. Et mollitia saepe vel rerum totam praesentium assumenda repellat fuga. Ipsum ut architecto consequatur. Ut laborum suscipit sed corporis quas aliquid. Et et omnis quo. Dolore quia ipsum ut corporis eum et corporis qui.', + id: 5, + isApproved: false, + publicationDate: '2023-06-16', + }, + { + author: { name: 'Kurt.Keeling' }, + content: 'Eligendi repellat officiis amet.', + id: 6, + isApproved: true, + publicationDate: '2023-06-17', + }, +] satisfies CommentData[]; + +export const WithoutReplies: Story = { + args: { + comments, + depth: 0, + onSubmit: saveComment, + }, +}; + +export const WithReplies: Story = { + args: { + comments, + depth: 2, + onSubmit: saveComment, + }, +}; + +export const WithForbiddenReplies: Story = { + args: { + areRepliesForbidden: true, + comments, + depth: 3, + onSubmit: saveComment, + }, +}; diff --git a/src/components/organisms/comments-list/comments-list.stories.tsx b/src/components/organisms/comments-list/comments-list.stories.tsx deleted file mode 100644 index afebfb7..0000000 --- a/src/components/organisms/comments-list/comments-list.stories.tsx +++ /dev/null @@ -1,188 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { type CommentData, CommentsList } from './comments-list'; - -const saveComment = () => undefined; - -/** - * CommentsList - Storybook Meta - */ -export default { - title: 'Organisms/CommentsList', - component: CommentsList, - argTypes: { - comments: { - control: { - type: null, - }, - description: 'An array of comments.', - type: { - name: 'object', - required: true, - value: {}, - }, - }, - depth: { - control: { - type: 'number', - min: 0, - max: 4, - }, - description: 'The maximum depth. Use `0` to hide replies.', - table: { - category: 'Options', - defaultValue: { summary: 0 }, - }, - type: { - name: 'number', - required: false, - }, - }, - onSubmit: { - control: { - type: null, - }, - description: 'A callback function to save the comment form data.', - table: { - category: 'Events', - }, - type: { - name: 'function', - required: false, - }, - }, - }, -} as ComponentMeta; - -const Template: ComponentStory = (args) => ( - -); - -const comments = [ - { - author: { - name: 'Milan0', - avatar: { - alt: 'Milan0 avatar', - src: 'https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/976.jpg', - }, - }, - content: 'Fugit veniam quas qui dolor explicabo.', - id: 1, - isApproved: true, - publicationDate: '2023-01-23', - replies: [ - { - author: { name: 'Haskell42' }, - content: 'Error quas accusamus nesciunt enim quae a.', - id: 25, - isApproved: true, - publicationDate: '2023-02-04', - }, - { - author: { name: 'Hanna49', website: 'https://www.armandphilippot.com' }, - content: 'Ut ducimus neque aliquam soluta sed totam commodi cum sit.', - id: 30, - isApproved: true, - publicationDate: '2023-03-10', - }, - ], - }, - { - author: { - name: 'Corrine9', - avatar: { - alt: 'Corrine9 avatar', - src: 'https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/539.jpg', - }, - }, - content: - 'Dolore hic iure voluptatum quam error minima. Quas ut aperiam sit commodi cumque consequatur. Voluptas debitis veritatis officiis in voluptas ea et laborum animi. Voluptatem qui enim neque. Et sunt quo neque assumenda iure. Non vel ut consectetur.', - id: 2, - isApproved: true, - publicationDate: '2023-04-20', - }, - { - author: { name: 'Presley12' }, - content: - 'Nulla eaque similique recusandae enim aut eligendi iure consequatur. Et aut qui. Voluptatem a voluptatem consequatur aliquid distinctio ex culpa. Adipisci animi amet reprehenderit autem quia commodi voluptatum commodi.', - id: 3, - isApproved: true, - publicationDate: '2023-05-01', - replies: [ - { - author: { - name: 'Ana_Haley33', - avatar: { - alt: 'Ana_Haley33 avatar', - src: 'https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/881.jpg', - }, - }, - content: 'Ab ea et fugit autem.', - id: 17, - isApproved: true, - publicationDate: '2023-05-01', - }, - { - author: { name: 'Santos.Harris17' }, - content: - 'Illo dolores voluptatem similique voluptas quasi hic aspernatur ab nisi.', - id: 18, - isApproved: false, - publicationDate: '2023-05-02', - }, - ], - }, - { - author: { name: 'Julius.Borer' }, - content: 'Ea fugit totam et voluptatum quidem laborum explicabo fuga quod.', - id: 4, - isApproved: true, - publicationDate: '2023-06-15', - }, - { - author: { name: 'Geo87' }, - content: - 'Enim consequatur deleniti aliquid adipisci. Et mollitia saepe vel rerum totam praesentium assumenda repellat fuga. Ipsum ut architecto consequatur. Ut laborum suscipit sed corporis quas aliquid. Et et omnis quo. Dolore quia ipsum ut corporis eum et corporis qui.', - id: 5, - isApproved: false, - publicationDate: '2023-06-16', - }, - { - author: { name: 'Kurt.Keeling' }, - content: 'Eligendi repellat officiis amet.', - id: 6, - isApproved: true, - publicationDate: '2023-06-17', - }, -] satisfies CommentData[]; - -/** - * Layout Stories - Without nested comments - */ -export const WithoutReplies = Template.bind({}); -WithoutReplies.args = { - comments, - depth: 0, - onSubmit: saveComment, -}; - -/** - * Layout Stories - With nested comments - */ -export const WithReplies = Template.bind({}); -WithReplies.args = { - comments, - depth: 2, - onSubmit: saveComment, -}; - -/** - * Layout Stories - With nested comments and forbidden replies - */ -export const WithForbiddenReplies = Template.bind({}); -WithForbiddenReplies.args = { - areRepliesForbidden: true, - comments, - depth: 3, - onSubmit: saveComment, -}; diff --git a/src/components/organisms/forms/comment-form/comment-form.stories.ts b/src/components/organisms/forms/comment-form/comment-form.stories.ts new file mode 100644 index 0000000..0518f61 --- /dev/null +++ b/src/components/organisms/forms/comment-form/comment-form.stories.ts @@ -0,0 +1,23 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { CommentForm, type CommentFormSubmit } from './comment-form'; + +const meta = { + component: CommentForm, + title: 'Organisms/Forms/Comment', +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +const saveComment: CommentFormSubmit = () => { + console.log('Comment saved!'); + + return undefined; +}; + +export const Example: Story = { + args: { + onSubmit: saveComment, + }, +}; diff --git a/src/components/organisms/forms/comment-form/comment-form.stories.tsx b/src/components/organisms/forms/comment-form/comment-form.stories.tsx deleted file mode 100644 index fcc76fa..0000000 --- a/src/components/organisms/forms/comment-form/comment-form.stories.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { CommentForm as CommentFormComponent } from './comment-form'; - -/** - * CommentForm - Storybook Meta - */ -export default { - title: 'Organisms/Forms', - component: CommentFormComponent, - argTypes: { - parentId: { - control: { - type: null, - }, - description: 'The parent id if it is a reply.', - type: { - name: 'number', - required: false, - }, - }, - onSubmit: { - control: { - type: null, - }, - description: 'A callback function to process the comment form data.', - table: { - category: 'Events', - }, - type: { - name: 'function', - required: false, - }, - }, - }, -} as ComponentMeta; - -const Template: ComponentStory = (args) => ( - -); - -/** - * Forms Stories - Comment form - */ -export const CommentForm = Template.bind({}); diff --git a/src/components/organisms/forms/contact-form/contact-form.stories.ts b/src/components/organisms/forms/contact-form/contact-form.stories.ts new file mode 100644 index 0000000..cd2cd1b --- /dev/null +++ b/src/components/organisms/forms/contact-form/contact-form.stories.ts @@ -0,0 +1,23 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { ContactForm, type ContactFormSubmit } from './contact-form'; + +const meta = { + component: ContactForm, + title: 'Organisms/Forms/Contact', +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +const sendMail: ContactFormSubmit = () => { + console.log('Mail sent!'); + + return undefined; +}; + +export const Example: Story = { + args: { + onSubmit: sendMail, + }, +}; diff --git a/src/components/organisms/forms/contact-form/contact-form.stories.tsx b/src/components/organisms/forms/contact-form/contact-form.stories.tsx deleted file mode 100644 index 46111e1..0000000 --- a/src/components/organisms/forms/contact-form/contact-form.stories.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { ContactForm } from './contact-form'; - -/** - * ContactForm - Storybook Meta - */ -export default { - title: 'Organisms/Forms', - component: ContactForm, - argTypes: { - onSubmit: { - control: { - type: null, - }, - description: 'A callback function to process the contact form data.', - table: { - category: 'Events', - }, - type: { - name: 'function', - required: false, - }, - }, - }, -} as ComponentMeta; - -const Template: ComponentStory = (args) => ( - -); - -/** - * ContactForm Stories - Contact - */ -export const Contact = Template.bind({}); -Contact.args = {}; diff --git a/src/components/organisms/forms/search-form/search-form.stories.ts b/src/components/organisms/forms/search-form/search-form.stories.ts new file mode 100644 index 0000000..203d4a6 --- /dev/null +++ b/src/components/organisms/forms/search-form/search-form.stories.ts @@ -0,0 +1,30 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { SearchForm, type SearchFormSubmit } from './search-form'; + +const meta = { + component: SearchForm, + title: 'Organisms/Forms/Search', +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +const search: SearchFormSubmit = () => { + console.log('Searching!'); + + return undefined; +}; + +export const Example: Story = { + args: { + onSubmit: search, + }, +}; + +export const WithLabelHidden: Story = { + args: { + isLabelHidden: true, + onSubmit: search, + }, +}; diff --git a/src/components/organisms/forms/search-form/search-form.stories.tsx b/src/components/organisms/forms/search-form/search-form.stories.tsx deleted file mode 100644 index d8e4339..0000000 --- a/src/components/organisms/forms/search-form/search-form.stories.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { SearchForm } from './search-form'; - -/** - * SearchForm - Storybook Meta - */ -export default { - title: 'Organisms/Forms/Search', - component: SearchForm, - argTypes: { - isLabelHidden: { - control: { - type: 'boolean', - }, - description: 'Determine if the input label should be visually hidden.', - table: { - category: 'Options', - defaultValue: { summary: false }, - }, - type: { - name: 'boolean', - required: false, - }, - }, - }, -} as ComponentMeta; - -const Template: ComponentStory = (args) => ( - -); - -/** - * SearchForm Stories - Default - */ -export const Default = Template.bind({}); -Default.args = { - isLabelHidden: false, -}; - -/** - * SearchForm Stories - With hidden label - */ -export const WithHiddenLabel = Template.bind({}); -WithHiddenLabel.args = { - isLabelHidden: true, -}; diff --git a/src/components/organisms/forms/settings-form/ackee-toggle/ackee-toggle.stories.ts b/src/components/organisms/forms/settings-form/ackee-toggle/ackee-toggle.stories.ts new file mode 100644 index 0000000..1ec157d --- /dev/null +++ b/src/components/organisms/forms/settings-form/ackee-toggle/ackee-toggle.stories.ts @@ -0,0 +1,15 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { AckeeToggle } from './ackee-toggle'; + +const meta = { + component: AckeeToggle, + title: 'Organisms/Forms/Settings/Ackee', +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Example: Story = { + args: {}, +}; diff --git a/src/components/organisms/forms/settings-form/ackee-toggle/ackee-toggle.stories.tsx b/src/components/organisms/forms/settings-form/ackee-toggle/ackee-toggle.stories.tsx deleted file mode 100644 index abaf59f..0000000 --- a/src/components/organisms/forms/settings-form/ackee-toggle/ackee-toggle.stories.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { AckeeToggle } from './ackee-toggle'; - -/** - * AckeeToggle - Storybook Meta - */ -export default { - title: 'Organisms/Forms/Settings/Items', - component: AckeeToggle, - argTypes: {}, -} as ComponentMeta; - -const Template: ComponentStory = (args) => ( - -); - -/** - * Toggle Stories - Ackee - */ -export const Ackee = Template.bind({}); -Ackee.args = {}; diff --git a/src/components/organisms/forms/settings-form/motion-toggle/motion-toggle.stories.ts b/src/components/organisms/forms/settings-form/motion-toggle/motion-toggle.stories.ts new file mode 100644 index 0000000..5244ae1 --- /dev/null +++ b/src/components/organisms/forms/settings-form/motion-toggle/motion-toggle.stories.ts @@ -0,0 +1,15 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { MotionToggle } from './motion-toggle'; + +const meta = { + component: MotionToggle, + title: 'Organisms/Forms/Settings/Motion', +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Example: Story = { + args: {}, +}; diff --git a/src/components/organisms/forms/settings-form/motion-toggle/motion-toggle.stories.tsx b/src/components/organisms/forms/settings-form/motion-toggle/motion-toggle.stories.tsx deleted file mode 100644 index 67cea37..0000000 --- a/src/components/organisms/forms/settings-form/motion-toggle/motion-toggle.stories.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { MotionToggle } from './motion-toggle'; - -/** - * MotionToggle - Storybook Meta - */ -export default { - title: 'Organisms/Forms/Settings/Items', - component: MotionToggle, - argTypes: {}, -} as ComponentMeta; - -const Template: ComponentStory = (args) => ( - -); - -/** - * Toggle Stories - Motion - */ -export const Motion = Template.bind({}); -Motion.args = {}; diff --git a/src/components/organisms/forms/settings-form/prism-theme-toggle/prism-theme-toggle.stories.ts b/src/components/organisms/forms/settings-form/prism-theme-toggle/prism-theme-toggle.stories.ts new file mode 100644 index 0000000..0e4c746 --- /dev/null +++ b/src/components/organisms/forms/settings-form/prism-theme-toggle/prism-theme-toggle.stories.ts @@ -0,0 +1,15 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { PrismThemeToggle } from './prism-theme-toggle'; + +const meta = { + component: PrismThemeToggle, + title: 'Organisms/Forms/Settings/Prism Theme', +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Example: Story = { + args: {}, +}; diff --git a/src/components/organisms/forms/settings-form/prism-theme-toggle/prism-theme-toggle.stories.tsx b/src/components/organisms/forms/settings-form/prism-theme-toggle/prism-theme-toggle.stories.tsx deleted file mode 100644 index 9313bf2..0000000 --- a/src/components/organisms/forms/settings-form/prism-theme-toggle/prism-theme-toggle.stories.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { PrismThemeToggle } from './prism-theme-toggle'; - -/** - * PrismThemeToggle - Storybook Meta - */ -export default { - title: 'Organisms/Forms/Settings/Items', - component: PrismThemeToggle, - argTypes: {}, -} as ComponentMeta; - -const Template: ComponentStory = (args) => ( - -); - -/** - * Toggle Stories - Prism theme - */ -export const PrismTheme = Template.bind({}); diff --git a/src/components/organisms/forms/settings-form/settings-form.stories.ts b/src/components/organisms/forms/settings-form/settings-form.stories.ts new file mode 100644 index 0000000..3f9ec3e --- /dev/null +++ b/src/components/organisms/forms/settings-form/settings-form.stories.ts @@ -0,0 +1,24 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import type { FormEventHandler } from 'react'; +import { SettingsForm } from './settings-form'; + +const meta = { + component: SettingsForm, + title: 'Organisms/Forms/Settings', +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +const doNothing: FormEventHandler = (e) => { + e.preventDefault(); + + return undefined; +}; + +export const Example: Story = { + args: { + onSubmit: doNothing, + }, +}; diff --git a/src/components/organisms/forms/settings-form/settings-form.stories.tsx b/src/components/organisms/forms/settings-form/settings-form.stories.tsx deleted file mode 100644 index da93bfa..0000000 --- a/src/components/organisms/forms/settings-form/settings-form.stories.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { SettingsForm } from './settings-form'; - -/** - * SettingsForm - Storybook Meta - */ -export default { - title: 'Organisms/Forms/Settings', - component: SettingsForm, - argTypes: {}, -} as ComponentMeta; - -const Template: ComponentStory = (args) => ( - -); - -/** - * Forms Stories - Settings - */ -export const Settings = Template.bind({}); -Settings.args = {}; diff --git a/src/components/organisms/forms/settings-form/theme-toggle/theme-toggle.stories.ts b/src/components/organisms/forms/settings-form/theme-toggle/theme-toggle.stories.ts new file mode 100644 index 0000000..eecc3c1 --- /dev/null +++ b/src/components/organisms/forms/settings-form/theme-toggle/theme-toggle.stories.ts @@ -0,0 +1,15 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { ThemeToggle } from './theme-toggle'; + +const meta = { + component: ThemeToggle, + title: 'Organisms/Forms/Settings/Theme', +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Example: Story = { + args: {}, +}; diff --git a/src/components/organisms/forms/settings-form/theme-toggle/theme-toggle.stories.tsx b/src/components/organisms/forms/settings-form/theme-toggle/theme-toggle.stories.tsx deleted file mode 100644 index 4742adf..0000000 --- a/src/components/organisms/forms/settings-form/theme-toggle/theme-toggle.stories.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { ThemeToggle } from './theme-toggle'; - -/** - * ThemeToggle - Storybook Meta - */ -export default { - title: 'Organisms/Forms/Settings/Items', - component: ThemeToggle, - argTypes: {}, -} as ComponentMeta; - -const Template: ComponentStory = (args) => ( - -); - -/** - * Toggle Stories - Theme - */ -export const Theme = Template.bind({}); diff --git a/src/components/organisms/nav/breadcrumbs/breadcrumbs.stories.ts b/src/components/organisms/nav/breadcrumbs/breadcrumbs.stories.ts new file mode 100644 index 0000000..4667caf --- /dev/null +++ b/src/components/organisms/nav/breadcrumbs/breadcrumbs.stories.ts @@ -0,0 +1,36 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Breadcrumbs } from './breadcrumbs'; + +const meta = { + component: Breadcrumbs, + title: 'Organisms/Nav/Breadcrumbs', +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const OneItem: Story = { + args: { + items: [{ id: 'home', slug: '#', label: 'Home' }], + }, +}; + +export const TwoItems: Story = { + args: { + items: [ + { id: 'home', slug: '#', label: 'Home' }, + { id: 'blog', slug: '#', label: 'Blog' }, + ], + }, +}; + +export const ThreeItemsOrMore: Story = { + args: { + items: [ + { id: 'home', slug: '#', label: 'Home' }, + { id: 'blog', slug: '#', label: 'Blog' }, + { id: 'post1', slug: '#', label: 'A Post' }, + ], + }, +}; diff --git a/src/components/organisms/nav/breadcrumbs/breadcrumbs.stories.tsx b/src/components/organisms/nav/breadcrumbs/breadcrumbs.stories.tsx deleted file mode 100644 index 0b6fd27..0000000 --- a/src/components/organisms/nav/breadcrumbs/breadcrumbs.stories.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Breadcrumbs } from './breadcrumbs'; - -/** - * Breadcrumbs - Storybook Meta - */ -export default { - title: 'Organisms/Nav/Breadcrumbs', - component: Breadcrumbs, - argTypes: { - items: { - description: 'The breadcrumb items.', - type: { - name: 'object', - required: true, - value: {}, - }, - }, - }, -} as ComponentMeta; - -const Template: ComponentStory = (args) => ( - -); - -/** - * Breadcrumbs Stories - One item - */ -export const OneItem = Template.bind({}); -OneItem.args = { - items: [{ id: 'home', slug: '#', label: 'Home' }], -}; - -/** - * Breadcrumbs Stories - Two items - */ -export const TwoItems = Template.bind({}); -TwoItems.args = { - items: [ - { id: 'home', slug: '#', label: 'Home' }, - { id: 'blog', slug: '#', label: 'Blog' }, - ], -}; - -/** - * Breadcrumbs Stories - Three items - */ -export const ThreeItems = Template.bind({}); -ThreeItems.args = { - items: [ - { id: 'home', slug: '#', label: 'Home' }, - { id: 'blog', slug: '#', label: 'Blog' }, - { id: 'post1', slug: '#', label: 'A Post' }, - ], -}; diff --git a/src/components/organisms/nav/main-nav/main-nav.stories.tsx b/src/components/organisms/nav/main-nav/main-nav.stories.tsx index 6333f2c..c18d0d5 100644 --- a/src/components/organisms/nav/main-nav/main-nav.stories.tsx +++ b/src/components/organisms/nav/main-nav/main-nav.stories.tsx @@ -1,71 +1,54 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { Icon } from '../../../atoms'; import { MainNav } from './main-nav'; -/** - * MainNav - Storybook Meta - */ -export default { - title: 'Organisms/Nav/MainNav', +const meta = { component: MainNav, - argTypes: { - items: { - description: 'The main nav items.', - type: { - name: 'object', - required: true, - value: {}, - }, - }, - }, -} as ComponentMeta; + title: 'Organisms/Nav/MainNav', +} satisfies Meta; + +export default meta; -const Template: ComponentStory = (args) => ( - -); +type Story = StoryObj; -/** - * MainNav Stories - Default - */ -export const Default = Template.bind({}); -Default.args = { - items: [ - { id: 'home', label: 'Home', href: '#home' }, - { id: 'blog', label: 'Blog', href: '#blog' }, - { id: 'projects', label: 'Projects', href: '#projects' }, - { id: 'contact', label: 'Contact', href: '#contact' }, - ], +export const Example: Story = { + args: { + items: [ + { id: 'home', label: 'Home', href: '#home' }, + { id: 'blog', label: 'Blog', href: '#blog' }, + { id: 'projects', label: 'Projects', href: '#projects' }, + { id: 'contact', label: 'Contact', href: '#contact' }, + ], + }, }; -/** - * MainNav Stories - WithLogo - */ -export const WithLogo = Template.bind({}); -WithLogo.args = { - items: [ - { - id: 'home', - label: 'Home', - href: '#home', - logo: , - }, - { - id: 'blog', - label: 'Blog', - href: '#blog', - logo: , - }, - { - id: 'projects', - label: 'Projects', - href: '#projects', - logo: , - }, - { - id: 'contact', - label: 'Contact', - href: '#contact', - logo: , - }, - ], +export const WithLogo: Story = { + args: { + items: [ + { + id: 'home', + label: 'Home', + href: '#home', + logo: , + }, + { + id: 'blog', + label: 'Blog', + href: '#blog', + logo: , + }, + { + id: 'projects', + label: 'Projects', + href: '#projects', + logo: , + }, + { + id: 'contact', + label: 'Contact', + href: '#contact', + logo: , + }, + ], + }, }; diff --git a/src/components/organisms/nav/pagination/pagination.stories.ts b/src/components/organisms/nav/pagination/pagination.stories.ts new file mode 100644 index 0000000..fb1875f --- /dev/null +++ b/src/components/organisms/nav/pagination/pagination.stories.ts @@ -0,0 +1,95 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { + Pagination, + type RenderPaginationItemAriaLabel, + type RenderPaginationLink, +} from './pagination'; + +const meta = { + component: Pagination, + title: 'Organisms/Nav/Pagination', +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +const renderLink: RenderPaginationLink = (num: number) => `#page-${num}`; + +const renderItemAriaLabel: RenderPaginationItemAriaLabel = ({ + kind, + pageNumber, + isCurrentPage, +}) => { + switch (kind) { + case 'backward': + return 'Go to previous page'; + case 'forward': + return 'Go to next page'; + case 'number': + default: + return isCurrentPage + ? `Current page, page ${pageNumber}` + : `Go to page ${pageNumber}`; + } +}; + +export const RightEllipsis: Story = { + args: { + current: 2, + siblings: 2, + renderItemAriaLabel, + renderLink, + total: 50, + }, +}; + +export const LeftEllipsis: Story = { + args: { + current: 49, + siblings: 2, + renderItemAriaLabel, + renderLink, + total: 50, + }, +}; + +export const BothEllipsis: Story = { + args: { + current: 25, + siblings: 2, + renderItemAriaLabel, + renderLink, + total: 50, + }, +}; + +export const WithoutEllipsis: Story = { + args: { + current: 2, + siblings: 2, + renderItemAriaLabel, + renderLink, + total: 5, + }, +}; + +export const WithoutBackwardLink: Story = { + args: { + current: 1, + siblings: 2, + renderItemAriaLabel, + renderLink, + total: 5, + }, +}; + +export const WithoutForwardLink: Story = { + args: { + current: 5, + siblings: 2, + renderItemAriaLabel, + renderLink, + total: 5, + }, +}; diff --git a/src/components/organisms/nav/pagination/pagination.stories.tsx b/src/components/organisms/nav/pagination/pagination.stories.tsx deleted file mode 100644 index 83f3a63..0000000 --- a/src/components/organisms/nav/pagination/pagination.stories.tsx +++ /dev/null @@ -1,150 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { - Pagination, - type RenderPaginationItemAriaLabel, - type RenderPaginationLink, -} from './pagination'; - -/** - * Pagination - Storybook Meta - */ -export default { - title: 'Organisms/Nav/Pagination', - component: Pagination, - args: { - siblings: 1, - }, - argTypes: { - current: { - control: { - type: 'number', - }, - description: 'The current page number.', - type: { - name: 'number', - required: true, - }, - }, - siblings: { - control: { - type: 'number', - }, - description: - 'The number of pages to show next to the current page for one side.', - table: { - category: 'Options', - defaultValue: { summary: 1 }, - }, - type: { - name: 'number', - required: false, - }, - }, - total: { - control: { - type: 'number', - }, - description: 'The total number of items.', - type: { - name: 'number', - required: true, - }, - }, - }, -} as ComponentMeta; - -const Template: ComponentStory = (args) => ( - -); - -const renderLink: RenderPaginationLink = (num: number) => `#page-${num}`; - -const renderItemAriaLabel: RenderPaginationItemAriaLabel = ({ - kind, - pageNumber, - isCurrentPage, -}) => { - switch (kind) { - case 'backward': - return 'Go to previous page'; - case 'forward': - return 'Go to next page'; - case 'number': - default: - return isCurrentPage - ? `Current page, page ${pageNumber}` - : `Go to page ${pageNumber}`; - } -}; - -/** - * Pagination Stories - More than 5 pages and current page is near the beginning - */ -export const RightEllipsis = Template.bind({}); -RightEllipsis.args = { - current: 2, - siblings: 2, - renderItemAriaLabel, - renderLink, - total: 50, -}; - -/** - * Pagination Stories - More than 5 pages and current page is near the end - */ -export const LeftEllipsis = Template.bind({}); -LeftEllipsis.args = { - current: 49, - siblings: 2, - renderItemAriaLabel, - renderLink, - total: 50, -}; - -/** - * Pagination Stories - More than 5 pages and current page is near the middle - */ -export const BothEllipsis = Template.bind({}); -BothEllipsis.args = { - current: 25, - siblings: 2, - renderItemAriaLabel, - renderLink, - total: 50, -}; - -/** - * Pagination Stories - Less than 5 pages - */ -export const WithoutEllipsis = Template.bind({}); -WithoutEllipsis.args = { - current: 2, - siblings: 2, - renderItemAriaLabel, - renderLink, - total: 5, -}; - -/** - * Pagination Stories - First page selected - */ -export const WithoutBackwardLink = Template.bind({}); -WithoutBackwardLink.args = { - current: 1, - siblings: 2, - renderItemAriaLabel, - renderLink, - total: 5, -}; - -/** - * Pagination Stories - Last page selected - */ -export const WithoutForwardLink = Template.bind({}); -WithoutForwardLink.args = { - current: 5, - siblings: 2, - renderItemAriaLabel, - renderLink, - total: 5, -}; diff --git a/src/components/organisms/navbar/navbar-item/navbar-item.stories.ts b/src/components/organisms/navbar/navbar-item/navbar-item.stories.ts new file mode 100644 index 0000000..6311a95 --- /dev/null +++ b/src/components/organisms/navbar/navbar-item/navbar-item.stories.ts @@ -0,0 +1,30 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { NavbarItem } from './navbar-item'; + +const meta = { + component: NavbarItem, + title: 'Organisms/Navbar/Item', +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Example: Story = { + args: { + children: 'The modal contents.', + icon: 'cog', + id: 'default', + label: 'Open example', + }, +}; + +export const ModalVisibleAfterBreakpoint: Story = { + args: { + children: 'The modal contents.', + icon: 'cog', + id: 'modal-visible', + label: 'Open example', + modalVisibleFrom: 'md', + }, +}; diff --git a/src/components/organisms/navbar/navbar-item/navbar-item.stories.tsx b/src/components/organisms/navbar/navbar-item/navbar-item.stories.tsx deleted file mode 100644 index 93b7281..0000000 --- a/src/components/organisms/navbar/navbar-item/navbar-item.stories.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { NavbarItem } from './navbar-item'; - -/** - * NavbarItem - Storybook Meta - */ -export default { - title: 'Organisms/Navbar/Item', - component: NavbarItem, - argTypes: {}, -} as ComponentMeta; - -const Template: ComponentStory = (args) => ( - -); - -/** - * NavbarItem Stories - Default - */ -export const Default = Template.bind({}); -Default.args = { - children: 'The modal contents.', - icon: 'cog', - id: 'default', - label: 'Open example', -}; - -/** - * NavbarItem Stories - ModalVisibleAfterBreakpoint - */ -export const ModalVisibleAfterBreakpoint = Template.bind({}); -ModalVisibleAfterBreakpoint.args = { - children: 'The modal contents.', - icon: 'cog', - id: 'modal-visible', - label: 'Open example', - modalVisibleFrom: 'md', -}; diff --git a/src/components/organisms/navbar/navbar.stories.tsx b/src/components/organisms/navbar/navbar.stories.tsx index 95b71ef..a52602e 100644 --- a/src/components/organisms/navbar/navbar.stories.tsx +++ b/src/components/organisms/navbar/navbar.stories.tsx @@ -1,77 +1,55 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Navbar as NavbarComponent } from './navbar'; +import type { Meta, StoryObj } from '@storybook/react'; +import { Navbar } from './navbar'; import { NavbarItem } from './navbar-item'; -/** - * Navbar - Storybook Meta - */ -export default { +const meta = { + component: Navbar, title: 'Organisms/Navbar', - component: NavbarComponent, - argTypes: { - children: { - description: 'The navbar items.', - type: { - name: 'object', - required: true, - value: {}, - }, - }, - }, - parameters: { - layout: 'fullscreen', - }, -} as ComponentMeta; +} satisfies Meta; -const Template: ComponentStory = (args) => ( - -); +export default meta; -/** - * Navbar Stories - 1 item - */ -export const OneItem = Template.bind({}); -OneItem.args = { - children: ( - - The main nav contents - - ), -}; +type Story = StoryObj; -/** - * Navbar Stories - 2 items - */ -export const TwoItems = Template.bind({}); -TwoItems.args = { - children: ( - <> +export const OneItem: Story = { + args: { + children: ( The main nav contents - - A search form - - - ), + ), + }, }; -/** - * Navbar Stories - 3 items - */ -export const ThreeItems = Template.bind({}); -ThreeItems.args = { - children: ( - <> - - The main nav contents - - - A search form - - - A settings form - - - ), +export const TwoItems: Story = { + args: { + children: ( + <> + + The main nav contents + + + A search form + + + ), + }, +}; + +export const ThreeItems: Story = { + args: { + children: ( + <> + + The main nav contents + + + A search form + + + A settings form + + + ), + }, }; diff --git a/src/components/organisms/post-preview/post-preview.stories.tsx b/src/components/organisms/post-preview/post-preview.stories.tsx index c22698f..e7edfdb 100644 --- a/src/components/organisms/post-preview/post-preview.stories.tsx +++ b/src/components/organisms/post-preview/post-preview.stories.tsx @@ -1,157 +1,79 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import NextImage from 'next/image'; import { PostPreview } from './post-preview'; -/** - * PostPreview - Storybook Meta - */ -export default { - title: 'Organisms/PostPreview', +const meta = { component: PostPreview, - argTypes: { - cover: { - description: 'The cover data.', - table: { - category: 'Options', - }, - type: { - name: 'object', - required: false, - value: {}, - }, - }, - excerpt: { - control: { - type: 'text', - }, - description: 'The page excerpt.', - type: { - name: 'string', - required: true, - }, - }, - meta: { - description: 'The page metadata.', - type: { - name: 'object', - required: true, - value: {}, - }, - }, - heading: { - control: { - type: 'text', - }, - description: 'The page title', - type: { - name: 'string', - required: true, - }, - }, - headingLvl: { - control: { - type: 'number', - min: 1, - max: 6, - }, - description: 'The page title level (hn)', - table: { - category: 'Options', - defaultValue: { summary: 2 }, - }, - type: { - name: 'number', - required: false, - }, - }, - url: { - control: { - type: 'text', - }, - description: 'The page url.', - type: { - name: 'string', - required: true, - }, - }, - }, -} as ComponentMeta; + title: 'Organisms/PostPreview', +} satisfies Meta; -const Template: ComponentStory = (args) => ( - -); +export default meta; -/** - * PostPreview Stories - Default - */ -export const Default = Template.bind({}); -Default.args = { - excerpt: - 'Et vel amet minus. Inventore magnam et vel ea animi omnis qui. Dicta quos qui consequuntur aspernatur ullam non nam odio et. Incidunt fugit sequi. Neque sit vel tenetur libero sit aut quisquam est et. Nostrum autem et.', - heading: 'The post title', - url: '#post', +type Story = StoryObj; + +export const Example: Story = { + args: { + excerpt: + 'Et vel amet minus. Inventore magnam et vel ea animi omnis qui. Dicta quos qui consequuntur aspernatur ullam non nam odio et. Incidunt fugit sequi. Neque sit vel tenetur libero sit aut quisquam est et. Nostrum autem et.', + heading: 'The post title', + url: '#post', + }, }; -/** - * PostPreview Stories - WithCover - */ -export const WithCover = Template.bind({}); -WithCover.args = { - cover: ( - - ), - excerpt: - 'Et vel amet minus. Inventore magnam et vel ea animi omnis qui. Dicta quos qui consequuntur aspernatur ullam non nam odio et. Incidunt fugit sequi. Neque sit vel tenetur libero sit aut quisquam est et. Nostrum autem et.', - heading: 'The post title', - url: '#post', +export const WithCover: Story = { + args: { + cover: ( + + ), + excerpt: + 'Et vel amet minus. Inventore magnam et vel ea animi omnis qui. Dicta quos qui consequuntur aspernatur ullam non nam odio et. Incidunt fugit sequi. Neque sit vel tenetur libero sit aut quisquam est et. Nostrum autem et.', + heading: 'The post title', + url: '#post', + }, }; -/** - * PostPreview Stories - WithMeta - */ -export const WithMeta = Template.bind({}); -WithMeta.args = { - excerpt: - 'Et vel amet minus. Inventore magnam et vel ea animi omnis qui. Dicta quos qui consequuntur aspernatur ullam non nam odio et. Incidunt fugit sequi. Neque sit vel tenetur libero sit aut quisquam est et. Nostrum autem et.', - heading: 'The post title', - meta: { - publicationDate: '06/11/2023', - thematics: [{ id: 1, name: 'Thematic 1', url: '#thematic' }], - wordsCount: 300, +export const WithMeta: Story = { + args: { + excerpt: + 'Et vel amet minus. Inventore magnam et vel ea animi omnis qui. Dicta quos qui consequuntur aspernatur ullam non nam odio et. Incidunt fugit sequi. Neque sit vel tenetur libero sit aut quisquam est et. Nostrum autem et.', + heading: 'The post title', + meta: { + publicationDate: '06/11/2023', + thematics: [{ id: 1, name: 'Thematic 1', url: '#thematic' }], + wordsCount: 300, + }, + url: '#post', }, - url: '#post', }; -/** - * PostPreview Stories - WithCoverAndMeta - */ -export const WithCoverAndMeta = Template.bind({}); -WithCoverAndMeta.args = { - cover: ( - - ), - excerpt: - 'Et vel amet minus. Inventore magnam et vel ea animi omnis qui. Dicta quos qui consequuntur aspernatur ullam non nam odio et. Incidunt fugit sequi. Neque sit vel tenetur libero sit aut quisquam est et. Nostrum autem et.', - heading: 'The post title', - meta: { - publicationDate: '06/11/2023', - wordsCount: 300, - thematics: [{ id: 1, name: 'Thematic 1', url: '#thematic' }], - comments: { - count: 3, - postHeading: 'The post title', - url: '#comments', +export const WithCoverAndMeta: Story = { + args: { + cover: ( + + ), + excerpt: + 'Et vel amet minus. Inventore magnam et vel ea animi omnis qui. Dicta quos qui consequuntur aspernatur ullam non nam odio et. Incidunt fugit sequi. Neque sit vel tenetur libero sit aut quisquam est et. Nostrum autem et.', + heading: 'The post title', + meta: { + publicationDate: '06/11/2023', + wordsCount: 300, + thematics: [{ id: 1, name: 'Thematic 1', url: '#thematic' }], + comments: { + count: 3, + postHeading: 'The post title', + url: '#comments', + }, }, + url: '#post', }, - url: '#post', }; 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, + }, }; diff --git a/src/components/organisms/posts-list/posts-list.tsx b/src/components/organisms/posts-list/posts-list.tsx index c4c6fa1..ad5bed5 100644 --- a/src/components/organisms/posts-list/posts-list.tsx +++ b/src/components/organisms/posts-list/posts-list.tsx @@ -230,7 +230,7 @@ const PostsListWithRef: ForwardRefRenderFunction< max={total} /> ) : null} - {onLoadMore ? ( + {onLoadMore && (!total || (total && posts.length < total)) ? (