feat!: migrate to pnpm monorepo

.github/workflows/release.yml

@@ -2,25 +2,76 @@ name: Release
 
 on:
   push:
-    branches:
-      - main
-      - release/v*
+    branches: [main]
 
 jobs:
-  release:
+  release-please:
     runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: write
+
+    outputs:
+      releases_created: ${{ steps.release.outputs.releases_created }}
+      canvas_core_created: ${{ steps.release.outputs['packages/graph-canvas-core--release_created'] }}
+      graph_created: ${{ steps.release.outputs['packages/graph--release_created'] }}
+      graph_react_created: ${{ steps.release.outputs['packages/graph-react--release_created'] }}
+
     steps:
       - name: Generate token
         id: generate-token
         uses: actions/create-github-app-token@v2
         with:
           app-id: ${{ secrets.GRAVITY_UI_APP_ID }}
           private-key: ${{ secrets.GRAVITY_UI_APP_PRIVATE_KEY }}
-      - name: Release from ${{ github.ref_name }}
-        uses: gravity-ui/release-action@v1
+
+      - uses: googleapis/release-please-action@v4
+        id: release
+        with:
+          token: ${{ steps.generate-token.outputs.token }}
+          config-file: release-please-config.json
+          manifest-file: .release-please-manifest.json
+
+  publish:
+    needs: release-please
+    if: ${{ needs.release-please.outputs.releases_created == 'true' }}
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 9
+
+      - uses: actions/setup-node@v4
         with:
-          github-token: ${{ steps.generate-token.outputs.token }}
-          npm-token: ${{ secrets.GRAVITY_UI_BOT_NPM_TOKEN }}
-          node-version: 24
-          default-branch: ${{ github.ref_name != 'main' && github.ref_name || null }}
-          npm-dist-tag: ${{ github.ref_name != 'main' && 'untagged' || 'latest' }}
+          node-version: 20
+          registry-url: https://registry.npmjs.org/
+          cache: "pnpm"
+
+      - run: pnpm install
+
+      - name: Build all packages
+        run: pnpm build
+
+      # Publish canvas-core
+      - name: Publish @gravity-ui/graph-canvas-core
+        if: ${{ needs.release-please.outputs.canvas_core_created == 'true' }}
+        run: pnpm --filter '@gravity-ui/graph-canvas-core' publish --access public --no-git-checks
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.GRAVITY_UI_BOT_NPM_TOKEN }}
+
+      # Publish graph
+      - name: Publish @gravity-ui/graph
+        if: ${{ needs.release-please.outputs.graph_created == 'true' }}
+        run: pnpm --filter '@gravity-ui/graph' publish --access public --no-git-checks
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.GRAVITY_UI_BOT_NPM_TOKEN }}
+
+      # Publish graph-react
+      - name: Publish @gravity-ui/graph-react
+        if: ${{ needs.release-please.outputs.graph_react_created == 'true' }}
+        run: pnpm --filter '@gravity-ui/graph-react' publish --access public --no-git-checks
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.GRAVITY_UI_BOT_NPM_TOKEN }}

.gitignore

@@ -5,5 +5,13 @@ dist
 .vscode
 .DS_Store
 storybook-static
-.tsbuildinfo
+
+# Build outputs
 build
+*.tsbuildinfo
+
+# Rollup cache
+.rollup.cache
+
+# pnpm
+pnpm-lock.yaml

.release-please-manifest.json

@@ -0,0 +1,6 @@
+{
+  "packages/graph-canvas-core": "1.0.0",
+  "packages/graph": "1.8.3",
+  "packages/graph-react": "1.8.3",
+  "apps/storybook": "1.8.3"
+}

