feat(docs): add keymap upgrader

Added a documentation page with a script that upgrades deprecated key
codes and behaviors to their replacements.

Fixes #299

2 files changed, 73 insertions, 0 deletions

diff --git a/docs/src/components/KeymapUpgrader/index.jsx b/docs/src/components/KeymapUpgrader/index.jsx
new file mode 100644
index 0000000..8d3a60b
--- /dev/null
+++ b/docs/src/components/KeymapUpgrader/index.jsx
@@ -0,0 +1,47 @@
+/*
+ * Copyright (c) 2020 The ZMK Contributors
+ *
+ * SPDX-License-Identifier: CC-BY-NC-SA-4.0
+ */
+
+import React from "react";
+import { useAsync } from "react-async";
+
+import { initParser, upgradeKeymap } from "@site/src/keymap-upgrade";
+import CodeBlock from "@theme/CodeBlock";
+
+import styles from "./styles.module.css";
+
+export default function KeymapUpgrader() {
+  const { error, isPending } = useAsync(initParser);
+
+  if (isPending) {
+    return <p>Loading...</p>;
+  }
+
+  if (error) {
+    return <p className="error">Error: {error.message}</p>;
+  }
+
+  return <Editor />;
+}
+
+function Editor() {
+  const [keymap, setKeymap] = React.useState("");
+  const upgraded = upgradeKeymap(keymap);
+
+  return (
+    <div>
+      <textarea
+        className={styles.editor}
+        placeholder="Paste keymap here"
+        spellCheck={false}
+        value={keymap}
+        onChange={(e) => setKeymap(e.target.value)}
+      ></textarea>
+      <div className={styles.result}>
+        <CodeBlock metastring={'title="Upgraded Keymap"'}>{upgraded}</CodeBlock>
+      </div>
+    </div>
+  );
+}
diff --git a/docs/src/components/KeymapUpgrader/styles.module.css b/docs/src/components/KeymapUpgrader/styles.module.css
new file mode 100644
index 0000000..31e06b9
--- /dev/null
+++ b/docs/src/components/KeymapUpgrader/styles.module.css
@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) 2020 The ZMK Contributors
+ *
+ * SPDX-License-Identifier: CC-BY-NC-SA-4.0
+ */
+
+.editor {
+  font-family: var(--ifm-font-family-monospace);
+  font-size: var(--ifm-font-size-base);
+  line-height: var(--ifm-pre-line-height);
+  tab-size: 4;
+
+  color: var(--ifm-pre-color);
+  background-color: var(--ifm-pre-background);
+
+  border: none;
+  border-radius: var(--ifm-pre-border-radius);
+
+  width: 100%;
+  min-height: 10em;
+  padding: var(--ifm-pre-padding);
+}
+
+.result {
+  tab-size: 4;
+}