feat: add source lines and %comments to story Container

ccontrols · Mar 10, 2021 · c253062 · c253062
1 parent bb983a5
commit c253062
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 58 deletions.
diff --git a/ui/blocks/src/ComponentStats/ComponentStats.tsx b/ui/blocks/src/ComponentStats/ComponentStats.tsx
@@ -1,9 +1,8 @@
 /** @jsx jsx */
 import { FC } from 'react';
-import { jsx, BoxProps, Box, Link } from 'theme-ui';
+import { jsx, BoxProps } from 'theme-ui';
 import { Component } from '@component-controls/core';
-import { Popover, Value } from '@component-controls/components';
-import { BaseComponentCommits } from '../ComponentCommits';
+import { Value } from '@component-controls/components';
 
 export const ComponentStats: FC<{ component?: Component } & BoxProps> = ({
   component,
@@ -25,42 +24,6 @@ export const ComponentStats: FC<{ component?: Component } & BoxProps> = ({
       }}
       {...rest}
     >
-      {!!component.fileInfo?.commits?.length && (
-        <Popover
-          trigger="click"
-          placement="auto"
-          tooltip={() => (
-            <Box sx={{ padding: 1 }}>
-              <BaseComponentCommits
-                component={component}
-                pagination={{ pageSize: 3 }}
-              />
-            </Box>
-          )}
-        >
-          <Link
-            sx={{
-              ':hover': { cursor: 'pointer' },
-            }}
-          >
-            <Value
-              label={
-                <Box
-                  sx={{
-                    fontSize: 0,
-                    mr: 1,
-                    lineHeight: 'heading',
-                    textDecoration: 'underline',
-                  }}
-                >
-                  commits:
-                </Box>
-              }
-              value={component.fileInfo?.commits?.length}
-            />
-          </Link>
-        </Popover>
-      )}
       <Value sx={{ mx: 1 }} label="source lines:" value={stats.source} />
       <Value
         label="comments %:"

diff --git a/ui/blocks/src/Container/Container.tsx b/ui/blocks/src/Container/Container.tsx
@@ -1,12 +1,16 @@
 /** @jsx jsx */
 import { jsx, Box, Text } from 'theme-ui';
 import { FC, ReactNode, Fragment } from 'react';
-import { dateToLocalString } from '@component-controls/core';
+import { dateToLocalString, CURRENT_STORY } from '@component-controls/core';
 import { Value } from '@component-controls/components';
-import { useCurrentDocument } from '@component-controls/store';
+import {
+  useCurrentDocument,
+  useStoryComponent,
+} from '@component-controls/store';
 import { Title } from '../Title';
 import { Subtitle } from '../Subtitle';
 import { EditPage } from '../EditPage';
+import { ComponentStats } from '../ComponentStats';
 
 export interface ContainerProps {
   author?: ReactNode;
@@ -21,27 +25,39 @@ export const Container: FC<ContainerProps> = ({
   secondRow,
 }) => {
   const doc = useCurrentDocument();
+  const component = useStoryComponent({ id: CURRENT_STORY });
   return (
     <Box variant="blockpagecontainer.container">
       <Box variant="blockpagecontainer.inforow">
         <EditPage />
-        <Box variant="blockpagecontainer.createdbox.container">
-          {doc?.date && (
-            <Fragment>
-              <Value label="created:" value={dateToLocalString(doc.date)} />
-              {doc?.dateModified && (
-                <Text variant="blockpagecontainer.createdbox.separator">,</Text>
-              )}
-            </Fragment>
-          )}
-          {doc?.dateModified && (
-            <Value
-              label="updated:"
-              value={dateToLocalString(doc.dateModified)}
-            />
-          )}
-          {author}
-        </Box>
+        <div
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            my: 1,
+          }}
+        >
+          <Box variant="blockpagecontainer.createdbox.container">
+            {doc?.date && (
+              <Fragment>
+                <Value label="created:" value={dateToLocalString(doc.date)} />
+                {doc?.dateModified && (
+                  <Text variant="blockpagecontainer.createdbox.separator">
+                    ,
+                  </Text>
+                )}
+              </Fragment>
+            )}
+            {doc?.dateModified && (
+              <Value
+                label="updated:"
+                value={dateToLocalString(doc.dateModified)}
+              />
+            )}
+            {author}
+          </Box>
+          <ComponentStats component={component} />
+        </div>
       </Box>
       {secondRow && (
         <Box variant="blockpagecontainer.secondrow">{secondRow}</Box>