Merge pull request #533 from buildo/532-expand_fileuploaderfield

#532: Add config to FileUploaderField to customise button and allow external control of loading status

Author: federico-ercoles

packages/bento-design-system/src/FileUploaderField/Config.ts

@@ -1,3 +1,6 @@
+import { ButtonProps } from "..";
+
 export type FileUploaderFieldConfig = {
   defaultHeight: string | number;
+  buttonKind: ButtonProps["kind"];
 };

packages/bento-design-system/src/FileUploaderField/FileUploaderField.tsx

@@ -34,7 +34,7 @@ const errorCodes = [
 type KnownDropzoneErrorCode = typeof errorCodes[number];
 
 export type ErrorCode =
-  | `${DropzoneErrorCode}`
+  | `${KnownDropzoneErrorCode}`
   | "generic-error"
   | "wrong-structure"
   | "unable-to-read";
@@ -43,11 +43,6 @@ function isDropzoneKnownError(error: string): error is KnownDropzoneErrorCode {
   return errorCodes.find((c) => c === error) !== undefined;
 }
 
-export type ErrorMessages<E extends string> = Record<
-  E | ErrorCode,
-  Children | ((file: File | undefined) => Children)
->;
-
 export type FileUploaderTexts = {
   title: LocalizedString;
   description: LocalizedString;
@@ -100,6 +95,10 @@ type Props<E extends string> = {
    * The field height
    */
   height?: string | number;
+  /**
+   * A parameter that allows external control of the uploading status.
+   */
+  isUploading?: boolean;
 } & Omit<FieldProps<FileResult<E> | undefined>, "assistiveText" | "issues">;
 
 export type { Props as FileUploaderProps };
@@ -141,10 +140,15 @@ export function FileUploaderField<E extends string>({
   maxFileSize,
   allowedFileTypes,
   height: height_,
+  isUploading,
 }: Props<E>) {
   const config = useBentoConfig().fileUploaderField;
   const height = height_ ?? config.defaultHeight;
-  const [uploading, setUploading] = useState<boolean>(false);
+
+  const [uploading, setUploading] = useState<boolean>(isUploading ?? false);
+  useEffect(() => {
+    isUploading !== undefined && setUploading(isUploading);
+  }, [isUploading]);
 
   // note(Fede): useDropzone already exposes a `isDragActive` flag, but it is true
   // only when a file is dragged over the component, not the whole window, which is what we prefer.
@@ -340,7 +344,7 @@ export function FileUploaderField<E extends string>({
                 </Stack>
               </ContentBlock>
               <Button
-                kind="solid"
+                kind={config.buttonKind}
                 hierarchy="secondary"
                 label={texts.uploadButtonLabel}
                 onPress={open}

packages/bento-design-system/src/util/defaultConfigs.tsx

@@ -251,6 +251,7 @@ export const field: FieldConfig = {
 
 export const fileUploaderField: FileUploaderFieldConfig = {
   defaultHeight: "8rem",
+  buttonKind: "solid",
 };
 
 export const inlineLoader: InlineLoaderConfig = {

packages/storybook/stories/Components/FileUploaderField.stories.tsx

@@ -1,4 +1,6 @@
-import { FileUploaderField } from "..";
+import { useState } from "react";
+import { StoryFn } from "@storybook/react";
+import { FileUploaderField, BentoConfigProvider, Button, Stack } from "..";
 import { createComponentStories } from "../util";
 
 const { defaultExport, createControlledStory } = createComponentStories({
@@ -8,7 +10,7 @@ const { defaultExport, createControlledStory } = createComponentStories({
 
 export default defaultExport;
 
-export const fileUploaderField = createControlledStory(undefined, {
+const fileUploaderProps = {
   label: "Upload a file",
   allowedFileTypes: {
     "text/csv": [".csv"],
@@ -21,10 +23,49 @@ export const fileUploaderField = createControlledStory(undefined, {
     uploadAgainMessage: "Upload another file: ",
     uploadingMessage: "Uploading...",
     uploadButtonLabel: "Choose a file",
-    assistiveTextFileTypes: (fileTypes) =>
+    assistiveTextFileTypes: (fileTypes?: Record<string, string[]>) =>
       fileTypes ? "Allowed file types: " + Object.values(fileTypes).flat().join(", ") : "",
-    assistiveTextMaxSize: (maxSizeMb) => (maxSizeMb ? "Max file size: " + maxSizeMb + "MB" : ""),
+    assistiveTextMaxSize: (maxSizeMb?: number) =>
+      maxSizeMb ? "Max file size: " + maxSizeMb + "MB" : "",
   },
   renderIssue: () => "error",
   maxFileSize: 1000,
-});
+};
+
+export const fileUploaderField = createControlledStory(undefined, fileUploaderProps);
+
+export const Loading = () => {
+  const [loading, setLoading] = useState(false);
+
+  return (
+    <Stack space={16}>
+      <FileUploaderField
+        {...fileUploaderProps}
+        value={undefined}
+        onChange={() => {}}
+        isUploading={loading}
+      />
+      <Button
+        kind="solid"
+        hierarchy="primary"
+        label={loading ? "Stop loading" : "Start loading"}
+        onPress={() => setLoading(!loading)}
+      />
+    </Stack>
+  );
+};
+
+export const withOutlineButton = createControlledStory(undefined, fileUploaderProps);
+withOutlineButton.decorators = [
+  (Story: StoryFn) => (
+    <BentoConfigProvider
+      value={{
+        fileUploaderField: {
+          buttonKind: "outline",
+        },
+      }}
+    >
+      <Story />
+    </BentoConfigProvider>
+  ),
+];