Merge pull request #28491 from MarioCadenas/add-ref-sourceurl

Composition: Add source url to ref api

code/core/src/manager/components/sidebar/Heading.stories.tsx

@@ -1,11 +1,10 @@
-/* eslint-disable storybook/use-storybook-testing-library */
 // @TODO: use addon-interactions and remove the rule disable above
 import React from 'react';
 import type { Meta, StoryObj, StoryFn } from '@storybook/react';
 import { ThemeProvider, useTheme } from '@storybook/core/theming';
 import type { Theme } from '@storybook/core/theming';
 import { action } from '@storybook/addon-actions';
-import { screen } from '@testing-library/dom';
+import { screen } from '@storybook/test';
 
 import { Heading } from './Heading';
 

code/core/src/manager/components/sidebar/RefIndicator.tsx

@@ -15,6 +15,7 @@ import {
   GlobeIcon,
   LightningIcon,
   LockIcon,
+  MarkupIcon,
   TimeIcon,
 } from '@storybook/icons';
 import type { RefType } from './types';
@@ -186,7 +187,10 @@ export const RefIndicator = React.memo(
                     <ErrorOccurredMessage url={ref.url} />
                   )}
                   {state === 'ready' && (
-                    <ReadyMessage {...{ url: ref.url, componentCount, leafCount }} />
+                    <>
+                      <ReadyMessage {...{ url: ref.url, componentCount, leafCount }} />
+                      {ref.sourceUrl && <SourceCodeMessage url={ref.sourceUrl} />}
+                    </>
                   )}
                   {state === 'auth' && <LoginRequiredMessage {...ref} />}
                   {ref.type === 'auto-inject' && state !== 'error' && (
@@ -254,6 +258,21 @@ const ReadyMessage: FC<{
   );
 };
 
+const SourceCodeMessage: FC<{
+  url?: string;
+}> = ({ url }) => {
+  const theme = useTheme();
+
+  return (
+    <Message href={url} target="_blank">
+      <MarkupIcon color={theme.color.secondary} />
+      <div>
+        <MessageTitle>View source code</MessageTitle>
+      </div>
+    </Message>
+  );
+};
+
 const LoginRequiredMessage: FC<RefType> = ({ loginUrl, id }) => {
   const theme = useTheme();
   const open = useCallback<MouseEventHandler>((e) => {

code/core/src/manager/components/sidebar/Refs.stories.tsx

@@ -133,6 +133,16 @@ const refs: Record<string, RefType> = {
     },
     previewInitialized: true,
   },
+  withSourceCode: {
+    id: 'sourceCode',
+    title: 'This has source code',
+    url: 'https://example.com',
+    sourceUrl: 'https://github.com/storybookjs/storybook',
+    previewInitialized: false,
+    type: 'lazy',
+    // @ts-expect-error (invalid input)
+    index,
+  },
 };
 
 export const Optimized = () => (
@@ -235,3 +245,14 @@ export const Long = () => (
     setHighlighted={() => {}}
   />
 );
+
+export const WithSourceCode = () => (
+  <Ref
+    {...refs.withSourceCode}
+    isLoading={false}
+    isBrowsing
+    selectedStoryId=""
+    highlightedRef={{ current: null }}
+    setHighlighted={() => {}}
+  />
+);

code/core/src/types/modules/api.ts

@@ -179,6 +179,7 @@ export interface API_ComposedRef extends API_LoadedRefData {
   versions?: API_Versions;
   loginUrl?: string;
   version?: string;
+  sourceUrl?: string;
   /** DO NOT USE THIS */
   internal_index?: StoryIndex;
 }
@@ -195,6 +196,7 @@ export type API_ComposedRefUpdate = Partial<
     | 'version'
     | 'indexError'
     | 'previewInitialized'
+    | 'sourceUrl'
     | 'internal_index'
   >
 >;

docs/_snippets/main-config-refs.md

@@ -8,6 +8,7 @@ export default {
       title: 'Storybook Design System',
       url: 'https://master--5ccbc373887ca40020446347.chromatic.com/',
       expanded: false, // Optional, true by default
+      sourceUrl: 'https://github.com/storybookjs/storybook', // Optional
     },
   },
 };
@@ -24,11 +25,11 @@ const config: StorybookConfig = {
     'design-system': {
       title: 'Storybook Design System',
       url: 'https://master--5ccbc373887ca40020446347.chromatic.com/',
-      expanded: false, // Optional, true by default
+      expanded: false, // Optional, true by default,
+      sourceUrl: 'https://github.com/storybookjs/storybook', // Optional
     },
   },
 };
 
 export default config;
 ```
-

docs/api/main-config/main-config-refs.mdx

@@ -11,8 +11,8 @@ Type:
 
 ```ts
 { [key: string]:
-  | { title: string; url: string; expanded?: boolean }
-  | (config: { title: string; url: string; expanded?: boolean }) => { title: string; url: string; expanded?: boolean }
+  | { title: string; url: string; expanded?: boolean, sourceUrl?: string }
+  | (config: { title: string; url: string; expanded?: boolean, sourceUrl: string }) => { title: string; url: string; expanded?: boolean, sourceUrl?: string }
   | { disable: boolean }
 }
 ```