From 94a8e31f25ed3d92f9eb808e3264bd4ac8c039c7 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Thu, 21 Apr 2022 18:12:29 +0200 Subject: chore: add a PostsList component --- .../organisms/layout/posts-list.module.scss | 32 ++++ .../organisms/layout/posts-list.stories.tsx | 181 +++++++++++++++++++++ .../organisms/layout/posts-list.test.tsx | 96 +++++++++++ src/components/organisms/layout/posts-list.tsx | 122 ++++++++++++++ 4 files changed, 431 insertions(+) create mode 100644 src/components/organisms/layout/posts-list.module.scss create mode 100644 src/components/organisms/layout/posts-list.stories.tsx create mode 100644 src/components/organisms/layout/posts-list.test.tsx create mode 100644 src/components/organisms/layout/posts-list.tsx (limited to 'src/components/organisms/layout') diff --git a/src/components/organisms/layout/posts-list.module.scss b/src/components/organisms/layout/posts-list.module.scss new file mode 100644 index 0000000..4d80442 --- /dev/null +++ b/src/components/organisms/layout/posts-list.module.scss @@ -0,0 +1,32 @@ +@use "@styles/abstracts/mixins" as mix; +@use "@styles/abstracts/placeholders"; + +.section { + @include mix.media("screen") { + @include mix.dimensions("md") { + display: grid; + grid-template-columns: max-content minmax(0, 1fr); + align-items: first baseline; + } + } +} + +.list { + @extend %reset-ordered-list; + + .item { + margin-bottom: var(--spacing-md); + } +} + +.year { + @include mix.media("screen") { + @include mix.dimensions("md") { + grid-column: 1; + justify-self: end; + margin-right: var(--spacing-lg); + position: sticky; + top: var(--spacing-xs); + } + } +} diff --git a/src/components/organisms/layout/posts-list.stories.tsx b/src/components/organisms/layout/posts-list.stories.tsx new file mode 100644 index 0000000..783d333 --- /dev/null +++ b/src/components/organisms/layout/posts-list.stories.tsx @@ -0,0 +1,181 @@ +import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { IntlProvider } from 'react-intl'; +import PostsList, { type Post } from './posts-list'; + +/** + * PostsList - Storybook Meta + */ +export default { + title: 'Organisms/Layout/PostsList', + component: PostsList, + args: { + byYear: false, + }, + argTypes: { + byYear: { + control: { + type: 'boolean', + }, + description: 'True to display the posts by year.', + table: { + category: 'Options', + defaultValue: { summary: false }, + }, + type: { + name: 'boolean', + required: false, + }, + }, + posts: { + description: 'The posts data.', + type: { + name: 'object', + required: true, + value: {}, + }, + }, + titleLevel: { + control: { + type: 'number', + min: 1, + max: 6, + }, + description: 'The title level (hn).', + table: { + category: 'Options', + defaultValue: { summary: 2 }, + }, + type: { + name: 'number', + required: false, + }, + }, + }, + decorators: [ + (Story) => ( + + + + ), + ], +} as ComponentMeta; + +const Template: ComponentStory = (args) => ( + +); + +const posts: Post[] = [ + { + excerpt: + '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.', + id: 'post-1', + meta: { + publication: { + name: 'Published on:', + value: '2022-02-26T00:42:02', + }, + readingTime: { name: 'Reading time:', value: '5 minutes' }, + categories: { + name: 'Categories:', + value: [ + + Cat 1 + , + + Cat 2 + , + ], + }, + comments: { name: 'Comments:', value: '1 comment' }, + }, + title: 'Ratione velit fuga', + url: '#', + cover: { + alt: 'cover', + height: 480, + src: 'http://placeimg.com/640/480', + width: 640, + // @ts-ignore - Needed because of the placeholder image. + unoptimized: true, + }, + }, + { + excerpt: + '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.', + id: 'post-2', + meta: { + publication: { + name: 'Published on:', + value: '2022-02-20T10:40:00', + }, + readingTime: { name: 'Reading time:', value: '8 minutes' }, + categories: { + name: 'Categories:', + value: [ + + Cat 2 + , + ], + }, + comments: { name: 'Comments:', value: '0 comments' }, + }, + title: 'Debitis laudantium laudantium', + url: '#', + }, + { + excerpt: + '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.', + id: 'post-3', + meta: { + publication: { + name: 'Published on:', + value: '2021-12-20T15:12:02', + }, + readingTime: { name: 'Reading time:', value: '3 minutes' }, + categories: { + name: 'Categories:', + value: [ + + Cat 1 + , + ], + }, + comments: { name: 'Comments:', value: '3 comments' }, + }, + title: 'Quaerat ut corporis', + url: '#', + cover: { + alt: 'cover', + height: 480, + src: 'http://placeimg.com/640/480', + width: 640, + // @ts-ignore - Needed because of the placeholder image. + unoptimized: true, + }, + }, +]; + +/** + * PostsList Stories - Default + */ +export const Default = Template.bind({}); +Default.args = { + posts, +}; + +/** + * PostsList Stories - By years + */ +export const ByYears = Template.bind({}); +ByYears.args = { + posts, + byYear: true, +}; + +/** + * PostsList Stories - No results + */ +export const NoResults = Template.bind({}); +NoResults.args = { + posts: [], +}; diff --git a/src/components/organisms/layout/posts-list.test.tsx b/src/components/organisms/layout/posts-list.test.tsx new file mode 100644 index 0000000..aa6dffa --- /dev/null +++ b/src/components/organisms/layout/posts-list.test.tsx @@ -0,0 +1,96 @@ +import { render, screen } from '@test-utils'; +import PostsList from './posts-list'; + +const posts = [ + { + excerpt: + '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.', + id: 'post-1', + meta: { + publication: { + name: 'Published on:', + value: '2022-02-26T00:42:02', + }, + readingTime: { name: 'Reading time:', value: '5 minutes' }, + categories: { + name: 'Categories:', + value: [ + + Cat 1 + , + + Cat 2 + , + ], + }, + comments: { name: 'Comments:', value: '1 comment' }, + }, + title: 'Ratione velit fuga', + url: '#', + cover: { + alt: 'cover', + height: 480, + src: 'http://placeimg.com/640/480', + width: 640, + }, + }, + { + excerpt: + '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.', + id: 'post-2', + meta: { + publication: { + name: 'Published on:', + value: '2022-02-20T10:40:00', + }, + readingTime: { name: 'Reading time:', value: '8 minutes' }, + categories: { + name: 'Categories:', + value: [ + + Cat 2 + , + ], + }, + comments: { name: 'Comments:', value: '0 comments' }, + }, + title: 'Debitis laudantium laudantium', + url: '#', + }, + { + excerpt: + '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.', + id: 'post-3', + meta: { + publication: { + name: 'Published on:', + value: '2021-12-20T15:12:02', + }, + readingTime: { name: 'Reading time:', value: '3 minutes' }, + categories: { + name: 'Categories:', + value: [ + + Cat 1 + , + ], + }, + comments: { name: 'Comments:', value: '3 comments' }, + }, + title: 'Quaerat ut corporis', + url: '#', + cover: { + alt: 'cover', + height: 480, + src: 'http://placeimg.com/640/480', + width: 640, + }, + }, +]; + +describe('PostsList', () => { + it('renders the correct number of posts', () => { + render(); + expect(screen.getAllByRole('article')).toHaveLength(posts.length); + }); +}); diff --git a/src/components/organisms/layout/posts-list.tsx b/src/components/organisms/layout/posts-list.tsx new file mode 100644 index 0000000..d67b03a --- /dev/null +++ b/src/components/organisms/layout/posts-list.tsx @@ -0,0 +1,122 @@ +import Heading, { type HeadingLevel } from '@components/atoms/headings/heading'; +import { FC } from 'react'; +import { useIntl } from 'react-intl'; +import Summary, { type SummaryProps } from './summary'; +import styles from './posts-list.module.scss'; + +export type Post = SummaryProps & { + /** + * The post id. + */ + id: string | number; +}; + +export type YearCollection = { + [key: string]: Post[]; +}; + +export type PostsListProps = { + /** + * True to display the posts by year. Default: false. + */ + byYear?: boolean; + /** + * The posts data. + */ + posts: Post[]; + /** + * The posts heading level (hn). + */ + titleLevel?: HeadingLevel; +}; + +/** + * Create a collection of posts sorted by year. + * + * @param {Posts[]} data - A collection of posts. + * @returns {YearCollection} The posts sorted by year. + */ +const sortPostsByYear = (data: Post[]): YearCollection => { + const yearCollection: YearCollection = {}; + + data.forEach((post) => { + const postYear = new Date(post.meta.publication.value as string) + .getFullYear() + .toString(); + yearCollection[postYear] = [...(yearCollection[postYear] || []), post]; + }); + + return yearCollection; +}; + +/** + * PostsList component + * + * Render a list of post summaries. + */ +const PostsList: FC = ({ + byYear = false, + posts, + titleLevel, +}) => { + const intl = useIntl(); + + /** + * Retrieve the list of posts. + * + * @param {Posts[]} data - A collection fo posts. + * @param {HeadingLevel} [headingLevel] - The posts heading level (hn). + * @returns {JSX.Element} The list of posts. + */ + const getList = ( + data: Post[], + headingLevel: HeadingLevel = 2 + ): JSX.Element => { + return ( +
    + {data.map(({ id, ...post }) => ( +
  1. + +
    2. + ))} +
+ ); + }; + + /** + * Retrieve the list of posts. + * + * @returns {JSX.Element | JSX.Element[]} - The posts list. + */ + const getPosts = (): JSX.Element | JSX.Element[] => { + if (!byYear) return getList(posts); + + const postsPerYear = sortPostsByYear(posts); + const years = Object.keys(postsPerYear).reverse(); + + return years.map((year) => { + return ( +
+ + {year} + + {getList(postsPerYear[year], titleLevel)} +
+ ); + }); + }; + + return posts.length === 0 ? ( +

+ {intl.formatMessage({ + defaultMessage: 'No results found.', + description: 'PostsList: no results', + id: 'vK7Sxv', + })} +

+ ) : ( + <>{getPosts()} + ); +}; + +export default PostsList; -- cgit v1.2.3