From ba2570c07eb22ef1b6a03289cee5f6934e599a11 Mon Sep 17 00:00:00 2001 From: Ilya Severov Date: Fri, 3 Jul 2026 13:53:21 +0300 Subject: [PATCH] =?UTF-8?q?feature:=20=D0=A0=D0=B5=D1=81=D1=82=D1=80=D1=83?= =?UTF-8?q?=D0=BA=D1=82=D1=83=D1=80=D0=B8=D0=B7=D0=B0=D1=86=D0=B8=D1=8F=20?= =?UTF-8?q?=D0=B1=D0=B8=D0=B1=D0=BB=D0=B8=D0=BE=D1=82=D0=B5=D0=BA=D0=B8=20?= =?UTF-8?q?=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5=D0=BD=D1=82=D0=BE?= =?UTF-8?q?=D0=B2=20=D0=B2=20=D1=81=D0=BE=D0=BE=D1=82=D0=B2=D0=B5=D1=82?= =?UTF-8?q?=D1=81=D1=82=D0=B2=D0=B8=D0=B8=20=D1=81=20=D0=BC=D0=B0=D0=BA?= =?UTF-8?q?=D0=B5=D1=82=D0=BE=D0=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../AvatarCloseButton/AvatarCloseButton.tsx | 2 +- .../AvatarContainer.stories.tsx | 2 +- src/components/Button/Button.stories.tsx | 4 +- src/components/Button/Button.tsx | 3 +- src/components/Button/helpers.ts | 21 +- .../CellAction/CellAction.stories.tsx | 4 +- src/components/CellAction/CellAction.tsx | 2 +- .../CellHeader/CellHeader.stories.tsx | 4 +- .../CellInput/CellInput.stories.tsx | 2 +- src/components/CellInput/CellInput.tsx | 3 +- src/components/CellList/CellList.stories.tsx | 4 +- .../CellSimple/CellSimple.stories.tsx | 4 +- src/components/CellSimple/CellSimple.tsx | 2 +- .../ClearableInput/ClearableInput.module.scss | 9 - .../Container/Container.stories.tsx | 53 ----- src/components/Counter/Counter.module.scss | 2 +- src/components/Dot/Dot.stories.tsx | 55 ------ src/components/Dot/Dot.tsx | 3 + .../EllipsisText/EllipsisText.stories.tsx | 32 --- src/components/Flex/Flex.stories.tsx | 37 ---- src/components/Grid/Grid.stories.tsx | 39 ---- .../IconButton/IconButton.stories.tsx | 2 +- src/components/IconButton/IconButton.tsx | 2 +- src/components/Input/Input.tsx | 2 +- src/components/Panel/Panel.stories.tsx | 131 ------------- src/components/Ripple/Ripple.stories.tsx | 29 --- .../SearchInput/SearchInput.module.scss | 74 ------- .../SearchInput/SearchInput.stories.tsx | 33 ---- src/components/SearchInput/SearchInput.tsx | 51 ----- src/components/SearchInput/index.ts | 1 - src/components/Switch/Switch.stories.tsx | 52 ----- src/components/Switch/Switch.tsx | 3 + src/components/Textarea/Textarea.stories.tsx | 2 +- .../ToolButton/ToolButton.stories.tsx | 68 ------- src/components/ToolButton/ToolButton.tsx | 6 +- src/components/index.ts | 10 - src/compositions/Profile/Profile.module.scss | 20 -- src/compositions/Profile/Profile.stories.tsx | 20 -- src/compositions/Profile/Profile.tsx | 182 ------------------ src/compositions/Profile/index.ts | 1 - .../ClearableInput/ClearableInput.module.scss | 16 ++ .../ClearableInput/ClearableInput.tsx | 8 +- .../ClearableInput/index.ts | 0 .../Container/Container.module.scss | 0 .../Container/Container.tsx | 0 .../Container/index.ts | 0 .../EllipsisText/EllipsisText.module.scss | 0 .../EllipsisText/EllipsisText.tsx | 0 .../EllipsisText/index.ts | 0 .../Flex/Flex.module.scss | 0 src/{components => internal}/Flex/Flex.tsx | 0 src/{components => internal}/Flex/index.ts | 0 .../Grid/Grid.module.scss | 0 src/{components => internal}/Grid/Grid.tsx | 0 src/{components => internal}/Grid/index.ts | 0 .../Panel/Panel.module.scss | 0 src/{components => internal}/Panel/Panel.tsx | 0 src/{components => internal}/Panel/index.ts | 0 .../Ripple/Ripple.module.scss | 0 .../Ripple/Ripple.tsx | 0 src/{components => internal}/Ripple/index.ts | 0 .../SvgButton/SvgButton.module.scss | 0 .../SvgButton/SvgButton.tsx | 0 .../SvgButton/index.ts | 0 .../Tappable/Tappable.module.scss | 0 .../Tappable/Tappable.tsx | 0 .../Tappable/helpers.ts | 0 .../Tappable/index.ts | 0 src/internal/index.ts | 9 + 69 files changed, 71 insertions(+), 938 deletions(-) delete mode 100644 src/components/ClearableInput/ClearableInput.module.scss delete mode 100644 src/components/Container/Container.stories.tsx delete mode 100644 src/components/Dot/Dot.stories.tsx delete mode 100644 src/components/EllipsisText/EllipsisText.stories.tsx delete mode 100644 src/components/Flex/Flex.stories.tsx delete mode 100644 src/components/Grid/Grid.stories.tsx delete mode 100644 src/components/Panel/Panel.stories.tsx delete mode 100644 src/components/Ripple/Ripple.stories.tsx delete mode 100644 src/components/SearchInput/SearchInput.module.scss delete mode 100644 src/components/SearchInput/SearchInput.stories.tsx delete mode 100644 src/components/SearchInput/SearchInput.tsx delete mode 100644 src/components/SearchInput/index.ts delete mode 100644 src/components/Switch/Switch.stories.tsx delete mode 100644 src/components/ToolButton/ToolButton.stories.tsx delete mode 100644 src/compositions/Profile/Profile.module.scss delete mode 100644 src/compositions/Profile/Profile.stories.tsx delete mode 100644 src/compositions/Profile/Profile.tsx delete mode 100644 src/compositions/Profile/index.ts create mode 100644 src/internal/ClearableInput/ClearableInput.module.scss rename src/{components => internal}/ClearableInput/ClearableInput.tsx (90%) rename src/{components => internal}/ClearableInput/index.ts (100%) rename src/{components => internal}/Container/Container.module.scss (100%) rename src/{components => internal}/Container/Container.tsx (100%) rename src/{components => internal}/Container/index.ts (100%) rename src/{components => internal}/EllipsisText/EllipsisText.module.scss (100%) rename src/{components => internal}/EllipsisText/EllipsisText.tsx (100%) rename src/{components => internal}/EllipsisText/index.ts (100%) rename src/{components => internal}/Flex/Flex.module.scss (100%) rename src/{components => internal}/Flex/Flex.tsx (100%) rename src/{components => internal}/Flex/index.ts (100%) rename src/{components => internal}/Grid/Grid.module.scss (100%) rename src/{components => internal}/Grid/Grid.tsx (100%) rename src/{components => internal}/Grid/index.ts (100%) rename src/{components => internal}/Panel/Panel.module.scss (100%) rename src/{components => internal}/Panel/Panel.tsx (100%) rename src/{components => internal}/Panel/index.ts (100%) rename src/{components => internal}/Ripple/Ripple.module.scss (100%) rename src/{components => internal}/Ripple/Ripple.tsx (100%) rename src/{components => internal}/Ripple/index.ts (100%) rename src/{components => internal}/SvgButton/SvgButton.module.scss (100%) rename src/{components => internal}/SvgButton/SvgButton.tsx (100%) rename src/{components => internal}/SvgButton/index.ts (100%) rename src/{components => internal}/Tappable/Tappable.module.scss (100%) rename src/{components => internal}/Tappable/Tappable.tsx (100%) rename src/{components => internal}/Tappable/helpers.ts (100%) rename src/{components => internal}/Tappable/index.ts (100%) create mode 100644 src/internal/index.ts diff --git a/src/components/Avatar/parts/AvatarCloseButton/AvatarCloseButton.tsx b/src/components/Avatar/parts/AvatarCloseButton/AvatarCloseButton.tsx index 5c8f9a0..64941af 100644 --- a/src/components/Avatar/parts/AvatarCloseButton/AvatarCloseButton.tsx +++ b/src/components/Avatar/parts/AvatarCloseButton/AvatarCloseButton.tsx @@ -2,7 +2,7 @@ import { clsx } from 'clsx'; import { type ComponentProps, forwardRef, type MouseEventHandler } from 'react'; import { Icon20CloseFilled } from '../../../../icons'; -import { SvgButton } from '../../../SvgButton'; +import { SvgButton } from '../../../../internal'; import { useAvatarContainerContext } from '../AvatarContainer/AvatarContainerContext'; import styles from './AvatarCloseButton.module.scss'; import { getButtonSize } from './helpers'; diff --git a/src/components/Avatar/parts/AvatarContainer/AvatarContainer.stories.tsx b/src/components/Avatar/parts/AvatarContainer/AvatarContainer.stories.tsx index 60cba47..41441b1 100644 --- a/src/components/Avatar/parts/AvatarContainer/AvatarContainer.stories.tsx +++ b/src/components/Avatar/parts/AvatarContainer/AvatarContainer.stories.tsx @@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite'; import Icon16Placeholder from '../../../../../.storybook/assets/icons/icon-16-placeholder.svg'; import Icon24Placeholder from '../../../../../.storybook/assets/icons/icon-24-placeholder.svg'; import { hideArgsControl } from '../../../../../.storybook/shared/args-manager'; -import { Flex } from '../../../Flex'; +import { Flex } from '../../../../internal'; import { IconButton } from '../../../IconButton'; import { Avatar } from '../../index'; import { AvatarContainer, type AvatarContainerProps } from './AvatarContainer'; diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx index 6ef6d21..3e569b2 100644 --- a/src/components/Button/Button.stories.tsx +++ b/src/components/Button/Button.stories.tsx @@ -7,7 +7,7 @@ import { OverlayContainer } from '../../../.storybook/components/OverlayContaine import { hideArgsControl } from '../../../.storybook/shared/args-manager'; import { useColorScheme } from '../../hooks'; import { Counter } from '../Counter'; -import { Dot } from '../Dot'; +import { Dot } from '../Dot/'; import { Button, type ButtonProps, type ButtonSize } from './Button'; const iconsMapping: Record = { @@ -29,7 +29,7 @@ const meta = { iconAfter: { control: 'boolean' }, indicator: { options: [0, 1, 2], - mapping: [undefined, , ], + mapping: [undefined, , ], control: { type: 'select', labels: ['None', 'Counter', 'Dot'] diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index a53cb75..1fef2e9 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -4,9 +4,8 @@ import { type ComponentProps, type ElementType, forwardRef, type MouseEventHandl import { getSubtree, hasReactNode } from '../../helpers'; import { useButtonLikeProps, usePlatform } from '../../hooks'; +import { EllipsisText, Ripple } from '../../internal'; import { type AsChildProp, type InnerClassNamesProp } from '../../types'; -import { EllipsisText } from '../EllipsisText'; -import { Ripple } from '../Ripple'; import { Spinner } from '../Spinner'; import styles from './Button.module.scss'; import { getButtonSpinnerAppearance, getButtonSpinnerSize, injectButtonIndicator } from './helpers'; diff --git a/src/components/Button/helpers.ts b/src/components/Button/helpers.ts index d6286f0..fc4020b 100644 --- a/src/components/Button/helpers.ts +++ b/src/components/Button/helpers.ts @@ -28,26 +28,26 @@ export const getButtonSpinnerAppearance = (buttonVariant: ButtonVariant): Spinne } }; -export const getButtonCounterAppearance = (buttonVariant: ButtonVariant): Pick => { +export const getButtonCounterAppearance = (buttonVariant: ButtonVariant): Pick => { switch (buttonVariant) { case 'primary': - return { mode: 'inverse', appearance: 'themed' }; + return { variant: 'primary-contrast' }; case 'secondary': - return { mode: 'filled', appearance: 'themed' }; + return { variant: 'static' }; case 'ghost': - return { mode: 'filled', appearance: 'themed' }; + return { variant: 'static' }; case 'primary-contrast': - return { mode: 'filled', appearance: 'neutral-static' }; + return { variant: 'static' }; case 'secondary-contrast': - return { mode: 'filled', appearance: 'neutral-static' }; + return { variant: 'static' }; case 'overlay': - return { mode: 'filled', appearance: 'neutral-static' }; + return { variant: 'static-contrast' }; case 'destructive': - return { mode: 'inverse', appearance: 'negative' }; + return { variant: 'attention-contrast' }; } }; -export const injectButtonIndicator = (indicatorNode: ReactNode, buttonVariant: ButtonVariant, disabled?: boolean): ReactNode => { +export const injectButtonIndicator = (indicatorNode: ReactNode, buttonVariant: ButtonVariant): ReactNode => { if (!isValidElement(indicatorNode)) { return indicatorNode; } @@ -56,8 +56,7 @@ export const injectButtonIndicator = (indicatorNode: ReactNode, buttonVariant: B return cloneElement( indicatorNode as ReactElement, { - ...getButtonCounterAppearance(buttonVariant), - disabled + ...getButtonCounterAppearance(buttonVariant) } ); } diff --git a/src/components/CellAction/CellAction.stories.tsx b/src/components/CellAction/CellAction.stories.tsx index e4b64e2..441f1c0 100644 --- a/src/components/CellAction/CellAction.stories.tsx +++ b/src/components/CellAction/CellAction.stories.tsx @@ -3,11 +3,11 @@ import { fn } from 'storybook/test'; import Icon28Placeholder from '../../../.storybook/assets/icons/icon-28-placeholder.svg'; import { hideArgsControl } from '../../../.storybook/shared/args-manager'; -import { EllipsisText } from '../EllipsisText'; +import { EllipsisText } from '../../internal'; import { CellAction, type CellActionProps } from './CellAction'; const meta = { - title: 'Common/CellAction', + title: 'Common/Cell/CellAction', component: CellAction, argTypes: { ...hideArgsControl(['asChild', 'innerClassNames']), diff --git a/src/components/CellAction/CellAction.tsx b/src/components/CellAction/CellAction.tsx index 32c31bd..d34e2c9 100644 --- a/src/components/CellAction/CellAction.tsx +++ b/src/components/CellAction/CellAction.tsx @@ -4,8 +4,8 @@ import { type ComponentProps, forwardRef, type ReactNode } from 'react'; import { getSubtree, hasReactNode } from '../../helpers'; import { Icon16Chevron } from '../../icons'; +import { Tappable } from '../../internal'; import { type AsChildProp, type InnerClassNamesProp, type MergeProps } from '../../types'; -import { Tappable } from '../Tappable'; import styles from './CellAction.module.scss'; export type CellActionMode = 'primary' | 'destructive' | 'custom'; diff --git a/src/components/CellHeader/CellHeader.stories.tsx b/src/components/CellHeader/CellHeader.stories.tsx index 2911647..5b4f4d9 100644 --- a/src/components/CellHeader/CellHeader.stories.tsx +++ b/src/components/CellHeader/CellHeader.stories.tsx @@ -2,15 +2,15 @@ import type { Meta, StoryObj } from '@storybook/react-vite'; import Icon16Placeholder from '../../../.storybook/assets/icons/icon-16-placeholder.svg'; import { hideArgsControl } from '../../../.storybook/shared/args-manager'; +import { Panel } from '../../internal'; import { Avatar } from '../Avatar'; import { CellList } from '../CellList'; import { CellSimple } from '../CellSimple'; -import { Panel } from '../Panel'; import { Typography } from '../Typography'; import { CellHeader, type CellHeaderProps } from './CellHeader'; const meta = { - title: 'Common/CellHeader', + title: 'Common/Cell/CellHeader', component: CellHeader, argTypes: { ...hideArgsControl(['innerClassNames']), diff --git a/src/components/CellInput/CellInput.stories.tsx b/src/components/CellInput/CellInput.stories.tsx index b7b0ae9..1ebbe5d 100644 --- a/src/components/CellInput/CellInput.stories.tsx +++ b/src/components/CellInput/CellInput.stories.tsx @@ -4,7 +4,7 @@ import { hideArgsControl } from '../../../.storybook/shared/args-manager'; import { CellInput, type CellInputProps } from './CellInput'; const meta = { - title: 'Common/CellInput', + title: 'Common/Cell/CellInput', component: CellInput, argTypes: { ...hideArgsControl(['innerClassNames']), diff --git a/src/components/CellInput/CellInput.tsx b/src/components/CellInput/CellInput.tsx index 504d1cd..21302b9 100644 --- a/src/components/CellInput/CellInput.tsx +++ b/src/components/CellInput/CellInput.tsx @@ -2,9 +2,8 @@ import { clsx } from 'clsx'; import { type ComponentProps, forwardRef, type ReactNode } from 'react'; import { hasReactNode } from '../../helpers'; +import { ClearableInput, EllipsisText } from '../../internal'; import { type InnerClassNamesProp } from '../../types'; -import { ClearableInput } from '../ClearableInput'; -import { EllipsisText } from '../EllipsisText'; import styles from './CellInput.module.scss'; export type CellInputHeight = 'compact' | 'normal'; diff --git a/src/components/CellList/CellList.stories.tsx b/src/components/CellList/CellList.stories.tsx index 18a6f59..94d35b2 100644 --- a/src/components/CellList/CellList.stories.tsx +++ b/src/components/CellList/CellList.stories.tsx @@ -1,13 +1,13 @@ import type { Meta, StoryObj } from '@storybook/react-vite'; +import { Panel } from '../../internal'; import { Avatar } from '../Avatar'; import { CellHeader } from '../CellHeader'; import { CellSimple } from '../CellSimple'; -import { Panel } from '../Panel'; import { CellList, type CellListProps } from './CellList'; const meta = { - title: 'Common/CellList', + title: 'Common/Cell/CellList', component: CellList, argTypes: { header: { diff --git a/src/components/CellSimple/CellSimple.stories.tsx b/src/components/CellSimple/CellSimple.stories.tsx index 5fddec2..9310e6a 100644 --- a/src/components/CellSimple/CellSimple.stories.tsx +++ b/src/components/CellSimple/CellSimple.stories.tsx @@ -3,14 +3,14 @@ import { fn } from 'storybook/test'; import Icon24Placeholder from '../../../.storybook/assets/icons/icon-24-placeholder.svg'; import { hideArgsControl } from '../../../.storybook/shared/args-manager'; +import { EllipsisText } from '../../internal'; import { Avatar } from '../Avatar'; import { Button } from '../Button'; import { Counter } from '../Counter'; -import { EllipsisText } from '../EllipsisText'; import { CellSimple, type CellSimpleProps } from './CellSimple'; const meta = { - title: 'Common/CellSimple', + title: 'Common/Cell/CellSimple', component: CellSimple, argTypes: { ...hideArgsControl(['asChild', 'innerClassNames', 'onClick', 'as']), diff --git a/src/components/CellSimple/CellSimple.tsx b/src/components/CellSimple/CellSimple.tsx index ec60bbe..295e968 100644 --- a/src/components/CellSimple/CellSimple.tsx +++ b/src/components/CellSimple/CellSimple.tsx @@ -4,8 +4,8 @@ import { type ComponentProps, type ElementType, forwardRef, type ReactNode } fro import { getSubtree, hasReactNode } from '../../helpers'; import { Icon16Chevron } from '../../icons'; +import { Tappable } from '../../internal'; import { type AsChildProp, type InnerClassNamesProp, type MergeProps } from '../../types'; -import { Tappable } from '../Tappable'; import styles from './CellSimple.module.scss'; export type CellSimpleHeight = 'compact' | 'normal'; diff --git a/src/components/ClearableInput/ClearableInput.module.scss b/src/components/ClearableInput/ClearableInput.module.scss deleted file mode 100644 index af76899..0000000 --- a/src/components/ClearableInput/ClearableInput.module.scss +++ /dev/null @@ -1,9 +0,0 @@ -.ClearableInput { - display: flex; - align-items: center; -} - -// [Parts] Clear button -.ClearableInput__button { - padding: 2px; -} diff --git a/src/components/Container/Container.stories.tsx b/src/components/Container/Container.stories.tsx deleted file mode 100644 index 2483722..0000000 --- a/src/components/Container/Container.stories.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react-vite'; - -import { hideArgsControl } from '../../../.storybook/shared/args-manager'; -import { Button } from '../Button'; -import { Flex } from '../Flex'; -import { Container, type ContainerProps } from './Container'; - -const meta = { - title: 'Layout/Container', - component: Container, - argTypes: { - ...hideArgsControl(['asChild']) - }, - args: { - fullWidth: false - }, - decorators: [ - (Story) => ( -
- -
- ) - ] -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -export const Playground: Story = { - render: ({ ...args }) => { - return ( - - - - - - - - ); - } -}; diff --git a/src/components/Counter/Counter.module.scss b/src/components/Counter/Counter.module.scss index dd86d3f..9a222de 100644 --- a/src/components/Counter/Counter.module.scss +++ b/src/components/Counter/Counter.module.scss @@ -1,7 +1,7 @@ @use '../../styles/shared-mixins/typography'; @mixin withoutBackgroundColor { - background-color: transparent; + background-color: var(--background-accent-contrast-secondary); } @mixin textColorPrimary { color: var(--text-primary-inverse) diff --git a/src/components/Dot/Dot.stories.tsx b/src/components/Dot/Dot.stories.tsx deleted file mode 100644 index 6fc4273..0000000 --- a/src/components/Dot/Dot.stories.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react-vite'; - -import { OverlayContainer } from '../../../.storybook/components/OverlayContainer'; -import { useColorScheme } from '../../hooks'; -import { Button } from '../Button'; -import { Dot, type DotProps } from './Dot'; - -const meta = { - title: 'Common/Dot', - component: Dot, - args: { - appearance: 'themed' - }, - decorators: [ - (Story, context) => { - const colorScheme = useColorScheme(); - - return ( - - - - ); - } - ] -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -export const Playground: Story = { - render: ({ ...args }) => { - return ( - - ); - } -}; - -export const DotInButton: Story = { - name: 'Dot in Button', - args: { - appearance: 'inherit' - }, - render: ({ ...args }) => { - return ( - - ); - } -}; diff --git a/src/components/Dot/Dot.tsx b/src/components/Dot/Dot.tsx index 0b41f79..b2788f0 100644 --- a/src/components/Dot/Dot.tsx +++ b/src/components/Dot/Dot.tsx @@ -9,6 +9,9 @@ export interface DotProps extends ComponentProps<'span'> { appearance?: DotAppearance } +/** + * @deprecated Компонент будет удален в грядущей минорной версии. + */ export const Dot = forwardRef((props, ref) => { const { className, diff --git a/src/components/EllipsisText/EllipsisText.stories.tsx b/src/components/EllipsisText/EllipsisText.stories.tsx deleted file mode 100644 index 4590d89..0000000 --- a/src/components/EllipsisText/EllipsisText.stories.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react-vite'; - -import { hideArgsControl } from '../../../.storybook/shared/args-manager'; -import { EllipsisText, type EllipsisTextProps } from './EllipsisText'; - -const meta = { - title: 'Helpers/EllipsisText', - component: EllipsisText, - argTypes: { - ...hideArgsControl(['asChild']) - }, - args: { - children: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', - maxLines: 1 - }, - decorators: [ - (Story) => ( -
- -
- ) - ] -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -export const Playground: Story = { - render: ({ ...args }) => { - return ; - } -}; diff --git a/src/components/Flex/Flex.stories.tsx b/src/components/Flex/Flex.stories.tsx deleted file mode 100644 index c7787d6..0000000 --- a/src/components/Flex/Flex.stories.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react-vite'; - -import { hideArgsControl } from '../../../.storybook/shared/args-manager'; -import { Flex, type FlexProps } from './Flex'; - -const meta = { - title: 'Layout/Flex', - component: Flex, - argTypes: { - ...hideArgsControl(['asChild']) - }, - args: { - gap: 12 - } -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -export const Playground: Story = { - render: ({ ...args }) => { - return ( - - {[...Array(5)].map((_, index) => ( -
- ))} - - ); - } -}; diff --git a/src/components/Grid/Grid.stories.tsx b/src/components/Grid/Grid.stories.tsx deleted file mode 100644 index 66aa193..0000000 --- a/src/components/Grid/Grid.stories.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react-vite'; - -import { hideArgsControl } from '../../../.storybook/shared/args-manager'; -import { Grid, type GridProps } from './Grid'; - -const meta = { - title: 'Layout/Grid', - component: Grid, - argTypes: { - ...hideArgsControl(['asChild']) - }, - args: { - gapX: 30, - gapY: 10, - cols: 3 - } -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -export const Playground: Story = { - render: ({ ...args }) => { - return ( - - {[...Array(5)].map((_, index) => ( -
- ))} - - ); - } -}; diff --git a/src/components/IconButton/IconButton.stories.tsx b/src/components/IconButton/IconButton.stories.tsx index b4ff819..b7c3be6 100644 --- a/src/components/IconButton/IconButton.stories.tsx +++ b/src/components/IconButton/IconButton.stories.tsx @@ -18,7 +18,7 @@ const iconsMapping: Record = { const contrastVariants: string[] = ['primary-contrast', 'secondary-contrast', 'overlay']; const meta = { - title: 'Common/IconButton', + title: 'Common/Button/IconButton', component: IconButton, argTypes: { ...hideArgsControl(['asChild', 'innerClassNames']), diff --git a/src/components/IconButton/IconButton.tsx b/src/components/IconButton/IconButton.tsx index 6406736..a6d77ec 100644 --- a/src/components/IconButton/IconButton.tsx +++ b/src/components/IconButton/IconButton.tsx @@ -4,9 +4,9 @@ import { type ComponentProps, type ElementType, forwardRef } from 'react'; import { getSubtree } from '../../helpers'; import { useButtonLikeProps, usePlatform } from '../../hooks'; +import { Ripple } from '../../internal'; import { type AsChildProp, type InnerClassNamesProp } from '../../types'; import { type ButtonVariant } from '../Button'; -import { Ripple } from '../Ripple'; import { Spinner } from '../Spinner'; import { getIconButtonSpinnerAppearance, getIconButtonSpinnerSize } from './helpers'; import styles from './IconButton.module.scss'; diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx index 64a2e2b..197ff4e 100644 --- a/src/components/Input/Input.tsx +++ b/src/components/Input/Input.tsx @@ -5,8 +5,8 @@ import { } from 'react'; import { hasReactNode } from '../../helpers'; +import { ClearableInput } from '../../internal'; import { type InnerClassNamesProp } from '../../types'; -import { ClearableInput } from '../ClearableInput'; import styles from './Input.module.scss'; export type InputMode = 'default' | 'contrast'; diff --git a/src/components/Panel/Panel.stories.tsx b/src/components/Panel/Panel.stories.tsx deleted file mode 100644 index 9e55c08..0000000 --- a/src/components/Panel/Panel.stories.tsx +++ /dev/null @@ -1,131 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react-vite'; - -import { Avatar } from '../Avatar'; -import { CellList } from '../CellList'; -import { CellSimple } from '../CellSimple'; -import { Typography } from '../Typography'; -import { Panel, type PanelProps } from './Panel'; - -const meta = { - title: 'Common/Panel', - component: Panel, - args: { - mode: 'primary', - centeredX: false, - centeredY: false - }, - decorators: [ - (Story) => ( -
- -
- ) - ] -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -export const Playground: Story = { - render: ({ ...args }) => { - return ( - - Panel body - - ); - } -}; - -export const PrimaryExample: Story = { - name: 'Primary example', - args: { - mode: 'primary', - centeredX: false, - centeredY: false - }, - render: ({ ...args }) => { - return ( - - - - - - )} - showChevron - onClick={() => {}} - /> - - - - )} - showChevron - onClick={() => {}} - /> - - - - )} - showChevron - onClick={() => {}} - /> - - - ); - } -}; - -export const SecondaryExample: Story = { - name: 'Secondary example', - args: { - mode: 'secondary', - centeredX: false, - centeredY: false - }, - render: ({ ...args }) => { - return ( - - - - - - )} - showChevron - onClick={() => {}} - /> - - - - )} - showChevron - onClick={() => {}} - /> - - - - )} - showChevron - onClick={() => {}} - /> - - - ); - } -}; diff --git a/src/components/Ripple/Ripple.stories.tsx b/src/components/Ripple/Ripple.stories.tsx deleted file mode 100644 index 097c33a..0000000 --- a/src/components/Ripple/Ripple.stories.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react-vite'; - -import { Ripple, type RippleProps } from './Ripple'; - -const meta = { - title: 'Helpers/Ripple', - component: Ripple -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -export const Playground: Story = { - render: ({ ...args }) => { - return ( -
- Нажимай на меня!!! - - -
- ); - } -}; diff --git a/src/components/SearchInput/SearchInput.module.scss b/src/components/SearchInput/SearchInput.module.scss deleted file mode 100644 index cb42c43..0000000 --- a/src/components/SearchInput/SearchInput.module.scss +++ /dev/null @@ -1,74 +0,0 @@ -@use '../../styles/shared-mixins/reset-text-field'; -@use '../../styles/shared-mixins/typography'; -@use '../../styles/builders/form-field-modes-builder'; - -.SearchInput { - background-color: var(--background-accent-neutral-fade); - border-radius: var(--size-border-radius-semantic-border-radius); - position: relative; - display: flex; - align-items: center; - - @media (hover: hover) and (pointer: fine) { - &:hover { - background-color: var(--states-background-hovered-neutral-fade); - } - } - - &:active { - background-color: var(--states-background-pressed-neutral-fade); - } -} - -// [Parts] Body -.SearchInput__body { - flex-grow: 1; -} - -// [Parts] Search icon -.SearchInput__icon { - position: absolute; - top: 0; - bottom: 0; - margin-top: auto; - left: var(--spacing-size-xl); - color: var(--icon-tertiary); - margin-bottom: auto; - width: 16px; - height: 16px; -} - -// [Parts] Clear button -.SearchInput__clearButton { - display: flex; - padding-left: var(--spacing-size-m); - padding-right: var(--spacing-size-m); -} - -// [Parts] Input -.SearchInput__input { - @include reset-text-field.resetTextField; - @include typography.bodyLarge; - - box-sizing: border-box; - width: 100%; - - .SearchInput_platform_ios & { - padding: - var(--spacing-size-m) - 0 - var(--spacing-size-m) - calc(var(--spacing-size-xl) + var(--spacing-size-m) + 16px); - } - - .SearchInput_platform_android & { - padding: - var(--spacing-size-l) - 0 - var(--spacing-size-l) - calc(var(--spacing-size-xl) + var(--spacing-size-m) + 16px); - } -} -.SearchInput__input::placeholder { - color: var(--text-secondary); -} diff --git a/src/components/SearchInput/SearchInput.stories.tsx b/src/components/SearchInput/SearchInput.stories.tsx deleted file mode 100644 index 0f5d370..0000000 --- a/src/components/SearchInput/SearchInput.stories.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react-vite'; - -import { hideArgsControl } from '../../../.storybook/shared/args-manager'; -import { SearchInput, type SearchInputProps } from './SearchInput'; - -const meta = { - title: 'Common/SearchInput', - component: SearchInput, - argTypes: { - ...hideArgsControl(['innerClassNames']) - }, - decorators: [ - (Story) => ( -
- -
- ) - ] -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -export const Playground: Story = { - render: ({ ...args }) => { - return ( - - ); - } -}; diff --git a/src/components/SearchInput/SearchInput.tsx b/src/components/SearchInput/SearchInput.tsx deleted file mode 100644 index 79f4aaf..0000000 --- a/src/components/SearchInput/SearchInput.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import { clsx } from 'clsx'; -import { type ComponentProps, forwardRef } from 'react'; - -import { usePlatform } from '../../hooks'; -import { Icon16SearchOutline } from '../../icons'; -import { type InnerClassNamesProp } from '../../types'; -import { ClearableInput } from '../ClearableInput'; -import styles from './SearchInput.module.scss'; - -export type SearchInputElementKey = 'input' | 'clearButton' | 'body'; - -export interface SearchInputProps extends ComponentProps<'input'> { - innerClassNames?: InnerClassNamesProp -} - -export const SearchInput = forwardRef((props, forwardedRef) => { - const { - className, - placeholder = 'Поиск', - innerClassNames, - ...rest - } = props; - - const platform = usePlatform(); - - const rootClassName = clsx( - styles.SearchInput, - styles[`SearchInput_platform_${platform}`], - className - ); - - return ( - - ); -}); - -SearchInput.displayName = 'SearchInput'; diff --git a/src/components/SearchInput/index.ts b/src/components/SearchInput/index.ts deleted file mode 100644 index 5bd2c96..0000000 --- a/src/components/SearchInput/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { SearchInput, type SearchInputElementKey, type SearchInputProps } from './SearchInput'; diff --git a/src/components/Switch/Switch.stories.tsx b/src/components/Switch/Switch.stories.tsx deleted file mode 100644 index 27d9c92..0000000 --- a/src/components/Switch/Switch.stories.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react-vite'; - -import { CellSimple } from '../CellSimple'; -import { Switch, type SwitchProps } from './Switch'; - -const meta = { - title: 'Forms/Switch', - component: Switch, - args: { - disabled: false - } -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -export const Playground: Story = { - render: ({ ...args }) => { - return ( - - ); - } -}; - -export const WithCell: Story = { - name: 'Cell with Switch', - decorators: [ - (Story) => ( -
- -
- ) - ], - render: ({ ...args }) => { - return ( - - )} - title="Cell" - subtitle="Description" - /> - ); - } -}; diff --git a/src/components/Switch/Switch.tsx b/src/components/Switch/Switch.tsx index 8c31274..c41b75d 100644 --- a/src/components/Switch/Switch.tsx +++ b/src/components/Switch/Switch.tsx @@ -6,6 +6,9 @@ import styles from './Switch.module.scss'; export interface SwitchProps extends ComponentProps<'input'> {} +/** + * @deprecated Компонент будет удален в грядущей минорной версии. + */ export const Switch = forwardRef((props, forwardedRef) => { const { className, diff --git a/src/components/Textarea/Textarea.stories.tsx b/src/components/Textarea/Textarea.stories.tsx index bac3159..8691e31 100644 --- a/src/components/Textarea/Textarea.stories.tsx +++ b/src/components/Textarea/Textarea.stories.tsx @@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite'; import { Textarea, type TextareaProps } from './Textarea'; const meta = { - title: 'Forms/Textarea', + title: 'Forms/Input/Textarea', component: Textarea, args: { mode: 'secondary', diff --git a/src/components/ToolButton/ToolButton.stories.tsx b/src/components/ToolButton/ToolButton.stories.tsx deleted file mode 100644 index f734292..0000000 --- a/src/components/ToolButton/ToolButton.stories.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react-vite'; -import { fn } from 'storybook/test'; - -import Icon24Placeholder from '../../../.storybook/assets/icons/icon-24-placeholder.svg'; -import { hideArgsControl } from '../../../.storybook/shared/args-manager'; -import { Flex } from '../Flex'; -import { Panel } from '../Panel'; -import { ToolButton, type ToolButtonProps } from './ToolButton'; - -const meta = { - title: 'Common/ToolButton', - component: ToolButton, - argTypes: { - ...hideArgsControl(['asChild', 'innerClassNames', 'icon']), - children: { type: 'string' } - }, - args: { - children: 'Button', - icon: , - onClick: fn(), - appearance: 'default', - disabled: false - }, - decorators: [ - (Story) => ( - - - - - - - - - ) - ] -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -export const Playground: Story = { - render: ({ ...args }) => { - return ( - - ); - } -}; - -export const AsLink: Story = { - name: 'As link', - args: { - children: 'Ссылка', - onClick: undefined - }, - render: ({ children, ...args }) => { - return ( - - - {children} - - - ); - } -}; diff --git a/src/components/ToolButton/ToolButton.tsx b/src/components/ToolButton/ToolButton.tsx index 526e972..e4e3ee9 100644 --- a/src/components/ToolButton/ToolButton.tsx +++ b/src/components/ToolButton/ToolButton.tsx @@ -3,9 +3,8 @@ import { clsx } from 'clsx'; import { type ComponentProps, forwardRef, type ReactNode } from 'react'; import { getSubtree, hasReactNode } from '../../helpers'; +import { EllipsisText, Tappable } from '../../internal'; import { type AsChildProp, type InnerClassNamesProp } from '../../types'; -import { EllipsisText } from '../EllipsisText'; -import { Tappable } from '../Tappable'; import styles from './ToolButton.module.scss'; export type ToolButtonAppearance = 'default' | 'secondary'; @@ -17,6 +16,9 @@ export interface ToolButtonProps extends ComponentProps<'button'>, AsChildProp { appearance?: ToolButtonAppearance } +/** + * @deprecated Компонент будет удален в грядущей минорной версии. + */ export const ToolButton = forwardRef((props, forwardedRef) => { const { className, diff --git a/src/components/index.ts b/src/components/index.ts index d4d0946..7582c5a 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -5,22 +5,12 @@ export * from './CellHeader'; export * from './CellInput'; export * from './CellList'; export * from './CellSimple'; -export * from './Container'; export * from './Counter'; -export * from './Dot'; -export * from './EllipsisText'; -export * from './Flex'; -export * from './Grid'; export * from './IconButton'; export * from './Input'; export * from './MaxUI'; -export * from './Panel'; -export * from './Ripple'; -export * from './SearchInput'; export * from './Spinner'; -export * from './SvgButton'; export * from './Switch'; -export * from './Tappable'; export * from './Textarea'; export * from './ToolButton'; export * from './Typography'; diff --git a/src/compositions/Profile/Profile.module.scss b/src/compositions/Profile/Profile.module.scss deleted file mode 100644 index 08f2917..0000000 --- a/src/compositions/Profile/Profile.module.scss +++ /dev/null @@ -1,20 +0,0 @@ -.page { - padding: 20px 0; -} - -.header { - width: 100%; - box-sizing: border-box; -} - -.subsLabel { - color: var(--text-secondary); -} - -.actions { - width: 100%; -} - -.body { - width: 100%; -} diff --git a/src/compositions/Profile/Profile.stories.tsx b/src/compositions/Profile/Profile.stories.tsx deleted file mode 100644 index faa7c84..0000000 --- a/src/compositions/Profile/Profile.stories.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react-vite'; - -import { Profile } from './Profile'; - -const meta = { - title: 'Compositions/Profile', - component: Profile, - decorators: [ - (Story) => ( -
- -
- ) - ] -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -export const Playground: Story = {}; diff --git a/src/compositions/Profile/Profile.tsx b/src/compositions/Profile/Profile.tsx deleted file mode 100644 index 0479590..0000000 --- a/src/compositions/Profile/Profile.tsx +++ /dev/null @@ -1,182 +0,0 @@ -import { type ReactNode } from 'react'; - -import Icon24Placeholder from '../../../.storybook/assets/icons/icon-24-placeholder.svg'; -import { - Avatar, Button, CellAction, - CellHeader, CellInput, - CellList, - CellSimple, Container, Counter, - Flex, - Grid, IconButton, - Panel, Switch, - ToolButton, Typography -} from '../../components'; -import styles from './Profile.module.scss'; - -export const Profile = (): ReactNode => { - return ( - - - - - } - > - - - - - Vadim T. - 1 подписчик - - - - } - onClick={() => {}} - > - Уведомл. - - - } - onClick={() => {}} - > - Поиск - - - } - onClick={() => {}} - > - Аудио - - - } - onClick={() => {}} - > - Еще - - - - - - - О себе} - > - - - - Телефон} - > - {}} - > - +8 888 888 88 88 - - - - - } - onClick={() => {}} - title="Вложения" - after={( - - )} - subtitle="Фото, видео, файлы и ссылки" - /> - - - - Настройки} - > - - - - - - - - )} - /> - - - - - - - - - - - - - - ); -}; - -Profile.displayName = 'Profile'; diff --git a/src/compositions/Profile/index.ts b/src/compositions/Profile/index.ts deleted file mode 100644 index 8668bd1..0000000 --- a/src/compositions/Profile/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { Profile } from './Profile'; diff --git a/src/internal/ClearableInput/ClearableInput.module.scss b/src/internal/ClearableInput/ClearableInput.module.scss new file mode 100644 index 0000000..abfe084 --- /dev/null +++ b/src/internal/ClearableInput/ClearableInput.module.scss @@ -0,0 +1,16 @@ +@use '../../styles/shared-mixins/typography'; + +.ClearableInput { + display: flex; + align-items: center; +} + +// [Parts] Clear button +.ClearableInput__button { + padding: 2px; + } +.ClearableInput__count { + color: var(--icon-tertiary); + padding: 2px; + @include typography.bodySmall; +} diff --git a/src/components/ClearableInput/ClearableInput.tsx b/src/internal/ClearableInput/ClearableInput.tsx similarity index 90% rename from src/components/ClearableInput/ClearableInput.tsx rename to src/internal/ClearableInput/ClearableInput.tsx index 0446a44..e2e5876 100644 --- a/src/components/ClearableInput/ClearableInput.tsx +++ b/src/internal/ClearableInput/ClearableInput.tsx @@ -7,7 +7,7 @@ import { type InnerClassNamesProp } from '../../types'; import { SvgButton } from '../SvgButton'; import styles from './ClearableInput.module.scss'; -export type ClearableInputElementKey = 'input' | 'clearButton'; +export type ClearableInputElementKey = 'input' | 'clearButton' | 'count'; export interface ClearableInputProps extends ComponentProps<'input'> { innerClassNames?: InnerClassNamesProp @@ -48,11 +48,11 @@ export const ClearableInput = forwardRef( /> {!isEmpty && !disabled && !!count && ( - {count} - +
)} {!isEmpty && !disabled && withClearButton && (