chore(packages): use @reactflow org for packages

examples/nextjs/cypress.config.ts

@@ -13,5 +13,6 @@ module.exports = defineConfig({
       framework: 'next',
       bundler: 'webpack',
     },
+    video: false,
   },
 });

examples/nextjs/pages/UpdatableEdge/index.tsx

@@ -13,7 +13,7 @@ import ReactFlow, {
   HandleType,
 } from 'reactflow';
 
-import { Controls } from '@rctflw/controls';
+import { Controls } from '@reactflow/controls';
 
 const initialNodes: Node[] = [
   {

examples/nextjs/pages/_app.tsx

@@ -4,7 +4,7 @@ import '../styles/globals.css';
 
 // Unfortunately this doesn't work because preconsruct clears the dist folder and there is
 // no way to hook into the watch process to copy the files back to the dist folder
-// import '@rctflw/core/dist/theme-default.css';
+// import '@reactflow/core/dist/theme-default.css';
 
 // this is a workaround for testing the theme. See explanation above.
 import '../styles/rf-style.css';

examples/nextjs/tsconfig.json

@@ -15,7 +15,7 @@
     "jsx": "preserve",
     "incremental": true,
     "baseUrl": "./",
-    "types": ["cypress", "@testing-library/cypress"]
+    "types": ["cypress"]
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]

package.json

@@ -14,7 +14,7 @@
     "dev": "preconstruct watch",
     "dev:example": "cd examples/nextjs && yarn dev",
     "build": "preconstruct build && yarn run packages",
-    "packages": "yarn workspaces foreach --include '@rctflw/**' --include 'reactflow' run build",
+    "packages": "yarn workspaces foreach --include '@reactflow/**' --include 'reactflow' run build",
     "test:all": "yarn test:chrome && yarn test:firefox",
     "test:e2e": "cd examples/nextjs && cypress run",
     "test:component": "cd examples/nextjs && cypress run --component",

packages/background/README.md

@@ -1,10 +1,10 @@
-# @rctflw/background
+# @reactflow/background
 
 Background component for React Flow.
 
 ## Installation 
 
 ```sh 
-npm install @rctflw/background
+npm install @reactflow/background
 ```
 

packages/background/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@rctflw/background",
+  "name": "@reactflow/background",
   "version": "11.0.0-next.0",
   "description": "Background component with different variants for React Flow",
   "keywords": [
@@ -13,10 +13,13 @@
   "files": [
     "dist"
   ],
-  "main": "dist/rctflw-background.cjs.js",
+  "main": "dist/reactflow-background.cjs.js",
-  "module": "dist/rctflw-background.esm.js",
+  "module": "dist/reactflow-background.esm.js",
-  "types": "dist/rctflw-background.cjs.d.ts",
+  "types": "dist/reactflow-background.cjs.d.ts",
   "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -25,7 +28,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.9",
-    "@rctflw/core": "workspace:*",
+    "@reactflow/core": "workspace:*",
     "classcat": "^5.0.3"
   },
   "peerDependencies": {

packages/background/src/Background.tsx

@@ -1,6 +1,6 @@
 import { memo, useRef, useId } from 'react';
 import cc from 'classcat';
-import { useStore, ReactFlowState } from '@rctflw/core';
+import { useStore, ReactFlowState } from '@reactflow/core';
 
 import { BackgroundProps, BackgroundVariant } from './types';
 import { DotPattern, LinePattern } from './Patterns';

packages/controls/README.md

@@ -1,10 +1,10 @@
-# @rctflw/controls
+# @reactflow/controls
 
 Controls component for React Flow.
 
 ## Installation 
 
 ```sh 
-npm install @rctflw/controls
+npm install @reactflow/controls
 ```
 

packages/controls/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@rctflw/controls",
+  "name": "@reactflow/controls",
   "version": "11.0.0-next.0",
   "description": "Component to control the viewport of a React Flow instance",
   "keywords": [
@@ -13,9 +13,9 @@
   "files": [
     "dist"
   ],
-  "main": "dist/rctflw-controls.cjs.js",
+  "main": "dist/reactflow-controls.cjs.js",
-  "module": "dist/rctflw-controls.esm.js",
+  "module": "dist/reactflow-controls.esm.js",
-  "types": "dist/rctflw-controls.cjs.d.ts",
+  "types": "dist/reactflow-controls.cjs.d.ts",
   "sideEffects": false,
   "license": "MIT",
   "repository": {
@@ -26,9 +26,12 @@
   "scripts": {
     "build": "postcss src/*.css --config ../../postcss.config.json --dir dist"
   },
+  "publishConfig": {
+    "access": "public"
+  },
   "dependencies": {
     "@babel/runtime": "^7.18.9",
-    "@rctflw/core": "workspace:*",
+    "@reactflow/core": "workspace:*",
     "classcat": "^5.0.3"
   },
   "peerDependencies": {

packages/controls/src/Controls.tsx

@@ -1,6 +1,6 @@
 import { memo, FC, useEffect, useState, PropsWithChildren } from 'react';
 import cc from 'classcat';
-import { useStore, useStoreApi, useReactFlow, ReactFlowState, Panel } from '@rctflw/core';
+import { useStore, useStoreApi, useReactFlow, ReactFlowState, Panel } from '@reactflow/core';
 
 import PlusIcon from './Icons/Plus';
 import MinusIcon from './Icons/Minus';

packages/controls/src/types.ts

@@ -1,5 +1,5 @@
 import { ButtonHTMLAttributes, HTMLAttributes } from 'react';
-import { FitViewOptions, PanelPosition } from '@rctflw/core';
+import { FitViewOptions, PanelPosition } from '@reactflow/core';
 
 export interface ControlProps extends HTMLAttributes<HTMLDivElement> {
   showZoom?: boolean;

packages/core/README.md

@@ -1,10 +1,10 @@
-# @rctflw/core
+# @reactflow/core
 
 Core components and util functions of React Flow.
 
 ## Installation 
 
 ```sh 
-npm install @rctflw/core
+npm install @reactflow/core
 ```
 

packages/core/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@rctflw/core",
+  "name": "@reactflow/core",
   "version": "11.0.0-next.0",
   "description": "Core components and util functions of React Flow.",
   "keywords": [
@@ -13,11 +13,14 @@
   "files": [
     "dist"
   ],
-  "main": "dist/rctflw-core.cjs.js",
+  "main": "dist/reactflow-core.cjs.js",
-  "module": "dist/rctflw-core.esm.js",
+  "module": "dist/reactflow-core.esm.js",
-  "types": "dist/rctflw-core.cjs.d.ts",
+  "types": "dist/reactflow-core.cjs.d.ts",
   "sideEffects": false,
   "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/wbkd/react-flow.git",

packages/core/src/styles/init.css

@@ -1,4 +1,4 @@
-/* these are the necessary styles for React Flow */
+/* these are the necessary styles for React Flow, they get used by base.css and style.css */
 .react-flow__container {
   position: absolute;
   width: 100%;
@@ -138,6 +138,7 @@
 
   &.connectable {
     pointer-events: all;
+    cursor: crosshair;
   }
 
   &-bottom {

packages/core/src/utils/index.ts

@@ -7,7 +7,7 @@ export const getDimensions = (node: HTMLDivElement): Dimensions => ({
 
 export const clamp = (val: number, min = 0, max = 1): number => Math.min(Math.max(val, min), max);
 
-export const clampPosition = (position: XYPosition, extent: CoordinateExtent) => ({
+export const clampPosition = (position: XYPosition = { x: 0, y: 0 }, extent: CoordinateExtent) => ({
   x: clamp(position.x, extent[0][0], extent[1][0]),
   y: clamp(position.y, extent[0][1], extent[1][1]),
 });

packages/minimap/README.md

@@ -1,10 +1,10 @@
-# @rctflw/minimap
+# @reactflow/minimap
 
 Mini map component for React Flow.
 
 ## Installation 
 
 ```sh 
-npm install @rctflw/minimap
+npm install @reactflow/minimap
 ```
 

packages/minimap/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@rctflw/minimap",
+  "name": "@reactflow/minimap",
   "version": "11.0.0-next.0",
   "description": "Minimap component for React Flow.",
   "keywords": [
@@ -13,10 +13,13 @@
   "files": [
     "dist"
   ],
-  "main": "dist/rctflw-minimap.cjs.js",
+  "main": "dist/reactflow-minimap.cjs.js",
-  "module": "dist/rctflw-minimap.esm.js",
+  "module": "dist/reactflow-minimap.esm.js",
-  "types": "dist/rctflw-minimap.cjs.d.ts",
+  "types": "dist/reactflow-minimap.cjs.d.ts",
   "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -28,7 +31,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.9",
-    "@rctflw/core": "workspace:*",
+    "@reactflow/core": "workspace:*",
     "classcat": "^5.0.3",
     "zustand": "^4.0.0"
   },

packages/minimap/src/MiniMap.tsx

@@ -2,7 +2,7 @@
 import { memo, useId } from 'react';
 import cc from 'classcat';
 import shallow from 'zustand/shallow';
-import { useStore, getRectOfNodes, ReactFlowState, Rect, Panel, getBoundsOfRects } from '@rctflw/core';
+import { useStore, getRectOfNodes, ReactFlowState, Rect, Panel, getBoundsOfRects } from '@reactflow/core';
 
 import MiniMapNode from './MiniMapNode';
 import { MiniMapProps, GetMiniMapNodeAttribute } from './types';

packages/minimap/src/types.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { HTMLAttributes } from 'react';
-import { Node, PanelPosition } from '@rctflw/core';
+import { Node, PanelPosition } from '@reactflow/core';
 
 export type GetMiniMapNodeAttribute<NodeData = any> = (node: Node<NodeData>) => string;
 

packages/reactflow/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reactflow",
-  "version": "11.0.0-next.2",
+  "version": "11.0.0-next.6",
   "description": "A highly customizable React library for building node-based editors and interactive flow charts",
   "keywords": [
     "react",
@@ -28,10 +28,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.9",
-    "@rctflw/background": "workspace:*",
+    "@reactflow/background": "workspace:*",
-    "@rctflw/controls": "workspace:*",
+    "@reactflow/controls": "workspace:*",
-    "@rctflw/core": "workspace:*",
+    "@reactflow/core": "workspace:*",
-    "@rctflw/minimap": "workspace:*"
+    "@reactflow/minimap": "workspace:*"
   },
   "peerDependencies": {
     "react": ">=18",

packages/reactflow/src/index.ts

@@ -1,8 +1,6 @@
-export * from '@rctflw/core';
+export * from '@reactflow/core';
-export * from '@rctflw/minimap';
+export * from '@reactflow/minimap';
-export * from '@rctflw/controls';
+export * from '@reactflow/controls';
-export * from '@rctflw/background';
+export * from '@reactflow/background';
 
-import { ReactFlow } from '@rctflw/core';
+export { ReactFlow as default } from '@reactflow/core';
-
-export default ReactFlow;

yarn.lock

@@ -2301,12 +2301,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rctflw/background@workspace:*, @rctflw/background@workspace:packages/background":
+"@reactflow/background@workspace:*, @reactflow/background@workspace:packages/background":
   version: 0.0.0-use.local
-  resolution: "@rctflw/background@workspace:packages/background"
+  resolution: "@reactflow/background@workspace:packages/background"
   dependencies:
     "@babel/runtime": ^7.18.9
-    "@rctflw/core": "workspace:*"
+    "@reactflow/core": "workspace:*"
     classcat: ^5.0.3
   peerDependencies:
     react: ">=18"
@@ -2314,12 +2314,12 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@rctflw/controls@workspace:*, @rctflw/controls@workspace:packages/controls":
+"@reactflow/controls@workspace:*, @reactflow/controls@workspace:packages/controls":
   version: 0.0.0-use.local
-  resolution: "@rctflw/controls@workspace:packages/controls"
+  resolution: "@reactflow/controls@workspace:packages/controls"
   dependencies:
     "@babel/runtime": ^7.18.9
-    "@rctflw/core": "workspace:*"
+    "@reactflow/core": "workspace:*"
     autoprefixer: ^10.4.8
     classcat: ^5.0.3
     postcss: ^8.4.16
@@ -2333,9 +2333,9 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@rctflw/core@workspace:*, @rctflw/core@workspace:packages/core":
+"@reactflow/core@workspace:*, @reactflow/core@workspace:packages/core":
   version: 0.0.0-use.local
-  resolution: "@rctflw/core@workspace:packages/core"
+  resolution: "@reactflow/core@workspace:packages/core"
   dependencies:
     "@babel/runtime": ^7.18.9
     "@types/d3": ^7.4.0
@@ -2357,12 +2357,12 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@rctflw/minimap@workspace:*, @rctflw/minimap@workspace:packages/minimap":
+"@reactflow/minimap@workspace:*, @reactflow/minimap@workspace:packages/minimap":
   version: 0.0.0-use.local
-  resolution: "@rctflw/minimap@workspace:packages/minimap"
+  resolution: "@reactflow/minimap@workspace:packages/minimap"
   dependencies:
     "@babel/runtime": ^7.18.9
-    "@rctflw/core": "workspace:*"
+    "@reactflow/core": "workspace:*"
     autoprefixer: ^10.4.8
     classcat: ^5.0.3
     postcss: ^8.4.16
@@ -8520,10 +8520,10 @@ __metadata:
   resolution: "reactflow@workspace:packages/reactflow"
   dependencies:
     "@babel/runtime": ^7.18.9
-    "@rctflw/background": "workspace:*"
+    "@reactflow/background": "workspace:*"
-    "@rctflw/controls": "workspace:*"
+    "@reactflow/controls": "workspace:*"
-    "@rctflw/core": "workspace:*"
+    "@reactflow/core": "workspace:*"
-    "@rctflw/minimap": "workspace:*"
+    "@reactflow/minimap": "workspace:*"
     autoprefixer: ^10.4.8
     postcss: ^8.4.14
     postcss-cli: ^10.0.0