diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index cea0f2e2..59bc7310 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -2,13 +2,21 @@ 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 @@ -16,11 +24,54 @@ jobs: 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 }} diff --git a/.gitignore b/.gitignore index d81bc6a4..45ab0c84 100644 --- a/.gitignore +++ b/.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 diff --git a/.nvmrc b/.nvmrc index 209e3ef4..1d9b7831 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -20 +22.12.0 diff --git a/.release-please-manifest.json b/.release-please-manifest.json new file mode 100644 index 00000000..ba1ede7c --- /dev/null +++ b/.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" +} diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx deleted file mode 100644 index f469264c..00000000 --- a/.storybook/preview.tsx +++ /dev/null @@ -1,22 +0,0 @@ -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"; - -const preview: Preview = { - decorators: [ - (Story) => ( - - {/* To load styles from @gravity-ui/uikit */} - - - - ), - ], -}; - -export default preview; diff --git a/.storybook/main.ts b/apps/storybook/.storybook/main.ts similarity index 76% rename from .storybook/main.ts rename to apps/storybook/.storybook/main.ts index e8b27c51..2b1c345f 100644 --- a/.storybook/main.ts +++ b/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", diff --git a/apps/storybook/.storybook/preview.tsx b/apps/storybook/.storybook/preview.tsx new file mode 100644 index 00000000..47f50759 --- /dev/null +++ b/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) => ( + + {/* To load styles from @gravity-ui/uikit */} + + + + ), + ], +}; + +export default preview; diff --git a/.storybook/styles/global.css b/apps/storybook/.storybook/styles/global.css similarity index 98% rename from .storybook/styles/global.css rename to apps/storybook/.storybook/styles/global.css index ef0217c5..a6ea43c4 100644 --- a/.storybook/styles/global.css +++ b/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; -} \ No newline at end of file +} diff --git a/apps/storybook/package.json b/apps/storybook/package.json new file mode 100644 index 00000000..ae3bcec2 --- /dev/null +++ b/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" + } +} diff --git a/src/stories/Playground/ActionBlock/ActionBlock.css b/apps/storybook/src/stories/Playground/ActionBlock/ActionBlock.css similarity index 100% rename from src/stories/Playground/ActionBlock/ActionBlock.css rename to apps/storybook/src/stories/Playground/ActionBlock/ActionBlock.css diff --git a/src/stories/Playground/ActionBlock/ActionBlockHtml.tsx b/apps/storybook/src/stories/Playground/ActionBlock/ActionBlockHtml.tsx similarity index 90% rename from src/stories/Playground/ActionBlock/ActionBlockHtml.tsx rename to apps/storybook/src/stories/Playground/ActionBlock/ActionBlockHtml.tsx index 3e2445f2..f9fdd6fb 100644 --- a/src/stories/Playground/ActionBlock/ActionBlockHtml.tsx +++ b/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"; diff --git a/src/stories/Playground/ActionBlock/index.tsx b/apps/storybook/src/stories/Playground/ActionBlock/index.tsx similarity index 98% rename from src/stories/Playground/ActionBlock/index.tsx rename to apps/storybook/src/stories/Playground/ActionBlock/index.tsx index 134e0660..dd31762c 100644 --- a/src/stories/Playground/ActionBlock/index.tsx +++ b/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"; diff --git a/src/stories/Playground/Editor/Editor.css b/apps/storybook/src/stories/Playground/Editor/Editor.css similarity index 100% rename from src/stories/Playground/Editor/Editor.css rename to apps/storybook/src/stories/Playground/Editor/Editor.css diff --git a/src/stories/Playground/Editor/index.tsx b/apps/storybook/src/stories/Playground/Editor/index.tsx similarity index 93% rename from src/stories/Playground/Editor/index.tsx rename to apps/storybook/src/stories/Playground/Editor/index.tsx index 72465ec5..4dffdf31 100644 --- a/src/stories/Playground/Editor/index.tsx +++ b/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,7 +94,7 @@ 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 }); @@ -103,7 +102,7 @@ export const ConfigEditor = React.forwardRef(function ConfigEditor( // eslint-disable-next-line no-console console.error(e); } - }); + }, []); return ( diff --git a/src/stories/Playground/Editor/schema.ts b/apps/storybook/src/stories/Playground/Editor/schema.ts similarity index 100% rename from src/stories/Playground/Editor/schema.ts rename to apps/storybook/src/stories/Playground/Editor/schema.ts diff --git a/src/stories/Playground/Editor/theme.ts b/apps/storybook/src/stories/Playground/Editor/theme.ts similarity index 100% rename from src/stories/Playground/Editor/theme.ts rename to apps/storybook/src/stories/Playground/Editor/theme.ts diff --git a/src/stories/Playground/Editor/utils.ts b/apps/storybook/src/stories/Playground/Editor/utils.ts similarity index 100% rename from src/stories/Playground/Editor/utils.ts rename to apps/storybook/src/stories/Playground/Editor/utils.ts diff --git a/src/stories/Playground/GraphPlayground.tsx b/apps/storybook/src/stories/Playground/GraphPlayground.tsx similarity index 91% rename from src/stories/Playground/GraphPlayground.tsx rename to apps/storybook/src/stories/Playground/GraphPlayground.tsx index d4def137..9f3db61b 100644 --- a/src/stories/Playground/GraphPlayground.tsx +++ b/apps/storybook/src/stories/Playground/GraphPlayground.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useLayoutEffect, useRef, useState } from "react"; +import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react"; import { Flex, @@ -6,17 +6,15 @@ import { 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()} ); - }); + }, []); 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, void>((value) => { + const updateGraphSize = useCallback((value) => { let config: TGraphConfig; setGraphSize(value); @@ -316,7 +314,7 @@ export function GraphPLayground() { setEntities(config); graph.zoomTo("center", { transition: 500 }); updateVisibleConfig(); - }); + }, []); return ( diff --git a/src/stories/Playground/Playground.css b/apps/storybook/src/stories/Playground/Playground.css similarity index 100% rename from src/stories/Playground/Playground.css rename to apps/storybook/src/stories/Playground/Playground.css diff --git a/src/stories/Playground/Playground.stories.tsx b/apps/storybook/src/stories/Playground/Playground.stories.tsx similarity index 100% rename from src/stories/Playground/Playground.stories.tsx rename to apps/storybook/src/stories/Playground/Playground.stories.tsx diff --git a/src/stories/Playground/Settings.tsx b/apps/storybook/src/stories/Playground/Settings.tsx similarity index 98% rename from src/stories/Playground/Settings.tsx rename to apps/storybook/src/stories/Playground/Settings.tsx index 1aa0cf93..db5fba98 100644 --- a/src/stories/Playground/Settings.tsx +++ b/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"; diff --git a/src/stories/Playground/TextBlock/TextBlock.css b/apps/storybook/src/stories/Playground/TextBlock/TextBlock.css similarity index 100% rename from src/stories/Playground/TextBlock/TextBlock.css rename to apps/storybook/src/stories/Playground/TextBlock/TextBlock.css diff --git a/src/stories/Playground/TextBlock/TextBlockHtml.tsx b/apps/storybook/src/stories/Playground/TextBlock/TextBlockHtml.tsx similarity index 88% rename from src/stories/Playground/TextBlock/TextBlockHtml.tsx rename to apps/storybook/src/stories/Playground/TextBlock/TextBlockHtml.tsx index b6a6fbe5..b65c0e57 100644 --- a/src/stories/Playground/TextBlock/TextBlockHtml.tsx +++ b/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"; diff --git a/src/stories/Playground/TextBlock/index.tsx b/apps/storybook/src/stories/Playground/TextBlock/index.tsx similarity index 97% rename from src/stories/Playground/TextBlock/index.tsx rename to apps/storybook/src/stories/Playground/TextBlock/index.tsx index a93ea9de..7899637d 100644 --- a/src/stories/Playground/TextBlock/index.tsx +++ b/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"; diff --git a/src/stories/Playground/Toolbox.tsx b/apps/storybook/src/stories/Playground/Toolbox.tsx similarity index 94% rename from src/stories/Playground/Toolbox.tsx rename to apps/storybook/src/stories/Playground/Toolbox.tsx index 5c4dedb9..60d50523 100644 --- a/src/stories/Playground/Toolbox.tsx +++ b/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-react"; export function Toolbox({ className, graph }: { className: string; graph: Graph }) { const [scale, setScale] = useState(1); diff --git a/src/stories/Playground/generateLayout.tsx b/apps/storybook/src/stories/Playground/generateLayout.tsx similarity index 94% rename from src/stories/Playground/generateLayout.tsx rename to apps/storybook/src/stories/Playground/generateLayout.tsx index 00c91054..cbc604a9 100644 --- a/src/stories/Playground/generateLayout.tsx +++ b/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 }; diff --git a/apps/storybook/src/stories/Playground/hooks.ts b/apps/storybook/src/stories/Playground/hooks.ts new file mode 100644 index 00000000..a67605f6 --- /dev/null +++ b/apps/storybook/src/stories/Playground/hooks.ts @@ -0,0 +1,8 @@ +import { useCallback, useState } from "react"; + +export function useRerender() { + const [_, setTick] = useState(Date.now()); + return useCallback(() => { + setTick(Date.now()); + }, []); +} diff --git a/src/stories/api/startStopGraph/startStop.stories.tsx b/apps/storybook/src/stories/api/startStopGraph/startStop.stories.tsx similarity index 83% rename from src/stories/api/startStopGraph/startStop.stories.tsx rename to apps/storybook/src/stories/api/startStopGraph/startStop.stories.tsx index 1397bef4..adbec788 100644 --- a/src/stories/api/startStopGraph/startStop.stories.tsx +++ b/apps/storybook/src/stories/api/startStopGraph/startStop.stories.tsx @@ -1,16 +1,18 @@ -import React, { useMemo, useState } from "react"; +import React, { useCallback, 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 { TBlock } from "@gravity-ui/graph"; +// import { Graph, GraphState } from "@gravity-ui/graph"; +// import { GraphCanvas, useGraph } from "@gravity-ui/graph-react"; +// import { generatePrettyBlocks } from "../../configurations/generatePretty"; import { BlockStory } from "../../main/Block"; +import { Graph, GraphState, TBlock } from "@gravity-ui/graph"; +import { useGraph, GraphCanvas } from "@gravity-ui/graph-react"; import "@gravity-ui/uikit/styles/styles.css"; +import { generatePrettyBlocks } from "../../configurations/generatePretty"; const config = generatePrettyBlocks({ layersCount: 10, connectionsPerLayer: 10, dashedLine: true }); @@ -41,9 +43,9 @@ const GraphApp = () => { } }; - const renderBlockFn = useFn((graphObject: Graph, block: TBlock) => { + const renderBlockFn = useCallback((graphObject: Graph, block: TBlock) => { return ; - }); + }, []); const update = () => { const { blocks, connections } = generatePrettyBlocks({ diff --git a/src/stories/api/updateBlock/updateBlock.stories.tsx b/apps/storybook/src/stories/api/updateBlock/updateBlock.stories.tsx similarity index 95% rename from src/stories/api/updateBlock/updateBlock.stories.tsx rename to apps/storybook/src/stories/api/updateBlock/updateBlock.stories.tsx index 5f2690ad..38082be0 100644 --- a/src/stories/api/updateBlock/updateBlock.stories.tsx +++ b/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 "@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), diff --git a/src/stories/api/updateConnection/config.ts b/apps/storybook/src/stories/api/updateConnection/config.ts similarity index 96% rename from src/stories/api/updateConnection/config.ts rename to apps/storybook/src/stories/api/updateConnection/config.ts index 31be9d87..f64f5459 100644 --- a/src/stories/api/updateConnection/config.ts +++ b/apps/storybook/src/stories/api/updateConnection/config.ts @@ -1,4 +1,4 @@ -import { TGraphConfig } from "../../../index"; +import { TGraphConfig } from "@gravity-ui/graph"; import { storiesSettings } from "../../configurations/definitions"; export const graphConfig: TGraphConfig = { diff --git a/src/stories/api/updateConnection/updateConnection.stories.tsx b/apps/storybook/src/stories/api/updateConnection/updateConnection.stories.tsx similarity index 98% rename from src/stories/api/updateConnection/updateConnection.stories.tsx rename to apps/storybook/src/stories/api/updateConnection/updateConnection.stories.tsx index 47d4ba53..e1f1e321 100644 --- a/src/stories/api/updateConnection/updateConnection.stories.tsx +++ b/apps/storybook/src/stories/api/updateConnection/updateConnection.stories.tsx @@ -17,8 +17,8 @@ import { } from "@gravity-ui/uikit"; import type { Meta, StoryFn } from "@storybook/react-webpack5"; -import { Graph } from "../../../graph"; -import { TConnection } from "../../../index"; +import { Graph } from "@gravity-ui/graph"; +import { TConnection } from "@gravity-ui/graph"; import { GraphComponentStory } from "../../main/GraphEditor"; import { graphConfig } from "./config"; diff --git a/src/stories/api/updateGraphColors/updateGraphColors.stories.tsx b/apps/storybook/src/stories/api/updateGraphColors/updateGraphColors.stories.tsx similarity index 95% rename from src/stories/api/updateGraphColors/updateGraphColors.stories.tsx rename to apps/storybook/src/stories/api/updateGraphColors/updateGraphColors.stories.tsx index 4a58f6d8..5f2aebf4 100644 --- a/src/stories/api/updateGraphColors/updateGraphColors.stories.tsx +++ b/apps/storybook/src/stories/api/updateGraphColors/updateGraphColors.stories.tsx @@ -3,9 +3,9 @@ import React, { useCallback, useRef, useState } from "react"; import { Button, ButtonButtonProps, Flex, ThemeProvider } from "@gravity-ui/uikit"; import type { Meta, StoryFn } from "@storybook/react-webpack5"; -import { TGraphColors } from "graphConfig"; +import { TGraphColors } from "@gravity-ui/graph"; -import { Graph } from "../../../graph"; +import { Graph } from "@gravity-ui/graph"; import { oneBlockConfig } from "../../configurations/oneBlock"; import { GraphComponentStory } from "../../main/GraphEditor"; diff --git a/src/stories/api/zoomSpeed/zoomSpeed.stories.tsx b/apps/storybook/src/stories/api/zoomSpeed/zoomSpeed.stories.tsx similarity index 97% rename from src/stories/api/zoomSpeed/zoomSpeed.stories.tsx rename to apps/storybook/src/stories/api/zoomSpeed/zoomSpeed.stories.tsx index d76e6732..8a3a9484 100644 --- a/src/stories/api/zoomSpeed/zoomSpeed.stories.tsx +++ b/apps/storybook/src/stories/api/zoomSpeed/zoomSpeed.stories.tsx @@ -3,7 +3,7 @@ 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 { Graph } from "@gravity-ui/graph"; import { generatePrettyBlocks } from "../../configurations/generatePretty"; import { GraphComponentStory } from "../../main/GraphEditor"; diff --git a/src/stories/api/zoomToBlocks/zoomToBlocks.stories.tsx b/apps/storybook/src/stories/api/zoomToBlocks/zoomToBlocks.stories.tsx similarity index 97% rename from src/stories/api/zoomToBlocks/zoomToBlocks.stories.tsx rename to apps/storybook/src/stories/api/zoomToBlocks/zoomToBlocks.stories.tsx index eea139c4..0f9a45ab 100644 --- a/src/stories/api/zoomToBlocks/zoomToBlocks.stories.tsx +++ b/apps/storybook/src/stories/api/zoomToBlocks/zoomToBlocks.stories.tsx @@ -3,7 +3,7 @@ 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 { Graph } from "@gravity-ui/graph"; import { generatePrettyBlocks } from "../../configurations/generatePretty"; import { GraphComponentStory } from "../../main/GraphEditor"; diff --git a/src/stories/api/zoomToElements/zoomToElements.stories.tsx b/apps/storybook/src/stories/api/zoomToElements/zoomToElements.stories.tsx similarity index 95% rename from src/stories/api/zoomToElements/zoomToElements.stories.tsx rename to apps/storybook/src/stories/api/zoomToElements/zoomToElements.stories.tsx index 57986536..627aec06 100644 --- a/src/stories/api/zoomToElements/zoomToElements.stories.tsx +++ b/apps/storybook/src/stories/api/zoomToElements/zoomToElements.stories.tsx @@ -3,8 +3,8 @@ 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 { GraphComponent } from "@gravity-ui/graph"; +import { Graph } from "@gravity-ui/graph"; import { generatePrettyBlocks } from "../../configurations/generatePretty"; import { GraphComponentStory } from "../../main/GraphEditor"; diff --git a/src/stories/api/zoomToRect/zoomToRect.stories.tsx b/apps/storybook/src/stories/api/zoomToRect/zoomToRect.stories.tsx similarity index 98% rename from src/stories/api/zoomToRect/zoomToRect.stories.tsx rename to apps/storybook/src/stories/api/zoomToRect/zoomToRect.stories.tsx index 63cfc801..60dc3f61 100644 --- a/src/stories/api/zoomToRect/zoomToRect.stories.tsx +++ b/apps/storybook/src/stories/api/zoomToRect/zoomToRect.stories.tsx @@ -3,7 +3,7 @@ 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 { Graph } from "@gravity-ui/graph"; import { generatePrettyBlocks } from "../../configurations/generatePretty"; import { GraphComponentStory } from "../../main/GraphEditor"; diff --git a/src/stories/api/zoomToViewPort/zoomToViewPort.stories.tsx b/apps/storybook/src/stories/api/zoomToViewPort/zoomToViewPort.stories.tsx similarity index 97% rename from src/stories/api/zoomToViewPort/zoomToViewPort.stories.tsx rename to apps/storybook/src/stories/api/zoomToViewPort/zoomToViewPort.stories.tsx index 81efb44c..017a81b2 100644 --- a/src/stories/api/zoomToViewPort/zoomToViewPort.stories.tsx +++ b/apps/storybook/src/stories/api/zoomToViewPort/zoomToViewPort.stories.tsx @@ -3,7 +3,7 @@ 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 { Graph } from "@gravity-ui/graph"; import { generatePrettyBlocks } from "../../configurations/generatePretty"; import { GraphComponentStory } from "../../main/GraphEditor"; diff --git a/src/stories/canvas/groups/default.stories.tsx b/apps/storybook/src/stories/canvas/groups/default.stories.tsx similarity index 88% rename from src/stories/canvas/groups/default.stories.tsx rename to apps/storybook/src/stories/canvas/groups/default.stories.tsx index 5862ac08..d08c20be 100644 --- a/src/stories/canvas/groups/default.stories.tsx +++ b/apps/storybook/src/stories/canvas/groups/default.stories.tsx @@ -1,12 +1,11 @@ -import React, { useEffect } from "react"; +import React, { useCallback, useEffect } from "react"; import type { Meta, StoryFn } from "@storybook/react-webpack5"; import groupBy from "lodash/groupBy"; -import { BlockGroups, Group } from "../../../components/canvas/groups"; -import { BlockState, ECanDrag, Graph, GraphState, TBlock } from "../../../index"; -import { GraphCanvas, useGraph, useGraphEvent } from "../../../react-components"; -import { useFn } from "../../../react-components/utils/hooks/useFn"; +import { BlockGroups, Group } from "@gravity-ui/graph"; +import { BlockState, ECanDrag, Graph, GraphState, TBlock } from "@gravity-ui/graph"; +import { GraphCanvas, useGraph, useGraphEvent } from "@gravity-ui/graph-react"; import { BlockStory } from "../../main/Block"; const createConfig = () => { @@ -125,9 +124,9 @@ const GraphApp = () => { } }); - const renderBlockFn = useFn((graphObject: Graph, block: TBlock) => { + const renderBlockFn = useCallback((graphObject: Graph, block: TBlock) => { return ; - }); + }, []); return ; }; diff --git a/src/stories/canvas/groups/extended.stories.tsx b/apps/storybook/src/stories/canvas/groups/extended.stories.tsx similarity index 82% rename from src/stories/canvas/groups/extended.stories.tsx rename to apps/storybook/src/stories/canvas/groups/extended.stories.tsx index e1544ca6..79c99148 100644 --- a/src/stories/canvas/groups/extended.stories.tsx +++ b/apps/storybook/src/stories/canvas/groups/extended.stories.tsx @@ -1,12 +1,11 @@ -import React, { useEffect } from "react"; +import React, { useCallback, useEffect } from "react"; import type { Meta, StoryFn } from "@storybook/react-webpack5"; -import { BlockGroups, Group } from "../../../components/canvas/groups"; -import { Graph, GraphState, TBlock } from "../../../index"; -import { GraphCanvas, useGraph, useGraphEvent } from "../../../react-components"; -import { useFn } from "../../../react-components/utils/hooks/useFn"; -import { TGroup } from "../../../store/group/Group"; +import { BlockGroups, Group } from "@gravity-ui/graph"; +import { Graph, GraphState, TBlock } from "@gravity-ui/graph"; +import { GraphCanvas, useGraph, useGraphEvent } from "@gravity-ui/graph-react"; +import { TGroup } from "@gravity-ui/graph"; import { generatePrettyBlocks } from "../../configurations/generatePretty"; import { BlockStory } from "../../main/Block"; @@ -73,9 +72,9 @@ const ExtendedGroupsApp = () => { } }); - const renderBlockFn = useFn((graphObject: Graph, block: TBlock) => { + const renderBlockFn = useCallback((graphObject: Graph, block: TBlock) => { return ; - }); + }, []); return ; }; diff --git a/src/stories/canvas/groups/large.stories.tsx b/apps/storybook/src/stories/canvas/groups/large.stories.tsx similarity index 81% rename from src/stories/canvas/groups/large.stories.tsx rename to apps/storybook/src/stories/canvas/groups/large.stories.tsx index 1d85323a..c3d78671 100644 --- a/src/stories/canvas/groups/large.stories.tsx +++ b/apps/storybook/src/stories/canvas/groups/large.stories.tsx @@ -1,12 +1,11 @@ -import React, { useEffect } from "react"; +import React, { useCallback, useEffect } from "react"; import type { Meta, StoryFn } from "@storybook/react-webpack5"; import groupBy from "lodash/groupBy"; -import { BlockGroups, Group } from "../../../components/canvas/groups"; -import { BlockState, Graph, GraphState, TBlock } from "../../../index"; -import { GraphCanvas, useGraph, useGraphEvent } from "../../../react-components"; -import { useFn } from "../../../react-components/utils/hooks/useFn"; +import { BlockGroups, Group } from "@gravity-ui/graph"; +import { BlockState, Graph, GraphState, TBlock } from "@gravity-ui/graph"; +import { GraphCanvas, useGraph, useGraphEvent } from "@gravity-ui/graph-react"; import { generatePrettyBlocks } from "../../configurations/generatePretty"; import { BlockStory } from "../../main/Block"; @@ -58,9 +57,9 @@ const LargeGraphApp = () => { } }); - const renderBlockFn = useFn((graphObject: Graph, block: TBlock) => { + const renderBlockFn = useCallback((graphObject: Graph, block: TBlock) => { return ; - }); + }, []); return ; }; diff --git a/src/stories/canvas/groups/manual.stories.tsx b/apps/storybook/src/stories/canvas/groups/manual.stories.tsx similarity index 81% rename from src/stories/canvas/groups/manual.stories.tsx rename to apps/storybook/src/stories/canvas/groups/manual.stories.tsx index 16ecff05..1b42f8f8 100644 --- a/src/stories/canvas/groups/manual.stories.tsx +++ b/apps/storybook/src/stories/canvas/groups/manual.stories.tsx @@ -1,11 +1,10 @@ -import React, { useEffect } from "react"; +import React, { useCallback, useEffect } from "react"; import type { Meta, StoryFn } from "@storybook/react-webpack5"; -import { BlockGroups, Group } from "../../../components/canvas/groups"; -import { Graph, GraphState, TBlock } from "../../../index"; -import { GraphCanvas, useGraph, useGraphEvent } from "../../../react-components"; -import { useFn } from "../../../react-components/utils/hooks/useFn"; +import { BlockGroups, Group } from "@gravity-ui/graph"; +import { Graph, GraphState, TBlock } from "@gravity-ui/graph"; +import { GraphCanvas, useGraph, useGraphEvent } from "@gravity-ui/graph-react"; import { generatePrettyBlocks } from "../../configurations/generatePretty"; import { BlockStory } from "../../main/Block"; @@ -61,9 +60,9 @@ const ManualGroupsApp = () => { } }); - const renderBlockFn = useFn((graphObject: Graph, block: TBlock) => { + const renderBlockFn = useCallback((graphObject: Graph, block: TBlock) => { return ; - }); + }, []); return ; }; diff --git a/src/stories/canvas/groups/transfer.stories.tsx b/apps/storybook/src/stories/canvas/groups/transfer.stories.tsx similarity index 94% rename from src/stories/canvas/groups/transfer.stories.tsx rename to apps/storybook/src/stories/canvas/groups/transfer.stories.tsx index d4ba4426..af41e64f 100644 --- a/src/stories/canvas/groups/transfer.stories.tsx +++ b/apps/storybook/src/stories/canvas/groups/transfer.stories.tsx @@ -1,12 +1,11 @@ -import React, { useEffect, useState } from "react"; +import React, { useCallback, useEffect, useState } from "react"; import type { Meta, StoryFn } from "@storybook/react-webpack5"; -import { TDefinitionGroup } from "../../../components/canvas/groups/BlockGroups"; -import { BlockGroupsTransferLayer } from "../../../components/canvas/groups/BlockGroupsTransferLayer"; -import { ECanDrag, Graph, GraphState, Group, TBlock } from "../../../index"; -import { GraphCanvas, useGraph, useGraphEvent, useLayer } from "../../../react-components"; -import { useFn } from "../../../react-components/utils/hooks/useFn"; +import { TDefinitionGroup } from "@gravity-ui/graph"; +import { BlockGroupsTransferLayer } from "@gravity-ui/graph"; +import { ECanDrag, Graph, GraphState, Group, TBlock } from "@gravity-ui/graph"; +import { GraphCanvas, useGraph, useGraphEvent, useLayer } from "@gravity-ui/graph-react"; import { BlockStory } from "../../main/Block"; const createConfig = () => { @@ -227,9 +226,9 @@ const GroupTransferApp = () => { } }, [groupsLayer, groups]); - const renderBlockFn = useFn((graphObject: Graph, block: TBlock) => { + const renderBlockFn = useCallback((graphObject: Graph, block: TBlock) => { return ; - }); + }, []); return (
diff --git a/src/stories/configurations/CustomLayerConfig.ts b/apps/storybook/src/stories/configurations/CustomLayerConfig.ts similarity index 92% rename from src/stories/configurations/CustomLayerConfig.ts rename to apps/storybook/src/stories/configurations/CustomLayerConfig.ts index e819b398..f9dfc8ae 100644 --- a/src/stories/configurations/CustomLayerConfig.ts +++ b/apps/storybook/src/stories/configurations/CustomLayerConfig.ts @@ -1,4 +1,4 @@ -import { TGraphConfig } from "../../graph"; +import { TGraphConfig } from "@gravity-ui/graph"; import { ToolboxLayer } from "../main/ToolboxLayer"; import { storiesSettings } from "./definitions"; diff --git a/src/stories/configurations/bezierConnection.ts b/apps/storybook/src/stories/configurations/bezierConnection.ts similarity index 94% rename from src/stories/configurations/bezierConnection.ts rename to apps/storybook/src/stories/configurations/bezierConnection.ts index 7b677361..f1eb6021 100644 --- a/src/stories/configurations/bezierConnection.ts +++ b/apps/storybook/src/stories/configurations/bezierConnection.ts @@ -1,4 +1,4 @@ -import { TGraphConfig } from "../../graph"; +import { TGraphConfig } from "@gravity-ui/graph"; import { storiesSettings } from "./definitions"; diff --git a/src/stories/configurations/coloredConnections.ts b/apps/storybook/src/stories/configurations/coloredConnections.ts similarity index 97% rename from src/stories/configurations/coloredConnections.ts rename to apps/storybook/src/stories/configurations/coloredConnections.ts index e0fa462b..6dbd83ef 100644 --- a/src/stories/configurations/coloredConnections.ts +++ b/apps/storybook/src/stories/configurations/coloredConnections.ts @@ -1,4 +1,4 @@ -import { TGraphConfig } from "../../graph"; +import { TGraphConfig } from "@gravity-ui/graph"; import { storiesSettings } from "./definitions"; diff --git a/src/stories/configurations/customBlocksView.ts b/apps/storybook/src/stories/configurations/customBlocksView.ts similarity index 96% rename from src/stories/configurations/customBlocksView.ts rename to apps/storybook/src/stories/configurations/customBlocksView.ts index 2abfae9e..dabb26ef 100644 --- a/src/stories/configurations/customBlocksView.ts +++ b/apps/storybook/src/stories/configurations/customBlocksView.ts @@ -1,4 +1,4 @@ -import { CanvasBlock, TGraphConfig } from "../../index"; +import { CanvasBlock, TGraphConfig } from "@gravity-ui/graph"; import { storiesSettings } from "./definitions"; diff --git a/src/stories/configurations/definitions.ts b/apps/storybook/src/stories/configurations/definitions.ts similarity index 89% rename from src/stories/configurations/definitions.ts rename to apps/storybook/src/stories/configurations/definitions.ts index 9c558222..0e5fc074 100644 --- a/src/stories/configurations/definitions.ts +++ b/apps/storybook/src/stories/configurations/definitions.ts @@ -1,4 +1,4 @@ -import { ECanDrag } from "../../store/settings"; +import { ECanDrag } from "@gravity-ui/graph"; export enum EAnchorType { IN = "IN", diff --git a/src/stories/configurations/emptyGraph.ts b/apps/storybook/src/stories/configurations/emptyGraph.ts similarity index 85% rename from src/stories/configurations/emptyGraph.ts rename to apps/storybook/src/stories/configurations/emptyGraph.ts index 0439c609..9d6534d0 100644 --- a/src/stories/configurations/emptyGraph.ts +++ b/apps/storybook/src/stories/configurations/emptyGraph.ts @@ -1,4 +1,4 @@ -import { TGraphConfig } from "../../graph"; +import { TGraphConfig } from "@gravity-ui/graph"; import { storiesSettings } from "./definitions"; diff --git a/src/stories/configurations/generatePretty.ts b/apps/storybook/src/stories/configurations/generatePretty.ts similarity index 92% rename from src/stories/configurations/generatePretty.ts rename to apps/storybook/src/stories/configurations/generatePretty.ts index fbedac68..18fe3636 100644 --- a/src/stories/configurations/generatePretty.ts +++ b/apps/storybook/src/stories/configurations/generatePretty.ts @@ -1,8 +1,8 @@ /* eslint-disable no-console */ -import { TBlock } from "../../components/canvas/blocks/Block"; -import { random } from "../../components/canvas/blocks/generate"; -import { TGraphConfig } from "../../graph"; -import { IS_BLOCK_TYPE } from "../../store/block/Block"; +import { TBlock } from "@gravity-ui/graph"; +import { random } from "@gravity-ui/graph"; +import { TGraphConfig } from "@gravity-ui/graph"; +import { IS_BLOCK_TYPE } from "@gravity-ui/graph"; import { storiesSettings } from "./definitions"; diff --git a/src/stories/configurations/oneBlock.ts b/apps/storybook/src/stories/configurations/oneBlock.ts similarity index 90% rename from src/stories/configurations/oneBlock.ts rename to apps/storybook/src/stories/configurations/oneBlock.ts index fc5e45fa..7c80204a 100644 --- a/src/stories/configurations/oneBlock.ts +++ b/apps/storybook/src/stories/configurations/oneBlock.ts @@ -1,4 +1,4 @@ -import { TGraphConfig } from "../../graph"; +import { TGraphConfig } from "@gravity-ui/graph"; import { storiesSettings } from "./definitions"; diff --git a/src/stories/configurations/oneConnection.ts b/apps/storybook/src/stories/configurations/oneConnection.ts similarity index 93% rename from src/stories/configurations/oneConnection.ts rename to apps/storybook/src/stories/configurations/oneConnection.ts index 896b35b6..cae01daf 100644 --- a/src/stories/configurations/oneConnection.ts +++ b/apps/storybook/src/stories/configurations/oneConnection.ts @@ -1,4 +1,4 @@ -import { TGraphConfig } from "../../graph"; +import { TGraphConfig } from "@gravity-ui/graph"; import { storiesSettings } from "./definitions"; diff --git a/src/stories/configurations/verticalGraph.ts b/apps/storybook/src/stories/configurations/verticalGraph.ts similarity index 94% rename from src/stories/configurations/verticalGraph.ts rename to apps/storybook/src/stories/configurations/verticalGraph.ts index 179c58d7..740aa6ac 100644 --- a/src/stories/configurations/verticalGraph.ts +++ b/apps/storybook/src/stories/configurations/verticalGraph.ts @@ -1,5 +1,5 @@ -import { Block } from "../../components/canvas/blocks/Block"; -import { TPoint } from "../../utils/types/shapes"; +import { Block } from "@gravity-ui/graph"; +import { TPoint } from "@gravity-ui/graph"; import { storiesSettings } from "./definitions"; diff --git a/src/stories/configurations/withAnchorAndConnection.ts b/apps/storybook/src/stories/configurations/withAnchorAndConnection.ts similarity index 94% rename from src/stories/configurations/withAnchorAndConnection.ts rename to apps/storybook/src/stories/configurations/withAnchorAndConnection.ts index 8a1c517e..d62bf4bd 100644 --- a/src/stories/configurations/withAnchorAndConnection.ts +++ b/apps/storybook/src/stories/configurations/withAnchorAndConnection.ts @@ -1,5 +1,5 @@ -import { TAnchor } from "../../components/canvas/anchors"; -import { TGraphConfig } from "../../graph"; +import { TAnchor } from "@gravity-ui/graph"; +import { TGraphConfig } from "@gravity-ui/graph"; import { EAnchorType, storiesSettings } from "./definitions"; diff --git a/src/stories/configurations/withAnchors.ts b/apps/storybook/src/stories/configurations/withAnchors.ts similarity index 94% rename from src/stories/configurations/withAnchors.ts rename to apps/storybook/src/stories/configurations/withAnchors.ts index 09523d38..9035d66c 100644 --- a/src/stories/configurations/withAnchors.ts +++ b/apps/storybook/src/stories/configurations/withAnchors.ts @@ -1,5 +1,5 @@ -import { TAnchor } from "../../components/canvas/anchors"; -import { TGraphConfig } from "../../graph"; +import { TAnchor } from "@gravity-ui/graph"; +import { TGraphConfig } from "@gravity-ui/graph"; import { EAnchorType, storiesSettings } from "./definitions"; diff --git a/src/stories/examples/connectionLayer/connectionLayer.stories.tsx b/apps/storybook/src/stories/examples/connectionLayer/connectionLayer.stories.tsx similarity index 91% rename from src/stories/examples/connectionLayer/connectionLayer.stories.tsx rename to apps/storybook/src/stories/examples/connectionLayer/connectionLayer.stories.tsx index b6fb3bd7..fcc02451 100644 --- a/src/stories/examples/connectionLayer/connectionLayer.stories.tsx +++ b/apps/storybook/src/stories/examples/connectionLayer/connectionLayer.stories.tsx @@ -1,13 +1,12 @@ -import React, { useEffect, useLayoutEffect, useRef, useState } from "react"; +import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react"; import { Flex, Hotkey, Switch, Text, ThemeProvider } from "@gravity-ui/uikit"; import type { Meta, StoryFn } from "@storybook/react-webpack5"; -import { TBlock } from "../../../components/canvas/blocks/Block"; -import { ConnectionLayer } from "../../../components/canvas/layers/connectionLayer/ConnectionLayer"; -import { Graph } from "../../../index"; -import { GraphCanvas, useGraph } from "../../../react-components"; -import { useFn } from "../../../react-components/utils/hooks/useFn"; +import { TBlock } from "@gravity-ui/graph"; +import { ConnectionLayer } from "@gravity-ui/graph"; +import { Graph } from "@gravity-ui/graph"; +import { GraphCanvas, useGraph } from "@gravity-ui/graph-react"; import { generatePrettyBlocks } from "../../configurations/generatePretty"; import { BlockStory } from "../../main/Block"; @@ -120,7 +119,7 @@ const GraphApp = () => { }); }, [graph]); - const switchConnectionEnabled = useFn((enabled: boolean) => { + const switchConnectionEnabled = useCallback((enabled: boolean) => { if (enabled) { connectionLayerRef.current.enable(); setEnabled(true); @@ -128,7 +127,7 @@ const GraphApp = () => { connectionLayerRef.current.disable(); // Обратите внимание, что в оригинале метод назван disabled, а не disable setEnabled(false); } - }); + }, []); const renderBlock = (graphInstance: Graph, block: TBlock) => { return ; diff --git a/src/stories/examples/customConnectionLabel/customConnectionLabel.stories.tsx b/apps/storybook/src/stories/examples/customConnectionLabel/customConnectionLabel.stories.tsx similarity index 94% rename from src/stories/examples/customConnectionLabel/customConnectionLabel.stories.tsx rename to apps/storybook/src/stories/examples/customConnectionLabel/customConnectionLabel.stories.tsx index 001dbf1f..c3054d71 100644 --- a/src/stories/examples/customConnectionLabel/customConnectionLabel.stories.tsx +++ b/apps/storybook/src/stories/examples/customConnectionLabel/customConnectionLabel.stories.tsx @@ -3,11 +3,11 @@ import React, { useEffect, useState } from "react"; import { Flex, Switch, ThemeProvider } from "@gravity-ui/uikit"; import type { Meta, StoryFn } from "@storybook/react-webpack5"; -import { TBlock } from "../../../components/canvas/blocks/Block"; -import { getLabelCoords } from "../../../components/canvas/connections/labelHelper"; -import { BlockConnection, Graph, TConnection, cachedMeasureText } from "../../../index"; -import { GraphCanvas, useGraph } from "../../../react-components"; -import { getFontSize } from "../../../utils/functions/text"; +import { TBlock } from "@gravity-ui/graph"; +import { getLabelCoords } from "@gravity-ui/graph"; +import { BlockConnection, Graph, TConnection, cachedMeasureText } from "@gravity-ui/graph"; +import { GraphCanvas, useGraph } from "@gravity-ui/graph-react"; +import { getFontSize } from "@gravity-ui/graph"; import { generatePrettyBlocks } from "../../configurations/generatePretty"; import { BlockStory } from "../../main/Block"; diff --git a/src/stories/examples/imageByBlocks/image.d.ts b/apps/storybook/src/stories/examples/imageByBlocks/image.d.ts similarity index 100% rename from src/stories/examples/imageByBlocks/image.d.ts rename to apps/storybook/src/stories/examples/imageByBlocks/image.d.ts diff --git a/src/stories/examples/imageByBlocks/image.png b/apps/storybook/src/stories/examples/imageByBlocks/image.png similarity index 100% rename from src/stories/examples/imageByBlocks/image.png rename to apps/storybook/src/stories/examples/imageByBlocks/image.png diff --git a/src/stories/examples/imageByBlocks/imageByBlocks.stories.tsx b/apps/storybook/src/stories/examples/imageByBlocks/imageByBlocks.stories.tsx similarity index 95% rename from src/stories/examples/imageByBlocks/imageByBlocks.stories.tsx rename to apps/storybook/src/stories/examples/imageByBlocks/imageByBlocks.stories.tsx index c5c3f51f..537cf967 100644 --- a/src/stories/examples/imageByBlocks/imageByBlocks.stories.tsx +++ b/apps/storybook/src/stories/examples/imageByBlocks/imageByBlocks.stories.tsx @@ -4,8 +4,8 @@ import React, { useCallback, useEffect, useRef, useState } from "react"; import { ThemeProvider } from "@gravity-ui/uikit"; import type { Meta, StoryFn } from "@storybook/react-webpack5"; -import { CanvasBlock, Graph, TBlock, TGraphConfig } from "../../../index"; -import { storiesSettings } from "../../../stories/configurations/definitions"; +import { CanvasBlock, Graph, TBlock, TGraphConfig } from "@gravity-ui/graph"; +import { storiesSettings } from "../../configurations/definitions"; import { GraphComponentStory } from "../../main/GraphEditor"; import image from "./image.png"; diff --git a/src/stories/examples/imageInsteadBlock/done.png b/apps/storybook/src/stories/examples/imageInsteadBlock/done.png similarity index 100% rename from src/stories/examples/imageInsteadBlock/done.png rename to apps/storybook/src/stories/examples/imageInsteadBlock/done.png diff --git a/src/stories/examples/imageInsteadBlock/fail.png b/apps/storybook/src/stories/examples/imageInsteadBlock/fail.png similarity index 100% rename from src/stories/examples/imageInsteadBlock/fail.png rename to apps/storybook/src/stories/examples/imageInsteadBlock/fail.png diff --git a/src/stories/examples/imageInsteadBlock/image.d.ts b/apps/storybook/src/stories/examples/imageInsteadBlock/image.d.ts similarity index 100% rename from src/stories/examples/imageInsteadBlock/image.d.ts rename to apps/storybook/src/stories/examples/imageInsteadBlock/image.d.ts diff --git a/src/stories/examples/imageInsteadBlock/imageInsteadBlock.stories.tsx b/apps/storybook/src/stories/examples/imageInsteadBlock/imageInsteadBlock.stories.tsx similarity index 98% rename from src/stories/examples/imageInsteadBlock/imageInsteadBlock.stories.tsx rename to apps/storybook/src/stories/examples/imageInsteadBlock/imageInsteadBlock.stories.tsx index aefcacb7..407d7cf8 100644 --- a/src/stories/examples/imageInsteadBlock/imageInsteadBlock.stories.tsx +++ b/apps/storybook/src/stories/examples/imageInsteadBlock/imageInsteadBlock.stories.tsx @@ -3,7 +3,7 @@ import React, { useEffect, useRef, useState } from "react"; import { ThemeProvider } from "@gravity-ui/uikit"; import type { Meta, StoryFn } from "@storybook/react-webpack5"; -import { CanvasBlock, Graph, TBlock, TGraphConfig } from "../../../index"; +import { CanvasBlock, Graph, TBlock, TGraphConfig } from "@gravity-ui/graph"; import { generatePrettyBlocks } from "../../configurations/generatePretty"; import { GraphComponentStory } from "../../main/GraphEditor"; diff --git a/src/stories/examples/imageInsteadBlock/running.png b/apps/storybook/src/stories/examples/imageInsteadBlock/running.png similarity index 100% rename from src/stories/examples/imageInsteadBlock/running.png rename to apps/storybook/src/stories/examples/imageInsteadBlock/running.png diff --git a/src/stories/examples/imageInsteadBlock/waiting.png b/apps/storybook/src/stories/examples/imageInsteadBlock/waiting.png similarity index 100% rename from src/stories/examples/imageInsteadBlock/waiting.png rename to apps/storybook/src/stories/examples/imageInsteadBlock/waiting.png diff --git a/src/stories/examples/mouseWheelBehaviorScroll/mouseWheelBehaviorScroll.stories.tsx b/apps/storybook/src/stories/examples/mouseWheelBehaviorScroll/mouseWheelBehaviorScroll.stories.tsx similarity index 82% rename from src/stories/examples/mouseWheelBehaviorScroll/mouseWheelBehaviorScroll.stories.tsx rename to apps/storybook/src/stories/examples/mouseWheelBehaviorScroll/mouseWheelBehaviorScroll.stories.tsx index cf1e080e..197baf38 100644 --- a/src/stories/examples/mouseWheelBehaviorScroll/mouseWheelBehaviorScroll.stories.tsx +++ b/apps/storybook/src/stories/examples/mouseWheelBehaviorScroll/mouseWheelBehaviorScroll.stories.tsx @@ -1,12 +1,11 @@ -import React, { useLayoutEffect } from "react"; +import React, { useCallback, useLayoutEffect } from "react"; import type { Meta, StoryFn } from "@storybook/react-webpack5"; -import { TBlock } from "../../../components/canvas/blocks/Block"; -import { Graph, GraphState } from "../../../graph"; -import { GraphBlock, GraphCanvas, HookGraphParams, useGraph, useGraphEvent } from "../../../react-components"; -import { useFn } from "../../../react-components/utils/hooks/useFn"; -import { ECanDrag } from "../../../store/settings"; +import { TBlock } from "@gravity-ui/graph"; +import { Graph, GraphState } from "@gravity-ui/graph"; +import { GraphBlock, GraphCanvas, HookGraphParams, useGraph, useGraphEvent } from "@gravity-ui/graph-react"; +import { ECanDrag } from "@gravity-ui/graph"; const config: HookGraphParams = { viewConfiguration: { @@ -75,13 +74,13 @@ function GraphWithMouseWheelBehaviorScroll() { }); }, [setEntities]); - const renderBlockFn = useFn((graph: Graph, block: TBlock) => { + const renderBlockFn = useCallback((graph: Graph, block: TBlock) => { return ( {block.id.toLocaleString()} ); - }); + }, []); return ; } diff --git a/src/stories/examples/newBlockLayer/newBlockLayer.stories.tsx b/apps/storybook/src/stories/examples/newBlockLayer/newBlockLayer.stories.tsx similarity index 83% rename from src/stories/examples/newBlockLayer/newBlockLayer.stories.tsx rename to apps/storybook/src/stories/examples/newBlockLayer/newBlockLayer.stories.tsx index 60f48990..06c13777 100644 --- a/src/stories/examples/newBlockLayer/newBlockLayer.stories.tsx +++ b/apps/storybook/src/stories/examples/newBlockLayer/newBlockLayer.stories.tsx @@ -1,13 +1,12 @@ -import React, { useEffect, useLayoutEffect, useRef, useState } from "react"; +import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react"; import { Flex, Hotkey, Switch, Text, ThemeProvider } from "@gravity-ui/uikit"; import type { Meta, StoryFn } from "@storybook/react-webpack5"; -import { TBlock } from "../../../components/canvas/blocks/Block"; -import { NewBlockLayer } from "../../../components/canvas/layers/newBlockLayer/NewBlockLayer"; -import { Graph } from "../../../index"; -import { GraphCanvas, useGraph } from "../../../react-components"; -import { useFn } from "../../../react-components/utils/hooks/useFn"; +import { TBlock } from "@gravity-ui/graph"; +import { NewBlockLayer } from "@gravity-ui/graph"; +import { Graph } from "@gravity-ui/graph"; +import { GraphCanvas, useGraph } from "@gravity-ui/graph-react"; import { generatePrettyBlocks } from "../../configurations/generatePretty"; import { BlockStory } from "../../main/Block"; @@ -33,7 +32,7 @@ const GraphApp = () => { const [enabled, setEnabled] = useState(true); - const switchNewBlockEnabled = useFn((addEnabled: boolean) => { + const switchNewBlockEnabled = useCallback((addEnabled: boolean) => { if (addEnabled) { newBlockLayerRef.current.enable(); setEnabled(true); @@ -41,7 +40,7 @@ const GraphApp = () => { newBlockLayerRef.current.disable(); setEnabled(false); } - }); + }, []); const renderBlock = (graphInstance: Graph, block: TBlock) => { return ; diff --git a/src/stories/examples/portConnectionLayer/portConnectionLayer.stories.tsx b/apps/storybook/src/stories/examples/portConnectionLayer/portConnectionLayer.stories.tsx similarity index 96% rename from src/stories/examples/portConnectionLayer/portConnectionLayer.stories.tsx rename to apps/storybook/src/stories/examples/portConnectionLayer/portConnectionLayer.stories.tsx index 754e4dfe..fb860c70 100644 --- a/src/stories/examples/portConnectionLayer/portConnectionLayer.stories.tsx +++ b/apps/storybook/src/stories/examples/portConnectionLayer/portConnectionLayer.stories.tsx @@ -3,14 +3,14 @@ import React, { useEffect, useLayoutEffect, useRef } from "react"; import { ThemeProvider } from "@gravity-ui/uikit"; import type { Meta, StoryFn } from "@storybook/react-webpack5"; -import { Anchor, CanvasBlock, EAnchorType, ECanDrag, Graph } from "../../../"; -import { TBlock } from "../../../components/canvas/blocks/Block"; +import { Anchor, CanvasBlock, EAnchorType, ECanDrag, Graph } from "@gravity-ui/graph"; +import { TBlock } from "@gravity-ui/graph"; import { IPortConnectionMeta, PortConnectionLayer, -} from "../../../components/canvas/layers/portConnectionLayer/PortConnectionLayer"; -import { GraphCanvas, useGraph } from "../../../react-components"; -import { createAnchorPortId } from "../../../store/connection/port/utils"; +} from "@gravity-ui/graph"; +import { GraphCanvas, useGraph } from "@gravity-ui/graph-react"; +import { createAnchorPortId } from "@gravity-ui/graph"; import { BlockStory } from "../../main/Block"; import "@gravity-ui/uikit/styles/styles.css"; diff --git a/src/stories/examples/themeChange/themeChange.stories.tsx b/apps/storybook/src/stories/examples/themeChange/themeChange.stories.tsx similarity index 95% rename from src/stories/examples/themeChange/themeChange.stories.tsx rename to apps/storybook/src/stories/examples/themeChange/themeChange.stories.tsx index cb7ecf4e..61f73841 100644 --- a/src/stories/examples/themeChange/themeChange.stories.tsx +++ b/apps/storybook/src/stories/examples/themeChange/themeChange.stories.tsx @@ -9,9 +9,9 @@ import { } from "@gravity-ui/uikit"; import type { Meta, StoryFn } from "@storybook/react-webpack5"; -import { Graph } from "../../../graph"; -import { TGraphColors } from "../../../graphConfig"; -import { computeCssVariable } from "../../../utils/functions"; +import { Graph } from "@gravity-ui/graph"; +import { TGraphColors } from "@gravity-ui/graph"; +import { computeCssVariable } from "@gravity-ui/graph"; import { withAnchorsAndConnectionConfig } from "../../configurations/withAnchorAndConnection"; import { GraphComponentStory } from "../../main/GraphEditor"; diff --git a/src/stories/examples/viewportInsets/viewportInsets.stories.tsx b/apps/storybook/src/stories/examples/viewportInsets/viewportInsets.stories.tsx similarity index 98% rename from src/stories/examples/viewportInsets/viewportInsets.stories.tsx rename to apps/storybook/src/stories/examples/viewportInsets/viewportInsets.stories.tsx index 04c15810..067ceeb6 100644 --- a/src/stories/examples/viewportInsets/viewportInsets.stories.tsx +++ b/apps/storybook/src/stories/examples/viewportInsets/viewportInsets.stories.tsx @@ -3,9 +3,9 @@ import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from import { Button, Flex, Switch } from "@gravity-ui/uikit"; import type { Meta, StoryObj } from "@storybook/react-webpack5"; -import { TBlock } from "../../../components/canvas/blocks/Block"; -import { Graph, GraphState } from "../../../graph"; -import { GraphCanvas, useGraph, useGraphEvent } from "../../../react-components"; +import { TBlock } from "@gravity-ui/graph"; +import { Graph, GraphState } from "@gravity-ui/graph"; +import { GraphCanvas, useGraph, useGraphEvent } from "@gravity-ui/graph-react"; import { generatePrettyBlocks } from "../../configurations/generatePretty"; import { BlockStory } from "../../main/Block"; diff --git a/src/stories/main/Block.css b/apps/storybook/src/stories/main/Block.css similarity index 100% rename from src/stories/main/Block.css rename to apps/storybook/src/stories/main/Block.css diff --git a/src/stories/main/Block.tsx b/apps/storybook/src/stories/main/Block.tsx similarity index 80% rename from src/stories/main/Block.tsx rename to apps/storybook/src/stories/main/Block.tsx index fe010fb1..ce420a3a 100644 --- a/src/stories/main/Block.tsx +++ b/apps/storybook/src/stories/main/Block.tsx @@ -1,12 +1,11 @@ -import React, { MouseEvent } from "react"; +import React, { useCallback, MouseEvent } from "react"; import { AbbrApi, Bug, Database } from "@gravity-ui/icons"; import { Button, Icon, Text } from "@gravity-ui/uikit"; -import { TBlock } from "../../components/canvas/blocks/Block"; -import { Graph } from "../../graph"; -import { GraphBlock, GraphBlockAnchor } from "../../react-components"; -import { useFn } from "../../react-components/utils/hooks/useFn"; +import { TBlock } from "@gravity-ui/graph"; +import { Graph } from "@gravity-ui/graph"; +import { GraphBlock, GraphBlockAnchor } from "@gravity-ui/graph-react"; import "./Block.css"; @@ -16,10 +15,10 @@ export type TBlockStoryProps = { }; export const BlockStory: React.FC = ({ graph, block }) => { - const onClick = useFn((e: MouseEvent) => { + const onClick = useCallback((e: MouseEvent) => { console.log("Propagation stopped. Event should not "); e.stopPropagation(); - }); + }, []); return (
diff --git a/src/stories/main/GraphEditor.stories.tsx b/apps/storybook/src/stories/main/GraphEditor.stories.tsx similarity index 95% rename from src/stories/main/GraphEditor.stories.tsx rename to apps/storybook/src/stories/main/GraphEditor.stories.tsx index 30a14ce5..07a1208e 100644 --- a/src/stories/main/GraphEditor.stories.tsx +++ b/apps/storybook/src/stories/main/GraphEditor.stories.tsx @@ -4,11 +4,11 @@ import { ThemeProvider } from "@gravity-ui/uikit"; import type { Meta, StoryObj } from "@storybook/react-webpack5"; import merge from "lodash/merge"; -import { Graph, TGraphConfig } from "../../graph"; -import { TGraphConstants, initGraphConstants } from "../../graphConfig"; -import { TGraphSettingsConfig } from "../../store"; -import { ECanDrag } from "../../store/settings"; -import { RecursivePartial } from "../../utils/types/helpers"; +import { Graph, TGraphConfig } from "@gravity-ui/graph"; +import { TGraphConstants, initGraphConstants } from "@gravity-ui/graph"; +import { TGraphSettingsConfig } from "@gravity-ui/graph"; +import { ECanDrag } from "@gravity-ui/graph"; +import { RecursivePartial } from "@gravity-ui/graph"; import { CustomLayerConfig } from "../configurations/CustomLayerConfig"; import { oneBezierConnectionConfig } from "../configurations/bezierConnection"; import { coloredConnections } from "../configurations/coloredConnections"; diff --git a/src/stories/main/GraphEditor.tsx b/apps/storybook/src/stories/main/GraphEditor.tsx similarity index 81% rename from src/stories/main/GraphEditor.tsx rename to apps/storybook/src/stories/main/GraphEditor.tsx index 610dcb3e..f7d5b2a7 100644 --- a/src/stories/main/GraphEditor.tsx +++ b/apps/storybook/src/stories/main/GraphEditor.tsx @@ -1,12 +1,9 @@ -import React, { useLayoutEffect } from "react"; +import React, { useCallback, useLayoutEffect } from "react"; -import { TBlock } from "../../components/canvas/blocks/Block"; -import { Graph, GraphState, TGraphConfig } from "../../graph"; -import { TGraphColors, TGraphConstants } from "../../graphConfig"; -import { GraphCanvas, TGraphEventCallbacks, useGraph, useGraphEvent } from "../../react-components"; -import { useFn } from "../../react-components/utils/hooks/useFn"; +import { GraphCanvas, TGraphEventCallbacks, useGraph, useGraphEvent } from "@gravity-ui/graph-react"; import { BlockStory } from "./Block"; +import { TGraphConfig, Graph, TGraphColors, TGraphConstants, TBlock, GraphState } from "@gravity-ui/graph"; export type TGraphComponentProps = { config: TGraphConfig; @@ -18,7 +15,7 @@ export type TGraphComponentProps = { const action = (name: string) => - (...args) => { + (...args: unknown[]) => { console.log(name, "[", ...args, "]"); }; @@ -62,9 +59,9 @@ export const GraphComponentStory = ({ config, graphRef, constants, colors, rende } }); - const renderBlockFn = useFn((graphObject: Graph, block: TBlock) => { + const renderBlockFn = useCallback((graphObject: Graph, block: TBlock) => { return renderBlock?.(graphObject, block) || ; - }); + }, []); return ; }; diff --git a/src/stories/main/ToolboxLayer.tsx b/apps/storybook/src/stories/main/ToolboxLayer.tsx similarity index 79% rename from src/stories/main/ToolboxLayer.tsx rename to apps/storybook/src/stories/main/ToolboxLayer.tsx index 8b627765..961d26b7 100644 --- a/src/stories/main/ToolboxLayer.tsx +++ b/apps/storybook/src/stories/main/ToolboxLayer.tsx @@ -1,9 +1,8 @@ +import { Graph, Layer, LayerContext, LayerProps } from "@gravity-ui/graph"; import React, { ChangeEvent, useCallback } from "react"; import ReactDOM from "react-dom/client"; -import { Graph } from "../../graph"; -import { Layer } from "../../services/Layer"; function Toolbox(props: { graph: Graph }) { const onChange = useCallback( @@ -20,14 +19,14 @@ function Toolbox(props: { graph: Graph }) { } export class ToolboxLayer extends Layer { - protected reactRoot: ReactDOM.Root; + protected reactRoot: ReactDOM.Root | null = null; - constructor(props, context) { + constructor(props: LayerProps, context: LayerContext) { super( { html: { zIndex: 300, - className: "custom-control", + classNames: ["custom-control"], }, ...props, }, diff --git a/src/stories/plugins/cssVariables/cssVariables.stories.css b/apps/storybook/src/stories/plugins/cssVariables/cssVariables.stories.css similarity index 100% rename from src/stories/plugins/cssVariables/cssVariables.stories.css rename to apps/storybook/src/stories/plugins/cssVariables/cssVariables.stories.css diff --git a/src/stories/plugins/cssVariables/cssVariables.stories.tsx b/apps/storybook/src/stories/plugins/cssVariables/cssVariables.stories.tsx similarity index 94% rename from src/stories/plugins/cssVariables/cssVariables.stories.tsx rename to apps/storybook/src/stories/plugins/cssVariables/cssVariables.stories.tsx index 125f3b1e..4290aa3d 100644 --- a/src/stories/plugins/cssVariables/cssVariables.stories.tsx +++ b/apps/storybook/src/stories/plugins/cssVariables/cssVariables.stories.tsx @@ -2,11 +2,10 @@ import React, { useState } from "react"; import type { Meta, StoryObj } from "@storybook/react-webpack5"; -import { Graph, GraphState } from "../../../graph"; -import { CSSVariablesLayer } from "../../../plugins/cssVariables"; -import { GraphCanvas, useGraphEvent } from "../../../react-components"; -import { useGraph, useLayer } from "../../../react-components/hooks"; -import { generatePrettyBlocks } from "../../../stories/configurations/generatePretty"; +import { Graph, GraphState } from "@gravity-ui/graph"; +import { CSSVariablesLayer } from "@gravity-ui/graph"; +import { GraphCanvas, useGraphEvent, useGraph, useLayer } from "@gravity-ui/graph-react"; +import { generatePrettyBlocks } from "../../configurations/generatePretty"; import { BlockStory } from "../../main/Block"; import "./cssVariables.stories.css"; diff --git a/src/stories/plugins/devtools/DevTools.stories.tsx b/apps/storybook/src/stories/plugins/devtools/DevTools.stories.tsx similarity index 94% rename from src/stories/plugins/devtools/DevTools.stories.tsx rename to apps/storybook/src/stories/plugins/devtools/DevTools.stories.tsx index 05bc3909..d5f882f6 100644 --- a/src/stories/plugins/devtools/DevTools.stories.tsx +++ b/apps/storybook/src/stories/plugins/devtools/DevTools.stories.tsx @@ -2,12 +2,12 @@ import React, { useCallback, useEffect } from "react"; import type { Meta, StoryObj } from "@storybook/react-webpack5"; -import { TBlock } from "../../../components/canvas/blocks/Block"; -import { Graph } from "../../../graph"; -import { DevToolsLayer } from "../../../plugins/devtools/DevToolsLayer"; -import { DEFAULT_DEVTOOLS_LAYER_PROPS } from "../../../plugins/devtools/constants"; -import { TDevToolsLayerProps } from "../../../plugins/devtools/types"; -import { GraphBlock, GraphCanvas, useGraph, useLayer } from "../../../react-components"; +import { TBlock } from "@gravity-ui/graph"; +import { Graph } from "@gravity-ui/graph"; +import { DevToolsLayer } from "@gravity-ui/graph"; +import { DEFAULT_DEVTOOLS_LAYER_PROPS } from "@gravity-ui/graph"; +import { TDevToolsLayerProps } from "@gravity-ui/graph"; +import { GraphBlock, GraphCanvas, useGraph, useLayer } from "@gravity-ui/graph-react"; import { generatePrettyBlocks } from "../../configurations/generatePretty"; // Define some basic global styles directly or assume they exist globally diff --git a/src/stories/plugins/devtools/constants.ts b/apps/storybook/src/stories/plugins/devtools/constants.ts similarity index 88% rename from src/stories/plugins/devtools/constants.ts rename to apps/storybook/src/stories/plugins/devtools/constants.ts index 6add4562..8789d09e 100644 --- a/src/stories/plugins/devtools/constants.ts +++ b/apps/storybook/src/stories/plugins/devtools/constants.ts @@ -1,4 +1,4 @@ -import { TBlock } from "../../../components/canvas/blocks/Block"; +import { TBlock } from "@gravity-ui/graph"; export const DEVTOOLS_STORY_BLOCKS: TBlock[] = [ { diff --git a/src/stories/plugins/elk/elk.stories.tsx b/apps/storybook/src/stories/plugins/elk/elk.stories.tsx similarity index 94% rename from src/stories/plugins/elk/elk.stories.tsx rename to apps/storybook/src/stories/plugins/elk/elk.stories.tsx index e1320332..5d84b253 100644 --- a/src/stories/plugins/elk/elk.stories.tsx +++ b/apps/storybook/src/stories/plugins/elk/elk.stories.tsx @@ -1,14 +1,18 @@ -import React, { useEffect, useMemo } from "react"; +import React, { useCallback, useEffect, useMemo } from "react"; import { ThemeProvider } from "@gravity-ui/uikit"; import { Description, Meta as StorybookMeta, Title } from "@storybook/addon-docs/blocks"; import type { Meta, StoryFn } from "@storybook/react-webpack5"; import ELK, { ElkNode } from "elkjs"; -import { Graph, GraphState, TBlock, TConnection, TGraphConfig } from "../../../index"; -import { GraphCanvas, MultipointConnection, useElk, useGraph, useGraphEvent } from "../../../react-components"; -import { TMultipointConnection } from "../../../react-components/elk/types"; -import { useFn } from "../../../react-components/utils/hooks/useFn"; +import { Graph, GraphState, TBlock, TConnection, TGraphConfig } from "@gravity-ui/graph"; +import { + GraphCanvas, + MultipointConnection, + TMultipointConnection, + useElk, + useGraph, + useGraphEvent} from "@gravity-ui/graph-react"; import { BlockStory } from "../../main/Block"; import { getExampleConfig } from "./getExampleConfig"; @@ -80,9 +84,9 @@ const GraphApp = ({ elkConfig, graphConfig }: GraphAppProps) => { } }); - const renderBlockFn = useFn((graphObject: Graph, block: TBlock) => { + const renderBlockFn = useCallback((graphObject: Graph, block: TBlock) => { return ; - }); + }, []); return ( diff --git a/src/stories/plugins/elk/generateExampleTree.ts b/apps/storybook/src/stories/plugins/elk/generateExampleTree.ts similarity index 94% rename from src/stories/plugins/elk/generateExampleTree.ts rename to apps/storybook/src/stories/plugins/elk/generateExampleTree.ts index f8b48412..c860770d 100644 --- a/src/stories/plugins/elk/generateExampleTree.ts +++ b/apps/storybook/src/stories/plugins/elk/generateExampleTree.ts @@ -1,4 +1,4 @@ -import { TGraphConfig } from "../../../graph"; +import { TGraphConfig } from "@gravity-ui/graph"; import { createBlock } from "../../configurations/generatePretty"; export function generateExampleTree(levels: number) { diff --git a/src/stories/plugins/elk/getExampleConfig.ts b/apps/storybook/src/stories/plugins/elk/getExampleConfig.ts similarity index 98% rename from src/stories/plugins/elk/getExampleConfig.ts rename to apps/storybook/src/stories/plugins/elk/getExampleConfig.ts index 8ad74854..0911f033 100644 --- a/src/stories/plugins/elk/getExampleConfig.ts +++ b/apps/storybook/src/stories/plugins/elk/getExampleConfig.ts @@ -1,7 +1,7 @@ import { ElkExtendedEdge, ElkNode, LayoutOptions } from "elkjs"; -import { TGraphConfig } from "../../../graph"; -import { measureText } from "../../../utils/functions/text"; +import { TGraphConfig } from "@gravity-ui/graph"; +import { measureText } from "@gravity-ui/graph"; import { createBlock, generatePrettyBlocks } from "../../configurations/generatePretty"; import { Algorithm } from "./elk.stories"; diff --git a/src/stories/plugins/minimap.stories.tsx b/apps/storybook/src/stories/plugins/minimap.stories.tsx similarity index 93% rename from src/stories/plugins/minimap.stories.tsx rename to apps/storybook/src/stories/plugins/minimap.stories.tsx index eb0d2a75..651902ac 100644 --- a/src/stories/plugins/minimap.stories.tsx +++ b/apps/storybook/src/stories/plugins/minimap.stories.tsx @@ -3,7 +3,7 @@ import React, { useRef } from "react"; import { ThemeProvider } from "@gravity-ui/uikit"; import type { Meta, StoryFn } from "@storybook/react-webpack5"; -import { ECanDrag, Graph, LayerConfig, MiniMapLayer } from "../../"; +import { ECanDrag, Graph, LayerConfig, MiniMapLayer } from "@gravity-ui/graph"; import { generatePrettyBlocks } from "../configurations/generatePretty"; import { GraphComponentStory } from "../main/GraphEditor"; diff --git a/apps/storybook/tsconfig.json b/apps/storybook/tsconfig.json new file mode 100644 index 00000000..f151927c --- /dev/null +++ b/apps/storybook/tsconfig.json @@ -0,0 +1,17 @@ +{ + "extends": "../../tools/tsconfig/react.json", + "compilerOptions": { + "baseUrl": "./src", + "jsx": "react-jsx", + "paths": { + "@/*": ["./*"] + } + }, + "references": [ + { "path": "../../packages/graph-canvas-core" }, + { "path": "../../packages/graph" }, + { "path": "../../packages/graph-react" } + ], + "include": ["src/**/*", ".storybook/**/*"], + "exclude": ["node_modules"] +} diff --git a/e2e/build-bundle.js b/e2e/build-bundle.js deleted file mode 100644 index bc21672a..00000000 --- a/e2e/build-bundle.js +++ /dev/null @@ -1,39 +0,0 @@ -const esbuild = require("esbuild"); -const path = require("path"); -const fs = require("fs"); - -// Plugin to inject CSS into the bundle as a style tag -const cssPlugin = { - name: "css", - setup(build) { - build.onLoad({ filter: /\.css$/ }, async (args) => { - const css = await fs.promises.readFile(args.path, "utf8"); - const contents = ` - const style = document.createElement('style'); - style.textContent = ${JSON.stringify(css)}; - document.head.appendChild(style); - `; - return { contents, loader: "js" }; - }); - }, -}; - -esbuild - .build({ - entryPoints: [path.join(__dirname, "entry.ts")], - bundle: true, - outfile: path.join(__dirname, "dist/graph.bundle.js"), - format: "iife", - globalName: "GraphModule", - platform: "browser", - target: ["es2020"], - sourcemap: true, - plugins: [cssPlugin], - }) - .then(() => { - console.log("E2E bundle created successfully with CSS"); - }) - .catch((err) => { - console.error("E2E bundle failed:", err); - process.exit(1); - }); diff --git a/e2e/entry.ts b/e2e/entry.ts deleted file mode 100644 index d94f51cf..00000000 --- a/e2e/entry.ts +++ /dev/null @@ -1,8 +0,0 @@ -// E2E bundle entry point with CSS imports -import "../src/services/Layer.css"; -import "../src/react-components/graph-canvas.css"; -import "../src/react-components/Block.css"; -import "../src/react-components/Anchor.css"; - -// Re-export everything from main index -export * from "../src/index"; diff --git a/e2e/global.d.ts b/e2e/global.d.ts index 647823f1..a75018b5 100644 --- a/e2e/global.d.ts +++ b/e2e/global.d.ts @@ -1,4 +1,4 @@ -import type { Graph } from "../src/graph"; +import type { Graph } from "@gravity-ui/graph"; declare global { interface Window { diff --git a/e2e/page-objects/GraphPageObject.ts b/e2e/page-objects/GraphPageObject.ts index 4c6e25d2..bee2aa44 100644 --- a/e2e/page-objects/GraphPageObject.ts +++ b/e2e/page-objects/GraphPageObject.ts @@ -1,6 +1,5 @@ import { Page } from "@playwright/test"; -import { TBlock } from "../../src/components/canvas/blocks/Block"; -import { TConnection } from "../../src/store/connection/ConnectionState"; +import type { TBlock, TConnection } from "@gravity-ui/graph"; import { GraphBlockComponentObject } from "./GraphBlockComponentObject"; import { GraphConnectionComponentObject } from "./GraphConnectionComponentObject"; import { GraphCameraComponentObject } from "./GraphCameraComponentObject"; diff --git a/e2e/pages/base.html b/e2e/pages/base.html index d1890c92..cdb8777a 100644 --- a/e2e/pages/base.html +++ b/e2e/pages/base.html @@ -17,7 +17,7 @@
- +