feat(Libraries/Timeline): add playground

next.config.js

@@ -15,6 +15,7 @@
     '@gravity-ui/charts',
     '@gravity-ui/yagr',
     '@gravity-ui/markdown-editor',
+    '@gravity-ui/timeline',
 ]);
 
 const {i18n} = require('./next-i18next.config');
@@ -81,7 +82,7 @@
                 });
 
                 if (!options.isServer) {
                     config.resolve.fallback.fs = false;
                 }
 
                 if (process.env.ANALYZE_BUNDLE) {

package.json

@@ -16,6 +16,7 @@
     "@gravity-ui/markdown-editor": "^15.1.0",
     "@gravity-ui/navigation": "^3.11.0",
     "@gravity-ui/page-constructor": "^6.0.0-beta.6",
+    "@gravity-ui/timeline": "^1.25.1",
     "@gravity-ui/uikit": "^7.28.0",
     "@gravity-ui/uikit-themer": "^1.4.1",
     "@mdx-js/mdx": "^2.3.0",

public/locales/de/timeline.json

@@ -0,0 +1,5 @@
+{
+  "goToLibrary": "Zur Bibliothek wechseln",
+  "title": "Spielwiese"
+}
+

public/locales/en/timeline.json

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

public/locales/es/timeline.json

@@ -0,0 +1,5 @@
+{
+  "goToLibrary": "Ir a la biblioteca",
+  "title": "Playground"
+}
+

public/locales/fr/timeline.json

@@ -0,0 +1,5 @@
+{
+  "goToLibrary": "Aller à la bibliothèque",
+  "title": "Terrain de jeu"
+}
+

public/locales/ko/timeline.json

@@ -0,0 +1,5 @@
+{
+  "goToLibrary": "라이브러리로 이동",
+  "title": "플레이그라운드"
+}
+

public/locales/ru/timeline.json

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

public/locales/zh/timeline.json

@@ -0,0 +1,5 @@
+{
+  "goToLibrary": "前往库",
+  "title": "Playground"
+}
+

src/components/GraphPlayground/GraphPlayground.scss

@@ -1,83 +1,10 @@
-@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

@@ -1,38 +1,22 @@
-import {Col, Grid, Row} from '@gravity-ui/page-constructor';
-import {Button} from '@gravity-ui/uikit';
 import {useTranslation} from 'next-i18next';
 import {memo} from 'react';
 
 import {block} from '../../utils';
+import {PlaygroundWrap} from '../PlaygroundWrap';
 
 import './GraphPlayground.scss';
-import {GraphPlayground} from './Playground/GraphPlayground';
+import {GraphPlayground as GraphPlaygroundInner} from './Playground/GraphPlayground';
 
 const b = block('graph');
 
-export const GraphPlayround = memo(() => {
+export const GraphPlayground = memo(() => {
     const {t} = 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={'/libraries/graph'}
-                            className={b('library-button')}
-                            size="xl"
-                            view="outlined-contrast"
-                        >
-                            {t('goToLibrary')}
-                        </Button>
-                    </div>
-                </Col>
-            </Row>
-            <Row className={b('playground')}>
-                <GraphPlayground className={b('graph-viewer')} key={Date.now()} />
-            </Row>
-        </Grid>
+        <PlaygroundWrap title={t('title')} libraryId="graph" goToLibraryText={t('goToLibrary')}>
+            <GraphPlaygroundInner className={b('graph-viewer')} key={Date.now()} />
+        </PlaygroundWrap>
     );
 });
+
+GraphPlayground.displayName = 'GraphPlayground';

src/components/PlaygroundWrap/PlaygroundWrap.scss

@@ -0,0 +1,53 @@
+@use '~@gravity-ui/page-constructor/styles/variables.scss' as pcVariables;
+@use '~@gravity-ui/uikit/styles/mixins' as ukitMixins;
+@use '../../variables.scss';
+
+$block: '.#{variables.$ns}playground-wrap';
+
+#{$block} {
+    height: 100%;
+    margin-block-start: calc(var(--g-spacing-base) * 8);
+
+    &__container {
+        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;
+        }
+    }
+
+    &__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;
+    }
+}

src/components/PlaygroundWrap/PlaygroundWrap.tsx

@@ -0,0 +1,44 @@
+import {Col, Grid, Row} from '@gravity-ui/page-constructor';
+import {Button} from '@gravity-ui/uikit';
+import React, {PropsWithChildren, memo} from 'react';
+
+import {block} from '../../utils';
+
+import './PlaygroundWrap.scss';
+
+const b = block('playground-wrap');
+
+type Props = {
+    title: string;
+    libraryId: string;
+    goToLibraryText?: string;
+};
+
+export const PlaygroundWrap = memo<PropsWithChildren<Props>>(
+    ({title, libraryId, goToLibraryText, children}) => {
+        return (
+            <Grid className={b()} containerClass={b('container')}>
+                <Row className={b('title')}>
+                    <Col sizes={12} className={b('heading')}>
+                        <h1 className={b('title')}>{title}</h1>
+                        <div className={b('actions')}>
+                            {goToLibraryText && (
+                                <Button
+                                    href={`/libraries/${libraryId}`}
+                                    className={b('library-button')}
+                                    size="xl"
+                                    view="outlined-contrast"
+                                >
+                                    {goToLibraryText}
+                                </Button>
+                            )}
+                        </div>
+                    </Col>
+                </Row>
+                <Row className={b('playground')}>{children}</Row>
+            </Grid>
+        );
+    },
+);
+
+PlaygroundWrap.displayName = 'PlaygroundWrap';

src/components/PlaygroundWrap/index.ts

@@ -0,0 +1 @@
+export {PlaygroundWrap} from './PlaygroundWrap';

src/components/TimelinePlayground/Playground/Editor.scss

@@ -0,0 +1,31 @@
+@use '~@gravity-ui/page-constructor/styles/variables.scss' as pcVariables;
+@use '~@gravity-ui/uikit/styles/mixins' as ukitMixins;
+@use '../../../variables.scss';
+
+$block: '.#{variables.$ns}editor';
+
+#{$block} {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+    overflow: hidden;
+
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 10px;
+
+    &__monaco {
+        flex: 1;
+        height: 100%;
+        min-height: 0;
+    }
+
+    &__actions {
+        border-top: 1px solid rgba(255, 255, 255, 0.2);
+        padding: var(--g-spacing-3);
+
+        .g-button {
+            --_--border-radius: 8px;
+        }
+    }
+}