From ff638eb0105a22780d5084da58da83c98dc6d324 Mon Sep 17 00:00:00 2001
From: innovaker <66737976+innovaker@users.noreply.github.com>
Date: Fri, 6 Nov 2020 19:42:54 +0000
Subject: docs(codes): Add (key) codes documentation

Create codes documentation for standardized keys.

Closes #218.  Fixes #308.  Ref #21.
---
 docs/src/components/codes/Table.jsx | 80 +++++++++++++++++++++++++++++++++++++
 1 file changed, 80 insertions(+)
 create mode 100644 docs/src/components/codes/Table.jsx

(limited to 'docs/src/components/codes/Table.jsx')

diff --git a/docs/src/components/codes/Table.jsx b/docs/src/components/codes/Table.jsx
new file mode 100644
index 0000000..c7dd20c
--- /dev/null
+++ b/docs/src/components/codes/Table.jsx
@@ -0,0 +1,80 @@
+/*
+ * Copyright (c) 2020 The ZMK Contributors
+ *
+ * SPDX-License-Identifier: CC-BY-NC-SA-4.0
+ */
+
+import React from "react";
+import PropTypes from "prop-types";
+import TableRow from "./TableRow";
+import Footnotes from "./Footnotes";
+import LinkIcon from "./LinkIcon";
+import operatingSystems from "@site/src/data/operating-systems";
+import { getCodes } from "@site/src/hid";
+import { getGroup } from "@site/src/groups";
+import { getFootnote } from "@site/src/footnotes";
+
+function extractFootnoteIds(codes) {
+  return Array.from(
+    new Set(
+      codes
+        .flatMap(({ footnotes }) => Object.values(footnotes))
+        .map((refs) => (Array.isArray(refs) ? refs.flat() : refs))
+    )
+  );
+}
+
+export default function Table({ group }) {
+  const codes = getCodes(getGroup(group));
+
+  const footnotesAnchor = group + "-" + "footnotes";
+
+  const tableFootnotes = extractFootnoteIds(codes).map((id, i) => {
+    const Component = getFootnote(id);
+    return {
+      id,
+      anchor: footnotesAnchor,
+      symbol: i + 1,
+      value: Component ? <Component /> : undefined,
+    };
+  });
+
+  return (
+    <div className="codes">
+      <table>
+        <thead>
+          <tr>
+            <th className="names">Names</th>
+            <th className="description">Description</th>
+            <th className="documentation" title="Documentation">
+              <LinkIcon />
+            </th>
+            {operatingSystems.map(({ key, className, heading, title }) => (
+              <th key={key} className={`os ${className}`} title={title}>
+                {heading}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {Array.isArray(codes)
+            ? codes.map((code) => (
+                <TableRow
+                  key={code.names[0]}
+                  {...code}
+                  tableFootnotes={tableFootnotes}
+                />
+              ))
+            : undefined}
+        </tbody>
+      </table>
+      {tableFootnotes.length > 0 ? (
+        <Footnotes id={footnotesAnchor} footnotes={tableFootnotes} />
+      ) : undefined}
+    </div>
+  );
+}
+
+Table.propTypes = {
+  group: PropTypes.string.isRequired,
+};
-- 
cgit v1.2.3