Improve write a story modal

src/components/SyntaxHighlighter/Snippet/Snippet.tsx

@@ -6,7 +6,7 @@ import { SyntaxHighlighter as StorybookSyntaxHighlighter } from "@storybook/comp
 import { ThemeProvider, ensure, themes } from "@storybook/theming";
 
 interface Props {
-  contents: { content: string; toggle?: boolean }[];
+  content: { code: string; toggle?: boolean }[];
   active: boolean;
   open?: boolean;
 }
@@ -23,7 +23,12 @@ const wrapperVariants = {
 };
 
 export const Snippet = forwardRef<HTMLDivElement, Props>(
-  ({ active, contents, open }, ref) => {
+  ({ active, content, open }, ref) => {
+    const customStyle = {
+      fontSize: "0.8125rem",
+      lineHeight: "1.1875rem",
+    };
+
     return (
       <ThemeProvider theme={ensure(themes.dark)}>
         <SnippetWrapper
@@ -34,21 +39,21 @@ export const Snippet = forwardRef<HTMLDivElement, Props>(
           variants={wrapperVariants}
           transition={{ ease: "easeInOut", duration: 0.6 }}
         >
-          {contents.map(({ toggle, content }, i) => (
+          {content.map(({ toggle, code }, i) => (
             <Fragment key={i}>
               {toggle === undefined && (
                 <StorybookSyntaxHighlighter
                   language="javascript"
-                  customStyle={{ fontSize: "0.8rem" }}
+                  customStyle={customStyle}
                 >
-                  {content}
+                  {code}
                 </StorybookSyntaxHighlighter>
               )}
 
               {toggle && !open && (
                 <StorybookSyntaxHighlighter
                   language="javascript"
-                  customStyle={{ fontSize: "0.8rem" }}
+                  customStyle={customStyle}
                 >
                   {`  // ...`}
                 </StorybookSyntaxHighlighter>
@@ -62,10 +67,10 @@ export const Snippet = forwardRef<HTMLDivElement, Props>(
                 >
                   <StorybookSyntaxHighlighter
                     language="javascript"
-                    customStyle={{ fontSize: "0.8rem" }}
+                    customStyle={customStyle}
                     codeTagProps={{ style: { paddingLeft: "15px" } }}
                   >
-                    {content}
+                    {code}
                   </StorybookSyntaxHighlighter>
                 </motion.div>
               )}

src/components/SyntaxHighlighter/SyntaxHighlighter.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { SyntaxHighlighter } from "./SyntaxHighlighter";
 import React from "react";
-import { fireEvent, userEvent, within } from "@storybook/testing-library";
+import { userEvent, within } from "@storybook/testing-library";
 import { expect } from "@storybook/jest";
 import { textContentMatcher } from "../../helpers/textContentMatcher";
 
@@ -16,22 +16,22 @@ export default meta;
 
 type Story = StoryObj<typeof SyntaxHighlighter>;
 
-const newData = [
+const data = [
   [
     {
-      content: `// Button.stories.tsx`,
+      code: `// Button.stories.tsx`,
     },
   ],
   [
     {
-      content: `import type { Meta, StoryObj } from '@storybook/react';
+      code: `import type { Meta, StoryObj } from '@storybook/react';
 
 import { Button } from './Button';`,
     },
   ],
   [
     {
-      content: `const meta: Meta<typeof Button> = {
+      code: `const meta: Meta<typeof Button> = {
   title: 'Example/Button',
   component: Button,
   // ...
@@ -41,20 +41,20 @@ export default meta;`,
     },
   ],
   [
-    { content: `export const Primary: Story = {` },
+    { code: `export const Primary: Story = {` },
     {
-      content: `args: {
+      code: `args: {
     primary: true,
     label: 'Click',
     background: 'red'
   }`,
       toggle: true,
     },
-    { content: `};` },
+    { code: `};` },
   ],
   [
     {
-      content: `// Copy the code below
+      code: `// Copy the code below
 
 export const Warning: Story = {
   args: {
@@ -74,31 +74,35 @@ export const Default: Story = {
       <div>
         <SyntaxHighlighter {...args} activeStep={activeStep} />
         <button onClick={() => setActiveStep(0)}>Reset</button>
-        <button onClick={() => setActiveStep((step) => step - 1)}>
+        <button
+          onClick={() =>
+            setActiveStep((step) => (activeStep > 0 ? step - 1 : 0))
+          }
+        >
           Previous
         </button>
         <button onClick={() => setActiveStep((step) => step + 1)}>Next</button>
       </div>
     );
   },
   args: {
-    contents: newData,
+    data: data,
     activeStep: 1,
-    width: "50%",
+    width: 480,
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
     const nextButton = canvas.getByText("Next");
 
     const firstElement = await canvas.findByText(
-      textContentMatcher(newData[0][0].content)
+      textContentMatcher(data[0][0].code)
     );
     const secondElement = await canvas.findByText(
-      textContentMatcher(newData[1][0].content)
+      textContentMatcher(data[1][0].code)
     );
     const thirdElement = await canvas.findByText(
-      textContentMatcher(newData[2][0].content)
+      textContentMatcher(data[2][0].code)
     );
 
     await expect(

src/components/SyntaxHighlighter/SyntaxHighlighter.styled.tsx

@@ -6,11 +6,11 @@ export const Code = styled(motion.div)`
   z-index: 2;
 `;
 
-export const Container = styled.div<{ width: string }>`
+export const Container = styled.div<{ width: number }>`
   position: relative;
   box-sizing: border-box;
   background: #171c23;
-  width: ${({ width }) => width};
+  width: ${({ width }) => width}px;
   height: 100%;
   overflow: hidden;
   padding-left: 15px;

src/components/SyntaxHighlighter/SyntaxHighlighter.tsx

@@ -1,27 +1,38 @@
-import React, { useCallback, useEffect, useLayoutEffect, useMemo } from "react";
+import React, {
+  createRef,
+  useCallback,
+  useLayoutEffect,
+  useMemo,
+  useState,
+} from "react";
 import { Backdrop, Code, Container } from "./SyntaxHighlighter.styled";
 import { Snippet } from "./Snippet/Snippet";
 
 type SyntaxHighlighterProps = {
-  contents: { content: string; toggle?: boolean }[][];
+  data: { code: string; toggle?: boolean }[][];
   activeStep: number;
-  width: string;
+  width: number;
+};
+
+type StepsProps = {
+  yPos: number;
+  backdropHeight: number;
+  index: number;
+  open: boolean;
 };
 
 const OFFSET = 49;
 
 export const SyntaxHighlighter = ({
   activeStep,
-  contents,
+  data,
   width,
 }: SyntaxHighlighterProps) => {
-  const [steps, setSteps] = React.useState<
-    { yPos: number; height: number; index: number; open: boolean }[]
-  >([]);
+  const [steps, setSteps] = useState<StepsProps[]>([]);
 
   const refs = useMemo(
-    () => contents.map(() => React.createRef<HTMLDivElement>()),
-    [contents]
+    () => data.map(() => createRef<HTMLDivElement>()),
+    [data]
   );
 
   const getYPos = (idx: number) => {
@@ -33,12 +44,12 @@ export const SyntaxHighlighter = ({
   };
 
   const setNewSteps = useCallback(() => {
-    const newSteps = contents.flatMap((content, i) => {
-      const height = refs[i].current!.getBoundingClientRect().height;
+    const newSteps = data.flatMap((content, i) => {
+      const backdropHeight = refs[i].current!.getBoundingClientRect().height;
       const finalSteps = [
         {
           yPos: getYPos(i) + OFFSET - 7,
-          height,
+          backdropHeight,
           index: i,
           open: false,
         },
@@ -47,7 +58,7 @@ export const SyntaxHighlighter = ({
       if (content.length > 1) {
         finalSteps.push({
           yPos: getYPos(i) + OFFSET - 7,
-          height,
+          backdropHeight,
           index: i,
           open: true,
         });
@@ -57,9 +68,9 @@ export const SyntaxHighlighter = ({
     });
 
     setSteps(newSteps);
-  }, [contents]);
+  }, [data]);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     // Call setNewSteps every time height of the refs elements changes
     const resizeObserver = new ResizeObserver(() => {
       setNewSteps();
@@ -75,33 +86,31 @@ export const SyntaxHighlighter = ({
   }, []);
 
   return (
-    <>
-      <Container width={width}>
-        <Code
-          animate={{ y: steps[activeStep]?.yPos ?? 0 }}
-          transition={{ ease: "easeInOut", duration: 0.6 }}
-        >
-          {contents.map((content, idx: number) => (
-            <Snippet
-              key={idx}
-              ref={refs[idx]}
-              active={steps[activeStep]?.index === idx}
-              open={
-                steps[activeStep]?.index > idx
-                  ? true
-                  : steps[activeStep]?.open ?? false
-              }
-              contents={content}
-            />
-          ))}
-        </Code>
-        <Backdrop
-          animate={{ height: steps[activeStep]?.height ?? 0 }}
-          transition={{ ease: "easeInOut", duration: 0.6 }}
-          style={{ top: OFFSET }}
-          className="syntax-highlighter-backdrop"
-        />
-      </Container>
-    </>
+    <Container width={width}>
+      <Code
+        animate={{ y: steps[activeStep]?.yPos ?? 0 }}
+        transition={{ ease: "easeInOut", duration: 0.6 }}
+      >
+        {data.map((content, idx: number) => (
+          <Snippet
+            key={idx}
+            ref={refs[idx]}
+            active={steps[activeStep]?.index === idx}
+            open={
+              steps[activeStep]?.index > idx
+                ? true
+                : steps[activeStep]?.open ?? false
+            }
+            content={content}
+          />
+        ))}
+      </Code>
+      <Backdrop
+        animate={{ height: steps[activeStep]?.backdropHeight ?? 0 }}
+        transition={{ ease: "easeInOut", duration: 0.6 }}
+        style={{ top: OFFSET }}
+        className="syntax-highlighter-backdrop"
+      />
+    </Container>
   );
 };