Scroll to changes

.storybook/addons.js

@@ -0,0 +1,2 @@
+import "@storybook/addon-actions/register";
+import "@storybook/addon-links/register";

.storybook/config.js

@@ -0,0 +1,9 @@
+import { configure } from "@storybook/react";
+
+const req = require.context("../src", true, /\.story\.js$/);
+
+function loadStories() {
+  req.keys().forEach(filename => req(filename));
+}
+
+configure(loadStories, module);

package.json

@@ -9,11 +9,12 @@
     "js-base64": "^2.5.1",
     "netlify-auth-providers": "^1.0.0-alpha5",
     "prismjs": "^1.15.0",
-    "react": "^16.8.1",
-    "react-dom": "^16.8.1",
+    "react": "^16.8.4",
+    "react-dom": "^16.8.4",
     "react-scripts": "2.1.3",
     "react-swipeable": "^4.3.2",
     "react-use": "^5.2.2",
+    "rebound": "^0.1.0",
     "workerize-loader": "^1.0.4"
   },
   "scripts": {
@@ -23,7 +24,9 @@
     "test-prettier": "prettier --check \"**/*.{js,jsx,md,json,html,css,yml}\" --ignore-path .gitignore",
     "test-cra": "react-scripts test",
     "test": "run-s test-prettier test-cra",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "storybook": "start-storybook -p 9009 -s public",
+    "build-storybook": "build-storybook -s public"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -35,6 +38,12 @@
     "not op_mini all"
   ],
   "devDependencies": {
+    "@babel/core": "^7.3.4",
+    "@storybook/addon-actions": "^4.1.13",
+    "@storybook/addon-links": "^4.1.13",
+    "@storybook/addons": "^4.1.13",
+    "@storybook/react": "^4.1.13",
+    "babel-loader": "8.0.4",
     "npm-run-all": "^4.1.5",
     "prettier": "^1.16.4"
   }

src/airframe/airframe.js

@@ -1,25 +1,34 @@
 import easing from "./easing";
+const MULTIPLY = "multiply";
+
 /* eslint-disable */