apps/storybook/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@gravity-ui/graph-storybook",
+  "version": "1.8.3",
+  "private": true,
+  "scripts": {
+    "storybook": "storybook dev -p 6006",
+    "build": "storybook build",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": {
+    "@gravity-ui/graph": "workspace:*",
+    "@gravity-ui/graph-react": "workspace:*",
+    "@gravity-ui/icons": "^2.15.0",
+    "@gravity-ui/uikit": "^7.19.0",
+    "@floating-ui/react": "^0.27.13",
+    "@monaco-editor/react": "^4.6.0",
+    "elkjs": "^0.9.3",
+    "monaco-editor": "^0.52.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^4.1.0",
+    "@storybook/addon-docs": "^9.1.2",
+    "@storybook/addon-links": "^9.1.2",
+    "@storybook/addon-styling-webpack": "^2.0.0",
+    "@storybook/addon-webpack5-compiler-swc": "^3.0.0",
+    "@storybook/react-webpack5": "^9.1.2",
+    "@swc/core": "^1.13.3",
+    "sass": "^1.77.1",
+    "storybook": "^9.1.2",
+    "@types/react": "^18.2.14",
+    "@types/react-dom": "^18.2.6"
+  }
+}

src/stories/Playground/ActionBlock/ActionBlockHtml.tsx → apps/storybook/src/stories/Playground/ActionBlock/ActionBlockHtml.tsx

@@ -3,8 +3,8 @@ import React from "react";
 import { Database } from "@gravity-ui/icons";
 import { Button, Flex, Icon, Text } from "@gravity-ui/uikit";
 
-import { Graph } from "../../../graph";
-import { GraphBlock, GraphBlockAnchor } from "../../../react-components";
+import { Graph } from "@gravity-ui/graph";
+import { GraphBlock, GraphBlockAnchor } from "@gravity-ui/graph-react";
 import { TGravityActionBlock } from "../generateLayout";
 
 import "./ActionBlock.css";

src/stories/Playground/ActionBlock/index.tsx → apps/storybook/src/stories/Playground/ActionBlock/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
-import { Anchor, CanvasBlock, EAnchorType, TAnchor, TBlockId, TPoint, layoutText } from "../../..";
-import { renderSVG } from "../../../utils/renderers/svgPath";
+import { Anchor, CanvasBlock, EAnchorType, TAnchor, TBlockId, TPoint, layoutText } from "@gravity-ui/graph";
+import { renderSVG } from "@gravity-ui/graph";
 import { TGravityActionBlock } from "../generateLayout";
 
 import { ActionBlockHtml } from "./ActionBlockHtml";

src/stories/Playground/Editor/index.tsx → apps/storybook/src/stories/Playground/Editor/index.tsx

@@ -4,10 +4,10 @@ import { Button, Flex, Hotkey, Text } from "@gravity-ui/uikit";
 import { Editor, OnMount, OnValidate, loader } from "@monaco-editor/react";
 import { KeyCode, KeyMod } from "monaco-editor/esm/vs/editor/editor.api";
 
-import type { TBlock } from "../../../components/canvas/blocks/Block";
-import { useFn } from "../../../react-components/utils/hooks/useFn";
-import { TBlockId } from "../../../store/block/Block";
-import type { TConnection } from "../../../store/connection/ConnectionState";
+import type { TBlock } from "@gravity-ui/graph";
+import { useFn } from "@gravity-ui/graph-react/utils/hooks/useFn";
+import { TBlockId } from "@gravity-ui/graph";
+import type { TConnection } from "@gravity-ui/graph";
 
 import { defineConigSchema } from "./schema";
 import { GravityTheme, defineTheme } from "./theme";

src/stories/Playground/GraphPlayground.tsx → apps/storybook/src/stories/Playground/GraphPlayground.tsx

@@ -10,13 +10,13 @@ import {
 } from "@gravity-ui/uikit";
 import { StoryFn } from "storybook/internal/types";
 
