adding carbon

2022-04-30 09:40:07 -05:00
parent 79c6981c50
commit f5561465a8
11 changed files with 109 additions and 32 deletions
@@ -107,20 +107,27 @@
    "node-loader": "^2.0.0",
    "postcss": "^8.4.12",
    "postcss-loader": "^6.2.1",
+    "sass-loader": "^12.6.0",
    "style-loader": "^3.0.0",
    "tailwindcss": "^3.0.23",
    "ts-loader": "^9.2.2",
-    "typescript": "~4.5.4"
+    "typescript": "~4.5.4",
+    "webpack": "^5.72.0"
  },
  "dependencies": {
-    "@nirvana/core": "*",
+    "@carbon/icons-react": "10.22.0",
    "@emotion/react": "^11.8.2",
    "@emotion/styled": "^11.8.1",
    "@getstation/electron-google-oauth2": "^2.1.0",
    "@mui/icons-material": "^5.5.1",
    "@mui/material": "^5.5.1",
+    "@nirvana/core": "*",
+    "@types/carbon-components-react": "^7.55.1",
    "antd": "^4.19.2",
    "axios": "^0.26.1",
+    "carbon-components": "10.25.0",
+    "carbon-components-react": "7.25.0",
+    "carbon-icons": "7.0.7",
    "electron-squirrel-startup": "^1.0.0",
    "electron-store": "^8.0.1",
    "moment": "^2.29.1",
@@ -132,6 +139,7 @@
    "react-icons": "^4.3.1",
    "react-query": "^3.34.16",
    "recoil": "^0.6.1",
+    "sass": "1.29.0",
    "socket.io-client": "^4.4.1"
  }
 }
@@ -1,4 +1,5 @@
 import "./index.css";
+import "./carbon.scss";

 import * as React from "react";
 import * as ReactDOM from "react-dom";
@@ -0,0 +1,8 @@
+@import "carbon-components/scss/globals/scss/styles.scss";
+
+// TODO: important, note that if current version of sass in package.json is causing issues, install ^1.29.0
+$body-color: red;
+
+body {
+  color: $body-color !important;
+}
@@ -1,10 +1,3 @@
-body {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
-    Arial, sans-serif;
-
-  @apply text-white;
-}
-
 #root {
  padding: 0 !important;
 }
@@ -1,10 +1,16 @@
+import "../index.css";
+import "../carbon.scss";
+
 import * as React from "react";
 import * as ReactDOM from "react-dom";

+import { Button } from "carbon-components-react";
+
 function render() {
  ReactDOM.render(
    <div>
      this is the overlay for video streams and conversations to be passed in
+      <Button>yoo carbone what's up</Button>
    </div>,
    document.getElementById("root")
  );
@@ -30,29 +30,29 @@ export default function Header() {

  const [userVideo, setUserVideo] = useState<any>(null);

-  useEffect(() => {
-    navigator.mediaDevices
-      .getUserMedia({ video: true, audio: true })
-      .then((localMediaStream: any) => {
-        console.log(localMediaStream);
+  // useEffect(() => {
+  //   navigator.mediaDevices
+  //     .getUserMedia({ video: true, audio: true })
+  //     .then((localMediaStream: any) => {
+  //       console.log(localMediaStream);

-        setUserVideo(localMediaStream);
+  //       setUserVideo(localMediaStream);

-        var video = document.querySelector("video");
-        video.srcObject = localMediaStream;
-        video.onloadedmetadata = function (e) {
-          video.play();
-        };
+  //       var video = document.querySelector("video");
+  //       video.srcObject = localMediaStream;
+  //       video.onloadedmetadata = function (e) {
+  //         video.play();
+  //       };

-        setTimeout(() => {
-          localMediaStream.getTracks().forEach((track: any) => {
-            track.stop();
-          });
+  //       setTimeout(() => {
+  //         localMediaStream.getTracks().forEach((track: any) => {
+  //           track.stop();
+  //         });

-          video.srcObject = null;
-        }, 2000);
-      });
-  }, []);
+  //         video.srcObject = null;
+  //       }, 2000);
+  //     });
+  // }, []);

  const handleClick = (event: any) => {
    setAnchorEl(event.currentTarget);
@@ -95,7 +95,7 @@ export default function Header() {
    <>
      <GlobalHotKeys handlers={handlers} keyMap={keyMap}></GlobalHotKeys>

-      <video height="400" width="430" autoPlay />
+      <video height="400" width="430" autoPlay muted />

      <div className="flex flex-row items-center bg-zinc-800 h-20 px-5">
        <Logo type={LogoType.small} className="scale-[0.4]" />
@@ -9,6 +9,15 @@ module.exports = {
    rules: require("./webpack.rules"),
  },
  resolve: {
-    extensions: [".js", ".ts", ".jsx", ".tsx", ".css", ".json"],
+    extensions: [
+      ".js",
+      ".ts",
+      ".jsx",
+      ".tsx",
+      ".css",
+      ".json",
+      ".scss",
+      ".sass",
+    ],
  },
 };
@@ -25,6 +25,6 @@ module.exports = {
  },
  plugins: plugins,
  resolve: {
-    extensions: [".js", ".ts", ".jsx", ".tsx", ".css"],
+    extensions: [".js", ".ts", ".jsx", ".tsx", ".css", ".scss", ".sass"],
  },
 };
@@ -29,4 +29,15 @@ module.exports = [
      },
    },
  },
