Add line groups story

Author: pomber

packages/storybook/src/code-tween.story.js

@@ -93,3 +93,72 @@ const x = (y) => y++ * foobarbaz
     </WithProgress>
   )
 }
+
+export const lineGroups = ({ center }) => {
+  const prevCode = `
+console.log(1)
+console.log(2)
+console.log(3)
+console.log(4)
+`.trim()
+
+  const nextCode = `
+console.log(1)
+console.log(3)
+const x = (y) => y++ * foobarbaz
+`.trim()
+
+  const prevAnnotations = [
+    { focus: "2:3" },
+    { focus: "4[6:8]" },
+  ]
+
+  const nextAnnotations = []
+  const [tween, setTween] = React.useState(null)
+
+  React.useEffect(() => {
+    Promise.all([
+      highlight({ code: prevCode, lang: "js", theme }),
+      highlight({ code: nextCode, lang: "js", theme }),
+    ]).then(([prevCode, nextCode]) =>
+      setTween({
+        prev: {
+          code: prevCode,
+          focus: "1:2",
+          annotations: prevAnnotations,
+        },
+        next: {
+          code: nextCode,
+          focus: "2,3",
+          annotations: nextAnnotations,
+        },
+      })
+    )
+  }, [])
+
+  return (
+    <WithProgress>
+      {progress => (
+        <div
+          style={{ height: 300, outline: "1px solid red" }}
+        >
+          {tween ? (
+            <CodeTween
+              progress={progress}
+              tween={tween}
+              style={{ height: "100%" }}
+              config={{
+                horizontalCenter: center,
+                theme,
+                minZoom: 0.5,
+                maxZoom: 2,
+              }}
+            />
+          ) : (
+            "Loading..."
+          )}
+        </div>
+      )}
+    </WithProgress>
+  )
+}