-import { TBlock } from "../../components/canvas/blocks/Block";
-import { random } from "../../components/canvas/blocks/generate";
-import { ConnectionLayer } from "../../components/canvas/layers/connectionLayer/ConnectionLayer";
-import { Graph, GraphState, TGraphConfig } from "../../graph";
-import { GraphBlock, GraphCanvas, HookGraphParams, useGraph, useGraphEvent, useLayer } from "../../react-components";
-import { useFn } from "../../react-components/utils/hooks/useFn";
-import { ECanDrag } from "../../store/settings";
+import { TBlock } from "@gravity-ui/graph";
+import { random } from "@gravity-ui/graph";
+import { ConnectionLayer } from "@gravity-ui/graph";
+import { Graph, GraphState, TGraphConfig } from "@gravity-ui/graph";
+import { GraphBlock, GraphCanvas, HookGraphParams, useGraph, useGraphEvent, useLayer } from "@gravity-ui/graph";
+import { useFn } from "@gravity-ui/graph";
+import { ECanDrag } from "@gravity-ui/graph";
 import { EAnchorType } from "../configurations/definitions";
 
 import { ActionBlock } from "./ActionBlock";

src/stories/Playground/Settings.tsx → apps/storybook/src/stories/Playground/Settings.tsx

@@ -11,7 +11,7 @@ import {
   Text,
 } from "@gravity-ui/uikit";
 
-import { Graph } from "../../graph";
+import { Graph } from "@gravity-ui/graph";
 
 import { useRerender } from "./hooks";
 

src/stories/Playground/TextBlock/TextBlockHtml.tsx → apps/storybook/src/stories/Playground/TextBlock/TextBlockHtml.tsx

@@ -3,8 +3,8 @@ import React from "react";
 import { CircleInfo } from "@gravity-ui/icons";
 import { Flex, Icon, Text } from "@gravity-ui/uikit";
 
-import { Graph } from "../../../graph";
-import { GraphBlock } from "../../../react-components";
+import { Graph } from "@gravity-ui/graph";
+import { GraphBlock } from "@gravity-ui/graph-react";
 import { TGravityTextBlock } from "../generateLayout";
 
 import "./TextBlock.css";

src/stories/Playground/TextBlock/index.tsx → apps/storybook/src/stories/Playground/TextBlock/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { CanvasBlock, TBlockId, layoutText } from "../../..";
+import { CanvasBlock, TBlockId, layoutText } from "@gravity-ui/graph";
 import { TGravityTextBlock } from "../generateLayout";
 
 import { TextBlockHtml } from "./TextBlockHtml";

src/stories/Playground/Toolbox.tsx → apps/storybook/src/stories/Playground/Toolbox.tsx

@@ -3,8 +3,8 @@ import React, { useState } from "react";
 import { MagnifierMinus, MagnifierPlus, SquareDashed } from "@gravity-ui/icons";
 import { Button, Flex, Icon, Tooltip } from "@gravity-ui/uikit";
 
