Add ImageUpload component

packages/components/package.json

@@ -106,6 +106,14 @@
       "types": "./dist/types/components/FieldError/index.d.ts",
       "import": "./dist/FieldError.js"
     },
+    "./FileDropZone": {
+      "types": "./dist/types/components/FileDropZone/index.d.ts",
+      "import": "./dist/FileDropZone.js"
+    },
+    "./FileTrigger": {
+      "types": "./dist/types/components/FileTrigger/index.d.ts",
+      "import": "./dist/FileTrigger.js"
+    },
     "./Header": {
       "types": "./dist/types/components/Header/index.d.ts",
       "import": "./dist/Header.js"
@@ -134,6 +142,14 @@
       "types": "./dist/types/components/Image/index.d.ts",
       "import": "./dist/Image.js"
     },
+    "./ImageCropper": {
+      "types": "./dist/types/components/ImageCropper/index.d.ts",
+      "import": "./dist/ImageCropper.js"
+    },
+    "./ImageUpload": {
+      "types": "./dist/types/components/ImageUpload/index.d.ts",
+      "import": "./dist/ImageUpload.js"
+    },
     "./Initials": {
       "types": "./dist/types/components/Initials/index.d.ts",
       "import": "./dist/Initials.js"
@@ -333,6 +349,7 @@
     "react-aria": "^3.35.0",
     "react-aria-components": "^1.4.0",
     "react-children-utilities": "^2.10.0",
+    "react-easy-crop": "^5.0.7",
     "react-stately": "^3.33.0",
     "remeda": "^2.15.0",
     "use-callback-ref": "^1.3.2",

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

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

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

@@ -0,0 +1,73 @@
+import type { FC, PropsWithChildren } from "react";
+import React from "react";
+import type { FileTriggerProps } from "react-aria-components";
+import * as Aria from "react-aria-components";
+import { Button } from "@/components/Button";
+import clsx from "clsx";
+import styles from "./FileDropZone.module.scss";
+import type { PropsWithClassName } from "@/lib/types/props";
+import locales from "./locales/*.locale.json";
+import { useLocalizedStringFormatter } from "react-aria";
+import type FileController from "@/components/FileTrigger/FileController";
+import { FileTrigger } from "@/components/FileTrigger";
+import { IllustratedMessage } from "@/components/IllustratedMessage";
+import { IconPicture, IconUpload } from "@/components/Icon/components/icons";
+import { Heading } from "@/components/Heading";
+
+export interface FileDropZoneProps
+  extends PropsWithClassName,
+    PropsWithChildren,
+    Pick<FileTriggerProps, "allowsMultiple" | "acceptedFileTypes"> {
+  controller: FileController;
+  /** @default "file" */
+  type?: "file" | "image";
+}
+
+export const FileDropZone: FC<FileDropZoneProps> = (props) => {
+  const {
+    controller,
+    allowsMultiple,
+    acceptedFileTypes,
+    className,
+    children,
+    type = "file",
+  } = props;
+
+  const rootClassName = clsx(styles.fileDropZone, className);
+
+  const stringFormatter = useLocalizedStringFormatter(locales);
+
+  return (
+    <>
+      <Aria.DropZone
+        className={rootClassName}
+        onDrop={(e) =>
+          controller.dropFile(e, acceptedFileTypes, allowsMultiple)
+        }
+      >
+        <IllustratedMessage color="dark">
+          {type === "file" ? <IconUpload /> : <IconPicture />}
+          <Heading>
+            {stringFormatter.format(
+              `fileDropZone.${type}.drop${allowsMultiple ? ".multiple" : ""}`,
+            )}
+          </Heading>
+          {children}
+          <FileTrigger
+            acceptedFileTypes={acceptedFileTypes}
+            allowsMultiple={allowsMultiple}
+            controller={controller}
+          >
+            <Button variant="outline">
+              {stringFormatter.format(
+                `fileDropZone.${type}.select${allowsMultiple ? ".multiple" : ""}`,
+              )}
+            </Button>
+          </FileTrigger>
+        </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/locales/de-DE.locale.json

@@ -0,0 +1,10 @@
+{
+  "fileDropZone.file.drop": "Datei ablegen",
+  "fileDropZone.file.drop.multiple": "Dateien ablegen",
+  "fileDropZone.file.select": "Datei auswählen",
+  "fileDropZone.file.select.multiple": "Dateien auswählen",
+  "fileDropZone.image.drop": "Bild ablegen",
+  "fileDropZone.image.drop.multiple": "Bilder ablegen",
+  "fileDropZone.image.select": "Bild auswählen",
+  "fileDropZone.image.select.multiple": "Bilder auswählen"
+}

packages/components/src/components/FileDropZone/locales/en-EN.locale.json

@@ -0,0 +1,10 @@
+{
+  "fileDropZone.file.drop": "Drop file",
+  "fileDropZone.file.drop.multiple": "Drop files",
+  "fileDropZone.file.select": "Select file",
+  "fileDropZone.file.select.multiple": "Select files",
+  "fileDropZone.image.drop": "Drop image",
+  "fileDropZone.image.drop.multiple": "Drop images",
+  "fileDropZone.image.select": "Select image",
+  "fileDropZone.image.select.multiple": "Select images"
+}

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

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { FileDropZone } from "@/components/FileDropZone";
+import { Text } from "@/components/Text";
+import { LabeledValue } from "@/components/LabeledValue";
+import { Label } from "@/components/Label";
+import { Section } from "@/components/Section";
+import { useFileController } from "@/components/FileTrigger";
+
+const meta: Meta<typeof FileDropZone> = {
+  title: "Upload/FileDropZone",
+  component: FileDropZone,
+  parameters: {
+    controls: { exclude: ["className", "controller"] },
+  },
+  render: (props) => {
+    const controller = useFileController();
+    const files = controller.useFiles();
+
+    return (
+      <Section>
+        <FileDropZone {...props} controller={controller} />
+        <LabeledValue>
+          <Label>Selected files</Label>
+          <Text>
+            {files.length > 0 ? files.map((f) => f.name).join(", ") : "-"}
+          </Text>
+        </LabeledValue>
+      </Section>
+    );
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof FileDropZone>;
+
+export const Default: Story = {};
+
+export const AllowsMultiple: Story = { args: { allowsMultiple: true } };
+
+export const AcceptedFileTypes: Story = {
+  args: { acceptedFileTypes: ["image/png", "image/jpeg"] },
+  render: (props) => {
+    const controller = useFileController();
+    const files = controller.useFiles();
+
+    return (
+      <Section>
+        <FileDropZone {...props} controller={controller}>
+          <Text>Accepted file types are jpg and png.</Text>
+        </FileDropZone>
+        <LabeledValue>
+          <Label>Selected files</Label>
+          <Text>
+            {files.length > 0 ? files.map((f) => f.name).join(", ") : "-"}
+          </Text>
+        </LabeledValue>
+      </Section>
+    );
+  },
+};

packages/components/src/components/FileTrigger/FileController.ts

@@ -0,0 +1,78 @@
+import { action, makeObservable, observable } from "mobx";
+import useSelector from "@/lib/mobx/useSelector";
+import { useRef } from "react";
+import type * as Aria from "react-aria-components";
+import type { DropEvent } from "@react-types/shared";
+
+export class FileController {
+  public readonly files = new Map<number, File>();
+  private id = 0;
+
+  public constructor() {
+    makeObservable(this, {
+      files: observable.shallow,
+      add: action.bound,
+      clear: action.bound,
+      dropFile: action.bound,
+      selectFile: action.bound,
+    });
+  }
+
+  public static useNew(): FileController {
+    return useRef(new FileController()).current;
+  }
+
+  public useFiles(): File[] {
+    return useSelector(() => Array.from(this.files.values()));
+  }
+
+  public add(file: File): void {
+    const id = this.id++;
+
+    this.files.set(id, file);
+  }
+
+  public clear(): void {
+    this.files.clear();
+  }
+
+  public async dropFile(
+    e: DropEvent,
+    acceptedFileTypes?: string[],
+    allowsMultiple?: boolean,
+  ) {
+    const fileDropItems = e.items.filter(
+      (file) => file.kind === "file",
+    ) as Aria.FileDropItem[];
+
+    fileDropItems.map(async (f, i) => {
+      const file = await f.getFile();
+
+      if (acceptedFileTypes && !acceptedFileTypes.includes(file.type)) {
+        throw new Error("invalid file type");
+      }
+
+      if (!allowsMultiple && i > 0) {
+        throw new Error("invalid file count");
+      }
+
+      if (!allowsMultiple) {
+        this.clear();
+      }
+
+      this.add(file);
+    });
+  }
+
+  public selectFile(e: FileList | null, allowsMultiple?: boolean) {
+    const files = e ? Array.from(e) : [];
+    files.map((f) => {
+      if (!allowsMultiple) {
+        this.clear();
+      }
+      this.add(f);
+    });
+  }
+}
+
+export default FileController;