diff --git a/examples/nextjs/cypress.config.js b/examples/nextjs/cypress.config.ts similarity index 94% rename from examples/nextjs/cypress.config.js rename to examples/nextjs/cypress.config.ts index 7e24d96b..02c9afd4 100644 --- a/examples/nextjs/cypress.config.js +++ b/examples/nextjs/cypress.config.ts @@ -13,5 +13,6 @@ module.exports = defineConfig({ framework: 'next', bundler: 'webpack', }, + video: false, }, }); diff --git a/examples/nextjs/pages/UpdatableEdge/index.tsx b/examples/nextjs/pages/UpdatableEdge/index.tsx index 38ca5191..c2f3e267 100644 --- a/examples/nextjs/pages/UpdatableEdge/index.tsx +++ b/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[] = [ { diff --git a/examples/nextjs/pages/_app.tsx b/examples/nextjs/pages/_app.tsx index d197bdcc..1d4fb176 100755 --- a/examples/nextjs/pages/_app.tsx +++ b/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'; diff --git a/examples/nextjs/tsconfig.json b/examples/nextjs/tsconfig.json index e29f18b1..09130c19 100644 --- a/examples/nextjs/tsconfig.json +++ b/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"] diff --git a/package.json b/package.json index d722fe95..7d0a756e 100644 --- a/package.json +++ b/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", diff --git a/packages/background/README.md b/packages/background/README.md index f875b9f9..a55c5bfb 100644 --- a/packages/background/README.md +++ b/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 ``` diff --git a/packages/background/package.json b/packages/background/package.json index 527b2048..903b4294 100644 --- a/packages/background/package.json +++ b/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", - "module": "dist/rctflw-background.esm.js", - "types": "dist/rctflw-background.cjs.d.ts", + "main": "dist/reactflow-background.cjs.js", + "module": "dist/reactflow-background.esm.js", + "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": { diff --git a/packages/background/src/Background.tsx b/packages/background/src/Background.tsx index 27abff8a..e3867a6e 100644 --- a/packages/background/src/Background.tsx +++ b/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'; diff --git a/packages/controls/README.md b/packages/controls/README.md index a45eda41..48d07fa8 100644 --- a/packages/controls/README.md +++ b/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 ``` diff --git a/packages/controls/package.json b/packages/controls/package.json index cbb2e92f..e33a52a2 100644 --- a/packages/controls/package.json +++ b/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", - "module": "dist/rctflw-controls.esm.js", - "types": "dist/rctflw-controls.cjs.d.ts", + "main": "dist/reactflow-controls.cjs.js", + "module": "dist/reactflow-controls.esm.js", + "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": { diff --git a/packages/controls/src/Controls.tsx b/packages/controls/src/Controls.tsx index e124a490..11c50df4 100644 --- a/packages/controls/src/Controls.tsx +++ b/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'; diff --git a/packages/controls/src/types.ts b/packages/controls/src/types.ts index b7aa795f..20cfa433 100644 --- a/packages/controls/src/types.ts +++ b/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 { showZoom?: boolean; diff --git a/packages/core/README.md b/packages/core/README.md index 40a90cb9..d87523ed 100644 --- a/packages/core/README.md +++ b/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 ``` diff --git a/packages/core/package.json b/packages/core/package.json index c8e238aa..e627ee7b 100644 --- a/packages/core/package.json +++ b/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", - "module": "dist/rctflw-core.esm.js", - "types": "dist/rctflw-core.cjs.d.ts", + "main": "dist/reactflow-core.cjs.js", + "module": "dist/reactflow-core.esm.js", + "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", diff --git a/packages/core/src/styles/init.css b/packages/core/src/styles/init.css index 37290096..25e9d45f 100644 --- a/packages/core/src/styles/init.css +++ b/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 { diff --git a/packages/core/src/utils/index.ts b/packages/core/src/utils/index.ts index 6456daaa..a27bbca0 100644 --- a/packages/core/src/utils/index.ts +++ b/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]), }); diff --git a/packages/minimap/README.md b/packages/minimap/README.md index bf46de5c..2dba17d9 100644 --- a/packages/minimap/README.md +++ b/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 ``` diff --git a/packages/minimap/package.json b/packages/minimap/package.json index 85c28ba9..3dc2a902 100644 --- a/packages/minimap/package.json +++ b/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", - "module": "dist/rctflw-minimap.esm.js", - "types": "dist/rctflw-minimap.cjs.d.ts", + "main": "dist/reactflow-minimap.cjs.js", + "module": "dist/reactflow-minimap.esm.js", + "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" }, diff --git a/packages/minimap/src/MiniMap.tsx b/packages/minimap/src/MiniMap.tsx index b5fa84ae..82eaac14 100644 --- a/packages/minimap/src/MiniMap.tsx +++ b/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'; diff --git a/packages/minimap/src/types.ts b/packages/minimap/src/types.ts index 51324df5..5f82824d 100644 --- a/packages/minimap/src/types.ts +++ b/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 = (node: Node) => string; diff --git a/packages/reactflow/package.json b/packages/reactflow/package.json index 7a9c5f04..e2cb5870 100644 --- a/packages/reactflow/package.json +++ b/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:*", - "@rctflw/controls": "workspace:*", - "@rctflw/core": "workspace:*", - "@rctflw/minimap": "workspace:*" + "@reactflow/background": "workspace:*", + "@reactflow/controls": "workspace:*", + "@reactflow/core": "workspace:*", + "@reactflow/minimap": "workspace:*" }, "peerDependencies": { "react": ">=18", diff --git a/packages/reactflow/src/index.ts b/packages/reactflow/src/index.ts index 550bdd6e..310aa1f4 100644 --- a/packages/reactflow/src/index.ts +++ b/packages/reactflow/src/index.ts @@ -1,8 +1,6 @@ -export * from '@rctflw/core'; -export * from '@rctflw/minimap'; -export * from '@rctflw/controls'; -export * from '@rctflw/background'; +export * from '@reactflow/core'; +export * from '@reactflow/minimap'; +export * from '@reactflow/controls'; +export * from '@reactflow/background'; -import { ReactFlow } from '@rctflw/core'; - -export default ReactFlow; +export { ReactFlow as default } from '@reactflow/core'; diff --git a/yarn.lock b/yarn.lock index 9bb39f21..6813ddbc 100644 --- a/yarn.lock +++ b/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:*" - "@rctflw/controls": "workspace:*" - "@rctflw/core": "workspace:*" - "@rctflw/minimap": "workspace:*" + "@reactflow/background": "workspace:*" + "@reactflow/controls": "workspace:*" + "@reactflow/core": "workspace:*" + "@reactflow/minimap": "workspace:*" autoprefixer: ^10.4.8 postcss: ^8.4.14 postcss-cli: ^10.0.0