docs(hooks): added useFileUpload docs and examples

Author: mlaursen

apps/docs/src/app/(main)/(markdown)/(demos)/components/box/page.mdx

@@ -108,6 +108,9 @@ To create rows with an equal height, enable the `gridAutoRows` restrict
 the height through CSS. This is most useful when handling unknown sized items
 (like file uploads).
 
+> !Success! Check out the [useFileUpload](/hooks/use-file-upload) for another
+> example using auto rows.
+
 ```demo source="./GridAutoRowsExample.tsx"
 
 ```

apps/docs/src/app/(main)/(markdown)/(demos)/hooks/use-file-upload/FileUploadExample.module.scss

@@ -0,0 +1,13 @@
+@use "everything";
+
+.container {
+  @include everything.box-set-var(item-min-size, 18rem);
+  @include everything.box-set-var(auto-rows-height, 18rem * 3);
+  @include everything.box-set-var(row-max-height, 18rem);
+
+  width: 100%;
+}
+
+.progress {
+  padding: everything.$box-padding;
+}

apps/docs/src/app/(main)/(markdown)/(demos)/hooks/use-file-upload/FileUploadExample.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { Box } from "@react-md/core/box/Box";
+import { Button } from "@react-md/core/button/Button";
+import { FileInput } from "@react-md/core/files/FileInput";
+import {
+  type FileUploadOptions,
+  useFileUpload,
+} from "@react-md/core/files/useFileUpload";
+import { Form } from "@react-md/core/form/Form";
+import { FormMessage } from "@react-md/core/form/FormMessage";
+import { FormMessageCounter } from "@react-md/core/form/FormMessageCounter";
+import { LinearProgress } from "@react-md/core/progress/LinearProgress";
+import { type ReactElement } from "react";
+
+import { FilePreviewCard } from "@/components/FilePreview/FilePreviewCard.jsx";
+import { FileUploadErrorModal } from "@/components/FileUploadErrorModal/FileUploadErrorModal.jsx";
+
+import styles from "./FileUploadExample.module.scss";
+
+export const EXTENSIONS = [
+  "svg",
+  "jpeg",
+  "jpg",
+  "png",
+  "apng",
+  "mkv",
+  "mp4",
+  "mpeg",
+  "mpg",
+  "webm",
+  "mov",
+] as const;
+
+export const FOUR_HUNDRED_MB = 400 * 1024 * 1024;
+export const MAX_FILES = 10;
+
+export type FileUploadExampleProps = Partial<FileUploadOptions<HTMLElement>>;
+
+export default function FileUploadExample(
+  props: FileUploadExampleProps
+): ReactElement {
+  const {
+    maxFiles = MAX_FILES,
+    maxFileSize = FOUR_HUNDRED_MB,
+    extensions = EXTENSIONS,
+  } = props;
+  const { stats, errors, onChange, clearErrors, reset, remove, accept } =
+    useFileUpload({
+      ...props,
+      maxFiles,
+      maxFileSize,
+      extensions,
+    });
+
+  return (
+    <Form className={styles.container}>
+      <FileUploadErrorModal errors={errors} clearErrors={clearErrors} />
+      <Box>
+        <FileInput
+          accept={accept}
+          onChange={onChange}
+          multiple={maxFiles > 1}
+        />
+        <Button onClick={reset} disabled={!stats.length}>
+          Remove all files
+        </Button>
+      </Box>
+      <div className={styles.progress}>
+        <LinearProgress
+          aria-label="Upload size limit"
+          min={0}
+          max={maxFiles}
+          value={stats.length}
+        />
+        <FormMessage theme="none">
+          <FormMessageCounter>
+            {stats.length} of {maxFiles}
+          </FormMessageCounter>
+        </FormMessage>
+      </div>
+      <Box
+        grid
+        gridColumns="fill"
+        gridAutoRows
+        align="stretch"
+        className={styles.grid}
+      >
+        {stats.map(({ key, ...uploadStatus }) => (
+          <FilePreviewCard
+            key={key}
+            {...uploadStatus}
+            fileKey={key}
+            remove={remove}
+          />
+        ))}
+      </Box>
+    </Form>
+  );
+}

apps/docs/src/app/(main)/(markdown)/(demos)/hooks/use-file-upload/ServerUploadExample.module.scss

@@ -0,0 +1,40 @@
+@use "everything";
+
+.card {
+  max-width: 30rem;
+}
+
+.list {
+  @include everything.interaction-outline();
+  position: relative;
+}
+
+.dragging {
+  @include everything.interaction-focus-styles($disable-background: true);
+}
+
+.dragover {
+  @include everything.interaction-set-var(
+    focus-color,
+    everything.theme-get-var(success-color)
+  );
+}
+
+.upload {
+  margin: 1rem 0;
+  width: 100%;
+}
+
+.phoneHidden {
+  @include everything.phone-media {
+    display: none;
+  }
+}
+
+.progress {
+  @include everything.progress-set-var(color, currentcolor);
+}
+
+.uploadProgress {
+  margin-top: 1rem;
+}