From 5bf365f3b33460b3a2ea12729cd4897273e93b9a Mon Sep 17 00:00:00 2001 From: ldrv565 <40745264+ldrv565@users.noreply.github.com> Date: Mon, 23 Oct 2023 16:14:46 +0300 Subject: [PATCH 01/11] feat: split AsideHeader to compound components --- src/components/AsideHeader/AsideHeader.scss | 4 ++ src/components/AsideHeader/AsideHeader.tsx | 69 ++++++++----------- .../AsideHeader/AsideHeaderContext.ts | 3 +- .../AsideHeader/PageLayout/PageLayout.tsx | 50 ++++++++++++++ .../PageLayout/PageLayoutAside.tsx | 19 +++++ .../__stories__/AsideHeader.stories.tsx | 33 +++++++++ src/components/AsideHeader/types.tsx | 14 +++- src/components/Content/Content.tsx | 7 +- 8 files changed, 152 insertions(+), 47 deletions(-) create mode 100644 src/components/AsideHeader/PageLayout/PageLayout.tsx create mode 100644 src/components/AsideHeader/PageLayout/PageLayoutAside.tsx diff --git a/src/components/AsideHeader/AsideHeader.scss b/src/components/AsideHeader/AsideHeader.scss index f61bf89..b8de621 100644 --- a/src/components/AsideHeader/AsideHeader.scss +++ b/src/components/AsideHeader/AsideHeader.scss @@ -202,6 +202,10 @@ $block: '.#{variables.$ns}aside-header'; flex-direction: row; } + &_reverse #{$block}__pane-container { + flex-direction: row-reverse; + } + &__content { width: calc(100% - var(--gn-aside-header-size)); z-index: 95; diff --git a/src/components/AsideHeader/AsideHeader.tsx b/src/components/AsideHeader/AsideHeader.tsx index bb971d8..adfc30b 100644 --- a/src/components/AsideHeader/AsideHeader.tsx +++ b/src/components/AsideHeader/AsideHeader.tsx @@ -1,44 +1,31 @@ -import React, {useMemo} from 'react'; +import React from 'react'; -import {Content} from '../Content'; - -import {AsideHeaderContextProvider, AsideHeaderInnerContextProvider} from './AsideHeaderContext'; import {AsideHeaderProps} from './types'; +import {PageLayout} from './PageLayout/PageLayout'; +import {PageLayoutAside} from './PageLayout/PageLayoutAside'; -import {FirstPanel} from './components'; -import {b} from './utils'; - -import './AsideHeader.scss'; -import {ASIDE_HEADER_COMPACT_WIDTH, ASIDE_HEADER_EXPANDED_WIDTH} from '../constants'; -import {useAsideHeaderInnerContextValue} from './useAsideHeaderInnerContextValue'; - -export const AsideHeader = React.forwardRef((props, ref) => { - const {className, compact} = props; - - const size = compact ? ASIDE_HEADER_COMPACT_WIDTH : ASIDE_HEADER_EXPANDED_WIDTH; - const asideHeaderContextValue = useMemo(() => ({size, compact}), [compact, size]); - const asideHeaderInnerContextValue = useAsideHeaderInnerContextValue({...props, size}); - return ( - - -
-
- {/* First Panel */} - - {/* Second Panel */} - -
-
- - - ); -}); +/** + * Simply usage of AsideHeader: + * @example + * + * + * Advanced usage of AsideHeader: + * @example + * + * + * + * + * + * + * + */ +export const AsideHeader = React.forwardRef( + ({compact, className, ...props}, ref) => { + return ( + + + + + ); + }, +); diff --git a/src/components/AsideHeader/AsideHeaderContext.ts b/src/components/AsideHeader/AsideHeaderContext.ts index 6c7a5f6..838aa57 100644 --- a/src/components/AsideHeader/AsideHeaderContext.ts +++ b/src/components/AsideHeader/AsideHeaderContext.ts @@ -5,7 +5,6 @@ import {AsideHeaderInnerProps} from './types'; export interface AsideHeaderInnerContextType extends AsideHeaderInnerProps { menuItems: MenuItem[]; allPagesIsAvailable: boolean; - size: number; onItemClick: ( item: MenuItem, collapsed: boolean, @@ -30,7 +29,7 @@ export const useAsideHeaderInnerContext = (): AsideHeaderInnerContextType => { }; export interface AsideHeaderContextType { - compact?: boolean; + compact: boolean; size: number; } diff --git a/src/components/AsideHeader/PageLayout/PageLayout.tsx b/src/components/AsideHeader/PageLayout/PageLayout.tsx new file mode 100644 index 0000000..0588224 --- /dev/null +++ b/src/components/AsideHeader/PageLayout/PageLayout.tsx @@ -0,0 +1,50 @@ +import React, {PropsWithChildren, useMemo} from 'react'; +import {AsideHeaderContextProvider, useAsideHeaderContext} from '../AsideHeaderContext'; +import {Content, ContentProps} from '../../Content'; +import {ASIDE_HEADER_COMPACT_WIDTH, ASIDE_HEADER_EXPANDED_WIDTH} from '../../constants'; +import {PageLayoutProps} from '../types'; +import {b} from '../utils'; + +import '../AsideHeader.scss'; + +const PageLayout = ({ + compact, + reverse, + className, + children, +}: PropsWithChildren & { + reverse?: boolean; +}) => { + const size = compact ? ASIDE_HEADER_COMPACT_WIDTH : ASIDE_HEADER_EXPANDED_WIDTH; + const asideHeaderContextValue = useMemo(() => ({size, compact}), [compact, size]); + + return ( + +
+
{children}
+
+ + ); +}; + +const ConnectedContent: React.FC> = ({ + children, + renderContent, +}) => { + const {size} = useAsideHeaderContext(); + + return ( + + {children} + + ); +}; + +PageLayout.Content = ConnectedContent; + +export {PageLayout}; diff --git a/src/components/AsideHeader/PageLayout/PageLayoutAside.tsx b/src/components/AsideHeader/PageLayout/PageLayoutAside.tsx new file mode 100644 index 0000000..69f1fd3 --- /dev/null +++ b/src/components/AsideHeader/PageLayout/PageLayoutAside.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import {FirstPanel} from '../components'; +import {useAsideHeaderInnerContextValue} from '../useAsideHeaderInnerContextValue'; +import {AsideHeaderInnerContextProvider, useAsideHeaderContext} from '../AsideHeaderContext'; +import {AsideHeaderProps} from '../types'; + +type Props = Omit; + +export const PageLayoutAside = React.forwardRef((props, ref) => { + const {size, compact} = useAsideHeaderContext(); + + const asideHeaderInnerContextValue = useAsideHeaderInnerContextValue({size, compact, ...props}); + + return ( + + + + ); +}); diff --git a/src/components/AsideHeader/__stories__/AsideHeader.stories.tsx b/src/components/AsideHeader/__stories__/AsideHeader.stories.tsx index c721f70..2840001 100644 --- a/src/components/AsideHeader/__stories__/AsideHeader.stories.tsx +++ b/src/components/AsideHeader/__stories__/AsideHeader.stories.tsx @@ -4,6 +4,10 @@ import type {Meta, StoryFn} from '@storybook/react'; import {AsideHeader} from '../AsideHeader'; import {AsideHeaderShowcase} from './AsideHeaderShowcase'; +import {PageLayout} from '../PageLayout/PageLayout'; +import {PageLayoutAside} from '../PageLayout/PageLayoutAside'; +import logoIcon from '../../../../.storybook/assets/logo.svg'; +import {menuItemsShowcase} from './moc'; export default { title: 'components/AsideHeader', @@ -25,3 +29,32 @@ MultipleTooltip.args = { multipleTooltip: true, initialCompact: true, }; + +const AdvancedUsageTemplate: StoryFn = (args) => { + const [compact, setCompact] = React.useState(args.initialCompact); + + return ( + + PageContent + alert('click on logo'), + }} + onChangeCompact={setCompact} + {...args} + /> + + ); +}; + +export const AdvancedUsage = AdvancedUsageTemplate.bind({}); + +AdvancedUsage.args = { + multipleTooltip: false, + initialCompact: true, +}; diff --git a/src/components/AsideHeader/types.tsx b/src/components/AsideHeader/types.tsx index e636923..c63cc0c 100644 --- a/src/components/AsideHeader/types.tsx +++ b/src/components/AsideHeader/types.tsx @@ -1,11 +1,17 @@ import {RenderContentType} from '../Content'; import {DrawerItemProps} from '../Drawer/Drawer'; import {LogoProps, MenuItem, SubheaderMenuItem, OpenModalSubscriber} from '../types'; +import {AsideHeaderContextType} from './AsideHeaderContext'; + +export interface PageLayoutProps { + compact: boolean; + className?: string; +} export interface AsideHeaderGeneralProps { logo: LogoProps; - compact: boolean; multipleTooltip?: boolean; + reverse?: boolean; className?: string; collapseTitle?: string; expandTitle?: string; @@ -29,9 +35,13 @@ export interface AsideHeaderDefaultProps { headerDecoration?: boolean; } -export type AsideHeaderInnerProps = AsideHeaderGeneralProps & AsideHeaderDefaultProps; +export type AsideHeaderInnerProps = AsideHeaderGeneralProps & + AsideHeaderDefaultProps & + AsideHeaderContextType; + export interface AsideHeaderProps extends AsideHeaderGeneralProps, + PageLayoutProps, Partial {} export enum InnerPanels { diff --git a/src/components/Content/Content.tsx b/src/components/Content/Content.tsx index a251e24..be24541 100644 --- a/src/components/Content/Content.tsx +++ b/src/components/Content/Content.tsx @@ -4,7 +4,7 @@ import React from 'react'; export type RenderContentType = (data: {size: number}) => React.ReactNode; -interface ContentProps { +export interface ContentProps { size: number; className?: string; cssSizeVariableName?: string; @@ -27,14 +27,17 @@ export const Content: React.FC = ({ className, cssSizeVariableName = '--gn-aside-header-size', renderContent, + children, }) => { return (
- {typeof renderContent === 'function' && ( + {typeof renderContent === 'function' ? ( + ) : ( + children )}
); From e46439a806a6779dc7b4573ea0a298b2f8822d2e Mon Sep 17 00:00:00 2001 From: ldrv565 <40745264+ldrv565@users.noreply.github.com> Date: Wed, 25 Oct 2023 13:28:14 +0300 Subject: [PATCH 02/11] fix: typecheck --- src/components/AsideHeader/__stories__/moc.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/AsideHeader/__stories__/moc.tsx b/src/components/AsideHeader/__stories__/moc.tsx index a7991db..77f3049 100644 --- a/src/components/AsideHeader/__stories__/moc.tsx +++ b/src/components/AsideHeader/__stories__/moc.tsx @@ -11,6 +11,7 @@ function renderTag(tag: string) { export const EMPTY_CONTEXT_VALUE: AsideHeaderContextType = { size: ASIDE_HEADER_EXPANDED_WIDTH, + compact: true, }; export const menuItemsShowcase: MenuItem[] = [ From a1e5cf33b7213c83a9c8a86e4804d83108a3199a Mon Sep 17 00:00:00 2001 From: ldrv565 <40745264+ldrv565@users.noreply.github.com> Date: Thu, 26 Oct 2023 01:51:59 +0300 Subject: [PATCH 03/11] fix: split bundle by chunks --- package-lock.json | 106 +++++++++++++----- package.json | 6 +- rollup.config.js | 23 +++- .../AsideHeader/PageLayout/PageLayout.tsx | 8 +- src/components/index.ts | 2 + 5 files changed, 109 insertions(+), 36 deletions(-) diff --git a/package-lock.json b/package-lock.json index f393692..9080e13 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@gravity-ui/navigation", "version": "1.1.2", - "lockfileVersion": 1, + "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@gravity-ui/navigation", - "version": "0.19.0", + "version": "1.1.2", "license": "MIT", "dependencies": { "@gravity-ui/i18n": "^1.1.0", @@ -31,7 +31,6 @@ "@gravity-ui/uikit": "^5.14.0", "@rollup/plugin-commonjs": "^22.0.0", "@rollup/plugin-node-resolve": "^13.3.0", - "@rollup/plugin-typescript": "^8.3.3", "@storybook/addon-actions": "^7.1.0", "@storybook/addon-essentials": "^7.1.0", "@storybook/addon-interactions": "^7.1.0", @@ -59,6 +58,7 @@ "rollup-plugin-json": "^4.0.0", "rollup-plugin-peer-deps-external": "^2.2.4", "rollup-plugin-postcss": "^4.0.2", + "rollup-plugin-typescript2": "^0.36.0", "sass": "^1.49.7", "sass-loader": "^10.2.1", "storybook": "^7.1.0", @@ -5992,29 +5992,6 @@ "rollup": "^2.42.0" } }, - "node_modules/@rollup/plugin-typescript": { - "version": "8.5.0", - "resolved": "https://registry.npmjs.org/@rollup/plugin-typescript/-/plugin-typescript-8.5.0.tgz", - "integrity": "sha512-wMv1/scv0m/rXx21wD2IsBbJFba8wGF3ErJIr6IKRfRj49S85Lszbxb4DCo8iILpluTjk2GAAu9CoZt4G3ppgQ==", - "dev": true, - "dependencies": { - "@rollup/pluginutils": "^3.1.0", - "resolve": "^1.17.0" - }, - "engines": { - "node": ">=8.0.0" - }, - "peerDependencies": { - "rollup": "^2.14.0", - "tslib": "*", - "typescript": ">=3.7.0" - }, - "peerDependenciesMeta": { - "tslib": { - "optional": true - } - } - }, "node_modules/@rollup/pluginutils": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz", @@ -22929,6 +22906,83 @@ "node": ">=8" } }, + "node_modules/rollup-plugin-typescript2": { + "version": "0.36.0", + "resolved": "https://registry.npmjs.org/rollup-plugin-typescript2/-/rollup-plugin-typescript2-0.36.0.tgz", + "integrity": "sha512-NB2CSQDxSe9+Oe2ahZbf+B4bh7pHwjV5L+RSYpCu7Q5ROuN94F9b6ioWwKfz3ueL3KTtmX4o2MUH2cgHDIEUsw==", + "dev": true, + "dependencies": { + "@rollup/pluginutils": "^4.1.2", + "find-cache-dir": "^3.3.2", + "fs-extra": "^10.0.0", + "semver": "^7.5.4", + "tslib": "^2.6.2" + }, + "peerDependencies": { + "rollup": ">=1.26.3", + "typescript": ">=2.4.0" + } + }, + "node_modules/rollup-plugin-typescript2/node_modules/@rollup/pluginutils": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz", + "integrity": "sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==", + "dev": true, + "dependencies": { + "estree-walker": "^2.0.1", + "picomatch": "^2.2.2" + }, + "engines": { + "node": ">= 8.0.0" + } + }, + "node_modules/rollup-plugin-typescript2/node_modules/fs-extra": { + "version": "10.1.0", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz", + "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==", + "dev": true, + "dependencies": { + "graceful-fs": "^4.2.0", + "jsonfile": "^6.0.1", + "universalify": "^2.0.0" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/rollup-plugin-typescript2/node_modules/lru-cache": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", + "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", + "dev": true, + "dependencies": { + "yallist": "^4.0.0" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/rollup-plugin-typescript2/node_modules/semver": { + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", + "dev": true, + "dependencies": { + "lru-cache": "^6.0.0" + }, + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/rollup-plugin-typescript2/node_modules/yallist": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", + "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", + "dev": true + }, "node_modules/rollup-pluginutils": { "version": "2.8.2", "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz", diff --git a/package.json b/package.json index 578925d..908e3cd 100644 --- a/package.json +++ b/package.json @@ -7,8 +7,8 @@ "type": "git", "url": "https://github.com/gravity-ui/navigation" }, - "main": "build/cjs/index.js", - "module": "build/esm/index.js", + "main": "build/cjs", + "module": "build/esm", "types": "build/esm/index.d.ts", "sideEffects": [ "*.css", @@ -53,7 +53,6 @@ "@gravity-ui/uikit": "^5.14.0", "@rollup/plugin-commonjs": "^22.0.0", "@rollup/plugin-node-resolve": "^13.3.0", - "@rollup/plugin-typescript": "^8.3.3", "@storybook/addon-actions": "^7.1.0", "@storybook/addon-essentials": "^7.1.0", "@storybook/addon-interactions": "^7.1.0", @@ -81,6 +80,7 @@ "rollup-plugin-json": "^4.0.0", "rollup-plugin-peer-deps-external": "^2.2.4", "rollup-plugin-postcss": "^4.0.2", + "rollup-plugin-typescript2": "^0.36.0", "sass": "^1.49.7", "sass-loader": "^10.2.1", "storybook": "^7.1.0", diff --git a/rollup.config.js b/rollup.config.js index 63f0bfc..8acd04a 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -1,6 +1,6 @@ import resolve from '@rollup/plugin-node-resolve'; import commonjs from '@rollup/plugin-commonjs'; -import typescript from '@rollup/plugin-typescript'; +import typescript from 'rollup-plugin-typescript2'; import svgr from '@svgr/rollup'; import postcss from 'rollup-plugin-postcss'; import json from 'rollup-plugin-json'; @@ -8,17 +8,32 @@ import peerDepsExternal from 'rollup-plugin-peer-deps-external'; const packageJson = require('./package.json'); +const input = [ + 'src/index.ts', + 'src/components/ActionBar/index.ts', + 'src/components/Title/index.ts', + 'src/components/HotkeysPanel/index.ts', + 'src/components/Settings/index.ts', + 'src/components/MobileHeader/index.ts', + 'src/components/AsideHeader/AsideHeader.tsx', + 'src/components/AsideHeader/AsideHeaderContext.ts', + 'src/components/Drawer/Drawer.tsx', + 'src/components/FooterItem/FooterItem.tsx', + 'src/components/AsideHeader/PageLayout/PageLayout.tsx', + 'src/components/AsideHeader/PageLayout/PageLayoutAside.tsx', +]; + export default [ { - input: 'src/index.ts', + input, output: [ { - file: packageJson.module, + dir: packageJson.module, format: 'esm', sourcemap: true, }, { - file: packageJson.main, + dir: packageJson.main, format: 'cjs', sourcemap: true, }, diff --git a/src/components/AsideHeader/PageLayout/PageLayout.tsx b/src/components/AsideHeader/PageLayout/PageLayout.tsx index 0588224..862ead1 100644 --- a/src/components/AsideHeader/PageLayout/PageLayout.tsx +++ b/src/components/AsideHeader/PageLayout/PageLayout.tsx @@ -7,7 +7,7 @@ import {b} from '../utils'; import '../AsideHeader.scss'; -const PageLayout = ({ +const Layout = ({ compact, reverse, className, @@ -32,7 +32,7 @@ const PageLayout = ({ ); }; -const ConnectedContent: React.FC> = ({ +const ConnectedContent: React.FC>> = ({ children, renderContent, }) => { @@ -45,6 +45,8 @@ const ConnectedContent: React.FC> = ({ ); }; -PageLayout.Content = ConnectedContent; +const PageLayout = Object.assign(Layout, { + Content: ConnectedContent, +}); export {PageLayout}; diff --git a/src/components/index.ts b/src/components/index.ts index b91dd75..9a09578 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -3,6 +3,8 @@ export type {AsideHeaderProps} from './AsideHeader/types'; export {AsideHeaderContextProvider, useAsideHeaderContext} from './AsideHeader/AsideHeaderContext'; export {Drawer, DrawerProps, DrawerItemProps, DrawerItem} from './Drawer/Drawer'; export {FooterItem, FooterItemProps} from './FooterItem/FooterItem'; +export {PageLayout} from './AsideHeader/PageLayout/PageLayout'; +export {PageLayoutAside} from './AsideHeader/PageLayout/PageLayoutAside'; export * from './ActionBar'; export * from './Title'; export * from './HotkeysPanel'; From 2c5a2794ea25985264b10b11299f2cd8daf03e6c Mon Sep 17 00:00:00 2001 From: ldrv565 <40745264+ldrv565@users.noreply.github.com> Date: Thu, 26 Oct 2023 18:23:12 +0300 Subject: [PATCH 04/11] Update README.md --- README.md | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/README.md b/README.md index 0325b42..b3d63f9 100644 --- a/README.md +++ b/README.md @@ -24,6 +24,35 @@ npm install --dev @gravity-ui/uikit@^3.0.2 @bem-react/classname@1.6.0 react@^16. - MobileHeaderFooterItem - Drawer - DrawerItem +- PageLayout + +## Optimization +If your app content needs to be rendered faster than by passing it throw `AsideHeader` props, +you may need to switch usage of `AsideHeader` to advanced style with `PageLayout` like this: + +```diff +-import {AsideHeader} from '@gravity-ui/navigation'; ++import {PageLayout} from '@gravity-ui/navigation'; ++ ++const PageLayoutAside = React.lazy( ++ import('@gravity-ui/navigation').then((module) => ({default: module.PageLayoutAside})), ++); + +- ++ ++ ++ ++ ++ ++ ++ ++ ++ +``` + + + + ## Imports From 8de0d2fc7b688c8f0c36995c4ec98032f0200a2b Mon Sep 17 00:00:00 2001 From: ldrv565 <40745264+ldrv565@users.noreply.github.com> Date: Thu, 26 Oct 2023 18:25:51 +0300 Subject: [PATCH 05/11] Update README.md --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index b3d63f9..66fa716 100644 --- a/README.md +++ b/README.md @@ -25,6 +25,7 @@ npm install --dev @gravity-ui/uikit@^3.0.2 @bem-react/classname@1.6.0 react@^16. - Drawer - DrawerItem - PageLayout +- PageLayoutAside ## Optimization If your app content needs to be rendered faster than by passing it throw `AsideHeader` props, From 785c3b6754f2ebcade4b92e6499d4d5e8c6e8b0a Mon Sep 17 00:00:00 2001 From: ldrv565 <40745264+ldrv565@users.noreply.github.com> Date: Fri, 27 Oct 2023 13:53:00 +0300 Subject: [PATCH 06/11] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 66fa716..b2aec9e 100644 --- a/README.md +++ b/README.md @@ -35,7 +35,7 @@ you may need to switch usage of `AsideHeader` to advanced style with `PageLayout -import {AsideHeader} from '@gravity-ui/navigation'; +import {PageLayout} from '@gravity-ui/navigation'; + -+const PageLayoutAside = React.lazy( ++const PageLayoutAside = React.lazy(() => + import('@gravity-ui/navigation').then((module) => ({default: module.PageLayoutAside})), +); From 02f9f1c2e1e028213b529d3ef47ebe593a575110 Mon Sep 17 00:00:00 2001 From: ldrv565 <40745264+ldrv565@users.noreply.github.com> Date: Fri, 27 Oct 2023 14:50:38 +0300 Subject: [PATCH 07/11] fix: rollup config with @rollup/plugin-typescript --- package-lock.json | 102 +++++++++++----------------------------------- package.json | 2 +- rollup.config.js | 37 +++++++++++------ 3 files changed, 49 insertions(+), 92 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9080e13..a8bc59e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -31,6 +31,7 @@ "@gravity-ui/uikit": "^5.14.0", "@rollup/plugin-commonjs": "^22.0.0", "@rollup/plugin-node-resolve": "^13.3.0", + "@rollup/plugin-typescript": "^8.3.3", "@storybook/addon-actions": "^7.1.0", "@storybook/addon-essentials": "^7.1.0", "@storybook/addon-interactions": "^7.1.0", @@ -58,7 +59,6 @@ "rollup-plugin-json": "^4.0.0", "rollup-plugin-peer-deps-external": "^2.2.4", "rollup-plugin-postcss": "^4.0.2", - "rollup-plugin-typescript2": "^0.36.0", "sass": "^1.49.7", "sass-loader": "^10.2.1", "storybook": "^7.1.0", @@ -5992,6 +5992,29 @@ "rollup": "^2.42.0" } }, + "node_modules/@rollup/plugin-typescript": { + "version": "8.5.0", + "resolved": "https://registry.npmjs.org/@rollup/plugin-typescript/-/plugin-typescript-8.5.0.tgz", + "integrity": "sha512-wMv1/scv0m/rXx21wD2IsBbJFba8wGF3ErJIr6IKRfRj49S85Lszbxb4DCo8iILpluTjk2GAAu9CoZt4G3ppgQ==", + "dev": true, + "dependencies": { + "@rollup/pluginutils": "^3.1.0", + "resolve": "^1.17.0" + }, + "engines": { + "node": ">=8.0.0" + }, + "peerDependencies": { + "rollup": "^2.14.0", + "tslib": "*", + "typescript": ">=3.7.0" + }, + "peerDependenciesMeta": { + "tslib": { + "optional": true + } + } + }, "node_modules/@rollup/pluginutils": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz", @@ -22906,83 +22929,6 @@ "node": ">=8" } }, - "node_modules/rollup-plugin-typescript2": { - "version": "0.36.0", - "resolved": "https://registry.npmjs.org/rollup-plugin-typescript2/-/rollup-plugin-typescript2-0.36.0.tgz", - "integrity": "sha512-NB2CSQDxSe9+Oe2ahZbf+B4bh7pHwjV5L+RSYpCu7Q5ROuN94F9b6ioWwKfz3ueL3KTtmX4o2MUH2cgHDIEUsw==", - "dev": true, - "dependencies": { - "@rollup/pluginutils": "^4.1.2", - "find-cache-dir": "^3.3.2", - "fs-extra": "^10.0.0", - "semver": "^7.5.4", - "tslib": "^2.6.2" - }, - "peerDependencies": { - "rollup": ">=1.26.3", - "typescript": ">=2.4.0" - } - }, - "node_modules/rollup-plugin-typescript2/node_modules/@rollup/pluginutils": { - "version": "4.2.1", - "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz", - "integrity": "sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==", - "dev": true, - "dependencies": { - "estree-walker": "^2.0.1", - "picomatch": "^2.2.2" - }, - "engines": { - "node": ">= 8.0.0" - } - }, - "node_modules/rollup-plugin-typescript2/node_modules/fs-extra": { - "version": "10.1.0", - "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz", - "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==", - "dev": true, - "dependencies": { - "graceful-fs": "^4.2.0", - "jsonfile": "^6.0.1", - "universalify": "^2.0.0" - }, - "engines": { - "node": ">=12" - } - }, - "node_modules/rollup-plugin-typescript2/node_modules/lru-cache": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", - "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", - "dev": true, - "dependencies": { - "yallist": "^4.0.0" - }, - "engines": { - "node": ">=10" - } - }, - "node_modules/rollup-plugin-typescript2/node_modules/semver": { - "version": "7.5.4", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", - "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", - "dev": true, - "dependencies": { - "lru-cache": "^6.0.0" - }, - "bin": { - "semver": "bin/semver.js" - }, - "engines": { - "node": ">=10" - } - }, - "node_modules/rollup-plugin-typescript2/node_modules/yallist": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", - "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", - "dev": true - }, "node_modules/rollup-pluginutils": { "version": "2.8.2", "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz", diff --git a/package.json b/package.json index 908e3cd..0ccda4f 100644 --- a/package.json +++ b/package.json @@ -53,6 +53,7 @@ "@gravity-ui/uikit": "^5.14.0", "@rollup/plugin-commonjs": "^22.0.0", "@rollup/plugin-node-resolve": "^13.3.0", + "@rollup/plugin-typescript": "^8.3.3", "@storybook/addon-actions": "^7.1.0", "@storybook/addon-essentials": "^7.1.0", "@storybook/addon-interactions": "^7.1.0", @@ -80,7 +81,6 @@ "rollup-plugin-json": "^4.0.0", "rollup-plugin-peer-deps-external": "^2.2.4", "rollup-plugin-postcss": "^4.0.2", - "rollup-plugin-typescript2": "^0.36.0", "sass": "^1.49.7", "sass-loader": "^10.2.1", "storybook": "^7.1.0", diff --git a/rollup.config.js b/rollup.config.js index 8acd04a..86ec6c6 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -1,6 +1,6 @@ import resolve from '@rollup/plugin-node-resolve'; import commonjs from '@rollup/plugin-commonjs'; -import typescript from 'rollup-plugin-typescript2'; +import typescript from '@rollup/plugin-typescript'; import svgr from '@svgr/rollup'; import postcss from 'rollup-plugin-postcss'; import json from 'rollup-plugin-json'; @@ -23,6 +23,22 @@ const input = [ 'src/components/AsideHeader/PageLayout/PageLayoutAside.tsx', ]; +const getPlugins = (outDir) => { + return [ + peerDepsExternal(), + json(), + resolve(), + commonjs(), + typescript({ + typescript: require('typescript'), + tsconfig: './tsconfig.publish.json', + outDir, + }), + postcss(), + svgr(), + ]; +}; + export default [ { input, @@ -32,23 +48,18 @@ export default [ format: 'esm', sourcemap: true, }, + ], + plugins: getPlugins(packageJson.module), + }, + { + input, + output: [ { dir: packageJson.main, format: 'cjs', sourcemap: true, }, ], - plugins: [ - peerDepsExternal(), - json(), - resolve(), - commonjs(), - typescript({ - typescript: require('typescript'), - tsconfig: './tsconfig.publish.json', - }), - postcss(), - svgr(), - ], + plugins: getPlugins(packageJson.main), }, ]; From 49788a13c714f9e9fa4f33896c584aa086a4d793 Mon Sep 17 00:00:00 2001 From: ldrv565 <40745264+ldrv565@users.noreply.github.com> Date: Fri, 27 Oct 2023 15:05:13 +0300 Subject: [PATCH 08/11] chore: conflict in package-lock.json --- package-lock.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index a8bc59e..6e1d57e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@gravity-ui/navigation", "version": "1.1.2", - "lockfileVersion": 3, + "lockfileVersion": 1, "requires": true, "packages": { "": { "name": "@gravity-ui/navigation", - "version": "1.1.2", + "version": "1.1.3", "license": "MIT", "dependencies": { "@gravity-ui/i18n": "^1.1.0", From 9ed9bd2dd0645d49dc0cab80e5d572e8e3e033c1 Mon Sep 17 00:00:00 2001 From: ldrv565 <40745264+ldrv565@users.noreply.github.com> Date: Thu, 2 Nov 2023 18:53:01 +0300 Subject: [PATCH 09/11] chore: mv PageLayout to components --- src/components/AsideHeader/AsideHeader.tsx | 4 +-- .../__stories__/AsideHeader.stories.tsx | 4 +-- .../PageLayout/PageLayout.tsx | 27 +++++++++---------- .../PageLayout/PageLayoutAside.tsx | 8 +++--- src/components/AsideHeader/types.tsx | 4 +-- src/components/index.ts | 4 +-- 6 files changed, 24 insertions(+), 27 deletions(-) rename src/components/AsideHeader/{ => components}/PageLayout/PageLayout.tsx (77%) rename src/components/AsideHeader/{ => components}/PageLayout/PageLayoutAside.tsx (74%) diff --git a/src/components/AsideHeader/AsideHeader.tsx b/src/components/AsideHeader/AsideHeader.tsx index adfc30b..97246d6 100644 --- a/src/components/AsideHeader/AsideHeader.tsx +++ b/src/components/AsideHeader/AsideHeader.tsx @@ -1,8 +1,8 @@ import React from 'react'; import {AsideHeaderProps} from './types'; -import {PageLayout} from './PageLayout/PageLayout'; -import {PageLayoutAside} from './PageLayout/PageLayoutAside'; +import {PageLayout} from './components/PageLayout/PageLayout'; +import {PageLayoutAside} from './components/PageLayout/PageLayoutAside'; /** * Simply usage of AsideHeader: diff --git a/src/components/AsideHeader/__stories__/AsideHeader.stories.tsx b/src/components/AsideHeader/__stories__/AsideHeader.stories.tsx index 2840001..62fb07d 100644 --- a/src/components/AsideHeader/__stories__/AsideHeader.stories.tsx +++ b/src/components/AsideHeader/__stories__/AsideHeader.stories.tsx @@ -4,8 +4,8 @@ import type {Meta, StoryFn} from '@storybook/react'; import {AsideHeader} from '../AsideHeader'; import {AsideHeaderShowcase} from './AsideHeaderShowcase'; -import {PageLayout} from '../PageLayout/PageLayout'; -import {PageLayoutAside} from '../PageLayout/PageLayoutAside'; +import {PageLayout} from '../components/PageLayout/PageLayout'; +import {PageLayoutAside} from '../components/PageLayout/PageLayoutAside'; import logoIcon from '../../../../.storybook/assets/logo.svg'; import {menuItemsShowcase} from './moc'; diff --git a/src/components/AsideHeader/PageLayout/PageLayout.tsx b/src/components/AsideHeader/components/PageLayout/PageLayout.tsx similarity index 77% rename from src/components/AsideHeader/PageLayout/PageLayout.tsx rename to src/components/AsideHeader/components/PageLayout/PageLayout.tsx index 862ead1..449b89a 100644 --- a/src/components/AsideHeader/PageLayout/PageLayout.tsx +++ b/src/components/AsideHeader/components/PageLayout/PageLayout.tsx @@ -1,20 +1,17 @@ import React, {PropsWithChildren, useMemo} from 'react'; -import {AsideHeaderContextProvider, useAsideHeaderContext} from '../AsideHeaderContext'; -import {Content, ContentProps} from '../../Content'; -import {ASIDE_HEADER_COMPACT_WIDTH, ASIDE_HEADER_EXPANDED_WIDTH} from '../../constants'; -import {PageLayoutProps} from '../types'; -import {b} from '../utils'; - -import '../AsideHeader.scss'; - -const Layout = ({ - compact, - reverse, - className, - children, -}: PropsWithChildren & { +import {AsideHeaderContextProvider, useAsideHeaderContext} from '../../AsideHeaderContext'; +import {Content, ContentProps} from '../../../Content'; +import {ASIDE_HEADER_COMPACT_WIDTH, ASIDE_HEADER_EXPANDED_WIDTH} from '../../../constants'; +import {LayoutProps} from '../../types'; +import {b} from '../../utils'; + +import '../../AsideHeader.scss'; + +export interface PageLayoutProps extends PropsWithChildren { reverse?: boolean; -}) => { +} + +const Layout = ({compact, reverse, className, children}: PageLayoutProps) => { const size = compact ? ASIDE_HEADER_COMPACT_WIDTH : ASIDE_HEADER_EXPANDED_WIDTH; const asideHeaderContextValue = useMemo(() => ({size, compact}), [compact, size]); diff --git a/src/components/AsideHeader/PageLayout/PageLayoutAside.tsx b/src/components/AsideHeader/components/PageLayout/PageLayoutAside.tsx similarity index 74% rename from src/components/AsideHeader/PageLayout/PageLayoutAside.tsx rename to src/components/AsideHeader/components/PageLayout/PageLayoutAside.tsx index 69f1fd3..29c91e2 100644 --- a/src/components/AsideHeader/PageLayout/PageLayoutAside.tsx +++ b/src/components/AsideHeader/components/PageLayout/PageLayoutAside.tsx @@ -1,8 +1,8 @@ import React from 'react'; -import {FirstPanel} from '../components'; -import {useAsideHeaderInnerContextValue} from '../useAsideHeaderInnerContextValue'; -import {AsideHeaderInnerContextProvider, useAsideHeaderContext} from '../AsideHeaderContext'; -import {AsideHeaderProps} from '../types'; +import {FirstPanel} from '..'; +import {useAsideHeaderInnerContextValue} from '../../useAsideHeaderInnerContextValue'; +import {AsideHeaderInnerContextProvider, useAsideHeaderContext} from '../../AsideHeaderContext'; +import {AsideHeaderProps} from '../../types'; type Props = Omit; diff --git a/src/components/AsideHeader/types.tsx b/src/components/AsideHeader/types.tsx index c63cc0c..cb65754 100644 --- a/src/components/AsideHeader/types.tsx +++ b/src/components/AsideHeader/types.tsx @@ -3,7 +3,7 @@ import {DrawerItemProps} from '../Drawer/Drawer'; import {LogoProps, MenuItem, SubheaderMenuItem, OpenModalSubscriber} from '../types'; import {AsideHeaderContextType} from './AsideHeaderContext'; -export interface PageLayoutProps { +export interface LayoutProps { compact: boolean; className?: string; } @@ -41,7 +41,7 @@ export type AsideHeaderInnerProps = AsideHeaderGeneralProps & export interface AsideHeaderProps extends AsideHeaderGeneralProps, - PageLayoutProps, + LayoutProps, Partial {} export enum InnerPanels { diff --git a/src/components/index.ts b/src/components/index.ts index 9a09578..7774b35 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -3,8 +3,8 @@ export type {AsideHeaderProps} from './AsideHeader/types'; export {AsideHeaderContextProvider, useAsideHeaderContext} from './AsideHeader/AsideHeaderContext'; export {Drawer, DrawerProps, DrawerItemProps, DrawerItem} from './Drawer/Drawer'; export {FooterItem, FooterItemProps} from './FooterItem/FooterItem'; -export {PageLayout} from './AsideHeader/PageLayout/PageLayout'; -export {PageLayoutAside} from './AsideHeader/PageLayout/PageLayoutAside'; +export {PageLayout, type PageLayoutProps} from './AsideHeader/components/PageLayout/PageLayout'; +export {PageLayoutAside} from './AsideHeader/components/PageLayout/PageLayoutAside'; export * from './ActionBar'; export * from './Title'; export * from './HotkeysPanel'; From bdbafc934d4c359fc411adcd7ae8f1e56c954f49 Mon Sep 17 00:00:00 2001 From: ldrv565 <40745264+ldrv565@users.noreply.github.com> Date: Fri, 3 Nov 2023 10:26:12 +0300 Subject: [PATCH 10/11] fix: input entries --- rollup.config.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/rollup.config.js b/rollup.config.js index 86ec6c6..05d1c97 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -19,8 +19,8 @@ const input = [ 'src/components/AsideHeader/AsideHeaderContext.ts', 'src/components/Drawer/Drawer.tsx', 'src/components/FooterItem/FooterItem.tsx', - 'src/components/AsideHeader/PageLayout/PageLayout.tsx', - 'src/components/AsideHeader/PageLayout/PageLayoutAside.tsx', + 'src/components/AsideHeader/components/PageLayout/PageLayout.tsx', + 'src/components/AsideHeader/components/PageLayout/PageLayoutAside.tsx', ]; const getPlugins = (outDir) => { @@ -34,7 +34,9 @@ const getPlugins = (outDir) => { tsconfig: './tsconfig.publish.json', outDir, }), - postcss(), + postcss({ + minimize: true, + }), svgr(), ]; }; From 14d097adebbe2f13aa9ce7c1d9eb41e05e0b931e Mon Sep 17 00:00:00 2001 From: ldrv565 <40745264+ldrv565@users.noreply.github.com> Date: Fri, 3 Nov 2023 12:14:21 +0300 Subject: [PATCH 11/11] fix: lint errors in readme --- README.md | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/README.md b/README.md index b2aec9e..65ca513 100644 --- a/README.md +++ b/README.md @@ -28,6 +28,7 @@ npm install --dev @gravity-ui/uikit@^3.0.2 @bem-react/classname@1.6.0 react@^16. - PageLayoutAside ## Optimization + If your app content needs to be rendered faster than by passing it throw `AsideHeader` props, you may need to switch usage of `AsideHeader` to advanced style with `PageLayout` like this: @@ -51,10 +52,6 @@ you may need to switch usage of `AsideHeader` to advanced style with `PageLayout + ``` - - - - ## Imports ```ts