From 56878f647ea0f1066fa3e222d7aa0d83057f496d Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Mon, 13 Nov 2023 17:45:59 +0100
Subject: refactor(components): rewrite PostsList component

* remove NoResults component and move logic to Search page
* add a usePostsList hook
* remove Pagination from PostsList (it is only used if javascript is
disabled and not on every posts list)
* replace `byYear` prop with `sortByYear`
* replace `loadMore` prop with `onLoadMore`
* remove `showLoadMoreBtn` (we can use `loadMore` prop instead to
determine if we need to display the button)
* replace `titleLevel` prop with `headingLvl`
* add `firstNewResult` prop to handle focus on the new results when
loading more article (we should not focus a useless span but the item
directly)
---
 .../organisms/layout/posts-list.stories.tsx        | 191 ---------------------
 1 file changed, 191 deletions(-)
 delete mode 100644 src/components/organisms/layout/posts-list.stories.tsx

(limited to 'src/components/organisms/layout/posts-list.stories.tsx')

diff --git a/src/components/organisms/layout/posts-list.stories.tsx b/src/components/organisms/layout/posts-list.stories.tsx
deleted file mode 100644
index b5af1d3..0000000
--- a/src/components/organisms/layout/posts-list.stories.tsx
+++ /dev/null
@@ -1,191 +0,0 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import { PostsList } from './posts-list';
-import { posts } from './posts-list.fixture';
-
-/**
- * PostsList - Storybook Meta
- */
-export default {
-  title: 'Organisms/Layout/PostsList',
-  component: PostsList,
-  args: {
-    byYear: false,
-    isLoading: false,
-    pageNumber: 1,
-    showLoadMoreBtn: false,
-    siblings: 1,
-    titleLevel: 2,
-  },
-  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<typeof PostsList>;
-
-const Template: ComponentStory<typeof PostsList> = (args) => (
-  <PostsList {...args} />
-);
-
-/**
- * PostsList Stories - Default
- */
-export const Default = Template.bind({});
-Default.args = {
-  posts,
-  total: posts.length,
-};
-
-/**
- * PostsList Stories - By years
- */
-export const ByYears = Template.bind({});
-ByYears.args = {
-  posts,
-  byYear: true,
-  total: posts.length,
-};
-ByYears.decorators = [
-  (Story) => (
-    <div style={{ marginLeft: 150 }}>
-      <Story />
-    </div>
-  ),
-];
-
-/**
- * PostsList Stories - No results
- */
-export const NoResults = Template.bind({});
-NoResults.args = {
-  posts: [],
-  total: posts.length,
-};
-- 
cgit v1.2.3

