Improvements

MightyMoud · Feb 3, 2020 · 2d7715c · 2d7715c
1 parent ebe9669
commit 2d7715c
Show file tree

Hide file tree

Showing 99 changed files with 2,276 additions and 1,538 deletions.
diff --git a/.env b/.env
@@ -0,0 +1 @@
+REACT_APP_VERSION=1
diff --git a/README.md b/README.md
@@ -1,27 +1,18 @@
 # Open Chakra
 
-## Roadmap
-
-### Features
+## Todo before release
 
 Before release:
 
-- Reset props
-- Add shortcuts
-
-  - Delete component
-  - Toggle Builder mode
+- Improve flex panel
+- Editor sort/drag and drop
+- Add some shortcuts
 
-- Improve quick props (handle bool and numbers)
+## Roadmap
 
-- Editor sort/drag and drop
 - Allow Body styling
 - Improve Perf
-- Add some shortcuts
-- Bullet proof code generation
-  - Remove empty props
-  - Use integer props
-  - Smart imports
+- Tests
 - Infer from TS types (panels)
 
 ### Components

diff --git a/package.json b/package.json
@@ -9,6 +9,8 @@
     "@mdx-js/react": "^1.5.5",
     "@reach/combobox": "^0.7.3",
     "@rehooks/local-storage": "^2.1.1",
+    "@rematch/core": "^1.3.0",
+    "@rematch/persist": "^1.1.6",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
@@ -24,9 +26,12 @@
     "react-dnd": "^10.0.2",
     "react-dnd-html5-backend": "^10.0.2",
     "react-dom": "^16.12.0",
+    "react-hotkeys": "^2.0.0",
     "react-icons": "^3.8.0",
+    "react-redux": "^7.1.3",
     "react-scripts": "3.3.0",
     "react-split-pane": "^0.1.89",
