feat: sort documents list

examples/stories/src/blogs/home-page.mdx

@@ -2,6 +2,7 @@
 title: Home
 route: /
 type: page
+author: atanasster
 fullPage: true
 ---
 

examples/stories/src/stories/controls-editors-starter.stories.tsx

@@ -5,6 +5,7 @@ import { ControlTypes } from '@component-controls/core';
 export default {
   title: 'Introduction/Starter',
   component: Button,
+  author: 'atanasster',
 };
 
 interface DocsControlsTable {

examples/stories/src/stories/controls-editors.stories.jsx

@@ -4,6 +4,7 @@ import { ControlTypes } from '@component-controls/core';
 
 export default {
   title: 'Introduction/Controls',
+  author: 'atanasster',
 };
 
 export const textDefaultProp = ({ text }) => text;

examples/stories/src/stories/inherit-from-doc.stories.tsx

@@ -3,6 +3,7 @@ import { ControlTypes } from '@component-controls/core';
 
 export default {
   title: 'Introduction/Doc',
+  author: 'atanasster',
   controls: {
     name: {
       type: ControlTypes.TEXT,

examples/stories/src/stories/smart-prop-type.stories.js

@@ -3,6 +3,7 @@ import { Button } from '../components/PropTypesButton';
 
 export default {
   title: 'Introduction/Smart PropTypes',
+  author: 'atanasster',
   parameters: {
     component: Button,
   },

examples/stories/src/stories/smart-typescript.stories.js

@@ -3,6 +3,7 @@ import { Button } from '../components/Button';
 
 export default {
   title: 'Introduction/Smart Typescript',
+  author: 'atanasster',
   parameters: {
     component: Button,
   },

examples/stories/src/stories/stories-csf.stories.js

@@ -5,6 +5,7 @@ import { customStory as customStoryDeconstructedProps } from './external/externa
 
 export default {
   title: 'Introduction/CSF',
+  author: 'atanasster',
 };
 
 export const simple = () => <div>test</div>;

ui/app/src/DocumentsList/DocumentsList.tsx

@@ -1,4 +1,6 @@
-import React, { FC, useContext } from 'react';
+/** @jsx jsx */
+import { FC, useContext, useState, useMemo } from 'react';
+import { jsx, Select, Label, Box } from 'theme-ui';
 import { Pages } from '@component-controls/core';
 import { BlockContext } from '@component-controls/blocks';
 import { DocumentsListItem } from './DocumentsListItem';
@@ -10,22 +12,56 @@ export interface DocumentsListProps {
   pages: Pages;
 }
 
+type SortOrder = 'date' | 'dateModified' | 'title';
 /**
  * displays a list of the provided document pages
  */
 export const DocumentsList: FC<DocumentsListProps> = ({ pages }) => {
   const { storeProvider } = useContext(BlockContext);
+  const [sortOrder, setSortOrder] = useState<SortOrder>('date');
+  const sortedPages = useMemo(() => {
+    return pages.sort((p1, p2) => {
+      const v1: any | undefined = p1[sortOrder];
+      const v2: any | undefined = p2[sortOrder];
+      if (v1 && v2) {
+        return sortOrder.startsWith('date')
+          ? -v1.localeCompare(v2)
+          : v1.localeCompare(v2);
+      }
+      if (!v1 && !v2) {
+        return 0;
+      }
+      return v1 ? -1 : 1;
+    });
+  }, [pages, sortOrder]);
   return (
-    <ul>
-      {pages.map(page => (
-        <li key={page?.title}>
-          <DocumentsListItem
-            config={storeProvider.config}
-            link={storeProvider.getPagePath(page.type, page.title)}
-            page={page}
-          />
-        </li>
-      ))}
-    </ul>
+    <Box variant="documentslist.container">
+      <Box variant="documentslist.sortrow">
+        <Label variant="documentslist.sortlabel" htmlFor="sortorder">
+          Sort by:
+        </Label>
+        <Select
+          variant="documentslist.sortselect"
+          name="sortorder"
+          onChange={e => setSortOrder(e.target.value as SortOrder)}
+          value={sortOrder}
+        >
+          <option value="date">By date created</option>
+          <option value="dateModified">By last updated</option>
+          <option value="title">By title</option>
+        </Select>
+      </Box>
+      <ul>
+        {sortedPages.map(page => (
+          <li key={page?.title}>
+            <DocumentsListItem
+              config={storeProvider.config}
+              link={storeProvider.getPagePath(page.type, page.title)}
+              page={page}
+            />
+          </li>
+        ))}
+      </ul>
+    </Box>
   );
 };

ui/components/src/ThemeContext/theme.ts

@@ -186,7 +186,7 @@ export const theme: Theme = {
       },
     },
     thead: {
-      borderBottom: '1px solid #999',
+      borderBottom: (t: Theme) => ` 1px solid  ${t.colors?.shadow}`,
       backgroundColor: 'header',
       color: 'text',
     },
@@ -203,7 +203,7 @@ export const theme: Theme = {
       fontFamily: 'monospace',
     },
     tr: {
-      borderBottom: '1px solid rgba(0, 0, 0, 0.1)',
+      borderBottom: (t: Theme) => ` 1px solid  ${t.colors?.shadow}`,
     },
   },
   actionbar: {
@@ -618,7 +618,16 @@ export const theme: Theme = {
     },
   },
   documentlistitem: {
-    container: { display: 'flex', flexDirection: 'column' },
+    container: {
+      display: 'flex',
+      flexDirection: 'column',
+      py: 1,
+      my: 3,
+      p: {
+        my: 0,
+      },
+      borderBottom: (t: Theme) => ` 1px solid  ${t.colors?.shadow}`,
+    },
     info: {
       container: {
         display: 'flex',
@@ -663,6 +672,17 @@ export const theme: Theme = {
     container: {},
     pagination: { py: 4 },
   },
+  documentslist: {
+    container: {},
+    sortrow: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      pb: 3,
+    },
+    sortlabel: { width: 'unset', pr: 2 },
+    sortselect: { minWidth: '300px' },
+  },
 };
 
 export const useTheme = (): Theme => {