Apple demo

.prettierignore

@@ -1 +1 @@
-src/**/steps
+site/src/**/steps

package.json

@@ -12,6 +12,7 @@
       "packages/scroller",
       "packages/sim-user",
       "packages/smooth-column",
+      "packages/scroller",
       "storybook",
       "site"
     ]
@@ -21,10 +22,11 @@
     "mframe": "yarn workspace @code-hike/mini-frame",
     "mterminal": "yarn workspace @code-hike/mini-terminal",
     "meditor": "yarn workspace @code-hike/mini-editor",
+    "scroller": "yarn workspace @code-hike/scroller",
     "storybook": "yarn workspace storybook",
     "site": "yarn workspace site",
     "ch-build": "yarn workspace @code-hike/build",
-    "build-site": "yarn mframe build && yarn mterminal build && yarn mbrowser build && yarn meditor build && yarn workspace site export"
+    "build-site": "yarn mframe build && yarn mterminal build && yarn scroller build && yarn mbrowser build && yarn meditor build && yarn workspace site export"
   },
   "dependencies": {
     "@emotion/core": "10.0.7",

packages/mini-editor/package.json

@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@code-hike/mini-terminal": "0.0.1",
+    "@code-hike/mini-frame": "0.0.1",
     "@code-surfer/standalone": "^3.1.1",
     "@types/react": "^16.9.38"
   },

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

@@ -1,5 +1,6 @@
 import React from "react";
 import { TerminalContent } from "@code-hike/mini-terminal";
+import { MiniFrame, FrameButtons } from "@code-hike/mini-frame";
 
 export { EditorFrame };
 
@@ -15,59 +16,17 @@ function EditorFrame({
   progress,
 }: any) {
   return (
-    <div
-      className="shadow"
-      style={{
-        height,
-        position: "relative",
-        borderRadius: "6px",
-        // border: "1px solid rgba(175, 173, 169, 0.15)",
-        boxShadow:
-          "0 13px 27px -5px rgba(50,50,93,.25), 0 8px 16px -8px rgba(0,0,0,.3), 0 -6px 16px -6px rgba(0,0,0,.025)",
-        overflow: "hidden",
-        fontFamily:
-          "Ubuntu,Droid Sans,-apple-system,BlinkMacSystemFont,Segoe WPC,Segoe UI,sans-serif",
-        ...style,
-      }}
+    <MiniFrame
+      style={{ height, ...style }}
+      titleBar={<TabsContainer files={files} active={active} link={link} />}
     >
-      <TabsContainer files={files} active={active} link={link} />
       <EditorContainer>{children}</EditorContainer>
       <TerminalPanel
         code={terminal}
         height={terminalHeight}
         progress={progress}
       />
-    </div>
-  );
-}
-
-function Button({ bg, border }: any) {
-  return (
-    <div
-      style={{
-        background: bg,
-        width: "10px",
-        height: "10px",
-        border: `1px solid ${border}`,
-        borderRadius: "50%",
-        display: "inline-block",
-        marginLeft: "6px",
-      }}
-    />
-  );
-}
-
-function Buttons() {
-  return (
-    <div
-      style={{
-        margin: "auto 10px auto 4px",
-      }}
-    >
-      <Button border="#e33e41" bg="#ff5c5c" />
-      <Button border="#e09e3e" bg="#ffbd4c" />
-      <Button border="#14ae46" bg="#00ca56" />
-    </div>
+    </MiniFrame>
   );
 }
 
