From 5aa8a07aa9d15639e0315fef12d208040c739b7f Mon Sep 17 00:00:00 2001
From: Joel Spadin <joelspadin@gmail.com>
Date: Sat, 7 Nov 2020 18:03:20 -0600
Subject: feat(docs): add keymap upgrader

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

Fixes #299
---
 docs/src/components/KeymapUpgrader/index.jsx | 47 ++++++++++++++++++++++++++++
 1 file changed, 47 insertions(+)
 create mode 100644 docs/src/components/KeymapUpgrader/index.jsx

(limited to 'docs/src/components/KeymapUpgrader/index.jsx')

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>
+  );
+}
-- 
cgit v1.2.3