feat(deps): update gravity-ui v6 (#205)

* feat(deps): update gravity-ui v6 * chore: eslint ignore demo folder
diplodoc-platform · Feb 20, 2024 · 84a22c8 · 84a22c8
1 parent f555e2d
commit 84a22c8
Show file tree

Hide file tree

Showing 13 changed files with 365 additions and 244 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -9,3 +9,8 @@ node_modules
 
 # Build
 build
+
+#storybook
+demo/storybook-static
+demo/node_modules
+demo/.storybook
diff --git a/demo/package-lock.json b/demo/package-lock.json
diff --git a/demo/package.json b/demo/package.json
@@ -31,7 +31,7 @@
   "dependencies": {
     "@diplodoc/components": "^3.0.0-alpha-7",
     "@doc-tools/transform": "^3.10.3",
-    "@gravity-ui/uikit": "^5.10.0",
+    "@gravity-ui/uikit": "^6.0.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -75,7 +75,7 @@
   },
   "dependencies": {
     "@gravity-ui/icons": "^2.5.0",
-    "@gravity-ui/uikit": "^5.24.0",
+    "@gravity-ui/uikit": "^6.0.0",
     "@popperjs/core": "^2.11.2",
     "bem-cn-lite": "4.1.0",
     "i18next": "^19.9.2",

diff --git a/src/components/Controls/single-controls/SettingsControl/SettingsControl.scss b/src/components/Controls/single-controls/SettingsControl/SettingsControl.scss
@@ -41,7 +41,7 @@
         padding: 4px 0;
         width: 230px;
 
-        .yc-list__item_active {
+        .g-list__item_active {
             background: transparent;
         }
     }

diff --git a/src/components/DocPage/DocPage.tsx b/src/components/DocPage/DocPage.tsx
@@ -1,6 +1,7 @@
 import React, {ReactPortal} from 'react';
 
 import {Link} from '@gravity-ui/icons';
+import {ThemeProvider} from '@gravity-ui/uikit';
 import block from 'bem-cn-lite';
 import {createPortal} from 'react-dom';
 
@@ -133,6 +134,7 @@ class DocPage extends React.Component<DocPageInnerProps, DocPageState> {
             footer,
             onChangeSinglePage,
             pdfLink,
+            theme,
         } = this.props;
 
         const hideMiniToc = !this.showMiniToc;
@@ -144,50 +146,52 @@ class DocPage extends React.Component<DocPageInnerProps, DocPageState> {
         };
 
         return (
-            <DocLayout
-                toc={toc}
-                router={router}
-                headerHeight={headerHeight}
-                className={b(modes)}
-                fullScreen={fullScreen}
-                hideRight={hideMiniToc}
-                tocTitleIcon={tocTitleIcon}
-                wideFormat={wideFormat}
-                hideTocHeader={hideTocHeader}
-                hideToc={hideToc}
-                loading={this.state.loading}
-                footer={footer}
-                singlePage={singlePage}
-                onChangeSinglePage={onChangeSinglePage}
-                pdfLink={pdfLink}
-            >
-                <DocLayout.Center>
-                    {this.renderSearchBar()}
-                    {this.renderBreadcrumbs()}
-                    {this.renderControls()}
-                    <div className={b('main')}>
-                        <main className={b('content')}>
-                            {this.renderTitle()}
-                            {this.renderPageContributors()}
-                            {hideMiniToc ? null : this.renderContentMiniToc()}
-                            {this.renderBody()}
-                            {this.renderFeedback()}
-                        </main>
-                        {this.renderTocNavPanel()}
-                    </div>
-                    {this.renderLoader()}
-                    {this.renderSinglePageControls()}
-                </DocLayout.Center>
-                <DocLayout.Right>
-                    {/* This key allows recalculating the offset for the mini-toc for Safari */}
-                    <div
-                        className={b('aside')}
-                        key={getStateKey(this.showMiniToc, wideFormat, singlePage)}
-                    >
-                        {hideMiniToc ? null : this.renderAsideMiniToc()}
-                    </div>
-                </DocLayout.Right>
-            </DocLayout>
+            <ThemeProvider theme={theme}>
+                <DocLayout
+                    toc={toc}
+                    router={router}
+                    headerHeight={headerHeight}
+                    className={b(modes)}
+                    fullScreen={fullScreen}
+                    hideRight={hideMiniToc}
+                    tocTitleIcon={tocTitleIcon}
+                    wideFormat={wideFormat}
+                    hideTocHeader={hideTocHeader}
+                    hideToc={hideToc}
+                    loading={this.state.loading}
+                    footer={footer}
+                    singlePage={singlePage}
+                    onChangeSinglePage={onChangeSinglePage}
+                    pdfLink={pdfLink}
+                >
+                    <DocLayout.Center>
+                        {this.renderSearchBar()}
+                        {this.renderBreadcrumbs()}
+                        {this.renderControls()}
+                        <div className={b('main')}>
+                            <main className={b('content')}>
+                                {this.renderTitle()}
+                                {this.renderPageContributors()}
+                                {hideMiniToc ? null : this.renderContentMiniToc()}
+                                {this.renderBody()}
+                                {this.renderFeedback()}
+                            </main>
+                            {this.renderTocNavPanel()}
+                        </div>
+                        {this.renderLoader()}
+                        {this.renderSinglePageControls()}
+                    </DocLayout.Center>
+                    <DocLayout.Right>
+                        {/* This key allows recalculating the offset for the mini-toc for Safari */}
+                        <div
+                            className={b('aside')}
+                            key={getStateKey(this.showMiniToc, wideFormat, singlePage)}
+                        >
+                            {hideMiniToc ? null : this.renderAsideMiniToc()}
+                        </div>
+                    </DocLayout.Right>
+                </DocLayout>
+            </ThemeProvider>
         );
     }
 

diff --git a/src/styles/yfm.scss b/src/styles/yfm.scss
@@ -219,7 +219,7 @@
     /* stylelint-enable declaration-no-important */
 }
 
-.yc-root_theme_dark .dc-doc-page .yfm {
+.g-root_theme_dark .dc-doc-page .yfm {
     .yfm-cut-title:before {
         background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggc3Ryb2tlPSJyZ2JhKDI1NSwgMjU1LCAyNTUsIDAuNykiIGZpbGw9Im5vbmUiIGQ9Ik0zIDZsNSA1IDUtNSI+PC9wYXRoPjwvc3ZnPg==');
     }

diff --git a/src/themes/common/dark-hc.scss b/src/themes/common/dark-hc.scss
@@ -1,4 +1,4 @@
-@mixin yc-colors-private-dark-hc {
+@mixin g-colors-private-dark-hc {
     --g-color-private-white-50: rgba(255, 255, 255, 0.05);
     --g-color-private-white-70: rgba(255, 255, 255, 0.07);
     --g-color-private-white-100: rgba(255, 255, 255, 0.1);

diff --git a/src/themes/common/dark.scss b/src/themes/common/dark.scss
@@ -1,4 +1,4 @@
-@mixin yc-colors-private-dark {
+@mixin g-colors-private-dark {
     --g-color-private-white-20: rgba(255, 255, 255, 0.02);
     --g-color-private-white-50: rgba(255, 255, 255, 0.05);
     --g-color-private-white-70: rgba(255, 255, 255, 0.07);