Merge pull request #59 from code-hike/optional-browser-transition

Optional browser transition

Author: pomber

packages/mini-browser/src/buttons.tsx

@@ -1,35 +1,38 @@
-import React from "react";
+import { useClasser } from "@code-hike/classer"
+import React from "react"
 
 function Back() {
+  const c = useClasser("ch-browser")
   return (
     <svg
       fill="currentColor"
       preserveAspectRatio="xMidYMid meet"
       height="1em"
       viewBox="13 10 14 23"
-      style={{ marginLeft: "0.2em", marginRight: "1em", color: "#999" }}
+      className={c("button", "back-button")}
     >
       <g>
         <path d="m26.5 12.1q0 0.3-0.2 0.6l-8.8 8.7 8.8 8.8q0.2 0.2 0.2 0.5t-0.2 0.5l-1.1 1.1q-0.3 0.3-0.6 0.3t-0.5-0.3l-10.4-10.4q-0.2-0.2-0.2-0.5t0.2-0.5l10.4-10.4q0.3-0.2 0.5-0.2t0.6 0.2l1.1 1.1q0.2 0.2 0.2 0.5z" />
       </g>
     </svg>
-  );
+  )
 }
 
 function Forward() {
+  const c = useClasser("ch-browser")
   return (
     <svg
       fill="currentColor"
       preserveAspectRatio="xMidYMid meet"
       height="1em"
       viewBox="13 10 14 23"
-      style={{ marginRight: "1em", color: "#999" }}
+      className={c("button", "forward-button")}
     >
       <g>
         <path d="m26.3 21.4q0 0.3-0.2 0.5l-10.4 10.4q-0.3 0.3-0.6 0.3t-0.5-0.3l-1.1-1.1q-0.2-0.2-0.2-0.5t0.2-0.5l8.8-8.8-8.8-8.7q-0.2-0.3-0.2-0.6t0.2-0.5l1.1-1.1q0.3-0.2 0.5-0.2t0.6 0.2l10.4 10.4q0.2 0.2 0.2 0.5z" />
       </g>
     </svg>
-  );
+  )
 }
 
 function Refresh() {
@@ -43,13 +46,14 @@ function Refresh() {
     >
       <path d="M29.5 10.5l3.9-3.9v11.8H21.6L27 13c-1.8-1.8-4.3-3-7-3-5.5 0-10 4.5-10 10s4.5 10 10 10c4.4 0 8.1-2.7 9.5-6.6h3.4c-1.5 5.7-6.6 10-12.9 10-7.3 0-13.3-6.1-13.3-13.4S12.7 6.6 20 6.6c3.7 0 7 1.5 9.5 3.9z" />
     </svg>
-  );
+  )
 }
 
 function Open({ href }: { href: string }) {
+  const c = useClasser("ch-browser")
   return (
     <a
-      style={{ margin: "0 1em 0 1em", color: "inherit" }}
+      className={c("button", "open-button")}
       title="Open in new tab"
       href={href}
       target="_blank"
@@ -62,13 +66,13 @@ function Open({ href }: { href: string }) {
         viewBox="3 3 18 18"
         height="1em"
         width="1em"
-        style={{ display: "block" }}
+        className={c("open-icon")}
         xmlns="http://www.w3.org/2000/svg"
       >
         <path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"></path>
       </svg>
     </a>
-  );
+  )
 }
 
-export { Back, Forward, Refresh, Open };
+export { Back, Forward, Refresh, Open }

packages/mini-browser/src/index.scss

@@ -22,3 +22,23 @@
   padding: 0 10px;
   color: #544;
 }
+
+.ch-browser-button {
+  margin: 0 1em;
+  color: #999;
+}
+
+.ch-browser-back-button {
+  margin-left: 0.2em;
+}
+
+.ch-browser-forward-button {
+  margin-left: 0;
+}
+
+.ch-browser-open-button {
+  color: inherit;
+}
+.ch-browser-open-icon {
+  display: block;
+}

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

@@ -4,11 +4,14 @@ import { TitleBar } from "./title-bar"
 import { MiniBrowserStep, useSteps } from "./use-steps"
 import { useClasser, Classes } from "@code-hike/classer"
 
