Onboarding

package.json

@@ -27,6 +27,7 @@
     "react-dom": "^17.0.2",
     "react-hotkeys-hook": "^3.3.2",
     "react-inlinesvg": "^2.3.0",
+    "react-keyboard-event-handler": "^1.5.4",
     "react-router-dom": "^5.2.0"
   },
   "devDependencies": {
@@ -38,13 +39,20 @@
     "@babel/preset-react": "^7.9.4",
     "all-contributors-cli": "^6.14.2",
     "auto": "^9.35.1",
+    "autoprefixer": "^10.4.2",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.3",
     "babel-loader": "^8.1.0",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-plugin-transform-react-jsx": "^6.24.1",
+    "css-loader": "^5.2.4",
     "extract-text-webpack-plugin": "^3.0.2",
+    "postcss": "^8.4.5",
+    "postcss-loader": "^4.0.0",
+    "postcss-preset-env": "^6.7.0",
     "react-art": "^17.0.2",
+    "style-loader": "^2.0.0",
+    "tailwindcss": "^3.0.15",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.12",
     "webpack-node-externals": "^1.7.2"

postcss.config.js

@@ -0,0 +1,6 @@
+const autoprefixer = require("autoprefixer");
+const tailwindcss = require("tailwindcss");
+
+module.exports = {
+  plugins: ["postcss-preset-env", autoprefixer, tailwindcss],
+};

src/ChunkCollection.jsx

@@ -1,4 +1,4 @@
-// @ts-check
+// @ts-nocheck
 import React, { useEffect, useState, useContext } from "react";
 import { ChunkCollectionContext } from "./ChunkCollectionContext";
 import { EditmodeContext } from "./EditmodeContext";
@@ -105,7 +105,7 @@ export function ChunkCollection({
             {typeof children === "function"
               ? children(getChunk, chunk, index)
               : children}
-          </div>  
+          </div>
         </ChunkCollectionContext.Provider>
       ))}
       {chunks.length && (
@@ -114,9 +114,7 @@ export function ChunkCollection({
           value={placeholderChunk}
         >
           <Template
-            className={computeClassName(
-              "chunks-col-placeholder-wrapper"
-            )}
+            className={computeClassName("chunks-col-placeholder-wrapper")}
           >
             {typeof children === "function"
               ? children(getChunk, placeholderChunk, 0)
@@ -129,12 +127,9 @@ export function ChunkCollection({
 }
 
 function Template({ children, ...attrs }) {
-  console.log
+  console.log;
   return (
-    <em-template
-      {...attrs}
-      style={{display: "none"}}
-    >
+    <em-template {...attrs} style={{ display: "none" }}>
       {children}
     </em-template>
   );

src/Editmode.jsx

@@ -5,6 +5,9 @@ import { getTimedCachedData, storeTimedCache } from "./utilities";
 import { api } from "./utilities";
 import Watermark from "./Watermark.jsx";
 import { useHotkeys } from "react-hotkeys-hook";
+import KeyboardEventHandler from "react-keyboard-event-handler";
+import { CONTAINER_CLASS } from "./onboarding/utils/CONSTANTS";
+import { renderOnboarder } from "./onboarding/index.jsx";
 
 export function Editmode({
   children,
@@ -16,15 +19,17 @@ export function Editmode({
   const [branch, setbranch] = useState("");
   const [hasWaterMark, setHasWaterMark] = useState(null);
   const [isEditorActive, setIsEditorActive] = useState(false);
+  const [isOnboardingActive, setIsOnboardingActive] = useState(false);
   const isBrowser = () => typeof window !== "undefined";
   if (isBrowser()) {
     window["chunksPresetBranchId"] = branchId;
   }
   useHotkeys("cmd+shift+e", () => {
     setIsEditorActive(!isEditorActive);
   });
+
   if (!projectId) {
-    throw new Error("<Editmode projectId={...}> is missing a valid projectId");
+    throw new Error("<Editmode projectId={...}> is missing a valid projectId.");
   }
   const cacheId = projectId + "_provider";
   useEffect(() => {
@@ -45,13 +50,13 @@ export function Editmode({
 
     script.src =
       "https://unpkg.com/editmode-magic-editor@~1/dist/magic-editor.js";
-    
+
     if (!window["magicEditorInjected"]) {
       script.setAttribute("async", "");
       document.body.append(script);
-      window["magicEditorInjected"] = true
+      window["magicEditorInjected"] = true;
     }
-    
+
     if (!cachedItem) {
       api
         .get(`/projects/${projectId}`)
@@ -75,10 +80,27 @@ export function Editmode({
     <EditmodeContext.Provider
       value={{ branch, projectId, defaultChunks, next }}
     >
+      {isBrowser() && (
+        <KeyboardEventHandler
+          handleKeys={["cmd+shift+l"]}
+          onKeyEvent={() => {
+            if (!isOnboardingActive) {
+              renderOnboarder(setIsOnboardingActive);
+              setIsOnboardingActive(
+                (isOnboardingActive) => !isOnboardingActive
+              );
+            } else {
+              let containerDiv = document.querySelector(`.${CONTAINER_CLASS}`);
+              containerDiv.remove();
+              setIsOnboardingActive(
+                (isOnboardingActive) => !isOnboardingActive
+              );
+            }
+          }}
+        />
+      )}
       {children}
       {hasWaterMark && <Watermark projectId={projectId} />}
     </EditmodeContext.Provider>
   );
 }
-
-export default Editmode;