lint basic example

acproject · Jan 2, 2020 · f910318 · f910318
1 parent 3c08945
commit f910318
Show file tree

Hide file tree

Showing 16 changed files with 468 additions and 269 deletions.
diff --git a/packages/examples/basic/components/Header.js b/packages/examples/basic/components/Header.js
@@ -1,29 +1,57 @@
 import React from "react";
-import { Box, Typography, Grid, Button as MaterialButton } from "@material-ui/core";
+import {
+  Box,
+  Typography,
+  Grid,
+  Button as MaterialButton
+} from "@material-ui/core";
 import { useEditor } from "@craftjs/core";
 import { Card } from "./user/Card";
 import { Button } from "./user/Button";
 import { Text } from "./user/Text";
 
 export const Toolbox = () => {
-  const { connectors, query } = useEditor();
+  const { connectors } = useEditor();
 
   return (
     <Box px={2} py={2}>
-      <Grid container direction="column"  alignItems="center" justify="center" spacing={1}>
+      <Grid
+        container
+        direction="column"
+        alignItems="center"
+        justify="center"
+        spacing={1}
+      >
         <Box pb={2}>
           <Typography>Drag to add</Typography>
         </Box>
         <Grid container direction="column" item>
-          <MaterialButton ref={ref=> connectors.create(ref, <Button text="Click me" size="small" />)} variant="contained">Button</MaterialButton>
+          <MaterialButton
+            ref={ref =>
+              connectors.create(ref, <Button text="Click me" size="small" />)
+            }
+            variant="contained"
+          >
+            Button
+          </MaterialButton>
         </Grid>
         <Grid container direction="column" item>
-          <MaterialButton ref={ref=> connectors.create(ref, <Text text="Hi world" />)} variant="contained">Text</MaterialButton>
+          <MaterialButton
+            ref={ref => connectors.create(ref, <Text text="Hi world" />)}
+            variant="contained"
+          >
+            Text
+          </MaterialButton>
         </Grid>
         <Grid container direction="column" item>
-          <MaterialButton ref={ref=> connectors.create(ref, <Card />)} variant="contained">Card</MaterialButton>
+          <MaterialButton
+            ref={ref => connectors.create(ref, <Card />)}
+            variant="contained"
+          >
+            Card
+          </MaterialButton>
         </Grid>
       </Grid>
     </Box>
-  )
-};
+  );
+};
diff --git a/packages/examples/basic/components/SettingsPanel.js b/packages/examples/basic/components/SettingsPanel.js
@@ -1,54 +1,62 @@
-import { Box, Chip, Grid, Typography, Button as MaterialButton } from "@material-ui/core";
+import React from "react";
+import {
+  Box,
+  Chip,
+  Grid,
+  Typography,
+  Button as MaterialButton
+} from "@material-ui/core";
 import { useEditor } from "@craftjs/core";
 
 export const SettingsPanel = () => {
   const { actions, selected } = useEditor((state, query) => {
     const currentNodeId = state.events.selected;
     let selected;
 
-    if ( currentNodeId ) {
+    if (currentNodeId) {
       selected = {
         id: currentNodeId,
         name: state.nodes[currentNodeId].data.name,
-        settings: state.nodes[currentNodeId].related && state.nodes[currentNodeId].related.settings,
+        settings:
+          state.nodes[currentNodeId].related &&
+          state.nodes[currentNodeId].related.settings,
         isDeletable: query.node(currentNodeId).isDeletable()
       };
     }
 
     return {
       selected
-    }
+    };
   });
 
-  return selected ? (    
+  return selected ? (
     <Box bgcolor="rgba(0, 0, 0, 0.06)" mt={2} px={2} py={2}>
       <Grid container direction="column" spacing={0}>
         <Grid item>
           <Box pb={2}>
             <Grid container alignItems="center">
-              <Grid item xs><Typography variant="subtitle1">Selected</Typography></Grid>
-              <Grid item><Chip size="small" color="primary" label={selected.name} /></Grid>
+              <Grid item xs>
+                <Typography variant="subtitle1">Selected</Typography>
+              </Grid>
+              <Grid item>
+                <Chip size="small" color="primary" label={selected.name} />
+              </Grid>
             </Grid>
           </Box>
         </Grid>
-        { 
-          selected.settings && React.createElement(selected.settings)
-        }
-        {
-          selected.isDeletable ? (
-            <MaterialButton
-              variant="contained"
-              color="default"
-              onClick={() => {
-                actions.delete(selected.id);
-              }}
-            >
-              Delete
-            </MaterialButton>
-          ) : null
-        }
+        {selected.settings && React.createElement(selected.settings)}
+        {selected.isDeletable ? (
+          <MaterialButton
+            variant="contained"
+            color="default"
+            onClick={() => {
+              actions.delete(selected.id);
+            }}
+          >
+            Delete
+          </MaterialButton>
+        ) : null}
       </Grid>
     </Box>
-  ) : null
-}
-
+  ) : null;
+};
diff --git a/packages/examples/basic/components/Toolbox.js b/packages/examples/basic/components/Toolbox.js
@@ -1,33 +1,68 @@
 import React from "react";
