feat: create BaseComponentCommits component and display it when user …

…hovers over commits

ui/blocks/src/ComponentCommits/BaseComponentCommits.tsx

@@ -0,0 +1,95 @@
+/* eslint-disable react/display-name */
+/** @jsx jsx */
+import { FC, useMemo } from 'react';
+import { jsx } from 'theme-ui';
+import { Column } from 'react-table';
+import { Table, TableProps } from '@component-controls/components';
+import { useConfig } from '@component-controls/store';
+import { Commit, Component, dateToLocalString } from '@component-controls/core';
+import { GithubAvatar } from '@component-controls/components';
+
+export type BaseComponentCommitsProps = {
+  component?: Component;
+  pagination?: TableProps<Commit>['pagination'];
+};
+
+/**
+ * Displays commit history for a component
+ */
+export const BaseComponentCommits: FC<BaseComponentCommitsProps> = ({
+  component,
+  pagination = true,
+}) => {
+  const config = useConfig();
+  const { tokens } = config;
+
+  console.log(component);
+
+  const columns = useMemo(
+    () =>
+      [
+        {
+          Header: 'Date',
+          accessor: 'authorDate',
+          Cell: ({
+            row: {
+              original: { authorDate },
+            },
+          }) => (
+            <span>
+              {authorDate ? dateToLocalString(new Date(authorDate)) : 'N/A'}
+            </span>
+          ),
+        },
+        {
+          Header: 'Author',
+          accessor: 'authorName',
+          Cell: ({
+            row: {
+              original: { authorName },
+            },
+          }) => {
+            return authorName ? (
+              <div style={{ display: 'flex' }}>
+                <p style={{ paddingRight: '10px' }}>{authorName}</p>
+                <GithubAvatar
+                  username={authorName}
+                  size={22}
+                  githubAccessToken={tokens?.githubAccessToken}
+                />
+              </div>
+            ) : null;
+          },
+        },
+        {
+          Header: 'Commit Message',
+          accessor: 'subject',
+          Cell: ({
+            row: {
+              original: { subject },
+            },
+          }) => <p>{subject}</p>,
+        },
+      ] as Column<Commit>[],
+    [],
+  );
+
+  if (!component?.fileInfo?.commits) {
+    return null;
+  }
+
+  return (
+    <Table<Commit>
+      sorting={true}
+      data={component.fileInfo.commits}
+      columns={columns}
+      sortBy={[
+        {
+          id: 'authorDate',
+          desc: true,
+        },
+      ]}
+      pagination={pagination}
+    />
+  );
+};

ui/blocks/src/ComponentCommits/ComponentCommits.tsx

@@ -1,122 +1,43 @@
 /* eslint-disable react/display-name */
 /** @jsx jsx */
-import { FC, useMemo } from 'react';
+import { FC } from 'react';
 import { jsx } from 'theme-ui';
-import { Column } from 'react-table';
 import {
   BlockContainer,
   BlockContainerProps,
-  Table,
 } from '@component-controls/components';
+import { StoryInputProps, useStoryComponent } from '@component-controls/store';
 import {
-  StoryInputProps,
-  useConfig,
-  useStoryComponent,
-} from '@component-controls/store';
-import { Commit, Component, dateToLocalString } from '@component-controls/core';
-import { GithubAvatar } from '@component-controls/components';
+  BaseComponentCommits,
+  BaseComponentCommitsProps,
+} from './BaseComponentCommits';
 import { useCustomProps } from '../context';
 
 export type ComponentCommitsProps = BlockContainerProps &
