fix: Update @diplodoc/components

package.json

@@ -1,14 +1,13 @@
 {
   "name": "@diplodoc/client",
-  "version": "0.0.14",
+  "version": "1.0.0",
   "description": "",
   "main": "build/app.server.js",
   "scripts": {
     "lint": "eslint \"src/**/*.{js,jsx,ts,tsx}\"",
     "lint:fix": "npm run lint -- --fix",
     "build": "webpack && tsc --emitDeclarationOnly --outDir build",
-    "prepublishOnly": "rm -rf build && npm ci && npm run build",
-    "git:head": "git checkout master && git pull"
+    "prepublishOnly": "rm -rf build && npm ci && npm run build"
   },
   "author": "",
   "license": "ISC",
@@ -23,11 +22,11 @@
     "./styles": "./build/app.client.css"
   },
   "dependencies": {
+    "@diplodoc/components": "^3.1.0",
     "@diplodoc/mermaid-extension": "^1.1.1",
     "@diplodoc/openapi-extension": "^1.2.3",
-    "@doc-tools/components": "^2.8.2",
-    "@doc-tools/transform": "^3.11.0",
-    "@gravity-ui/uikit": "^4.14.0",
+    "@diplodoc/transform": "^4.1.0",
+    "@gravity-ui/uikit": "^5.17.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "url": "^0.11.0"
@@ -60,10 +59,5 @@
     "webpack": "^5.84.1",
     "webpack-bundle-analyzer": "^4.9.0",
     "webpack-cli": "^5.1.1"
-  },
-  "overrides": {
-    "@doc-tools/transform": "^3.6.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
   }
 }

src/components/App/App.scss

@@ -1,9 +1,16 @@
+@import '@diplodoc/transform/dist/css/yfm.css';
+@import '@diplodoc/components';
+@import '@diplodoc/components/themes/common';
+@import '@diplodoc/openapi-extension/runtime/styles';
+@import '../../styles/default.scss';
+@import '../../styles/typography.scss';
+
 .App {
     margin: 0;
     min-height: 100vh;
 }
 
-.yc-root {
+.g-root {
     --dc-header-height: 0px;
-    --mermaid-zoom-control-color: var(--yc-color-text-primary);
+    --mermaid-zoom-control-color: var(--g-color-text-primary);
 }

src/components/App/App.tsx

@@ -9,20 +9,15 @@ import {
     Router,
     TextSizes,
     Theme,
-} from '@doc-tools/components';
+} from '@diplodoc/components';
 import {getDocSettings, updateRootClassName, withSavingSetting} from '../../utils';
 
 import '../../interceptors/leading-page-links';
 
-import '@doc-tools/transform/dist/js/yfm';
+import '@diplodoc/transform/dist/js/yfm';
 import {MermaidRuntime} from '@diplodoc/mermaid-extension/react';
 import {Runtime as OpenapiSandbox} from '@diplodoc/openapi-extension/runtime';
 
-import '@diplodoc/openapi-extension/runtime/styles';
-import '@doc-tools/components/styles/themes.scss';
-import '@doc-tools/components/styles/default.scss';
-import '@doc-tools/components/styles/typography.scss';
-import '@doc-tools/transform/dist/css/yfm.css';
 import './App.scss';
 
 export interface AppProps {

src/styles/default.scss

@@ -0,0 +1,38 @@
+*,
+*::before,
+*::after {
+    box-sizing: inherit;
+}
+
+html,
+body {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+
+    --dc-header-height: 0;
+    --dc-subheader-height: 40px;
+
+    --dc-error-image-403: url('data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=');
+    --dc-error-image-404: url('data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=');
+    --dc-error-image-500: url('data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=');
+
+    .g-root {
+        --g-scrollbar-width: 6px;
+
+        &::-webkit-scrollbar,
+        *::-webkit-scrollbar {
+            height: var(--g-scrollbar-width);
+            background: transparent;
+        }
+
+        &::-webkit-scrollbar-track,
+        *::-webkit-scrollbar-track {
+            background: transparent;
+        }
+    }
+}
+
+#root {
+    min-height: 100vh;
+}

src/styles/mixins.scss

