feat: display commit date and author in table

examples/gatsby/.config/runtime.tsx

@@ -38,6 +38,11 @@ const config: RunOnlyConfiguration = {
       contextSidebar: true,
     },
   },
+  components: {
+    commits: {
+      title: 'Contributors',
+    },
+  },
   storySort: (a, b) => {
     const aDoc = a.split('/')[0];
     const aIndex = categories.findIndex(c => c === aDoc);

ui/blocks/src/ComponentCommits/ComponentCommits.tsx

@@ -0,0 +1,60 @@
+/* eslint-disable react/display-name */
+/** @jsx jsx */
+import { FC, useMemo } from 'react';
+import { jsx } from 'theme-ui';
+import {
+  BlockContainer,
+  BlockContainerProps,
+  Table,
+} from '@component-controls/components';
+import { dateToLocalString } from '@component-controls/core';
+import { StoryInputProps, useStoryComponent } from '@component-controls/store';
+import { useCustomProps } from '../context';
+
+export type ComponentCommitsProps = BlockContainerProps & StoryInputProps;
+
+/**
+ * Displays commit history for a component
+ */
+export const ComponentCommits: FC<ComponentCommitsProps> = ({
+  id,
+  name,
+  ...rest
+}) => {
+  const props = useCustomProps<ComponentCommitsProps>('commits', rest);
+  const component = useStoryComponent({ id, name });
+
+  const data = useMemo(
+    () =>
+      component?.fileInfo?.commits?.map(i => {
+        return {
+          date: i.committerDate
+            ? dateToLocalString(new Date(i.committerDate))
+            : 'N/A',
+          username: i.authorName,
+        };
+      }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
+
+  const columns = useMemo(
+    () =>
+      [
+        {
+          Header: 'Datee',
+          accessor: 'date',
+        },
+        {
+          Header: 'User Name',
+          accessor: 'username',
+        },
+      ] as any[],
+    [],
+  );
+  return (
+    <BlockContainer {...props}>
+      <Table data={data} columns={columns} />
+    </BlockContainer>
+  );
+};

ui/blocks/src/ComponentCommits/index.ts

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

ui/blocks/src/index.ts

@@ -2,6 +2,7 @@ export * from './BlockContainer';
 export * from './context';
 export * from './ComponentContributors';
 export * from './ComponentDependencies';
+export * from './ComponentCommits';
 export * from './ComponentJSX';
 export * from './ComponentSource';
 export * from './ComponentStats';

ui/pages/src/pages/ClassicPage.tsx

@@ -10,6 +10,7 @@ import {
   LocalDependencies,
   ComponentJSX,
   ComponentSource,
+  ComponentCommits,
   PropsTable,
   PackageVersion,
 } from '@component-controls/blocks';
@@ -33,6 +34,7 @@ const ClassicPage: FC<TabConfiguration> = ({ controlsThreshold = 10 }) => {
     <Fragment>
       <PackageVersion />
       <Description />
+      <ComponentCommits id="." title="Commits" />
       <ComponentSource id="." title="Component" />
       <Playground title=".">
         <Story id="." />