feat: added Value component, info row

ui/app/src/Container/Container.tsx

@@ -1,11 +1,12 @@
 /** @jsx jsx */
 import { FC, useContext } from 'react';
 import { jsx, Box } from 'theme-ui';
+import { getDocPath } from '@component-controls/core';
+import { Link, Value } from '@component-controls/components';
 import {
   BlockContext,
   Pagination,
   Container as BlocksContainer,
-  DocumentShortItem,
 } from '@component-controls/blocks';
 
 /**
@@ -14,14 +15,27 @@ import {
 export const Container: FC = ({ children }) => {
   const { storeProvider, docId } = useContext(BlockContext);
   const doc = docId ? storeProvider.getStoryDoc(docId) : undefined;
+  const { author } = doc || {};
   const config = storeProvider.config;
-
+  console.log(doc, config);
   return (
     <Box variant="container.container">
-      <Box variant="container.inforow">
-        <DocumentShortItem reverse={true} doc={doc} config={config} />
-      </Box>
-      <BlocksContainer>
+      <BlocksContainer
+        author={
+          <Box variant="container.author">
+            <Value
+              label="by"
+              value={
+                <Link
+                  href={getDocPath('author', undefined, config?.pages, author)}
+                >
+                  {author}
+                </Link>
+              }
+            />
+          </Box>
+        }
+      >
         {children}
         <Box variant="container.pagination">
           <Pagination />

ui/blocks/src/Container/Container.tsx

@@ -1,24 +1,35 @@
 /** @jsx jsx */
-import { jsx, Box } from 'theme-ui';
+import { jsx, Box, Text } from 'theme-ui';
 import { FC, ReactNode } from 'react';
-import { EditPage } from '../EditPage';
-import { LastEdited } from '../LastEdited';
+import { dateToLocalString } from '@component-controls/core';
+import { Value } from '@component-controls/components';
 import { Title } from '../Title';
+import { EditPage } from '../EditPage';
+
+import { useStoryContext } from '../context';
 
 export interface ContainerProps {
-  infoRow?: ReactNode;
+  author?: ReactNode;
 }
 /**
  * page inner container. will display a like to edit the page and a last updated date.
  */
