@veritone-ce/design-system 2.7.6 → 2.8.1

package/dist/esm/FileUploader/components.js

@@ -1,256 +0,0 @@
-'use strict';
-'use client';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import React__default, { useCallback, useState } from 'react';
-import { CloudUploadOutlined, DeleteOutline, CheckOutlined, WarningOutlined } from '@mui/icons-material';
-import { useDropzone } from 'react-dropzone';
-import { cx } from '../styles/cx.js';
-import '../styles/defaultThemeOptions.js';
-import '@capsizecss/core';
-import 'color2k';
-import '../styles/defaultTheme.js';
-import '../styles/provider.client.js';
-import '../styles/css-vars.js';
-import Typography from '../Typography/index.js';
-import { LinearProgress } from '@mui/material';
-import IconButton from '../IconButton/index.js';
-import { adaptMuiSvgIcon } from '../Icon/wrappers.js';
-import '../Icon/factory.js';
-import styles from './styles.module.scss.js';
-import { useUploadyContext, BATCH_STATES, useBatchAddListener, useBatchStartListener, useBatchFinalizeListener, useUploady, FILE_STATES, useBatchProgressListener, useAbortItem, useItemFinalizeListener, useItemProgressListener } from '@rpldy/uploady';
-import Button from '../Button/index.js';
-
-const CloudUploadOutlinedIcon = adaptMuiSvgIcon(CloudUploadOutlined);
-const DeleteOutlineIcon = adaptMuiSvgIcon(DeleteOutline);
-const CheckOutlineIcon = adaptMuiSvgIcon(CheckOutlined);
-const WarningOutlineIcon = adaptMuiSvgIcon(WarningOutlined);
-function UploadDropzone(props) {
-  const disabled = props.disabled ?? false;
-  const { upload, getOptions } = useUploady();
-  const [batchState, setBatchState] = useState(
-    BATCH_STATES.PENDING
-  );
-  const [progress, setProgress] = useState(0);
-  const [hasError, setHasError] = useState(false);
-  useBatchFinalizeListener((batch) => {
-    setBatchState(batch.state);
-    setHasError(batch.items.some((item) => item.state === FILE_STATES.ERROR));
-  });
-  useBatchProgressListener((batch) => {
-    setBatchState(batch.state);
-    setProgress(batch.completed);
-  });
-  const { getRootProps, getInputProps } = useDropzone({
-    disabled,
-    multiple: !getOptions().autoUpload,
-    accept: props.accept,
-    onDrop: (files) => {
-      upload(files);
-      setProgress(0);
-      setBatchState(BATCH_STATES.PENDING);
-    }
-  });
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      "data-testid": props["data-testid"] ?? "dropzone",
-      "data-disabled": disabled,
-      "data-mini": props.mini,
-      style: props.style,
-      className: cx(styles.dropzone, props.className),
-      ...getRootProps(),
-      children: [
-        /* @__PURE__ */ jsx("input", { type: "file", className: styles.input, ...getInputProps() }),
-        /* @__PURE__ */ jsxs("span", { className: styles.uploadIconContainer, children: [
-          batchState === BATCH_STATES.FINISHED ? hasError ? /* @__PURE__ */ jsx(WarningOutlineIcon, { className: styles.icon }) : /* @__PURE__ */ jsx(CheckOutlineIcon, { className: styles.icon }) : /* @__PURE__ */ jsx(CloudUploadOutlinedIcon, { className: styles.icon }),
-          /* @__PURE__ */ jsxs(
-            "svg",
-            {
-              viewBox: "0 0 250 250",
-              className: styles.uploadProgress,
-              style: {
-                ...{
-                  "--progress": progress,
-                  "--error": hasError
-                }
-              },
-              children: [
-                /* @__PURE__ */ jsx("circle", { className: styles.uploadProgressBg }),
-                progress > 0 && /* @__PURE__ */ jsx(
-                  "circle",
-                  {
-                    "data-success": batchState === BATCH_STATES.FINISHED,
-                    "data-error": hasError,
-                    className: styles.uploadProgressFg
-                  }
-                )
-              ]
-            }
-          )
-        ] }),
-        !props.mini && /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsxs("span", { children: [
-            /* @__PURE__ */ jsx(
-              Typography,
-              {
-                as: "span",
-                variant: "paragraph2",
-                className: styles.browseLabel,
-                children: "Browse files"
-              }
-            ),
-            /* @__PURE__ */ jsxs(Typography, { as: "span", variant: "paragraph2", children: [
-              " ",
-              "from your computer or drag and drop here"
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs(
-            Typography,
-            {
-              as: "p",
-              variant: "paragraph3",
-              className: styles.fileFormatLabel,
-              children: [
-                "Supported File Formats:",
-                " ",
-                Object.values(props.accept).flat().join(", ")
-              ]
-            }
-          )
-        ] })
-      ]
-    }
-  );
-}
-function UploadList(props) {
-  const [items, setItems] = useState([]);
-  useBatchAddListener((batch) => {
-    setItems((items2) => items2.concat(batch.items));
-  });
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-testid": props["data-testid"],
-      style: props.style,
-      className: cx(styles.uploadsContainer, props.className),
-      children: /* @__PURE__ */ jsx("table", { className: styles.uploads, children: /* @__PURE__ */ jsx("tbody", { children: items.map((item, index) => /* @__PURE__ */ jsx(UploadListItem, { item }, index)) }) })
-    }
-  );
-}
-function UploadListItem({ item }) {
-  const [itemState, setState] = useState(item.state);
-  const [progress, setProgress] = useState(0);
-  const abortItem = useAbortItem();
-  useItemFinalizeListener((item2) => {
-    setState(item2.state);
-  }, item.id);
-  useItemProgressListener((item2) => {
-    setProgress(item2.completed);
-  });
-  const isAborted = itemState === FILE_STATES.ABORTED;
-  const isSuccess = itemState === FILE_STATES.FINISHED;
-  const isError = itemState === FILE_STATES.ERROR;
-  const isFinished = ![FILE_STATES.PENDING, FILE_STATES.UPLOADING].includes(
-    itemState
-  );
-  const onAbortItem = () => {
-    abortItem(item.id);
-  };
-  return /* @__PURE__ */ jsxs("tr", { "data-testid": "file-item", className: styles.lineItem, children: [
-    /* @__PURE__ */ jsxs("td", { children: [
-      /* @__PURE__ */ jsx(Typography, { as: "p", variant: "label", className: styles.label, children: item.file.name }),
-      /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: styles.progressBar,
-          "data-success": isSuccess,
-          "data-error": isError,
-          children: /* @__PURE__ */ jsx(
-            LinearProgress,
-            {
-              value: progress,
-              variant: "determinate",
-              color: "inherit"
-            }
-          )
-        }
-      ),
-      isError && /* @__PURE__ */ jsx(
-        Typography,
-        {
-          as: "p",
-          variant: "paragraph3",
-          className: styles.feedbackText,
-          children: "An error occurred."
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx("td", { className: styles.deleteBtn, children: isFinished ? isSuccess ? /* @__PURE__ */ jsx(
-      IconButton,
-      {
-        "data-testid": "file-item-success-button",
-        "aria-label": "success",
-        disabled: true,
-        children: /* @__PURE__ */ jsx(CheckOutlineIcon, {})
-      }
-    ) : isError ? /* @__PURE__ */ jsx(
-      IconButton,
-      {
-        "data-testid": "file-item-error-button",
-        "aria-label": "error",
-        disabled: true,
-        children: /* @__PURE__ */ jsx(WarningOutlineIcon, {})
-      }
-    ) : !isAborted ? /* @__PURE__ */ jsx(
-      IconButton,
-      {
-        "data-testid": "file-item-delete-button",
-        "aria-label": "delete",
-        onClick: onAbortItem,
-        children: /* @__PURE__ */ jsx(DeleteOutlineIcon, {})
-      }
-    ) : null : null })
-  ] });
-}
-function useUploadStatus() {
-  const [batchState, setBatchState] = useState(
-    BATCH_STATES.PENDING
-  );
-  const [itemCount, setItemCount] = useState(0);
-  useBatchAddListener((batch) => {
-    setItemCount(batch.total);
-  });
-  const [loading, setLoading] = useState(false);
-  useBatchStartListener(() => {
-    setLoading(true);
-  });
-  useBatchFinalizeListener((batch) => {
-    setLoading(false);
-    setBatchState(batch.state);
-  });
-  return { loading, itemCount, batchState };
-}
-const UploadButton = React__default.forwardRef(function UploadButton2({ children, onClick, disabled, ...props }, ref) {
-  const { processPending } = useUploadyContext();
-  const { itemCount, batchState, loading } = useUploadStatus();
-  const onButtonClick = useCallback(
-    (e) => {
-      processPending();
-      onClick?.(e);
-    },
-    [processPending, onClick]
-  );
-  return /* @__PURE__ */ jsx(
-    Button,
-    {
-      ref,
-      onClick: onButtonClick,
-      disabled: disabled || itemCount === 0 || batchState === BATCH_STATES.FINISHED,
-      loading,
-      ...props,
-      children: children || "Upload"
-    }
-  );
-});
-
-export { UploadButton, UploadDropzone, UploadList, UploadListItem, useUploadStatus };

package/dist/types/FileUploader/components.d.ts

@@ -1,41 +0,0 @@
-import React from 'react';
-import { Accept } from 'react-dropzone';
-import { BATCH_STATES, type BatchItem } from '@rpldy/uploady';
-import { type ButtonProps } from '../Button/index.js';
-export type UploadDropzoneProps = {
-    'data-testid'?: string;
-    accept: Accept;
-    disabled?: boolean;
-    mini?: boolean;
-    style?: React.CSSProperties;
-    className?: string;
-};
-export declare function UploadDropzone(props: UploadDropzoneProps): import("react/jsx-runtime").JSX.Element;
-export type UploadListProps = {
-    'data-testid'?: string;
-    style?: React.CSSProperties;
-    className?: string;
-};
-export declare function UploadList(props: UploadListProps): import("react/jsx-runtime").JSX.Element;
-export type UploadListItemProps = {
-    item: BatchItem;
-};
-export declare function UploadListItem({ item }: UploadListItemProps): import("react/jsx-runtime").JSX.Element;
-export type UploadButtonProps = ButtonProps;
-export declare function useUploadStatus(): {
-    loading: boolean;
-    itemCount: number;
-    batchState: BATCH_STATES;
-};
-export declare const UploadButton: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    variant?: import("../Button/index.js").ButtonVariant | undefined;
-    palette?: import("../styles/palette.js").PaletteActionVariantsColors | import("../styles/css-vars.js").RecursiveStringObject<import("../styles/palette.js").PaletteActionVariantsColors> | undefined;
-    size?: import("../Button/index.js").ButtonSize | undefined;
-    disabled?: boolean | undefined;
-    loading?: boolean | undefined;
-    active?: boolean | undefined;
-    startIcon?: React.ReactNode;
-    endIcon?: React.ReactNode;
-    children?: React.ReactNode;
-    'data-testid'?: string | undefined;
-} & React.RefAttributes<HTMLButtonElement>>;