DEV: Reusable post-list component (#30312)

This update adds a ✨ _new_ `<PostList />` component, along with it's child components (`<PostListItem/>` and `<PostListItemDetails />`). This new generic component can be used to show a list of posts.

It can be used like so:
```js
/**
 * A component that renders a list of posts
 *
 * @component PostList
 *
 * @args {Array<Object>} posts - The array of post objects to display
 * @args {Function} fetchMorePosts - A function that fetches more posts. Must return a Promise that resolves to an array of new posts.
 * @args {String} emptyText (optional) - Custom text to display when there are no posts
 * @args {String|Array} additionalItemClasses (optional) - Additional classes to add to each post list item
 * @args {String} titleAriaLabel (optional) - Custom Aria label for the post title
 * 
*/
```
```hbs
<PostList
    @posts={{this.posts}}
    @fetchMorePosts={{this.loadMorePosts}}
    @emptyText={{i18n "custom_identifier.empty"}}
    @additionalItemClasses="custom-class"
 />
```

plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/01-post-list.gjs

@@ -0,0 +1,22 @@
+import PostList from "discourse/components/post-list";
+import { i18n } from "discourse-i18n";
+import StyleguideExample from "../../styleguide-example";
+
+const StyleguidePostList = <template>
+  <StyleguideExample
+    @title={{i18n "styleguide.sections.post_list.empty_example"}}
+  >
+    <PostList @posts="" @additionalItemClasses="styleguide-post-list-item" />
+  </StyleguideExample>
+
+  <StyleguideExample
+    @title={{i18n "styleguide.sections.post_list.populated_example"}}
+  >
+    <PostList
+      @posts={{@dummy.postList}}
+      @additionalItemClasses="styleguide-post-list-item"
+    />
+  </StyleguideExample>
+</template>;
+
+export default StyleguidePostList;

plugins/styleguide/assets/javascripts/discourse/lib/dummy-data.js

@@ -153,14 +153,29 @@ export function createData(store) {
 
     <p>Case everti equidem ius ea, ubique veritus vim id. Eros omnium conclusionemque qui te, usu error alienum imperdiet ut, ex ius meis adipisci. Libris reprehendunt eos ex, mea at nisl suavitate. Altera virtute democritum pro cu, melius latine in ius.</p>`;
 
+  const excerpt =
+    "<p>Lorem ipsum dolor sit amet, et nec quis viderer prompta, ex omnium ponderum insolens eos, sed discere invenire principes in. Fuisset constituto per ad. Est no scripta propriae facilisis, viderer impedit deserunt in mel. Quot debet facilisis ne vix, nam in detracto tacimates.</p>";
+
   const transformedPost = {
     id: 1234,
     topic,
+    user: {
+      avatar_template: user.avatar_template,
+      id: user.id,
+      username: user.username,
+      name: user.name,
+    },
     name: user.name,
     username: user.username,
     avatar_template: user.avatar_template,
+    category: {
+      id: categories[0].id,
+      name: categories[0].name,
+      color: categories[0].color,
+    },
     created_at: "2024-11-13T21:12:37.835Z",
     cooked,
+    excerpt,
     post_number: 1,
     post_type: 1,
     updated_at: moment().subtract(2, "days"),
@@ -262,8 +277,64 @@ export function createData(store) {
   const postModel = store.createRecord("post", {
     transformedPost,
   });
+
   postModel.set("topic", store.createRecord("topic", transformedPost.topic));
 
+  const postList = [
+    transformedPost,
+    {
+      id: 145,
+      topic: pinnedTopic,
+      created_at: "2024-03-15T18:45:38.720Z",
+      category: {
+        id: categories[2].id,
+        color: categories[2].color,
+        name: categories[2].name,
+      },
+      user: {
+        avatar_template: user.avatar_template,
+        id: user.id,
+        username: user.username,
+        name: user.name,
+      },
+      excerpt,
+    },
+    {
+      id: 144,
+      topic: archivedTopic,
+      created_at: "2024-02-15T18:45:38.720Z",
+      category: {
+        id: categories[1].id,
+        color: categories[1].color,
+        name: categories[1].name,
+      },
+      user: {
+        avatar_template: user.avatar_template,
+        id: user.id,
+        username: user.username,
+        name: user.name,
+      },
+      excerpt,
+    },
+    {
+      id: 143,
+      topic: closedTopic,
+      created_at: "2024-01-15T18:45:38.720Z",
+      category: {
+        id: categories[0].id,
+        color: categories[0].color,
+        name: categories[0].name,
+      },
+      user: {
+        avatar_template: user.avatar_template,
+        id: user.id,
+        username: user.username,
+        name: user.name,
+      },
+      excerpt,
+    },
+  ];
+
   _data = {
     options: [
       { id: 1, name: "Orange" },
@@ -316,6 +387,7 @@ export function createData(store) {
 
     transformedPost,
     postModel,
+    postList,
 
     user,
 

plugins/styleguide/assets/javascripts/discourse/lib/styleguide.js

@@ -25,7 +25,8 @@ import topicListItem from "../components/sections/molecules/topic-list-item";
 import topicNotifications from "../components/sections/molecules/topic-notifications";
 import topicTimerInfo from "../components/sections/molecules/topic-timer-info";
 import post from "../components/sections/organisms/00-post";
-import topicMap from "../components/sections/organisms/01-topic-map";
+import postList from "../components/sections/organisms/01-post-list";
+import topicMap from "../components/sections/organisms/02-topic-map";
 import topicFooterButtons from "../components/sections/organisms/03-topic-footer-buttons";
 import topicList from "../components/sections/organisms/04-topic-list";
 import basicTopicList from "../components/sections/organisms/basic-topic-list";
@@ -84,7 +85,8 @@ const SECTIONS = [
   },
   { component: topicTimerInfo, category: "molecules", id: "topic-timer-info" },
   { component: post, category: "organisms", id: "post", priority: 0 },
-  { component: topicMap, category: "organisms", id: "topic-map", priority: 1 },
+  { component: postList, category: "organisms", id: "post-list", priority: 1 },
+  { component: topicMap, category: "organisms", id: "topic-map", priority: 2 },
   {
     component: topicFooterButtons,
     category: "organisms",

plugins/styleguide/config/locales/client.en.yml

@@ -70,6 +70,10 @@ en:
           title: "Topic Notifications"
         post:
           title: "Post"
+        post_list:
+          title: "Post List"
+          empty_example: "<PostList /> empty state"
+          populated_example: "<PostList /> populated state"
         topic_map:
           title: "Topic Map"
         site_header:

plugins/styleguide/spec/system/smoke_test_spec.rb

@@ -40,6 +40,7 @@ RSpec.describe "Styleguide Smoke Test", type: :system do
     ],
     "ORGANISMS" => [
       { href: "/organisms/post", title: "Post" },
+      { href: "/organisms/post-list", title: "Post List" },
       { href: "/organisms/topic-map", title: "Topic Map" },
       { href: "/organisms/topic-footer-buttons", title: "Topic Footer Buttons" },
       { href: "/organisms/topic-list", title: "Topic List" },