From 4f768afe543bbf9e1857c41d03804f8e37ab3512 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Fri, 29 Sep 2023 21:29:45 +0200 Subject: refactor(components): rewrite List component * change `items` prop to children * replace `kind` prop with `isHierarchical`, `isOrdered` & `isInline` props * add `hideMarker` prop * add `spacing` prop to control item spacing * move lists styles to Sass placeholders to avoid repeats because of headless WordPress --- .../organisms/layout/cards-list.module.scss | 8 -- .../organisms/layout/cards-list.stories.tsx | 8 +- src/components/organisms/layout/cards-list.tsx | 71 +++++++------- .../organisms/layout/comments-list.fixture.ts | 106 +++++++++++++++++++++ .../organisms/layout/comments-list.fixture.tsx | 106 --------------------- .../organisms/layout/comments-list.module.scss | 16 ---- src/components/organisms/layout/comments-list.tsx | 31 ++++-- .../organisms/layout/posts-list.fixture.ts | 63 ++++++++++++ .../organisms/layout/posts-list.fixture.tsx | 63 ------------ .../organisms/layout/posts-list.module.scss | 6 -- src/components/organisms/layout/posts-list.tsx | 17 ++-- 11 files changed, 238 insertions(+), 257 deletions(-) create mode 100644 src/components/organisms/layout/comments-list.fixture.ts delete mode 100644 src/components/organisms/layout/comments-list.fixture.tsx delete mode 100644 src/components/organisms/layout/comments-list.module.scss create mode 100644 src/components/organisms/layout/posts-list.fixture.ts delete mode 100644 src/components/organisms/layout/posts-list.fixture.tsx (limited to 'src/components/organisms/layout') diff --git a/src/components/organisms/layout/cards-list.module.scss b/src/components/organisms/layout/cards-list.module.scss index ff79f33..8b18c08 100644 --- a/src/components/organisms/layout/cards-list.module.scss +++ b/src/components/organisms/layout/cards-list.module.scss @@ -17,14 +17,6 @@ gap: var(--spacing-lg); } } - - &--ordered { - @extend %reset-ordered-list; - } - - &--unordered { - @extend %reset-list; - } } .card { diff --git a/src/components/organisms/layout/cards-list.stories.tsx b/src/components/organisms/layout/cards-list.stories.tsx index b5f697a..1b5051f 100644 --- a/src/components/organisms/layout/cards-list.stories.tsx +++ b/src/components/organisms/layout/cards-list.stories.tsx @@ -1,4 +1,4 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { ComponentMeta, ComponentStory } from '@storybook/react'; import { CardsList as CardsListComponent, type CardsListItem, @@ -90,7 +90,7 @@ const items: CardsListItem[] = [ id: 'card-1', cover: { alt: 'card 1 picture', - src: 'http://placeimg.com/640/480', + src: 'http://picsum.photos/640/480', width: 640, height: 480, }, @@ -103,7 +103,7 @@ const items: CardsListItem[] = [ id: 'card-2', cover: { alt: 'card 2 picture', - src: 'http://placeimg.com/640/480', + src: 'http://picsum.photos/640/480', width: 640, height: 480, }, @@ -116,7 +116,7 @@ const items: CardsListItem[] = [ id: 'card-3', cover: { alt: 'card 3 picture', - src: 'http://placeimg.com/640/480', + src: 'http://picsum.photos/640/480', width: 640, height: 480, }, diff --git a/src/components/organisms/layout/cards-list.tsx b/src/components/organisms/layout/cards-list.tsx index e3d1156..29add3b 100644 --- a/src/components/organisms/layout/cards-list.tsx +++ b/src/components/organisms/layout/cards-list.tsx @@ -1,5 +1,5 @@ -import { FC } from 'react'; -import { List, type ListItem, type ListProps } from '../../atoms'; +import type { FC } from 'react'; +import { List, ListItem } from '../../atoms'; import { Card, type CardProps } from '../../molecules'; import styles from './cards-list.module.scss'; @@ -10,17 +10,22 @@ export type CardsListItem = Omit & { id: string; }; -export type CardsListProps = Pick & - Pick & { - /** - * Set additional classnames to the list wrapper. - */ - className?: string; - /** - * The cards data. - */ - items: CardsListItem[]; - }; +export type CardsListProps = Pick & { + /** + * Set additional classnames to the list wrapper. + */ + className?: string; + /** + * Should the cards list be ordered? + * + * @default false + */ + isOrdered?: boolean; + /** + * The cards data. + */ + items: CardsListItem[]; +}; /** * CardsList component @@ -29,40 +34,30 @@ export type CardsListProps = Pick & */ export const CardsList: FC = ({ className = '', + isOrdered = false, items, - kind = 'unordered', titleLevel, }) => { - const kindModifier = `wrapper--${kind}`; + const kindModifier = `wrapper--${isOrdered ? 'ordered' : 'unordered'}`; - /** - * Format the cards data to be used by the List component. - * - * @param {CardsListItem[]} cards - An array of card data. - * @returns {ListItem[]} The formatted cards data. - */ - const getCards = (cards: CardsListItem[]): ListItem[] => { - return cards.map(({ id, ...card }) => { - return { - id, - value: ( + return ( + + {items.map(({ id, ...item }) => ( + - ), - }; - }); - }; - - return ( - + + ))} + ); }; diff --git a/src/components/organisms/layout/comments-list.fixture.ts b/src/components/organisms/layout/comments-list.fixture.ts new file mode 100644 index 0000000..30a4f11 --- /dev/null +++ b/src/components/organisms/layout/comments-list.fixture.ts @@ -0,0 +1,106 @@ +import type { SingleComment } from '../../../types/app'; + +export const comments: SingleComment[] = [ + { + approved: true, + content: + 'Voluptas ducimus inventore. Libero ut et doloribus. Earum nostrum ab. Aliquam rem dolores omnis voluptate. Sunt aut ut et.', + id: 1, + meta: { + author: { + avatar: { + alt: 'Author 1 avatar', + height: 480, + src: 'http://picsum.photos/640/480', + width: 640, + }, + name: 'Author 1', + }, + date: '2021-04-03 18:04:11', + }, + parentId: 0, + replies: [], + }, + { + approved: true, + content: + 'Sit sed error quasi voluptatem velit voluptas aut. Aut debitis eveniet. Praesentium dolores quia voluptate vero quis dicta quasi vel. Aut voluptas accusantium ut aut quidem consectetur itaque laboriosam rerum.', + id: 2, + meta: { + author: { + avatar: { + alt: 'Author 2 avatar', + height: 480, + src: 'http://picsum.photos/640/480', + width: 640, + }, + name: 'Author 2', + website: '#', + }, + date: '2021-04-03 23:30:20', + }, + parentId: 0, + replies: [ + { + approved: true, + content: + 'Vel ullam in porro tempore. Maiores quos quia magnam beatae nemo libero velit numquam. Sapiente aliquid cumque. Velit neque in adipisci aut assumenda voluptates earum. Autem esse autem provident in tempore. Aut distinctio dolor qui repellat et et adipisci velit aspernatur.', + id: 4, + meta: { + author: { + avatar: { + alt: 'Author 4 avatar', + height: 480, + src: 'http://picsum.photos/640/480', + width: 640, + }, + name: 'Author 4', + }, + date: '2021-04-03 23:04:24', + }, + parentId: 2, + replies: [], + }, + { + approved: true, + content: + 'Sed non omnis. Quam porro est. Quae tempore quae. Exercitationem eos non velit voluptatem velit voluptas iusto. Sit debitis qui ipsam quo asperiores numquam veniam praesentium ut.', + id: 5, + meta: { + author: { + avatar: { + alt: 'Author 1 avatar', + height: 480, + src: 'http://picsum.photos/640/480', + width: 640, + }, + name: 'Author 1', + }, + date: '2021-04-04 08:05:14', + }, + parentId: 2, + replies: [], + }, + ], + }, + { + approved: false, + content: + 'Natus consequatur maiores aperiam dolore eius nesciunt ut qui et. Ab ea nobis est. Eaque dolor corrupti id aut. Impedit architecto autem qui neque rerum ab dicta dignissimos voluptates.', + id: 3, + meta: { + author: { + avatar: { + alt: 'Author 3', + height: 480, + src: 'http://picsum.photos/640/480', + width: 640, + }, + name: 'Author 3', + }, + date: '2021-09-13 13:24:54', + }, + parentId: 0, + replies: [], + }, +]; diff --git a/src/components/organisms/layout/comments-list.fixture.tsx b/src/components/organisms/layout/comments-list.fixture.tsx deleted file mode 100644 index 5842129..0000000 --- a/src/components/organisms/layout/comments-list.fixture.tsx +++ /dev/null @@ -1,106 +0,0 @@ -import { SingleComment } from '../../../types/app'; - -export const comments: SingleComment[] = [ - { - approved: true, - content: - 'Voluptas ducimus inventore. Libero ut et doloribus. Earum nostrum ab. Aliquam rem dolores omnis voluptate. Sunt aut ut et.', - id: 1, - meta: { - author: { - avatar: { - alt: 'Author 1 avatar', - height: 480, - src: 'http://placeimg.com/640/480', - width: 640, - }, - name: 'Author 1', - }, - date: '2021-04-03 18:04:11', - }, - parentId: 0, - replies: [], - }, - { - approved: true, - content: - 'Sit sed error quasi voluptatem velit voluptas aut. Aut debitis eveniet. Praesentium dolores quia voluptate vero quis dicta quasi vel. Aut voluptas accusantium ut aut quidem consectetur itaque laboriosam occaecati.', - id: 2, - meta: { - author: { - avatar: { - alt: 'Author 2 avatar', - height: 480, - src: 'http://placeimg.com/640/480', - width: 640, - }, - name: 'Author 2', - website: '#', - }, - date: '2021-04-03 23:30:20', - }, - parentId: 0, - replies: [ - { - approved: true, - content: - 'Vel ullam in porro tempore. Maiores quos quia magnam beatae nemo libero velit numquam. Sapiente aliquid cumque. Velit neque in adipisci aut assumenda voluptates earum. Autem esse autem provident in tempore. Aut distinctio dolor qui repellat et et adipisci velit aspernatur.', - id: 4, - meta: { - author: { - avatar: { - alt: 'Author 4 avatar', - height: 480, - src: 'http://placeimg.com/640/480', - width: 640, - }, - name: 'Author 4', - }, - date: '2021-04-03 23:04:24', - }, - parentId: 2, - replies: [], - }, - { - approved: true, - content: - 'Sed non omnis. Quam porro est. Quae tempore quae. Exercitationem eos non velit voluptatem velit voluptas iusto. Sit debitis qui ipsam quo asperiores numquam veniam praesentium ut.', - id: 5, - meta: { - author: { - avatar: { - alt: 'Author 1 avatar', - height: 480, - src: 'http://placeimg.com/640/480', - width: 640, - }, - name: 'Author 1', - }, - date: '2021-04-04 08:05:14', - }, - parentId: 2, - replies: [], - }, - ], - }, - { - approved: false, - content: - 'Natus consequatur maiores aperiam dolore eius nesciunt ut qui et. Ab ea nobis est. Eaque dolor corrupti id aut. Impedit architecto autem qui neque rerum ab dicta dignissimos voluptates.', - id: 3, - meta: { - author: { - avatar: { - alt: 'Author 3', - height: 480, - src: 'http://placeimg.com/640/480', - width: 640, - }, - name: 'Author 3', - }, - date: '2021-09-13 13:24:54', - }, - parentId: 0, - replies: [], - }, -]; diff --git a/src/components/organisms/layout/comments-list.module.scss b/src/components/organisms/layout/comments-list.module.scss deleted file mode 100644 index f7a0cf0..0000000 --- a/src/components/organisms/layout/comments-list.module.scss +++ /dev/null @@ -1,16 +0,0 @@ -@use "../../../styles/abstracts/placeholders"; - -.list { - @extend %reset-ordered-list; - - & & { - margin: var(--spacing-sm) 0; - padding-left: var(--spacing-sm); - } -} - -.item { - &:not(:last-child) { - margin-bottom: var(--spacing-sm); - } -} diff --git a/src/components/organisms/layout/comments-list.tsx b/src/components/organisms/layout/comments-list.tsx index 1ce0cf5..103bfb4 100644 --- a/src/components/organisms/layout/comments-list.tsx +++ b/src/components/organisms/layout/comments-list.tsx @@ -1,7 +1,12 @@ -import { FC } from 'react'; -import { type SingleComment } from '../../../types'; +import type { FC } from 'react'; +import type { SingleComment } from '../../../types'; +import { List, ListItem } from '../../atoms'; + +// eslint-disable-next-line @typescript-eslint/no-shadow import { Comment, type CommentProps } from './comment'; -import styles from './comments-list.module.scss'; + +// eslint-disable-next-line @typescript-eslint/no-magic-numbers +export type CommentsListDepth = 0 | 1 | 2 | 3 | 4; export type CommentsListProps = Pick & { /** @@ -11,7 +16,7 @@ export type CommentsListProps = Pick & { /** * The maximum depth. Use `0` to not display nested comments. */ - depth: 0 | 1 | 2 | 3 | 4; + depth: CommentsListDepth; }; /** @@ -38,19 +43,25 @@ export const CommentsList: FC = ({ const isLastLevel = startLevel === depth; return commentsList.map(({ replies, ...comment }) => ( -
  • + - {replies && !isLastLevel && ( -
      {getItems(replies, startLevel + 1)}
    - )} -
    • + {replies.length && !isLastLevel ? ( + + {getItems(replies, startLevel + 1)} + + ) : null} + )); }; - return
      {getItems(comments, 0)}
    ; + return ( + + {getItems(comments, 0)} + + ); }; diff --git a/src/components/organisms/layout/posts-list.fixture.ts b/src/components/organisms/layout/posts-list.fixture.ts new file mode 100644 index 0000000..6109411 --- /dev/null +++ b/src/components/organisms/layout/posts-list.fixture.ts @@ -0,0 +1,63 @@ +import type { Post } from './posts-list'; + +export const introPost1 = + 'Esse et voluptas sapiente modi impedit unde et. Ducimus nulla ea impedit sit placeat nihil assumenda. Rem est fugiat amet quo hic. Corrupti fuga quod animi autem dolorem ullam corrupti vel aut.'; + +export const introPost2 = + 'Illum quae asperiores quod aut necessitatibus itaque excepturi voluptas. Incidunt exercitationem ullam saepe alias consequatur sed. Quam veniam quaerat voluptatum earum quia quisquam fugiat sed perspiciatis. Et velit saepe est recusandae facilis eos eum ipsum.'; + +export const introPost3 = + 'Sunt aperiam ut rem impedit dolor id sit. Reprehenderit ipsum iusto fugiat. Quaerat laboriosam magnam facilis. Totam sint aliquam voluptatem in quis laborum sunt eum. Enim aut debitis officiis porro iure quia nihil voluptas ipsum. Praesentium quis necessitatibus cumque quia qui velit quos dolorem.'; + +export const cover = { + alt: 'cover', + height: 480, + src: 'http://picsum.photos/640/480', + width: 640, +}; + +export const posts: Post[] = [ + { + intro: introPost1, + id: 'post-1', + meta: { + cover, + dates: { publication: '2022-02-26' }, + wordsCount: introPost1.split(' ').length, + thematics: [ + { id: 1, name: 'Cat 1', url: '#' }, + { id: 2, name: 'Cat 2', url: '#' }, + ], + commentsCount: 1, + }, + title: 'Ratione velit fuga', + url: '#', + }, + { + intro: introPost2, + id: 'post-2', + meta: { + dates: { publication: '2022-02-20' }, + wordsCount: introPost2.split(' ').length, + thematics: [{ id: 2, name: 'Cat 2', url: '#' }], + commentsCount: 0, + }, + title: 'Debitis laudantium laudantium', + url: '#', + }, + { + intro: introPost3, + id: 'post-3', + meta: { + cover, + dates: { publication: '2021-12-20' }, + wordsCount: introPost3.split(' ').length, + thematics: [{ id: 1, name: 'Cat 1', url: '#' }], + commentsCount: 3, + }, + title: 'Quaerat ut corporis', + url: '#', + }, +]; + +export const searchPage = '#'; diff --git a/src/components/organisms/layout/posts-list.fixture.tsx b/src/components/organisms/layout/posts-list.fixture.tsx deleted file mode 100644 index 97a746f..0000000 --- a/src/components/organisms/layout/posts-list.fixture.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import { type Post } from './posts-list'; - -export const introPost1 = - 'Esse et voluptas sapiente modi impedit unde et. Ducimus nulla ea impedit sit placeat nihil assumenda. Rem est fugiat amet quo hic. Corrupti fuga quod animi autem dolorem ullam corrupti vel aut.'; - -export const introPost2 = - 'Illum quae asperiores quod aut necessitatibus itaque excepturi voluptas. Incidunt exercitationem ullam saepe alias consequatur sed. Quam veniam quaerat voluptatum earum quia quisquam fugiat sed perspiciatis. Et velit saepe est recusandae facilis eos eum ipsum.'; - -export const introPost3 = - 'Sunt aperiam ut rem impedit dolor id sit. Reprehenderit ipsum iusto fugiat. Quaerat laboriosam magnam facilis. Totam sint aliquam voluptatem in quis laborum sunt eum. Enim aut debitis officiis porro iure quia nihil voluptas ipsum. Praesentium quis necessitatibus cumque quia qui velit quos dolorem.'; - -export const cover = { - alt: 'cover', - height: 480, - src: 'http://placeimg.com/640/480', - width: 640, -}; - -export const posts: Post[] = [ - { - intro: introPost1, - id: 'post-1', - meta: { - cover, - dates: { publication: '2022-02-26' }, - wordsCount: introPost1.split(' ').length, - thematics: [ - { id: 1, name: 'Cat 1', url: '#' }, - { id: 2, name: 'Cat 2', url: '#' }, - ], - commentsCount: 1, - }, - title: 'Ratione velit fuga', - url: '#', - }, - { - intro: introPost2, - id: 'post-2', - meta: { - dates: { publication: '2022-02-20' }, - wordsCount: introPost2.split(' ').length, - thematics: [{ id: 2, name: 'Cat 2', url: '#' }], - commentsCount: 0, - }, - title: 'Debitis laudantium laudantium', - url: '#', - }, - { - intro: introPost3, - id: 'post-3', - meta: { - cover, - dates: { publication: '2021-12-20' }, - wordsCount: introPost3.split(' ').length, - thematics: [{ id: 1, name: 'Cat 1', url: '#' }], - commentsCount: 3, - }, - title: 'Quaerat ut corporis', - url: '#', - }, -]; - -export const searchPage = '#'; diff --git a/src/components/organisms/layout/posts-list.module.scss b/src/components/organisms/layout/posts-list.module.scss index 49993da..759902a 100644 --- a/src/components/organisms/layout/posts-list.module.scss +++ b/src/components/organisms/layout/posts-list.module.scss @@ -18,14 +18,8 @@ } .list { - @extend %reset-ordered-list; - .item { border-bottom: fun.convert-px(1) solid var(--color-border); - - &:not(:last-child) { - margin-bottom: var(--spacing-md); - } } } diff --git a/src/components/organisms/layout/posts-list.tsx b/src/components/organisms/layout/posts-list.tsx index 86c3d12..cde81e6 100644 --- a/src/components/organisms/layout/posts-list.tsx +++ b/src/components/organisms/layout/posts-list.tsx @@ -8,6 +8,8 @@ import { type HeadingLevel, ProgressBar, Spinner, + List, + ListItem, } from '../../atoms'; import { Pagination, type PaginationProps } from '../../molecules'; import { NoResults, type NoResultsProps } from './no-results'; @@ -115,25 +117,28 @@ export const PostsList: FC = ({ allPosts: Post[], headingLevel: HeadingLevel = 2 ): JSX.Element => ( -
      {allPosts.map(({ id, ...post }) => ( -
    1. + -
      2. + {id === lastPostId && ( -
    2. + -
      3. + )}       ))} -
    + ); /** -- cgit v1.2.3