feat(DropzoneOverlay): add new component

packages/configs/cspell-config/index.json

@@ -15,6 +15,7 @@
     "depcruise",
     "describedby",
     "docgen",
+    "dropzone",
     "elonkit",
     "elonsoft",
     "esfront",

packages/react/src/components/DropzoneOverlay/DropzoneOverlay.api.mdx

@@ -0,0 +1,37 @@
+import { Meta } from '@storybook/blocks';
+import LinkTo from '@storybook/addon-links/react';
+import { TableInterface } from '~storybook/components/TableInterface';
+
+<Meta title="Components API/DropzoneOverlay" />
+
+# DropzoneOverlay API
+
+```js
+import { DropzoneOverlay } from '@esfront/react';
+```
+
+## Component name
+
+The name `ESDropzoneOverlay` can be used when providing default props or style overrides in the theme.
+
+## Props
+
+<TableInterface name="DropzoneOverlayProps" variant="props" />
+
+<br />
+
+## CSS
+
+<TableInterface name="DropzoneOverlayClasses" variant="css" />
+
+<br />
+
+## Demos
+
+<ul>
+  <li>
+    <LinkTo kind="components-DropzoneOverlay" story="demo">
+      <code>DropzoneOverlay</code>
+    </LinkTo>
+  </li>
+</ul>

packages/react/src/components/DropzoneOverlay/DropzoneOverlay.classes.ts

@@ -0,0 +1,43 @@
+import { generateUtilityClass, generateUtilityClasses } from '@mui/material';
+
+export type DropzoneOverlayClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the content wrapper element. */
+  contentWrapper: string;
+  /** Styles applied to the content element. */
+  content: string;
+  /** Styles applied to the dropzone overlay element if file is dragged over the document. */
+  dropzoneOverlayDragOverDocument: string;
+  /** Styles applied to the dropzone overlay element if file is dragged over. */
+  dropzoneOverlayDragOver: string;
+  /** Styles applied to the input element. */
+  input: string;
+  /** Styles applied to the icon wrapper element. */
+  icon: string;
+  /** Styles applied to the heading element. */
+  heading: string;
+  /** Styles applied to the headingText element. */
+  headingText: string;
+  /** Styles applied to the subheading element. */
+  subheading: string;
+};
+
+export type DropzoneOverlayClassKey = keyof DropzoneOverlayClasses;
+
+export function getDropzoneOverlayUtilityClass(slot: string): string {
+  return generateUtilityClass('ESDropzoneOverlay', slot);
+}
+
+export const dropzoneOverlayClasses: DropzoneOverlayClasses = generateUtilityClasses('ESDropzoneOverlay', [
+  'root',
+  'contentWrapper',
+  'content',
+  'dropzoneOverlayDragOverDocument',
+  'dropzoneOverlayDragOver',
+  'input',
+  'icon',
+  'heading',
+  'headingText',
+  'subheading',
+]);

packages/react/src/components/DropzoneOverlay/DropzoneOverlay.stories.tsx

@@ -0,0 +1,89 @@
+import { Args, Meta, StoryContext, StoryObj } from '@storybook/react';
+
+import { DropzoneOverlay } from '.';
+
+import { FileIcon } from '../FileIcon';
+
+const getHeading = (args: Args, context: StoryContext<unknown>) => {
+  return args.heading || (context.globals.locale === 'en' ? 'Upload file' : 'Загрузить файл');
+};
+
+const getSubheading = (args: Args, context: StoryContext<unknown>) => {
+  return (
+    args.subheading ||
+    (context.globals.locale === 'en'
+      ? 'File max size 50 MB. Supported extensions are JPG, JPEG, PNG, HEIC, HEIF or WEBP'
+      : 'Файл в формате JPG, JPEG, PNG, HEIC, HEIF или WEBP до 50 Мб')
+  );
+};
+
+const getText = (context: StoryContext<unknown>) => {
+  return context.globals.locale === 'en' ? 'Drag file over the browser window' : 'Перетащите файл в окно браузера';
+};
+
+const meta: Meta<typeof DropzoneOverlay> = {
+  tags: ['autodocs'],
+  component: DropzoneOverlay,
+  parameters: {
+    references: ['DropzoneOverlay'],
+  },
+  argTypes: {
+    heading: {
+      table: {
+        category: 'General',
+      },
+    },
+    subheading: {
+      table: {
+        category: 'General',
+      },
+    },
+    accept: {
+      table: {
+        category: 'General',
+      },
+    },
+    maxSize: {
+      table: {
+        category: 'General',
+      },
+    },
+    multiple: {
+      table: {
+        category: 'General',
+      },
+    },
+    icon: {
+      table: {
+        disable: true,
+      },
+    },
+    TransitionProps: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+  args: {
+    accept: '*',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof DropzoneOverlay>;
+
+export const Demo: Story = {
+  render: (args, context) => {
+    return (
+      <>
+        {getText(context)}
+        <DropzoneOverlay
+          {...args}
+          heading={getHeading(args, context)}
+          icon={<FileIcon height={44} width={33} />}
+          subheading={getSubheading(args, context)}
+        />
+      </>
+    );
+  },
+};