✨ - feat: add list template

src/contexts/navigation/navigation.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import * as React from "react";
 
 import { Button, ButtonLink, Navbar, Outline } from "../../components";
+import { List } from "../../templates";
 import { NavigationContext } from "./navigation";
 
 const meta = {
@@ -46,6 +47,7 @@ export const PrimaryNavigation: Story = {
         ),
       }}
     >
+      <List />
     </NavigationContext.Provider>
   ),
 };

src/templates/index.ts

@@ -1,2 +1,3 @@
 // Auto-generated file. Do not modify manually.
 export * from "./login";
+export * from "./list";

src/templates/list/index.ts

@@ -0,0 +1 @@
+export * from "./list";

src/templates/list/list.stories.tsx

@@ -0,0 +1,83 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import * as React from "react";
+import { useEffect, useState } from "react";
+
+import { P } from "../../components";
+import { AttributeData } from "../../lib/data/attributedata";
+import { List } from "./list";
+
+const meta = {
+  title: "Templates/List",
+  component: List,
+  argTypes: { onSubmit: { action: "onSubmit" } },
+} satisfies Meta<typeof List>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const ListTemplate: Story = {
+  args: {
+    children: <P>The quick brown fox jumps over the lazy dog.</P>,
+    pageSize: 50,
+    results: [],
+    showPaginator: true,
+    sort: true,
+    title: "Lijstweergave",
+  },
+  render: (args) => {
+    const [loading, setLoading] = useState(false);
+    const [page, setPage] = useState<number>(args.paginatorProps?.page || 1);
+    const [pageSize, setPageSize] = useState<number>(args.pageSize || 10);
+    const [results, setResults] = useState<AttributeData[]>([]);
+    const [sort, setSort] = useState<string>("");
+
+    /**
+     * Fetches data from jsonplaceholder.typicode.com.
+     */
+    useEffect(() => {
+      setLoading(true);
+      const abortController = new AbortController();
+      const sortKey = sort.replace(/^-/, "");
+      const sortDirection = sort.startsWith("-") ? "desc" : "asc";
+
+      // Process sorting and pagination locally in place for demonstration purposes.
+      fetch(
+        `https://jsonplaceholder.typicode.com/posts?_page=${page}&_limit=${pageSize}&_sort=${sortKey}&_order=${sortDirection}`,
+        {
+          signal: abortController.signal,
+        },
+      )
+        .then((response) => response.json())
+        .then((data: AttributeData[]) => {
+          setResults(data);
+          setLoading(false);
+        });
+
+      return () => {
+        abortController.abort();
+        setLoading(false);
+      };
+    }, [page, pageSize, sort]);
+
+    return (
+      <List
+        {...args}
+        count={100}
+        results={results}
+        onSort={(field) => setSort(field)}
+        loading={loading}
+        page={page}
+        pageSize={pageSize}
+        pageSizeOptions={[
+          { label: 10 },
+          { label: 20 },
+          { label: 30 },
+          { label: 40 },
+          { label: 50 },
+        ]}
+        onPageChange={setPage}
+        onPageSizeChange={setPageSize}
+      />
+    );
+  },
+};

src/templates/list/list.tsx

@@ -0,0 +1,57 @@
+import React, { useContext } from "react";
+
+import {
+  Body,
+  Card,
+  Column,
+  DataGrid,
+  DataGridProps,
+  Grid,
+  Logo,
+  Page,
+} from "../../components";
+import { ConfigContext, NavigationContext } from "../../contexts";
+
+export type ListProps = DataGridProps &
+  React.PropsWithChildren<{
+    /** Logo (JSX) slot. */
+    slotLogo?: React.ReactNode;
+
+    /** Primary navigation (JSX) slot. */
+    slotPrimaryNavigation?: React.ReactNode;
+  }>;
+
+/**
+ * List template
+ * @constructor
+ */
+export const List: React.FC<ListProps> = ({
+  children,
+  slotLogo,
+  slotPrimaryNavigation,
+  ...props
+}) => {
+  const { logo: CustomLogo } = useContext(ConfigContext);
+  const { primaryNavigation } = useContext(NavigationContext);
+
+  return (
+    <Page>
+      <Grid>
+        <Column span={12}>
+          {slotLogo || CustomLogo || <Logo />}
+          {slotPrimaryNavigation || primaryNavigation}
+        </Column>
+
+        <Column span={12}>
+          {children}
+
+          <Card>
+            <Body>
+              <DataGrid {...props} />
+            </Body>
+          </Card>
+        </Column>
+      </Grid>
+    </Page>
+  );
+};