feat(plasma-new-hope): Dropzone draft

packages/plasma-new-hope/src/components/Dropzone/Dropzone.styles.ts

@@ -0,0 +1,37 @@
+import { styled } from '@linaria/react';
+import { css } from '@linaria/core';
+
+export const base = css`
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+`;
+
+export const DropzoneHandlerOverlay = styled.div`
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 2;
+`;
+
+export const Content = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    user-select: none;
+`;
+
+export const TitleWrapper = styled.div``;
+
+export const Title = styled.span``;
+
+export const Description = styled.span``;
+
+export const HiddenInput = styled.input`
+    display: none;
+`;

packages/plasma-new-hope/src/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}
+        />
+    );
+}
+```

packages/plasma-new-hope/src/components/Dropzone/Dropzone.tokens.ts

@@ -0,0 +1,44 @@
+export const classes = {
+    stretch: 'dropzone-stretch',
+    active: 'dropzone-active',
+    verticalContentPlacing: 'dropzone-vertical-content-placing',
+    disabled: 'dropzone-disabled',
+};
+
+export const privateTokens = {
+    width: '--plasma_private-dropzone-width',
+    height: '--plasma_private-dropzone-height',
+};
+
+export const tokens = {
+    background: '--plasma-dropzone-background',
+    overlayColorActive: '--plasma-dropzone-overlay-color-active',
+    border: '--plasma-dropzone-border-color',
+    borderColorHover: '--plasma-dropzone-border-color-hover',
+    borderColorActive: '--plasma-dropzone-border-color-active',
+
+    titleColor: '--plasma-dropzone-title-color',
+    descriptionColor: '--plasma-dropzone-description-color',
+
+    padding: '--plasma-dropzone-padding',
+    borderRadius: '--plasma-dropzone-border-radius',
+    contentGap: '--plasma-dropzone-content-gap',
+    titleWrapperGap: '--plasma-dropzone-title-wrapper-gap',
+    titleWrapperGapColumn: '--plasma-dropzone-title-wrapper-column-gap',
+
+    titleFontFamily: '--plasma-dropzone-title-font-family',
+    titleFontSize: '--plasma-dropzone-title-font-size',
+    titleFontStyle: '--plasma-dropzone-title-font-style',
+    titleFontWeight: '--plasma-dropzone-title-font-weight',
+    titleLetterSpacing: '--plasma-dropzone-title-letter-spacing',
+    titleLineHeight: '--plasma-dropzone-title-line-height',
+
+    descriptionFontFamily: '--plasma-dropzone-description-font-family',
+    descriptionFontSize: '--plasma-dropzone-description-font-size',
+    descriptionFontStyle: '--plasma-dropzone-description-font-style',
+    descriptionFontWeight: '--plasma-dropzone-description-font-weight',
+    descriptionLetterSpacing: '--plasma-dropzone-description-letter-spacing',
+    descriptionLineHeight: '--plasma-dropzone-description-line-height',
+
+    disabledOpacity: '--plasma-dropzone-disabled-opacity',
+};