+type Transition = "none" | "slide"
+
 export type MiniBrowserHikeProps = {
   progress?: number
   backward?: boolean
   classes?: Classes
   steps?: MiniBrowserStep[]
+  transition?: Transition
 } & React.PropsWithoutRef<JSX.IntrinsicElements["div"]>
 
 const MiniBrowserHike = React.forwardRef<
@@ -21,6 +24,7 @@ function MiniBrowserWithRef(
     progress = 0,
     backward = false,
     steps: ogSteps,
+    transition = "none",
     classes,
     ...props
   }: MiniBrowserHikeProps,
@@ -29,16 +33,6 @@ function MiniBrowserWithRef(
   const c = useClasser("ch-mini-browser", classes)
   const steps = useSteps(ogSteps)
 
-  // TODO readability and optional
-  const X = 50
-  const t = progress - Math.floor(progress)
-  const x = t <= 0.5 ? -X * t : X - X * t
-  const o = Math.abs(t - 0.5) * 2
-
-  // const stepIndex = backward
-  //   ? Math.floor(progress)
-  //   : Math.ceil(progress)
-
   const stepIndex = Math.round(progress)
 
   const { zoom, displayUrl, loadUrl, children } = steps[
@@ -51,8 +45,7 @@ function MiniBrowserWithRef(
       zoom={zoom}
       className={`${c("")} ${props.className || ""}`}
       style={{
-        transform: `translateX(${x}px)`,
-        opacity: o * o,
+        ...transitionStyle({ progress, transition }),
         ...props.style,
       }}
       classes={classes}
@@ -65,4 +58,24 @@ function MiniBrowserWithRef(
   )
 }
 
+function transitionStyle({
+  progress,
+  transition,
+}: {
+  progress: number
+  transition: Transition
+}) {
+  if (transition === "slide") {
+    const X = 50
+    const t = progress - Math.floor(progress)
+    const x = t <= 0.5 ? -X * t : X - X * t
+    const o = Math.abs(t - 0.5) * 2
+    return {
+      transform: `translateX(${x}px)`,
+      opacity: o * o,
+    }
+  }
+  return {}
+}
+
 export { MiniBrowserHike }

packages/scrollycoding/src/mdx-steps.tsx

@@ -25,12 +25,15 @@ interface Step {
   codeProps: CodeProps
 }
 
-const defaultFilename = "App.js"
+interface Options {
+  defaultFileName?: string
+}
 
 function useMdxSteps(
   mdx: React.ReactNode,
   previewProps: PreviewProps,
-  codeProps: CodeProps
+  codeProps: CodeProps,
+  options: Options = {}
 ) {
   const steps: Step[] = []
   let prevFiles: CodeFiles = {}
@@ -41,7 +44,8 @@ function useMdxSteps(
       const { files, activeFile } = getFiles(
         stepHeadProps,
         prevFiles,
-        prevActiveFile
+        prevActiveFile,
+        options.defaultFileName
       )
       const step = {
         content: [],
@@ -69,7 +73,8 @@ function useMdxSteps(
 function getFiles(
   stepHeadProps: StepHeadProps,
   prevFiles: CodeFiles = {},
-  prevActiveFile: string = ""
+  prevActiveFile: string = "",
+  defaultFileName: string = "App.js"
 ) {
   let activeFile = stepHeadProps.activeFile || ""
   const files = { ...prevFiles }
@@ -80,7 +85,7 @@ function getFiles(
         preElement?.props?.children?.props || {}
       const lang = codeElementProps.className?.slice(9)
       const { filename, hideTab } = parseMetastring(
-        codeElementProps.metastring || defaultFilename
+        codeElementProps.metastring || defaultFileName
       )
       const code = codeElementProps.children
       files[filename] = { code, lang, hideTab }

packages/scrollycoding/src/preview.tsx

@@ -34,6 +34,7 @@ function Preview({ filesHash, ...props }: PreviewProps) {
     <MiniBrowser
       url=""
       loadUrl={link}
+      transition="slide"
       {...props}
       children={preview}
     />