@veritone-ce/design-system 2.8.1 → 2.8.2

package/dist/cjs/extras/uploady/index.js

@@ -0,0 +1,12 @@
+'use strict';
+'use strict';
+
+var uploady = require('./uploady.js');
+
+
+
+exports.UploadyButton = uploady.UploadyButton;
+exports.UploadyDropzone = uploady.UploadyDropzone;
+exports.UploadyList = uploady.UploadyList;
+exports.UploadyListItem = uploady.UploadyListItem;
+exports.useUploadStatus = uploady.useUploadStatus;

package/dist/cjs/extras/uploady/uploady.js

@@ -0,0 +1,112 @@
+'use strict';
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var uploady = require('@rpldy/uploady');
+var index = require('../../Button/index.js');
+var controlled = require('../../FileUploader/controlled.js');
+
+function UploadyDropzone(props) {
+  const { upload, getOptions } = uploady.useUploady();
+  const [batchState, setBatchState] = React.useState(
+    uploady.BATCH_STATES.PENDING
+  );
+  uploady.useBatchFinalizeListener((batch) => {
+    setBatchState(batch.state);
+  });
+  uploady.useBatchProgressListener((batch) => {
+    setBatchState(batch.state);
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    controlled.UploadDropzone,
+    {
+      ...props,
+      multiple: !getOptions().autoUpload,
+      state: batchState === uploady.BATCH_STATES.PROCESSING ? controlled.FILE_STATES.UPLOADING : batchState,
+      onDrop: (files) => {
+        upload(files);
+        setBatchState(uploady.BATCH_STATES.PENDING);
+      }
+    }
+  );
+}
+function UploadyList(props) {
+  const [items, setItems] = React.useState([]);
+  uploady.useBatchAddListener((batch) => {
+    setItems((items2) => items2.concat(batch.items));
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(controlled.UploadListContainer, { ...props, children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(UploadyListItem, { item }, index)) });
+}
+function UploadyListItem({ item }) {
+  const [itemState, setState] = React.useState(item.state);
+  const [progress, setProgress] = React.useState(0);
+  const abortItem = uploady.useAbortItem();
+  uploady.useItemFinalizeListener((item2) => {
+    setState(item2.state);
+  }, item.id);
+  uploady.useItemProgressListener((item2) => {
+    setProgress(item2.completed);
+  });
+  const onAbortItem = () => {
+    abortItem(item.id);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    controlled.UploadListItem,
+    {
+      item: {
+        file: item.file,
+        progress,
+        state: itemState
+      },
+      onAbort: onAbortItem
+    }
+  );
+}
+function useUploadStatus() {
+  const [batchState, setBatchState] = React.useState(
+    uploady.BATCH_STATES.PENDING
+  );
+  const [itemCount, setItemCount] = React.useState(0);
+  uploady.useBatchAddListener((batch) => {
+    setItemCount(batch.total);
+  });
+  const [loading, setLoading] = React.useState(false);
+  uploady.useBatchStartListener(() => {
+    setLoading(true);
+  });
+  uploady.useBatchFinalizeListener((batch) => {
+    setLoading(false);
+    setBatchState(batch.state);
+  });
+  return { loading, itemCount, batchState };
+}
+const UploadyButton = React.forwardRef(function UploadButton({ children, onClick, disabled, ...props }, ref) {
+  const { processPending } = uploady.useUploadyContext();
+  const { itemCount, batchState, loading } = useUploadStatus();
+  const onButtonClick = React.useCallback(
+    (e) => {
+      processPending();
+      onClick?.(e);
+    },
+    [processPending, onClick]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    index.default,
+    {
+      ref,
+      onClick: onButtonClick,
+      disabled: disabled || itemCount === 0 || batchState === uploady.BATCH_STATES.FINISHED,
+      loading,
+      ...props,
+      children: children || "Upload"
+    }
+  );
+});
+
+exports.UploadyButton = UploadyButton;
+exports.UploadyDropzone = UploadyDropzone;
+exports.UploadyList = UploadyList;
+exports.UploadyListItem = UploadyListItem;
+exports.useUploadStatus = useUploadStatus;

package/dist/esm/extras/uploady/index.js

@@ -0,0 +1,2 @@
+'use strict';
+export { UploadyButton, UploadyDropzone, UploadyList, UploadyListItem, useUploadStatus } from './uploady.js';

package/dist/esm/extras/uploady/uploady.js

@@ -0,0 +1,106 @@
+'use strict';
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import React__default, { useCallback, useState } from 'react';
+import { useUploadyContext, BATCH_STATES, useBatchAddListener, useBatchStartListener, useBatchFinalizeListener, useUploady, useBatchProgressListener, useAbortItem, useItemFinalizeListener, useItemProgressListener } from '@rpldy/uploady';
+import Button from '../../Button/index.js';
+import { UploadDropzone, FILE_STATES, UploadListContainer, UploadListItem } from '../../FileUploader/controlled.js';
+
+function UploadyDropzone(props) {
+  const { upload, getOptions } = useUploady();
+  const [batchState, setBatchState] = useState(
+    BATCH_STATES.PENDING
+  );
+  useBatchFinalizeListener((batch) => {
+    setBatchState(batch.state);
+  });
+  useBatchProgressListener((batch) => {
+    setBatchState(batch.state);
+  });
+  return /* @__PURE__ */ jsx(
+    UploadDropzone,
+    {
+      ...props,
+      multiple: !getOptions().autoUpload,
+      state: batchState === BATCH_STATES.PROCESSING ? FILE_STATES.UPLOADING : batchState,
+      onDrop: (files) => {
+        upload(files);
+        setBatchState(BATCH_STATES.PENDING);
+      }
+    }
+  );
+}
+function UploadyList(props) {
+  const [items, setItems] = useState([]);
+  useBatchAddListener((batch) => {
+    setItems((items2) => items2.concat(batch.items));
+  });
+  return /* @__PURE__ */ jsx(UploadListContainer, { ...props, children: items.map((item, index) => /* @__PURE__ */ jsx(UploadyListItem, { item }, index)) });
+}
+function UploadyListItem({ 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 onAbortItem = () => {
+    abortItem(item.id);
+  };
+  return /* @__PURE__ */ jsx(
+    UploadListItem,
+    {
+      item: {
+        file: item.file,
+        progress,
+        state: itemState
+      },
+      onAbort: onAbortItem
+    }
+  );
+}
+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 UploadyButton = React__default.forwardRef(function UploadButton({ 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 { UploadyButton, UploadyDropzone, UploadyList, UploadyListItem, useUploadStatus };

package/dist/types/extras/uploady/index.d.ts

@@ -0,0 +1 @@
+export * from './uploady.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritone-ce/design-system",
-  "version": "2.8.1",
+  "version": "2.8.2",
   "private": false,
   "description": "Design System for Veritone CE",
   "keywords": [