add storybook

demo/src/Components/ConstructorPage/index.scss

@@ -0,0 +1,70 @@
+.g-root {
+  --dc-header-height: 0px;
+  --pc-first-block-indent: 0px;
+  --pc-first-block-mobile-indent: 0px;
+
+  .dc-root_full-header & {
+    --dc-header-height: 64px;
+  }
+}
+
+@media only screen and (max-width: 577px) {
+  .pc-block-base.pc-block-base.pc-block-base:first-child {
+    margin-top: var(--pc-first-block-mobile-indent, 64px);
+  }
+}
+
+.pc-block-base.pc-block-base.pc-block-base:first-child {
+  margin-top: var(--pc-first-block-indent, 96px);
+}
+
+.pc-Grid .pc-Grid {
+  .container-fluid .pc-header-block__container-fluid {
+    padding-right: 40px;
+    padding-left: 40px;
+  }
+}
+
+.pc-block-base {
+  padding: 0 !important;
+}
+
+.pc-navigation {
+  z-index:  101;
+
+  .desktop .dc-root_wide-format & .container-fluid {
+    padding: 0;
+
+    & .col {
+      padding: 0;
+    }
+  }
+
+  .mobile .dc-root_wide-format & .container-fluid {
+    padding: 12px;
+
+    & .col {
+      padding: 0;
+    }
+  }
+}
+
+.pc-navigation-popup {
+  background: var(--g-color-base-background);
+}
+
+.pc-desktop-navigation {
+  &__right {
+    flex: 0 1 auto;
+  }
+
+  &__buttons {
+    flex-basis: 100%;
+    justify-content: end;
+  }
+
+  &__item {
+    width: 100%;
+    transition: width 0.3s;
+  }
+}

demo/src/Components/ConstructorPage/index.stories.tsx

@@ -0,0 +1,75 @@
+import React, {useEffect} from 'react';
+
+import {
+    ConstructorPage as ConstructorPageComponent,
+    ConstructorPageData,
+    DocumentType,
+} from '@diplodoc/components';
+import {PageConstructor, PageConstructorProvider} from '@gravity-ui/page-constructor';
+import {ThemeProvider} from '@gravity-ui/uikit';
+import cn from 'bem-cn-lite';
+
+import {updateBodyClassName} from '../utils';
+
+import pageContent from './page.json';
+
+import './index.scss';
+
+const layoutBlock = cn('Layout');
+
+const ConstructorPageDemo = (args) => {
+    const isMobile = args['Mobile'];
+    const theme = args['Theme'];
+    const router = {pathname: '/docs/compute'};
+
+    useEffect(() => {
+        updateBodyClassName(theme);
+    }, [theme]);
+
+    const Page = () => {
+        return (
+            <div className={isMobile === 'true' ? 'mobile' : 'desktop'}>
+                <div className={layoutBlock('content')}>
+                    <ConstructorPageComponent
+                        {...(pageContent as ConstructorPageData)}
+                        wideFormat={true}
+                        router={router}
+                        type={DocumentType.ConstructorPage}
+                    />
+                </div>
+            </div>
+        );
+    };
+
+    return (
+        <div className="App">
+            <ThemeProvider theme={theme}>
+                <PageConstructorProvider theme={theme}>
+                    <PageConstructor
+                        custom={{
+                            blocks: {
+                                page: () => <Page />,
+                            },
+                        }}
+                        content={{
+                            blocks: [
+                                {
+                                    type: 'page',
+                                },
+                            ],
+                        }}
+                    />
+                </PageConstructorProvider>
+            </ThemeProvider>
+        </div>
+    );
+};
+
+export default {
+    title: 'Pages/Constructor',
+    component: ConstructorPageDemo,
+};
+
+export const Constructor = {
+    args: {},
+};