304 dropzone upload component

packages/components/src/components/FileDropZone/FileDropZone.module.scss

@@ -0,0 +1,18 @@
+.fileDropZone {
+  border-style: var(--file-drop-zone--border-style--default);
+  border-width: var(--file-drop-zone--border-width);
+  border-color: var(--file-drop-zone--border-color--default);
+  background-color: var(--file-drop-zone--background-color--default);
+  border-radius: var(--file-drop-zone--corner-radius);
+  padding: var(--file-drop-zone--padding);
+
+  &[data-focus-visible],
+  &[data-drop-target] {
+    border-color: var(--file-drop-zone--border-color--target);
+    border-style: var(--file-drop-zone--border-style--target);
+  }
+
+  &[data-drop-target] {
+    background-color: var(--file-drop-zone--background-color--target);
+  }
+}

packages/components/src/components/FileDropZone/FileDropZone.tsx

@@ -0,0 +1,64 @@
+import type { FC, PropsWithChildren } from "react";
+import React from "react";
+import * as Aria from "react-aria-components";
+import { IllustratedMessage } from "@/components/IllustratedMessage";
+import type { PropsWithClassName } from "@/lib/types/props";
+import styles from "./FileDropZone.module.scss";
+import clsx from "clsx";
+import type { FileInputOnChangeHandler } from "@/components/FileField/components/FileInput";
+import type { PropsContext } from "@/lib/propsContext";
+import { PropsContextProvider } from "@/lib/propsContext";
+
+export interface FileDropZoneProps
+  extends PropsWithClassName,
+    PropsWithChildren,
+    Pick<Aria.InputProps, "accept" | "multiple"> {
+  onChange?: FileInputOnChangeHandler;
+}
+
+export const FileDropZone: FC<FileDropZoneProps> = (props) => {
+  const { multiple, accept, className, onChange, children } = props;
+
+  const rootClassName = clsx(styles.fileDropZone, className);
+
+  const propsContext: PropsContext = {
+    FileField: {
+      accept: accept,
+      multiple: multiple,
+      Button: { variant: "outline", color: "dark" },
+    },
+  };
+
+  return (
+    <Aria.DropZone
+      className={rootClassName}
+      onDrop={async (e) => {
+        {
+          const fileDropItems = e.items.filter(
+            (file) => file.kind === "file",
+          ) as Aria.FileDropItem[];
+
+          const files = await Promise.all(
+            fileDropItems
+              .filter((f) => !accept || accept?.includes(f.type))
+              .map(async (f) => {
+                return await f.getFile();
+              }),
+          );
+
+          if (files.length > 0) {
+            onChange?.((multiple ? files : [files[0]]) as unknown as FileList);
+          }
+        }
+      }}
+    >
+      <IllustratedMessage color="dark">
+        <PropsContextProvider props={propsContext} mergeInParentContext>
+          {children}
+        </PropsContextProvider>
+      </IllustratedMessage>
+    </Aria.DropZone>
+  );
+};
+
+export default FileDropZone;

packages/components/src/components/FileDropZone/index.ts

@@ -0,0 +1,4 @@
+import { FileDropZone } from "./FileDropZone";
+
+export { type FileDropZoneProps, FileDropZone } from "./FileDropZone";
+export default FileDropZone;

packages/components/src/components/FileDropZone/stories/Default.stories.tsx