-import { Box, Typography, Grid, Button as MaterialButton } from "@material-ui/core";
+import {
+  Box,
+  Typography,
+  Grid,
+  Button as MaterialButton
+} from "@material-ui/core";
 import { useEditor, Canvas } from "@craftjs/core";
 import { Container } from "./user/Container";
 import { Card } from "./user/Card";
 import { Button } from "./user/Button";
 import { Text } from "./user/Text";
 
 export const Toolbox = () => {
-  const { connectors, query } = useEditor();
+  const { connectors } = useEditor();
 
   return (
     <Box px={2} py={2}>
-      <Grid container direction="column"  alignItems="center" justify="center" spacing={1}>
+      <Grid
+        container
+        direction="column"
+        alignItems="center"
+        justify="center"
+        spacing={1}
+      >
         <Box pb={2}>
           <Typography>Drag to add</Typography>
         </Box>
         <Grid container direction="column" item>
-          <MaterialButton ref={ref=> connectors.create(ref, <Button text="Click me" size="small" />)} variant="contained">Button</MaterialButton>
+          <MaterialButton
+            ref={ref =>
+              connectors.create(ref, <Button text="Click me" size="small" />)
+            }
+            variant="contained"
+          >
+            Button
+          </MaterialButton>
         </Grid>
         <Grid container direction="column" item>
-          <MaterialButton ref={ref=> connectors.create(ref, <Text text="Hi world" />)} variant="contained">Text</MaterialButton>
+          <MaterialButton
+            ref={ref => connectors.create(ref, <Text text="Hi world" />)}
+            variant="contained"
+          >
+            Text
+          </MaterialButton>
         </Grid>
         <Grid container direction="column" item>
-          <MaterialButton ref={ref=> connectors.create(ref, <Canvas is={Container} padding={20} />)} variant="contained">Container</MaterialButton>
+          <MaterialButton
+            ref={ref =>
+              connectors.create(ref, <Canvas is={Container} padding={20} />)
+            }
+            variant="contained"
+          >
+            Container
+          </MaterialButton>
         </Grid>
         <Grid container direction="column" item>
-          <MaterialButton ref={ref=> connectors.create(ref, <Card />)} variant="contained">Card</MaterialButton>
+          <MaterialButton
+            ref={ref => connectors.create(ref, <Card />)}
+            variant="contained"
+          >
+            Card
+          </MaterialButton>
         </Grid>
       </Grid>
     </Box>
-  )
-};
+  );
+};
diff --git a/packages/examples/basic/components/Topbar.js b/packages/examples/basic/components/Topbar.js
@@ -1,11 +1,23 @@
 import React, { useState } from "react";
-import { Box, FormControlLabel, Switch, Grid, Button as MaterialButton, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, TextField, Snackbar } from "@material-ui/core";
+import {
+  Box,
+  FormControlLabel,
+  Switch,
+  Grid,
+  Button as MaterialButton,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  TextField,
+  Snackbar
+} from "@material-ui/core";
 import { useEditor } from "@craftjs/core";
 import lz from "lzutf8";
-import copy from 'copy-to-clipboard';
+import copy from "copy-to-clipboard";
 
-export const Topbar = ({onLoadState}) => {
-  const { actions, query, enabled } = useEditor((state) => ({
+export const Topbar = ({ onLoadState }) => {
+  const { actions, query, enabled } = useEditor(state => ({
     enabled: state.options.enabled
   }));
 
@@ -20,33 +32,40 @@ export const Topbar = ({onLoadState}) => {
         <Grid item xs>
           <FormControlLabel
             className="enable-disable-toggle"
-            control={<Switch checked={enabled} onChange={(_, value) => actions.setOptions(options => options.enabled = value)} />}
+            control={
+              <Switch
+                checked={enabled}
+                onChange={(_, value) =>
+                  actions.setOptions(options => (options.enabled = value))
+                }
+              />
+            }
             label="Enable"
           />
         </Grid>
         <Grid item>
-        <MaterialButton 
+          <MaterialButton
             className="copy-state-btn"
-            size="small" 
-            variant="outlined" 
+            size="small"
+            variant="outlined"
             color="secondary"
             onClick={() => {
               const json = query.serialize();
               copy(lz.encodeBase64(lz.compress(json)));
-              setSnackbarMessage("State copied to clipboard")
+              setSnackbarMessage("State copied to clipboard");
             }}
-            style={{marginRight: "10px"}}
+            style={{ marginRight: "10px" }}
           >
-              Copy current state
+            Copy current state
           </MaterialButton>
-          <MaterialButton 
+          <MaterialButton
             className="load-state-btn"
-            size="small" 
-            variant="outlined" 
+            size="small"
+            variant="outlined"
             color="secondary"
             onClick={() => setDialogOpen(true)}
           >
-              Load
+            Load
           </MaterialButton>
           <Dialog
             open={dialogOpen}
@@ -56,8 +75,8 @@ export const Topbar = ({onLoadState}) => {
           >
             <DialogTitle id="alert-dialog-title">Load state</DialogTitle>
             <DialogContent>
-              <TextField 
-                multiline 
+              <TextField
+                multiline
                 fullWidth
                 placeholder='Paste the contents that was copied from the "Copy Current State" button'
                 size="small"
@@ -66,17 +85,20 @@ export const Topbar = ({onLoadState}) => {
               />
             </DialogContent>
             <DialogActions>
-              <MaterialButton onClick={() => setDialogOpen(false)} color="primary">
+              <MaterialButton
+                onClick={() => setDialogOpen(false)}
+                color="primary"
+              >
                 Cancel
               </MaterialButton>
-              <MaterialButton 
+              <MaterialButton
                 onClick={() => {
                   setDialogOpen(false);
                   const json = lz.decompress(lz.decodeBase64(stateToLoad));
                   onLoadState(json);
-                  setSnackbarMessage("State loaded")
-                }} 
-                color="primary" 
+                  setSnackbarMessage("State loaded");
+                }}
+                color="primary"
                 autoFocus
               >
                 Load
@@ -93,5 +115,5 @@ export const Topbar = ({onLoadState}) => {
         </Grid>
       </Grid>
     </Box>
-  )
-};
+  );
+};