-function mergeResults(results) {
+function mergeResults(results, composite) {
   const firstResult = results[0];
   if (results.length < 2) {
     return firstResult;
   }
   if (Array.isArray(firstResult)) {
-    // console.log("merge", results);
     return firstResult.map((_, i) => {
-      return mergeResults(results.map(result => result[i]));
+      return mergeResults(results.map(result => result[i]), composite);
     });
   } else {
-    return Object.assign({}, ...results);
+    const merged = Object.assign({}, ...results);
+
+    if (composite === MULTIPLY) {
+      const opacities = results.map(x => x.opacity).filter(x => x != null);
+      if (opacities.length !== 0) {
+        merged.opacity = opacities.reduce((a, b) => a * b);
+      }
+    }
+    return merged;
   }
 }
 
 const airframe = {
   parallel: ({ children: fns }) => {
     return (t, ...args) => {
       const styles = fns.map(fn => fn(t, ...args));
-      const result = mergeResults(styles);
+      const result = mergeResults(styles, MULTIPLY);
       return result;
     };
   },

src/animation.js

@@ -3,6 +3,7 @@ import { createAnimation, Stagger } from "./airframe/airframe";
 import easing from "./airframe/easing";
 
 const dx = 250;
+const offOpacity = 0.6;
 
 /* @jsx createAnimation */
 
@@ -43,7 +44,7 @@ function GrowHeight() {
   );
 }
 
-function SwitchLines({ filterExit, filterEnter }) {
+function SwitchLines({ filterExit, filterEnter, filterFadeOut }) {
   return (
     <parallel>
       <Stagger interval={0.2} filter={filterExit}>
@@ -59,6 +60,19 @@ function SwitchLines({ filterExit, filterEnter }) {
           <SlideFromRight />
         </chain>
       </Stagger>
+      <Stagger interval={0} filter={filterEnter}>
+        <tween from={{ opacity: offOpacity }} to={{ opacity: 1 }} />
+      </Stagger>
+      <Stagger interval={0} filter={filterFadeOut}>
+        <tween
+          from={{ opacity: 1 }}
+          to={{ opacity: offOpacity }}
+          ease={easing.easeOutCubic}
+        />
+      </Stagger>
+      <Stagger interval={0} filter={l => !filterEnter(l) && !filterFadeOut(l)}>
+        <tween from={{ opacity: offOpacity }} to={{ opacity: offOpacity }} />
+      </Stagger>
     </parallel>
   );
 }
@@ -68,10 +82,12 @@ export default (
     <SwitchLines
       filterExit={line => line.left && !line.middle}
       filterEnter={line => !line.left && line.middle}
+      filterFadeOut={line => false}
     />
     <SwitchLines
       filterExit={line => line.middle && !line.right}
       filterEnter={line => !line.middle && line.right}
+      filterFadeOut={line => !line.left && line.middle}
     />
   </chain>
 );

src/app.js

@@ -37,12 +37,7 @@ function InnerApp({ gitProvider }) {
     return <Error error={{ status: 404 }} gitProvider={gitProvider} />;
   }
 
-  const commits = versions.map(v => v.commit);
-  const slideLines = versions.map(v => v.lines);
-
-  return (
-    <History commits={commits} slideLines={slideLines} loadMore={loadMore} />
-  );
+  return <History versions={versions} loadMore={loadMore} />;
 }
 
 function useVersionsLoader(gitProvider) {

src/git-providers/differ.js

@@ -84,3 +84,26 @@ export function getSlides(codes, language) {
       .filter(line => line.middle || line.left || line.right);
   });
 }
+
+export function getChanges(lines) {
+  const changes = [];
+  let currentChange = null;
+  let i = 0;
+  const isNewLine = i => !lines[i].left && lines[i].middle;
+  while (i < lines.length) {
+    if (isNewLine(i)) {
+      if (!currentChange) {
+        currentChange = { start: i };
+      }
+    } else {
+      if (currentChange) {
+        currentChange.end = i - 1;
+        changes.push(currentChange);
+        currentChange = null;
+      }
+    }
+    i++;
+  }
+
+  return changes;
+}

src/git-providers/versioner.worker.js

@@ -1,5 +1,5 @@
 import { getLanguage, loadLanguage } from "./language-detector";
-import { getSlides } from "./differ";
+import { getSlides, getChanges } from "./differ";
 
 import github from "./github-commit-fetcher";
 import gitlab from "./gitlab-commit-fetcher";
@@ -25,5 +25,9 @@ export async function getVersions(source, params) {
 
   const codes = commits.map(commit => commit.content);
   const slides = getSlides(codes, lang);
-  return commits.map((commit, i) => ({ commit, lines: slides[i] }));
+  return commits.map((commit, i) => ({
+    commit,
+    lines: slides[i],
+    changes: getChanges(slides[i])
+  }));
 }

src/git-providers/vscode-provider.js

@@ -1,5 +1,5 @@
 import { getLanguage, loadLanguage } from "./language-detector";
-import { getSlides } from "./differ";
+import { getSlides, getChanges } from "./differ";
 
 const vscode = window.vscode;
 
@@ -43,7 +43,11 @@ async function getVersions(last) {
 
   const codes = commits.map(commit => commit.content);
   const slides = getSlides(codes, lang);
-  return commits.map((commit, i) => ({ commit, lines: slides[i] }));
+  return commits.map((commit, i) => ({
+    commit,
+    lines: slides[i],
+    changes: getChanges(slides[i])
+  }));
 }
 
 export default {

src/history.js

@@ -99,14 +99,13 @@ function CommitList({ commits, currentIndex, selectCommit }) {
   );
 }
 
-export default function History({ commits, slideLines, loadMore }) {
-  return (
-    <Slides slideLines={slideLines} commits={commits} loadMore={loadMore} />
-  );
+export default function History({ versions, loadMore }) {
+  return <Slides versions={versions} loadMore={loadMore} />;
 }
 
-function Slides({ commits, slideLines, loadMore }) {
+function Slides({ versions, loadMore }) {
   const [current, target, setTarget] = useSliderSpring(0);
+  const commits = versions.map(v => v.commit);
   const setClampedTarget = newTarget => {
     setTarget(Math.min(commits.length - 0.75, Math.max(-0.25, newTarget)));
     if (newTarget >= commits.length - 5) {
@@ -140,12 +139,13 @@ function Slides({ commits, slideLines, loadMore }) {
         onSwipedRight={prevSlide}
         style={{ height: "100%" }}
       >
-        <Slide time={index - current} lines={slideLines[index]} />
+        <Slide time={index - current} version={versions[index]} />
       </Swipeable>
     </React.Fragment>
   );
 }
 
+// TODO use ./useSpring
 function useSliderSpring(initial) {
   const [target, setTarget] = useState(initial);
   const tension = 0;

src/index.js

@@ -3,4 +3,9 @@ import React from "react";
 import ReactDOM from "react-dom";
 
 const root = document.getElementById("root");
-ReactDOM.render(<App />, root);
+ReactDOM.render(
+  <React.unstable_ConcurrentMode>
+    <App />
+  </React.unstable_ConcurrentMode>,
+  root
+);