@@ -0,0 +1,133 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React, { useState } from "react";
+import { FileDropZone } from "@/components/FileDropZone";
+import { Section } from "@/components/Section";
+import { FileCardList } from "@/components/FileCardList";
+import { FileCard } from "@/components/FileCard";
+import { Form, typedField } from "@/integrations/react-hook-form";
+import { useForm } from "react-hook-form";
+import { action } from "@storybook/addon-actions";
+import { Button } from "@/components/Button";
+import { ActionGroup } from "@/components/ActionGroup";
+import { IconImage, IconUpload } from "@/components/Icon/components/icons";
+import { Heading } from "@/components/Heading";
+import { FileField } from "@/components/FileField";
+import { Text } from "@/components/Text";
+
+const meta: Meta<typeof FileDropZone> = {
+  title: "Upload/FileDropZone",
+  component: FileDropZone,
+  parameters: {
+    controls: { exclude: ["className", "controller", "onChange"] },
+  },
+  render: (props) => {
+    const [files, setFiles] = useState<FileList | null>(null);
+
+    return (
+      <Section>
+        <FileDropZone {...props} onChange={setFiles}>
+          <IconUpload />
+          <Heading>Drop file</Heading>
+          <FileField name="file" onChange={setFiles}>
+            <Button>Select file</Button>
+          </FileField>
+        </FileDropZone>
+        <FileCardList>
+          {[...(files ?? [])].map((f) => (
+            <FileCard name={f.name} key={f.name} />
+          ))}
+        </FileCardList>
+      </Section>
+    );
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof FileDropZone>;
+
+const submitAction = action("submit");
+
+export const Default: Story = {};
+
+export const WithAcceptedTypes: Story = {
+  args: { accept: "image/png" },
+  render: (props) => {
+    const [files, setFiles] = useState<FileList | null>(null);
+
+    return (
+      <Section>
+        <FileDropZone {...props} onChange={setFiles}>
+          <IconImage />
+          <Heading>Drop image</Heading>
+          <Text>Only image/png images are allowed.</Text>
+          <FileField name="file" onChange={setFiles}>
+            <Button>Select image</Button>
+          </FileField>
+        </FileDropZone>
+        <FileCardList>
+          {[...(files ?? [])].map((f) => (
+            <FileCard name={f.name} key={f.name} />
+          ))}
+        </FileCardList>
+      </Section>
+    );
+  },
+};
+
+export const Multiple: Story = {
+  args: { multiple: true },
+  render: (props) => {
+    const [files, setFiles] = useState<FileList | null>(null);
+
+    return (
+      <Section>
+        <FileDropZone {...props} onChange={setFiles}>
+          <IconUpload />
+          <Heading>Drop files</Heading>
+          <FileField name="file" onChange={setFiles}>
+            <Button>Select files</Button>
+          </FileField>
+        </FileDropZone>
+        <FileCardList>
+          {[...(files ?? [])].map((f) => (
+            <FileCard name={f.name} key={f.name} />
+          ))}
+        </FileCardList>
+      </Section>
+    );
+  },
+};
+
+export const WithReactHookForm: Story = {
+  render: (props) => {
+    const form = useForm<{
+      file: FileList | null;
+    }>();
+
+    const Field = typedField(form);
+
+    return (
+      <Form form={form} onSubmit={submitAction}>
+        <Section>
+          <Field name="file" rules={{ required: "Please choose a file" }}>
+            <FileDropZone {...props} onChange={(f) => form.setValue("file", f)}>
+              <IconUpload />
+              <Heading>Drop file</Heading>
+              <FileField name="file">
+                <Button>Select file</Button>
+              </FileField>
+            </FileDropZone>
+          </Field>
+          <FileCardList>
+            {[...(form.watch("file") ?? [])].map((f) => (
+              <FileCard name={f.name} key={f.name} />
+            ))}
+          </FileCardList>
+        </Section>
+        <ActionGroup>
+          <Button type="submit">Upload</Button>
+        </ActionGroup>
+      </Form>
+    );
+  },
+};

packages/components/src/components/Icon/components/icons/IconPicture.tsx

@@ -0,0 +1,15 @@
+/* eslint-disable */
+/* auto-generated file */
+import React, { ComponentProps, FC } from "react";
+import { IconPhoto as Tabler } from "@tabler/icons-react";
+import { Icon } from "@/components/Icon";
+
+export const IconPicture: FC<Omit<ComponentProps<typeof Icon>, "children">> = (
+  props,
+) => (
+  <Icon {...props}>
+    <Tabler />
+  </Icon>
+);
+
+export default IconPicture;

packages/components/src/components/Icon/components/icons/IconUpload.tsx

@@ -0,0 +1,15 @@
+/* eslint-disable */
+/* auto-generated file */
+import React, { ComponentProps, FC } from "react";
+import { IconUpload as Tabler } from "@tabler/icons-react";
+import { Icon } from "@/components/Icon";
+
+export const IconUpload: FC<Omit<ComponentProps<typeof Icon>, "children">> = (
+  props,
+) => (
+  <Icon {...props}>
+    <Tabler />
+  </Icon>
+);
+
+export default IconUpload;

packages/components/src/components/Icon/components/icons/index.ts

@@ -61,6 +61,7 @@ export { IconPassword } from "./IconPassword";
 export { IconPayment } from "./IconPayment";
 export { IconPending } from "./IconPending";
 export { IconPerformance } from "./IconPerformance";
+export { IconPicture } from "./IconPicture";
 export { IconPlus } from "./IconPlus";
 export { IconProject } from "./IconProject";
 export { IconRadioOff } from "./IconRadioOff";
@@ -89,6 +90,7 @@ export { IconSupport } from "./IconSupport";
 export { IconTerminate } from "./IconTerminate";
 export { IconTicket } from "./IconTicket";
 export { IconUndo } from "./IconUndo";
+export { IconUpload } from "./IconUpload";
 export { IconUser } from "./IconUser";
 export { IconView } from "./IconView";
 export { IconWarning } from "./IconWarning";

packages/components/src/components/Icon/icons.yaml

@@ -59,6 +59,7 @@ Password: Lock
 Payment: CreditCard
 Pending: Loader2
 Performance: ChartHistogram
+Picture: Photo
 Plus: Plus
 Project: Archive
 RadioOff: Circle
@@ -87,6 +88,7 @@ Support: Headset
 Terminate: FileX
 Ticket: Ticket
 Undo: ArrowBackUp
+Upload: Upload
 User: User
 View: List
 Warning: AlertCircle

packages/design-tokens/src/border.yml

@@ -15,3 +15,5 @@ border-width:
 border-style:
   default:
     value: "solid"
+  dashed:
+    value: "dashed"

packages/design-tokens/src/upload/file-drop-zone.yml

@@ -0,0 +1,22 @@
+file-drop-zone:
+  corner-radius:
+    value: "{corner-radius.default}"
+  padding:
+    value: "{size-px.m}"
+  background-color:
+    default:
+      value: "{form-control.background-color.default}"
+    target:
+      value: "{form-control.background-color.hover}"
+  border-width:
+    value: "{border-width.100}"
+  border-style:
+    default:
+      value: "{border-style.dashed}"
+    target:
+      value: "{border-style.default}"
+  border-color:
+    default:
+      value: "{form-control.border-color.default}"
+    target:
+      value: "{primary.color.800}"