Merge branch 'site' of github.com:wbkd/react-flow into site

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",
+    "dev": "npm run build && npm start & cd example && npm start",
-    "start:devflows": "npm run build && cd dev-flows && npm start",
+    "start:dev": "npm run build && cd example && npm start",
-    "dev:wait": "start-server-and-test start:devflows http-get://localhost:3000",
+    "dev:wait": "start-server-and-test start:dev http-get://localhost:3000",
-    "build:devflows": "npm install && npm run build && cd dev-flows && npm install && npm run build",
+    "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",

website/src/components/Header/index.js

@@ -201,10 +201,10 @@ const Header = () => {
               <NavItem to="/" activeClassName="active" className="mobile">
                 Home
               </NavItem>
-              <NavItem to="/docs/" activeClassName="active">
+              <NavItem to="/docs/" activeClassName="active" partiallyActive>
                 Docs
               </NavItem>
-              <NavItem to="/examples/" activeClassName="active">
+              <NavItem to="/examples/" activeClassName="active" partiallyActive>
                 Examples
               </NavItem>
 

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};
   }
 
@@ -58,7 +58,7 @@ const DescriptionWrapper = styled(Box)`
   order: 1;
   margin-bottom: ${getThemeSpacePx(3)};
 
-  ${device.tablet} {
+  @media ${device.tablet} {
     order: ${(p) => p.order};
   }
 `;

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 (
+    <div style={{ height: 300, border: '1px solid #EAEDF1', borderRadius: 5 }}>
+      <ReactFlowProvider>
+        <ReactFlow
+          elements={elements}
+          onElementsRemove={onElementsRemove}
+          onConnect={onConnect}
+        />
+      </ReactFlowProvider>
+    </div>
+  );
+};
+
+export default BasicFlow;

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: <div>Default Node</div> },
     position: { x: 100, y: 125 },
   },
-  // output node
   {
     id: '3',
-    type: 'output',
+    type: 'output', // output node
-    // you can also pass a React component as a label
     data: { label: 'Output Node' },
     position: { x: 250, y: 250 },
   },
@@ -52,11 +49,56 @@ const elements = [
   { id: 'e2-3', source: '2', target: '3' },
 ];
 
-const BasicFlow = () => <ReactFlow elements={elements} />;
+export default () => <ReactFlow elements={elements} />;
 ```
 
 import Flow from './index';
 
 <Flow />
 
-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 (
+    <ReactFlow
+      elements={elements}
+      onElementsRemove={onElementsRemove}
+      onConnect={onConnect}
+    />
+  );
+}
+```
+
+In this example you can connect nodes and remove selected nodes and edges with the delete key.
+
+import Basic from './BasicFunctions';
+
+<Basic />
+
+You can find more advanced examples in the [examples](/examples/) section.

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.

website/src/pages/index.js

@@ -163,24 +163,34 @@ const Home = () => {
           <Paragraph my={3} color={baseColors.textLight}>
             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
+            ReactFlow component. A simple flow could look like this:
-            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
-            flow could look like this:
           </Paragraph>
           <CodeBlock
             code={`import React from 'react';
 import ReactFlow from 'react-flow-renderer';
 
 const elements = [
-  { id: '1', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
+  { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
   // you can also pass a React Node as a label
   { id: '2', data: { label: <div>Node 2</div> }, position: { x: 100, y: 100 } },
   { id: 'e1-2', source: '1', target: '2', animated: true },
 ];
 
-const BasicFlow = () => <ReactFlow elements={elements} />;`}
+export default () => <ReactFlow elements={elements} />;`}
           />
+          <Paragraph mt={3} color={baseColors.textLight}>
+            You can find a detailed{' '}
+            <Link to="/docs/getting-started/">entry point</Link> in the docs or
+            read our{' '}
+            <a
+              href="https://webkid.io/blog/react-flow-node-based-graph-library/"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              blog post
+            </a>{' '}
+            to get started.
+          </Paragraph>
         </CenterContent>
       </ContentSection>