feat: repository info for stories file

examples/storybook-5/.storybook/main.js

@@ -21,6 +21,7 @@ module.exports = {
     '../../../ui/editors/src/**/*.stories.(js|tsx|mdx)',
     '../../../ui/components/src/**/*.stories.(js|tsx|mdx)',
     '../../../ui/block-components/src/**/*.stories.(js|tsx|mdx)',
+    '../../../ui/blocks/src/**/*.stories.(js|tsx|mdx)',
     '../src/**/*.stories.(js|tsx|mdx)',
   ],
   addons: [

integrations/storybook/package.json

@@ -62,7 +62,6 @@
     "@storybook/addons": "*",
     "@storybook/api": "*",
     "@storybook/client-api": "*",
-    "@storybook/csf": "*",
     "@storybook/react": "*",
     "@storybook/theming": "*",
     "polished": "*",

integrations/storybook/src/blocks/BlockContext.tsx

@@ -1,37 +1,17 @@
 import React from 'react';
-import { toId, storyNameFromExport } from '@storybook/csf';
 import { BlockContext } from '@component-controls/blocks';
 import { DocsContext } from '@storybook/addon-docs/blocks';
 
 export const BlockContextProvider: React.FC = ({ children }) => {
   const context = React.useContext(DocsContext);
-  const {
-    id: currentId,
-    clientApi,
-    storyStore,
-    mdxStoryNameToKey,
-    mdxComponentMeta,
-    channel,
-  } = context as any;
+  const { id: currentId, clientApi, storyStore, channel } = context as any;
 
-  const storyIdFromName = (name?: string): string | undefined => {
-    return (
-      mdxStoryNameToKey &&
-      mdxComponentMeta &&
-      name &&
-      toId(
-        mdxComponentMeta.id || mdxComponentMeta.title,
-        storyNameFromExport(mdxStoryNameToKey[name]),
-      )
-    );
-  };
   return (
     <BlockContext.Provider
       value={{
         api: clientApi,
         currentId,
         channel,
-        storyIdFromName,
         storyStore,
       }}
     >

ui/block-components/src/StorySource/StorySource.tsx

@@ -62,6 +62,7 @@ export const StorySource: FC<StorySourceProps> = ({
   fileSource,
   children,
   args,
+  actions = [],
   ...rest
 }) => {
   const [viewStyle, setViewStyle] = React.useState<ViewStyle>('tags');
@@ -77,15 +78,15 @@ export const StorySource: FC<StorySourceProps> = ({
     );
   const onShowFileSource = () => setShowFileSource(!showFileSource);
 
-  const actions = [];
+  const allActions = [...actions];
   if (fileSource) {
-    actions.push({
+    allActions.push({
       title: showFileSource ? 'story code' : 'file code',
       onClick: onShowFileSource,
     });
   }
   if (args && args.length) {
-    actions.push({ title: viewStyle, onClick: onMergeValues });
+    allActions.push({ title: viewStyle, onClick: onMergeValues });
   }
 
   let source: string;
@@ -102,7 +103,7 @@ export const StorySource: FC<StorySourceProps> = ({
     <TaggedSource
       {...rest}
       args={viewStyle === 'tags' && !showFileSource ? args : undefined}
-      actions={actions}
+      actions={allActions}
     >
       {source}
     </TaggedSource>

ui/blocks/package.json

@@ -34,6 +34,7 @@
     "@component-controls/core": "^0.6.0",
     "@component-controls/editors": "^0.6.0",
     "@component-controls/specification": "^0.6.0",
+    "@storybook/csf": "^0.0.1",
     "copy-to-clipboard": "^3.2.1",
     "react": "^16.8.3",
     "react-dom": "^16.8.3",

ui/blocks/src/BlocksContext/BlockContext.tsx

@@ -7,20 +7,16 @@ import {
   StoryComponent,
 } from '@component-controls/specification';
 import { LoadedComponentControls } from '@component-controls/core';
+import { toId, storyNameFromExport } from '@storybook/csf';
 
 export const CURRENT_SELECTION = '.';
 export interface BlockContextProps {
   api?: any;
-  channel: any;
+  channel?: any;
   currentId?: string;
-  storyStore: any;
-  storyIdFromName: (name?: string) => string | undefined;
+  storyStore?: any;
 }
-export const BlockContext = React.createContext<BlockContextProps>({
-  channel: {},
-  storyStore: {},
-  storyIdFromName: name => name,
-});
+export const BlockContext = React.createContext<BlockContextProps>({});
 
 export interface ControlsContextInputProps {
   /** id of the story */
@@ -45,22 +41,31 @@ export const useControlsContext = ({
   id,
   name,
 }: ControlsContextInputProps): ControlsContextProps => {
-  const {
-    currentId,
-    storyStore,
-    storyIdFromName,
-    api,
-    channel,
-  } = React.useContext(BlockContext);
+  const { currentId, storyStore, api, channel } = React.useContext(
+    BlockContext,
+  );
   const inputId = id === CURRENT_SELECTION ? currentId : id;
-  const previewId = inputId || storyIdFromName(name);
+
+  const storyIdFromName = (name: string): string | undefined => {
+    const kinds = Object.keys(myStoryStore.kinds);
+    for (let i = 0; i < kinds.length; i += 1) {
+      const title = kinds[i];
+      const storyId = toId(title, storyNameFromExport(name));
+      if (myStoryStore.kinds[title].stories.indexOf(storyId) > -1) {
+        return storyId;
+      }
+    }
+    return undefined;
+  };
+
+  const previewId = inputId || (name && storyIdFromName(name));
   if (!previewId) {
     return {
       api,
       channel,
     };
   }
-  const story = storyStore.fromId(previewId) || {};
+  const story = (storyStore && storyStore.fromId(previewId)) || {};
   // console.log(myStoryStore);
   const myStory: Story = myStoryStore && myStoryStore.stories[previewId];
   const kind =
@@ -81,6 +86,6 @@ export const useControlsContext = ({
     kind,
     component,
     args: myStory.arguments,
-    controls: story.controls || story.parameters.controls,
+    controls: story.controls || (story.parameters && story.parameters.controls),
   };
 };

ui/blocks/src/StorySource/StorySource.stories.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { StorySource } from './StorySource';
+export default {
+  title: 'Blocks/Core/StorySource',
+  component: StorySource,
+};
+
+export const simple = () => (
+  <StorySource id="blocks-core-storysource--simple" />
+);

ui/blocks/src/StorySource/StorySource.tsx

@@ -3,6 +3,7 @@ import {
   StorySource as BaseStorySource,
   StorySourceProps as BaseStorySourceProps,
 } from '@component-controls/block-components';
+import { Link, LinkProps } from 'theme-ui';
 import {
   useControlsContext,
   ControlsContextInputProps,
@@ -11,18 +12,51 @@ import { ThemeContext } from '../ThemeContext';
 
 export type StorySourceProps = ControlsContextInputProps & BaseStorySourceProps;
 
-export const StorySource: FC<StorySourceProps> = ({ id, name, ...rest }) => {
+const ExternalLink = (props: LinkProps) => (
+  <Link {...props} target="_blank" rel="noopener noreferrer" />
+);
+export const StorySource: FC<StorySourceProps> = ({
+  id,
+  name,
+  actions = [],
+  ...rest
+}) => {
   const { source, controls, args, kind } = useControlsContext({
     id,
     name,
   });
   const { dark } = React.useContext(ThemeContext);
+  const allActions = [...actions];
+  if (kind) {
+    const { repository } = kind;
+    if (repository) {
+      const { browse, docs, issues } = repository;
+      console.log(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>,
+        });
+      }
+    }
+  }
+
   return (
     <BaseStorySource
       dark={dark}
       controls={controls}
       args={args}
       fileSource={kind ? kind.source : undefined}
+      actions={allActions}
       {...rest}
     >
       {source}

ui/components/src/ActionBar/ActionBar.tsx

@@ -56,8 +56,8 @@ export const ActionButton = styled.button<ActionButtonProps>(
 ActionButton.displayName = 'ActionButton';
 
 export interface ActionItem {
-  title: string | JSX.Element;
-  onClick: (e: MouseEvent<HTMLButtonElement>) => void;
+  title: React.ReactNode;
+  onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
   disabled?: boolean;
 }