Skip to content

Commit 006832a

Browse files
epfeiffeepfeiffe
authored
Add FileUploaderBeta Documentation (#5334)
* Test commit * Add inital documentation for FileUploaderBeta
1 parent 83c122a commit 006832a

File tree

7 files changed

+260
-0
lines changed

7 files changed

+260
-0
lines changed

‎documentation-site/cheat-sheet.jsx

+61
Original file line numberDiff line numberDiff line change
@@ -1473,6 +1473,67 @@ const outlines = [
14731473
{ name: "DropFilesEventHandler", lineStart: 48, children: [] },
14741474
],
14751475
},
1476+
{
1477+
file: "src/file-uploader-beta/types.ts",
1478+
definitions: [
1479+
{
1480+
name: "StyleProps",
1481+
lineStart: 11,
1482+
children: [
1483+
{ name: "$afterFileDrop", lineStart: 12 },
1484+
{ name: "$alt", lineStart: 13 },
1485+
{ name: "$color", lineStart: 14 },
1486+
{ name: "$disabled", lineStart: 15 },
1487+
{ name: "$isDragActive", lineStart: 16 },
1488+
{ name: "$isDragAccept", lineStart: 17 },
1489+
{ name: "$isDragReject", lineStart: 18 },
1490+
{ name: "$isFocused", lineStart: 19 },
1491+
{ name: "$src", lineStart: 20 },
1492+
],
1493+
},
1494+
{
1495+
name: "FileUploaderBetaOverrides",
1496+
lineStart: 23,
1497+
children: [
1498+
{ name: "AlertIcon", lineStart: 24 },
1499+
{ name: "CircleCheckFilledIcon", lineStart: 25 },
1500+
{ name: "FileRow", lineStart: 26 },
1501+
{ name: "FileRowColumn", lineStart: 27 },
1502+
{ name: "FileRowContent", lineStart: 28 },
1503+
{ name: "FileRowFileName", lineStart: 29 },
1504+
{ name: "FileRowText", lineStart: 30 },
1505+
{ name: "FileRowUploadMessage", lineStart: 31 },
1506+
{ name: "FileRowUploadText", lineStart: 32 },
1507+
{ name: "FileRows", lineStart: 33 },
1508+
{ name: "Hint", lineStart: 34 },
1509+
{ name: "ImagePreviewThumbnail", lineStart: 35 },
1510+
{ name: "ItemPreviewContainer", lineStart: 36 },
1511+
{ name: "Label", lineStart: 37 },
1512+
{ name: "PaperclipFilledIcon", lineStart: 38 },
1513+
{ name: "ParentRoot", lineStart: 39 },
1514+
{ name: "TrashCanFilledIcon", lineStart: 40 },
1515+
{ name: "TrashCanFilledIconContainer", lineStart: 41 },
1516+
],
1517+
},
1518+
{ name: "FileRow", lineStart: 44, children: [
1519+
{ name: "errorMessage", lineStart: 45 },
1520+
{ name: "file", lineStart: 46 },
1521+
{ name: "fileInfo", lineStart: 49 },
1522+
{ name: "imagePreviewThumbnail", lineStart: 50 },
1523+
{ name: "status", lineStart: 52 },
1524+
] },
1525+
{ name: "FileUploaderBetaProps", lineStart: 55, children: [
1526+
{ name: "fileRows", lineStart: 59 },
1527+
{ name: "hint", lineStart: 60 },
1528+
{ name: "itemPreview", lineStart: 61 },
1529+
{ name: "label", lineStart: 62 },
1530+
{ name: "maxFiles", lineStart: 63 },
1531+
{ name: "overrides", lineStart: 64 },
1532+
{ name: "processFileOnDrop", lineStart: 66 },
1533+
{ name: "setFileRows", lineStart: 67 },
1534+
] },
1535+
],
1536+
},
14761537
{
14771538
file: "src/flex-grid/types.ts",
14781539
definitions: [

‎documentation-site/components/gallery.jsx

+4
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,10 @@ const COMPONENTS = {
6565
href: "/components/file-uploader",
6666
Component: thumbnails.SvgFileUploader,
6767
},
68+
{
69+
href: "/components/file-uploader-beta",
70+
Component: thumbnails.SvgFileUploaderBeta,
71+
},
6872
{
6973
href: "/components/menu",
7074
Component: thumbnails.SvgMenu,

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

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

‎documentation-site/components/thumbs/index.jsx

+1
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ export { default as SvgTextarea } from "./components/Textarea.jsx";
2121

2222
// Pickers
2323
export { default as SvgFileUploader } from "./components/FileUploader.jsx";
24+
export { default as SvgFileUploaderBeta } from "./components/FileUploader.jsx";
2425
export { default as SvgMenu } from "./components/Menu.jsx";
2526
export { default as SvgRating } from "./components/Rating.jsx";
2627
export { default as SvgSelect } from "./components/Select.jsx";

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

+133
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
/*
2+
Copyright (c) Uber Technologies, Inc.
3+
4+
This source code is licensed under the MIT license found in the
5+
LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
import { FileUploaderBeta } from "baseui/file-uploader-beta";
9+
import { PropTypes } from "react-view";
10+
import type { TConfig } from "../types";
11+
import buttonConfig from "./button";
12+
13+
const changeHandlers = [
14+
"onClick",
15+
"onFocus",
16+
"onBlur",
17+
"onKeyDown",
18+
"onDragStart",
19+
"onDragEnter",
20+
"onDragOver",
21+
"onDragLeave",
22+
"onDrop",
23+
"onDropAccepted",
24+
"onDropRejected",
25+
"onFileDialogCancel",
26+
"onCancel",
27+
"onRetry",
28+
];
29+
30+
const FileUploaderBetaConfig: TConfig = {
31+
componentName: "FileUploaderBeta",
32+
imports: {
33+
"baseui/file-uploader-beta": { named: ["FileUploaderBeta"] },
34+
},
35+
scope: {
36+
FileUploaderBeta,
37+
},
38+
theme: [],
39+
props: {
40+
accept: {
41+
value: "",
42+
type: PropTypes.String,
43+
description:
44+
"Set accepted file types. See https://github.com/okonet/attr-accept for more information",
45+
},
46+
fileRows: {
47+
value: "[]",
48+
type: PropTypes.Array,
49+
description: "Array of file objects.",
50+
stateful: true,
51+
},
52+
setFileRows: {
53+
value: "newFileRows => setFileRows(newFileRows)",
54+
type: PropTypes.Function,
55+
description: "Function to set file rows.",
56+
},
57+
maxSize: {
58+
value: undefined,
59+
type: PropTypes.Number,
60+
description: "Maximum file size (in bytes).",
61+
},
62+
minSize: {
63+
value: undefined,
64+
type: PropTypes.Number,
65+
description: "Minimum file size (in bytes).",
66+
},
67+
multiple: {
68+
value: undefined,
69+
type: PropTypes.Boolean,
70+
description:
71+
"Allow drag n drop (or selection from the file dialog) of multiple files",
72+
},
73+
disableClick: {
74+
value: undefined,
75+
type: PropTypes.Boolean,
76+
description:
77+
"Disallow clicking on the dropzone container to open file dialog.",
78+
},
79+
disabled: {
80+
value: false,
81+
type: PropTypes.Boolean,
82+
description: "Renders component in disabled state.",
83+
},
84+
errorMessage: {
85+
value: undefined,
86+
type: PropTypes.String,
87+
description: "Error message to be displayed.",
88+
},
89+
...changeHandlers.reduce((acc, current) => {
90+
//@ts-ignore
91+
acc[current] = {
92+
value: undefined,
93+
type: PropTypes.Function,
94+
description: `Called when the ${current} event is triggered.`,
95+
hidden: true,
96+
};
97+
return acc;
98+
}, {}),
99+
name: {
100+
value: undefined,
101+
type: PropTypes.String,
102+
description: "Name attribute.",
103+
hidden: true,
104+
},
105+
["aria-describedby"]: {
106+
value: undefined,
107+
type: PropTypes.String,
108+
description: `Sets aria-describedby attribute.`,
109+
hidden: true,
110+
},
111+
overrides: {
112+
value: undefined,
113+
type: PropTypes.Custom,
114+
description: "Lets you customize all aspects of the component.",
115+
custom: {
116+
names: [
117+
{ ...buttonConfig, componentName: "ButtonComponent" },
118+
{ ...buttonConfig, componentName: "CancelButtonComponent" },
119+
{ ...buttonConfig, componentName: "RetryButtonComponent" },
120+
"ContentMessage",
121+
"ErrorMessage",
122+
"FileDragAndDrop",
123+
"HiddenInput",
124+
"Spinner",
125+
"ProgressBar",
126+
],
127+
sharedProps: {},
128+
},
129+
},
130+
},
131+
};
132+
133+
export default FileUploaderBetaConfig;

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

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import Example from "../../components/example";
2+
import Layout from "../../components/layout";
3+
import Exports from "../../components/exports";
4+
5+
import * as FileUploaderBetaExports from "baseui/file-uploader-beta";
6+
7+
import Yard from "../../components/yard/index";
8+
import fileUploaderBetaYardConfig from "../../components/yard/config/file-uploader-beta";
9+
10+
export default Layout;
11+
12+
# File Uploader Beta
13+
14+
<Yard placeholderHeight={120} {...fileUploaderBetaYardConfig} />
15+
16+
Creates a dropzone for file uploads.
17+
18+
## Accessibility
19+
20+
- "Browse files" has `aria-controls="fileupload"` set.
21+
22+
## When to use
23+
24+
- Enable file(s) upload through drag and drop or the system _Browse files_ dialog.
25+
26+
## Security considerations
27+
28+
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.
29+
30+
To learn more, read the corresponding [OWASP article on file uploads](https://www.owasp.org/index.php/Unrestricted_File_Upload).
31+
32+
<Exports
33+
component={FileUploaderBetaExports}
34+
title="File uploader beta exports"
35+
path="baseui/file-uploader-beta"
36+
/>

‎documentation-site/routes.jsx

+4
Original file line numberDiff line numberDiff line change
@@ -136,6 +136,10 @@ const routes = [
136136
title: "File Uploader",
137137
itemId: "/components/file-uploader",
138138
},
139+
{
140+
title: "File Uploader Beta",
141+
itemId: "/components/file-uploader-beta",
142+
},
139143
{
140144
title: "Menu",
141145
itemId: "/components/menu",

0 commit comments

Comments
 (0)