From 0285cbba9c911e8083c574de77c6f4e333592f74 Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Tue, 16 Jun 2026 23:15:16 +0300 Subject: [PATCH 1/6] refactor(popover): placeholders structure --- .../src/dropzone-placeholder.component.tsx | 22 -------------- .../upload/src/placeholder-accept/index.ts | 1 - .../placeholder-accept.component.tsx | 16 ---------- ui-admin/upload/src/placeholder-icon/index.ts | 1 - .../placeholder-icon.component.tsx | 16 ---------- ui-admin/upload/src/placeholder-link/index.ts | 1 - .../src/placeholder/accept/component.tsx | 16 ++++++++++ .../upload/src/placeholder/accept/index.ts | 1 + .../accept/styles.css.ts} | 2 +- ...laceholder.component.tsx => component.tsx} | 2 +- .../src/placeholder/dropzone/component.tsx | 29 +++++++++++++++++++ .../upload/src/placeholder/dropzone/index.ts | 2 ++ .../src/placeholder/dropzone/interfaces.ts | 14 +++++++++ .../upload/src/placeholder/icon/component.tsx | 16 ++++++++++ ui-admin/upload/src/placeholder/icon/index.ts | 1 + .../icon/styles.css.ts} | 2 +- ui-admin/upload/src/placeholder/index.ts | 3 +- .../link/component.tsx} | 4 +-- ui-admin/upload/src/placeholder/link/index.ts | 1 + .../link/styles.css.ts} | 2 +- .../{placeholder.css.ts => styles.css.ts} | 0 21 files changed, 88 insertions(+), 64 deletions(-) delete mode 100644 ui-admin/upload/src/dropzone-placeholder.component.tsx delete mode 100644 ui-admin/upload/src/placeholder-accept/index.ts delete mode 100644 ui-admin/upload/src/placeholder-accept/placeholder-accept.component.tsx delete mode 100644 ui-admin/upload/src/placeholder-icon/index.ts delete mode 100644 ui-admin/upload/src/placeholder-icon/placeholder-icon.component.tsx delete mode 100644 ui-admin/upload/src/placeholder-link/index.ts create mode 100644 ui-admin/upload/src/placeholder/accept/component.tsx create mode 100644 ui-admin/upload/src/placeholder/accept/index.ts rename ui-admin/upload/src/{placeholder-accept/placeholder-accept.css.ts => placeholder/accept/styles.css.ts} (81%) rename ui-admin/upload/src/placeholder/{placeholder.component.tsx => component.tsx} (85%) create mode 100644 ui-admin/upload/src/placeholder/dropzone/component.tsx create mode 100644 ui-admin/upload/src/placeholder/dropzone/index.ts create mode 100644 ui-admin/upload/src/placeholder/dropzone/interfaces.ts create mode 100644 ui-admin/upload/src/placeholder/icon/component.tsx create mode 100644 ui-admin/upload/src/placeholder/icon/index.ts rename ui-admin/upload/src/{placeholder-icon/placeholder-icon.css.ts => placeholder/icon/styles.css.ts} (82%) rename ui-admin/upload/src/{placeholder-link/placeholder-link.component.tsx => placeholder/link/component.tsx} (68%) create mode 100644 ui-admin/upload/src/placeholder/link/index.ts rename ui-admin/upload/src/{placeholder-link/placeholder-link.css.ts => placeholder/link/styles.css.ts} (85%) rename ui-admin/upload/src/placeholder/{placeholder.css.ts => styles.css.ts} (100%) diff --git a/ui-admin/upload/src/dropzone-placeholder.component.tsx b/ui-admin/upload/src/dropzone-placeholder.component.tsx deleted file mode 100644 index 124c4037..00000000 --- a/ui-admin/upload/src/dropzone-placeholder.component.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import type { ReactNode } from 'react' -import type { PropsWithChildren } from 'react' - -import { UploadIcon } from '@atls-ui-admin/icons' - -import { PlaceholderAccept } from './placeholder-accept/index.js' -import { PlaceholderIcon } from './placeholder-icon/index.js' -import { PlaceholderLink } from './placeholder-link/index.js' -import { dropzoneContainerStyles } from './container/container.css.js' - -export const DropzonePlaceholder = ({ - accept, - children, -}: PropsWithChildren<{ accept: ReactNode }>): ReactNode => ( -
- - - - {accept} - {children} -
-) diff --git a/ui-admin/upload/src/placeholder-accept/index.ts b/ui-admin/upload/src/placeholder-accept/index.ts deleted file mode 100644 index 224fbd9f..00000000 --- a/ui-admin/upload/src/placeholder-accept/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './placeholder-accept.component.js' diff --git a/ui-admin/upload/src/placeholder-accept/placeholder-accept.component.tsx b/ui-admin/upload/src/placeholder-accept/placeholder-accept.component.tsx deleted file mode 100644 index f3e29088..00000000 --- a/ui-admin/upload/src/placeholder-accept/placeholder-accept.component.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import type { ReactNode } from 'react' -import type { HTMLAttributes } from 'react' - -import { clsx } from 'clsx' - -import { basePlaceholderAcceptStyles } from './placeholder-accept.css.js' - -export const PlaceholderAccept = ({ - children, - className, - ...props -}: HTMLAttributes): ReactNode => ( - - {children} - -) diff --git a/ui-admin/upload/src/placeholder-icon/index.ts b/ui-admin/upload/src/placeholder-icon/index.ts deleted file mode 100644 index 9c7fc046..00000000 --- a/ui-admin/upload/src/placeholder-icon/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './placeholder-icon.component.js' diff --git a/ui-admin/upload/src/placeholder-icon/placeholder-icon.component.tsx b/ui-admin/upload/src/placeholder-icon/placeholder-icon.component.tsx deleted file mode 100644 index d99d041d..00000000 --- a/ui-admin/upload/src/placeholder-icon/placeholder-icon.component.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import type { ReactNode } from 'react' -import type { HTMLAttributes } from 'react' - -import { clsx } from 'clsx' - -import { basePlaceholderIconStyles } from './placeholder-icon.css.js' - -export const PlaceholderIcon = ({ - children, - className, - ...props -}: HTMLAttributes): ReactNode => ( - - {children} - -) diff --git a/ui-admin/upload/src/placeholder-link/index.ts b/ui-admin/upload/src/placeholder-link/index.ts deleted file mode 100644 index 797acb7a..00000000 --- a/ui-admin/upload/src/placeholder-link/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './placeholder-link.component.js' diff --git a/ui-admin/upload/src/placeholder/accept/component.tsx b/ui-admin/upload/src/placeholder/accept/component.tsx new file mode 100644 index 00000000..66504938 --- /dev/null +++ b/ui-admin/upload/src/placeholder/accept/component.tsx @@ -0,0 +1,16 @@ +import type { ReactNode } from 'react' +import type { HTMLAttributes } from 'react' + +import { clsx } from 'clsx' + +import { baseAcceptStyles } from './styles.css.js' + +export const PlaceholderAccept = ({ + children, + className, + ...props +}: HTMLAttributes): ReactNode => ( + + {children} + +) diff --git a/ui-admin/upload/src/placeholder/accept/index.ts b/ui-admin/upload/src/placeholder/accept/index.ts new file mode 100644 index 00000000..b7a15103 --- /dev/null +++ b/ui-admin/upload/src/placeholder/accept/index.ts @@ -0,0 +1 @@ +export * from './component.js' diff --git a/ui-admin/upload/src/placeholder-accept/placeholder-accept.css.ts b/ui-admin/upload/src/placeholder/accept/styles.css.ts similarity index 81% rename from ui-admin/upload/src/placeholder-accept/placeholder-accept.css.ts rename to ui-admin/upload/src/placeholder/accept/styles.css.ts index 76d46e2b..4183eae8 100644 --- a/ui-admin/upload/src/placeholder-accept/placeholder-accept.css.ts +++ b/ui-admin/upload/src/placeholder/accept/styles.css.ts @@ -2,7 +2,7 @@ import { style } from '@vanilla-extract/css' import { vars } from '@atls-ui-admin/theme' -export const basePlaceholderAcceptStyles = style({ +export const baseAcceptStyles = style({ padding: `${vars.space.g8} ${vars.space.zero}`, color: vars.colors['icons.placeholder'], fontFamily: vars.fonts.primary, diff --git a/ui-admin/upload/src/placeholder/placeholder.component.tsx b/ui-admin/upload/src/placeholder/component.tsx similarity index 85% rename from ui-admin/upload/src/placeholder/placeholder.component.tsx rename to ui-admin/upload/src/placeholder/component.tsx index 2207278a..9a65ced6 100644 --- a/ui-admin/upload/src/placeholder/placeholder.component.tsx +++ b/ui-admin/upload/src/placeholder/component.tsx @@ -3,7 +3,7 @@ import type { HTMLAttributes } from 'react' import { clsx } from 'clsx' -import { basePlaceholderStyles } from './placeholder.css.js' +import { basePlaceholderStyles } from './styles.css.js' export const Placeholder = ({ children, diff --git a/ui-admin/upload/src/placeholder/dropzone/component.tsx b/ui-admin/upload/src/placeholder/dropzone/component.tsx new file mode 100644 index 00000000..8355c3cb --- /dev/null +++ b/ui-admin/upload/src/placeholder/dropzone/component.tsx @@ -0,0 +1,29 @@ +import type { ReactNode } from 'react' +import type { PropsWithChildren } from 'react' + +import type { DropzonePlaceholderProps } from './interfaces.js' + +import { clsx } from 'clsx' + +import { UploadIcon } from '@atls-ui-admin/icons' + +import { PlaceholderAccept } from '../accept/index.js' +import { PlaceholderIcon } from '../icon/index.js' +import { PlaceholderLink } from '../link/index.js' +import { dropzoneContainerStyles } from '../../container/container.css.js' + +export const DropzonePlaceholder = ({ + accept, + children, + className, + slotProps, + ...props +}: PropsWithChildren): ReactNode => ( +
+ + + + {accept} + {children} +
+) diff --git a/ui-admin/upload/src/placeholder/dropzone/index.ts b/ui-admin/upload/src/placeholder/dropzone/index.ts new file mode 100644 index 00000000..049e831d --- /dev/null +++ b/ui-admin/upload/src/placeholder/dropzone/index.ts @@ -0,0 +1,2 @@ +export type * from './interfaces.js' +export * from './component.js' diff --git a/ui-admin/upload/src/placeholder/dropzone/interfaces.ts b/ui-admin/upload/src/placeholder/dropzone/interfaces.ts new file mode 100644 index 00000000..8e7d6f11 --- /dev/null +++ b/ui-admin/upload/src/placeholder/dropzone/interfaces.ts @@ -0,0 +1,14 @@ +import type { AnchorHTMLAttributes } from 'react' +import type { HTMLAttributes } from 'react' +import type { ReactNode } from 'react' + +export interface DropzonePlaceholderSlotProps { + icon?: HTMLAttributes + accept?: HTMLAttributes + link?: AnchorHTMLAttributes +} + +export interface DropzonePlaceholderProps extends HTMLAttributes { + accept: ReactNode + slotProps?: DropzonePlaceholderSlotProps +} diff --git a/ui-admin/upload/src/placeholder/icon/component.tsx b/ui-admin/upload/src/placeholder/icon/component.tsx new file mode 100644 index 00000000..a28ab808 --- /dev/null +++ b/ui-admin/upload/src/placeholder/icon/component.tsx @@ -0,0 +1,16 @@ +import type { ReactNode } from 'react' +import type { HTMLAttributes } from 'react' + +import { clsx } from 'clsx' + +import { baseIconStyles } from './styles.css.js' + +export const PlaceholderIcon = ({ + children, + className, + ...props +}: HTMLAttributes): ReactNode => ( + + {children} + +) diff --git a/ui-admin/upload/src/placeholder/icon/index.ts b/ui-admin/upload/src/placeholder/icon/index.ts new file mode 100644 index 00000000..b7a15103 --- /dev/null +++ b/ui-admin/upload/src/placeholder/icon/index.ts @@ -0,0 +1 @@ +export * from './component.js' diff --git a/ui-admin/upload/src/placeholder-icon/placeholder-icon.css.ts b/ui-admin/upload/src/placeholder/icon/styles.css.ts similarity index 82% rename from ui-admin/upload/src/placeholder-icon/placeholder-icon.css.ts rename to ui-admin/upload/src/placeholder/icon/styles.css.ts index bec72dab..788f4e3a 100644 --- a/ui-admin/upload/src/placeholder-icon/placeholder-icon.css.ts +++ b/ui-admin/upload/src/placeholder/icon/styles.css.ts @@ -2,7 +2,7 @@ import { style } from '@vanilla-extract/css' import { vars } from '@atls-ui-admin/theme' -export const basePlaceholderIconStyles = style({ +export const baseIconStyles = style({ padding: `${vars.space.g4} ${vars.space.zero}`, color: vars.colors['icons.placeholder'], fill: vars.colors['icons.placeholder'], diff --git a/ui-admin/upload/src/placeholder/index.ts b/ui-admin/upload/src/placeholder/index.ts index 03f0e691..3f3d04e0 100644 --- a/ui-admin/upload/src/placeholder/index.ts +++ b/ui-admin/upload/src/placeholder/index.ts @@ -1 +1,2 @@ -export * from './placeholder.component.js' +export * from './component.js' +export * from './dropzone/index.js' diff --git a/ui-admin/upload/src/placeholder-link/placeholder-link.component.tsx b/ui-admin/upload/src/placeholder/link/component.tsx similarity index 68% rename from ui-admin/upload/src/placeholder-link/placeholder-link.component.tsx rename to ui-admin/upload/src/placeholder/link/component.tsx index 6c401091..1e69470b 100644 --- a/ui-admin/upload/src/placeholder-link/placeholder-link.component.tsx +++ b/ui-admin/upload/src/placeholder/link/component.tsx @@ -3,14 +3,14 @@ import type { AnchorHTMLAttributes } from 'react' import { clsx } from 'clsx' -import { basePlaceholderLinkStyles } from './placeholder-link.css.js' +import { baseLinkStyles } from './styles.css.js' export const PlaceholderLink = ({ children, className, ...props }: AnchorHTMLAttributes): ReactNode => ( - + {children} ) diff --git a/ui-admin/upload/src/placeholder/link/index.ts b/ui-admin/upload/src/placeholder/link/index.ts new file mode 100644 index 00000000..b7a15103 --- /dev/null +++ b/ui-admin/upload/src/placeholder/link/index.ts @@ -0,0 +1 @@ +export * from './component.js' diff --git a/ui-admin/upload/src/placeholder-link/placeholder-link.css.ts b/ui-admin/upload/src/placeholder/link/styles.css.ts similarity index 85% rename from ui-admin/upload/src/placeholder-link/placeholder-link.css.ts rename to ui-admin/upload/src/placeholder/link/styles.css.ts index 7ce6ab94..0a5525d5 100644 --- a/ui-admin/upload/src/placeholder-link/placeholder-link.css.ts +++ b/ui-admin/upload/src/placeholder/link/styles.css.ts @@ -2,7 +2,7 @@ import { style } from '@vanilla-extract/css' import { vars } from '@atls-ui-admin/theme' -export const basePlaceholderLinkStyles = style({ +export const baseLinkStyles = style({ padding: `${vars.space.g8} ${vars.space.zero}`, // @ts-expect-error correct text.blue field color: vars.colors['text.blue'], diff --git a/ui-admin/upload/src/placeholder/placeholder.css.ts b/ui-admin/upload/src/placeholder/styles.css.ts similarity index 100% rename from ui-admin/upload/src/placeholder/placeholder.css.ts rename to ui-admin/upload/src/placeholder/styles.css.ts From 7f8a43b904ad6540b3895b0cd2563c2dde4d6d0b Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Tue, 16 Jun 2026 23:19:00 +0300 Subject: [PATCH 2/6] refactor(popover): stories --- ui-admin/upload/src/upload.stories.tsx | 79 -------------- ui-admin/upload/stories/interfaces.ts | 10 ++ ui-admin/upload/stories/styles.css.ts | 45 ++++++++ ui-admin/upload/stories/upload.stories.tsx | 113 +++++++++++++++++++++ 4 files changed, 168 insertions(+), 79 deletions(-) delete mode 100644 ui-admin/upload/src/upload.stories.tsx create mode 100644 ui-admin/upload/stories/interfaces.ts create mode 100644 ui-admin/upload/stories/styles.css.ts create mode 100644 ui-admin/upload/stories/upload.stories.tsx diff --git a/ui-admin/upload/src/upload.stories.tsx b/ui-admin/upload/src/upload.stories.tsx deleted file mode 100644 index 416d12f2..00000000 --- a/ui-admin/upload/src/upload.stories.tsx +++ /dev/null @@ -1,79 +0,0 @@ -import type { ButtonProps } from '@atls-ui-admin/button' -import type { Meta } from '@storybook/react' -import type { StoryObj } from '@storybook/react' -import type { ReactNode } from 'react' - -import { useTheme } from 'next-themes' - -import { Button } from '@atls-ui-admin/button' -import { ThemeProvider } from '@atls-ui-admin/theme' -import { buttonAppearances } from '@atls-ui-admin/button' -import { buttonShapes } from '@atls-ui-admin/button' - -import { DropzonePlaceholder } from './index.js' -import { Upload } from './index.js' - -type ButtonAppearanceName = keyof typeof buttonAppearances -type ButtonShapeName = keyof typeof buttonShapes - -interface UploadStoryProps { - appearance: ButtonAppearanceName - shape: ButtonShapeName -} - -const ToggleTheme = (props: ButtonProps): ReactNode => { - const { theme, setTheme } = useTheme() - - return ( - - ) -} - -const meta: Meta = { - title: 'Admin/Upload', - render: ({ appearance, shape }) => ( - - - - Нажмите, чтобы загрузить - - } - > -
- - - ), - tags: ['autodocs'], - argTypes: { - appearance: { - control: { type: 'inline-radio' }, - options: Object.keys(buttonAppearances), - }, - shape: { - control: { type: 'select' }, - options: Object.keys(buttonShapes), - }, - }, -} - -export default meta - -type Story = StoryObj - -export const BaseUpload: Story = { - name: 'Базовый', - args: { - appearance: 'blue', - shape: 'huge', - }, -} diff --git a/ui-admin/upload/stories/interfaces.ts b/ui-admin/upload/stories/interfaces.ts new file mode 100644 index 00000000..5fa632bc --- /dev/null +++ b/ui-admin/upload/stories/interfaces.ts @@ -0,0 +1,10 @@ +import type { buttonAppearances } from '@atls-ui-admin/button' +import type { buttonShapes } from '@atls-ui-admin/button' + +export type ButtonAppearanceName = keyof typeof buttonAppearances +export type ButtonShapeName = keyof typeof buttonShapes + +export interface UploadStoryProps { + appearance: ButtonAppearanceName + shape: ButtonShapeName +} diff --git a/ui-admin/upload/stories/styles.css.ts b/ui-admin/upload/stories/styles.css.ts new file mode 100644 index 00000000..b10cedf3 --- /dev/null +++ b/ui-admin/upload/stories/styles.css.ts @@ -0,0 +1,45 @@ +import { style } from '@vanilla-extract/css' + +import { vars } from '@atls-ui-admin/theme' + +export const customPlaceholderRootStyles = style({ + gap: vars.space.g4, + padding: `${vars.space.g16} ${vars.space.g24}`, + borderRadius: vars.radii.f8, + backgroundColor: vars.colors.blueProtective, +}) + +export const customPlaceholderIconStyles = style({ + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + width: 64, + height: 64, + borderRadius: vars.radii.full, + color: vars.colors.blue, + fill: vars.colors.blue, + backgroundColor: vars.colors.white, +}) + +export const customPlaceholderAcceptStyles = style({ + padding: vars.space.zero, + color: vars.colors.black, + fontWeight: vars.fontWeights.bold, +}) + +export const customPlaceholderLinkStyles = style({ + padding: vars.space.zero, + color: vars.colors.blue, + fontWeight: vars.fontWeights.bold, + textDecoration: 'none', +}) + +export const toggleThemeStyles = style({ + width: 'fit-content', + margin: `${vars.space.zero} ${vars.space.zero} ${vars.space.g10} auto`, +}) + +export const uploadAreaStyles = style({ + width: '100%', + height: 200, +}) diff --git a/ui-admin/upload/stories/upload.stories.tsx b/ui-admin/upload/stories/upload.stories.tsx new file mode 100644 index 00000000..0d67e186 --- /dev/null +++ b/ui-admin/upload/stories/upload.stories.tsx @@ -0,0 +1,113 @@ +import type { ButtonProps } from '@atls-ui-admin/button' +import type { Meta } from '@storybook/react' +import type { StoryObj } from '@storybook/react' +import type { ReactElement } from 'react' +import type { ReactNode } from 'react' + +import type { UploadStoryProps } from './interfaces.js' + +import { useTheme } from 'next-themes' + +import { Button } from '@atls-ui-admin/button' +import { ThemeProvider } from '@atls-ui-admin/theme' +import { buttonAppearances } from '@atls-ui-admin/button' +import { buttonShapes } from '@atls-ui-admin/button' + +import { DropzonePlaceholder } from '../src/index.js' +import { Upload } from '../src/index.js' +import { customPlaceholderAcceptStyles } from './styles.css.js' + +import { customPlaceholderIconStyles } from './styles.css.js' + +import { customPlaceholderLinkStyles } from './styles.css.js' + +import { customPlaceholderRootStyles } from './styles.css.js' + +import { toggleThemeStyles } from './styles.css.js' + +import { uploadAreaStyles } from './styles.css.js' + +const ToggleTheme = (props: ButtonProps): ReactElement => { + const { theme, setTheme } = useTheme() + + return ( + + ) +} + +const basePlaceholder = ( + + Нажмите, чтобы загрузить + +) + +const customPlaceholder = ( + + Нажмите, чтобы загрузить + +) + +const renderUploadStory = ( + { appearance, shape }: UploadStoryProps, + placeholder: ReactNode = basePlaceholder +): ReactElement => ( + + + +
+ + +) + +const meta: Meta = { + title: 'Admin/Upload', + render: (props): ReactElement => renderUploadStory(props), + tags: ['autodocs'], + argTypes: { + appearance: { + control: { type: 'inline-radio' }, + options: Object.keys(buttonAppearances), + }, + shape: { + control: { type: 'select' }, + options: Object.keys(buttonShapes), + }, + }, +} + +export default meta + +type Story = StoryObj + +export const BaseUpload: Story = { + name: 'Базовый', + args: { + appearance: 'blue', + shape: 'huge', + }, +} + +export const CustomPlaceholder: Story = { + name: 'Кастомный placeholder', + render: (props): ReactElement => renderUploadStory(props, customPlaceholder), + args: { + appearance: 'blue', + shape: 'huge', + }, +} From 9ef72397f34190030b29077583c7e37fd1e02808 Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Tue, 16 Jun 2026 23:19:32 +0300 Subject: [PATCH 3/6] refactor(popover): container styles --- ui-admin/upload/src/container/container.css.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/ui-admin/upload/src/container/container.css.ts b/ui-admin/upload/src/container/container.css.ts index 49c4da68..440c621c 100644 --- a/ui-admin/upload/src/container/container.css.ts +++ b/ui-admin/upload/src/container/container.css.ts @@ -4,8 +4,7 @@ import { vars } from '@atls-ui-admin/theme' export const containerStyles = style({ position: 'relative', - borderWidth: 2, - borderStyle: 'dashed', + border: vars.borders.dashedGray, cursor: 'pointer', outline: 'none', borderColor: vars.colors.black, From dd921ffa37488e586603e2973c9b30663d9c6649 Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Tue, 16 Jun 2026 23:19:53 +0300 Subject: [PATCH 4/6] refactor(popover): file names --- ui-admin/upload/src/{upload.component.tsx => component.tsx} | 0 ui-admin/upload/src/index.ts | 4 ++-- 2 files changed, 2 insertions(+), 2 deletions(-) rename ui-admin/upload/src/{upload.component.tsx => component.tsx} (100%) diff --git a/ui-admin/upload/src/upload.component.tsx b/ui-admin/upload/src/component.tsx similarity index 100% rename from ui-admin/upload/src/upload.component.tsx rename to ui-admin/upload/src/component.tsx diff --git a/ui-admin/upload/src/index.ts b/ui-admin/upload/src/index.ts index 1e9daf29..4a2f3964 100644 --- a/ui-admin/upload/src/index.ts +++ b/ui-admin/upload/src/index.ts @@ -1,2 +1,2 @@ -export * from './upload.component.js' -export * from './dropzone-placeholder.component.js' +export * from './component.js' +export * from './placeholder/dropzone/index.js' From 680bba996e4a856e1b4290329f325fdba9087d65 Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Tue, 16 Jun 2026 23:48:58 +0300 Subject: [PATCH 5/6] chore(popover): remove extra custom placeholder story --- ui-admin/upload/stories/styles.css.ts | 32 ------------------- ui-admin/upload/stories/upload.stories.tsx | 36 ++-------------------- 2 files changed, 2 insertions(+), 66 deletions(-) diff --git a/ui-admin/upload/stories/styles.css.ts b/ui-admin/upload/stories/styles.css.ts index b10cedf3..e55d74d2 100644 --- a/ui-admin/upload/stories/styles.css.ts +++ b/ui-admin/upload/stories/styles.css.ts @@ -2,38 +2,6 @@ import { style } from '@vanilla-extract/css' import { vars } from '@atls-ui-admin/theme' -export const customPlaceholderRootStyles = style({ - gap: vars.space.g4, - padding: `${vars.space.g16} ${vars.space.g24}`, - borderRadius: vars.radii.f8, - backgroundColor: vars.colors.blueProtective, -}) - -export const customPlaceholderIconStyles = style({ - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - width: 64, - height: 64, - borderRadius: vars.radii.full, - color: vars.colors.blue, - fill: vars.colors.blue, - backgroundColor: vars.colors.white, -}) - -export const customPlaceholderAcceptStyles = style({ - padding: vars.space.zero, - color: vars.colors.black, - fontWeight: vars.fontWeights.bold, -}) - -export const customPlaceholderLinkStyles = style({ - padding: vars.space.zero, - color: vars.colors.blue, - fontWeight: vars.fontWeights.bold, - textDecoration: 'none', -}) - export const toggleThemeStyles = style({ width: 'fit-content', margin: `${vars.space.zero} ${vars.space.zero} ${vars.space.g10} auto`, diff --git a/ui-admin/upload/stories/upload.stories.tsx b/ui-admin/upload/stories/upload.stories.tsx index 0d67e186..1ea1afb1 100644 --- a/ui-admin/upload/stories/upload.stories.tsx +++ b/ui-admin/upload/stories/upload.stories.tsx @@ -15,17 +15,8 @@ import { buttonShapes } from '@atls-ui-admin/button' import { DropzonePlaceholder } from '../src/index.js' import { Upload } from '../src/index.js' -import { customPlaceholderAcceptStyles } from './styles.css.js' - -import { customPlaceholderIconStyles } from './styles.css.js' - -import { customPlaceholderLinkStyles } from './styles.css.js' - -import { customPlaceholderRootStyles } from './styles.css.js' - -import { toggleThemeStyles } from './styles.css.js' - -import { uploadAreaStyles } from './styles.css.js' +import { toggleThemeStyles } from './styles.css.js' +import { uploadAreaStyles } from './styles.css.js' const ToggleTheme = (props: ButtonProps): ReactElement => { const { theme, setTheme } = useTheme() @@ -49,20 +40,6 @@ const basePlaceholder = ( ) -const customPlaceholder = ( - - Нажмите, чтобы загрузить - -) - const renderUploadStory = ( { appearance, shape }: UploadStoryProps, placeholder: ReactNode = basePlaceholder @@ -102,12 +79,3 @@ export const BaseUpload: Story = { shape: 'huge', }, } - -export const CustomPlaceholder: Story = { - name: 'Кастомный placeholder', - render: (props): ReactElement => renderUploadStory(props, customPlaceholder), - args: { - appearance: 'blue', - shape: 'huge', - }, -} From 45145cdd8c8fd15fb6c3c81abd322a10bf095c8a Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Thu, 18 Jun 2026 19:59:40 +0300 Subject: [PATCH 6/6] feat(upload): add custom placeholder story control --- ui-admin/upload/stories/interfaces.ts | 1 + ui-admin/upload/stories/styles.css.ts | 32 +++++++++ ui-admin/upload/stories/upload.stories.tsx | 75 +++++++++++++--------- 3 files changed, 78 insertions(+), 30 deletions(-) diff --git a/ui-admin/upload/stories/interfaces.ts b/ui-admin/upload/stories/interfaces.ts index 5fa632bc..6a04fb05 100644 --- a/ui-admin/upload/stories/interfaces.ts +++ b/ui-admin/upload/stories/interfaces.ts @@ -6,5 +6,6 @@ export type ButtonShapeName = keyof typeof buttonShapes export interface UploadStoryProps { appearance: ButtonAppearanceName + customPlaceholder: boolean shape: ButtonShapeName } diff --git a/ui-admin/upload/stories/styles.css.ts b/ui-admin/upload/stories/styles.css.ts index e55d74d2..b10cedf3 100644 --- a/ui-admin/upload/stories/styles.css.ts +++ b/ui-admin/upload/stories/styles.css.ts @@ -2,6 +2,38 @@ import { style } from '@vanilla-extract/css' import { vars } from '@atls-ui-admin/theme' +export const customPlaceholderRootStyles = style({ + gap: vars.space.g4, + padding: `${vars.space.g16} ${vars.space.g24}`, + borderRadius: vars.radii.f8, + backgroundColor: vars.colors.blueProtective, +}) + +export const customPlaceholderIconStyles = style({ + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + width: 64, + height: 64, + borderRadius: vars.radii.full, + color: vars.colors.blue, + fill: vars.colors.blue, + backgroundColor: vars.colors.white, +}) + +export const customPlaceholderAcceptStyles = style({ + padding: vars.space.zero, + color: vars.colors.black, + fontWeight: vars.fontWeights.bold, +}) + +export const customPlaceholderLinkStyles = style({ + padding: vars.space.zero, + color: vars.colors.blue, + fontWeight: vars.fontWeights.bold, + textDecoration: 'none', +}) + export const toggleThemeStyles = style({ width: 'fit-content', margin: `${vars.space.zero} ${vars.space.zero} ${vars.space.g10} auto`, diff --git a/ui-admin/upload/stories/upload.stories.tsx b/ui-admin/upload/stories/upload.stories.tsx index 1ea1afb1..2e2e82ba 100644 --- a/ui-admin/upload/stories/upload.stories.tsx +++ b/ui-admin/upload/stories/upload.stories.tsx @@ -1,22 +1,26 @@ -import type { ButtonProps } from '@atls-ui-admin/button' -import type { Meta } from '@storybook/react' -import type { StoryObj } from '@storybook/react' -import type { ReactElement } from 'react' -import type { ReactNode } from 'react' +import type { ButtonProps } from '@atls-ui-admin/button' +import type { Meta } from '@storybook/react' +import type { StoryObj } from '@storybook/react' +import type { ReactElement } from 'react' +import type { ReactNode } from 'react' -import type { UploadStoryProps } from './interfaces.js' +import type { UploadStoryProps } from './interfaces.js' -import { useTheme } from 'next-themes' +import { useTheme } from 'next-themes' -import { Button } from '@atls-ui-admin/button' -import { ThemeProvider } from '@atls-ui-admin/theme' -import { buttonAppearances } from '@atls-ui-admin/button' -import { buttonShapes } from '@atls-ui-admin/button' +import { Button } from '@atls-ui-admin/button' +import { ThemeProvider } from '@atls-ui-admin/theme' +import { buttonAppearances } from '@atls-ui-admin/button' +import { buttonShapes } from '@atls-ui-admin/button' -import { DropzonePlaceholder } from '../src/index.js' -import { Upload } from '../src/index.js' -import { toggleThemeStyles } from './styles.css.js' -import { uploadAreaStyles } from './styles.css.js' +import { DropzonePlaceholder } from '../src/index.js' +import { Upload } from '../src/index.js' +import { customPlaceholderAcceptStyles } from './styles.css.js' +import { customPlaceholderIconStyles } from './styles.css.js' +import { customPlaceholderLinkStyles } from './styles.css.js' +import { customPlaceholderRootStyles } from './styles.css.js' +import { toggleThemeStyles } from './styles.css.js' +import { uploadAreaStyles } from './styles.css.js' const ToggleTheme = (props: ButtonProps): ReactElement => { const { theme, setTheme } = useTheme() @@ -34,33 +38,43 @@ const ToggleTheme = (props: ButtonProps): ReactElement => { ) } -const basePlaceholder = ( - +const renderPlaceholder = (customPlaceholder: boolean): ReactNode => ( + Нажмите, чтобы загрузить ) -const renderUploadStory = ( - { appearance, shape }: UploadStoryProps, - placeholder: ReactNode = basePlaceholder -): ReactElement => ( - - - -
- - -) - const meta: Meta = { title: 'Admin/Upload', - render: (props): ReactElement => renderUploadStory(props), + render: ({ appearance, customPlaceholder, shape }): ReactElement => ( + + + +
+ + + ), tags: ['autodocs'], argTypes: { appearance: { control: { type: 'inline-radio' }, options: Object.keys(buttonAppearances), }, + customPlaceholder: { + control: { type: 'boolean' }, + }, shape: { control: { type: 'select' }, options: Object.keys(buttonShapes), @@ -76,6 +90,7 @@ export const BaseUpload: Story = { name: 'Базовый', args: { appearance: 'blue', + customPlaceholder: false, shape: 'huge', }, }