Add expand button to codeblocks

Author: pomber

Diff for: packages/mdx/dev/content/scrollycoding-demo.mdx

@@ -4,7 +4,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
 
 Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
 
-<CH.Scrollycoding  showCopyButton={false} rows="focus" showExpandButton={true}>
+<CH.Scrollycoding  showCopyButton={true} rows="focus" showExpandButton={true}>
 
 ## Step 1
 

Diff for: packages/mdx/src/mini-editor/code-browser.tsx

@@ -35,11 +35,12 @@ function Sidebar({
   activeFile: CodeFile
   setActiveFile: (file: CodeFile) => void
 }) {
+  const noFiles = files.length === 0 || !files[0].name
   const tree = React.useMemo(
     () => toFileTree(files),
     [files]
   )
-  return (
+  return noFiles ? null : (
     <div className="ch-code-browser-sidebar">
       <SidebarNodes
         tree={tree}

Diff for: packages/mdx/src/mini-editor/dialog.scss

@@ -7,7 +7,7 @@
 .ch-expand-dialog {
   height: 100vh;
   width: 100vw;
-  max-width: 900px;
+  max-width: min(900px, calc((100% - 6px) - 2em));
   border: 0;
   background-color: transparent;
 }

Diff for: packages/mdx/src/mini-editor/editor-tween.tsx

@@ -8,7 +8,7 @@ import { useTransition, EditorStep } from "./editor-shift"
 import { CodeConfig } from "../smooth-code"
 import { useLayoutEffect } from "../utils"
 import { CopyButton } from "smooth-code/copy-button"
-import { ExpandButton } from "mini-editor/expand-button"
+import { EditorExpandButton } from "mini-editor/expand-button"
 
 export { EditorTransition, EditorTween }
 export type { EditorTransitionProps, EditorTweenProps }
@@ -105,7 +105,7 @@ function EditorTween({
         />
       ) : undefined}
       {showExpandButton ? (
-        <ExpandButton
+        <EditorExpandButton
           className="ch-editor-button"
           step={next || prev}
         />

Diff for: packages/mdx/src/mini-editor/expand-button.tsx

@@ -1,21 +1,63 @@
 import React from "react"
 import { CodeBrowser } from "./code-browser"
 import { EditorStep } from "./editor-shift"
+import { CodeStep } from "../smooth-code/code-tween"
 
-export function ExpandButton({
-  style,
+export function EditorExpandButton({
   step,
-  className,
+  ...props
 }: {
   style?: React.CSSProperties
   step: EditorStep
   className?: string
+}) {
+  const files = step.files
+  const activeFileName = step.northPanel.active
+
+  return (
+    <ExpandButton
+      {...props}
+      files={step.files}
+      activeFileName={step.northPanel?.active}
+    />
+  )
+}
+
+export function CodeExpandButton({
+  step,
+  ...props
+}: {
+  style?: React.CSSProperties
+  step: CodeStep
+  className?: string
+}) {
+  const file = { ...step, name: "" }
+  const activeFileName = ""
+
+  return (
+    <ExpandButton
+      {...props}
+      files={[file]}
+      activeFileName={activeFileName}
+    />
+  )
+}
+
+function ExpandButton({
+  style,
+  className,
+  files,
+  activeFileName,
+}: {
+  style?: React.CSSProperties
+  files: EditorStep["files"]
+  activeFileName: string
+  className?: string
 }) {
   const [expanded, setExpanded] = React.useState(false)
   const [dialogSupported, setDialogSupported] =
     React.useState(true)
   const ref = React.useRef<any>(null)
-  const files = step.files
 
   // check if <dialog /> is supported
   React.useEffect(() => {
@@ -62,7 +104,7 @@ export function ExpandButton({
           <div className="ch-expand-dialog-content">
             <CodeBrowser
               files={files}
-              startingFileName={step.northPanel.active}
+              startingFileName={activeFileName}
             />
           </div>
         ) : undefined}

Diff for: packages/mdx/src/smooth-code/code-tween.tsx

@@ -14,6 +14,7 @@ import {
 } from "./partial-step-parser"
 import { SmoothLines } from "./smooth-lines"
 import { CopyButton } from "./copy-button"
+import { CodeExpandButton } from "mini-editor/expand-button"
 
 type HTMLProps = React.DetailedHTMLProps<
   React.HTMLAttributes<HTMLDivElement>,
@@ -95,6 +96,7 @@ export function CodeTween({
       config={config}
       progress={progress}
       htmlProps={preProps}
+      tween={tween}
     />
   )
 }
@@ -126,12 +128,14 @@ function AfterDimensions({
   progress,
   htmlProps,
   config,
+  tween,
 }: {
   dimensions: NonNullable<Dimensions>
   stepInfo: CodeShift
   config: CodeConfig
   progress: number
   htmlProps: HTMLProps
+  tween: FullTween<CodeStep>
 }) {
   return (
     <Wrapper htmlProps={htmlProps} measured={true}>
@@ -144,12 +148,20 @@ function AfterDimensions({
         maxZoom={maxZoom}
         center={horizontalCenter}
       />
-      {config.showCopyButton ? (
-        <CopyButton
-          className="ch-code-button"
-          content={stepInfo?.code?.prev}
-        />
-      ) : undefined}
+      <div className="ch-code-buttons">
+        {config.showCopyButton ? (
+          <CopyButton
+            className="ch-code-button"
+            content={stepInfo?.code?.prev}
+          />
+        ) : undefined}
+        {config.showExpandButton ? (
+          <CodeExpandButton
+            className="ch-code-button"
+            step={tween.prev}
+          />
+        ) : undefined}
+      </div>
     </Wrapper>
   )
 }

Diff for: packages/mdx/src/smooth-code/index.scss

@@ -30,14 +30,18 @@
   color: inherit;
 }
 
-.ch-code-button {
-  @include button-reset;
-
+.ch-code-buttons {
   position: absolute;
   top: 10px;
   right: 10px;
+}
+
+.ch-code-button {
+  @include button-reset;
+
   width: 1.1em;
   height: 1.1em;
+  margin-left: 0.5em;
 }
 
 .ch-code-wrapper {