feat: add new library @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/graph.json

@@ -0,0 +1,4 @@
+{
+  "goToLibrary": "Go to library",
+  "title": "Playground"
+}

public/locales/en/libraries-info.json

@@ -30,6 +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": "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.",
     "description_table": "Library for visualizing data in tabular format."

public/locales/ru/graph.json

@@ -0,0 +1,4 @@
+{
+  "goToLibrary": "К библиотеке",
+  "title": "Редактор"
+}

public/locales/ru/libraries-info.json

@@ -30,6 +30,7 @@
     "description_babel-preset": "Пресет настройки Babel для проектов Gravity UI.",
     "description_browserslist-config": "Пресет настройки Browserslist для проектов Gravity UI.",
     "description_markdown-editor": "Мощный инструмент для работы с Markdown, который сочетает в себе режимы WYSIWYG и разметки.",
+    "description_graph": "Библиотека для визуализации больших графов с динамическим уровнем детализации",
     "description_data-source": "Библиотека-обертка над загрузкой данных.",
     "description_webpack-i18n-assets-plugin": "Плагин для Webpack, который заменяет вызовы функций локализации (i18n) на целевые тексты.",
     "description_table": "Библиотека для отображения таблиц."

src/[locale]/libraries/[libId]/playground/index.tsx

@@ -18,6 +18,15 @@ const MarkdownEditor = dynamic(
         ssr: false,
     },
 );
+const GraphPlayround = dynamic(
+    () =>
+        import('../../../../components/GraphPlayground/GraphPlayground').then(
+            (mod) => mod.GraphPlayround,
+        ),
+    {
+        ssr: false,
+    },
+);
 
 export const getStaticPaths: GetStaticPaths = async () => {
     const paths = getI18nPaths().reduce<GetStaticPathsResult['paths']>((acc, localeItem) => {
@@ -48,7 +57,7 @@ export const getStaticProps: GetStaticProps = async (context) => {
     };
 };
 
-export const availablePlaygrounds = ['markdown-editor'];
+export const availablePlaygrounds = ['markdown-editor', 'graph'];
 
 export const PlaygroundPage = ({libId}: {libId: string}) => {
     const hasPlayground = availablePlaygrounds.includes(libId);
@@ -62,6 +71,7 @@ export const PlaygroundPage = ({libId}: {libId: string}) => {
                 <>
                     <Layout title={availablePlaygrounds.includes(libId) ? t(libId) : ''}>
                         {libId === 'markdown-editor' && <MarkdownEditor />}
+                        {libId === 'graph' && <GraphPlayround />}
                     </Layout>
                 </>
             )}

src/components/GraphPlayground/GraphPlayground.scss

@@ -0,0 +1,83 @@
+@use '~@gravity-ui/page-constructor/styles/variables.scss' as pcVariables;
+@use '~@gravity-ui/uikit/styles/mixins' as ukitMixins;
+@use '../../variables.scss';
+
+$block: '.#{variables.$ns}graph';
+
+#{$block} {
+    min-height: 100%;
+    height: 100%;
+    margin-block-start: calc(var(--g-spacing-base) * 8);
+
+    &__container {
+        min-height: 100%;
+        display: flex;
+        flex-direction: column;
+    }
+
+    &__heading {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: pcVariables.$indentXS;
+
+        @media (max-width: map-get(pcVariables.$gridBreakpoints, 'md') - 1) {
+            margin-bottom: pcVariables.$indentXXXS;
+        }
+    }
+
+    &__title {
+        font-size: 48px;
+        line-height: 56px;
+        font-weight: 600;
+        color: #fff;
+        margin: 0;
+
+        @media (max-width: map-get(pcVariables.$gridBreakpoints, 'md') - 1) {
+            font-size: 32px;
+            line-height: 48px;
+            margin-bottom: pcVariables.$indentXXXS;
+        }
+    }
+
+    &__content {
+        width: 100%;
+        min-height: 300px;
+    }
+
+    &__playground {
+        padding: 24px 32px;
+        background: rgba(37, 27, 37, 1);
+        border-radius: 24px;
+        flex: 1;
+        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;
+        right: 32px;
+        z-index: 2;
+    }
+
+    &__editor-wrap {
+        display: flex;
+        flex-direction: column;
+        gap: 24px;
+    }
+
+    &__editor {
+        flex: 1;
+        border-radius: 24px;
+        border: 1px solid rgba(255, 255, 255, 0.2);
+    }
+}

src/components/GraphPlayground/GraphPlayground.tsx

@@ -0,0 +1,39 @@
+import {Col, Grid, Row} from '@gravity-ui/page-constructor';
+import {Button, ThemeProvider} from '@gravity-ui/uikit';
+import {useTranslation} from 'next-i18next';
+
+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');
+
+    return (
+        <Grid className={b()} containerClass={b('container')}>
+            <Row className={b('title')}>
+                <Col sizes={12} className={b('heading')}>
+                    <h1 className={b('title')}>{t('title')}</h1>
+                    <div className={b('actions')}>
+                        <Button
+                            href={getLocaleLink('/libraries/graph', i18n)}
+                            className={b('library-button')}
+                            size="xl"
+                            view="outlined-contrast"
+                        >
+                            {t('goToLibrary')}
+                        </Button>
+                    </div>
+                </Col>
+            </Row>
+            <Row className={b('playground')}>
+                <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;
+    }
+}