From 2fd2e2d2b72d9914ce8f0a1e5b776ca8c6e2d9b1 Mon Sep 17 00:00:00 2001 From: moklick Date: Tue, 6 Oct 2020 11:05:39 +0200 Subject: [PATCH 1/4] style(header): partially active linke --- website/src/components/Header/index.js | 4 ++-- website/src/components/TeaserFlow/index.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/website/src/components/Header/index.js b/website/src/components/Header/index.js index 3f0f85b3..9fadffdf 100644 --- a/website/src/components/Header/index.js +++ b/website/src/components/Header/index.js @@ -201,10 +201,10 @@ const Header = () => { Home - + Docs - + Examples diff --git a/website/src/components/TeaserFlow/index.js b/website/src/components/TeaserFlow/index.js index 88b11760..35c7df4b 100644 --- a/website/src/components/TeaserFlow/index.js +++ b/website/src/components/TeaserFlow/index.js @@ -26,7 +26,7 @@ const ReactFlowWrapper = styled(Box)` border-radius: 5px; order: 2; - ${device.tablet} { + @media ${device.tablet} { order: ${(p) => p.order}; } @@ -45,7 +45,7 @@ const DescriptionWrapper = styled(Box)` order: 1; margin-bottom: ${getThemeSpacePx(3)}; - ${device.tablet} { + @media ${device.tablet} { order: ${(p) => p.order}; } `; From c469957c58301718d7bcfbf5aea182097819efd2 Mon Sep 17 00:00:00 2001 From: moklick Date: Tue, 6 Oct 2020 11:38:29 +0200 Subject: [PATCH 2/4] docs(site): add baisc example --- .../docs/getting-started/BasicFunctions.js | 41 ++++++++++++++ .../markdown/docs/getting-started/index.md | 56 ++++++++++++++++--- website/src/markdown/docs/index.md | 2 - website/src/pages/index.js | 4 +- 4 files changed, 91 insertions(+), 12 deletions(-) create mode 100644 website/src/markdown/docs/getting-started/BasicFunctions.js diff --git a/website/src/markdown/docs/getting-started/BasicFunctions.js b/website/src/markdown/docs/getting-started/BasicFunctions.js new file mode 100644 index 00000000..d70c3290 --- /dev/null +++ b/website/src/markdown/docs/getting-started/BasicFunctions.js @@ -0,0 +1,41 @@ +import React, { useState } from 'react'; +import ReactFlow, { + removeElements, + addEdge, + ReactFlowProvider, +} from 'react-flow-renderer'; + +const initialElements = [ + { + id: '1', + type: 'input', + data: { label: 'Input Node' }, + position: { x: 250, y: 25 }, + }, + { + id: '2', + data: { label: 'Another Node' }, + position: { x: 100, y: 125 }, + }, +]; + +const BasicFlow = () => { + const [elements, setElements] = useState(initialElements); + const onElementsRemove = (elementsToRemove) => + setElements((els) => removeElements(elementsToRemove, els)); + const onConnect = (params) => setElements((els) => addEdge(params, els)); + + return ( +
+ + + +
+ ); +}; + +export default BasicFlow; diff --git a/website/src/markdown/docs/getting-started/index.md b/website/src/markdown/docs/getting-started/index.md index 0eff4c11..44945faf 100644 --- a/website/src/markdown/docs/getting-started/index.md +++ b/website/src/markdown/docs/getting-started/index.md @@ -25,10 +25,9 @@ import React from 'react'; import ReactFlow from 'react-flow-renderer'; const elements = [ - // input node { id: '1', - type: 'input', + type: 'input', // input node data: { label: 'Input Node' }, position: { x: 250, y: 25 }, }, @@ -39,11 +38,9 @@ const elements = [ data: { label:
Default Node
}, position: { x: 100, y: 125 }, }, - // output node { id: '3', - type: 'output', - // you can also pass a React component as a label + type: 'output', // output node data: { label: 'Output Node' }, position: { x: 250, y: 250 }, }, @@ -52,11 +49,56 @@ const elements = [ { id: 'e2-3', source: '2', target: '3' }, ]; -const BasicFlow = () => ; +export default () => ; ``` import Flow from './index'; -You can find more advanced examples in the [examples](reactflow.dev/examples/) section. +## Basic Functionality + +We don’t do any state updates besides the positions. This means that you need to pass the functions to remove an element or connect nodes by yourself. You can implement your own ones or use the [helper functions](/docs/api/helper-functions/) that come with the library. Here you see an example of how to use the heler functions `removeElements` and `addEdge`. + + +```jsx +import React, { useState } from 'react'; +import ReactFlow, { removeElements, addEdge } from 'react-flow-renderer'; + +const initialElements = [ + { + id: '1', + type: 'input', + data: { label: 'Input Node' }, + position: { x: 250, y: 25 }, + }, + { + id: '2', + data: { label: 'Another Node' }, + position: { x: 100, y: 125 }, + }, +]; + +export default () => { + const [elements, setElements] = useState(initialElements); + const onElementsRemove = (elementsToRemove) => + setElements((els) => removeElements(elementsToRemove, els)); + const onConnect = (params) => setElements((els) => addEdge(params, els)); + + return ( + + ); +} +``` + +In this example you can connect nodes and remove selected nodes and edges with the delete key. + +import Basic from './BasicFunctions'; + + + +You can find more advanced examples in the [examples](/examples/) section. diff --git a/website/src/markdown/docs/index.md b/website/src/markdown/docs/index.md index 61d562fe..436aad0b 100644 --- a/website/src/markdown/docs/index.md +++ b/website/src/markdown/docs/index.md @@ -12,5 +12,3 @@ React Flow is a library for building node-based applications. These can be simpl * **Utils:** Snap-to-grid and graph [helper functions](#helper-functions) * **Components:** [Background, Minimap and Controls](#components) * **Reliable**: Written in [Typescript](https://www.typescriptlang.org/) and tested with [cypress](https://www.cypress.io/) - -In order to make this library as flexible as possible we don’t do any state updates besides the positions. This means that you need to pass the functions to remove an element or connect nodes by yourself. You can implement your own ones or use the helper functions that come with the library. \ No newline at end of file diff --git a/website/src/pages/index.js b/website/src/pages/index.js index 22ec8269..cb6caac9 100644 --- a/website/src/pages/index.js +++ b/website/src/pages/index.js @@ -149,9 +149,7 @@ const Home = () => { A flow consists of nodes and edges (or just nodes). Together we call them elements. You can pass a set of elements as a prop to the - ReactFlow component. Hereby all elements need unique ids. A node - needs a position and a label and an edge needs a source (node id) - and a target (node id). This is the most basic for a flow. A simple + ReactFlow component. This is the most basic for a flow. A simple flow could look like this: Date: Tue, 6 Oct 2020 11:50:27 +0200 Subject: [PATCH 3/4] docs(site): getting started text --- website/src/pages/index.js | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/website/src/pages/index.js b/website/src/pages/index.js index cb6caac9..267e7f16 100644 --- a/website/src/pages/index.js +++ b/website/src/pages/index.js @@ -149,22 +149,34 @@ const Home = () => { A flow consists of nodes and edges (or just nodes). Together we call them elements. You can pass a set of elements as a prop to the - ReactFlow component. This is the most basic for a flow. A simple - flow could look like this: + ReactFlow component. A simple flow could look like this: Node 2 }, position: { x: 100, y: 100 } }, { id: 'e1-2', source: '1', target: '2', animated: true }, ]; -const BasicFlow = () => ;`} +export default () => ;`} /> + + You can find a detailed{' '} + entry point in the docs or + read our{' '} + + blog post + {' '} + to get started. + From 7ec68efea68ab5fe250b8ba4f3acfa610f125792 Mon Sep 17 00:00:00 2001 From: moklick Date: Tue, 6 Oct 2020 11:54:02 +0200 Subject: [PATCH 4/4] refactor(dev): rename dev-flows to example --- {dev-flows => example}/.gitignore | 0 {dev-flows => example}/README.md | 0 {dev-flows => example}/package-lock.json | 0 {dev-flows => example}/package.json | 0 {dev-flows => example}/public/_redirects | 0 {dev-flows => example}/public/favicon.ico | Bin {dev-flows => example}/public/index.html | 0 {dev-flows => example}/public/robots.txt | 0 {dev-flows => example}/src/Basic/index.js | 0 .../src/CustomConnectionLine/ConnectionLine.js | 0 .../src/CustomConnectionLine/index.js | 0 .../src/CustomNode/ColorSelectorNode.js | 0 {dev-flows => example}/src/CustomNode/index.js | 0 {dev-flows => example}/src/EdgeTypes/index.js | 0 {dev-flows => example}/src/EdgeTypes/utils.js | 0 {dev-flows => example}/src/Edges/CustomEdge.js | 0 {dev-flows => example}/src/Edges/index.js | 0 {dev-flows => example}/src/Empty/index.js | 0 {dev-flows => example}/src/Hidden/index.js | 0 {dev-flows => example}/src/Interaction/index.js | 0 {dev-flows => example}/src/Overview/index.js | 0 {dev-flows => example}/src/Provider/Sidebar.js | 0 {dev-flows => example}/src/Provider/index.js | 0 {dev-flows => example}/src/Provider/provider.css | 0 {dev-flows => example}/src/Stress/index.js | 0 {dev-flows => example}/src/Stress/utils.js | 0 {dev-flows => example}/src/Validation/index.js | 0 .../src/Validation/validation.css | 0 {dev-flows => example}/src/index.css | 0 {dev-flows => example}/src/index.js | 0 package.json | 8 ++++---- 31 files changed, 4 insertions(+), 4 deletions(-) rename {dev-flows => example}/.gitignore (100%) rename {dev-flows => example}/README.md (100%) rename {dev-flows => example}/package-lock.json (100%) rename {dev-flows => example}/package.json (100%) rename {dev-flows => example}/public/_redirects (100%) rename {dev-flows => example}/public/favicon.ico (100%) rename {dev-flows => example}/public/index.html (100%) rename {dev-flows => example}/public/robots.txt (100%) rename {dev-flows => example}/src/Basic/index.js (100%) rename {dev-flows => example}/src/CustomConnectionLine/ConnectionLine.js (100%) rename {dev-flows => example}/src/CustomConnectionLine/index.js (100%) rename {dev-flows => example}/src/CustomNode/ColorSelectorNode.js (100%) rename {dev-flows => example}/src/CustomNode/index.js (100%) rename {dev-flows => example}/src/EdgeTypes/index.js (100%) rename {dev-flows => example}/src/EdgeTypes/utils.js (100%) rename {dev-flows => example}/src/Edges/CustomEdge.js (100%) rename {dev-flows => example}/src/Edges/index.js (100%) rename {dev-flows => example}/src/Empty/index.js (100%) rename {dev-flows => example}/src/Hidden/index.js (100%) rename {dev-flows => example}/src/Interaction/index.js (100%) rename {dev-flows => example}/src/Overview/index.js (100%) rename {dev-flows => example}/src/Provider/Sidebar.js (100%) rename {dev-flows => example}/src/Provider/index.js (100%) rename {dev-flows => example}/src/Provider/provider.css (100%) rename {dev-flows => example}/src/Stress/index.js (100%) rename {dev-flows => example}/src/Stress/utils.js (100%) rename {dev-flows => example}/src/Validation/index.js (100%) rename {dev-flows => example}/src/Validation/validation.css (100%) rename {dev-flows => example}/src/index.css (100%) rename {dev-flows => example}/src/index.js (100%) diff --git a/dev-flows/.gitignore b/example/.gitignore similarity index 100% rename from dev-flows/.gitignore rename to example/.gitignore diff --git a/dev-flows/README.md b/example/README.md similarity index 100% rename from dev-flows/README.md rename to example/README.md diff --git a/dev-flows/package-lock.json b/example/package-lock.json similarity index 100% rename from dev-flows/package-lock.json rename to example/package-lock.json diff --git a/dev-flows/package.json b/example/package.json similarity index 100% rename from dev-flows/package.json rename to example/package.json diff --git a/dev-flows/public/_redirects b/example/public/_redirects similarity index 100% rename from dev-flows/public/_redirects rename to example/public/_redirects diff --git a/dev-flows/public/favicon.ico b/example/public/favicon.ico similarity index 100% rename from dev-flows/public/favicon.ico rename to example/public/favicon.ico diff --git a/dev-flows/public/index.html b/example/public/index.html similarity index 100% rename from dev-flows/public/index.html rename to example/public/index.html diff --git a/dev-flows/public/robots.txt b/example/public/robots.txt similarity index 100% rename from dev-flows/public/robots.txt rename to example/public/robots.txt diff --git a/dev-flows/src/Basic/index.js b/example/src/Basic/index.js similarity index 100% rename from dev-flows/src/Basic/index.js rename to example/src/Basic/index.js diff --git a/dev-flows/src/CustomConnectionLine/ConnectionLine.js b/example/src/CustomConnectionLine/ConnectionLine.js similarity index 100% rename from dev-flows/src/CustomConnectionLine/ConnectionLine.js rename to example/src/CustomConnectionLine/ConnectionLine.js diff --git a/dev-flows/src/CustomConnectionLine/index.js b/example/src/CustomConnectionLine/index.js similarity index 100% rename from dev-flows/src/CustomConnectionLine/index.js rename to example/src/CustomConnectionLine/index.js diff --git a/dev-flows/src/CustomNode/ColorSelectorNode.js b/example/src/CustomNode/ColorSelectorNode.js similarity index 100% rename from dev-flows/src/CustomNode/ColorSelectorNode.js rename to example/src/CustomNode/ColorSelectorNode.js diff --git a/dev-flows/src/CustomNode/index.js b/example/src/CustomNode/index.js similarity index 100% rename from dev-flows/src/CustomNode/index.js rename to example/src/CustomNode/index.js diff --git a/dev-flows/src/EdgeTypes/index.js b/example/src/EdgeTypes/index.js similarity index 100% rename from dev-flows/src/EdgeTypes/index.js rename to example/src/EdgeTypes/index.js diff --git a/dev-flows/src/EdgeTypes/utils.js b/example/src/EdgeTypes/utils.js similarity index 100% rename from dev-flows/src/EdgeTypes/utils.js rename to example/src/EdgeTypes/utils.js diff --git a/dev-flows/src/Edges/CustomEdge.js b/example/src/Edges/CustomEdge.js similarity index 100% rename from dev-flows/src/Edges/CustomEdge.js rename to example/src/Edges/CustomEdge.js diff --git a/dev-flows/src/Edges/index.js b/example/src/Edges/index.js similarity index 100% rename from dev-flows/src/Edges/index.js rename to example/src/Edges/index.js diff --git a/dev-flows/src/Empty/index.js b/example/src/Empty/index.js similarity index 100% rename from dev-flows/src/Empty/index.js rename to example/src/Empty/index.js diff --git a/dev-flows/src/Hidden/index.js b/example/src/Hidden/index.js similarity index 100% rename from dev-flows/src/Hidden/index.js rename to example/src/Hidden/index.js diff --git a/dev-flows/src/Interaction/index.js b/example/src/Interaction/index.js similarity index 100% rename from dev-flows/src/Interaction/index.js rename to example/src/Interaction/index.js diff --git a/dev-flows/src/Overview/index.js b/example/src/Overview/index.js similarity index 100% rename from dev-flows/src/Overview/index.js rename to example/src/Overview/index.js diff --git a/dev-flows/src/Provider/Sidebar.js b/example/src/Provider/Sidebar.js similarity index 100% rename from dev-flows/src/Provider/Sidebar.js rename to example/src/Provider/Sidebar.js diff --git a/dev-flows/src/Provider/index.js b/example/src/Provider/index.js similarity index 100% rename from dev-flows/src/Provider/index.js rename to example/src/Provider/index.js diff --git a/dev-flows/src/Provider/provider.css b/example/src/Provider/provider.css similarity index 100% rename from dev-flows/src/Provider/provider.css rename to example/src/Provider/provider.css diff --git a/dev-flows/src/Stress/index.js b/example/src/Stress/index.js similarity index 100% rename from dev-flows/src/Stress/index.js rename to example/src/Stress/index.js diff --git a/dev-flows/src/Stress/utils.js b/example/src/Stress/utils.js similarity index 100% rename from dev-flows/src/Stress/utils.js rename to example/src/Stress/utils.js diff --git a/dev-flows/src/Validation/index.js b/example/src/Validation/index.js similarity index 100% rename from dev-flows/src/Validation/index.js rename to example/src/Validation/index.js diff --git a/dev-flows/src/Validation/validation.css b/example/src/Validation/validation.css similarity index 100% rename from dev-flows/src/Validation/validation.css rename to example/src/Validation/validation.css diff --git a/dev-flows/src/index.css b/example/src/index.css similarity index 100% rename from dev-flows/src/index.css rename to example/src/index.css diff --git a/dev-flows/src/index.js b/example/src/index.js similarity index 100% rename from dev-flows/src/index.js rename to example/src/index.js diff --git a/package.json b/package.json index a6bd2ea7..deedc800 100644 --- a/package.json +++ b/package.json @@ -12,10 +12,10 @@ "scripts": { "build": "rollup -c --environment NODE_ENV:production", "start": "rollup -w -c", - "dev": "npm run build && npm start & cd dev-flows && npm start", - "start:devflows": "npm run build && cd dev-flows && npm start", - "dev:wait": "start-server-and-test start:devflows http-get://localhost:3000", - "build:devflows": "npm install && npm run build && cd dev-flows && npm install && npm run build", + "dev": "npm run build && npm start & cd example && npm start", + "start:dev": "npm run build && cd example && npm start", + "dev:wait": "start-server-and-test start:dev http-get://localhost:3000", + "build:dev": "npm install && npm run build && cd example && npm install && npm run build", "build:website": "cd website && npm install && GATSBY_EXPERIMENTAL_PAGE_BUILD_ON_DATA_CHANGES=true npm run build", "cy:open": "cypress open", "cypress": "npm run dev:wait cy:open",