feat: add playground for @gravity-ui/graph

package.json

@@ -8,13 +8,15 @@
     "@gravity-ui/chartkit": "^5.10.1",
     "@gravity-ui/components": "^3.10.1",
     "@gravity-ui/date-components": "^2.10.1",
+    "@gravity-ui/graph": "^0.0.2",
     "@gravity-ui/icons": "^2.11.0",
     "@gravity-ui/markdown-editor": "^13.18.0",
     "@gravity-ui/navigation": "^2.24.1",
     "@gravity-ui/page-constructor": "^5.2.0",
     "@gravity-ui/uikit": "^6.30.1",
     "@mdx-js/mdx": "^2.3.0",
     "@mdx-js/react": "^2.3.0",
+    "@monaco-editor/react": "^4.6.0",
     "@octokit/rest": "^20.1.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",

public/locales/en/libraries-info.json

@@ -30,7 +30,7 @@
     "description_babel-preset": "Babel configuration preset for Gravity UI projects.",
     "description_browserslist-config": "Browserslist confugiration preset used in our services.",
     "description_markdown-editor": "A powerful tool for working with Markdown, which combines WYSIWYG and Markup modes.",
-    "description_graph": "Graph description",
+    "description_graph": "High-performance graph renderer with dynamic scale-aware detailization",
     "description_data-source": "A wrapper around data fetching.",
     "description_webpack-i18n-assets-plugin": "A plugin for Webpack that replaces calls to localization functions (i18n) with target texts."
 }

src/components/GraphPlayground/GraphPlayground.scss

@@ -50,11 +50,18 @@ $block: '.#{variables.$ns}graph';
         background: rgba(37, 27, 37, 1);
         border-radius: 24px;
         flex: 1;
-        min-height: 648px;
+        flex-direction: column;
+        min-height: 80vh;
+        max-height: 80vh;
         gap: 24px;
         position: relative;
     }
 
+    &__graph-viewer {
+        flex: 1;
+        min-height: 100%;
+    }
+
     &__json-switcher {
         position: absolute;
         top: 24px;

src/components/GraphPlayground/GraphPlayground.tsx

@@ -1,20 +1,17 @@
-import {LayoutColumns, LayoutSideContentRight} from '@gravity-ui/icons';
 import {Col, Grid, Row} from '@gravity-ui/page-constructor';
-import {Button, Icon, Text} from '@gravity-ui/uikit';
+import {Button, ThemeProvider} from '@gravity-ui/uikit';
 import {useTranslation} from 'next-i18next';
-import {useState} from 'react';
 
 import {block, getLocaleLink} from '../../utils';
 
 import './GraphPlayground.scss';
+import {GraphPlayground} from './Playground/GraphPlayground';
 
 const b = block('graph');
 
 export const GraphPlayround = () => {
     const {t, i18n} = useTranslation('graph');
 
-    const [JSONVisible, setJSONVisible] = useState(true);
-
     return (
         <Grid className={b()} containerClass={b('container')}>
             <Row className={b('title')}>
@@ -33,23 +30,9 @@ export const GraphPlayround = () => {
                 </Col>
             </Row>
             <Row className={b('playground')}>
-                <Button
-                    onClick={() => setJSONVisible((visible) => !visible)}
-                    view="flat"
-                    className={b('json-switcher')}
-                >
-                    <Icon data={JSONVisible ? LayoutSideContentRight : LayoutColumns} />
-                </Button>
-                <Col className={b('editor-wrap')}>
-                    <Text variant="header-1">Graph viewer</Text>
-                    <div className={b('editor')}></div>
-                </Col>
-                {JSONVisible && (
-                    <Col className={b('editor-wrap')}>
-                        <Text variant="header-1">JSON Editor</Text>
-                        <div className={b('editor')}></div>
-                    </Col>
-                )}
+                <ThemeProvider theme="dark">
+                    <GraphPlayground className={b('graph-viewer')} />
+                </ThemeProvider>
             </Row>
         </Grid>
     );

src/components/GraphPlayground/Playground/ActionBlock/ActionBlock.scss

@@ -0,0 +1,26 @@
+@use '~@gravity-ui/page-constructor/styles/variables.scss' as pcVariables;
+@use '~@gravity-ui/uikit/styles/mixins' as ukitMixins;
+@use '../../../../variables.scss';
+
+$block: '.#{variables.$ns}block';
+
+#{$block} {
+    border-radius: 8px;
+    border-width: 2px;
+    padding: var(--g-spacing-3);
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--g-spacing-1);
+
+    &:hover {
+        &:not(.selected) {
+            border-color: rgba(229, 229, 229, 0.4);
+        }
+        background-color: rgba(57, 47, 57, 1);
+    }
+
+    &__name {
+        font-weight: 500;
+    }
+}

src/components/GraphPlayground/Playground/ActionBlock/ActionBlockHtml.tsx

@@ -0,0 +1,41 @@
+import {Graph, GraphBlock, GraphBlockAnchor} from '@gravity-ui/graph';
+import {Database} from '@gravity-ui/icons';
+import {Button, Flex, Icon, Text} from '@gravity-ui/uikit';
+import React from 'react';
+
+import {block} from '../../../../utils';
+import {TGravityActionBlock} from '../generateLayout';
+
+import './ActionBlock.scss';
+
+const b = block('block');
+
+export function ActionBlockHtml({graph, block}: {graph: Graph; block: TGravityActionBlock}) {
+    return (
+        <GraphBlock graph={graph} block={block} className={b()}>
+            {block.anchors.map((anchor) => {
+                return (
+                    <GraphBlockAnchor
+                        key={anchor.id}
+                        position="absolute"
+                        graph={graph}
+                        anchor={anchor}
+                    />
+                );
+            })}
+            <Flex grow={1} direction={'column'}>
+                <Text ellipsis variant="caption-2" className={b('name')}>
+                    {block.name}
+                </Text>
+                <Text ellipsis variant="caption-1" color="secondary">
+                    {block.meta?.description}
+                </Text>
+            </Flex>
+            <Flex>
+                <Button onClick={(e) => e.stopPropagation()}>
+                    <Icon data={Database} />
+                </Button>
+            </Flex>
+        </GraphBlock>
+    );
+}