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",

src/components/GraphPlayground/GraphPlayground.scss

@@ -51,6 +51,7 @@ $block: '.#{variables.$ns}graph';
         border-radius: 24px;
         flex: 1;
         min-height: 648px;
+        max-height: 648px;
         gap: 24px;
         position: relative;
     }

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,11 @@ 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 sizes={12}>
+                    <ThemeProvider theme="dark">
+                        <GraphPlayground />
+                    </ThemeProvider>
                 </Col>
-                {JSONVisible && (
-                    <Col className={b('editor-wrap')}>
-                        <Text variant="header-1">JSON Editor</Text>
-                        <div className={b('editor')}></div>
-                    </Col>
-                )}
             </Row>
         </Grid>
     );

src/components/GraphPlayground/Playground/ActionBlock/ActionBlock.css

@@ -0,0 +1,21 @@
+.action-block-wrapper {
+  border-radius: 8px;
+  border-width: 4px;
+  padding: var(--g-spacing-3);
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-spacing-1);
+}
+
+.action-block-name {
+  font-weight: 500;
+}
+
+.action-block-wrapper:hover {
+  cursor: pointer;
+  border-color: rgba(229, 229, 229, 0.4);
+  background-color: rgba(57, 47, 57, 1);
+}
+
+

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

@@ -0,0 +1,39 @@
+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 {TGravityActionBlock} from '../generateLayout';
+
+import './ActionBlock.css';
+
+export function ActionBlockHtml({graph, block}: {graph: Graph; block: TGravityActionBlock}) {
+    return (
+        <GraphBlock graph={graph} block={block} className="action-block-wrapper">
+            {block.anchors.map((anchor) => {
+                return (
+                    <GraphBlockAnchor
+                        className="action-block-achor"
+                        key={anchor.id}
+                        position="absolute"
+                        graph={graph}
+                        anchor={anchor}
+                    />
+                );
+            })}
+            <Flex grow={1} direction={'column'}>
+                <Text ellipsis variant="caption-2" className="action-block-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>
+    );
+}