Refactor scrollycoding

Author: pomber

packages/mini-editor/src/index.tsx

@@ -7,6 +7,7 @@ import {
 import {
   MiniEditorHike,
   MiniEditorHikeProps,
+  EditorStep,
 } from "./mini-editor-hike"
 import {
   MiniEditor,
@@ -23,4 +24,5 @@ export {
   MiniEditorProps,
   MiniEditorHike,
   MiniEditorHikeProps,
+  EditorStep,
 }

packages/mini-editor/src/mini-editor-hike.tsx

@@ -4,14 +4,14 @@ import { EditorStep } from "./use-snapshots"
 import { CodeProps } from "./code"
 import { EditorFrameProps } from "./editor-frame"
 
-export { MiniEditorHike, MiniEditorHikeProps }
+export { MiniEditorHike, MiniEditorHikeProps, EditorStep }
 
 type MiniEditorHikeProps = {
   steps: EditorStep[]
   progress: number
   backward: boolean
-  frameProps: Partial<EditorFrameProps>
-  codeProps: Partial<CodeProps>
+  frameProps?: Partial<EditorFrameProps>
+  codeProps?: Partial<CodeProps>
 }
 
 function MiniEditorHike({

packages/mini-editor/src/mini-editor-spring.tsx

@@ -13,19 +13,19 @@ type SingleFileEditorProps = {
   focus?: string
   filename?: string
   terminal?: string
-  frameProps: Partial<EditorFrameProps>
-  codeProps: Partial<CodeProps>
+  frameProps?: Partial<EditorFrameProps>
+  codeProps?: Partial<CodeProps>
 }
 type SinglePanelEditorProps = {
   files: StepFile[]
   active: string
   terminal?: string
-  frameProps: Partial<EditorFrameProps>
-  codeProps: Partial<CodeProps>
+  frameProps?: Partial<EditorFrameProps>
+  codeProps?: Partial<CodeProps>
 }
 type TwoPanelEditorProps = EditorStep & {
-  frameProps: Partial<EditorFrameProps>
-  codeProps: Partial<CodeProps>
+  frameProps?: Partial<EditorFrameProps>
+  codeProps?: Partial<CodeProps>
 }
 type MiniEditorProps =
   | SingleFileEditorProps

packages/scrollycoding/src/content-column.tsx

@@ -0,0 +1,87 @@
+import React from "react"
+import { useClasser } from "@code-hike/classer"
+import {
+  Scroller,
+  Step as ScrollerStep,
+} from "@code-hike/scroller"
+import { useFluidContext, HikeStep } from "./hike-context"
+import { EditorStep } from "@code-hike/mini-editor"
+
+export const StepContext = React.createContext<{
+  stepIndex: number
+  editorStep: EditorStep
+} | null>(null)
+
+export function ContentColumn({
+  steps,
+  onStepChange,
+}: {
+  steps: HikeStep[]
+  onStepChange: (index: number) => void
+}) {
+  const c = useClasser("ch")
+  const contentSteps = steps.map(s => s.content)
+  return (
+    <div className={c("hike-content")}>
+      <Scroller onStepChange={onStepChange}>
+        {contentSteps.map((children, index) => (
+          <StepContext.Provider
+            value={{
+              stepIndex: index,
+              editorStep:
+                steps[index].editorProps.contentProps,
+            }}
+            key={index}
+          >
+            <StepContent
+              children={children}
+              stepIndex={index}
+            />
+          </StepContext.Provider>
+        ))}
+      </Scroller>
+    </div>
+  )
+}
+
+function StepContent({
+  children,
+  stepIndex,
+}: {
+  children: React.ReactNode
+  stepIndex: number
+}) {
+  const c = useClasser("ch-hike-step")
+  const { dispatch, hikeState } = useFluidContext()
+  const focusStepIndex =
+    hikeState.focusStepIndex ?? hikeState.scrollStepIndex
+  const isOn = stepIndex === focusStepIndex
+  return (
+    <ScrollerStep
+      as="div"
+      index={stepIndex}
+      onClick={() =>
+        dispatch({
+          type: "set-focus",
+          stepIndex,
+          editorStep: null,
+        })
+      }
+      className={c("", isOn ? "focused" : "unfocused")}
+    >
+      {stepIndex > 0 && <div className={c("gap")} />}
+      <div
+        className={c(
+          "content",
+          isOn ? "content-focused" : "content-unfocused"
+        )}
+      >
+        {children}
+      </div>
+    </ScrollerStep>
+  )
+}
+
+export function useStepData() {
+  return React.useContext(StepContext)!
+}

packages/scrollycoding/src/demo-context.tsx

@@ -0,0 +1,96 @@
+import React from "react"
+import {
+  SandpackProvider,
+  SandpackPredefinedTemplate,
+  SandpackProviderProps,
+  SandpackSetup,
+  SandpackFile,
+} from "@codesandbox/sandpack-react"
+import { EditorProps } from "./editor"
+import { PreviewProps } from "./preview"
+
+export {
+  DemoProvider,
+  PreviewPreset,
+  usePreviewProps,
+  useEditorProps,
+}
+
+interface PreviewPreset {
+  template?: SandpackPredefinedTemplate
+  customSetup?: SandpackSetup
+}
+
+type DemoProviderProps = {
+  editorProps: EditorProps
+  previewProps: PreviewProps
+  previewPreset: PreviewPreset
+  children?: React.ReactNode
+}
+
+type DemoContext = {
+  editorProps: EditorProps
+  previewProps: PreviewProps
+}
+
+export const DemoContext = React.createContext<DemoContext | null>(
+  null
+)
+
+function DemoProvider({
+  children,
+  editorProps,
+  previewProps,
+  previewPreset,
+}: DemoProviderProps) {
+  const sandpackProps = useSandpackProps(
+    previewPreset,
+    editorProps
+  )
+  const previewAndEditorProps = React.useMemo(
+    () => ({
+      previewProps,
+      editorProps,
+    }),
+    [previewProps, editorProps]
+  )
+  return (
+    <SandpackProvider {...sandpackProps}>
+      <DemoContext.Provider value={previewAndEditorProps}>
+        {children}
+      </DemoContext.Provider>
+    </SandpackProvider>
+  )
+}
+
+function useSandpackProps(
+  previewPreset: PreviewPreset,
+  editorProps: EditorProps
+): SandpackProviderProps {
+  // TODO useMemo
+  const files = {
+    ...previewPreset?.customSetup?.files,
+  } as Record<string, SandpackFile>
+  const codeFiles = editorProps?.contentProps?.files || []
+  codeFiles.forEach(file => {
+    files["/" + file.name] = {
+      code: file.code,
+    }
+  })
+
+  return {
+    recompileMode: "immediate",
+    ...previewPreset,
+    customSetup: {
+      ...previewPreset?.customSetup,
+      files,
+    },
+  }
+}
+
+function useEditorProps() {
+  return React.useContext(DemoContext)!.editorProps
+}
+function usePreviewProps() {
+  return React.useContext(DemoContext)!.previewProps
+}

packages/scrollycoding/src/demo-provider.tsx

@@ -1,27 +1,38 @@
 import * as React from "react"
-import { MiniEditor } from "@code-hike/mini-editor"
-import { CodeProps } from "./hike-context"
+import {
+  MiniEditor,
+  MiniEditorProps,
+  EditorStep,
+} from "@code-hike/mini-editor"
 import { useCodeSandboxLink } from "@codesandbox/sandpack-react"
 
-export { Code }
+export { Editor, EditorProps }
 
-function Code({ files, activeFile, ...props }: CodeProps) {
-  const file = files[activeFile]
-  const tabs = Object.keys(files).filter(
-    filename => !files[filename].hideTab
-  )
+type EditorProps = {
+  contentProps: EditorStep
+  frameProps: MiniEditorProps["frameProps"]
+  codeProps: MiniEditorProps["codeProps"]
+}
+
+function Editor({
+  contentProps,
+  codeProps,
+  frameProps,
+}: EditorProps) {
+  const finalFrameProps = {
+    button: <CodeSandboxIcon url={useCodeSandboxLink()} />,
+    ...frameProps,
+    style: { height: "100%", ...frameProps?.style },
+  }
+  const finalCodeProps = {
+    minColumns: 46,
+    ...codeProps,
+  }
   return (
     <MiniEditor
-      key={activeFile}
-      style={{ height: "100%" }}
-      button={
-        <CodeSandboxIcon url={useCodeSandboxLink()} />
-      }
-      file={activeFile}
-      tabs={tabs}
-      lang={file.lang}
-      code={file.code}
-      {...props}
+      {...contentProps}
+      frameProps={finalFrameProps}
+      codeProps={finalCodeProps}
     />
   )
 }