feat(plasma-new-hope): Dropzone draft

salute-developers · Nov 5, 2024 · a2d0390 · a2d0390
1 parent 479353a
commit a2d0390
Show file tree

Hide file tree

Showing 8 changed files with 579 additions and 0 deletions.
diff --git a/packages/plasma-new-hope/src/components/_Icon/Icon.assets/ArrowBarDown.tsx b/packages/plasma-new-hope/src/components/_Icon/Icon.assets/ArrowBarDown.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { IconProps } from '../IconRoot';
+
+export const ArrowBarDown: React.FC<IconProps> = (props) => (
+    <svg width="100%" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M7.95833 1.875C8.23448 1.875 8.45833 2.09886 8.45833 2.375V10.4043L11.2686 7.54868C11.4623 7.35186 11.7789 7.34933 11.9757 7.54302C12.1725 7.73672 12.1751 8.05329 11.9814 8.25011L8.3147 11.9759C8.21782 12.0744 8.08453 12.1283 7.94645 12.1251C7.80837 12.1218 7.67779 12.0615 7.5857 11.9586L4.25237 8.23278C4.06824 8.02698 4.08582 7.71088 4.29162 7.52676C4.49742 7.34264 4.81351 7.36021 4.99763 7.56601L7.45833 10.3164V2.375C7.45833 2.09886 7.68219 1.875 7.95833 1.875ZM2.5 14.0001C2.5 13.724 2.72386 13.5001 3 13.5001H13C13.2761 13.5001 13.5 13.724 13.5 14.0001C13.5 14.2763 13.2761 14.5001 13 14.5001H3C2.72386 14.5001 2.5 14.2763 2.5 14.0001Z"
+            fill="currentColor"
+        />
+    </svg>
+);
diff --git a/packages/plasma-new-hope/src/components/_Icon/Icons/IconArrowBarDown.tsx b/packages/plasma-new-hope/src/components/_Icon/Icons/IconArrowBarDown.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+
+import { ArrowBarDown } from '../Icon.assets/ArrowBarDown';
+import { IconRoot, IconProps } from '../IconRoot';
+
+export const IconArrowBarDown: React.FC<IconProps> = ({ size = 'xs', color, className }) => {
+    return <IconRoot className={className} size={size} color={color} icon={ArrowBarDown} />;
+};
diff --git a/packages/plasma-new-hope/src/components/_Icon/index.tsx b/packages/plasma-new-hope/src/components/_Icon/index.tsx
@@ -25,3 +25,4 @@ export { IconBlankPdfOutline } from './Icons/IconBlankPdfOutline';
 export { IconBlankTxtOutline } from './Icons/IconBlankTxtOutline';
 export { IconBlankXlsOutline } from './Icons/IconBlankXlsOutline';
 export { IconInfoCircleOutline } from './Icons/IconInfoCircleOutline';
