diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md index b75a8b62b..779e392d6 100644 --- a/.github/ISSUE_TEMPLATE/feature_request.md +++ b/.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 [...] diff --git a/packages/docs/docs/api/NodeHelpers.md b/packages/docs/docs/api/NodeHelpers.md index 5e268e72d..e5838d3a5 100644 --- a/packages/docs/docs/api/NodeHelpers.md +++ b/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(); ... diff --git a/packages/docs/docs/api/useEditor.md b/packages/docs/docs/api/useEditor.md index 1e6d7aebb..f1d17b716 100644 --- a/packages/docs/docs/api/useEditor.md +++ b/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", [ diff --git a/packages/docs/docs/guides/basic-tutorial.md b/packages/docs/docs/guides/basic-tutorial.md index 1cf4dc956..8e45b008f 100755 --- a/packages/docs/docs/guides/basic-tutorial.md +++ b/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 ( - + {children} ) @@ -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 ( @@ -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 = () => { diff --git a/packages/examples/basic/README.md b/packages/examples/basic/README.md index baa80d2f7..a5417b299 100644 --- a/packages/examples/basic/README.md +++ b/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 ``` diff --git a/packages/examples/basic/package.json b/packages/examples/basic/package.json index 9d3e597c4..635488257 100644 --- a/packages/examples/basic/package.json +++ b/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" } } diff --git a/packages/examples/landing/package.json b/packages/examples/landing/package.json index cea2116aa..9ebc35654 100644 --- a/packages/examples/landing/package.json +++ b/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" } }