feat: block component CommitsPopover

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

Hide file tree

Showing 6 changed files with 91 additions and 42 deletions.
diff --git a/plugins/addon-catalog/src/ComponentCard/ComponentCard.tsx b/plugins/addon-catalog/src/ComponentCard/ComponentCard.tsx
@@ -8,6 +8,7 @@ import {
   PackageLink,
   ComponentContributors,
   ComponentStats,
+  CommitsPopover,
   getStoryTitle,
 } from '@component-controls/blocks';
 import {
@@ -68,9 +69,20 @@ export const ComponentCard: FC<ComponentCardProps & BoxProps> = ({
           <ComponentContributors component={component} />
         </div>
       </div>
-      {pckg && pckg.privateNpm !== true && (
-        <PackageLink name={pckg.name as string} version={pckg.version} />
-      )}
+      <div
+        sx={{
+          display: 'flex',
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+        }}
+      >
+        {pckg && pckg.privateNpm !== true ? (
+          <PackageLink name={pckg.name as string} version={pckg.version} />
+        ) : (
+          <div />
+        )}
+        <CommitsPopover component={component} />
+      </div>
 
       <div sx={{ borderBottom: '1px solid rgba(0, 0, 0, 0.125)', my: 2 }} />
       {description && <Markdown>{description}</Markdown>}

diff --git a/ui/blocks/src/CommitsPopover/CommitsPopover.stories.tsx b/ui/blocks/src/CommitsPopover/CommitsPopover.stories.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Document, Example } from '@component-controls/core';
+import { CommitsPopover } from './CommitsPopover';
+import { store } from '../test/storyStore';
+
+export default {
+  title: 'Blocks/CommitsPopover',
+  component: CommitsPopover,
+  category: ' Component',
+} as Document;
+
+export const overview: Example = () => (
+  <CommitsPopover component={store.components['Control']} />
+);
diff --git a/ui/blocks/src/CommitsPopover/CommitsPopover.tsx b/ui/blocks/src/CommitsPopover/CommitsPopover.tsx
@@ -0,0 +1,56 @@
+/** @jsx jsx */
+import { FC } from 'react';
+import { jsx, Box, Link } from 'theme-ui';
+import { Component } from '@component-controls/core';
+import { Popover, Value } from '@component-controls/components';
+import { BaseComponentCommits } from '../ComponentCommits';
+
+export interface CommmitsPopoverProps {
+  /**
+   * component that will be displayed the commits
+   */
+  component?: Component;
+}
+
+/**
+ * link displaying the total commits on a component
+ * with a popover on click that will display the list of commits
+ */
+export const CommitsPopover: FC<CommmitsPopoverProps> = ({ component }) => {
+  return !!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>
+  ) : null;
+};
diff --git a/ui/blocks/src/CommitsPopover/index.ts b/ui/blocks/src/CommitsPopover/index.ts
@@ -0,0 +1 @@
+export * from './CommitsPopover';
diff --git a/ui/blocks/src/ComponentStats/ComponentStats.tsx b/ui/blocks/src/ComponentStats/ComponentStats.tsx
@@ -1,9 +1,9 @@
 /** @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';
+import { CommitsPopover } from '../CommitsPopover';
 
 export const ComponentStats: FC<{ component?: Component } & BoxProps> = ({
   component,
@@ -25,42 +25,7 @@ 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>
-      )}
+      <CommitsPopover component={component} />
       <Value sx={{ mx: 1 }} label="source lines:" value={stats.source} />
       <Value
         label="comments %:"

diff --git a/ui/blocks/src/index.ts b/ui/blocks/src/index.ts
@@ -1,5 +1,6 @@
 export * from './BlockContainer';
 export * from './context';
+export * from './CommitsPopover';
 export * from './ComponentContributors';
 export * from './ComponentDependencies';
 export * from './ComponentCommits';