chore(docs): setup docusaurus

.gitignore

@@ -0,0 +1,20 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

README.md

@@ -0,0 +1,33 @@
+# Website
+
+This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
+
+### Installation
+
+```
+$ yarn
+```
+
+### Local Development
+
+```
+$ yarn start
+```
+
+This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
+
+### Build
+
+```
+$ yarn build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
+
+### Deployment
+
+```
+$ GIT_USER=<Your GitHub username> USE_SSH=true yarn deploy
+```
+
+If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+};

blog/2019-05-28-first-blog-post.md

@@ -0,0 +1,12 @@
+---
+slug: first-blog-post
+title: First Blog Post
+authors:
+  name: Gao Wei
+  title: Docusaurus Core Team
+  url: https://github.com/wgao19
+  image_url: https://github.com/wgao19.png
+tags: [hola, docusaurus]
+---
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

blog/2019-05-29-long-blog-post.md

@@ -0,0 +1,44 @@
+---
+slug: long-blog-post
+title: Long Blog Post
+authors: endi
+tags: [hello, docusaurus]
+---
+
+This is the summary of a very long blog post,
+
+Use a `<!--` `truncate` `-->` comment to limit blog post size in the list view.
+
+<!--truncate-->
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

blog/2021-08-01-mdx-blog-post.mdx

@@ -0,0 +1,20 @@
+---
+slug: mdx-blog-post
+title: MDX Blog Post
+authors: [slorber]
+tags: [docusaurus]
+---
+
+Blog posts support [Docusaurus Markdown features](https://docusaurus.io/docs/markdown-features), such as [MDX](https://mdxjs.com/).
+
+:::tip
+
+Use the power of React to create interactive blog posts.
+
+```js
+<button onClick={() => alert('button clicked!')}>Click me!</button>
+```
+
+<button onClick={() => alert('button clicked!')}>Click me!</button>
+
+:::

blog/2021-08-26-welcome/index.md

@@ -0,0 +1,25 @@
+---
+slug: welcome
+title: Welcome
+authors: [slorber, yangshun]
+tags: [facebook, hello, docusaurus]
+---
+
+[Docusaurus blogging features](https://docusaurus.io/docs/blog) are powered by the [blog plugin](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-blog).
+
+Simply add Markdown files (or folders) to the `blog` directory.
+
+Regular blog authors can be added to `authors.yml`.
+
+The blog post date can be extracted from filenames, such as:
+
+- `2019-05-30-welcome.md`
+- `2019-05-30-welcome/index.md`
+
+A blog post folder can be convenient to co-locate blog post images:
+
+![Docusaurus Plushie](./docusaurus-plushie-banner.jpeg)
+
+The blog supports tags as well!
+
+**And if you don't want a blog**: just delete this directory, and use `blog: false` in your Docusaurus config.

blog/authors.yml

@@ -0,0 +1,17 @@
+endi:
+  name: Endilie Yacop Sucipto
+  title: Maintainer of Docusaurus
+  url: https://github.com/endiliey
+  image_url: https://github.com/endiliey.png
+
+yangshun:
+  name: Yangshun Tay
+  title: Front End Engineer @ Facebook
+  url: https://github.com/yangshun
+  image_url: https://github.com/yangshun.png
+
+slorber:
+  name: Sébastien Lorber
+  title: Docusaurus maintainer
+  url: https://sebastienlorber.com
+  image_url: https://github.com/slorber.png

docs/api/component-props.md

@@ -0,0 +1,107 @@
+---
+title: Prop Types
+---
+
+This is the list of prop types you can pass to the main `ReactFlow` component.
+
+```jsx
+import ReactFlow from 'react-flow-renderer';
+```
+
+### Basic Props
+
+- `elements`: array of [nodes](/docs/api/nodes/) and [edges](/docs/api/edges/) _(required)_
+- `style`: css properties
+- `className`: additional class name
+
+### Flow View
+
+- `minZoom`: default: `0.5`
+- `maxZoom`: default: `2`
+- `defaultZoom`: default: `1`
+- `defaultPosition`: default: `[0, 0]`
+- `snapToGrid`: default: `false`
+- `snapGrid`: [x, y] array - default: `[15, 15]`
+- `onlyRenderVisibleElements`: default: `false`
+- `translateExtent`: [default `[[-∞, -∞], [+∞, +∞]]`](https://github.com/d3/d3-zoom#zoom_translateExtent)
+- `nodeExtent`: default `[[-∞, -∞], [+∞, +∞]]` defines the extent for the node positions
+- `preventScrolling`: default `true` if true default browser scroll behaviour is prevented
+
+### Event Handlers
+
+- `onElementClick(event, element)`: called when user clicks node or edge
+- `onElementsRemove(elements)`: called when user removes node or edge
+- `onNodeDragStart(event, node)`: node drag start
+- `onNodeDrag(event, node)`: node drag
+- `onNodeDragStop(event, node)`: node drag stop
+- `onNodeMouseEnter(event, node)`: node mouse enter
+- `onNodeMouseMove(event, node)`: node mouse move
+- `onNodeMouseLeave(event, node)`: node mouse leave
+- `onNodeContextMenu(event, node)`: node context menu
+- `onNodeDoubleClick(event, node)`: node double click
+- `onConnect({ source, target })`: called when user connects two nodes
+- `onConnectStart(event, { nodeId, handleType })`: called when user starts to drag connection line
+- `onConnectStop(event)`: called when user stops to drag connection line
+- `onConnectEnd(event)`: called after user stops or connects nodes
+- `onEdgeUpdate(oldEdge, newConnection)`: called when the end of an edge gets dragged to another source or target
+- `onEdgeMouseEnter(event, edge)`: edge mouse enter
+- `onEdgeMouseMove(event, edge)`: edge mouse move
+- `onEdgeMouseLeave(event, edge)`: edge mouse leave
+- `onEdgeContextMenu(event, edge)`: called when user does a right-click on an edge
+- `onEdgeUpdateStart(event, edge)`: called when user starts to update an edge
+- `onEdgeUpdateEnd(event, edge)`: called when user ends an edge update (for TS users: this is a normal `MouseEvent` and not a `React.MouseEvent` like the other ones).
+- `onLoad(reactFlowInstance)`: called after flow is initialized
+- `onMove(flowTransform)`: called when user is panning or zooming
+- `onMoveStart(flowTransform)`: called when user starts panning or zooming
+- `onMoveEnd(flowTransform)`: called when user ends panning or zooming
+- `onSelectionChange(elements)`: called when user selects one or multiple elements
+- `onSelectionDragStart(event, nodes)`: called when user starts to drag a selection
+- `onSelectionDrag(event, nodes)`: called when user drags a selection
+- `onSelectionDragStop(event, nodes)`: called when user stops to drag a selection
+- `onSelectionContextMenu(event, nodes)`: called when user does a right-click on a selection
+- `onPaneClick(event)`: called when user clicks directly on the canvas
+- `onPaneContextMenu(event)`: called when user does a right-click on the canvas
+- `onPaneScroll(event)`: called when user scrolls pane (only works when `zoomOnScroll` is set to `false)
+
+### Interaction
+
+- `nodesDraggable`: default: `true`. This applies to all nodes. You can also change the behavior of a specific node with the `draggable` node option. If this option is set to `false` and you have **clickable elements** inside your node, you need to set `pointer-events:all` explicitly for these elements
+- `nodesConnectable`: default: `true`. This applies to all nodes. You can also change the behavior of a specific node with the `connectable` node option
+- `elementsSelectable`: default: `true`. This applies to all elements. You can also change the behavior of a specific node with the `selectable` node option. If this option is set to `false` and you have **clickable elements** inside your node, you need to set `pointer-events:all` explicitly for these elements
+- `zoomOnScroll`: default: `true`. Zoom the graph in and out using the mousewheel or trackpad
+- `zoomOnPinch`: default: `true`. Zoom the graph in and out using pinch
+- `panOnScroll`: default: `false`. Move the graph while keeping the zoomlevel using mousewheel or trackpad. Overwrites `zoomOnScroll`
+- `panOnScrollSpeed`: default: `0.5`. Controls how fast the canvas is moved while using the mousewheel. Only has an effect if `panOnScroll` is enabled
+- `panOnScrollMode`: default: `'free'`. Possible values are `'free'` (all directions), `'vertical'` (only vertical) or `'horizontal'` (only horizontal)
+- `zoomOnDoubleClick`: default: `true`
+- `selectNodesOnDrag`: default: `true`
+- `paneMoveable`: default: `true` - If set to `false`, panning is disabled
+- `connectionMode`: default: `'strict'`. Possible values are `'strict'` (only source to target connections are possible) or `'loose'` (source to source and target to target connections are allowed)
+
+### Element Customization
+
+- `nodeTypes`: object with [node types](/docs/api/node-types/)
+- `edgeTypes`: object with [edge types](/docs/api/edge-types/)
+- `nodeTypesId`: if you need to update your nodeTypes, you can pass a unique id here (we will remove this hack in the v10 release)
+- `edgeTypesId`: if you need to update your edgeTypes, you can pass a unique id here (we will remove this hack in the v10 release)
+- `arrowHeadColor`: default: `#b1b1b7`
+- `markerEndId`: Gets used as the marker-end attribute of the edges
+
+### Connection Line Options
+
+- `connectionLineType`: connection line type = `default` (bezier), `straight`, `step`, `smoothstep`
+- `connectionLineStyle`: connection style as svg attributes
+- `connectionLineComponent`: [custom connection line component](/examples/custom-connectionline/)
+
+### Keys
+
+- `deleteKeyCode`: `number` | `string` default: `Backspace`
+- `selectionKeyCode`: `number` | `string` default: `Shift` - While pressing the selectionKeyCode and dragging the mouse you can create a selection for multiple nodes and edges
+- `multiSelectionKeyCode`: `number` | `string` default `Meta` - While pressing the multiSelectionKeyCode you can select multiple nodes and edges with a click
+- `zoomActivationKeyCode`: `number` | `string` default `Meta` - While pressing the zoomActivationKeyCode you can zoom even if `panOnScroll=true` or `zoomOnScroll=false`
+
+**Typescript:** The interface of the ReactFlow Prop Types are exported as `ReactFlowProps`. You can use it in your code as follows:
+
+```javascript
+import { ReactFlowProps } from 'react-flow-renderer';
+```

