diff options
| -rw-r--r-- | src/components/organisms/layout/posts-list.module.scss | 32 | ||||
| -rw-r--r-- | src/components/organisms/layout/posts-list.stories.tsx | 181 | ||||
| -rw-r--r-- | src/components/organisms/layout/posts-list.test.tsx | 96 | ||||
| -rw-r--r-- | src/components/organisms/layout/posts-list.tsx | 122 |
4 files changed, 431 insertions, 0 deletions
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) => ( + <IntlProvider locale="en"> + <Story /> + </IntlProvider> + ), + ], +} as ComponentMeta<typeof PostsList>; + +const Template: ComponentStory<typeof PostsList> = (args) => ( + <PostsList {...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: [ + <a key="cat-1" href="#"> + Cat 1 + </a>, + <a key="cat-2" href="#"> + Cat 2 + </a>, + ], + }, + 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: [ + <a key="cat-2" href="#"> + Cat 2 + </a>, + ], + }, + 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: [ + <a key="cat-1" href="#"> + Cat 1 + </a>, + ], + }, + 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: [ + <a key="cat-1" href="#"> + Cat 1 + </a>, + <a key="cat-2" href="#"> + Cat 2 + </a>, + ], + }, + 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: [ + <a key="cat-2" href="#"> + Cat 2 + </a>, + ], + }, + 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: [ + <a key="cat-1" href="#"> + Cat 1 + </a>, + ], + }, + 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(<PostsList posts={posts} />); + 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<PostsListProps> = ({ + 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 ( + <ol className={styles.list}> + {data.map(({ id, ...post }) => ( + <li key={id} className={styles.item}> + <Summary {...post} titleLevel={headingLevel} /> + </li> + ))} + </ol> + ); + }; + + /** + * 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 ( + <section key={year} className={styles.section}> + <Heading level={2} className={styles.year}> + {year} + </Heading> + {getList(postsPerYear[year], titleLevel)} + </section> + ); + }); + }; + + return posts.length === 0 ? ( + <p> + {intl.formatMessage({ + defaultMessage: 'No results found.', + description: 'PostsList: no results', + id: 'vK7Sxv', + })} + </p> + ) : ( + <>{getPosts()}</> + ); +}; + +export default PostsList; |