+export { IconArrowBarDown } from './Icons/IconArrowBarDown';
diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Dropzone/Dropzone.stories.tsx b/packages/plasma-new-hope/src/examples/plasma_b2c/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 { disableProps } from '@salutejs/plasma-sb-utils';
+
+import { WithTheme } from '../../../_helpers';
+
+import { Dropzone } from './Dropzone';
+
+const onDragEnter = action('onDragEnter');
+const onDragLeave = action('onDragLeave');
+const onDrop = action('onDrop');
+const onDropFiles = action('onDropFiles');
+const onChange = action('onChange');
+const onChoseFiles = action('onChoseFiles');
+
+const iconPlacement = ['top', 'left'];
+
+const meta: Meta<typeof Dropzone> = {
+    title: 'plasma_b2c/Dropzone',
+    component: Dropzone,
+    decorators: [WithTheme],
+    argTypes: {
+        iconPlacement: {
+            control: {
+                type: 'inline-radio',
+                options: iconPlacement,
+            },
+            defaultValue: 'top',
+        },
+        ...disableProps(['view', 'size']),
+    },
+};
+
+export default meta;
+
+type StoryPropsDefault = ComponentProps<typeof Dropzone>;
+
+export const Default: StoryObj<StoryPropsDefault> = {
+    args: {
+        iconPlacement: 'top',
+        width: 240,
+        disabled: false,
+        title: 'Click to upload',
+        description: 'or drag and drop files here',
+    },
+    render: (args) => (
+        <Dropzone
+            {...args}
+            onDragEnter={onDragEnter}
+            onDragLeave={onDragLeave}
+            onDrop={onDrop}
+            onDropFiles={onDropFiles}
+            onChange={onChange}
+            onChoseFiles={onChoseFiles}
+        />
+    ),
+};
diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Dropzone/Dropzone.styles.ts b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Dropzone/Dropzone.styles.ts
@@ -0,0 +1,86 @@
+import { styled } from '@linaria/react';
+
+export const privateTokens = {
+    width: '--plasma_private-dropzone-width',
+};
+
+export const classes = {
+    stretch: 'dropzone-stretch',
+    active: 'dropzone-active',
+};
+
+export const StyledRoot = styled.div`
+    padding: 1.5rem;
+    border-radius: 1.25rem;
+    border: 1px dashed var(--outline-secondary);
+    background: var(--surface-solid-card);
+    height: 8.75rem;
+    width: var(${privateTokens.width});
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &.${classes.stretch} {
+        width: 100%;
+    }
+
+    &:not(.${classes.active}):hover {
+        border-color: #4a4a4a;
+    }
+
+    &.${classes.active} {
+        border-color: var(--outline-accent);
+
+        &:after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: var(--overlay-soft);
+        }
+    }
+`;
+
+export const Content = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 0.75rem;
+`;
+
+export const TitleWrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    color: var(--text-primary);
+`;
+
+export const Title = styled.span`
+    font-family: var(--plasma-typo-body-h4-font-family);
+    font-size: var(--plasma-typo-body-h4-font-size);
+    font-style: var(--plasma-typo-body-h4-font-style);
+    font-weight: var(--plasma-typo-body-h4-bold-font-weight);
+    letter-spacing: var(--plasma-typo-body-h4-letter-spacing);
+    line-height: var(--plasma-typo-body-h4-line-height);
+`;
+
+export const Description = styled.span`
+    font-family: var(--plasma-typo-body-s-font-family);
+    font-size: var(--plasma-typo-body-s-font-size);
+    font-style: var(--plasma-typo-body-s-font-style);
+    font-weight: var(--plasma-typo-body-s-font-weight);
+    letter-spacing: var(--plasma-typo-body-s-letter-spacing);
+    line-height: var(--plasma-typo-body-s-line-height);
+
+    color: var(--text-secondary);
+`;
+
+export const HiddenInput = styled.input`
+    display: none;
+`;
diff --git a/...new-hope/src/examples/plasma_b2c/components/Dropzone/Dropzone.template-docs.mdx b/...new-hope/src/examples/plasma_b2c/components/Dropzone/Dropzone.template-docs.mdx
@@ -0,0 +1,136 @@
+---
+id: dropzone
+title: Dropzone
+---
+
+import { PropsTable } from '@site/src/components';
+
+# Dropzone
+Компонент для загрузки файлов, без отображения индикации загрузки. 
+Компонент не предполагает наличия валиации, так как является частью Upload. 
+Но валидацию можно задать с помощью callback `validator`.
+<PropsTable name="Dropzone" />
+
+# Типизация
+
+```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<InputHTMLAttributes<HTMLInputElement>, 'accept'>;
+```
+
+# Пример
+
+```tsx live
+import React from 'react';
+import { Dropzone } from '@salutejs/{{ package }}';
+
+export function App() {
+    const onDragEnter = () => {
+        console.log("onDragEnter")
+    }
+
+    const onDragLeave = () => {
+        console.log("onDragLeave")
+    }
+
+    const onDrop = () => {
+        console.log("onDrop")
+    }
+
+    const onDropFiles = () => {
+        console.log("onDropFiles")
+    }
+
+    const onChange = () => {
+        console.log("onChange")
+    }
+
+    const onChoseFiles = () => {
+        console.log("onChoseFiles")
+    }
+
+    return (
+        <Dropzone
+            iconPlacement="top"
+            width="240"
+            title="Click to upload"
+            description="or drag and drop files here"
+            onDragEnter={onDragEnter}
+            onDragLeave={onDragLeave}
+            onDrop={onDrop}
+            onDropFiles={onDropFiles}
+            onChange={onChange}
+            onChoseFiles={onChoseFiles}
+        />
+    );
+}
+```