@@ -108,28 +67,21 @@ function Tab({ enabled, children }: any) {
 
 function TabsContainer({ files, active }: any) {
   return (
-    <div
-      style={{
-        height: "28px",
-        background: "rgb(37, 37, 38)",
-        overflow: "hidden",
-        display: "flex",
-      }}
-    >
-      <Buttons />
+    <>
+      <FrameButtons />
       {files.map((fileName: string) => (
         <Tab key={fileName} enabled={fileName === active}>
           {fileName}
         </Tab>
       ))}
       <div style={{ flex: 1 }} />
-    </div>
+    </>
   );
 }
 
 const editorStyle = {
   backgroundColor: "rgb(30, 30, 30)",
-  height: "calc(100% - 28px)",
+  height: "100%",
   color: "#cccccc",
   fontSize: "15px",
   padding: "5px 10px",

packages/mini-terminal/src/mini-terminal-transition.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { TerminalContent } from "./terminal-content";
 import { MiniFrame } from "@code-hike/mini-frame";
+import "./mini-terminal.css";
 
 function MiniTerminalTransition({
   height = 100,
@@ -45,6 +46,7 @@ function InnerTerminalTransition({
 }) {
   return (
     <div
+      className="ch-terminal"
       style={{
         fontSize: "14px",
         height: "100%",

packages/scroller/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@code-hike/scroller",
+  "version": "0.0.1",
+  "main": "dist/index.js",
+  "typings": "dist/index.d.ts",
+  "module": "dist/index.esm.js",
+  "scripts": {
+    "build": "ch-build",
+    "watch": "ch-build --watch"
+  },
+  "devDependencies": {
+    "@code-hike/build": "0.0.1",
+    "react": "^16.13.1"
+  },
+  "dependencies": {
+    "@types/react": "^16.9.38"
+  },
+  "peerDependencies": {
+    "react": ">=16.8"
+  }
+}

packages/scroller/src/index.tsx

@@ -0,0 +1,97 @@
+import React from "react";
+
+export { Scroller, Step };
+
+const ObserverContext = React.createContext<IntersectionObserver | undefined>(
+  undefined
+);
+
+type ScrollerProps = {
+  onStepChange: (stepIndex: number) => void;
+  children: React.ReactNode;
+  getRootMargin?: (vh: number) => string;
+};
+
+type StepElement = {
+  stepIndex: any;
+};
+
+function defaultRootMargin(vh: number) {
+  return `-${vh / 2 - 2}px 0px`;
+}
+
+function Scroller({
+  onStepChange,
+  children,
+  getRootMargin = defaultRootMargin,
+}: ScrollerProps) {
+  const [observer, setObserver] = React.useState<IntersectionObserver>();
+  const vh = useWindowHeight();
+
+  React.useLayoutEffect(() => {
+    const windowHeight = vh || 0;
+    const handleIntersect: IntersectionObserverCallback = (entries) => {
+      entries.forEach((entry) => {
+        if (entry.intersectionRatio > 0) {
+          // ref.current = entry.target.stepInfo
+          const stepElement = (entry.target as unknown) as StepElement;
+          onStepChange(+stepElement.stepIndex);
+        }
+      });
+      // setRootRect(entries[0].rootBounds)
+      // setIntersections(entries.map(e => e.intersectionRect))
+    };
+    const observer = new IntersectionObserver(handleIntersect, {
+      rootMargin: getRootMargin(windowHeight),
+      threshold: 0.000001,
+    });
+    setObserver(observer);
+
+    return () => observer.disconnect();
+  }, [vh]);
+
+  return (
+    <ObserverContext.Provider value={observer}>
+      {children}
+    </ObserverContext.Provider>
+  );
+}
+
+function Step({ as = "section", index, ...props }: { as: any; index: number }) {
+  const ref = React.useRef<HTMLElement>(null!);
+  const observer = React.useContext(ObserverContext);
+
+  React.useLayoutEffect(() => {
+    if (observer) {
+      observer.observe(ref.current);
+    }
+    return () => observer && observer.unobserve(ref.current);
+  }, [observer]);
+
+  React.useLayoutEffect(() => {
+    const stepElement = (ref.current as unknown) as StepElement;
+    stepElement.stepIndex = index;
+  }, [index]);
+
+  return React.createElement(as, { ...props, ref });
+}
+
+function useWindowHeight() {
+  const isClient = typeof window === "object";
+  function getHeight() {
+    return isClient ? document.documentElement.clientHeight : undefined;
+  }
+  const [windowHeight, setWindowHeight] = React.useState(getHeight);
+  React.useEffect(() => {
+    function handleResize() {
+      setWindowHeight(getHeight());
+    }
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  React.useLayoutEffect(() => {
+    // FIX when an horizontal scrollbar is added after the first layout
+    setWindowHeight(getHeight());
+  }, []);
+  return windowHeight;
+}

packages/scroller/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src", "types"],
+  "compilerOptions": {
+    "rootDir": "./src",
+    "baseUrl": "./",
+    "paths": {
+      "@": ["./"],
+      "*": ["src/*", "node_modules/*"]
+    }
+  }
+}

site/package.json

@@ -4,7 +4,8 @@
   "dependencies": {
     "@code-hike/mini-browser": "0.0.1",
     "@code-hike/mini-editor": "0.0.1",
-    "@code-hike/mini-terminal": "^0.1.1",
+    "@code-hike/mini-terminal": "0.0.1",
+    "@code-hike/scroller": "0.0.1",
     "@code-surfer/standalone": "^3.1.1",
     "@emotion/core": "10.0.7",
     "@mdx-js/loader": "^1.6.5",

site/pages/demo/apple-landing.js

@@ -0,0 +1 @@
+export { Demo as default } from "src/demo-apple-landing";

site/src/demo-apple-landing/editor-steps.js

@@ -0,0 +1,33 @@
+const lorem0 = require(`!!raw-loader!./steps/lorem.0.js`).default;
+const lorem1 = require(`!!raw-loader!./steps/lorem.1.js`).default;
+const lorem2 = require(`!!raw-loader!./steps/lorem.2.js`).default;
+
+const editorSteps = [
+  {
+    code: lorem0,
+    file: "lorem.js",
+    lang: "js",
+  },
+  {
+    code: lorem1,
+    file: "lorem.js",
+    lang: "js",
+  },
+  {
+    code: lorem1,
+    focus: "10:18",
+    file: "lorem.js",
+    lang: "js",
+  },
+  { code: lorem2, file: "lorem.js", lang: "js" },
+  { code: lorem2, file: "lorem.js", lang: "js" },
+];
+
+const editorTexts = [
+  "Lorem ipsum dolor sit amet consectetur adipiscing elit.",
+  "Eiusmod tempor incididunt ut labore et dolore.",
+  "Magna aliqua ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat",
+  "In voluptate velit esse cillum dolore. Eu fugiat nulla pariatur.",
+];
+
+export { editorSteps, editorTexts };