From 006832a2cc46f6c8802e9902be2f8a2b371babff Mon Sep 17 00:00:00 2001 From: Emerson Pfeiffer Date: Thu, 27 Jun 2024 11:49:01 -0700 Subject: [PATCH] Add FileUploaderBeta Documentation (#5334) * Test commit * Add inital documentation for FileUploaderBeta --- documentation-site/cheat-sheet.jsx | 61 ++++++++ documentation-site/components/gallery.jsx | 4 + .../thumbs/components/FileUploaderBeta.jsx | 21 +++ .../components/thumbs/index.jsx | 1 + .../yard/config/file-uploader-beta.ts | 133 ++++++++++++++++++ .../pages/components/file-uploader-beta.mdx | 36 +++++ documentation-site/routes.jsx | 4 + 7 files changed, 260 insertions(+) create mode 100644 documentation-site/components/thumbs/components/FileUploaderBeta.jsx create mode 100644 documentation-site/components/yard/config/file-uploader-beta.ts create mode 100644 documentation-site/pages/components/file-uploader-beta.mdx diff --git a/documentation-site/cheat-sheet.jsx b/documentation-site/cheat-sheet.jsx index 540590ce3c..9851b650ee 100644 --- a/documentation-site/cheat-sheet.jsx +++ b/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: [ diff --git a/documentation-site/components/gallery.jsx b/documentation-site/components/gallery.jsx index 9689dec834..574c0bfc88 100644 --- a/documentation-site/components/gallery.jsx +++ b/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, diff --git a/documentation-site/components/thumbs/components/FileUploaderBeta.jsx b/documentation-site/components/thumbs/components/FileUploaderBeta.jsx new file mode 100644 index 0000000000..d2db519356 --- /dev/null +++ b/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 ( + + + + + + + + ); +} diff --git a/documentation-site/components/thumbs/index.jsx b/documentation-site/components/thumbs/index.jsx index 47241f78b1..db448b3d23 100644 --- a/documentation-site/components/thumbs/index.jsx +++ b/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"; diff --git a/documentation-site/components/yard/config/file-uploader-beta.ts b/documentation-site/components/yard/config/file-uploader-beta.ts new file mode 100644 index 0000000000..f6804c887c --- /dev/null +++ b/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; diff --git a/documentation-site/pages/components/file-uploader-beta.mdx b/documentation-site/pages/components/file-uploader-beta.mdx new file mode 100644 index 0000000000..abb1f73200 --- /dev/null +++ b/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 + + + +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). + + diff --git a/documentation-site/routes.jsx b/documentation-site/routes.jsx index 0d9143d547..a17965090f 100644 --- a/documentation-site/routes.jsx +++ b/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",