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,8 +5,16 @@ dist
 .vscode
 .DS_Store
 storybook-static
-.tsbuildinfo
+
+# Build outputs
 build
 playwright-report
 test-results
 e2e/dist
+*.tsbuildinfo
+
+# Rollup cache
+.rollup.cache
+
+# pnpm
+pnpm-lock.yaml

.nvmrc

@@ -1 +1 @@
-20
+22.12.0

.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"
+}

.storybook/main.ts → apps/storybook/.storybook/main.ts

@@ -3,7 +3,12 @@ import type { Options } from "@swc/core";
 const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
 
-  addons: ["@storybook/addon-styling-webpack", "@storybook/addon-webpack5-compiler-swc", "@storybook/addon-docs"],
+  addons: [
+    "@storybook/addon-styling-webpack",
+    "@storybook/addon-webpack5-compiler-swc",
+    "@storybook/addon-docs",
+    "@github-ui/storybook-addon-performance-panel",
+  ],
 
   framework: {
     name: "@storybook/react-webpack5",

apps/storybook/.storybook/preview.tsx

@@ -0,0 +1,22 @@
+import type { Preview } from "@storybook/react-webpack5";
+import React, { StrictMode } from "react";
+import { ThemeProvider } from "@gravity-ui/uikit";
+
+import "./styles/global.css";
+import "@gravity-ui/uikit/styles/styles.css";
+import "@gravity-ui/graph/styles";
+import "@gravity-ui/graph-react/styles";
+
+const preview: Preview = {
+  decorators: [
+    (Story) => (
+      <StrictMode>
+        {/* To load styles from @gravity-ui/uikit */}
+        <ThemeProvider></ThemeProvider>
+        <Story />
+      </StrictMode>
+    ),
+  ],
+};
+
+export default preview;

.storybook/styles/global.css → apps/storybook/.storybook/styles/global.css

@@ -1,4 +1,3 @@
-
 @mixin nv-legacy-text {
   @font-face {
     font-family: "YS Text";
@@ -37,7 +36,6 @@
   }
 }
 
-
 .sb-show-main {
   padding: 0 !important;
   margin: 0;
@@ -54,9 +52,10 @@
   position: relative;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 }
 
 .graph {
   flex: 1;
   position: relative;
-}
+}

apps/storybook/package.json

@@ -0,0 +1,36 @@
+{
+  "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.32.0",
+    "@floating-ui/react": "^0.27.18",
+    "@monaco-editor/react": "^4.6.0",
+    "elkjs": "^0.9.3",
+    "monaco-editor": "^0.52.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^5.0.1",
+    "@storybook/addon-docs": "^10.2.12",
+    "@storybook/addon-links": "^10.2.12",
+    "@storybook/addon-styling-webpack": "^3.0.0",
+    "@storybook/addon-webpack5-compiler-swc": "^4.0.2",
+    "@storybook/react-webpack5": "^10.2.12",
+    "@github-ui/storybook-addon-performance-panel": "^1.0.1",
+    "@swc/core": "^1.13.3",
+    "sass": "^1.77.1",
+    "storybook": "^10.2.12",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3"
+  }
+}

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

@@ -1,13 +1,12 @@
-import React, { Ref, useImperativeHandle, useRef, useState } from "react";
+import React, { useCallback, Ref, useImperativeHandle, useRef, useState } from "react";
 
 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 { TBlockId } from "@gravity-ui/graph";
+import type { TConnection } from "@gravity-ui/graph";
 
 import { defineConigSchema } from "./schema";
 import { GravityTheme, defineTheme } from "./theme";
@@ -95,15 +94,15 @@ export const ConfigEditor = React.forwardRef(function ConfigEditor(
     },
   }));
 
-  const applyChanges = useFn(() => {
+  const applyChanges = useCallback(() => {
     try {
       const data = JSON.parse(monacoRef.current.getModel().getValue());
       props?.onChange?.({ blocks: data.blocks, connections: data.conections });
     } catch (e) {
       // eslint-disable-next-line no-console
       console.error(e);
     }
-  });
+  }, []);
 
   return (
     <Flex direction="column" className="editor-wrap">

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

@@ -1,22 +1,20 @@
-import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 
 import {
   Flex,
   SegmentedRadioGroup,
   SegmentedRadioGroupOptionProps,
   SegmentedRadioGroupProps,
   Text,
-  ThemeProvider,
-} from "@gravity-ui/uikit";
+  ThemeProvider} 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-react";
+import { ECanDrag } from "@gravity-ui/graph";
 import { EAnchorType } from "../configurations/definitions";
 
 import { ActionBlock } from "./ActionBlock";
@@ -146,17 +144,17 @@ export function GraphPLayground() {
     drawLine,
   });
 
-  const getNextBlockIndex = useFn(() => {
+  const getNextBlockIndex = useCallback(() => {
     return Date.now();
-  });
+  }, []);
 
-  const updateVisibleConfig = useFn(() => {
+  const updateVisibleConfig = useCallback(() => {
     const config = graph.rootStore.getAsConfig();
     editorRef?.current.setContent({
       blocks: config.blocks || [],
       connections: config.connections || [],
     });
-  });
+  }, []);
 
   useGraphEvent(graph, "block-change", ({ block }) => {
     editorRef?.current.updateBlocks([block]);
@@ -244,7 +242,7 @@ export function GraphPLayground() {
     }
   });
 
-  const addNewBlock = useFn(() => {
+  const addNewBlock = useCallback(() => {
     const rect = graph.api.getUsableRect();
     const x = random(rect.x, rect.x + rect.width + 100);
     const y = random(rect.y, rect.y + rect.height + 100);
@@ -254,9 +252,9 @@ export function GraphPLayground() {
     graph.zoomTo([block.id], { transition: 250 });
     updateVisibleConfig();
     editorRef?.current.scrollTo(block.id);
-  });
+  }, []);
 
-  const renderBlockFn = useFn((graph: Graph, block: TBlock) => {
+  const renderBlockFn = useCallback((graph: Graph, block: TBlock) => {
     const view = graph.rootStore.blocksList.getBlockState(block.id)?.getViewComponent();
     if (view instanceof ActionBlock) {
       return view.renderHTML();
@@ -269,7 +267,7 @@ export function GraphPLayground() {
         Unknown block <>{block.id.toLocaleString()}</>
       </GraphBlock>
     );
-  });
+  }, []);
 
   useGraphEvent(graph, "blocks-selection-change", ({ list }) => {
     if (list.length === 1) {
@@ -288,7 +286,7 @@ export function GraphPLayground() {
     return () => document.body.removeEventListener("keydown", fn);
   });
 
-  const updateGraphSize = useFn<Parameters<SegmentedRadioGroupProps["onUpdate"]>, void>((value) => {
+  const updateGraphSize = useCallback((value) => {
     let config: TGraphConfig<TGravityActionBlock | TGravityTextBlock>;
     setGraphSize(value);
 
@@ -316,7 +314,7 @@ export function GraphPLayground() {
     setEntities(config);
     graph.zoomTo("center", { transition: 500 });
     updateVisibleConfig();
-  });
+  }, []);
 
   return (
     <ThemeProvider theme="dark">