From 7806d4b663f4cbfc9c6f1fca05856c47f5c473e5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=92=D0=B0=D0=BB=D0=B5=D1=80=D0=B8=D1=8F=20=D0=A7=D1=83?= =?UTF-8?q?=D1=80=D0=B8=D1=87=D0=B5=D0=B2=D0=B0?= Date: Thu, 13 Jul 2023 09:58:29 +0300 Subject: [PATCH 1/3] feat(plate): added mobile and responsive versions component --- .changeset/dull-rules-boil.md | 5 + packages/plate/package.json | 21 ++ packages/plate/src/Component.desktop.tsx | 11 + packages/plate/src/Component.mobile.tsx | 11 + packages/plate/src/Component.responsive.tsx | 31 ++ packages/plate/src/Component.test.tsx | 2 +- ...late-buttons-addons-left-addons-0-snap.png | 4 +- ...late-buttons-addons-left-addons-1-snap.png | 4 +- .../plate-dark-preview-snap.png | 4 +- ...le-with-buttons-addons-foldable-0-snap.png | 4 +- ...le-with-buttons-addons-foldable-1-snap.png | 4 +- .../plate-main-props-sprite-snap.png | 4 +- .../plate-preview-snap.png | 4 +- .../plate-row-limit-sprite-snap.png | 4 +- .../plate-shadow-and-border-sprite-snap.png | 4 +- .../plate-view-sprite-snap.png | 4 +- .../src/__snapshots__/Component.test.tsx.snap | 4 +- .../plate/src/component.screenshots.test.tsx | 25 +- .../{ => components/base-plate}/Component.tsx | 99 ++++--- .../base-plate}/index.module.css | 10 +- .../plate/src/components/base-plate/index.ts | 1 + packages/plate/src/desktop.module.css | 10 + packages/plate/src/desktop.ts | 1 + packages/plate/src/docs/Component.docs.mdx | 23 ++ packages/plate/src/docs/Component.stories.tsx | 266 ++++++++++++++++++ packages/plate/src/docs/component.stories.mdx | 123 -------- packages/plate/src/docs/development.mdx | 23 ++ packages/plate/src/index.ts | 2 +- packages/plate/src/mobile.module.css | 10 + packages/plate/src/mobile.ts | 1 + packages/plate/tsconfig.json | 4 +- tsconfig.json | 3 +- 32 files changed, 512 insertions(+), 214 deletions(-) create mode 100644 .changeset/dull-rules-boil.md create mode 100644 packages/plate/src/Component.desktop.tsx create mode 100644 packages/plate/src/Component.mobile.tsx create mode 100644 packages/plate/src/Component.responsive.tsx rename packages/plate/src/{ => components/base-plate}/Component.tsx (75%) rename packages/plate/src/{ => components/base-plate}/index.module.css (94%) create mode 100644 packages/plate/src/components/base-plate/index.ts create mode 100644 packages/plate/src/desktop.module.css create mode 100644 packages/plate/src/desktop.ts create mode 100644 packages/plate/src/docs/Component.docs.mdx create mode 100644 packages/plate/src/docs/Component.stories.tsx delete mode 100644 packages/plate/src/docs/component.stories.mdx create mode 100644 packages/plate/src/docs/development.mdx create mode 100644 packages/plate/src/mobile.module.css create mode 100644 packages/plate/src/mobile.ts diff --git a/.changeset/dull-rules-boil.md b/.changeset/dull-rules-boil.md new file mode 100644 index 0000000000..d2b5f02816 --- /dev/null +++ b/.changeset/dull-rules-boil.md @@ -0,0 +1,5 @@ +--- +"@alfalab/core-components-plate": major +--- + +Для компонента Plate добавлены мобильная и адаптивная версии компонента. Responsive компонент теперь экспортируется из индексного файла diff --git a/packages/plate/package.json b/packages/plate/package.json index 8d48bb99a2..21448d3af4 100644 --- a/packages/plate/package.json +++ b/packages/plate/package.json @@ -6,6 +6,26 @@ "license": "MIT", "main": "index.js", "module": "./esm/index.js", + "exports": { + ".": { + "import": "./esm/index.js", + "require": "./index.js" + }, + "./mobile": { + "import": "./esm/mobile.js", + "require": "./mobile.js" + }, + "./desktop": { + "import": "./esm/desktop.js", + "require": "./desktop.js" + }, + "./esm": "./esm/index.js", + "./cssm": "./cssm/index.js", + "./modern": "./modern/index.js", + "./esm/*": "./esm/*", + "./cssm/*": "./cssm/*", + "./modern/*": "./modern/*" + }, "scripts": { "postinstall": "node -e \"if (require('fs').existsSync('./send-stats.js')){require('./send-stats.js')} \"" }, @@ -19,6 +39,7 @@ "dependencies": { "@alfalab/core-components-button": "^8.4.0", "@alfalab/core-components-icon-button": "^6.1.1", + "@alfalab/core-components-mq": "^4.1.4", "@alfalab/hooks": "^1.13.0", "classnames": "^2.3.1", "react-merge-refs": "^1.1.0", diff --git a/packages/plate/src/Component.desktop.tsx b/packages/plate/src/Component.desktop.tsx new file mode 100644 index 0000000000..3d36470e23 --- /dev/null +++ b/packages/plate/src/Component.desktop.tsx @@ -0,0 +1,11 @@ +import React, { forwardRef } from 'react'; + +import { BasePlate, BasePlateProps } from './components/base-plate'; + +import styles from './desktop.module.css'; + +export type PlateDesktopProps = Omit; + +export const PlateDesktop = forwardRef((restProps, ref) => ( + +)); diff --git a/packages/plate/src/Component.mobile.tsx b/packages/plate/src/Component.mobile.tsx new file mode 100644 index 0000000000..40952edde5 --- /dev/null +++ b/packages/plate/src/Component.mobile.tsx @@ -0,0 +1,11 @@ +import React, { forwardRef } from 'react'; + +import { BasePlate, BasePlateProps } from './components/base-plate'; + +import styles from './mobile.module.css'; + +export type PlateMobileProps = Omit; + +export const PlateMobile = forwardRef((restProps, ref) => ( + +)); diff --git a/packages/plate/src/Component.responsive.tsx b/packages/plate/src/Component.responsive.tsx new file mode 100644 index 0000000000..a564aea26a --- /dev/null +++ b/packages/plate/src/Component.responsive.tsx @@ -0,0 +1,31 @@ +import React, { forwardRef } from 'react'; + +import { useMatchMedia } from '@alfalab/core-components-mq'; + +import { BasePlateProps } from './components/base-plate'; +import { PlateDesktop } from './Component.desktop'; +import { PlateMobile } from './Component.mobile'; + +export type PlateProps = Omit & { + /** + * Контрольная точка, с нее начинается desktop версия + * @default 1024 + */ + breakpoint?: number; +}; + +export const Plate = forwardRef( + ({ children, breakpoint = 1024, ...restProps }, ref) => { + const query = `(min-width: ${breakpoint}px)`; + + const [isDesktop] = useMatchMedia(query); + + const Component = isDesktop ? PlateDesktop : PlateMobile; + + return ( + + {children} + + ); + }, +); diff --git a/packages/plate/src/Component.test.tsx b/packages/plate/src/Component.test.tsx index 99697e5e2c..5ac98ad7c7 100644 --- a/packages/plate/src/Component.test.tsx +++ b/packages/plate/src/Component.test.tsx @@ -3,7 +3,7 @@ import { fireEvent, render } from '@testing-library/react'; import { CheckmarkCircleMIcon } from '@alfalab/icons-glyph/CheckmarkCircleMIcon'; import userEvent from '@testing-library/user-event'; -import { Plate, PlateProps } from './index'; +import { PlateDesktop as Plate, PlateDesktopProps as PlateProps } from './desktop'; import { Button } from '../../button/src'; describe('Plate', () => { diff --git a/packages/plate/src/__image_snapshots__/plate-buttons-addons-left-addons-0-snap.png b/packages/plate/src/__image_snapshots__/plate-buttons-addons-left-addons-0-snap.png index 89f7189bd9..24161999e0 100644 --- a/packages/plate/src/__image_snapshots__/plate-buttons-addons-left-addons-0-snap.png +++ b/packages/plate/src/__image_snapshots__/plate-buttons-addons-left-addons-0-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:8e452c2c53f0064dde3115d8952a2a761fc45c0d77ca9e13d963b36d9e417aaf -size 13952 +oid sha256:2773330a0fc8aa1e75d452101413db3eee7a7f7f8e68fc4c26c206d922f495e8 +size 15073 diff --git a/packages/plate/src/__image_snapshots__/plate-buttons-addons-left-addons-1-snap.png b/packages/plate/src/__image_snapshots__/plate-buttons-addons-left-addons-1-snap.png index bb7bacc9b9..bc2fc38dd6 100644 --- a/packages/plate/src/__image_snapshots__/plate-buttons-addons-left-addons-1-snap.png +++ b/packages/plate/src/__image_snapshots__/plate-buttons-addons-left-addons-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:28bf6998180edf2e1bfdffa7f5c03f6445897e6ba2087a497a8672e5eb0874ae -size 14427 +oid sha256:f31aacd0ec8eb4f240fa93268d8b1e013fe8cdf1b8ed6e49fc3c0f4627f3b9ac +size 15556 diff --git a/packages/plate/src/__image_snapshots__/plate-dark-preview-snap.png b/packages/plate/src/__image_snapshots__/plate-dark-preview-snap.png index 1827c17a45..1e93b66b98 100644 --- a/packages/plate/src/__image_snapshots__/plate-dark-preview-snap.png +++ b/packages/plate/src/__image_snapshots__/plate-dark-preview-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:c662d9b666979f4c32716dc943c22c53819815c0f11dd2e3b4988165fb9d626f -size 26292 +oid sha256:53095c3dd84ff71a4499040998ddef4252ec88453f8ed89fb347593d05a165a4 +size 26835 diff --git a/packages/plate/src/__image_snapshots__/plate-foldable-with-buttons-addons-foldable-0-snap.png b/packages/plate/src/__image_snapshots__/plate-foldable-with-buttons-addons-foldable-0-snap.png index bb7bacc9b9..bc2fc38dd6 100644 --- a/packages/plate/src/__image_snapshots__/plate-foldable-with-buttons-addons-foldable-0-snap.png +++ b/packages/plate/src/__image_snapshots__/plate-foldable-with-buttons-addons-foldable-0-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:28bf6998180edf2e1bfdffa7f5c03f6445897e6ba2087a497a8672e5eb0874ae -size 14427 +oid sha256:f31aacd0ec8eb4f240fa93268d8b1e013fe8cdf1b8ed6e49fc3c0f4627f3b9ac +size 15556 diff --git a/packages/plate/src/__image_snapshots__/plate-foldable-with-buttons-addons-foldable-1-snap.png b/packages/plate/src/__image_snapshots__/plate-foldable-with-buttons-addons-foldable-1-snap.png index 863d20530b..b3d3e09fc3 100644 --- a/packages/plate/src/__image_snapshots__/plate-foldable-with-buttons-addons-foldable-1-snap.png +++ b/packages/plate/src/__image_snapshots__/plate-foldable-with-buttons-addons-foldable-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:39f8e7c439d04a4354fe3cfd3abfc8203060b95ee28048882e07cb35209b1002 -size 7333 +oid sha256:8d4e19abc14023b67e89bca9f4e520ca9a8483401e3b35db59c8ea64de1af5da +size 8205 diff --git a/packages/plate/src/__image_snapshots__/plate-main-props-sprite-snap.png b/packages/plate/src/__image_snapshots__/plate-main-props-sprite-snap.png index a9e6fc25ae..db6d0c8f3a 100644 --- a/packages/plate/src/__image_snapshots__/plate-main-props-sprite-snap.png +++ b/packages/plate/src/__image_snapshots__/plate-main-props-sprite-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:bcdff822fcd5e59b91e975b5dec26ff49c9a3d5d32c3e586ba1d7db8cfbe3071 -size 75910 +oid sha256:96750d7cf417815559adadc9811aca53399c0de91b32445bf9fd302d8fe2a4fb +size 80042 diff --git a/packages/plate/src/__image_snapshots__/plate-preview-snap.png b/packages/plate/src/__image_snapshots__/plate-preview-snap.png index c968ef66f3..7b97e258c1 100644 --- a/packages/plate/src/__image_snapshots__/plate-preview-snap.png +++ b/packages/plate/src/__image_snapshots__/plate-preview-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:941e5d7b2a5b5876c1119e6791b8d409fda262a492cfabcb85fbfe235f2aec59 -size 26640 +oid sha256:818f0e29b86e760bf4c768bb7def2821ba83016c947b412aa9a925190bb8d55b +size 27246 diff --git a/packages/plate/src/__image_snapshots__/plate-row-limit-sprite-snap.png b/packages/plate/src/__image_snapshots__/plate-row-limit-sprite-snap.png index d5f96b31c9..4d550a3f4e 100644 --- a/packages/plate/src/__image_snapshots__/plate-row-limit-sprite-snap.png +++ b/packages/plate/src/__image_snapshots__/plate-row-limit-sprite-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:600bd0b18ecc77b4eff793e3ea81e77a480eb03155ec77fad5fa819855f1fd0a -size 49528 +oid sha256:f185092d528e10689ba0937dcc0cc645104e9942330dc587985a39c25e93602f +size 51557 diff --git a/packages/plate/src/__image_snapshots__/plate-shadow-and-border-sprite-snap.png b/packages/plate/src/__image_snapshots__/plate-shadow-and-border-sprite-snap.png index 8fb35aac53..6d08c97854 100644 --- a/packages/plate/src/__image_snapshots__/plate-shadow-and-border-sprite-snap.png +++ b/packages/plate/src/__image_snapshots__/plate-shadow-and-border-sprite-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:440ca76ef2bc500773bcfa9249d9a09010f5f6d3e872c74ccd6d96bf3edd5dd7 -size 23725 +oid sha256:feb73bbf00e56c4b2c144d179616375519557aa762eca25348521ff9fad838b2 +size 25020 diff --git a/packages/plate/src/__image_snapshots__/plate-view-sprite-snap.png b/packages/plate/src/__image_snapshots__/plate-view-sprite-snap.png index eb7a47eeb8..85ba8b1dc2 100644 --- a/packages/plate/src/__image_snapshots__/plate-view-sprite-snap.png +++ b/packages/plate/src/__image_snapshots__/plate-view-sprite-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:cf059b25424cb1cbebe67fc65380aae532e7634e741216320c223c0ba182ce6d -size 85603 +oid sha256:3e530f8bf53634213950b40d8838a5bcd2c5b82ea0f30e7f701b5d3da2657203 +size 87949 diff --git a/packages/plate/src/__snapshots__/Component.test.tsx.snap b/packages/plate/src/__snapshots__/Component.test.tsx.snap index 0215e0119b..267ceb9bfe 100644 --- a/packages/plate/src/__snapshots__/Component.test.tsx.snap +++ b/packages/plate/src/__snapshots__/Component.test.tsx.snap @@ -32,7 +32,7 @@ exports[`Plate Snapshots tests should match snapshot 1`] = ` class="contentContainer limitWidth" >
title
@@ -40,7 +40,7 @@ exports[`Plate Snapshots tests should match snapshot 1`] = ` class="content" >
text
diff --git a/packages/plate/src/component.screenshots.test.tsx b/packages/plate/src/component.screenshots.test.tsx index efaac3af4d..bb24eea85d 100644 --- a/packages/plate/src/component.screenshots.test.tsx +++ b/packages/plate/src/component.screenshots.test.tsx @@ -26,7 +26,10 @@ describe('Plate', () => { buttons: true, }, }, - 'transform:scale(1.3);padding:0 200px;', + 'width:800px;transform:scale(1.3);padding:0 200px;', + { + viewport: { width: 1024, height: 600 }, + }, ); }); @@ -54,10 +57,6 @@ describe( screenshotOpts: { fullPage: true, }, - viewport: { - width: 840, - height: 100, - }, }), ); @@ -75,7 +74,7 @@ describe( 'Вам одобрено. Согласитесь на предложение, спустя какое-то время специалист с Вами свяжется для уточнения информации', view: ['negative', 'positive', 'attention', 'common'], }, - size: { width: 400, height: 120 }, + size: { width: 400, height: 140 }, }), ], ], @@ -83,7 +82,7 @@ describe( fullPage: true, }, viewport: { - width: 840, + width: 1024, height: 100, }, }), @@ -103,7 +102,7 @@ describe( 'Вам одобрено. Согласитесь на предложение, спустя какое-то время специалист с Вами свяжется для уточнения информации', rowLimit: [undefined, 1, 2, 3], }, - size: { width: 400, height: 120 }, + size: { width: 400, height: 140 }, }), ], ], @@ -111,7 +110,7 @@ describe( fullPage: true, }, viewport: { - width: 840, + width: 1024, height: 100, }, }), @@ -129,8 +128,9 @@ describe( buttons: true, leftAddons: [false, true], }, + wrapperStyles: 'width:500px', }), - viewport: { width: 500, height: 160 }, + viewport: { width: 1024, height: 160 }, }), ); @@ -147,8 +147,9 @@ describe( leftAddons: true, buttons: true, }, + wrapperStyles: 'width:500px', }), - viewport: { width: 500, height: 160 }, + viewport: { width: 1024, height: 160 }, }), ); @@ -173,7 +174,7 @@ describe( fullPage: true, }, viewport: { - width: 840, + width: 1024, height: 100, }, }), diff --git a/packages/plate/src/Component.tsx b/packages/plate/src/components/base-plate/Component.tsx similarity index 75% rename from packages/plate/src/Component.tsx rename to packages/plate/src/components/base-plate/Component.tsx index 9ade922a8d..ca488cceb5 100644 --- a/packages/plate/src/Component.tsx +++ b/packages/plate/src/components/base-plate/Component.tsx @@ -17,11 +17,11 @@ import { useFocus } from '@alfalab/hooks'; import { ChevronDownMIcon } from '@alfalab/icons-glyph/ChevronDownMIcon'; import { CrossMIcon } from '@alfalab/icons-glyph/CrossMIcon'; -import { ButtonList } from './components/button-list/component'; +import { ButtonList } from '../button-list/component'; -import styles from './index.module.css'; +import commonStyles from './index.module.css'; -export type PlateProps = { +export type BasePlateProps = { /** * Управление наличием закрывающего крестика */ @@ -144,10 +144,15 @@ export type PlateProps = { * Количество строк (не поддерживает IE) */ rowLimit?: 1 | 2 | 3; + + /** + * Основные стили компонента. + */ + styles?: { [key: string]: string }; }; /* eslint-disable complexity */ -export const Plate = forwardRef( +export const BasePlate = forwardRef( ( { hasCloser, @@ -174,6 +179,7 @@ export const Plate = forwardRef( onClose, onToggle, rowLimit, + styles = {}, }, ref, ) => { @@ -196,7 +202,7 @@ export const Plate = forwardRef( const hasSubAddons = !!subAddons && typeof subAddons !== 'boolean'; const hasAnyAddons = leftAddons || subAddons || foldable || hasCloser; - const rowLimitStyles = rowLimit && styles[`rowLimit${rowLimit}`]; + const rowLimitStyles = rowLimit && commonStyles[`rowLimit${rowLimit}`]; const handleClick = useCallback( (event: React.MouseEvent | React.KeyboardEvent) => { @@ -251,17 +257,17 @@ export const Plate = forwardRef( // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
( tabIndex={foldable ? 0 : -1} data-test-id={dataTestId} > -
- {leftAddons &&
{leftAddons}
} +
+ {leftAddons &&
{leftAddons}
}
- {title &&
{title}
} + {title && ( +
+ {title} +
+ )} {hasContent && (
{children && ( -
+
{children}
)} {hasButtons && ( -
+
)} @@ -309,20 +332,20 @@ export const Plate = forwardRef(
{hasSubAddons && ( -
+
)} {foldable && ( -
+
@@ -331,9 +354,9 @@ export const Plate = forwardRef( )} {hasCloser && !foldable && ( -
+
( ); }, ); -/* eslint-enable complexity */ - -/** - * Для отображения в сторибуке - */ -Plate.defaultProps = { - foldable: false, - defaultFolded: true, - view: 'common', -}; diff --git a/packages/plate/src/index.module.css b/packages/plate/src/components/base-plate/index.module.css similarity index 94% rename from packages/plate/src/index.module.css rename to packages/plate/src/components/base-plate/index.module.css index 164bb2a458..2a21c71486 100644 --- a/packages/plate/src/index.module.css +++ b/packages/plate/src/components/base-plate/index.module.css @@ -1,10 +1,10 @@ -@import '../../themes/src/default.css'; +@import '../../../../themes/src/default.css'; :root { /* border */ --plate-border-left: 2px; --plate-border: 0 0 0 1px; - --plate-border-radius: var(--border-radius-m); + --plate-border-radius: var(--border-radius-l); /* width limit */ @@ -154,11 +154,6 @@ word-break: break-word; } -.bold { - @mixin headline-system_xsmall; - padding: 5px var(--gap-s) 5px var(--gap-2xs); -} - .light { @mixin paragraph_primary_small; padding: 6px var(--gap-s) 6px var(--gap-2xs); @@ -196,7 +191,6 @@ .description { @mixin paragraph_primary_small; - padding: var(--gap-2xs) var(--gap-s) var(--gap-2xs) var(--gap-2xs); } .footer { diff --git a/packages/plate/src/components/base-plate/index.ts b/packages/plate/src/components/base-plate/index.ts new file mode 100644 index 0000000000..e51a5d2440 --- /dev/null +++ b/packages/plate/src/components/base-plate/index.ts @@ -0,0 +1 @@ +export * from './Component'; diff --git a/packages/plate/src/desktop.module.css b/packages/plate/src/desktop.module.css new file mode 100644 index 0000000000..53fa4873ea --- /dev/null +++ b/packages/plate/src/desktop.module.css @@ -0,0 +1,10 @@ +@import '../../themes/src/default.css'; + +.bold { + @mixin headline-system_xsmall; + padding: 5px var(--gap-s) 5px var(--gap-2xs); +} + +.description { + padding: var(--gap-2xs) var(--gap-s) var(--gap-2xs) var(--gap-2xs); +} diff --git a/packages/plate/src/desktop.ts b/packages/plate/src/desktop.ts new file mode 100644 index 0000000000..12c7c2339e --- /dev/null +++ b/packages/plate/src/desktop.ts @@ -0,0 +1 @@ +export * from './Component.desktop'; diff --git a/packages/plate/src/docs/Component.docs.mdx b/packages/plate/src/docs/Component.docs.mdx new file mode 100644 index 0000000000..b27981aed1 --- /dev/null +++ b/packages/plate/src/docs/Component.docs.mdx @@ -0,0 +1,23 @@ +import { Meta, Markdown } from '@storybook/addon-docs'; +import { ComponentHeader, Tabs } from 'storybook/blocks'; +import * as Stories from './Component.stories'; + +import Description from './description.mdx'; +import Development from './development.mdx'; +import Changelog from '../../CHANGELOG.md?raw'; +import packageJson from '../../package.json'; + + + + + +} + changelog={{Changelog}} + development={} +/> diff --git a/packages/plate/src/docs/Component.stories.tsx b/packages/plate/src/docs/Component.stories.tsx new file mode 100644 index 0000000000..3e01caa2af --- /dev/null +++ b/packages/plate/src/docs/Component.stories.tsx @@ -0,0 +1,266 @@ +import React from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; +import { select, text, boolean } from '@storybook/addon-knobs'; +import { CheckmarkOnCircleMIcon } from '@alfalab/icons-glyph/CheckmarkOnCircleMIcon'; +import { ExclamationCircleMIcon } from '@alfalab/icons-glyph/ExclamationCircleMIcon'; +import { DiamondsMIcon } from '@alfalab/icons-glyph/DiamondsMIcon'; +import { Plate } from '@alfalab/core-components-plate'; +import { PlateMobile } from '@alfalab/core-components-plate/mobile'; +import { PlateDesktop } from '@alfalab/core-components-plate/desktop'; + +import { Button } from '@alfalab/core-components-button'; +import { Badge } from '@alfalab/core-components-badge'; + +import { + stylesStringToObj, + getQueryParam, +} from '../../../screenshot-utils/screenshots-story/utils'; + +const meta: Meta = { + title: 'Components/Plate', + component: Plate, + id: 'Plate', +}; + +type Story = StoryObj; + +export const plate: Story = { + name: 'Plate', + render: () => { + const VIEWS_MAP = { + common: { + addon: ( + } /> + ), + }, + negative: { + addon: ( + } /> + ), + }, + positive: { + addon: ( + } /> + ), + }, + attention: { + addon: ( + } /> + ), + }, + custom: { addon: }, + }; + const view = select('view', Object.keys(VIEWS_MAP), 'positive'); + const previewStyles = stylesStringToObj(getQueryParam('wrapperStyles')); + return ( +
+ + Кнопка, ] + : null + } + subAddons={ + boolean('subAddons', false) + ? [ + , + , + ] + : null + } + row + rowLimit={select('rowLimit', [undefined, 1, 2, 3], 3)} + > + {text('children', 'Вам одобрено. Согласитесь на предложение')} + +
+ ); + }, +}; + +export const plate_mobile: Story = { + name: 'PlateMobile', + render: () => { + const VIEWS_MAP = { + common: { + addon: ( + } /> + ), + }, + negative: { + addon: ( + } /> + ), + }, + positive: { + addon: ( + } /> + ), + }, + attention: { + addon: ( + } /> + ), + }, + custom: { addon: }, + }; + const view = select('view', Object.keys(VIEWS_MAP), 'positive'); + const previewStyles = stylesStringToObj(getQueryParam('wrapperStyles')); + return ( +
+ + Кнопка, ] + : null + } + subAddons={ + boolean('subAddons', false) + ? [ + , + , + ] + : null + } + row + rowLimit={select('rowLimit', [undefined, 1, 2, 3], 3)} + > + {text('children', 'Вам одобрено. Согласитесь на предложение')} + +
+ ); + }, +}; + +export const plate_desktop: Story = { + name: 'PlateDesktop', + render: () => { + const VIEWS_MAP = { + common: { + addon: ( + } /> + ), + }, + negative: { + addon: ( + } /> + ), + }, + positive: { + addon: ( + } /> + ), + }, + attention: { + addon: ( + } /> + ), + }, + custom: { addon: }, + }; + const view = select('view', Object.keys(VIEWS_MAP), 'positive'); + const previewStyles = stylesStringToObj(getQueryParam('wrapperStyles')); + return ( +
+ + Кнопка, ] + : null + } + subAddons={ + boolean('subAddons', false) + ? [ + , + , + ] + : null + } + row + rowLimit={select('rowLimit', [undefined, 1, 2, 3], 3)} + > + {text('children', 'Вам одобрено. Согласитесь на предложение')} + +
+ ); + }, +}; + +export default meta; diff --git a/packages/plate/src/docs/component.stories.mdx b/packages/plate/src/docs/component.stories.mdx deleted file mode 100644 index 129ae9b77b..0000000000 --- a/packages/plate/src/docs/component.stories.mdx +++ /dev/null @@ -1,123 +0,0 @@ -import { Meta, Story, ArgsTable, Markdown } from '@storybook/addon-docs'; -import { select, text, boolean } from '@storybook/addon-knobs'; -import { CssVars, ComponentHeader, Tabs } from 'storybook/blocks'; -import { CheckmarkOnCircleMIcon } from '@alfalab/icons-glyph/CheckmarkOnCircleMIcon'; -import { ExclamationCircleMIcon } from '@alfalab/icons-glyph/ExclamationCircleMIcon'; -import { DiamondsMIcon } from '@alfalab/icons-glyph/DiamondsMIcon'; -import { Plate } from '@alfalab/core-components-plate'; -import { Button } from '@alfalab/core-components-button'; -import { Badge } from '@alfalab/core-components-badge'; - -import { Plate as PlateTS } from '../Component'; -import Description from './description.mdx'; -import Changelog from '../../CHANGELOG.md?raw'; -import styles from '!!raw-loader!../index.module.css'; - -import packageJson from '../../package.json'; -import { - stylesStringToObj, - getQueryParam, -} from '../../../screenshot-utils/screenshots-story/utils'; - - - -{/* Canvas */} - - - {React.createElement(() => { - const VIEWS_MAP = { - common: { - addon: ( - } /> - ), - }, - negative: { - addon: ( - } /> - ), - }, - positive: { - addon: ( - } /> - ), - }, - attention: { - addon: ( - } /> - ), - }, - custom: { addon: }, - }; - const view = select('view', Object.keys(VIEWS_MAP), 'positive'); - const previewStyles = stylesStringToObj(getQueryParam('wrapperStyles')); - return ( -
- - Кнопка, ] - : null - } - subAddons={ - boolean('subAddons', false) - ? [ - , - , - ] - : null - } - row - rowLimit={select('rowLimit', [undefined, 1, 2, 3])} - > - {text('children', 'Вам одобрено. Согласитесь на предложение')} - -
- ); - })} - - -{/* Docs */} - - - -```jsx -import { Plate } from '@alfalab/core-components/plate'; -``` - -} - changelog={{Changelog}} - props={} - cssVars={} -/> diff --git a/packages/plate/src/docs/development.mdx b/packages/plate/src/docs/development.mdx new file mode 100644 index 0000000000..dd1334322a --- /dev/null +++ b/packages/plate/src/docs/development.mdx @@ -0,0 +1,23 @@ +import { ArgsTable } from '@storybook/addon-docs'; +import { CssVars } from 'storybook/blocks'; +import { Plate } from '../Component.responsive'; +import { PlateMobile } from '../Component.mobile'; +import { PlateDesktop } from '../Component.desktop'; +import styles from '!!raw-loader!../components/base-plate/index.module.css'; + +## Подключение + +```jsx +import { Plate } from '@alfalab/core-components/plate'; +import { PlateMobile } from '@alfalab/core-components/plate/mobile'; +import { PlateDesktop } from '@alfalab/core-components/plate/desktop'; +``` +Из индекса импортируется responsive версия компонента. + +## Свойства + + + +## Переменные + + diff --git a/packages/plate/src/index.ts b/packages/plate/src/index.ts index e51a5d2440..6e49866c64 100644 --- a/packages/plate/src/index.ts +++ b/packages/plate/src/index.ts @@ -1 +1 @@ -export * from './Component'; +export * from './Component.responsive'; diff --git a/packages/plate/src/mobile.module.css b/packages/plate/src/mobile.module.css new file mode 100644 index 0000000000..68ebe34436 --- /dev/null +++ b/packages/plate/src/mobile.module.css @@ -0,0 +1,10 @@ +@import '../../themes/src/default.css'; + +.bold { + @mixin headline-system-mobile_xsmall; + padding: 6px var(--gap-s) 6px var(--gap-2xs); +} + +.description { + padding: 0 var(--gap-s) var(--gap-2xs) var(--gap-2xs); +} diff --git a/packages/plate/src/mobile.ts b/packages/plate/src/mobile.ts new file mode 100644 index 0000000000..b9fe097b67 --- /dev/null +++ b/packages/plate/src/mobile.ts @@ -0,0 +1 @@ +export * from './Component.mobile'; diff --git a/packages/plate/tsconfig.json b/packages/plate/tsconfig.json index da34061249..1cd47ac928 100644 --- a/packages/plate/tsconfig.json +++ b/packages/plate/tsconfig.json @@ -9,7 +9,5 @@ "@alfalab/core-components-*": ["../*/src"] } }, - "references": [ - { "path": "../button" }, { "path": "../icon-button" } - ] + "references": [{ "path": "../button" }, { "path": "../icon-button" }, { "path": "../mq" }] } diff --git a/tsconfig.json b/tsconfig.json index f6f7b73c66..36af37a5ed 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -22,7 +22,8 @@ "@alfalab/core-components-select/*": ["packages/select/src/*"], "@alfalab/core-components-*": ["packages/*/src"], "@alfalab/core-components-icon-view/*": ["packages/icon-view/src/*"], - "@alfalab/core-components-picker-button/*": ["packages/picker-button/src/*"] + "@alfalab/core-components-picker-button/*": ["packages/picker-button/src/*"], + "@alfalab/core-components-plate/*": ["packages/plate/src/*"] } }, "exclude": ["node_modules", "dist", "**/*.stories*", "**/*.test*"], From 5125d13b9e3f38b9806ab5297b5154f66ec4a78c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=92=D0=B0=D0=BB=D0=B5=D1=80=D0=B8=D1=8F=20=D0=A7=D1=83?= =?UTF-8?q?=D1=80=D0=B8=D1=87=D0=B5=D0=B2=D0=B0?= Date: Mon, 24 Jul 2023 12:55:50 +0300 Subject: [PATCH 2/3] feat(plate): fix design review --- .../src/components/base-plate/Component.tsx | 2 +- .../components/base-plate/index.module.css | 4 - packages/plate/src/desktop.module.css | 4 + packages/plate/src/docs/description.mdx | 100 ++++++++++-------- packages/plate/src/mobile.module.css | 4 + 5 files changed, 62 insertions(+), 52 deletions(-) diff --git a/packages/plate/src/components/base-plate/Component.tsx b/packages/plate/src/components/base-plate/Component.tsx index ca488cceb5..cb4cb41fac 100644 --- a/packages/plate/src/components/base-plate/Component.tsx +++ b/packages/plate/src/components/base-plate/Component.tsx @@ -316,7 +316,7 @@ export const BasePlate = forwardRef( )} {hasButtons && ( -
+
- Подробнее, ]} - leftAddons={} />} - /> +render(() => { + const isMobile = document.body.clientWidth < 450; + return ( + + Подробнее, ]} + buttons={isMobile && [, ]} + leftAddons={} />} + /> - Хорошо]} - leftAddons={} />} - /> + Хорошо]} + leftAddons={} />} + /> - } />} - /> - } /> - } - /> - } /> - } - /> - } /> - } - /> - + } />} + /> + } /> + } + /> + } /> + } + /> + } /> + } + /> + + ); +}); ``` ### Механики diff --git a/packages/plate/src/mobile.module.css b/packages/plate/src/mobile.module.css index 68ebe34436..11f752e866 100644 --- a/packages/plate/src/mobile.module.css +++ b/packages/plate/src/mobile.module.css @@ -8,3 +8,7 @@ .description { padding: 0 var(--gap-s) var(--gap-2xs) var(--gap-2xs); } + +.footer { + padding: var(--gap-s) 0 var(--gap-2xs) var(--gap-2xs); +} From e6da7e94bca58822d20ab5536dbac38035ee5021 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=92=D0=B0=D0=BB=D0=B5=D1=80=D0=B8=D1=8F=20=D0=A7=D1=83?= =?UTF-8?q?=D1=80=D0=B8=D1=87=D0=B5=D0=B2=D0=B0?= Date: Wed, 26 Jul 2023 15:10:15 +0300 Subject: [PATCH 3/3] feat(plate): fix docs --- .../src/components/base-plate/Component.tsx | 5 +- .../components/base-plate/index.module.css | 4 + packages/plate/src/docs/description.mdx | 76 +++++++++++-------- 3 files changed, 51 insertions(+), 34 deletions(-) diff --git a/packages/plate/src/components/base-plate/Component.tsx b/packages/plate/src/components/base-plate/Component.tsx index cb4cb41fac..12a1488a39 100644 --- a/packages/plate/src/components/base-plate/Component.tsx +++ b/packages/plate/src/components/base-plate/Component.tsx @@ -319,7 +319,10 @@ export const BasePlate = forwardRef(
- Подробнее]} - leftAddons={} />} - /> - Подробнее]} - leftAddons={} />} - /> - Подробнее]} - leftAddons={} />} - /> - Подробнее]} - leftAddons={} />} - /> - +```jsx live mobileHeight={510} +render(() => { + const isMobile = document.body.clientWidth < 450; + return ( + + Подробнее]} + buttons={isMobile && []} + leftAddons={} />} + /> + Подробнее]} + buttons={isMobile && []} + leftAddons={} />} + /> + Подробнее]} + buttons={isMobile && []} + leftAddons={} />} + /> + Подробнее]} + buttons={isMobile && []} + leftAddons={} />} + /> + + ); +}); ``` ### Фон Компоненту может быть задан произвольный фон с использованием токенов из набора bg или передано фоновое изображение. При необходимости для плашки может быть включена тень. -```jsx live +```jsx live mobileHeight={560} render(() => { const isMobile = document.body.clientWidth < 450; return ( @@ -65,7 +74,8 @@ render(() => { view='negative' hasCloser title='Компонент плашки' - subAddons={[]} + subAddons={!isMobile && []} + buttons={isMobile && []} leftAddons={} />} />