feat: extract ComponentStats into its own component and create story

examples/stories/src/components/VariantButton.tsx

@@ -8,10 +8,8 @@ import {
   ArrowUpIcon,
 } from '@primer/octicons-react';
 
-/**
- * @todo Write the documentation.
- * @todo Add variant for spinner.
- */
+// TODO: Write the documentation
+// TODO: Add variant for spinner
 
 type ButtonVariant =
   | 'primary'

plugins/addon-catalog/src/ComponentCard/ComponentCard.tsx

@@ -158,7 +158,7 @@ export const ComponentCard: FC<ComponentCardProps & BoxProps> = ({
               }
             />
           </div>
-          <ComponentStats component={component} />
+          <ComponentStats component={component} variant="fixed" />
         </div>
       )}
     </Card>

ui/blocks/src/ComponentStats/ComponentStats.stories.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Document, Example } from '@component-controls/core';
+import { ComponentStats } from './ComponentStats';
+import { store } from '../test/storyStore';
+
+export default {
+  title: 'Blocks/ComponentStats',
+  component: ComponentStats,
+  category: ' Component',
+} as Document;
+
+export const overview: Example = () => (
+  <ComponentStats component={store.components['Control']} />
+);

ui/blocks/src/ComponentStats/ComponentStats.tsx

@@ -1,29 +1,20 @@
 /** @jsx jsx */
 import { FC } from 'react';
-import { jsx, BoxProps } from 'theme-ui';
+import { jsx, BoxProps, Box } from 'theme-ui';
 import { Component } from '@component-controls/core';
 import { Value } from '@component-controls/components';
 
-export const ComponentStats: FC<{ component?: Component } & BoxProps> = ({
-  component,
-  ...rest
-}) => {
+export const ComponentStats: FC<{
+  component?: Component;
+  variant?: 'responsive' | 'fixed';
+} & BoxProps> = ({ component, variant = 'responsive', ...rest }) => {
   if (!component) {
     return null;
   }
 
   const stats = component.fileInfo?.sloc;
   return stats ? (
-    <div
-      sx={{
-        display: 'flex',
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        flexWrap: 'wrap',
-        my: 1,
-      }}
-      {...rest}
-    >
+    <Box variant={`componentstats.${variant}`} {...rest}>
       <Value sx={{ mx: 1 }} label="source lines:" value={stats.source} />
       <Value
         label="comments %:"
@@ -32,6 +23,6 @@ export const ComponentStats: FC<{ component?: Component } & BoxProps> = ({
         }
       />
       {!!stats.todo && <Value label="todo lines:" value={stats.todo} />}
-    </div>
+    </Box>
   ) : null;
 };

ui/blocks/src/Container/Container.tsx

@@ -1,6 +1,6 @@
 /** @jsx jsx */
-import { jsx, Box, Text } from 'theme-ui';
-import { FC, ReactNode, Fragment } from 'react';
+import { jsx, Box } from 'theme-ui';
+import { FC, ReactNode } from 'react';
 import { dateToLocalString, CURRENT_STORY } from '@component-controls/core';
 import { Value } from '@component-controls/components';
 import {
@@ -39,19 +39,13 @@ export const Container: FC<ContainerProps> = ({
         >
           <Box variant="blockpagecontainer.createdbox.container">
             {doc?.date && (
-              <Fragment>
-                <Value label="created:" value={dateToLocalString(doc.date)} />
-                {doc?.dateModified && (
-                  <Text variant="blockpagecontainer.createdbox.separator">
-                    ,
-                  </Text>
-                )}
-              </Fragment>
+              <Value label="created:" value={dateToLocalString(doc.date)} />
             )}
             {doc?.dateModified && (
               <Value
                 label="updated:"
                 value={dateToLocalString(doc.dateModified)}
+                sx={{ ml: 2 }}
               />
             )}
             {author}

ui/blocks/src/test/storyStore.tsx

@@ -321,6 +321,17 @@ and a [link](https://google.com)
       request:
         '/Users/atanasster/component-controls/core/instrument/test/fixtures/components/button-named-arrow-func.js',
       fileInfo: {
+        sloc: {
+          total: 28,
+          source: 25,
+          comment: 1,
+          single: 0,
+          block: 1,
+          mixed: 0,
+          empty: 2,
+          todo: 5,
+          blockEmpty: 0,
+        },
         commits: [
           {
             committerName: 'hasparus',

ui/components/src/ThemeContext/theme.ts

@@ -67,6 +67,7 @@ export type ControlsTheme = {
   infotip: Record<string, ThemeUIStyleObject>;
   tree: Record<string, ThemeUIStyleObject>;
   pagination: Record<string, ThemeUIStyleObject>;
+  componentstats: Record<string, ThemeUIStyleObject>;
   sidebar: Record<string, ThemeUIStyleObject>;
   skiplinks: Record<string, ThemeUIStyleObject>;
   app: ThemeUIStyleObject;
@@ -491,11 +492,6 @@ export const theme: ControlsTheme = {
         flexDirection: ['column', 'row'],
         alignItems: ['flex-end', 'baseline'],
       },
-      separator: {
-        visibility: ['hidden', 'visible'],
-        height: [0],
-        mr: [0, 1],
-      },
     },
   },
   linkheading: {
@@ -961,6 +957,22 @@ export const theme: ControlsTheme = {
       maxWidth: '300px',
     },
   },
+  componentstats: {
+    responsive: {
+      display: 'flex',
+      flexDirection: ['column', 'row'],
+      alignItems: ['flex-end', 'baseline'],
+      justifyContent: 'space-between',
+      my: 1,
+    },
+    fixed: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'baseline',
+      justifyContent: 'space-between',
+      my: 1,
+    },
+  },
   sidebar: {
     default: {
       overflowX: 'hidden',