feat: show full file source

blocks/core/src/Source/Source.tsx

@@ -60,7 +60,13 @@ export const themes: {
 };
 
 export interface SourceProps {
+  /**
+   * source for the story
+   */
   children?: string;
+  /**
+   * language to be used for syntax hilighting
+   */
   language?: Language;
   /**
    * prism theme passed from parent
@@ -84,6 +90,11 @@ export interface SourceProps {
    * any control values to render in place of props in the editor
    */
   controls?: LoadedComponentControls;
+
+  /**
+   * full file source code of the file where the story was declared
+   */
+  fileSource?: string;
 }
 
 export const Source: FC<SourceProps> = ({
@@ -93,6 +104,7 @@ export const Source: FC<SourceProps> = ({
   prettier: prettierOptions,
   args,
   controls,
+  fileSource,
 }) => {
   const [themeName, setThemeName] = React.useState<ThemeType>(
     parentTheme || 'nightowl-light',
@@ -101,6 +113,8 @@ export const Source: FC<SourceProps> = ({
   const [showMerged, setShowMerged] = React.useState<boolean>(
     !!controls && !!args,
   );
+  const [showFileSource, setShowFileSource] = React.useState<boolean>(false);
+
   const parameters: string[] | undefined = args
     ? getArgumentNames(args)
     : undefined;
@@ -115,6 +129,8 @@ export const Source: FC<SourceProps> = ({
   };
 
   const onMergeValues = () => setShowMerged(!showMerged);
+  const onShowFileSource = () => setShowFileSource(!showFileSource);
+
   const onCopy = (e: MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     setCopied(true);
@@ -123,6 +139,12 @@ export const Source: FC<SourceProps> = ({
   };
 
   const actions = [];
+  if (fileSource) {
+    actions.push({
+      title: showFileSource ? 'story code' : 'file code',
+      onClick: onShowFileSource,
+    });
+  }
   if (parentTheme === undefined) {
     actions.push({ title: themeName, onClick: onRotateTheme });
   }
@@ -141,18 +163,24 @@ export const Source: FC<SourceProps> = ({
         return color;
       })
     : [];
-  let code = typeof children === 'string' ? children : '';
-  if (showMerged && args && controls) {
-    code = mergeControlValues(code, args, controls);
+
+  let source: string;
+  if (!showFileSource) {
+    let code = typeof children === 'string' ? children : '';
+    if (showMerged && args && controls) {
+      code = mergeControlValues(code, args, controls);
+    }
+    source =
+      prettierOptions !== null
+        ? prettier.format(code, {
+            parser: 'babel',
+            plugins: [parserBabel],
+            ...prettierOptions,
+          })
+        : code;
+  } else {
+    source = fileSource || '';
   }
-  const source =
-    prettierOptions !== null
-      ? prettier.format(code, {
-          parser: 'babel',
-          plugins: [parserBabel],
-          ...prettierOptions,
-        })
-      : code;
   return (
     <BlockContainer>
       <Highlight

core/instrument/src/babel/csf-stories.ts

@@ -22,7 +22,7 @@ export const extractCSFStories = (stories: StoriesGroup) => {
       const el = declaration.init.body;
       const name = declaration.id.name;
       const story: Story = {
-        location: {
+        loc: {
           start: {
             column: el.loc.start.column,
             line: el.loc.start.line,

core/instrument/src/babel/get-function-parameters.ts

@@ -25,7 +25,7 @@ export const extractFunctionParameters = (story: Story) => ({
     if (!story.arguments) {
       story.arguments = [];
     }
-    story.location = {
+    story.loc = {
       start: {
         column: node.loc.start.column,
         line: node.loc.start.line,

core/instrument/src/babel/mdx-stories.ts

@@ -39,7 +39,7 @@ export const extractMDXStories = (stories: StoriesGroup) => {
         switch (node.name.name) {
           case 'Story': {
             const story: Story = {
-              location: {
+              loc: {
                 start: {
                   column: path.node.loc.start.column,
                   line: path.node.loc.start.line,

core/instrument/src/babel/utils.ts

@@ -4,22 +4,22 @@ export const adjustSourceLocation = (
   story: Story,
   loc: CodeLocation,
 ): CodeLocation => {
-  if (!story.location) {
+  if (!story.loc) {
     return loc;
   }
   return {
     start: {
-      line: loc.start.line - story.location.start.line,
+      line: loc.start.line - story.loc.start.line,
       column:
-        loc.start.line === story.location.start.line
-          ? loc.start.column - story.location.start.column
+        loc.start.line === story.loc.start.line
+          ? loc.start.column - story.loc.start.column
           : loc.start.column,
     },
     end: {
-      line: loc.end.line - story.location.start.line,
+      line: loc.end.line - story.loc.start.line,
       column:
-        loc.end.line === story.location.start.line
-          ? loc.end.column - story.location.start.column
+        loc.end.line === story.loc.start.line
+          ? loc.end.column - story.loc.start.column
           : loc.end.column,
     },
   };

core/instrument/src/index.ts

@@ -9,19 +9,24 @@ import { removeMDXAttributes } from './babel/remove-mdx-attributes';
 
 type TraverseFn = (stories: StoriesGroup) => any;
 
-const parseSource = (source: string, traverseFn: TraverseFn): StoriesGroup => {
+const parseSource = (
+  source: string,
+  traverseFn: TraverseFn,
+  originalSource: string,
+): StoriesGroup => {
   const ast = parser.parse(source, {
     sourceType: 'module',
     plugins: ['jsx', 'typescript'],
   });
   const stories = {
     stories: {},
+    source: originalSource,
   };
   traverse(ast, traverseFn(stories));
   Object.keys(stories.stories).forEach((key: string) => {
     //@ts-ignore
     const story: Story = stories.stories[key];
-    const { start, end } = story.location || {};
+    const { start, end } = story.loc || {};
     if (start && end) {
       const lines = source.split('\n');
 
@@ -47,7 +52,7 @@ const parseSource = (source: string, traverseFn: TraverseFn): StoriesGroup => {
 };
 
 export const parseCSF = async (source: string): Promise<StoriesGroup> => {
-  return parseSource(source, extractCSFStories);
+  return parseSource(source, extractCSFStories, source);
 };
 
 export const parseMDX = async (source: string): Promise<StoriesGroup> => {
@@ -62,5 +67,5 @@ export const parseMDX = async (source: string): Promise<StoriesGroup> => {
     retainFunctionParens: true,
     retainLines: true,
   });
-  return parseSource(newCode.code, extractMDXStories);
+  return parseSource(newCode.code, extractMDXStories, source);
 };

core/instrument/test/__snapshots__/csf-named-exports.test.js.snap

@@ -2,10 +2,18 @@
 
 exports[`csf-named-exports exported alias name 1`] = `
 Object {
+  "source": "
+const myStory = () => {};
+myStory.story = {
+ name: 'Custom story name',
+}
+
+export { myStory as exportedStory}
+    ",
   "stories": Object {
     "exportedStory": Object {
       "arguments": Array [],
-      "location": Object {
+      "loc": Object {
         "end": Object {
           "column": 24,
           "line": 2,
@@ -40,16 +48,33 @@ Object {
 
 exports[`csf-named-exports re-exported name 1`] = `
 Object {
+  "source": "
+import { myStory } from 'stories.tsx';
+myStory.story = {
+  name: 'Custom story name',
+};
+
+export { myStory };
+    
+    ",
   "stories": Object {},
 }
 `;
 
 exports[`csf-named-exports story propery name 1`] = `
 Object {
+  "source": "
+const myStory = () => {};
+myStory.story = {
+ name: 'Custom story name',
+}
+
+export { myStory }
+    ",
   "stories": Object {
     "myStory": Object {
       "arguments": Array [],
-      "location": Object {
+      "loc": Object {
         "end": Object {
           "column": 24,
           "line": 2,

core/instrument/test/__snapshots__/csf-parameters.test.js.snap

@@ -2,10 +2,17 @@
 
 exports[`csf-parameters story propery name 1`] = `
 Object {
+  "source": "
+export const myStory = () => {};
+myStory.story = {
+ name: 'Custom story name',
+}
+      
+    ",
   "stories": Object {
     "myStory": Object {
       "arguments": Array [],
-      "location": Object {
+      "loc": Object {
         "end": Object {
           "column": 31,
           "line": 2,
@@ -40,10 +47,23 @@ Object {
 
 exports[`csf-parameters story propery name and parameters 1`] = `
 Object {
+  "source": "
+export const myStory = () => {};
+myStory.story = {
+  name: 'Custom story name',
+  parameters: {
+    component: ControlsTable,
+    addonControls: {
+      smart: false,
+    }
+  },
+}
+      
+    ",
   "stories": Object {
     "myStory": Object {
       "arguments": Array [],
-      "location": Object {
+      "loc": Object {
         "end": Object {
           "column": 31,
           "line": 2,
@@ -136,10 +156,30 @@ Object {
 
 exports[`csf-parameters story propery name parameters and controls 1`] = `
 Object {
+  "source": "
+export const myStory = () => {};
+myStory.story = {
+  name: 'Custom story name',
+  parameters: {
+    controls: {
+      name: {
+        type: ControlTypes.TEXT,
+        label: 'Name',
+        value: 'Mark',
+        order: 9999,
+      },
+    },
+    addonControls: {
+      smart: false,
+    }
+  },
+}
+      
+    ",
   "stories": Object {
     "myStory": Object {
       "arguments": Array [],
-      "location": Object {
+      "loc": Object {
         "end": Object {
           "column": 31,
           "line": 2,