-export const Container: FC<ContainerProps> = ({ children, infoRow }) => {
+export const Container: FC<ContainerProps> = ({ children, author }) => {
+  const { doc } = useStoryContext({ id: '.' });
   return (
     <Box variant="blockpagecontainer.container">
-      <Box variant="blockpagecontainer.editrow">
+      <Box variant="blockpagecontainer.inforow">
         <EditPage />
-        <LastEdited />
+        <Box variant="blockpagecontainer.createdbox.container">
+          <Value label="created:" value={dateToLocalString(doc?.date)} />
+          <Text variant="blockpagecontainer.createdbox.separator">,</Text>
+          <Value
+            label="updated:"
+            value={dateToLocalString(doc?.dateModified)}
+          />
+          {author}
+        </Box>
       </Box>
-      {infoRow && <Box variant="blockpagecontainer.inforow">{infoRow}</Box>}
       <Box variant="blockpagecontainer.titlerow">
         <Title sx={{ paddingBottom: 0 }} />
       </Box>

ui/blocks/src/DocumentItem/DocumentItem.tsx

@@ -1,14 +1,16 @@
 /** @jsx jsx */
 import { FC } from 'react';
-import { jsx, Box } from 'theme-ui';
+import { jsx, Box, Text } from 'theme-ui';
 import {
   Document,
   defDocType,
   RunConfiguration,
+  getDocPath,
+  dateToLocalString,
 } from '@component-controls/core';
 import { Subtitle, Markdown, Link } from '@component-controls/components';
 import { PageTypeTag } from '../PageTypeTag';
-import { DocumentShortItem } from './DocumentShortItem';
+import { TagsList } from '../TagsList';
 
 export interface DocumentItemProps {
   /**
@@ -30,7 +32,28 @@ export interface DocumentItemProps {
  * displays a single doument item
  */
 export const DocumentItem: FC<DocumentItemProps> = ({ doc, link, config }) => {
-  const { type = defDocType } = doc;
+  const { type = defDocType, tags = [], date, author } = doc;
+  const dateNode = date ? (
+    <Box variant="documentitem.info.inner">
+      {date ? (
+        <Box variant="documentitem.info.date">{`created: ${dateToLocalString(
+          date,
+        )}`}</Box>
+      ) : (
+        ''
+      )}
+      {author && (
+        <Box variant="documentitem.info.author">
+          {date && <Text variant="documentitem.info.comma">,</Text>}
+          <Text variant="documentitem.info.by">by</Text>
+          <Link href={getDocPath('author', undefined, config?.pages, author)}>
+            {author}
+          </Link>
+        </Box>
+      )}
+    </Box>
+  ) : null;
+  const tagsNode = tags.length ? <TagsList tags={tags} /> : null;
   return (
     <Box variant="documentitem.container">
       <Box variant="documentitem.titlerow">
@@ -40,7 +63,12 @@ export const DocumentItem: FC<DocumentItemProps> = ({ doc, link, config }) => {
         <PageTypeTag type={type} />
       </Box>
       {doc.description && <Markdown>{doc.description}</Markdown>}
-      <DocumentShortItem config={config} doc={doc} />
+      {(tagsNode || dateNode) && (
+        <Box variant="documentitem.info.container">
+          {dateNode || <div />}
+          {tagsNode}
+        </Box>
+      )}
     </Box>
   );
 };

ui/blocks/src/DocumentItem/index.ts

@@ -1,2 +1 @@
 export * from './DocumentItem';
-export * from './DocumentShortItem';

ui/blocks/src/PageContainer/PageContainer.tsx

@@ -11,7 +11,7 @@ import {
 import { jsx, Box, BoxProps } from 'theme-ui';
 import { get } from '@theme-ui/css';
 import { useTheme } from '@component-controls/components';
-import { Container } from '../Container';
+import { Container } from '../Container/Container';
 import { StoryContextConsumer } from '../context';
 
 export interface PageContainerOwnProps {

ui/components/src/ThemeContext/theme.ts

@@ -37,9 +37,9 @@ export type ControlsTheme = {
   tabs: Record<string, ThemeUIStyleObject>;
   tag: Record<string, ThemeUIStyleObject>;
   titledimage: Record<string, ThemeUIStyleObject>;
+  value: Record<string, ThemeUIStyleObject>;
   zoom: ThemeUIStyleObject;
   editpage: Record<string, ThemeUIStyleObject>;
-  lastedited: Record<string, ThemeUIStyleObject>;
   pagecontainer: ThemeUIStyleObject;
   propstable: Record<string, ThemeUIStyleObject>;
   story: Record<string, ThemeUIStyleObject>;
@@ -373,16 +373,27 @@ export const theme: ControlsTheme = {
   },
   blockpagecontainer: {
     container: {},
-    editrow: {
+    inforow: {
       display: 'flex',
       flexDirection: 'row',
       alignItems: 'center',
       justifyContent: 'space-between',
     },
-    inforow: { mt: 2 },
     titlerow: {
       my: 4,
     },
+    createdbox: {
+      container: {
+        display: 'flex',
+        flexDirection: ['column', 'row'],
+        alignItems: ['flex-end', 'baseline'],
+      },
+      separator: {
+        visibility: ['hidden', 'visible'],
+        height: [0],
+        mr: [0, 1],
+      },
+    },
   },
   linkheading: {
     container: {
@@ -535,34 +546,43 @@ export const theme: ControlsTheme = {
       fontSize: 1,
     },
   },
+  value: {
+    container: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'flex-end',
+    },
+    label: {
+      fontSize: 0,
+      color: 'muted',
+      mr: 1,
+      lineHeight: 'heading',
+    },
+    value: {
+      fontSize: 2,
+      lineHeight: 'heading',
+    },
+  },
   zoom: {
     position: 'relative',
     transformOrigin: 'top left',
     transition: 'transform .2s',
   },
   editpage: {
-    container: {},
-    inner: {
-      display: 'flex',
-      flexDirection: 'row',
-      alignItems: 'center',
-    },
-    text: {
-      pl: 2,
+    container: {
+      lineHeight: 'heading',
     },
-  },
-  lastedited: {
-    container: {},
     inner: {
       display: 'flex',
       flexDirection: 'row',
       alignItems: 'center',
     },
     text: {
-      color: 'muted',
+      pl: 1,
+      fontSize: 2,
+      fontWeight: 'bold',
     },
   },
-
   pagecontainer: {
     bg: 'background',
     color: 'text',
@@ -949,7 +969,7 @@ export const theme: ControlsTheme = {
   container: {
     container: {},
     pagination: { py: 4 },
-    inforow: { mb: 2 },
+    author: { ml: [0, 2] },
   },
   documentslist: {
     container: {},