Implemented Icons and a Dark Mode toggle

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "westreact",
+  "name": "reaction-time",
   "version": "1.0.0",
   "description": "",
   "main": "lib/index.js",
@@ -31,6 +31,7 @@
     "@babel/preset-react": "^7.10.4",
     "@emotion/core": "^10.0.28",
     "@emotion/styled": "^10.0.27",
+    "@rollup/plugin-json": "^4.1.0",
     "@testing-library/react": "^10.4.7",
     "babel-loader": "^8.1.0",
     "babel-plugin-emotion": "^10.0.33",

rollup.config.js

@@ -4,6 +4,7 @@ import resolve from "rollup-plugin-node-resolve";
 import external from "rollup-plugin-peer-deps-external";
 import { uglify } from "rollup-plugin-uglify";
 import { terser } from "rollup-plugin-terser";
+import json from "@rollup/plugin-json";
 
 import packageJSON from "./package.json";
 const input = "./src/index.js";
@@ -19,6 +20,7 @@ export default [
       sourcemap: true,
     },
     plugins: [
+      json(),
       babel({
         exclude: "node_modules/**",
       }),
@@ -35,6 +37,7 @@ export default [
       sourcemap: true,
     },
     plugins: [
+      json(),
       babel({
         exclude: "node_modules/**",
       }),
@@ -59,6 +62,7 @@ export default [
       },
     },
     plugins: [
+      json(),
       babel({
         exclude: "node_modules/**",
       }),
@@ -81,6 +85,7 @@ export default [
       sourcemap: true,
     },
     plugins: [
+      json(),
       babel({
         exclude: "node_modules/**",
       }),
@@ -100,6 +105,7 @@ export default [
       sourcemap: true,
     },
     plugins: [
+      json(),
       babel({
         exclude: "node_modules/**",
       }),
@@ -117,6 +123,7 @@ export default [
       sourcemap: true,
     },
     plugins: [
+      json(),
       babel({
         exclude: "node_modules/**",
       }),

src/components/DarkMode.js

@@ -0,0 +1,31 @@
+import React, { Component } from "react";
+import { getCurrentTheme, setTheme } from "airspeed";
+import Icon from "../components/Icon";
+/**
+ * Button for switching between light mode and dark mode
+ */
+export default class DarkMode extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { theme: getCurrentTheme() };
+
+    this.toggleTheme = this.toggleTheme.bind(this);
+  }
+  toggleTheme() {
+    var newTh = this.state.theme === "light" ? "dark" : "light";
+    setTheme(newTh);
+    this.setState({ theme: newTh });
+  }
+
+  render() {
+    return (
+      <button className="button-darkmode" onClick={this.toggleTheme}>
+        {this.state.theme === "light" ? (
+          <Icon icon="moon" />
+        ) : (
+          <Icon icon="sun" />
+        )}
+      </button>
+    );
+  }
+}

src/components/Icon.js

@@ -0,0 +1,20 @@
+import React, { Component } from "react";
+import icons from "../resources/icons.json";
+
+export default class Icon extends Component {
+  getIcon(cls) {
+    if (!cls) return "";
+    var name = cls.replace("-", "_");
+    if (icons[name]) return icons[name];
+    else return "";
+  }
+
+  render() {
+    return (
+      <div
+        className={`wrapper-icon ${this.props.className}`}
+        dangerouslySetInnerHTML={{ __html: this.getIcon(this.props.icon) }}
+      />
+    );
+  }
+}

src/index.js

@@ -1,4 +1,5 @@
 export { default as Button } from "components/Button";
+export { default as DarkMode } from "components/DarkMode";
 export { default as Alert } from "components/Alert";
 export { default as Badge } from "components/Badge";
 export { default as TextInput } from "components/form/TextInput";