-import { Graph } from "../../graph";
-import { useGraphEvent } from "../../react-components";
+import { Graph } from "@gravity-ui/graph";
+import { useGraphEvent } from "@gravity-ui/graph";
 
 export function Toolbox({ className, graph }: { className: string; graph: Graph }) {
   const [scale, setScale] = useState(1);

src/stories/Playground/generateLayout.tsx → apps/storybook/src/stories/Playground/generateLayout.tsx

@@ -1,6 +1,6 @@
-import { TBlock } from "../../components/canvas/blocks/Block";
-import { TGraphConfig } from "../../graph";
-import { EAnchorType } from "../../store/anchor/Anchor";
+import { TBlock } from "@gravity-ui/graph";
+import { TGraphConfig } from "@gravity-ui/graph";
+import { EAnchorType } from "@gravity-ui/graph";
 
 export const GravityActionBlockIS = "block-action";
 export type TGravityActionBlock = TBlock<{ description: string }> & { is: typeof GravityActionBlockIS };

src/stories/Playground/hooks.ts → apps/storybook/src/stories/Playground/hooks.ts

@@ -1,6 +1,6 @@
 import { useState } from "react";
 
-import { useFn } from "../../react-components/utils/hooks/useFn";
+import { useFn } from "@gravity-ui/graph";
 
 export function useRerender() {
   const [_, setTick] = useState(Date.now());

src/stories/api/startStopGraph/startStop.stories.tsx → apps/storybook/src/stories/api/startStopGraph/startStop.stories.tsx

@@ -3,12 +3,14 @@ import React, { useMemo, useState } from "react";
 import { Button, Flex, ThemeProvider } from "@gravity-ui/uikit";
 import type { Meta, StoryFn } from "@storybook/react-webpack5";
 
-import { TBlock } from "../../../components/canvas/blocks/Block";
-import { Graph, GraphState } from "../../../graph";
-import { GraphCanvas, useGraph } from "../../../react-components";
-import { useFn } from "../../../react-components/utils/hooks/useFn";
-import { generatePrettyBlocks } from "../../configurations/generatePretty";
-import { BlockStory } from "../../main/Block";
+// import { TBlock } from "@gravity-ui/graph";
+// import { Graph, GraphState } from "@gravity-ui/graph";
+// import { GraphCanvas, useGraph } from "@gravity-ui/graph-react";
+// import { useFn } from "@gravity-ui/graph-react/utils/hooks/useFn";
+import { generatePrettyBlocks } from "@gravity-ui/graph";
+import { BlockStory } from "@gravity-ui/graph";
+import { Graph, GraphState, TBlock } from "@gravity-ui/graph";
+import { useGraph, GraphCanvas } from "@gravity-ui/graph-react";
 
 import "@gravity-ui/uikit/styles/styles.css";
 

src/stories/api/updateBlock/updateBlock.stories.tsx → apps/storybook/src/stories/api/updateBlock/updateBlock.stories.tsx

@@ -3,11 +3,11 @@ import React, { useCallback, useRef, useState } from "react";
 import { Button, ButtonButtonProps, Flex, TextInput, ThemeProvider } from "@gravity-ui/uikit";
 import type { Meta, StoryFn } from "@storybook/react-webpack5";
 
-import { Graph } from "../../../graph";
-import { oneBlockConfig } from "../../configurations/oneBlock";
-import { GraphComponentStory } from "../../main/GraphEditor";
+import { oneBlockConfig } from "@gravity-ui/graph";
+import { GraphComponentStory } from "@gravity-ui/graph";
 
 import "@gravity-ui/uikit/styles/styles.css";
+import { Graph } from "@gravity-ui/graph";
 
 const config = JSON.parse(JSON.stringify(oneBlockConfig));
 const blockConfig = config.blocks[0];
@@ -20,7 +20,7 @@ const GraphApp = () => {
   const [height, setHeight] = useState(blockConfig.height.toString());
 
   const onClick: ButtonButtonProps["onClick"] = useCallback(() => {
-    graphRef.current.api.updateBlock({
+    graphRef.current?.api.updateBlock({
       ...blockConfig,
       x: Number(x),
       y: Number(y),

src/stories/api/updateConnection/config.ts → apps/storybook/src/stories/api/updateConnection/config.ts

@@ -1,5 +1,5 @@
-import { TGraphConfig } from "../../../index";
-import { storiesSettings } from "../../configurations/definitions";
+import { TGraphConfig } from "@gravity-ui/graph";
+import { storiesSettings } from "@gravity-ui/graph";
 
 export const graphConfig: TGraphConfig = {
   configurationName: "simple",

src/stories/api/updateConnection/updateConnection.stories.tsx → apps/storybook/src/stories/api/updateConnection/updateConnection.stories.tsx

@@ -17,9 +17,9 @@ import {
 } from "@gravity-ui/uikit";
 import type { Meta, StoryFn } from "@storybook/react-webpack5";
 
-import { Graph } from "../../../graph";
-import { TConnection } from "../../../index";
-import { GraphComponentStory } from "../../main/GraphEditor";
+import { Graph } from "@gravity-ui/graph";
+import { TConnection } from "@gravity-ui/graph";
+import { GraphComponentStory } from "@gravity-ui/graph";
 
 import { graphConfig } from "./config";
 

src/stories/api/updateGraphColors/updateGraphColors.stories.tsx → apps/storybook/src/stories/api/updateGraphColors/updateGraphColors.stories.tsx

@@ -5,9 +5,9 @@ import type { Meta, StoryFn } from "@storybook/react-webpack5";
 
 import { TGraphColors } from "graphConfig";
 
-import { Graph } from "../../../graph";
-import { oneBlockConfig } from "../../configurations/oneBlock";
-import { GraphComponentStory } from "../../main/GraphEditor";
+import { Graph } from "@gravity-ui/graph";
+import { oneBlockConfig } from "@gravity-ui/graph";
+import { GraphComponentStory } from "@gravity-ui/graph";
 
 import "@gravity-ui/uikit/styles/styles.css";
 

src/stories/api/zoomSpeed/zoomSpeed.stories.tsx → apps/storybook/src/stories/api/zoomSpeed/zoomSpeed.stories.tsx

@@ -3,9 +3,9 @@ import React, { useCallback, useRef, useState } from "react";
 import { Button, ButtonButtonProps, Flex, TextInput, ThemeProvider } from "@gravity-ui/uikit";
 import type { Meta, StoryFn } from "@storybook/react-webpack5";
 
-import { Graph } from "../../../graph";
-import { generatePrettyBlocks } from "../../configurations/generatePretty";
-import { GraphComponentStory } from "../../main/GraphEditor";
+import { Graph } from "@gravity-ui/graph";
+import { generatePrettyBlocks } from "@gravity-ui/graph";
+import { GraphComponentStory } from "@gravity-ui/graph";
 
 import "@gravity-ui/uikit/styles/styles.css";
 

src/stories/api/zoomToBlocks/zoomToBlocks.stories.tsx → apps/storybook/src/stories/api/zoomToBlocks/zoomToBlocks.stories.tsx

@@ -3,9 +3,9 @@ import React, { useCallback, useRef, useState } from "react";
 import { Button, ButtonButtonProps, Flex, TextInput, ThemeProvider } from "@gravity-ui/uikit";
 import type { Meta, StoryFn } from "@storybook/react-webpack5";
 
-import { Graph } from "../../../graph";
-import { generatePrettyBlocks } from "../../configurations/generatePretty";
-import { GraphComponentStory } from "../../main/GraphEditor";
+import { Graph } from "@gravity-ui/graph";
+import { generatePrettyBlocks } from "@gravity-ui/graph";
+import { GraphComponentStory } from "@gravity-ui/graph";
 
 import "@gravity-ui/uikit/styles/styles.css";
 

src/stories/api/zoomToElements/zoomToElements.stories.tsx → apps/storybook/src/stories/api/zoomToElements/zoomToElements.stories.tsx

@@ -3,10 +3,10 @@ import React, { useCallback, useEffect, useRef, useState } from "react";
 import { Button, ButtonButtonProps, Flex, Text, TextInput, ThemeProvider } from "@gravity-ui/uikit";
 import type { Meta, StoryFn } from "@storybook/react-webpack5";
 
-import { GraphComponent } from "../../../components/canvas/GraphComponent";
-import { Graph } from "../../../graph";
-import { generatePrettyBlocks } from "../../configurations/generatePretty";
-import { GraphComponentStory } from "../../main/GraphEditor";
+import { GraphComponent } from "@gravity-ui/graph";
+import { Graph } from "@gravity-ui/graph";
+import { generatePrettyBlocks } from "@gravity-ui/graph";
+import { GraphComponentStory } from "@gravity-ui/graph";
 
 import "@gravity-ui/uikit/styles/styles.css";
 

src/stories/api/zoomToRect/zoomToRect.stories.tsx → apps/storybook/src/stories/api/zoomToRect/zoomToRect.stories.tsx

@@ -3,9 +3,9 @@ import React, { useCallback, useRef, useState } from "react";
 import { Button, ButtonButtonProps, Flex, TextInput, ThemeProvider } from "@gravity-ui/uikit";
 import type { Meta, StoryFn } from "@storybook/react-webpack5";
 
-import { Graph } from "../../../graph";
-import { generatePrettyBlocks } from "../../configurations/generatePretty";
-import { GraphComponentStory } from "../../main/GraphEditor";
+import { Graph } from "@gravity-ui/graph";
+import { generatePrettyBlocks } from "@gravity-ui/graph";
+import { GraphComponentStory } from "@gravity-ui/graph";
 
 import "@gravity-ui/uikit/styles/styles.css";