wip

demo/src/.eslintrc

@@ -0,0 +1,3 @@
+{
+    "extends": "@gravity-ui/eslint-config/client"
+}

demo/src/Components/DocLeadingPage/index.tsx

@@ -1,6 +1,7 @@
+import React, {useState} from 'react';
+
 import {DEFAULT_SETTINGS, DocLeadingPage, DocLeadingPageData} from '@doc-tools/components';
 import cn from 'bem-cn-lite';
-import React, {useState} from 'react';
 
 import getLangControl from '../../controls/lang';
 import {getIsMobile} from '../../controls/settings';

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

@@ -1,8 +1,6 @@
-import React, {useCallback, useEffect, useState} from 'react';
 import {join} from 'path';
 
-import cn from 'bem-cn-lite';
-import {configure as configureUikit} from '@gravity-ui/uikit';
+import React, {useCallback, useEffect, useState} from 'react';
 
 import {
     DEFAULT_SETTINGS,
@@ -12,6 +10,8 @@ import {
     Theme,
     configure as configureDocs,
 } from '@doc-tools/components';
+import {configure as configureUikit} from '@gravity-ui/uikit';
+import cn from 'bem-cn-lite';
 
 import {getIsMobile} from '../../controls/settings';
 import getVcsControl from '../../controls/vcs';

demo/src/Components/ErrorPage/index.tsx

@@ -1,6 +1,7 @@
+import React from 'react';
+
 import {ERROR_CODES, ErrorPage} from '@doc-tools/components';
 import {radios, text} from '@storybook/addon-knobs';
-import React from 'react';
 
 import getLangControl from '../../controls/lang';
 import {getIsMobile} from '../../controls/settings';

demo/src/Components/Header/Header.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import {
     ControlSizes,
     DividerControl,
@@ -7,7 +9,6 @@ import {
 } from '@doc-tools/components';
 import {TextInput} from '@gravity-ui/uikit';
 import cn from 'bem-cn-lite';
-import React from 'react';
 
 import './Header.scss';
 

demo/src/Components/Paginator/index.tsx

@@ -1,6 +1,7 @@
-import {Paginator} from '@doc-tools/components';
 import React, {useState} from 'react';
 
+import {Paginator} from '@doc-tools/components';
+
 const PaginatorDemo = () => {
     const [page, setPage] = useState(1);
 

demo/src/Components/SearchItem/index.tsx

@@ -1,6 +1,7 @@
-import {SearchItem} from '@doc-tools/components';
 import React from 'react';
 
+import {SearchItem} from '@doc-tools/components';
+
 import data from './page.json';
 
 const SearchItemDemo = () => {

demo/src/Components/SearchPage/index.tsx

@@ -1,6 +1,7 @@
-import {ISearchItem, SearchPage} from '@doc-tools/components';
 import React, {useState} from 'react';
 
+import {ISearchItem, SearchPage} from '@doc-tools/components';
+
 import getLangControl from '../../controls/lang';
 import {getIsMobile} from '../../controls/settings';
 

package.json

@@ -3,7 +3,7 @@
   "description": "React components for drawing Diplodoc documentation",
   "author": "YFM Team <[email protected]>",
   "license": "MIT",
-  "version": "3.0.0-alpha-1",
+  "version": "3.0.0-alpha-4",
   "repository": {
     "type": "git",
     "url": "[email protected]:yandex-cloud/docs-components.git"

src/components/Controls/Controls.scss

@@ -39,8 +39,6 @@
     }
 
     @media (min-width: map-get($screenBreakpoints, 'md')) {
-        right: 0;
-
         &_vertical {
             flex-direction: column;
         }

src/components/DocPage/DocPage.scss

@@ -48,7 +48,7 @@
 
     &__controls {
         display: flex;
-        top: var(--dc-header-height, #{$headerHeight});
+        top: 0;
         align-items: center;
         height: 40px;
         z-index: 102;

src/components/TocNavPanel/TocNavPanel.tsx

@@ -55,12 +55,12 @@ function getBoundingItems(flatToc: FlatTocItem[], router: Router) {
     };
 }
 
-const TocNavControl = memo<{isNext?: boolean; item: FlatTocItem}>(({item, isNext}) => {
+const TocNavControl = memo<{isNext?: boolean; item: FlatTocItem | null}>(({item, isNext}) => {
     const {t} = useTranslation('toc-nav-panel');
     const keyHint = isNext ? 'hint_next' : 'hint_previous';
-    const isExternal = isExternalHref(item.href);
+    const isExternal = item && isExternalHref(item.href);
     const linkAttributes = {
-        href: item.href,
+        href: item?.href,
         target: isExternal ? '_blank' : '_self',
         rel: isExternal ? 'noopener noreferrer' : undefined,
     };
@@ -99,8 +99,8 @@ const TocNavPanel = memo<TocNavPanelProps>(({items, router, fixed, className}) =
     return (
         <div className={b({fixed}, className)}>
             <div className={b('content')}>
-                {prevItem && <TocNavControl item={prevItem} />}
-                {nextItem && <TocNavControl item={nextItem} isNext={true} />}
+                {<TocNavControl item={prevItem} />}
+                {<TocNavControl item={nextItem} isNext={true} />}
             </div>
         </div>
     );

src/internal-typings/global.d.ts

@@ -1,3 +1,10 @@
+declare module 'url' {
+    export const parse: (href: string) => {
+        hash?: string;
+        pathname?: string;
+    };
+}
+
 declare module '*.svg' {
     const content: SVGIconData;
 

tsconfig.esm.json

@@ -3,7 +3,7 @@
   "compilerOptions": {
     "module": "ESNext",
     "target": "ES2017",
-    "outDir": "build/cjs",
+    "outDir": "build/esm",
   },
   "include": ["src/**/*.ts", "src/**/*.tsx"]
 }