refactor: typescript

.gitignore

@@ -3,3 +3,5 @@
 node_modules
 dist
 .idea
+**/*.js
+

.vscode/launch.json

@@ -0,0 +1,73 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Debug AVA test file",
+      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/ava",
+      "runtimeArgs": [
+        "debug",
+        "--break",
+        "${file}"
+      ],
+      "port": 9229,
+      "outputCapture": "std",
+      "skipFiles": [
+        "<node_internals>/**/*.js"
+      ]
+    },
+    {
+      "type": "node",
+      "request": "attach",
+      "name": "Attach",
+      "port": 9229,
+      // "skipFiles": [
+      //   "<node_internals>/**"
+      // ]
+    },
+      {
+        "type": "node",
+        "request": "launch",
+        "name": "Mocha All",
+        "program": "${workspaceFolder}/node_modules/mocha/bin/_mocha",
+        "args": [
+            "--timeout",
+            "999999",
+            "--colors",
+            "${workspaceFolder}/test"
+        ],
+        "console": "integratedTerminal",
+        "internalConsoleOptions": "neverOpen"
+    },
+    {
+        "type": "node",
+        "request": "launch",
+        "name": "Mocha Current File",
+        "program": "${workspaceFolder}/node_modules/mocha/bin/_mocha",
+        "args": [
+            "--timeout",
+            "999999",
+            "--colors",
+            "${file}"
+        ],
+        "console": "integratedTerminal",
+        "internalConsoleOptions": "neverOpen"
+    },
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Launch Program",
+      "skipFiles": [
+        "<node_internals>/**"
+      ],
+      "program": "${workspaceFolder}/src/index.js",
+      "outFiles": [
+        "${workspaceFolder}/**/*.js"
+      ]
+    }
+  ]
+}

examples/components/AnimatedBox.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+
+export function AnimatedBox(props: {
+  // 10%, 100%
+  width?: string;
+  // 10%, 100%
+  height?: string;
+  time?: number;
+  initialPosition?: number;
+}) {
+  const [position, setPosition] = React.useState(props.initialPosition || 0);
+  const [dir, setDir] = React.useState(true);
+
+  React.useEffect(() => {
+    const iv = setInterval(() => {
+      const newDirection = position === (dir ? 90 : 0) ? !dir : dir;
+      setDir(newDirection);
+      const newPosition = newDirection ? position + 1 : position - 1;
+      setPosition(newPosition);
+    }, props.time || 33.333333);
+    return () => clearInterval(iv);
+  });
+
+  return (
+    <box
+      border={{ type: "line" }}
+      height={props.height || "20%"}
+      left={position + "%"}
+      style={{ bg: "cyan", border: { fg: "blue" } }}
+      top="center"
+      width={props.width || "10%"}
+    />
+  );
+}