Extend files from previous step

Author: pomber

packages/scrollycoding/src/mdx-steps.tsx

@@ -33,11 +33,16 @@ function useMdxSteps(
   codeProps: CodeProps
 ) {
   const steps: Step[] = []
+  let prevFiles: CodeFiles = {}
+  let prevActiveFile = ""
   React.Children.forEach(mdx, (child: any) => {
     if (child?.props?.mdxType === "StepHead") {
       const stepHeadProps = child?.props || {}
-      const { files, activeFile } = getFiles(stepHeadProps)
-
+      const { files, activeFile } = getFiles(
+        stepHeadProps,
+        prevFiles,
+        prevActiveFile
+      )
       const step = {
         content: [],
         previewProps: getPreviewProps(
@@ -52,16 +57,22 @@ function useMdxSteps(
         ),
       }
       steps.push(step)
+      prevFiles = files
+      prevActiveFile = activeFile
     } else {
       steps[steps.length - 1].content.push(child)
     }
   })
   return steps
 }
 
-function getFiles(stepHeadProps: StepHeadProps) {
+function getFiles(
+  stepHeadProps: StepHeadProps,
+  prevFiles: CodeFiles = {},
+  prevActiveFile: string = ""
+) {
   let activeFile = stepHeadProps.activeFile || ""
-  const files = {} as CodeFiles
+  const files = { ...prevFiles }
   React.Children.forEach(
     stepHeadProps.children,
     preElement => {
@@ -77,6 +88,9 @@ function getFiles(stepHeadProps: StepHeadProps) {
       }
     }
   )
+  if (activeFile === "") {
+    activeFile = prevActiveFile
+  }
   return { files, activeFile }
 }
 

packages/storybook/src/assets/scrollycoding.repeat.mdx

@@ -0,0 +1,67 @@
+# Hello
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed euismod libero. Quisque vehicula ante sapien, vel imperdiet ipsum tempor et. Fusce sit amet turpis ullamcorper, porta magna et, vehicula velit. Pellentesque quis dui ac lacus mollis lobortis non ut nibh. Nulla ac lorem sit amet nulla sollicitudin rhoncus. Duis aliquet sed est vitae auctor. Nullam faucibus, ipsum ut tristique efficitur, est nulla vestibulum purus, ut aliquam risus turpis sit amet nulla. Pellentesque vestibulum id ex id venenatis.
+
+<Hike>
+
+<StepHead>
+
+```jsx Button.js
+export default function Button() {
+  return <button style={{ background: "red" }}>Hey</button>
+}
+```
+
+```jsx App.js
+import Button from "./Button"
+
+export default function App() {
+  return <Button>Hey</Button>
+}
+```
+
+</StepHead>
+
+## Step 1
+
+Sed quis ipsum nisl. Ut eget turpis id justo lobortis molestie sed in turpis. Pellentesque maximus erat ut eleifend rutrum. Nulla lectus sem, pulvinar eu tortor at, lacinia auctor felis. Aenean semper, quam a pellentesque laoreet, ex diam vehicula urna, eget ornare nulla enim vitae massa. Nulla lacus sem, sodales non felis quis, tincidunt porta turpis. Donec suscipit vulputate purus eu elementum.
+
+<CodeSlot style={{ height: 200 }} />
+
+<PreviewSlot style={{ height: 200 }} />
+
+Morbi mauris urna, luctus at ligula sit amet, gravida tempor
+libero. Curabitur convallis tincidunt est ac facilisis. Aliquam
+rutrum molestie vestibulum. Nunc vel lorem vel ante faucibus
+dictum. Morbi at neque hendrerit, maximus lacus nec, luctus lacus.
+Quisque tincidunt sed ante at gravida.
+
+<StepHead>
+
+```jsx Button.js
+export default function Button() {
+  return <button style={{ background: "blue" }}>Hey</button>
+}
+```
+
+</StepHead>
+
+# Step 2
+
+<CodeSlot style={{ height: 200 }} />
+
+Nullam ut massa ut tortor pellentesque fringilla at ut massa. Nunc ut suscipit ipsum. Curabitur eu nunc lobortis, gravida sem ac, aliquet lorem. Vestibulum semper urna in erat placerat dictum. Nulla posuere odio sed accumsan accumsan. Integer aliquet lectus sit amet turpis feugiat, vel elementum velit condimentum. Proin sit amet augue rutrum, auctor risus aliquam, varius quam. Praesent turpis nunc, dictum quis placerat vel, tempor ac tortor. Aenean sollicitudin tortor efficitur, volutpat ligula id, semper lectus. Curabitur vel nibh maximus, sodales erat id, consectetur ex. Fusce convallis vitae quam vitae venenatis.
+
+<StepHead focus="1" />
+
+# Step 3
+
+<CodeSlot style={{ height: 200 }} />
+
+Nullam ut massa ut tortor pellentesque fringilla at ut massa. Nunc ut suscipit ipsum. Curabitur eu nunc lobortis, gravida sem ac, aliquet lorem. Vestibulum semper urna in erat placerat dictum. Nulla posuere odio sed accumsan accumsan. <Focus on="2" >Integer aliquet</Focus> lectus sit amet turpis feugiat, vel elementum velit condimentum. Proin sit amet augue rutrum, auctor risus aliquam, varius quam. Praesent turpis nunc, dictum quis placerat vel, tempor ac tortor. <Focus on="3" >Aenean `sollicitudin`</Focus> tortor efficitur, volutpat ligula id, semper lectus. Curabitur vel nibh maximus, sodales erat id, consectetur ex. Fusce convallis vitae quam vitae venenatis.
+
+</Hike>
+
+# Goodbye
+
+Integer porta tincidunt dolor ut consequat. Ut eu justo viverra, condimentum massa vel, varius neque. Curabitur lectus nibh, semper in arcu ac, sagittis fermentum lectus. Vivamus quis purus odio. Nullam placerat, lorem non condimentum vehicula, erat turpis lacinia tortor, quis vulputate metus ipsum sit amet nunc. Integer gravida hendrerit massa. Aenean condimentum ac ante in tincidunt. Duis auctor dictum eleifend. Ut sed nisl iaculis, imperdiet dui in, porttitor mi. Sed quis lorem ac dolor efficitur egestas quis eu magna. Quisque dignissim accumsan pulvinar. Curabitur sit amet lacus dictum purus rutrum volutpat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis mattis condimentum porttitor. Donec id risus eu tortor elementum volutpat. Morbi vel diam eget velit bibendum consequat.

packages/storybook/src/scrollycoding.story.js

@@ -11,6 +11,7 @@ import {
 import "@code-hike/scrollycoding/dist/index.css"
 import Basic from "./assets/scrollycoding.basic.mdx"
 import WithDeps from "./assets/scrollycoding.deps.mdx"
+import RepeatedSteps from "./assets/scrollycoding.repeat.mdx"
 import { MDXProvider } from "@mdx-js/react"
 
 export default {
@@ -46,6 +47,20 @@ export function withDeps() {
   )
 }
 
+export function repeatedSteps() {
+  return (
+    <Page
+      style={{
+        maxWidth: 800,
+      }}
+    >
+      <MDXProvider components={components}>
+        <RepeatedSteps />
+      </MDXProvider>
+    </Page>
+  )
+}
+
 const components = {
   Hike,
   StepHead,