feat(!): uikit update (#207)

* fix: use direction

* fix: storybook

* chore: lint

* chore: chore: readme & context direction

README.md

@@ -16,6 +16,9 @@ Append js
 // In most cases append transform runtime
 import "@doc-tools/transform/dist/js/yfm.js";
 
+import {createRoot} from 'react-dom/client';
+import {ThemeProvider} from '@gravity-ui/uikit';
+
 // configure components
 import {configure as configureUikit} from '@gravity-ui/uikit';
 import {configure as configureDocs} from '@diplodoc/components';
@@ -28,6 +31,14 @@ configureDocs({
     // optionally configure allowed translations
     loc: {ru, en, tr, ...}
 })
+
+// The theme must be applied. To do that wrap your app in ThemeProvider
+const root = createRoot(document.getElementById('root'));
+root.render(
+    <ThemeProvider theme="light">
+        <App />
+    </ThemeProvider>,
+);
 ```
 
 Append css

demo/.storybook/decorators/withTheme.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import type {Decorator} from '@storybook/react';
+import {ThemeProvider} from '@gravity-ui/uikit';
+
+export const WithTheme: Decorator = (Story, context) => {
+    return (
+        <ThemeProvider theme={context.globals.theme} direction={context.globals.direction}>
+            <Story />
+        </ThemeProvider>
+    );
+};

demo/.storybook/preview.ts

@@ -1,9 +1,12 @@
 /** @type { import('@storybook/react').Preview } */
-import { Preview } from '@storybook/react';
+import type {Preview} from '@storybook/react';
+
+import {WithTheme} from './decorators/withTheme';
 
 import './global.css';
 
 const preview: Preview = {
+    decorators: [WithTheme],
     parameters: {
         actions: {argTypesRegex: '^on[A-Z].*'},
         controls: {

demo/package.json

@@ -14,24 +14,23 @@
     "@babel/preset-env": "^7.22.14",
     "@babel/preset-react": "^7.22.5",
     "@babel/preset-typescript": "^7.22.11",
-    "@storybook/addon-essentials": "^7.4.0",
-    "@storybook/addon-interactions": "^7.4.0",
+    "@storybook/addon-essentials": "^7.6.17",
+    "@storybook/addon-interactions": "^7.6.17",
     "@storybook/addon-knobs": "^7.0.2",
-    "@storybook/addon-links": "^7.4.0",
+    "@storybook/addon-links": "^7.6.17",
     "@storybook/addon-onboarding": "^1.0.8",
     "@storybook/addon-styling": "^1.3.7",
-    "@storybook/blocks": "^7.4.0",
-    "@storybook/react": "^7.4.0",
-    "@storybook/react-webpack5": "^7.4.0",
+    "@storybook/blocks": "^7.6.17",
+    "@storybook/react": "^7.6.17",
+    "@storybook/react-webpack5": "^7.6.17",
     "@storybook/testing-library": "^0.2.0",
     "@svgr/webpack": "^8.1.0",
     "sass": "^1.66.1",
-    "storybook": "^7.4.0"
+    "storybook": "^7.6.17"
   },
   "dependencies": {
-    "@diplodoc/components": "^3.0.0-alpha-7",
+    "@diplodoc/components": "^3.10.0-beta.0",
     "@doc-tools/transform": "^3.10.3",
-    "@gravity-ui/uikit": "^6.0.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

package.json

@@ -75,7 +75,7 @@
   },
   "dependencies": {
     "@gravity-ui/icons": "^2.5.0",
-    "@gravity-ui/uikit": "^6.0.0",
+    "@gravity-ui/uikit": "6.0.0",
     "@popperjs/core": "^2.11.2",
     "bem-cn-lite": "4.1.0",
     "i18next": "^19.9.2",

src/components/Control/Control.tsx

@@ -1,10 +1,11 @@
 import React, {forwardRef, useCallback, useImperativeHandle, useRef} from 'react';
 
-import {Button, ButtonProps, Popup} from '@gravity-ui/uikit';
+import {Button, ButtonProps, Popup, useDirection} from '@gravity-ui/uikit';
 import block from 'bem-cn-lite';
 
 import {PopperPosition, usePopupState} from '../../hooks';
 import {ControlSizes} from '../../models';
+import {getPopupPosition} from '../../utils';
 
 import './Control.scss';
 
@@ -57,14 +58,15 @@ const Control = forwardRef((props: ControlProps, ref) => {
     const controlRef = useRef<HTMLButtonElement | null>(null);
 
     const popupState = usePopupState({autoclose: 3000});
+    const direction = useDirection();
 
     const getTooltipAlign = useCallback(() => {
         if (popupPosition) {
             return popupPosition;
         }
 
-        return isVerticalView ? PopperPosition.LEFT_START : PopperPosition.BOTTOM_END;
-    }, [isVerticalView, popupPosition]);
+        return getPopupPosition(isVerticalView, direction);
+    }, [isVerticalView, popupPosition, direction]);
 
     useImperativeHandle(ref, () => controlRef.current, [controlRef]);
 

src/components/Controls/Controls.scss

@@ -41,9 +41,6 @@
 
         @include focusable(-2px);
 
-        [dir='rtl'] & {
-            flex-direction: row-reverse;
-        }
     }
 
     &__icon-rotated {

src/components/Controls/single-controls/LangControl.tsx

@@ -7,11 +7,10 @@ import allLangs from 'langs';
 
 import {usePopupState, useTranslation} from '../../../hooks';
 import {Lang} from '../../../models';
+import {getPopupPosition} from '../../../utils';
 import {Control} from '../../Control';
 import {ControlsLayoutContext} from '../ControlsLayout';
 
-import {getPopupPosition} from './utils';
-
 import '../Controls.scss';
 
 const ICONS: Record<string, string> = {

src/components/Controls/single-controls/SettingsControl/SettingsControl.scss

@@ -5,9 +5,6 @@
         display: flex;
         align-items: center;
 
-        [dir='rtl'] & {
-            flex-direction: row-reverse;
-        }
     }
 
     &__text-size-button {
@@ -55,9 +52,6 @@
         padding: 12px;
         width: 100%;
 
-        [dir='rtl'] & {
-            flex-direction: row-reverse;
-        }
     }
 
     &__list-item-description {

src/components/Controls/single-controls/SettingsControl/SettingsControl.tsx

@@ -1,14 +1,14 @@
 import React, {ReactElement, useCallback, useContext, useRef, useState} from 'react';
 
 import {Gear} from '@gravity-ui/icons';
-import {Button, List, Popover, Switch} from '@gravity-ui/uikit';
+import {Button, List, Popover, Switch, useDirection} from '@gravity-ui/uikit';
 import cn from 'bem-cn-lite';
 
 import {useTranslation} from '../../../../hooks';
 import {TextSizes, Theme} from '../../../../models';
+import {getPopupPosition} from '../../../../utils';
 import {Control} from '../../../Control';
 import {ControlsLayoutContext} from '../../ControlsLayout';
-import {getPopupPosition} from '../utils';
 
 import './SettingsControl.scss';
 
@@ -52,6 +52,8 @@ const SettingsControl = (props: ControlProps) => {
     } = props;
 
     const controlRef = useRef<HTMLButtonElement | null>(null);
+    const direction = useDirection();
+
     const [isVisiblePopup, setIsVisiblePopup] = useState(false);
     const showPopup = () => setIsVisiblePopup(true);
     const hidePopup = () => setIsVisiblePopup(false);
@@ -175,7 +177,7 @@ const SettingsControl = (props: ControlProps) => {
             restoreFocusRef={controlRef}
             onCloseClick={hidePopup}
             onOpenChange={setIsVisiblePopup}
-            placement={getPopupPosition(isVerticalView)}
+            placement={getPopupPosition(isVerticalView, direction)}
             className={controlClassName}
             contentClassName={b('popup')}
             tooltipClassName={b('popup-tooltip')}

src/components/DocPage/DocPage.tsx

@@ -1,7 +1,6 @@
 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';
 
@@ -138,7 +137,6 @@ class DocPage extends React.Component<DocPageInnerProps, DocPageState> {
             footer,
             onChangeSinglePage,
             pdfLink,
-            theme,
         } = this.props;
 
         const hideMiniToc = !this.showMiniToc;
@@ -150,52 +148,50 @@ class DocPage extends React.Component<DocPageInnerProps, DocPageState> {
         };
 
         return (
-            <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>
+            <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>
         );
     }
 

src/components/Feedback/controls/DislikeVariantsPopup.tsx

@@ -11,10 +11,11 @@ import React, {
     useState,
 } from 'react';
 
-import {Button, Checkbox, Popup, TextArea} from '@gravity-ui/uikit';
+import {Button, Checkbox, Popup, TextArea, useDirection} from '@gravity-ui/uikit';
 import block from 'bem-cn-lite';
 
 import {PopperPosition, useTranslation} from '../../../hooks';
+import {getPopupPosition} from '../../../utils';
 import {ControlsLayoutContext} from '../../Controls/ControlsLayout';
 import {FeedbackView} from '../Feedback';
 
@@ -131,13 +132,15 @@ const DislikeVariantsPopup: React.FC<DislikeVariantsPopupProps> = memo(
     ({anchor, visible, view, onOutsideClick, onSubmit}) => {
         const {t} = useTranslation('feedback');
         const {isVerticalView} = useContext(ControlsLayoutContext);
+        const direction = useDirection();
+
         const position = useMemo(() => {
             if (!view || view === FeedbackView.Regular) {
-                return isVerticalView ? PopperPosition.LEFT_START : PopperPosition.BOTTOM_END;
+                return getPopupPosition(isVerticalView, direction);
             }
 
             return PopperPosition.RIGHT;
-        }, [isVerticalView, view]);
+        }, [isVerticalView, view, direction]);
 
         const feedbackComment = useRef<FormPart<string> | null>(null);
         const feedbackCheckboxes = useRef<FormPart<string[]> | null>(null);

src/components/Feedback/controls/SuccessPopup.tsx

@@ -1,9 +1,10 @@
 import React, {RefObject, memo, useContext, useMemo} from 'react';
 
-import {Popup} from '@gravity-ui/uikit';
+import {Popup, useDirection} from '@gravity-ui/uikit';
 import block from 'bem-cn-lite';
 
 import {PopperPosition, useTranslation} from '../../../hooks';
+import {getPopupPosition} from '../../../utils';
 import {ControlsLayoutContext} from '../../Controls/ControlsLayout';
 import {FeedbackView} from '../Feedback';
 
@@ -19,13 +20,15 @@ const b = block('dc-feedback');
 const SuccessPopup = memo<SuccessPopupProps>(({visible, anchor, onOutsideClick, view}) => {
     const {t} = useTranslation('feedback');
     const {isVerticalView} = useContext(ControlsLayoutContext);
+    const direction = useDirection();
+
     const position = useMemo(() => {
         if (!view || view === FeedbackView.Regular) {
-            return isVerticalView ? PopperPosition.LEFT_START : PopperPosition.BOTTOM_END;
+            return getPopupPosition(isVerticalView, direction);
         }
 
         return PopperPosition.RIGHT;
-    }, [isVerticalView, view]);
+    }, [isVerticalView, view, direction]);
 
     return (
         <Popup