+    "redux": "^4.0.5",
     "typescript": "^3.7.5"
   },
   "scripts": {
@@ -53,6 +58,7 @@
     "@types/lodash": "^4.14.149",
     "@types/prettier": "^1.19.0",
     "@types/react-color": "^3.0.1",
+    "@types/react-redux": "^7.1.7",
     "customize-cra": "^0.9.1",
     "customize-cra-react-refresh": "^1.0.1",
     "prettier": "^1.19.1",

diff --git a/src/App.tsx b/src/App.tsx
@@ -7,7 +7,10 @@ import Inspector from "./components/inspector/Inspector";
 import Sidebar from "./components/sidebar/Sidebar";
 import Header from "./components/Header";
 import { Global } from "@emotion/core";
-import { EditorProvider } from "./contexts/EditorContext";
+import { HotKeys } from "react-hotkeys";
+import useDispatch from "./hooks/useDispatch";
+import { useSelector } from "react-redux";
+import { RootState } from ".";
 
 export const COMPONENTS: ComponentType[] = [
   "Alert",
@@ -34,43 +37,90 @@ export const COMPONENTS: ComponentType[] = [
   "SimpleGrid",
   "Switch",
   "Spinner",
-  "TextArea",
   "Tag",
   "Text",
-  "TextArea"
+  "Textarea"
 ];
 
-const App = () => (
-  <DndProvider backend={Backend}>
-    <Global
-      styles={() => ({
-        "*": { borderBox: "box-sizing" }
-      })}
-    />
+export const rootComponents = COMPONENTS.filter(
+  name =>
+    !["AlertIcon", "AlertDescription", "AlertTitle", "AvatarBadge"].includes(
+      name
+    )
+);
 
-    <Header />
+const keyMap = {
+  DELETE_NODE: "backspace",
+  TOGGLE_BUILDER_MODE: "b",
+  TOGGLE_CODE_PANEL: "c"
+};
 
-    <Flex minHeight="calc(100vh - 3rem)">
-      <Box bg="white" flex={1} zIndex={10} position="relative">
-        <EditorProvider>
-          <Editor />
-        </EditorProvider>
-      </Box>
+const App = () => {
+  const selectedId = useSelector((state: RootState) => state.app.selectedId);
+  const dispatch = useDispatch();
 
-      <Sidebar />
+  const deleteNode = (event: KeyboardEvent | undefined) => {
+    if (event) {
+      event.preventDefault();
+    }
 
-      <Box
-        maxH="calc(100vh - 3rem)"
-        flex="0 0 15rem"
-        roundedRight={10}
-        bg="#f7fafc"
-        overflowY="scroll"
-        borderLeft="1px solid #cad5de"
-      >
-        <Inspector />
-      </Box>
-    </Flex>
-  </DndProvider>
-);
+    if (selectedId) {
+      dispatch.app.deleteComponent(selectedId);
+    }
+  };
+
+  const toggleBuilderMode = (event: KeyboardEvent | undefined) => {
+    if (event) {
+      event.preventDefault();
+    }
+    dispatch.app.toggleBuilderMode();
+  };
+
+  const toggleCodePanel = (event: KeyboardEvent | undefined) => {
+    if (event) {
+      event.preventDefault();
+    }
+    dispatch.app.toggleCodePanel();
+  };
+
+  const handlers = {
+    DELETE_NODE: deleteNode,
+    TOGGLE_BUILDER_MODE: toggleBuilderMode,
+    TOGGLE_CODE_PANEL: toggleCodePanel
+  };
+
+  return (
+    <HotKeys allowChanges handlers={handlers} keyMap={keyMap}>
+      <Global
+        styles={() => ({
+          "*": { borderBox: "box-sizing" }
+        })}
+      />
+      <Header />
+
+      <DndProvider backend={Backend}>
+        <Flex minHeight="calc(100vh - 3rem)">
+          <Box bg="white" flex={1} zIndex={10} position="relative">
+            <Editor />
+          </Box>
+
+          <Sidebar />
+
+          <Box
+            maxH="calc(100vh - 3rem)"
+            flex="0 0 15rem"
+            roundedRight={10}
+            bg="#f7fafc"
+            overflowY="auto"
+            overflowX="visible"
+            borderLeft="1px solid #cad5de"
+          >
+            <Inspector />
+          </Box>
+        </Flex>
+      </DndProvider>
+    </HotKeys>
+  );
+};
 
 export default App;
diff --git a/src/components/CodePanel.tsx b/src/components/CodePanel.tsx
@@ -1,20 +1,17 @@
-import React from "react";
-import { useBuilderContext } from "../contexts/BuilderContext";
+import React, { memo } from "react";
 import Highlight, { defaultProps } from "prism-react-renderer";
 import { Box, Button, useClipboard } from "@chakra-ui/core";
 import { generateCode } from "../utils/code";
 import theme from "prism-react-renderer/themes/nightOwl";
+import { RootState } from "..";
+import { useSelector } from "react-redux";
 
 const CodePanel = () => {
-  const { components, showCode } = useBuilderContext();
+  const components = useSelector((state: RootState) => state.app.components);
   const code = generateCode(components);
 
   const { onCopy, hasCopied } = useClipboard(code);
 
-  if (!showCode) {
-    return null;
-  }
-
   return (
     <Box
       zIndex={40}
@@ -28,39 +25,35 @@ const CodePanel = () => {
       left={0}
       right={0}
     >
-      {showCode && (
-        <>
-          <Button
-            onClick={onCopy}
-            size="sm"
-            position="absolute"
-            textTransform="uppercase"
-            variantColor="teal"
-            fontSize="xs"
-            height="24px"
-            top={4}
-            right="1.25em"
-          >
-            {hasCopied ? "copied" : "copy"}
-          </Button>
+      <Button
+        onClick={onCopy}
+        size="sm"
+        position="absolute"
+        textTransform="uppercase"
+        variantColor="teal"
+        fontSize="xs"
+        height="24px"
+        top={4}
+        right="1.25em"
+      >
+        {hasCopied ? "copied" : "copy"}
+      </Button>
 
-          <Highlight {...defaultProps} theme={theme} code={code} language="jsx">
-            {({ className, style, tokens, getLineProps, getTokenProps }) => (
-              <pre className={className} style={style}>
-                {tokens.map((line, i) => (
-                  <div {...getLineProps({ line, key: i })}>
-                    {line.map((token, key) => (
-                      <span {...getTokenProps({ token, key })} />
-                    ))}
-                  </div>
+      <Highlight {...defaultProps} theme={theme} code={code} language="jsx">
+        {({ className, style, tokens, getLineProps, getTokenProps }) => (
+          <pre className={className} style={style}>
+            {tokens.map((line, i) => (
+              <div {...getLineProps({ line, key: i })}>
+                {line.map((token, key) => (
+                  <span {...getTokenProps({ token, key })} />
                 ))}
-              </pre>
-            )}
-          </Highlight>
-        </>
-      )}
+              </div>
+            ))}
+          </pre>
+        )}
+      </Highlight>
     </Box>
   );
 };
 
-export default CodePanel;
+export default memo(CodePanel);
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -12,20 +12,17 @@ import {
 } from "@chakra-ui/core";
 import { DiGithubBadge } from "react-icons/di";
 import { AiFillThunderbolt } from "react-icons/ai";
-import { useBuilderContext, INITIAL_STATE } from "../contexts/BuilderContext";
 import { buildParameters } from "../utils/codesandbox";
 import { generateCode } from "../utils/code";
+import useDispatch from "../hooks/useDispatch";
+import { useSelector } from "react-redux";
+import { RootState } from "..";
 
 const Header = () => {
-  const {
-    setShowLayout,
-    showLayout,
-    setComponents,
-    components,
-    showCode,
-    setShowCode,
-    setSelectedComponent
-  } = useBuilderContext();
+  const showLayout = useSelector((state: RootState) => state.app.showLayout);
+  const showCode = useSelector((state: RootState) => state.app.showCode);
+  const components = useSelector((state: RootState) => state.app.components);
+  const dispatch = useDispatch();
 
   return (
     <DarkMode>
@@ -64,10 +61,11 @@ const Header = () => {
                 Builder mode
               </FormLabel>
               <Switch
+                defaultIsChecked={showLayout}
                 isChecked={showLayout}
                 color="teal"
                 size="sm"
-                onChange={() => setShowLayout(!showLayout)}
+                onChange={() => dispatch.app.toggleBuilderMode()}
                 id="preview"
               />
             </Flex>
@@ -77,9 +75,11 @@ const Header = () => {
                 Code panel
               </FormLabel>
               <Switch
+                defaultIsChecked={showCode}
+                isChecked={showCode}
                 id="code"
                 color="teal"
-                onChange={() => setShowCode(!showCode)}
+                onChange={() => dispatch.app.toggleCodePanel()}
                 size="sm"
               />
             </Flex>
@@ -106,8 +106,7 @@ const Header = () => {
               size="xs"
               variant="ghost"
               onClick={() => {
-                setSelectedComponent(undefined);
-                setComponents(INITIAL_STATE);
+                dispatch.app.reset();
               }}
             >
               Reset
@@ -122,7 +121,7 @@ const Header = () => {
             >
               <Link
                 isExternal
-                href="https://github.com/chakra-ui/chakra-ui/tree/master/packages/chakra-ui"
+                href="https://github.com/premieroctet/open-chakra"
               >
                 <Box as={DiGithubBadge} size="8" color="gray.200" />
               </Link>