chore(examples): update imports

README.md

@@ -4,7 +4,7 @@
 <div align="center">
 
 ![GitHub License MIT](https://img.shields.io/github/license/wbkd/react-flow?color=%23ff0072)
-![npm downloads](https://img.shields.io/npm/dt/react-flow-renderer?color=%23FF0072&label=downloads)
+![npm downloads](https://img.shields.io/npm/dt/reactflow?color=%23FF0072&label=downloads)
 ![GitHub Repo stars](https://img.shields.io/github/stars/wbkd/react-flow?color=%23FF0072)
 ![GitHub release (latest by date)](https://img.shields.io/github/v/release/wbkd/react-flow?color=%23FF0072)
 
@@ -36,7 +36,7 @@ You can find more information in our [React Flow Pro FAQs](https://pro.reactflow
 The easiest way to get the latest version of React Flow is to install it via npm:
 
 ```bash
-npm install react-flow-renderer
+npm install reactflow
 ```
 
 ## Quick Start
@@ -44,7 +44,7 @@ npm install react-flow-renderer
 This is only a very basic usage example of React Flow. To see everything that is possible with the library, please refer to the [website](https://reactflow.dev) for [guides](https://reactflow.dev/docs/guides/custom-nodes), [examples](https://reactflow.dev/docs/examples/overview) and [API reference](https://reactflow.dev/docs/api/react-flow-props).
 
 ```jsx
-import ReactFlow, { MiniMap, Controls } from 'react-flow-renderer';
+import ReactFlow, { MiniMap, Controls } from 'reactflow';
 
 function Flow({ nodes, edges, onNodesChange, onEdgesChange, onConnect }) {
   return (

examples/nextjs/pages/Backgrounds/index.tsx

@@ -1,7 +1,6 @@
 import React, { FC } from 'react';
 
-import {
+import ReactFlow, {
-  ReactFlow,
   Node,
   ReactFlowProvider,
   useNodesState,

examples/nextjs/pages/ControlledUncontrolled/index.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import {
+import ReactFlow, {
-  ReactFlow,
   useReactFlow,
   Node,
   Edge,
@@ -9,7 +8,7 @@ import {
   useEdgesState,
   Background,
   BackgroundVariant,
-} from '@react-flow/bunde';
+} from 'reactflow';
 
 const defaultNodes: Node[] = [
   {

examples/nextjs/pages/CustomConnectionLine/index.tsx

@@ -1,6 +1,5 @@
 import React, { useCallback } from 'react';
-import {
+import ReactFlow, {
-  ReactFlow,
   Node,
   addEdge,
   Connection,

examples/nextjs/pages/CustomNode/index.tsx

@@ -1,6 +1,5 @@
 import React, { useState, useEffect, MouseEvent, ChangeEvent, useCallback } from 'react';
-import {
+import ReactFlow, {
-  ReactFlow,
   MiniMap,
   Controls,
   addEdge,

examples/nextjs/pages/DefaultNodes/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ReactFlow, useReactFlow, Node, Edge, ReactFlowProvider, Background, BackgroundVariant } from 'reactflow';
+import ReactFlow, { useReactFlow, Node, Edge, ReactFlowProvider, Background, BackgroundVariant } from 'reactflow';
 
 const defaultNodes: Node[] = [
   {

examples/nextjs/pages/DragHandle/index.tsx

@@ -1,11 +1,5 @@
 import React, { MouseEvent } from 'react';
-import {
+import ReactFlow, { Node, Edge, useNodesState, useEdgesState } from 'reactflow';
-  ReactFlow,
-  Node,
-  Edge,
-  useNodesState,
-  useEdgesState,
-} from '@react-flow/core';
 
 import DragHandleNode from './DragHandleNode';
 

examples/nextjs/pages/DragNDrop/index.tsx

@@ -1,6 +1,5 @@
 import React, { useState, DragEvent } from 'react';
-import {
+import ReactFlow, {
-  ReactFlow,
   ReactFlowProvider,
   addEdge,
   ReactFlowInstance,

examples/nextjs/pages/EdgeTypes/index.tsx

@@ -3,8 +3,7 @@
  */
 import React, { useCallback } from 'react';
 
-import {
+import ReactFlow, {
-  ReactFlow,
   Background,
   Controls,
   MiniMap,

examples/nextjs/pages/Edges/index.tsx

@@ -1,8 +1,7 @@
 import React, { MouseEvent, useCallback } from 'react';
-import {
+import ReactFlow, {
   Controls,
   Background,
-  ReactFlow,
   MiniMap,
   addEdge,
   Connection,

examples/nextjs/pages/Empty/index.tsx

@@ -1,7 +1,6 @@
 import React, { MouseEvent, CSSProperties, useCallback } from 'react';
 
-import {
+import ReactFlow, {
-  ReactFlow,
   Background,
   BackgroundVariant,
   Controls,

examples/nextjs/pages/FloatingEdges/index.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback } from 'react';
 
-import {
+import ReactFlow, {
-  ReactFlow,
   Background,
   addEdge,
   ReactFlowInstance,

examples/nextjs/pages/Hidden/index.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useCallback } from 'react';
 
-import { ReactFlow, addEdge, Connection, Edge, Node, useNodesState, useEdgesState, MiniMap, Controls } from 'reactflow';
+import ReactFlow, { addEdge, Connection, Edge, Node, useNodesState, useEdgesState, MiniMap, Controls } from 'reactflow';
 
 const initialNodes: Node[] = [
   {

examples/nextjs/pages/Interaction/index.tsx

@@ -1,6 +1,5 @@
 import React, { useState, MouseEvent as ReactMouseEvent, WheelEvent } from 'react';
-import {
+import ReactFlow, {
-  ReactFlow,
   addEdge,
   Node,
   Connection,

examples/nextjs/pages/Layouting/index.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback } from 'react';
-import {
+import ReactFlow, {
   Controls,
-  ReactFlow,
   ReactFlowProvider,
   addEdge,
   Connection,

examples/nextjs/pages/MultiFlows/index.tsx

@@ -1,7 +1,6 @@
 import React, { FC } from 'react';
 
-import {
+import ReactFlow, {
-  ReactFlow,
   Background,
   addEdge,
   Node,

examples/nextjs/pages/NestedNodes/index.tsx

@@ -1,9 +1,8 @@
 import React, { useState, MouseEvent, useCallback } from 'react';
-import {
+import ReactFlow, {
   Controls,
   MiniMap,
   Background,
-  ReactFlow,
   addEdge,
   useNodesState,
   useEdgesState,

examples/nextjs/pages/NodeTypeChange/index.tsx

@@ -1,6 +1,6 @@
 import React, { CSSProperties, useCallback } from 'react';
 
-import { ReactFlow, addEdge, Node, Position, Connection, Edge, useNodesState, useEdgesState } from 'reactflow';
+import ReactFlow, { addEdge, Node, Position, Connection, Edge, useNodesState, useEdgesState } from 'reactflow';
 
 const initialNodes: Node[] = [
   {

examples/nextjs/pages/NodeTypesObjectChange/index.tsx

@@ -1,7 +1,5 @@
 import React, { useState, CSSProperties, FC, useCallback } from 'react';
-
+import ReactFlow, {
-import {
-  ReactFlow,
   addEdge,
   Node,
   Position,

examples/nextjs/pages/Overview/index.tsx

@@ -1,7 +1,5 @@
 import React, { MouseEvent as ReactMouseEvent, CSSProperties, useCallback } from 'react';
-
+import ReactFlow, {
-import {
-  ReactFlow,
   addEdge,
   Node,
   Viewport,

examples/nextjs/pages/Provider/index.tsx

@@ -1,6 +1,5 @@
 import React, { MouseEvent, useCallback } from 'react';
-import {
+import ReactFlow, {
-  ReactFlow,
   Controls,
   ReactFlowProvider,
   addEdge,

examples/nextjs/pages/SaveRestore/index.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import { ReactFlow, ReactFlowProvider, Node, addEdge, Connection, Edge, useNodesState, useEdgesState } from 'reactflow';
+import ReactFlow, { ReactFlowProvider, Node, addEdge, Connection, Edge, useNodesState, useEdgesState } from 'reactflow';
 import Controls from './Controls';
 
 const initialNodes: Node[] = [

examples/nextjs/pages/Stress/index.tsx

@@ -1,6 +1,5 @@
 import React, { useState, CSSProperties, useCallback } from 'react';
-import {
+import ReactFlow, {
-  ReactFlow,
   ReactFlowInstance,
   Edge,
   Node,

examples/nextjs/pages/Subflow/index.tsx

@@ -1,6 +1,5 @@
 import React, { useState, MouseEvent, useCallback } from 'react';
-import {
+import ReactFlow, {
-  ReactFlow,
   addEdge,
   Node,
   Edge,

examples/nextjs/pages/Switch/index.tsx

@@ -1,5 +1,5 @@
 import React, { MouseEvent, useCallback } from 'react';
-import { ReactFlow, addEdge, Node, Connection, Edge, useNodesState, useEdgesState } from 'reactflow';
+import ReactFlow, { addEdge, Node, Connection, Edge, useNodesState, useEdgesState } from 'reactflow';
 
 const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
 const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);

examples/nextjs/pages/TouchDevice/index.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import { ReactFlow, Node, Edge, useNodesState, useEdgesState, Position, Connection, addEdge } from 'reactflow';
+import ReactFlow, { Node, Edge, useNodesState, useEdgesState, Position, Connection, addEdge } from 'reactflow';
 
 import styles from './touch-device.module.css';
 

examples/nextjs/pages/Undirectional/index.tsx

@@ -1,7 +1,5 @@
 import React, { MouseEvent, useCallback } from 'react';
-
+import ReactFlow, {
-import {
-  ReactFlow,
   useReactFlow,
   NodeTypes,
   addEdge,
@@ -15,6 +13,7 @@ import {
   useNodesState,
   useEdgesState,
 } from 'reactflow';
+
 import CustomNode from './CustomNode';
 
 const initialNodes: Node[] = [

examples/nextjs/pages/UpdatableEdge/index.tsx

@@ -1,6 +1,5 @@
 import React, { useState, useCallback } from 'react';
-import {
+import ReactFlow, {
-  ReactFlow,
   updateEdge,
   addEdge,
   applyNodeChanges,

examples/nextjs/pages/UpdateNode/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { ReactFlow, Node, Edge, useNodesState, useEdgesState } from 'reactflow';
+import ReactFlow, { Node, Edge, useNodesState, useEdgesState } from 'reactflow';
 
 import styles from './updatenode.module.css';
 

examples/nextjs/pages/UseReactFlow/index.tsx

@@ -1,8 +1,7 @@
 import React, { useCallback, MouseEvent, useEffect } from 'react';
-import {
+import ReactFlow, {
   Background,
   MiniMap,
-  ReactFlow,
   Node,
   addEdge,
   useReactFlow,

examples/nextjs/pages/UseUpdateNodeInternals/index.tsx

@@ -1,6 +1,5 @@
 import { useCallback, MouseEvent } from 'react';
-import {
+import ReactFlow, {
-  ReactFlow,
   NodeTypes,
   addEdge,
   useReactFlow,

examples/nextjs/pages/Validation/index.tsx

@@ -1,6 +1,5 @@
 import React, { FC, useCallback, useState } from 'react';
-import {
+import ReactFlow, {
-  ReactFlow,
   addEdge,
   Handle,
   Connection,

examples/nextjs/pages/index.tsx

@@ -1,8 +1,6 @@
 import React, { MouseEvent } from 'react';
-
+import ReactFlow, {
-import {
   MiniMap,
-  ReactFlow,
   Background,
   BackgroundVariant,
   Controls,

packages/reactflow/README.md

@@ -1,16 +1,104 @@
-# reactflow
+![readme-header-dark](https://user-images.githubusercontent.com/3797215/156384064-08a889d6-73c0-4cbf-8ff3-28dc601d1f5f.svg#gh-dark-mode-only)
+![readme-header](https://user-images.githubusercontent.com/3797215/156259138-fb9f59f8-52f2-474a-b78c-6570867e4ead.svg#gh-light-mode-only)
 
-Bundles:
+<div align="center">
 
-* @react-flow/core
+![GitHub License MIT](https://img.shields.io/github/license/wbkd/react-flow?color=%23ff0072)
-* @react-flow/background
+![npm downloads](https://img.shields.io/npm/dt/reactflow?color=%23FF0072&label=downloads)
-* @react-flow/controls
+![GitHub Repo stars](https://img.shields.io/github/stars/wbkd/react-flow?color=%23FF0072)
-* @react-flow/minimap
+![GitHub release (latest by date)](https://img.shields.io/github/v/release/wbkd/react-flow?color=%23FF0072)
 
+A highly customizable React component for building interactive graphs and node-based editors.
+
+[🚀 Getting Started](https://reactflow.dev/docs/getting-started/installation) | [📖 Documentation](https://reactflow.dev/docs/api/react-flow-props) | [📺 Examples](https://reactflow.dev/docs/examples/overview) | [☎️ Discord](https://discord.gg/RVmnytFmGW) | [💎 React Flow Pro](https://pro.reactflow.dev/pricing)
+
+</div>
+
+---
+
+## Key Features
+
+- **Easy to use:** Seamless zooming and panning, single- and multi selection of graph elements and keyboard shortcuts are supported out of the box
+- **Customizable:** Different [node](https://reactflow.dev/docs/api/nodes/node-types) and [edge types](https://reactflow.dev/docs/api/edges/edge-types) and support for custom nodes with multiple handles and custom edges
+- **Fast rendering:** Only nodes that have changed are re-rendered and only those in the viewport are displayed
+- **Hooks and Utils:** [Hooks](https://reactflow.dev/docs/api/hooks/use-react-flow) for handling nodes, edges and the viewport and graph [helper functions](https://reactflow.dev/docs/api/graph-util-functions)
+- **Plugin Components:** [Background](https://reactflow.dev/docs/api/plugin-components/background), [MiniMap](https://reactflow.dev/docs/api/plugin-components/minimap) and [Controls](https://reactflow.dev/docs/api/plugin-components/controls)
+- **Reliable**: Written in [Typescript](https://www.typescriptlang.org/) and tested with [cypress](https://www.cypress.io/)
+
+## Commercial Usage / Attribution
+
+React Flow includes a small attribution that links to the React Flow website. **We expect companies who are using React Flow commercially to subscribe to [React Flow Pro](https://pro.reactflow.dev/pricing) if they want to remove the attribution.** By subscribing you get access to other exclusive services like advanced examples, individual support or prioritized bug reports. In non-commercial applications you may hide the attribution without subscribing but are welcome to [sponsor us on Github](https://github.com/sponsors/wbkd).
+
+You can find more information in our [React Flow Pro FAQs](https://pro.reactflow.dev/faq).
 
 ## Installation
 
-```sh 
+The easiest way to get the latest version of React Flow is to install it via npm:
+
+```bash
 npm install reactflow
 ```
 
+## Quick Start
+
+This is only a very basic usage example of React Flow. To see everything that is possible with the library, please refer to the [website](https://reactflow.dev) for [guides](https://reactflow.dev/docs/guides/custom-nodes), [examples](https://reactflow.dev/docs/examples/overview) and [API reference](https://reactflow.dev/docs/api/react-flow-props).
+
+```jsx
+import ReactFlow, { MiniMap, Controls } from 'reactflow';
+
+function Flow({ nodes, edges, onNodesChange, onEdgesChange, onConnect }) {
+  return (
+    <ReactFlow
+      nodes={nodes}
+      edges={edges}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      onConnect={onConnect}
+    >
+      <MiniMap />
+      <Controls />
+    </ReactFlow>
+  );
+}
+```
+
+## Development
+
+Before you can start developing please make sure that you have yarn classic installed (`npm i -g yarn`). Then install the dependencies using yarn: `yarn`.
+
+For local development, you can use `yarn dev`. This will run preconstruct and build all the packages.
+
+## Testing
+
+Testing is done with cypress. You can find the tests in the [`integration/flow`](/cypress/integration/flow) folder. In order to run the tests do:
+
+```sh
+npm run test
+```
+
+## Maintainers
+
+React Flow is developed and maintained by [webkid](https://webkid.io), a web development agency with focus on data driven applications from Berlin. If you need help or want to talk to us about a collaboration, feel free to contact us:
+
+- Moritz Klack • [Twitter](https://twitter.com/moklick) • [Github](https://github.com/moklick)
+- Christopher Möller • [Twitter](https://twitter.com/chrtze) • [Github](https://github.com/chrtze)
+
+You can also use our [contact form](https://pro.reactflow.dev/contact) or join the [React Flow Discord Server](https://discord.gg/Bqt6xrs).
+
+## Community Packages
+
+- [useUndoable](https://github.com/Infinium8/useUndoable) - Hook for undo/redo functionality with an explicit React Flow example
+- [react-flow-smart-edge](https://github.com/tisoap/react-flow-smart-edge) - Custom edge that doesn't intersect with nodes
+- [Feliz.ReactFlow](https://github.com/tforkmann/Feliz.ReactFlow) - Feliz React Bindings for React Flow
+
+## Credits
+
+React Flow was initially developed for [datablocks](https://datablocks.pro), a graph-based editor for transforming, analyzing and visualizing data in your browser. Under the hood, React Flow depends on these great libraries:
+
+- [d3-zoom](https://github.com/d3/d3-zoom) - used for zoom, pan and drag interactions with the graph canvas
+- [d3-drag](https://github.com/d3/d3-drag) - used for making the nodes draggable
+- [zustand](https://github.com/pmndrs/zustand) - internal state management
+
+## License
+
+React Flow is [MIT licensed](https://github.com/wbkd/react-flow/blob/main/LICENSE).

packages/reactflow/src/index.ts

@@ -2,3 +2,7 @@ export * from '@react-flow/core';
 export * from '@react-flow/minimap';
 export * from '@react-flow/controls';
 export * from '@react-flow/background';
+
+import { ReactFlow } from '@react-flow/core';
+
+export default ReactFlow;