diff --git a/ui/app/src/Container/Container.tsx b/ui/app/src/Container/Container.tsx index 8777a6483..416d61f4a 100644 --- a/ui/app/src/Container/Container.tsx +++ b/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 ( - - - - + + + {author} + + } + /> + + } + > {children} diff --git a/ui/blocks/src/Container/Container.tsx b/ui/blocks/src/Container/Container.tsx index caf71da03..e6a542a09 100644 --- a/ui/blocks/src/Container/Container.tsx +++ b/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 = ({ children, infoRow }) => { +export const Container: FC = ({ children, author }) => { + const { doc } = useStoryContext({ id: '.' }); return ( - + - + + + , + + {author} + - {infoRow && {infoRow}} </Box> diff --git a/ui/blocks/src/DocumentItem/DocumentItem.tsx b/ui/blocks/src/DocumentItem/DocumentItem.tsx index 41809dc35..2bb80f277 100644 --- a/ui/blocks/src/DocumentItem/DocumentItem.tsx +++ b/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> ); }; diff --git a/ui/blocks/src/DocumentItem/DocumentShortItem.tsx b/ui/blocks/src/DocumentItem/DocumentShortItem.tsx deleted file mode 100644 index 06bcbfff2..000000000 --- a/ui/blocks/src/DocumentItem/DocumentShortItem.tsx +++ /dev/null @@ -1,67 +0,0 @@ -/** @jsx jsx */ -import { FC, Fragment } from 'react'; -import { jsx, Box, Text } from 'theme-ui'; -import { - Document, - getDocPath, - dateToLocalString, - RunConfiguration, -} from '@component-controls/core'; -import { Link } from '@component-controls/components'; -import { TagsList } from '../TagsList'; - -export interface DocumentShortItemProps { - /** - * document to be displayed - */ - doc?: Document; - /** - * store configuration object - */ - config?: RunConfiguration; - - reverse?: boolean; -} -export const DocumentShortItem: FC<DocumentShortItemProps> = ({ - doc, - config, - reverse, -}) => { - const { 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 tagsNode || dateNode ? ( - <Box variant="documentitem.info.container"> - {reverse ? ( - <Fragment> - {tagsNode || <div />} - {dateNode} - </Fragment> - ) : ( - <Fragment> - {dateNode || <div />} - {tagsNode} - </Fragment> - )} - </Box> - ) : null; -}; diff --git a/ui/blocks/src/DocumentItem/index.ts b/ui/blocks/src/DocumentItem/index.ts index a28bbd90a..0af1f30d3 100644 --- a/ui/blocks/src/DocumentItem/index.ts +++ b/ui/blocks/src/DocumentItem/index.ts @@ -1,2 +1 @@ export * from './DocumentItem'; -export * from './DocumentShortItem'; diff --git a/ui/blocks/src/LastEdited/LastEdited.stories.tsx b/ui/blocks/src/LastEdited/LastEdited.stories.tsx deleted file mode 100644 index 952473cec..000000000 --- a/ui/blocks/src/LastEdited/LastEdited.stories.tsx +++ /dev/null @@ -1,14 +0,0 @@ -/* eslint-disable react/display-name */ -import React from 'react'; -import { LastEdited } from './LastEdited'; -import { MockContext } from '../test/MockContext'; -export default { - title: 'Blocks/LastEdited', - component: LastEdited, -}; - -export const overview = () => ( - <MockContext id="id-of-story"> - <LastEdited /> - </MockContext> -); diff --git a/ui/blocks/src/LastEdited/LastEdited.tsx b/ui/blocks/src/LastEdited/LastEdited.tsx deleted file mode 100644 index 236fe4ddd..000000000 --- a/ui/blocks/src/LastEdited/LastEdited.tsx +++ /dev/null @@ -1,23 +0,0 @@ -/** @jsx jsx */ -/* eslint react/jsx-key: 0 */ -import { jsx } from 'theme-ui'; -import { FC } from 'react'; -import { Box, Text } from 'theme-ui'; -import { dateToLocalString } from '@component-controls/core'; -import { useStoryContext } from '../context'; - -/** - * Display the date last modified for the current document. - */ -export const LastEdited: FC = () => { - const { doc } = useStoryContext({ id: '.' }); - return doc?.dateModified ? ( - <Box variant="lastedited.container"> - <Box variant="lastedited.inner"> - <Text variant="lastedited.text"> - {`updated: ${dateToLocalString(doc.dateModified)}`} - </Text> - </Box> - </Box> - ) : null; -}; diff --git a/ui/blocks/src/LastEdited/index.ts b/ui/blocks/src/LastEdited/index.ts deleted file mode 100644 index 2aad55423..000000000 --- a/ui/blocks/src/LastEdited/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './LastEdited'; diff --git a/ui/blocks/src/PageContainer/PageContainer.tsx b/ui/blocks/src/PageContainer/PageContainer.tsx index 2051e130c..58fc3b98d 100644 --- a/ui/blocks/src/PageContainer/PageContainer.tsx +++ b/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 { diff --git a/ui/components/src/ThemeContext/theme.ts b/ui/components/src/ThemeContext/theme.ts index d0a35af84..38397a90f 100644 --- a/ui/components/src/ThemeContext/theme.ts +++ b/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: {}, diff --git a/ui/components/src/Value/Value.stories.tsx b/ui/components/src/Value/Value.stories.tsx new file mode 100644 index 000000000..1880ff51a --- /dev/null +++ b/ui/components/src/Value/Value.stories.tsx @@ -0,0 +1,18 @@ +import React from 'react'; +import { Value, ValueProps } from './Value'; + +export default { + title: 'Components/Value', + component: Value, +}; + +export const overview = ({ label, value }: ValueProps) => { + return <Value label={label} value={value} />; +}; + +overview.story = { + controls: { + label: 'date created', + value: '01/01/2020', + }, +}; diff --git a/ui/components/src/Value/Value.tsx b/ui/components/src/Value/Value.tsx new file mode 100644 index 000000000..769c8fd56 --- /dev/null +++ b/ui/components/src/Value/Value.tsx @@ -0,0 +1,26 @@ +import React, { FC, ReactNode } from 'react'; +import { Box, Text } from 'theme-ui'; + +export interface ValueProps { + /** + * label - usually smaller and muted + */ + label: ReactNode; + /** + * highlighted value + */ + value: ReactNode; +} + +/** + * + * Displays a label and value styled + */ +export const Value: FC<ValueProps> = ({ label, value }) => { + return ( + <Box variant="value.container"> + <Text variant="value.label">{label}</Text> + <Text variant="value.value">{value}</Text> + </Box> + ); +}; diff --git a/ui/components/src/Value/index.ts b/ui/components/src/Value/index.ts new file mode 100644 index 000000000..a49caca98 --- /dev/null +++ b/ui/components/src/Value/index.ts @@ -0,0 +1 @@ +export * from './Value'; diff --git a/ui/components/src/index.ts b/ui/components/src/index.ts index 5fb27a220..e1f307be2 100644 --- a/ui/components/src/index.ts +++ b/ui/components/src/index.ts @@ -26,4 +26,5 @@ export * from './ThemeContext'; export * from './Title'; export * from './TitledImage'; export * from './Toggle'; +export * from './Value'; export * from './Zoom';