Dashboard/ui/components/FileUpload/FileUpload.tsx

"use client";
/*
 * Documentation:
 * Button — https://app.subframe.com/f023064a5ca0/library?component=Button_3b777358-b86b-40af-9327-891efc6826fe
 * File Upload — https://app.subframe.com/f023064a5ca0/library?component=File+Upload_28a3336a-2bdd-4d1c-8dc1-75c9d6eef452
 * Progress — https://app.subframe.com/f023064a5ca0/library?component=Progress_60964db0-a1bf-428b-b9d5-f34cdf58ea77
 */

import React from "react";
import { FeatherFile } from "@subframe/core";
import { FeatherUpload } from "@subframe/core";
import { FeatherX } from "@subframe/core";
import * as SubframeUtils from "../../utils";
import { Button } from "../Button";
import { Progress } from "../Progress";

export interface FileUploadRootProps
  extends React.HTMLAttributes<HTMLDivElement> {
  fullwith?: boolean;
  state?: "default" | "hover" | "uploading" | "error" | "uploaded";
  filename?: React.ReactNode;
  fileSize?: React.ReactNode;
  uploadProgress?: number;
  progressText?: React.ReactNode;
  errorMessage?: React.ReactNode;
  browseLabel?: React.ReactNode;
  cancelLabel?: React.ReactNode;
  className?: string;
}

const FileUploadRoot = React.forwardRef<HTMLDivElement, FileUploadRootProps>(
  function FileUploadRoot(
    {
      fullwith = false,
      state = "default",
      filename,
      fileSize,
      uploadProgress = 60,
      progressText,
      errorMessage,
      browseLabel,
      cancelLabel,
      className,
      ...otherProps
    }: FileUploadRootProps,
    ref
  ) {
    return (
      <div
        className={SubframeUtils.twClassNames(
          "group/28a3336a flex flex-col items-start gap-2",
          { "w-full": fullwith },
          className
        )}
        ref={ref}
        {...otherProps}
      >
        <div
          className={SubframeUtils.twClassNames(
            "flex h-52 w-80 flex-none flex-col items-center justify-center gap-5 rounded-lg border border-dashed border-border-strong bg-surface-neutral-primary px-6 py-8",
            {
              hidden: state === "uploaded" || state === "uploading",
              "h-auto border border-dashed border-border-negative-solid":
                state === "error",
              "border-2 border-dashed border-border-information-solid bg-surface-feedback-subtle-information":
                state === "hover",
              "h-auto w-full": fullwith,
            }
          )}
        >
          <div
            className={SubframeUtils.twClassNames(
              "flex flex-col items-center justify-center gap-8",
              { "gap-6": state === "error" }
            )}
          >
            <div
              className={SubframeUtils.twClassNames(
                "flex flex-col items-center justify-center gap-8",
                { "gap-6": state === "hover" }
              )}
            >
              <FeatherUpload className="text-subtitle font-subtitle text-icon-neutral-secondary" />
              <span
                className={SubframeUtils.twClassNames(
                  "hidden text-body-small-medium-0 font-body-small-medium-0 text-text-feedback-link-default",
                  {
                    "text-text-neutral-primary": state === "error",
                    "text-text-neutral-primary inline-flex": state === "hover",
                  }
                )}
              >
                Drop your invoice file here
              </span>
            </div>
            <span
              className={SubframeUtils.twClassNames(
                "text-body-default-regular-0 font-body-default-regular-0 text-text-neutral-secondary",
                { hidden: state === "hover" }
              )}
            >
              Drop your invoice file here or
            </span>
          </div>
          <div
            className={SubframeUtils.twClassNames(
              "flex flex-col items-center justify-center gap-5",
              { "gap-6": state === "error", hidden: state === "hover" }
            )}
          >
            <div
              className={SubframeUtils.twClassNames(
                "flex flex-col items-center justify-center gap-3",
                { hidden: state === "hover" }
              )}
            >
              <Button variant="tertiary">Click here to browse</Button>
            </div>
            {errorMessage ? (
              <span
                className={SubframeUtils.twClassNames(
                  "hidden text-body-small-regular-0 font-body-small-regular-0 text-text-feedback-negative",
                  { "inline-flex": state === "error" }
                )}
              >
                {errorMessage}
              </span>
            ) : null}
          </div>
        </div>
        <div
          className={SubframeUtils.twClassNames(
            "hidden w-80 flex-col items-start gap-4 rounded-lg border border-dashed border-border-strong bg-surface-neutral-primary px-6 py-8",
            { flex: state === "uploading", "w-full flex-none": fullwith }
          )}
        >
          {filename ? (
            <span className="text-body-default-medium-0 font-body-default-medium-0 text-text-neutral-primary">
              {filename}
            </span>
          ) : null}
          <Progress
            hideLabel={state === "uploading" ? true : undefined}
            label="Uploading file"
            statusText="30%"
          />
          <div
            className={SubframeUtils.twClassNames(
              "hidden flex-col items-start gap-6",
              { flex: state === "uploading" }
            )}
          >
            {progressText ? (
              <span className="text-body-small-regular-0 font-body-small-regular-0 text-text-neutral-tertiary">
                {progressText}
              </span>
            ) : null}
            <div
              className={SubframeUtils.twClassNames(
                "hidden items-center gap-2",
                { flex: state === "uploading" }
              )}
            >
              <Button
                variant={state === "uploading" ? "destructive" : undefined}
              >
                {state === "uploading" ? "Cancel" : "Button"}
              </Button>
            </div>
          </div>
        </div>
        <div
          className={SubframeUtils.twClassNames(
            "hidden w-72 items-center gap-3 rounded-md border border-solid border-border-default bg-surface-neutral-primary px-3 py-4",
            { flex: state === "uploaded", "w-full flex-none": fullwith }
          )}
        >
          <FeatherFile className="text-body-large font-body-large text-icon-neutral-secondary" />
          <div className="flex grow shrink-0 basis-0 flex-col items-start gap-2 self-stretch">
            {filename ? (
              <span className="text-body-small-medium-0 font-body-small-medium-0 text-text-neutral-primary">
                {filename}
              </span>
            ) : null}
            {fileSize ? (
              <span className="text-body-small-regular-0 font-body-small-regular-0 text-text-neutral-tertiary">
                {fileSize}
              </span>
            ) : null}
          </div>
          <div className="flex items-start">
            <FeatherX className="text-body-default-regular-0 font-body-default-regular-0 text-icon-neutral-subtle" />
          </div>
        </div>
      </div>
    );
  }
);

export const FileUpload = FileUploadRoot;