From 3ed5a8b4942266606395c7794746ea2d0950c228 Mon Sep 17 00:00:00 2001 From: TitanKuzmich Date: Tue, 19 Nov 2024 12:08:54 +0300 Subject: [PATCH] feat(sdds-*): add Dropzone component --- .../Dropzone/Dropzone.template-docs.mdx | 85 +------------------ .../components/Dropzone/Dropzone.config.ts | 50 +++++++++++ .../components/Dropzone/Dropzone.stories.tsx | 58 +++++++++++++ .../src/components/Dropzone/Dropzone.ts | 7 ++ .../sdds-cs/src/components/Dropzone/index.ts | 2 + packages/sdds-cs/src/index.ts | 1 + .../components/Dropzone/Dropzone.config.ts | 50 +++++++++++ .../components/Dropzone/Dropzone.stories.tsx | 58 +++++++++++++ .../src/components/Dropzone/Dropzone.ts | 7 ++ .../sdds-dfa/src/components/Dropzone/index.ts | 2 + packages/sdds-dfa/src/index.ts | 1 + .../components/Dropzone/Dropzone.config.ts | 50 +++++++++++ .../components/Dropzone/Dropzone.stories.tsx | 58 +++++++++++++ .../src/components/Dropzone/Dropzone.ts | 7 ++ .../src/components/Dropzone/index.ts | 2 + packages/sdds-finportal/src/index.ts | 1 + .../components/Dropzone/Dropzone.config.ts | 50 +++++++++++ .../components/Dropzone/Dropzone.stories.tsx | 58 +++++++++++++ .../src/components/Dropzone/Dropzone.ts | 7 ++ .../src/components/Dropzone/index.ts | 2 + packages/sdds-insol/src/index.ts | 1 + .../components/Dropzone/Dropzone.config.ts | 50 +++++++++++ .../components/Dropzone/Dropzone.stories.tsx | 58 +++++++++++++ .../src/components/Dropzone/Dropzone.ts | 7 ++ .../src/components/Dropzone/index.ts | 2 + packages/sdds-serv/src/index.ts | 1 + 26 files changed, 593 insertions(+), 82 deletions(-) create mode 100644 packages/sdds-cs/src/components/Dropzone/Dropzone.config.ts create mode 100644 packages/sdds-cs/src/components/Dropzone/Dropzone.stories.tsx create mode 100644 packages/sdds-cs/src/components/Dropzone/Dropzone.ts create mode 100644 packages/sdds-cs/src/components/Dropzone/index.ts create mode 100644 packages/sdds-dfa/src/components/Dropzone/Dropzone.config.ts create mode 100644 packages/sdds-dfa/src/components/Dropzone/Dropzone.stories.tsx create mode 100644 packages/sdds-dfa/src/components/Dropzone/Dropzone.ts create mode 100644 packages/sdds-dfa/src/components/Dropzone/index.ts create mode 100644 packages/sdds-finportal/src/components/Dropzone/Dropzone.config.ts create mode 100644 packages/sdds-finportal/src/components/Dropzone/Dropzone.stories.tsx create mode 100644 packages/sdds-finportal/src/components/Dropzone/Dropzone.ts create mode 100644 packages/sdds-finportal/src/components/Dropzone/index.ts create mode 100644 packages/sdds-insol/src/components/Dropzone/Dropzone.config.ts create mode 100644 packages/sdds-insol/src/components/Dropzone/Dropzone.stories.tsx create mode 100644 packages/sdds-insol/src/components/Dropzone/Dropzone.ts create mode 100644 packages/sdds-insol/src/components/Dropzone/index.ts create mode 100644 packages/sdds-serv/src/components/Dropzone/Dropzone.config.ts create mode 100644 packages/sdds-serv/src/components/Dropzone/Dropzone.stories.tsx create mode 100644 packages/sdds-serv/src/components/Dropzone/Dropzone.ts create mode 100644 packages/sdds-serv/src/components/Dropzone/index.ts diff --git a/packages/plasma-new-hope/src/components/Dropzone/Dropzone.template-docs.mdx b/packages/plasma-new-hope/src/components/Dropzone/Dropzone.template-docs.mdx index cc64414649..a7fe6df376 100644 --- a/packages/plasma-new-hope/src/components/Dropzone/Dropzone.template-docs.mdx +++ b/packages/plasma-new-hope/src/components/Dropzone/Dropzone.template-docs.mdx @@ -5,87 +5,13 @@ title: Dropzone import { PropsTable, Description } from '@site/src/components'; + + + # Dropzone Компонент для загрузки файлов, без отображения индикации загрузки. Компонент не предполагает наличия валиации, так как является частью Upload. Но валидацию можно задать с помощью callback `validator`. - - -# Типизация - -```tsx -type DropzoneProps = { - /** - * Массив форматов файлов, которые могут быть прикреплены (см. HTML-атрибут 'accept' для 'input'). - */ - acceptedFileFormats?: string[]; - /** - * Позовляет выбирать несколько файлов для загрузки - */ - multiple?: boolean; - /** - * Слот для Title - */ - title?: string; - /** - * Слот для описания - */ - description?: ReactNode; - /** - * Слот для иконки - */ - icon?: ReactNode; - /** - * Расположение иконки - * @default 'left' - */ - iconPlacement?: 'top' | 'left'; - /** - * Размер компонента - */ - size?: string; - /** - * Вид компонента - */ - view?: string; - /** - * Компонент неактивен - */ - disabled?: boolean; - /** - * Компонент растягивается на всю доступную ширину - */ - stretch?: boolean; - /** - * Функция, вызываемая в момент вхождения курсора внутрь границ Dropzone - */ - onDragEnter?: () => void; - /** - * Функция, вызываемая в момент выхода курсора из Dropzone - */ - onDragLeave?: () => void; - /** - * Функция, вызываемая при нахождении курсора внутри Dropzone - */ - onDragOver?: () => void; - /** - * Функция, вызываемая при drop файлов - */ - onDrop?: () => void; - /** - * Функция, вызываемая для валидации файлов, перед onDropFiles - */ - validator?: (files: File[]) => ValidatorReturnType; - /** - * Функция, вызываемая при наличии файлов, после onDrop - */ - onDropFiles?: FileProcessHandler; - /** - * Функция, вызываемая при выборе файлов - */ - onChoseFiles?: FileProcessHandler; -} & Omit, 'accept'>; -``` # Пример @@ -106,10 +32,6 @@ export function App() { console.log("onDrop") } - const onDropFiles = () => { - console.log("onDropFiles") - } - const onChange = () => { console.log("onChange") } @@ -127,7 +49,6 @@ export function App() { onDragEnter={onDragEnter} onDragLeave={onDragLeave} onDrop={onDrop} - onDropFiles={onDropFiles} onChange={onChange} onChoseFiles={onChoseFiles} /> diff --git a/packages/sdds-cs/src/components/Dropzone/Dropzone.config.ts b/packages/sdds-cs/src/components/Dropzone/Dropzone.config.ts new file mode 100644 index 0000000000..565686de90 --- /dev/null +++ b/packages/sdds-cs/src/components/Dropzone/Dropzone.config.ts @@ -0,0 +1,50 @@ +import { css, dropzoneTokens } from '@salutejs/plasma-new-hope/styled-components'; + +export const config = { + defaults: { + view: 'default', + size: 'm', + }, + variations: { + view: { + default: css` + ${dropzoneTokens.background}: var(--surface-solid-card); + ${dropzoneTokens.backgroundHover}: var(--surface-solid-card-hover); + ${dropzoneTokens.overlayColorActive}: var(--overlay-soft); + ${dropzoneTokens.borderColor}: var(--outline-solid-primary); + ${dropzoneTokens.borderColorHover}: var(--outline-solid-primary-hover); + ${dropzoneTokens.borderColorActive}: var(--outline-accent); + ${dropzoneTokens.titleColor}: var(--text-primary); + ${dropzoneTokens.descriptionColor}: var(--text-secondary); + `, + }, + size: { + m: css` + ${dropzoneTokens.padding}: 1.5rem; + ${dropzoneTokens.borderRadius}: 1.25rem; + ${dropzoneTokens.contentWrapperGap}: 0.75rem; + ${dropzoneTokens.contentGap}: 0.375rem; + ${dropzoneTokens.contentColumnGap}: 0.5rem; + + ${dropzoneTokens.titleFontFamily}: var(--plasma-typo-h4-font-family); + ${dropzoneTokens.titleFontSize}: var(--plasma-typo-h4-font-size); + ${dropzoneTokens.titleFontStyle}: var(--plasma-typo-h4-font-style); + ${dropzoneTokens.titleFontWeight}: var(--plasma-typo-h4-bold-font-weight); + ${dropzoneTokens.titleLetterSpacing}: var(--plasma-typo-h4-letter-spacing); + ${dropzoneTokens.titleLineHeight}: var(--plasma-typo-h4-line-height); + + ${dropzoneTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); + ${dropzoneTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); + ${dropzoneTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); + ${dropzoneTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); + ${dropzoneTokens.descriptionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${dropzoneTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); + `, + }, + disabled: { + true: css` + ${dropzoneTokens.disabledOpacity}: 0.4; + `, + }, + }, +}; diff --git a/packages/sdds-cs/src/components/Dropzone/Dropzone.stories.tsx b/packages/sdds-cs/src/components/Dropzone/Dropzone.stories.tsx new file mode 100644 index 0000000000..8c9d9e4ac9 --- /dev/null +++ b/packages/sdds-cs/src/components/Dropzone/Dropzone.stories.tsx @@ -0,0 +1,58 @@ +import React, { ComponentProps } from 'react'; +import type { StoryObj, Meta } from '@storybook/react'; +import { action } from '@storybook/addon-actions'; +import { InSpacingDecorator, disableProps } from '@salutejs/plasma-sb-utils'; + +import { Dropzone } from './Dropzone'; + +const onDragEnter = action('onDragEnter'); +const onDragLeave = action('onDragLeave'); +const onDrop = action('onDrop'); +const onChange = action('onChange'); +const onChoseFiles = action('onChoseFiles'); + +const iconPlacements = ['top', 'left']; + +const meta: Meta = { + title: 'Controls/Dropzone', + component: Dropzone, + decorators: [InSpacingDecorator], + argTypes: { + iconPlacement: { + options: iconPlacements, + control: { + type: 'inline-radio', + }, + defaultValue: 'top', + }, + ...disableProps(['view', 'size']), + }, +}; + +export default meta; + +type StoryPropsDefault = ComponentProps; + +export const Default: StoryObj = { + args: { + iconPlacement: 'top', + width: 400, + height: 280, + disabled: false, + stretch: false, + title: 'Click to upload', + description: 'or drag and drop files here', + }, + render: (args) => ( +
+ +
+ ), +}; diff --git a/packages/sdds-cs/src/components/Dropzone/Dropzone.ts b/packages/sdds-cs/src/components/Dropzone/Dropzone.ts new file mode 100644 index 0000000000..92f99e5fef --- /dev/null +++ b/packages/sdds-cs/src/components/Dropzone/Dropzone.ts @@ -0,0 +1,7 @@ +import { dropzoneConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components'; + +import { config } from './Dropzone.config'; + +const mergedConfig = mergeConfig(dropzoneConfig, config); + +export const Dropzone = component(mergedConfig); diff --git a/packages/sdds-cs/src/components/Dropzone/index.ts b/packages/sdds-cs/src/components/Dropzone/index.ts new file mode 100644 index 0000000000..b9b53cd492 --- /dev/null +++ b/packages/sdds-cs/src/components/Dropzone/index.ts @@ -0,0 +1,2 @@ +export { Dropzone } from './Dropzone'; +export { dropzoneTokens, dropzoneClasses } from '@salutejs/plasma-new-hope/styled-components'; diff --git a/packages/sdds-cs/src/index.ts b/packages/sdds-cs/src/index.ts index 6330d2a1e6..8bccd573d8 100644 --- a/packages/sdds-cs/src/index.ts +++ b/packages/sdds-cs/src/index.ts @@ -55,6 +55,7 @@ export * from './components/EmptyState'; export * from './components/Attach'; export * from './components/ViewContainer'; export * from './components/NumberInput'; +export * from './components/Dropzone'; export * from './mixins'; export * from './tokens'; diff --git a/packages/sdds-dfa/src/components/Dropzone/Dropzone.config.ts b/packages/sdds-dfa/src/components/Dropzone/Dropzone.config.ts new file mode 100644 index 0000000000..8e02e0f740 --- /dev/null +++ b/packages/sdds-dfa/src/components/Dropzone/Dropzone.config.ts @@ -0,0 +1,50 @@ +import { css, dropzoneTokens } from '@salutejs/plasma-new-hope/styled-components'; + +export const config = { + defaults: { + view: 'default', + size: 'm', + }, + variations: { + view: { + default: css` + ${dropzoneTokens.background}: var(--surface-solid-card); + ${dropzoneTokens.backgroundHover}: var(--surface-solid-card-hover); + ${dropzoneTokens.overlayColorActive}: var(--overlay-soft); + ${dropzoneTokens.borderColor}: var(--outline-solid-secondary); + ${dropzoneTokens.borderColorHover}: var(--outline-solid-secondary-hover); + ${dropzoneTokens.borderColorActive}: var(--outline-accent); + ${dropzoneTokens.titleColor}: var(--text-primary); + ${dropzoneTokens.descriptionColor}: var(--text-secondary); + `, + }, + size: { + m: css` + ${dropzoneTokens.padding}: 1.5rem; + ${dropzoneTokens.borderRadius}: 1.25rem; + ${dropzoneTokens.contentWrapperGap}: 0.75rem; + ${dropzoneTokens.contentGap}: 0.375rem; + ${dropzoneTokens.contentColumnGap}: 0.5rem; + + ${dropzoneTokens.titleFontFamily}: var(--plasma-typo-h4-font-family); + ${dropzoneTokens.titleFontSize}: var(--plasma-typo-h4-font-size); + ${dropzoneTokens.titleFontStyle}: var(--plasma-typo-h4-font-style); + ${dropzoneTokens.titleFontWeight}: var(--plasma-typo-h4-bold-font-weight); + ${dropzoneTokens.titleLetterSpacing}: var(--plasma-typo-h4-letter-spacing); + ${dropzoneTokens.titleLineHeight}: var(--plasma-typo-h4-line-height); + + ${dropzoneTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); + ${dropzoneTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); + ${dropzoneTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); + ${dropzoneTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); + ${dropzoneTokens.descriptionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${dropzoneTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); + `, + }, + disabled: { + true: css` + ${dropzoneTokens.disabledOpacity}: 0.4; + `, + }, + }, +}; diff --git a/packages/sdds-dfa/src/components/Dropzone/Dropzone.stories.tsx b/packages/sdds-dfa/src/components/Dropzone/Dropzone.stories.tsx new file mode 100644 index 0000000000..8c9d9e4ac9 --- /dev/null +++ b/packages/sdds-dfa/src/components/Dropzone/Dropzone.stories.tsx @@ -0,0 +1,58 @@ +import React, { ComponentProps } from 'react'; +import type { StoryObj, Meta } from '@storybook/react'; +import { action } from '@storybook/addon-actions'; +import { InSpacingDecorator, disableProps } from '@salutejs/plasma-sb-utils'; + +import { Dropzone } from './Dropzone'; + +const onDragEnter = action('onDragEnter'); +const onDragLeave = action('onDragLeave'); +const onDrop = action('onDrop'); +const onChange = action('onChange'); +const onChoseFiles = action('onChoseFiles'); + +const iconPlacements = ['top', 'left']; + +const meta: Meta = { + title: 'Controls/Dropzone', + component: Dropzone, + decorators: [InSpacingDecorator], + argTypes: { + iconPlacement: { + options: iconPlacements, + control: { + type: 'inline-radio', + }, + defaultValue: 'top', + }, + ...disableProps(['view', 'size']), + }, +}; + +export default meta; + +type StoryPropsDefault = ComponentProps; + +export const Default: StoryObj = { + args: { + iconPlacement: 'top', + width: 400, + height: 280, + disabled: false, + stretch: false, + title: 'Click to upload', + description: 'or drag and drop files here', + }, + render: (args) => ( +
+ +
+ ), +}; diff --git a/packages/sdds-dfa/src/components/Dropzone/Dropzone.ts b/packages/sdds-dfa/src/components/Dropzone/Dropzone.ts new file mode 100644 index 0000000000..92f99e5fef --- /dev/null +++ b/packages/sdds-dfa/src/components/Dropzone/Dropzone.ts @@ -0,0 +1,7 @@ +import { dropzoneConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components'; + +import { config } from './Dropzone.config'; + +const mergedConfig = mergeConfig(dropzoneConfig, config); + +export const Dropzone = component(mergedConfig); diff --git a/packages/sdds-dfa/src/components/Dropzone/index.ts b/packages/sdds-dfa/src/components/Dropzone/index.ts new file mode 100644 index 0000000000..b9b53cd492 --- /dev/null +++ b/packages/sdds-dfa/src/components/Dropzone/index.ts @@ -0,0 +1,2 @@ +export { Dropzone } from './Dropzone'; +export { dropzoneTokens, dropzoneClasses } from '@salutejs/plasma-new-hope/styled-components'; diff --git a/packages/sdds-dfa/src/index.ts b/packages/sdds-dfa/src/index.ts index 3a2f4f1060..bf2898fc10 100644 --- a/packages/sdds-dfa/src/index.ts +++ b/packages/sdds-dfa/src/index.ts @@ -52,6 +52,7 @@ export * from './components/EmptyState'; export * from './components/Attach'; export * from './components/ViewContainer'; export * from './components/NumberInput'; +export * from './components/Dropzone'; export * from './mixins'; export * from './tokens'; diff --git a/packages/sdds-finportal/src/components/Dropzone/Dropzone.config.ts b/packages/sdds-finportal/src/components/Dropzone/Dropzone.config.ts new file mode 100644 index 0000000000..8e02e0f740 --- /dev/null +++ b/packages/sdds-finportal/src/components/Dropzone/Dropzone.config.ts @@ -0,0 +1,50 @@ +import { css, dropzoneTokens } from '@salutejs/plasma-new-hope/styled-components'; + +export const config = { + defaults: { + view: 'default', + size: 'm', + }, + variations: { + view: { + default: css` + ${dropzoneTokens.background}: var(--surface-solid-card); + ${dropzoneTokens.backgroundHover}: var(--surface-solid-card-hover); + ${dropzoneTokens.overlayColorActive}: var(--overlay-soft); + ${dropzoneTokens.borderColor}: var(--outline-solid-secondary); + ${dropzoneTokens.borderColorHover}: var(--outline-solid-secondary-hover); + ${dropzoneTokens.borderColorActive}: var(--outline-accent); + ${dropzoneTokens.titleColor}: var(--text-primary); + ${dropzoneTokens.descriptionColor}: var(--text-secondary); + `, + }, + size: { + m: css` + ${dropzoneTokens.padding}: 1.5rem; + ${dropzoneTokens.borderRadius}: 1.25rem; + ${dropzoneTokens.contentWrapperGap}: 0.75rem; + ${dropzoneTokens.contentGap}: 0.375rem; + ${dropzoneTokens.contentColumnGap}: 0.5rem; + + ${dropzoneTokens.titleFontFamily}: var(--plasma-typo-h4-font-family); + ${dropzoneTokens.titleFontSize}: var(--plasma-typo-h4-font-size); + ${dropzoneTokens.titleFontStyle}: var(--plasma-typo-h4-font-style); + ${dropzoneTokens.titleFontWeight}: var(--plasma-typo-h4-bold-font-weight); + ${dropzoneTokens.titleLetterSpacing}: var(--plasma-typo-h4-letter-spacing); + ${dropzoneTokens.titleLineHeight}: var(--plasma-typo-h4-line-height); + + ${dropzoneTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); + ${dropzoneTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); + ${dropzoneTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); + ${dropzoneTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); + ${dropzoneTokens.descriptionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${dropzoneTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); + `, + }, + disabled: { + true: css` + ${dropzoneTokens.disabledOpacity}: 0.4; + `, + }, + }, +}; diff --git a/packages/sdds-finportal/src/components/Dropzone/Dropzone.stories.tsx b/packages/sdds-finportal/src/components/Dropzone/Dropzone.stories.tsx new file mode 100644 index 0000000000..8c9d9e4ac9 --- /dev/null +++ b/packages/sdds-finportal/src/components/Dropzone/Dropzone.stories.tsx @@ -0,0 +1,58 @@ +import React, { ComponentProps } from 'react'; +import type { StoryObj, Meta } from '@storybook/react'; +import { action } from '@storybook/addon-actions'; +import { InSpacingDecorator, disableProps } from '@salutejs/plasma-sb-utils'; + +import { Dropzone } from './Dropzone'; + +const onDragEnter = action('onDragEnter'); +const onDragLeave = action('onDragLeave'); +const onDrop = action('onDrop'); +const onChange = action('onChange'); +const onChoseFiles = action('onChoseFiles'); + +const iconPlacements = ['top', 'left']; + +const meta: Meta = { + title: 'Controls/Dropzone', + component: Dropzone, + decorators: [InSpacingDecorator], + argTypes: { + iconPlacement: { + options: iconPlacements, + control: { + type: 'inline-radio', + }, + defaultValue: 'top', + }, + ...disableProps(['view', 'size']), + }, +}; + +export default meta; + +type StoryPropsDefault = ComponentProps; + +export const Default: StoryObj = { + args: { + iconPlacement: 'top', + width: 400, + height: 280, + disabled: false, + stretch: false, + title: 'Click to upload', + description: 'or drag and drop files here', + }, + render: (args) => ( +
+ +
+ ), +}; diff --git a/packages/sdds-finportal/src/components/Dropzone/Dropzone.ts b/packages/sdds-finportal/src/components/Dropzone/Dropzone.ts new file mode 100644 index 0000000000..92f99e5fef --- /dev/null +++ b/packages/sdds-finportal/src/components/Dropzone/Dropzone.ts @@ -0,0 +1,7 @@ +import { dropzoneConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components'; + +import { config } from './Dropzone.config'; + +const mergedConfig = mergeConfig(dropzoneConfig, config); + +export const Dropzone = component(mergedConfig); diff --git a/packages/sdds-finportal/src/components/Dropzone/index.ts b/packages/sdds-finportal/src/components/Dropzone/index.ts new file mode 100644 index 0000000000..b9b53cd492 --- /dev/null +++ b/packages/sdds-finportal/src/components/Dropzone/index.ts @@ -0,0 +1,2 @@ +export { Dropzone } from './Dropzone'; +export { dropzoneTokens, dropzoneClasses } from '@salutejs/plasma-new-hope/styled-components'; diff --git a/packages/sdds-finportal/src/index.ts b/packages/sdds-finportal/src/index.ts index 5577d7f765..047b723352 100644 --- a/packages/sdds-finportal/src/index.ts +++ b/packages/sdds-finportal/src/index.ts @@ -56,6 +56,7 @@ export * from './components/EmptyState'; export * from './components/Attach'; export * from './components/ViewContainer'; export * from './components/NumberInput'; +export * from './components/Dropzone'; export * from './mixins'; export * from './tokens'; diff --git a/packages/sdds-insol/src/components/Dropzone/Dropzone.config.ts b/packages/sdds-insol/src/components/Dropzone/Dropzone.config.ts new file mode 100644 index 0000000000..8e02e0f740 --- /dev/null +++ b/packages/sdds-insol/src/components/Dropzone/Dropzone.config.ts @@ -0,0 +1,50 @@ +import { css, dropzoneTokens } from '@salutejs/plasma-new-hope/styled-components'; + +export const config = { + defaults: { + view: 'default', + size: 'm', + }, + variations: { + view: { + default: css` + ${dropzoneTokens.background}: var(--surface-solid-card); + ${dropzoneTokens.backgroundHover}: var(--surface-solid-card-hover); + ${dropzoneTokens.overlayColorActive}: var(--overlay-soft); + ${dropzoneTokens.borderColor}: var(--outline-solid-secondary); + ${dropzoneTokens.borderColorHover}: var(--outline-solid-secondary-hover); + ${dropzoneTokens.borderColorActive}: var(--outline-accent); + ${dropzoneTokens.titleColor}: var(--text-primary); + ${dropzoneTokens.descriptionColor}: var(--text-secondary); + `, + }, + size: { + m: css` + ${dropzoneTokens.padding}: 1.5rem; + ${dropzoneTokens.borderRadius}: 1.25rem; + ${dropzoneTokens.contentWrapperGap}: 0.75rem; + ${dropzoneTokens.contentGap}: 0.375rem; + ${dropzoneTokens.contentColumnGap}: 0.5rem; + + ${dropzoneTokens.titleFontFamily}: var(--plasma-typo-h4-font-family); + ${dropzoneTokens.titleFontSize}: var(--plasma-typo-h4-font-size); + ${dropzoneTokens.titleFontStyle}: var(--plasma-typo-h4-font-style); + ${dropzoneTokens.titleFontWeight}: var(--plasma-typo-h4-bold-font-weight); + ${dropzoneTokens.titleLetterSpacing}: var(--plasma-typo-h4-letter-spacing); + ${dropzoneTokens.titleLineHeight}: var(--plasma-typo-h4-line-height); + + ${dropzoneTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); + ${dropzoneTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); + ${dropzoneTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); + ${dropzoneTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); + ${dropzoneTokens.descriptionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${dropzoneTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); + `, + }, + disabled: { + true: css` + ${dropzoneTokens.disabledOpacity}: 0.4; + `, + }, + }, +}; diff --git a/packages/sdds-insol/src/components/Dropzone/Dropzone.stories.tsx b/packages/sdds-insol/src/components/Dropzone/Dropzone.stories.tsx new file mode 100644 index 0000000000..8c9d9e4ac9 --- /dev/null +++ b/packages/sdds-insol/src/components/Dropzone/Dropzone.stories.tsx @@ -0,0 +1,58 @@ +import React, { ComponentProps } from 'react'; +import type { StoryObj, Meta } from '@storybook/react'; +import { action } from '@storybook/addon-actions'; +import { InSpacingDecorator, disableProps } from '@salutejs/plasma-sb-utils'; + +import { Dropzone } from './Dropzone'; + +const onDragEnter = action('onDragEnter'); +const onDragLeave = action('onDragLeave'); +const onDrop = action('onDrop'); +const onChange = action('onChange'); +const onChoseFiles = action('onChoseFiles'); + +const iconPlacements = ['top', 'left']; + +const meta: Meta = { + title: 'Controls/Dropzone', + component: Dropzone, + decorators: [InSpacingDecorator], + argTypes: { + iconPlacement: { + options: iconPlacements, + control: { + type: 'inline-radio', + }, + defaultValue: 'top', + }, + ...disableProps(['view', 'size']), + }, +}; + +export default meta; + +type StoryPropsDefault = ComponentProps; + +export const Default: StoryObj = { + args: { + iconPlacement: 'top', + width: 400, + height: 280, + disabled: false, + stretch: false, + title: 'Click to upload', + description: 'or drag and drop files here', + }, + render: (args) => ( +
+ +
+ ), +}; diff --git a/packages/sdds-insol/src/components/Dropzone/Dropzone.ts b/packages/sdds-insol/src/components/Dropzone/Dropzone.ts new file mode 100644 index 0000000000..92f99e5fef --- /dev/null +++ b/packages/sdds-insol/src/components/Dropzone/Dropzone.ts @@ -0,0 +1,7 @@ +import { dropzoneConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components'; + +import { config } from './Dropzone.config'; + +const mergedConfig = mergeConfig(dropzoneConfig, config); + +export const Dropzone = component(mergedConfig); diff --git a/packages/sdds-insol/src/components/Dropzone/index.ts b/packages/sdds-insol/src/components/Dropzone/index.ts new file mode 100644 index 0000000000..b9b53cd492 --- /dev/null +++ b/packages/sdds-insol/src/components/Dropzone/index.ts @@ -0,0 +1,2 @@ +export { Dropzone } from './Dropzone'; +export { dropzoneTokens, dropzoneClasses } from '@salutejs/plasma-new-hope/styled-components'; diff --git a/packages/sdds-insol/src/index.ts b/packages/sdds-insol/src/index.ts index 2821d9e602..0dd92e2093 100644 --- a/packages/sdds-insol/src/index.ts +++ b/packages/sdds-insol/src/index.ts @@ -56,6 +56,7 @@ export * from './components/EmptyState'; export * from './components/Attach'; export * from './components/ViewContainer'; export * from './components/NumberInput'; +export * from './components/Dropzone'; export * from './mixins'; export * from './tokens'; diff --git a/packages/sdds-serv/src/components/Dropzone/Dropzone.config.ts b/packages/sdds-serv/src/components/Dropzone/Dropzone.config.ts new file mode 100644 index 0000000000..8e02e0f740 --- /dev/null +++ b/packages/sdds-serv/src/components/Dropzone/Dropzone.config.ts @@ -0,0 +1,50 @@ +import { css, dropzoneTokens } from '@salutejs/plasma-new-hope/styled-components'; + +export const config = { + defaults: { + view: 'default', + size: 'm', + }, + variations: { + view: { + default: css` + ${dropzoneTokens.background}: var(--surface-solid-card); + ${dropzoneTokens.backgroundHover}: var(--surface-solid-card-hover); + ${dropzoneTokens.overlayColorActive}: var(--overlay-soft); + ${dropzoneTokens.borderColor}: var(--outline-solid-secondary); + ${dropzoneTokens.borderColorHover}: var(--outline-solid-secondary-hover); + ${dropzoneTokens.borderColorActive}: var(--outline-accent); + ${dropzoneTokens.titleColor}: var(--text-primary); + ${dropzoneTokens.descriptionColor}: var(--text-secondary); + `, + }, + size: { + m: css` + ${dropzoneTokens.padding}: 1.5rem; + ${dropzoneTokens.borderRadius}: 1.25rem; + ${dropzoneTokens.contentWrapperGap}: 0.75rem; + ${dropzoneTokens.contentGap}: 0.375rem; + ${dropzoneTokens.contentColumnGap}: 0.5rem; + + ${dropzoneTokens.titleFontFamily}: var(--plasma-typo-h4-font-family); + ${dropzoneTokens.titleFontSize}: var(--plasma-typo-h4-font-size); + ${dropzoneTokens.titleFontStyle}: var(--plasma-typo-h4-font-style); + ${dropzoneTokens.titleFontWeight}: var(--plasma-typo-h4-bold-font-weight); + ${dropzoneTokens.titleLetterSpacing}: var(--plasma-typo-h4-letter-spacing); + ${dropzoneTokens.titleLineHeight}: var(--plasma-typo-h4-line-height); + + ${dropzoneTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); + ${dropzoneTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); + ${dropzoneTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); + ${dropzoneTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); + ${dropzoneTokens.descriptionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${dropzoneTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); + `, + }, + disabled: { + true: css` + ${dropzoneTokens.disabledOpacity}: 0.4; + `, + }, + }, +}; diff --git a/packages/sdds-serv/src/components/Dropzone/Dropzone.stories.tsx b/packages/sdds-serv/src/components/Dropzone/Dropzone.stories.tsx new file mode 100644 index 0000000000..8c9d9e4ac9 --- /dev/null +++ b/packages/sdds-serv/src/components/Dropzone/Dropzone.stories.tsx @@ -0,0 +1,58 @@ +import React, { ComponentProps } from 'react'; +import type { StoryObj, Meta } from '@storybook/react'; +import { action } from '@storybook/addon-actions'; +import { InSpacingDecorator, disableProps } from '@salutejs/plasma-sb-utils'; + +import { Dropzone } from './Dropzone'; + +const onDragEnter = action('onDragEnter'); +const onDragLeave = action('onDragLeave'); +const onDrop = action('onDrop'); +const onChange = action('onChange'); +const onChoseFiles = action('onChoseFiles'); + +const iconPlacements = ['top', 'left']; + +const meta: Meta = { + title: 'Controls/Dropzone', + component: Dropzone, + decorators: [InSpacingDecorator], + argTypes: { + iconPlacement: { + options: iconPlacements, + control: { + type: 'inline-radio', + }, + defaultValue: 'top', + }, + ...disableProps(['view', 'size']), + }, +}; + +export default meta; + +type StoryPropsDefault = ComponentProps; + +export const Default: StoryObj = { + args: { + iconPlacement: 'top', + width: 400, + height: 280, + disabled: false, + stretch: false, + title: 'Click to upload', + description: 'or drag and drop files here', + }, + render: (args) => ( +
+ +
+ ), +}; diff --git a/packages/sdds-serv/src/components/Dropzone/Dropzone.ts b/packages/sdds-serv/src/components/Dropzone/Dropzone.ts new file mode 100644 index 0000000000..92f99e5fef --- /dev/null +++ b/packages/sdds-serv/src/components/Dropzone/Dropzone.ts @@ -0,0 +1,7 @@ +import { dropzoneConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components'; + +import { config } from './Dropzone.config'; + +const mergedConfig = mergeConfig(dropzoneConfig, config); + +export const Dropzone = component(mergedConfig); diff --git a/packages/sdds-serv/src/components/Dropzone/index.ts b/packages/sdds-serv/src/components/Dropzone/index.ts new file mode 100644 index 0000000000..b9b53cd492 --- /dev/null +++ b/packages/sdds-serv/src/components/Dropzone/index.ts @@ -0,0 +1,2 @@ +export { Dropzone } from './Dropzone'; +export { dropzoneTokens, dropzoneClasses } from '@salutejs/plasma-new-hope/styled-components'; diff --git a/packages/sdds-serv/src/index.ts b/packages/sdds-serv/src/index.ts index 2821d9e602..0dd92e2093 100644 --- a/packages/sdds-serv/src/index.ts +++ b/packages/sdds-serv/src/index.ts @@ -56,6 +56,7 @@ export * from './components/EmptyState'; export * from './components/Attach'; export * from './components/ViewContainer'; export * from './components/NumberInput'; +export * from './components/Dropzone'; export * from './mixins'; export * from './tokens';