-  StoryInputProps & { storeComponent?: Component };
+  StoryInputProps &
+  Pick<BaseComponentCommitsProps, 'pagination'>;
 
 /**
  * Displays commit history for a component
  */
 export const ComponentCommits: FC<ComponentCommitsProps> = ({
   id,
   name,
-  storeComponent,
+  pagination,
   ...rest
 }) => {
   const props = useCustomProps<ComponentCommitsProps>('commits', rest);
-  const component = storeComponent
-    ? storeComponent
-    : useStoryComponent({ id, name });
-
-  const config = useConfig();
-  const { tokens } = config;
+  const component = useStoryComponent({ id, name });
 
   console.log(component);
 
-  const columns = useMemo(
-    () =>
-      [
-        {
-          Header: 'Date',
-          accessor: 'authorDate',
-          Cell: ({
-            row: {
-              original: { authorDate },
-            },
-          }) => (
-            <span>
-              {authorDate ? dateToLocalString(new Date(authorDate)) : 'N/A'}
-            </span>
-          ),
-        },
-        {
-          Header: 'Author',
-          accessor: 'authorName',
-          Cell: ({
-            row: {
-              original: { authorName },
-            },
-          }) => {
-            return authorName ? (
-              <div style={{ display: 'flex' }}>
-                <p style={{ paddingRight: '10px' }}>{authorName}</p>
-                <GithubAvatar
-                  username={authorName}
-                  size={22}
-                  githubAccessToken={tokens?.githubAccessToken}
-                />
-              </div>
-            ) : null;
-          },
-        },
-        {
-          Header: 'Commit Message',
-          accessor: 'subject',
-          Cell: ({
-            row: {
-              original: { subject },
-            },
-          }) => <p>{subject}</p>,
-        },
-      ] as Column<Commit>[],
-    [],
-  );
-
   if (!component?.fileInfo?.commits) {
     return null;
   }
 
-  const paginationProps = {
-    pageIndex: 0,
-    pageSize: 10,
-    pageTemplate: 'Page ${pageIndex} of ${pageLength}',
-    pageVisible: true,
-    pageSizeTemplate: '${pageSize} rows',
-    pageSizeVisible: true,
-    goToPageVisible: true,
-    goToPageTemplate: 'Go to page:',
-  };
-
   return (
     <BlockContainer {...props}>
-      <Table<Commit>
-        sorting={true}
-        data={component.fileInfo.commits}
-        columns={columns}
-        sortBy={[
-          {
-            id: 'authorDate',
-            desc: true,
-          },
-        ]}
-        pagination={paginationProps}
-      />
+      <BaseComponentCommits component={component} pagination={pagination} />
     </BlockContainer>
   );
 };

ui/blocks/src/ComponentCommits/index.ts

@@ -1 +1,2 @@
+export * from './BaseComponentCommits';
 export * from './ComponentCommits';

ui/blocks/src/ComponentStats/ComponentStats.tsx

@@ -2,7 +2,8 @@
 import { FC } from 'react';
 import { jsx, BoxProps } from 'theme-ui';
 import { Component } from '@component-controls/core';
-import { Value } from '@component-controls/components';
+import { Popover, Value } from '@component-controls/components';
+import { BaseComponentCommits } from '../ComponentCommits';
 
 export const ComponentStats: FC<{ component?: Component } & BoxProps> = ({
   component,
@@ -25,7 +26,18 @@ export const ComponentStats: FC<{ component?: Component } & BoxProps> = ({
       {...rest}
     >
       {!!component.fileInfo?.commits?.length && (
-        <Value label="commits:" value={component.fileInfo?.commits?.length} />
+        <Popover
+          trigger="hover"
+          placement="auto"
+          tooltip={() => (
+            <BaseComponentCommits
+              component={component}
+              pagination={{ pageSize: 3 }}
+            />
+          )}
+        >
+          <Value label="commits:" value={component.fileInfo?.commits?.length} />
+        </Popover>
       )}
       <Value sx={{ mx: 1 }} label="source lines:" value={stats.source} />
       <Value

ui/blocks/src/test/storyStore.tsx

@@ -340,6 +340,60 @@ and a [link](https://google.com)
             authorDate: '2021-02-21T22:48:26.000Z',
             subject: 'first commit!',
           },
+          {
+            committerName: 'atanasster',
+            authorName: 'atanasster',
+            authorDate: '2021-02-21T22:48:26.000Z',
+            subject: 'first commit!',
+          },
+          {
+            committerName: 'atanasster',
+            authorName: 'atanasster',
+            authorDate: '2021-02-21T22:48:26.000Z',
+            subject: 'first commit!',
+          },
+          {
+            committerName: 'atanasster',
+            authorName: 'atanasster',
+            authorDate: '2021-02-21T22:48:26.000Z',
+            subject: 'first commit!',
+          },
+          {
+            committerName: 'atanasster',
+            authorName: 'atanasster',
+            authorDate: '2021-02-21T22:48:26.000Z',
+            subject: 'first commit!',
+          },
+          {
+            committerName: 'atanasster',
+            authorName: 'atanasster',
+            authorDate: '2021-02-21T22:48:26.000Z',
+            subject: 'first commit!',
+          },
+          {
+            committerName: 'atanasster',
+            authorName: 'atanasster',
+            authorDate: '2021-02-21T22:48:26.000Z',
+            subject: 'first commit!',
+          },
+          {
+            committerName: 'atanasster',
+            authorName: 'atanasster',
+            authorDate: '2021-02-21T22:48:26.000Z',
+            subject: 'first commit!',
+          },
+          {
+            committerName: 'atanasster',
+            authorName: 'atanasster',
+            authorDate: '2021-02-21T22:48:26.000Z',
+            subject: 'first commit!',
+          },
+          {
+            committerName: 'atanasster',
+            authorName: 'atanasster',
+            authorDate: '2021-02-21T22:48:26.000Z',
+            subject: 'first commit!',
+          },
         ],
       },
       info: {