+  {
+    test: /\.s[ac]ss$/i,
+    use: [
+      // Creates `style` nodes from JS strings
+      "style-loader",
+      // Translates CSS into CommonJS
+      "css-loader",
+      // Compiles Sass to CSS
+      "sass-loader",
+    ],
+  },
 ];
@@ -1,6 +1,7 @@
 import { BsApple, BsWindows } from "react-icons/bs";
 import { FaPeopleCarry, FaRunning } from "react-icons/fa";

+import { Button } from "carbon-components-react";
 import Footer from "../components/footer";
 import Header from "../components/header";
 import { MdOutlineNaturePeople } from "react-icons/md";
@@ -21,6 +22,8 @@ const Home: NextPage = () => {
              for remote startups.
            </span>

+            <Button>yoo carbon what's up</Button>
+
            <span className="text-zinc-400 text-lg md:text-xl mt-5 text-center md:text-left">
              The <span className="text-nirvanaTeal">{"'less is more'"}</span>{" "}
              approach. Skip zoom scheduling, <br></br> slack notifications, and
@@ -5427,7 +5427,7 @@ kind-of@^6.0.2:
  resolved "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz"
  integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==

-klona@^2.0.5:
+klona@^2.0.4, klona@^2.0.5:
  version "2.0.5"
  resolved "https://registry.npmjs.org/klona/-/klona-2.0.5.tgz"
  integrity sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ==
@@ -7736,6 +7736,14 @@ saslprep@^1.0.3:
  dependencies:
    sparse-bitfield "^3.0.3"

+sass-loader@^12.6.0:
+  version "12.6.0"
+  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-12.6.0.tgz#5148362c8e2cdd4b950f3c63ac5d16dbfed37bcb"
+  integrity sha512-oLTaH0YCtX4cfnJZxKSLAyglED0naiYfNG1iXfU5w1LNZ+ukoA5DtyDIN5zmKVZwYNJP4KRc5Y3hkWga+7tYfA==
+  dependencies:
+    klona "^2.0.4"
+    neo-async "^2.6.2"
+
 sass@1.29.0:
  version "1.29.0"
  resolved "https://registry.yarnpkg.com/sass/-/sass-1.29.0.tgz#ec4e1842c146d8ea9258c28c141b8c2b7c6ab7f1"
@@ -8983,6 +8991,36 @@ webpack@^5.37.0:
    watchpack "^2.3.1"
    webpack-sources "^3.2.3"

+webpack@^5.72.0:
+  version "5.72.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.72.0.tgz#f8bc40d9c6bb489a4b7a8a685101d6022b8b6e28"
+  integrity sha512-qmSmbspI0Qo5ld49htys8GY9XhS9CGqFoHTsOVAnjBdg0Zn79y135R+k4IR4rKK6+eKaabMhJwiVB7xw0SJu5w==
+  dependencies:
+    "@types/eslint-scope" "^3.7.3"
+    "@types/estree" "^0.0.51"
+    "@webassemblyjs/ast" "1.11.1"
+    "@webassemblyjs/wasm-edit" "1.11.1"
+    "@webassemblyjs/wasm-parser" "1.11.1"
+    acorn "^8.4.1"
+    acorn-import-assertions "^1.7.6"
+    browserslist "^4.14.5"
+    chrome-trace-event "^1.0.2"
+    enhanced-resolve "^5.9.2"
+    es-module-lexer "^0.9.0"
+    eslint-scope "5.1.1"
+    events "^3.2.0"
+    glob-to-regexp "^0.4.1"
+    graceful-fs "^4.2.9"
+    json-parse-better-errors "^1.0.2"
+    loader-runner "^4.2.0"
+    mime-types "^2.1.27"
+    neo-async "^2.6.2"
+    schema-utils "^3.1.0"
+    tapable "^2.1.1"
+    terser-webpack-plugin "^5.1.3"
+    watchpack "^2.3.1"
+    webpack-sources "^3.2.3"
+
 websocket-driver@>=0.5.1, websocket-driver@^0.7.4:
  version "0.7.4"
  resolved "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz"