Merge pull request #64 from storybookjs/fix-comment-in-code-section

Fix comment in code section
storybookjs · Jun 20, 2023 · b540c5d · b540c5d
2 parents 9e827bc + 6b784e7
commit b540c5d
Show file tree

Hide file tree

Showing 6 changed files with 139 additions and 131 deletions.
diff --git a/src/components/SyntaxHighlighter/SyntaxHighlighter.stories.tsx b/src/components/SyntaxHighlighter/SyntaxHighlighter.stories.tsx
@@ -85,6 +85,7 @@ export const Default: Story = {
     data: data,
     activeStep: 0,
     width: 480,
+    filename: "Button.stories.tsx",
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
@@ -111,7 +112,7 @@ export const Default: Story = {
     ).toBeInTheDocument();
 
     await userEvent.click(nextButton);
-    
+
     await expect(
       firstElement.closest('[aria-hidden="true"]')
     ).toBeInTheDocument();

diff --git a/src/components/SyntaxHighlighter/SyntaxHighlighter.tsx b/src/components/SyntaxHighlighter/SyntaxHighlighter.tsx
@@ -20,6 +20,7 @@ type SyntaxHighlighterProps = {
   data: { code: string; toggle?: boolean }[][];
   activeStep: number;
   width: number;
+  filename: string;
 };
 
 type StepsProps = {
@@ -33,6 +34,7 @@ export const SyntaxHighlighter = ({
   activeStep,
   data,
   width,
+  filename,
 }: SyntaxHighlighterProps) => {
   const [steps, setSteps] = useState<StepsProps[]>([]);
 
@@ -108,7 +110,7 @@ export const SyntaxHighlighter = ({
               language="typescript"
               customStyle={customStyle}
             >
-              // Button.stories.tsx
+              {"// " + filename}
             </StorybookSyntaxHighlighter>
           </SnippetWrapperFirst>
           {data.map((content, idx: number) => (

diff --git a/src/features/WriteStoriesModal/WriteStoriesModal.tsx b/src/features/WriteStoriesModal/WriteStoriesModal.tsx
@@ -89,7 +89,7 @@ export const WriteStoriesModal: FC<WriteStoriesModalProps> = ({
     : dataTypescript;
 
   const copyWarningStory = () => {
-    const warningContent = data[3][0].code;
+    const warningContent = data.code[3][0].code;
     navigator.clipboard.writeText(
       warningContent.replace("// Copy the code below", "")
     );
@@ -111,8 +111,9 @@ export const WriteStoriesModal: FC<WriteStoriesModalProps> = ({
           {data ? (
             <SyntaxHighlighter
               activeStep={stepIndex[step] || 0}
-              data={data}
+              data={data.code}
               width={480}
+              filename={data.filename}
             />
           ) : null}
           {step === "customStory" &&

diff --git a/src/features/WriteStoriesModal/code/javascript.tsx b/src/features/WriteStoriesModal/code/javascript.tsx
@@ -1,45 +1,43 @@
-export default [
-  [
-    {
-      code: `// Button.stories.jsx`,
-    },
-  ],
-  [
-    {
-      code: `import { Button } from './Button';`,
-    },
-  ],
-  [
-    {
-      code: `export default {
+export default {
+  filename: "Button.stories.jsx",
+  code: [
+    [
+      {
+        code: `import { Button } from './Button';`,
+      },
+    ],
+    [
+      {
+        code: `export default {
       title: 'Example/Button',
       component: Button,
       // ...
     };`,
-    },
-  ],
-  [
-    { code: `export const Primary = {` },
-    {
-      code: `args: {
+      },
+    ],
+    [
+      { code: `export const Primary = {` },
+      {
+        code: `args: {
         primary: true,
         label: 'Click',
         background: 'red'
       }`,
-      toggle: true,
-    },
-    { code: `};` },
-  ],
-  [
-    {
-      code: `// Copy the code below
+        toggle: true,
+      },
+      { code: `};` },
+    ],
+    [
+      {
+        code: `// Copy the code below
 export const Warning = {
   args: {
     primary: true,
     label: 'Delete now',
     backgroundColor: 'red',
   }
 };`,
-    },
+      },
+    ],
   ],
-];
+};
diff --git a/src/features/WriteStoriesModal/code/nextjs-typescript.tsx b/src/features/WriteStoriesModal/code/nextjs-typescript.tsx
@@ -1,53 +1,56 @@
-export default [
-  [
-    {
-      code: `// Button.stories.tsx`,
-    },
+export default {
+  filename: "Button.stories.tsx",
+  code: [
+    [
+      {
+        code: `// Button.stories.tsx`,
+      },
+    ],
+    [
+      {
+        code: `import type { Meta, StoryObj } from '@storybook/nextjs';
+      
+      import { Button } from './Button';`,
+      },
+    ],
+    [
+      {
+        code: `const meta: Meta<typeof Button> = {
+        title: 'Example/Button',
+        component: Button,
+        // ...
+      };
+          
+      export default meta;`,
+      },
+    ],
+    [
+      {
+        code: `type Story = StoryObj<Button>;
+      
+      export const Primary: Story = {`,
+      },
+      {
+        code: `args: {
+          primary: true,
+          label: 'Click',
+          background: 'red'
+        }`,
+        toggle: true,
+      },
+      { code: `};` },
+    ],
+    [
+      {
+        code: `// Copy the code below
+  export const Warning: Story = {
+    args: {
+      primary: true,
+      label: 'Delete now',
+      backgroundColor: 'red',
+    }
+  };`,
+      },
+    ],
   ],
-  [
-    {
-      code: `import type { Meta, StoryObj } from '@storybook/nextjs';
-    
-    import { Button } from './Button';`,
-    },
-  ],
-  [
-    {
-      code: `const meta: Meta<typeof Button> = {
-      title: 'Example/Button',
-      component: Button,
-      // ...
-    };
-        
-    export default meta;`,
-    },
-  ],
-  [
-    {
-      code: `type Story = StoryObj<Button>;
-    
-    export const Primary: Story = {`,
-    },
-    {
-      code: `args: {
-        primary: true,
-        label: 'Click',
-        background: 'red'
-      }`,
-      toggle: true,
-    },
-    { code: `};` },
-  ],
-  [
-    {
-      code: `// Copy the code below
-export const Warning: Story = {
-  args: {
-    primary: true,
-    label: 'Delete now',
-    backgroundColor: 'red',
-  }
-};`,
-    },
-  ],
-];
+};
diff --git a/src/features/WriteStoriesModal/code/typescript.tsx b/src/features/WriteStoriesModal/code/typescript.tsx
@@ -1,48 +1,51 @@
-export default [
-  [
-    {
-      code: `import type { Meta, StoryObj } from '@storybook/react';
-    
-    import { Button } from './Button';`,
-    },
-  ],
-  [
-    {
-      code: `const meta: Meta<typeof Button> = {
-      title: 'Example/Button',
-      component: Button,
-      // ...
-    };
-        
-    export default meta;`,
-    },
-  ],
-  [
-    {
-      code: `type Story = StoryObj<Button>;
+export default {
+  filename: "Button.stories.tsx",
+  code: [
+    [
+      {
+        code: `import type { Meta, StoryObj } from '@storybook/react';
       
-    export const Primary: Story = {`,
-    },
-    {
-      code: `args: {
-        primary: true,
-        label: 'Click',
-        background: 'red'
-      }`,
-      toggle: true,
-    },
-    { code: `};` },
-  ],
-  [
-    {
-      code: `// Copy the code below
-export const Warning: Story = {
-  args: {
-    primary: true,
-    label: 'Delete now',
-    backgroundColor: 'red',
-  }
-};`,
-    },
+      import { Button } from './Button';`,
+      },
+    ],
+    [
+      {
+        code: `const meta: Meta<typeof Button> = {
+        title: 'Example/Button',
+        component: Button,
+        // ...
+      };
+          
+      export default meta;`,
+      },
+    ],
+    [
+      {
+        code: `type Story = StoryObj<Button>;
+        
+      export const Primary: Story = {`,
+      },
+      {
+        code: `args: {
+          primary: true,
+          label: 'Click',
+          background: 'red'
+        }`,
+        toggle: true,
+      },
+      { code: `};` },
+    ],
+    [
+      {
+        code: `// Copy the code below
+  export const Warning: Story = {
+    args: {
+      primary: true,
+      label: 'Delete now',
+      backgroundColor: 'red',
+    }
+  };`,
+      },
+    ],
   ],
-];
+};