feat: repository actions for ComponentSource

examples/storybook-5/.storybook/preview.js

@@ -25,9 +25,9 @@ export const DocsPage = ({
       <Subtitle slot={subtitleSlot} />
       <SBDescription slot={descriptionSlot} />
       <Description slot={descriptionSlot} />
-      <ComponentSource id="." title='Import component' />
+      <ComponentSource id="." title='Component source' />
       <Story id="." />
-      <StorySource id="." title='Source code'/>
+      <StorySource id="." title='Story source'/>
       <ControlsTable id="." />
       <Props slot={propsSlot} />
       <DependenciesTable titleDependencies='Dependencies' titleDependents='Dependents' />

ui/blocks/src/ComponentSource/ComponentSource.tsx

@@ -1,16 +1,19 @@
 import React, { FC } from 'react';
+import { ActionItem } from '@component-controls/components';
 import {
   Source as SourceBlock,
   SourceProps,
 } from '@component-controls/block-components';
 import { useControlsContext, StoryInputProps } from '../BlocksContext';
 import { ThemeContext } from '../ThemeContext';
+import { repositoryActions } from '../utils/repositoryActions';
 
 export type ComponentSourceProps = StoryInputProps & SourceProps;
 
 export const ComponentSource: FC<ComponentSourceProps> = ({
   id,
   name,
+  actions,
   ...rest
 }) => {
   const { component } = useControlsContext({
@@ -22,8 +25,17 @@ export const ComponentSource: FC<ComponentSourceProps> = ({
     return null;
   }
   const { dark } = React.useContext(ThemeContext);
+  console.log(component);
+  const allActions: ActionItem[] = [];
+  if (actions) {
+    allActions.push.apply(allActions, actions);
+  }
+  const repositoryItems = component && repositoryActions(component?.repository);
+  if (repositoryItems) {
+    allActions.push.apply(allActions, repositoryItems);
+  }
   return (
-    <SourceBlock dark={dark} {...rest}>
+    <SourceBlock dark={dark} {...rest} actions={allActions}>
       {source}
     </SourceBlock>
   );

ui/blocks/src/StorySource/StorySource.tsx

@@ -3,15 +3,12 @@ import {
   StorySource as BaseStorySource,
   StorySourceProps as BaseStorySourceProps,
 } from '@component-controls/block-components';
-import { Link, LinkProps } from 'theme-ui';
 import { useControlsContext, StoryInputProps } from '../BlocksContext';
 import { ThemeContext } from '../ThemeContext';
+import { repositoryActions } from '../utils/repositoryActions';
 
 export type StorySourceProps = StoryInputProps & BaseStorySourceProps;
 
-const ExternalLink = (props: LinkProps) => (
-  <Link {...props} target="_blank" rel="noopener noreferrer" />
-);
 export const StorySource: FC<StorySourceProps> = ({
   id,
   name,
@@ -24,28 +21,10 @@ export const StorySource: FC<StorySourceProps> = ({
   });
   const { dark } = React.useContext(ThemeContext);
   const allActions = [...actions];
-  if (kind) {
-    const { repository } = kind;
-    if (repository) {
-      const { browse, docs, issues } = repository;
-      if (browse) {
-        allActions.push({
-          title: <ExternalLink href={browse}>browse</ExternalLink>,
-        });
-      }
-      if (docs) {
-        allActions.push({
-          title: <ExternalLink href={docs}>docs</ExternalLink>,
-        });
-      }
-      if (issues) {
-        allActions.push({
-          title: <ExternalLink href={issues}>issues</ExternalLink>,
-        });
-      }
-    }
+  const repositoryItems = kind && repositoryActions(kind?.repository);
+  if (repositoryItems) {
+    allActions.push.apply(allActions, repositoryItems);
   }
-
   return (
     <BaseStorySource
       dark={dark}

ui/blocks/src/utils/repositoryActions.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Repository } from '@component-controls/specification';
+import { ActionItem, ExternalLink } from '@component-controls/components';
+
+export const repositoryActions = (
+  repository?: Repository,
+): ActionItem[] | undefined => {
+  if (repository) {
+    const { browse, docs, issues } = repository;
+    if (browse || docs || issues) {
+      const actions: ActionItem[] = [];
+      if (browse) {
+        actions.push({
+          title: <ExternalLink href={browse}>browse</ExternalLink>,
+        });
+      }
+      if (docs) {
+        actions.push({
+          title: <ExternalLink href={docs}>docs</ExternalLink>,
+        });
+      }
+      if (issues) {
+        actions.push({
+          title: <ExternalLink href={issues}>issues</ExternalLink>,
+        });
+      }
+      return actions;
+    }
+  }
+  return undefined;
+};

ui/components/src/ExternalLink/ExternalLink.tsx

@@ -0,0 +1,8 @@
+import React, { FC } from 'react';
+import { Link, LinkProps } from 'theme-ui';
+
+export type ExternalLinkProps = LinkProps;
+
+export const ExternalLink: FC<ExternalLinkProps> = (props: LinkProps) => (
+  <Link {...props} target="_blank" rel="noopener noreferrer" />
+);

ui/components/src/ExternalLink/index.ts

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

ui/components/src/index.ts

@@ -1,4 +1,5 @@
 export * from './ActionBar';
+export * from './ExternalLink';
 export * from './FlexContainer';
 export * from './Popover';
 export * from './Tabs';