Merge branch 'zaki-yama-fix-typo-in-basic-tutorial' into develop

.github/ISSUE_TEMPLATE/feature_request.md

@@ -7,15 +7,6 @@ assignees: ''
 
 ---
 
-**Is your feature request related to the core ?**
-
-Remember that Craft.js is an abstraction; implementation-related features are not part of the core.
-
-"Implement API to handle drag preview", "Add editor action to copy elements", "Show drag preview when dragging elements" are examples of feature requests that are related to the core.
-
-"Implement a file uploader", "Add a gallery component", "Add a layers panel", "Create tooltip component" are examples of feature requests that are **not** related to the core. We could still consider working on some of them as separate packages (eg: [@craftjs/layers](https://github.com/prevwong/craft.js/tree/master/packages/layers)). However, please understand that these will not be top priority at the moment.
-
-
 **Is your feature request related to a problem? Please describe.**
 A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
 

packages/docs/docs/api/NodeHelpers.md

@@ -15,7 +15,7 @@ import {useEditor} from "@craftjs/core";
 
 const TextComponent = () => {
   const { id } = useNode();
-  const { query: {is} } = useEditor();
+  const { query: {node} } = useEditor();
   const isRoot = node(id).Root(),
         isDraggable = node(id).Draggable();
   ...

packages/docs/docs/api/useEditor.md

@@ -40,8 +40,8 @@ const { connectors, actions, query, ...collected } = useEditor(collector);
       ["deserialize", "() => String", "Recreate Nodes from JSON. This will clear all the current Nodes in the editor state with the recreated Nodes"],
       ["move", "(nodeId: NodeId, targetParentId: NodeId, index: number) => void", "Move a Node to the specified parent Node at the given index."],
       ["setProp", "(nodeId: NodeId, update: (props: Object) => void) => void", "Manipulate the props of the given Node"],
+      ["setCustom", "(nodeId: NodeId, update: (custom: Object) => void) => void", "Manipulate the custom values of the given Node"],
       ["setHidden", "(nodeId: NodeId, bool: boolean) => void", "When set to true, the User Component of the specified Node will be hidden, but not removed"],
-      ["setCustom", "(nodeId: NodeId, custom: (custom: Object) => void", "Update the given Node's custom properties"],
       ["setOptions", "(options: Object) => void", "Update the editor's options. The options object passed is the same as the <Editor /> props."]
     ]],
     ["query", "Query", [

packages/docs/docs/guides/basic-tutorial.md

@@ -32,7 +32,7 @@ With Craft.js you decide how your editor should look and function. So, let's bui
 
 To make our lives easier, we'll use some external packages for designing our user interfaces.
 ```bash
-yarn add material-ui react-contenteditable material-ui-color-picker
+yarn add @material-ui/core react-contenteditable material-ui-color-picker
 ```
 
 ### User Components
@@ -42,7 +42,6 @@ Let's first create the User Components - the components that our end users will
 ```jsx
 // components/user/Text.js
 import React from "react";
-import { Typography } from "@material-ui/core";
 
 export const Text = ({text, fontSize}) => {
   return (
@@ -59,9 +58,9 @@ export const Text = ({text, fontSize}) => {
 import React  from "react";
 import {Button as MaterialButton} from "@material-ui/core";
 
-export const Button = ({size, variant, primary, children}) => {
+export const Button = ({size, variant, color, children}) => {
   return (
-    <MaterialButton size={size} variant={variant} color={primary}>
+    <MaterialButton size={size} variant={variant} color={color}>
       {children}
     </MaterialButton>
   )
@@ -73,6 +72,9 @@ We will also create a Container component which would allow our users to change
 
 ```jsx
 // components/user/Container.js
+import React from "react";
+import { Paper } from "@material-ui/core";
+
 export const Container = ({background, padding = 0, children}) => {
   return (
     <Paper style={{margin: "5px 0", background, padding: `${padding}px`}}>
@@ -88,9 +90,9 @@ Now, let's create another user component that will be more advanced. It will be
 ```jsx
 // components/user/Card.js
 import React  from "react";
-import Text from "./Text";
-import Button from "./Button";
-import Container from "./Container";
+import { Text } from "./Text";
+import { Button } from "./Button";
+import { Container } from "./Container";
 
 export const Card = ({background, padding = 20}) => {
   return (
@@ -149,6 +151,7 @@ For now, let's just put in some dummy text fields. We'll revisit this in the lat
 
 ```jsx
 // components/SettingsPanel.js
+import React from 'react';
 import { Box, Chip, Grid, Typography, Button as MaterialButton, FormControl, FormLabel, Slider } from "@material-ui/core";
 
 export const SettingsPanel = () => {  

packages/examples/basic/README.md

@@ -8,6 +8,6 @@ Check out the live demo [here](https://craft.js.org/examples/basic/)
 ```bash
 > git clone https://github.com/prevwong/craft.js/
 > cd craft.js/packages/examples/basic
-> yarn install
-> yarn dev
+> npm install
+> npm dev
 ```

packages/examples/basic/package.json

@@ -23,6 +23,8 @@
     "clean": "rimraf lib .next out dist"
   },
   "devDependencies": {
-    "@zeit/next-css": "^1.0.1"
+    "@zeit/next-css": "^1.0.1",
+    "cross-env": "^6.0.3",
+    "next-compose-plugins": "^2.2.0"
   }
 }

packages/examples/landing/package.json

@@ -45,6 +45,7 @@
     "next-compose-plugins": "^2.2.0",
     "postcss-import": "^12.0.1",
     "postcss-preset-env": "^6.7.0",
-    "tailwindcss": "^1.1.3"
+    "tailwindcss": "^1.1.3",
+    "typescript": "^3.7.5"
   }
 }