feat!: support configure (#95)

* feat!: support configure, add props for overriding default texts instead of dict * fix: tune rollup config * fix(AsideHeader): fix default texts * chore: remove useless option
gravity-ui · Aug 23, 2023 · c0140a7 · c0140a7
1 parent d84fd93
commit c0140a7
Show file tree

Hide file tree

Showing 30 changed files with 163 additions and 96 deletions.
diff --git a/.storybook/decorators/withLang.tsx b/.storybook/decorators/withLang.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import type {Decorator} from '@storybook/react';
-import {Lang, configure} from '../../src/components/utils/configure';
+import {Lang, configure} from '../../src';
 
 export const withLang: Decorator = (Story, context) => {
     const lang = context.globals.lang;

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -5,7 +5,7 @@ import React from 'react';
 import type {Decorator, Preview} from '@storybook/react';
 import {ThemeProvider, MobileProvider, Lang, configure as uiKitConfigure} from '@gravity-ui/uikit';
 import {configure as componentsConfigure} from '@gravity-ui/components';
-import {configure} from '../src/components/utils/configure';
+import {configure} from '../src';
 import {withMobile} from './decorators/withMobile';
 import {withLang} from './decorators/withLang';
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -31,6 +31,7 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
+    "@gravity-ui/i18n": "^1.1.0",
     "react-transition-group": "^4.4.1",
     "tslib": "^2.4.0"
   },

diff --git a/src/components/AsideHeader/AsideHeader.tsx b/src/components/AsideHeader/AsideHeader.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import {block} from '../utils/cn';
 
-import {MenuItem, AsideHeaderDict, Dict, LogoProps, SubheaderMenuItem} from '../types';
+import {MenuItem, LogoProps, SubheaderMenuItem} from '../types';
 
-import {ASIDE_HEADER_COMPACT_WIDTH, ASIDE_HEADER_EXPANDED_WIDTH, defaultDict} from '../constants';
+import {ASIDE_HEADER_COMPACT_WIDTH, ASIDE_HEADER_EXPANDED_WIDTH} from '../constants';
 
 import {Button, Icon} from '@gravity-ui/uikit';
 
@@ -12,6 +12,7 @@ import {Logo} from '../Logo/Logo';
 import {CompositeBar} from '../CompositeBar/CompositeBar';
 import {Content, RenderContentType} from '../Content';
 import {fakeDisplayName} from '../helpers';
+import i18n from './i18n';
 
 import controlMenuButtonIcon from '../../../assets/icons/control-menu-button.svg';
 import headerDividerCollapsedIcon from '../../../assets/icons/divider-collapsed.svg';
@@ -29,8 +30,10 @@ interface AsideHeaderGeneralProps {
     logo: LogoProps;
     compact: boolean;
     multipleTooltip?: boolean;
-    dict?: AsideHeaderDict;
     className?: string;
+    collapseTitle?: string;
+    expandTitle?: string;
+    menuMoreTitle?: string;
     renderContent?: RenderContentType;
     renderFooter?: (data: {
         size: number;
@@ -82,7 +85,8 @@ export class AsideHeader extends React.Component<AsideHeaderInnerProps> {
     }
 
     private renderFirstPane = (size: number) => {
-        const {dict, menuItems, panelItems, headerDecoration, multipleTooltip} = this.props;
+        const {menuItems, panelItems, headerDecoration, multipleTooltip, menuMoreTitle} =
+            this.props;
 
         return (
             <React.Fragment>
@@ -94,7 +98,7 @@ export class AsideHeader extends React.Component<AsideHeaderInnerProps> {
                             <CompositeBar
                                 type="menu"
                                 items={menuItems}
-                                dict={dict}
+                                menuMoreTitle={menuMoreTitle ?? i18n('label_more')}
                                 onItemClick={this.onItemClick}
                                 multipleTooltip={multipleTooltip}
                             />
@@ -174,15 +178,17 @@ export class AsideHeader extends React.Component<AsideHeaderInnerProps> {
     };
 
     private renderCollapseButton = () => {
-        const {dict, compact} = this.props;
-        const typeButton = compact ? Dict.ExpandButton : Dict.CollapseButton;
+        const {expandTitle, collapseTitle, compact} = this.props;
+        const buttonTitle = compact
+            ? expandTitle || i18n('button_expand')
+            : collapseTitle || i18n('button_collapse');
 
         return (
             <Button
                 className={b('collapse-button', {compact})}
                 view="flat"
                 onClick={this.onCollapseButtonClick}
-                title={dict?.[typeButton] ?? defaultDict[typeButton]}
+                title={buttonTitle}
             >
                 <NotIcon
                     data={controlMenuButtonIcon}

diff --git a/src/components/AsideHeader/i18n/en.json b/src/components/AsideHeader/i18n/en.json
@@ -0,0 +1,5 @@
+{
+  "button_collapse": "Collapse",
+  "button_expand": "Expand",
+  "label_more": "More"
+}
diff --git a/src/components/AsideHeader/i18n/index.ts b/src/components/AsideHeader/i18n/index.ts
@@ -0,0 +1,7 @@
+import {registerKeyset} from '../../utils/registerKeyset';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const COMPONENT = 'AsideHeader';
+export default registerKeyset({en, ru}, COMPONENT);
diff --git a/src/components/AsideHeader/i18n/ru.json b/src/components/AsideHeader/i18n/ru.json
@@ -0,0 +1,5 @@
+{
+  "button_collapse": "Свернуть",
+  "button_expand": "Развернуть",
+  "label_more": "Ещё"
+}
diff --git a/src/components/CompositeBar/CompositeBar.tsx b/src/components/CompositeBar/CompositeBar.tsx
@@ -3,7 +3,7 @@ import AutoSizer, {Size} from 'react-virtualized-auto-sizer';
 import {List} from '@gravity-ui/uikit';
 
 import {block} from '../utils/cn';
-import {AsideHeaderDict, MenuItem, SubheaderMenuItem} from '../types';
+import {MenuItem, SubheaderMenuItem} from '../types';
 import {
     getItemsHeight,
     getItemHeight,
@@ -37,7 +37,7 @@ export type CompositeBarProps = CompositeBarItems & {
         event: React.MouseEvent<HTMLDivElement, MouseEvent>,
     ) => void;
     multipleTooltip?: boolean;
-    dict?: AsideHeaderDict;
+    menuMoreTitle?: string;
 };
 
 type CompositeBarViewProps = CompositeBarProps & {
@@ -192,7 +192,7 @@ const CompositeBarView: FC<CompositeBarViewProps> = ({
 export const CompositeBar: FC<CompositeBarProps> = ({
     type,
     items,
-    dict,
+    menuMoreTitle,
     onItemClick,
     multipleTooltip = false,
 }) => {
@@ -203,7 +203,7 @@ export const CompositeBar: FC<CompositeBarProps> = ({
 
     if (type === 'menu') {
         const minHeight = getItemsMinHeight(items);
-        const collapseItem = getMoreButtonItem(dict);
+        const collapseItem = getMoreButtonItem(menuMoreTitle);
         node = (
             <div className={b({autosizer: true})} style={{minHeight}}>
                 {items.length !== 0 && (

diff --git a/src/components/CompositeBar/utils.ts b/src/components/CompositeBar/utils.ts
@@ -1,7 +1,6 @@
 import {Ellipsis} from '@gravity-ui/icons';
-import {AsideHeaderDict, Dict, MenuItem} from './../types';
+import {MenuItem} from './../types';
 import {COLLAPSE_ITEM_ID, ITEM_HEIGHT} from './constants';
-import {defaultDict} from '../constants';
 import {CompositeBarItem} from '../CompositeBar/CompositeBar';
 
 export function getItemHeight(item: CompositeBarItem) {
@@ -54,12 +53,10 @@ export function getItemsMinHeight(items: MenuItem[]) {
     );
 }
 
-export function getMoreButtonItem(dict?: AsideHeaderDict): MenuItem {
-    const title = dict?.[Dict.MoreButton] ?? defaultDict[Dict.MoreButton];
-
+export function getMoreButtonItem(menuMoreTitle?: string): MenuItem {
     return {
         id: COLLAPSE_ITEM_ID,
-        title,
+        title: menuMoreTitle,
         icon: Ellipsis,
         iconSize: 18,
     };

diff --git a/src/components/MobileHeader/Burger/Burger.tsx b/src/components/MobileHeader/Burger/Burger.tsx
@@ -1,28 +1,30 @@
 import React from 'react';
 import {block} from '../../utils/cn';
 
-import {defaultDict} from '../../constants';
-
 import './Burger.scss';
 
 const b = block('mobile-header-burger');
 
-export interface BurgerProps {
+interface BurgerProps {
+    closeTitle: string;
+    openTitle: string;
     opened?: boolean;
     className?: string;
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
 }
 
-export const Burger = React.memo(({opened, className, onClick}: BurgerProps) => (
-    <button
-        className={b({opened}, className)}
-        onClick={onClick}
-        aria-label={opened ? defaultDict['button_close-burger'] : defaultDict['button_open-burger']}
-    >
-        <span className={b('icon')}>
-            <span className={b('icon-dash')}></span>
-        </span>
-    </button>
-));
+export const Burger = React.memo(
+    ({closeTitle, openTitle, opened, className, onClick}: BurgerProps) => (
+        <button
+            className={b({opened}, className)}
+            onClick={onClick}
+            aria-label={opened ? closeTitle : openTitle}
+        >
+            <span className={b('icon')}>
+                <span className={b('icon-dash')}></span>
+            </span>
+        </button>
+    ),
+);
 
 Burger.displayName = 'Burger';
diff --git a/src/components/MobileHeader/MobileHeader.tsx b/src/components/MobileHeader/MobileHeader.tsx
@@ -15,6 +15,7 @@ import {
     EVENT_NAMES,
     BURGER_PANEL_ITEM_ID,
 } from './constants';
+import i18n from './i18n';
 
 import './MobileHeader.scss';
 
@@ -31,6 +32,8 @@ interface PanelItem extends Omit<DrawerItemProps, 'visible'> {}
 export interface MobileHeaderProps {
     logo: LogoProps;
     burgerMenu: BurgerMenuProps;
+    burgerCloseTitle?: string;
+    burgerOpenTitle?: string;
     panelItems?: PanelItem[];
     renderContent?: RenderContentType;
     sideItemRenderContent?: RenderContentType;
@@ -44,6 +47,8 @@ export const MobileHeader = React.forwardRef<HTMLDivElement, MobileHeaderProps>(
         {
             logo,
             burgerMenu,
+            burgerCloseTitle = i18n('burger_button_close'),
+            burgerOpenTitle = i18n('burger_button_open'),
             panelItems = [],
             renderContent,
             sideItemRenderContent,
@@ -196,6 +201,8 @@ export const MobileHeader = React.forwardRef<HTMLDivElement, MobileHeaderProps>(
                         opened={visiblePanel === burgerPanelItem.id}
                         onClick={() => onPanelToggle(BURGER_PANEL_ITEM_ID)}
                         className={b('burger')}
+                        closeTitle={burgerCloseTitle}
+                        openTitle={burgerOpenTitle}
                     />
                     <Logo {...logo} compact={compact} onClick={onLogoClick} />
 

diff --git a/src/components/MobileHeader/i18n/en.json b/src/components/MobileHeader/i18n/en.json
@@ -0,0 +1,4 @@
+{
+  "burger_button_close": "Close menu",
+  "burger_button_open": "Open menu"
+}
diff --git a/src/components/MobileHeader/i18n/index.ts b/src/components/MobileHeader/i18n/index.ts
@@ -0,0 +1,7 @@
+import {registerKeyset} from '../../utils/registerKeyset';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const COMPONENT = 'MobileHeader';
+export default registerKeyset({en, ru}, COMPONENT);
diff --git a/src/components/MobileHeader/i18n/ru.json b/src/components/MobileHeader/i18n/ru.json
@@ -0,0 +1,4 @@
+{
+  "burger_button_close": "Закрыть меню",
+  "burger_button_open": "Открыть меню"
+}
diff --git a/src/components/Settings/README.md b/src/components/Settings/README.md
@@ -10,15 +10,18 @@ The components provides layouting functionality of settings panel with the follo
 
 #### Settings
 
-| Property       | Type               | Required | Default  | Description                                |
-| :------------- | :----------------- | :------: | :------- | :----------------------------------------- |
-| loading        | boolean            |          |          | Flag of loading status                     |
-| renderLoading  | Function           |          |          | content for loading status                 |
-| renderNotFound | Function           |          |          | Empty panel content                        |
-| initialPage    | string             |          |          | Inititial page in `/groupId/pageId` format |
-| view           | 'normal', 'mobile' |          | 'normal' | Change view for Mobile                     |
-| onPageChange   | Function           |          |          | Page change handler                        |
-| onClose        | Function           |          |          | Settings close handler                     |
+| Property          | Type               | Required | Default            | Description                                |
+| :---------------- | :----------------- | :------: | :----------------- | :----------------------------------------- |
+| loading           | boolean            |          |                    | Flag of loading status                     |
+| renderLoading     | Function           |          |                    | content for loading status                 |
+| renderNotFound    | Function           |          |                    | Empty panel content                        |
+| initialPage       | string             |          |                    | Inititial page in `/groupId/pageId` format |
+| view              | 'normal', 'mobile' |          | 'normal'           | Change view for Mobile                     |
+| onPageChange      | Function           |          |                    | Page change handler                        |
+| onClose           | Function           |          |                    | Settings close handler                     |
+| title             | string             |          | 'Settings'         | Page title                                 |
+| filterPlaceholder | string             |          | 'Search settings'  | Filter placeholder text                    |
+| emptyPlaceholder  | string             |          | 'No results found' | Filter empty text                          |
 
 #### Settings.Group