docs/api/components/background.md

@@ -0,0 +1,33 @@
+---
+title: Background
+---
+
+React Flow comes with two background variants: **dots** and **lines**. You can use it by passing it as a children to the `ReactFlow` component:
+
+### Usage
+
+```jsx
+import ReactFlow, { Background } from 'react-flow-renderer';
+
+const FlowWithBackground = () => (
+  <ReactFlow elements={elements}>
+    <Background
+      variant="dots"
+      gap={12}
+      size={4}
+    />
+  </ReactFlow>
+);
+```
+
+
+### Prop Types
+
+- `variant`: string - has to be 'dots' or 'lines' - default: `dots`
+- `gap`: number - the gap between the dots or lines - default: `16`
+- `size`: number - the radius of the dots or the stroke width of the lines - default: `0.5`
+- `color`: string - the color of the dots or lines - default: `#81818a` for dots, `#eee` for lines
+- `style`: css properties
+- `className`: additional class name
+
+**Typescript:** The interface of the Background Prop Types are exported as `BackgroundProps`.

docs/api/components/controls.md

@@ -0,0 +1,56 @@
+---
+title: Controls
+---
+
+The control panel contains a zoom-in, zoom-out, fit-view and a lock/unlock button. You can use it by passing it as a children to the `ReactFlow` component:
+
+### Usage
+
+```jsx
+import ReactFlow, { Controls } from 'react-flow-renderer';
+
+const FlowWithControls = () => (
+  <ReactFlow elements={[]}>
+    <Controls />
+  </ReactFlow>
+);
+```
+
+### Prop Types
+
+- `showZoom`: boolean - default: true
+- `showFitView`: boolean - default: true
+- `showInteractive`: boolean - default: true
+- `style`: css properties
+- `className`: additional class name
+- `onZoomIn`: callback function that gets triggered when the zoom in button is pressed
+- `onZoomOut`: callback function that gets triggered when the zoom out button is pressed
+- `onFitView`: callback function that gets triggered when the fit-to-view button is pressed
+- `onInteractiveChange`: callback function that gets triggered when the lock button is pressed - passes the new value
+
+**Typescript:** The interface of the Controls Prop Types are exported as `ControlProps`.
+
+## Extended Controls
+
+When you want to add buttons to the control panel you can use the `ControlsButton` component and pass it as a children to the `Controls` component:
+
+```jsx
+import ReactFlow, { Controls, ControlButton } from 'react-flow-renderer';
+
+const FlowWithExtendedControls = () => (
+  <ReactFlow elements={[]}>
+    <Controls>
+      <ControlButton onClick={() => console.log('action')}>
+        <FancyIcon />
+      </ControlButton>
+      <ControlButton onClick={() => console.log('another action')}>
+        <AnotherFancyIcon />
+      </ControlButton>
+    </Controls>
+  </ReactFlow>
+);
+```
+
+### ControlsButton Prop Types
+
+All props get passed to the `ControlsButton` component.