Add FileUploaderBeta Documentation (#5334)

* Test commit

* Add inital documentation for FileUploaderBeta

documentation-site/cheat-sheet.jsx

@@ -1473,6 +1473,67 @@ const outlines = [
       { name: "DropFilesEventHandler", lineStart: 48, children: [] },
     ],
   },
+  {
+    file: "src/file-uploader-beta/types.ts",
+    definitions: [
+      {
+        name: "StyleProps",
+        lineStart: 11,
+        children: [
+          { name: "$afterFileDrop", lineStart: 12 },
+          { name: "$alt", lineStart: 13 },
+          { name: "$color", lineStart: 14 },
+          { name: "$disabled", lineStart: 15 },
+          { name: "$isDragActive", lineStart: 16 },
+          { name: "$isDragAccept", lineStart: 17 },
+          { name: "$isDragReject", lineStart: 18 },
+          { name: "$isFocused", lineStart: 19 },
+          { name: "$src", lineStart: 20 },
+        ],
+      },
+      {
+        name: "FileUploaderBetaOverrides",
+        lineStart: 23,
+        children: [
+          { name: "AlertIcon", lineStart: 24 },
+          { name: "CircleCheckFilledIcon", lineStart: 25 },
+          { name: "FileRow", lineStart: 26 },
+          { name: "FileRowColumn", lineStart: 27 },
+          { name: "FileRowContent", lineStart: 28 },
+          { name: "FileRowFileName", lineStart: 29 },
+          { name: "FileRowText", lineStart: 30 },
+          { name: "FileRowUploadMessage", lineStart: 31 },
+          { name: "FileRowUploadText", lineStart: 32 },
+          { name: "FileRows", lineStart: 33 },
+          { name: "Hint", lineStart: 34 },
+          { name: "ImagePreviewThumbnail", lineStart: 35 },
+          { name: "ItemPreviewContainer", lineStart: 36 },
+          { name: "Label", lineStart: 37 },
+          { name: "PaperclipFilledIcon", lineStart: 38 },
+          { name: "ParentRoot", lineStart: 39 },
+          { name: "TrashCanFilledIcon", lineStart: 40 },
+          { name: "TrashCanFilledIconContainer", lineStart: 41 },
+        ],
+      },
+      { name: "FileRow", lineStart: 44, children: [
+        { name: "errorMessage", lineStart: 45 },
+        { name: "file", lineStart: 46 },
+        { name: "fileInfo", lineStart: 49 },
+        { name: "imagePreviewThumbnail", lineStart: 50 },
+        { name: "status", lineStart: 52 },
+      ] },
+      { name: "FileUploaderBetaProps", lineStart: 55, children: [
+        { name: "fileRows", lineStart: 59 },
+        { name: "hint", lineStart: 60 },
+        { name: "itemPreview", lineStart: 61 },
+        { name: "label", lineStart: 62 },
+        { name: "maxFiles", lineStart: 63 },
+        { name: "overrides", lineStart: 64 },
+        { name: "processFileOnDrop", lineStart: 66 },
+        { name: "setFileRows", lineStart: 67 },
+      ] },
+    ],
+  },
   {
     file: "src/flex-grid/types.ts",
     definitions: [

documentation-site/components/gallery.jsx

@@ -65,6 +65,10 @@ const COMPONENTS = {
       href: "/components/file-uploader",
       Component: thumbnails.SvgFileUploader,
     },
+    {
+      href: "/components/file-uploader-beta",
+      Component: thumbnails.SvgFileUploaderBeta,
+    },
     {
       href: "/components/menu",
       Component: thumbnails.SvgMenu,

documentation-site/components/thumbs/components/FileUploaderBeta.jsx

@@ -0,0 +1,21 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+/* THIS FILE IS AUTO-GENERATED. DO NOT MODIFY. */
+
+import React from "react";
+
+export default function SvgFileUploaderBeta(props) {
+  return (
+    <svg width={232} height={145} fill="none" {...props}>
+      <path fill={props.colors[0]} d="M48 37h137v72H48z" />
+      <path fill={props.colors[2]} d="M96 75h41v11H96z" />
+      <path fill={props.colors[1]} d="M83 59h67v8H83z" />
+      <path fill={props.colors[2]} d="M152 94h27v23h-27z" />
+      <path fill={props.colors[1]} d="M150 92h27v23h-27z" />
+    </svg>
+  );
+}

documentation-site/components/thumbs/index.jsx

@@ -21,6 +21,7 @@ export { default as SvgTextarea } from "./components/Textarea.jsx";
 
 // Pickers
 export { default as SvgFileUploader } from "./components/FileUploader.jsx";
+export { default as SvgFileUploaderBeta } from "./components/FileUploader.jsx";
 export { default as SvgMenu } from "./components/Menu.jsx";
 export { default as SvgRating } from "./components/Rating.jsx";
 export { default as SvgSelect } from "./components/Select.jsx";

documentation-site/components/yard/config/file-uploader-beta.ts

@@ -0,0 +1,133 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+
+import { FileUploaderBeta } from "baseui/file-uploader-beta";
+import { PropTypes } from "react-view";
+import type { TConfig } from "../types";
+import buttonConfig from "./button";
+
+const changeHandlers = [
+  "onClick",
+  "onFocus",
+  "onBlur",
+  "onKeyDown",
+  "onDragStart",
+  "onDragEnter",
+  "onDragOver",
+  "onDragLeave",
+  "onDrop",
+  "onDropAccepted",
+  "onDropRejected",
+  "onFileDialogCancel",
+  "onCancel",
+  "onRetry",
+];
+
+const FileUploaderBetaConfig: TConfig = {
+  componentName: "FileUploaderBeta",
+  imports: {
+    "baseui/file-uploader-beta": { named: ["FileUploaderBeta"] },
+  },
+  scope: {
+    FileUploaderBeta,
+  },
+  theme: [],
+  props: {
+    accept: {
+      value: "",
+      type: PropTypes.String,
+      description:
+        "Set accepted file types. See https://github.com/okonet/attr-accept for more information",
+    },
+    fileRows: {
+      value: "[]",
+      type: PropTypes.Array,
+      description: "Array of file objects.",
+      stateful: true,
+    },
+    setFileRows: {
+      value: "newFileRows => setFileRows(newFileRows)",
+      type: PropTypes.Function,
+      description: "Function to set file rows.",
+    },
+    maxSize: {
+      value: undefined,
+      type: PropTypes.Number,
+      description: "Maximum file size (in bytes).",
+    },
+    minSize: {
+      value: undefined,
+      type: PropTypes.Number,
+      description: "Minimum file size (in bytes).",
+    },
+    multiple: {
+      value: undefined,
+      type: PropTypes.Boolean,
+      description:
+        "Allow drag n drop (or selection from the file dialog) of multiple files",
+    },
+    disableClick: {
+      value: undefined,
+      type: PropTypes.Boolean,
+      description:
+        "Disallow clicking on the dropzone container to open file dialog.",
+    },
+    disabled: {
+      value: false,
+      type: PropTypes.Boolean,
+      description: "Renders component in disabled state.",
+    },
+    errorMessage: {
+      value: undefined,
+      type: PropTypes.String,
+      description: "Error message to be displayed.",
+    },
+    ...changeHandlers.reduce((acc, current) => {
+      //@ts-ignore
+      acc[current] = {
+        value: undefined,
+        type: PropTypes.Function,
+        description: `Called when the ${current} event is triggered.`,
+        hidden: true,
+      };
+      return acc;
+    }, {}),
+    name: {
+      value: undefined,
+      type: PropTypes.String,
+      description: "Name attribute.",
+      hidden: true,
+    },
+    ["aria-describedby"]: {
+      value: undefined,
+      type: PropTypes.String,
+      description: `Sets aria-describedby attribute.`,
+      hidden: true,
+    },
+    overrides: {
+      value: undefined,
+      type: PropTypes.Custom,
+      description: "Lets you customize all aspects of the component.",
+      custom: {
+        names: [
+          { ...buttonConfig, componentName: "ButtonComponent" },
+          { ...buttonConfig, componentName: "CancelButtonComponent" },
+          { ...buttonConfig, componentName: "RetryButtonComponent" },
+          "ContentMessage",
+          "ErrorMessage",
+          "FileDragAndDrop",
+          "HiddenInput",
+          "Spinner",
+          "ProgressBar",
+        ],
+        sharedProps: {},
+      },
+    },
+  },
+};
+
+export default FileUploaderBetaConfig;

documentation-site/pages/components/file-uploader-beta.mdx

@@ -0,0 +1,36 @@
+import Example from "../../components/example";
+import Layout from "../../components/layout";
+import Exports from "../../components/exports";
+
+import * as FileUploaderBetaExports from "baseui/file-uploader-beta";
+
+import Yard from "../../components/yard/index";
+import fileUploaderBetaYardConfig from "../../components/yard/config/file-uploader-beta";
+
+export default Layout;
+
+# File Uploader Beta
+
+<Yard placeholderHeight={120} {...fileUploaderBetaYardConfig} />
+
+Creates a dropzone for file uploads.
+
+## Accessibility
+
+- "Browse files" has `aria-controls="fileupload"` set.
+
+## When to use
+
+- Enable file(s) upload through drag and drop or the system _Browse files_ dialog.
+
+## Security considerations
+
+By default, the file uploader does not concern itself with validating and discarding potentially malicious files, as Base Web never runs any of the uploaded files. **It's the responsibility of the consuming application to do so.** To help with that, this component supports the `accept` property, which can limit the acceptable file extensions.
+
+To learn more, read the corresponding [OWASP article on file uploads](https://www.owasp.org/index.php/Unrestricted_File_Upload).
+
+<Exports
+  component={FileUploaderBetaExports}
+  title="File uploader beta exports"
+  path="baseui/file-uploader-beta"
+/>

documentation-site/routes.jsx

@@ -136,6 +136,10 @@ const routes = [
             title: "File Uploader",
             itemId: "/components/file-uploader",
           },
+          {
+            title: "File Uploader Beta",
+            itemId: "/components/file-uploader-beta",
+          },
           {
             title: "Menu",
             itemId: "/components/menu",