@@ -0,0 +1,114 @@
+@import './variables';
+
+@mixin text-size($name) {
+    font-size: var(--yc-text-#{$name}-font-size);
+    line-height: var(--yc-text-#{$name}-line-height);
+}
+
+@mixin reset-list-style() {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+@mixin fixAnchorPosition($offset: 0px) {
+    padding-top: calc(var(--dc-header-height, #{$headerHeight}));
+    margin-top: calc(#{$offset} - var(--dc-header-height, #{$headerHeight}));
+}
+
+@mixin reset-link-style() {
+    color: inherit;
+    text-decoration: none;
+}
+
+@mixin islands-focus() {
+    outline: none;
+
+    .utilityfocus &:focus {
+        outline: 2px solid #ffdb4d;
+    }
+}
+
+@mixin link() {
+    @include islands-focus();
+
+    color: var(--yc-color-text-link);
+    text-decoration: none;
+    cursor: pointer;
+
+    &:hover,
+    &:active {
+        color: var(--yc-color-text-link-hover);
+    }
+}
+
+@mixin heading1() {
+    @include text-size(display-3);
+    font-weight: 500;
+
+    @media (max-width: map-get($screenBreakpoints, 'md') - 1) {
+        @include text-size(display-2);
+    }
+}
+
+@mixin heading2() {
+    @include text-size(display-1);
+    font-weight: 500;
+}
+
+@mixin heading3() {
+    @include text-size(header-2);
+    font-weight: 500;
+}
+
+@mixin heading4() {
+    @include text-size(header-1);
+    font-weight: 500;
+}
+
+@mixin heading5() {
+    @include text-size(body-3);
+    font-weight: 500;
+}
+
+@mixin heading6() {
+    @include text-size(body-3);
+    font-weight: 400;
+}
+
+@mixin contributors-text() {
+    font-size: 13px;
+    font-weight: 400;
+    margin-right: 5px;
+    align-self: center;
+}
+
+@mixin text-body-1() {
+    font-size: var(--yc-text-body-1-font-size);
+    line-height: var(--yc-text-body-1-line-height);
+    font-weight: var(--yc-text-body-font-weight);
+}
+
+@mixin desktop-only() {
+    @media (max-width: map-get($screenBreakpoints, 'md') - 1) {
+        display: none;
+    }
+}
+
+@mixin desktop-tablet-only() {
+    @media (max-width: map-get($screenBreakpoints, 'sm') - 1) {
+        display: none;
+    }
+}
+
+@mixin mobile-tablet-only() {
+    @media (min-width: map-get($screenBreakpoints, 'md')) {
+        display: none;
+    }
+}
+
+@mixin mobile-only() {
+    @media (min-width: map-get($screenBreakpoints, 'sm')) {
+        display: none;
+    }
+}

src/styles/typography.scss

@@ -0,0 +1,62 @@
+@import './variables';
+@import './mixins';
+
+body.g-root {
+    font-feature-settings: 'liga', 'kern';
+    text-size-adjust: 100%;
+
+    /* stylelint-disable-next-line value-keyword-case */
+    text-rendering: optimizeLegibility;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    margin: 0;
+}
+
+h1 {
+    @include heading1();
+}
+
+h2 {
+    @include heading2();
+}
+
+h3 {
+    @include heading3();
+}
+
+h4 {
+    @include heading4();
+}
+
+h5 {
+    @include heading5();
+}
+
+h6 {
+    @include heading6();
+}
+
+p,
+div.p {
+    margin: 0 0 20px;
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+}
+
+sub,
+sup {
+    font-size: 0.75em;
+    line-height: 0;
+}
+
+a {
+    @include link();
+}

src/styles/variables.scss

@@ -0,0 +1,18 @@
+// Sizes
+$headerHeight: 0px;
+$normalOffset: 20px;
+$miniTocOffset: 56px;
+$blockMarginBottomLarge: 20px;
+$blockMarginBottomMedium: 15px;
+$headerMarginTopLarge: 40px;
+$headerMarginTopMedium: 32px;
+$popupPadding: 16px;
+$centerBlockMaxWidth: 736px;
+
+$screenBreakpoints: (
+    'xs': 375px,
+    'sm': 577px,
+    'md': 769px,
+    'lg': 1081px,
+    'xl': 1185px,
+);

src/utils.ts

@@ -1,4 +1,4 @@
-import {TextSizes, Theme} from '@doc-tools/components';
+import {TextSizes, Theme} from '@diplodoc/components';
 
 const DEFAULT_USER_SETTINGS = {
     theme: Theme.Light,
@@ -63,8 +63,8 @@ export function withSavingSetting<T>(settingName: string, onChange: (value: T) =
 }
 
 export function updateRootClassName(theme: Theme, isMobile = false) {
-    const themeClassName = theme === 'light' ? 'yc-root_theme_light' : 'yc-root_theme_dark';
+    const themeClassName = theme === 'light' ? 'g-root_theme_light' : 'g-root_theme_dark';
     const mobileClassName = isMobile ? 'mobile' : '';
 
-    document.body.className = `yc-root ${themeClassName} ${mobileClassName}`;
+    document.body.className = `g-root ${themeClassName} ${mobileClassName}`;
 }

webpack.config.js

@@ -22,7 +22,7 @@ function config({isServer}) {
             },
             extensions: ['.tsx', '.ts', '.js', '.scss'],
         },
-        externals: isServer ? ['@doc-tools/transform/dist/js/yfm'] : [],
+        externals: isServer ? ['@diplodoc/transform/dist/js/yfm'] : [],
         plugins: [
             new DefinePlugin({
                 'process.env': {