use-tus 0.3.0 → 0.6.0

package/README.md

@@ -14,8 +14,8 @@
 
 ## Features
 - Resumable file uploads on react.
+- Lightweight and simple interface hooks.
 - Managing the [Upload](https://github.com/tus/tus-js-client/blob/master/docs/api.md#tusuploadfile-options) by using context.
-- One dependency ([tus-js-client](https://github.com/tus/tus-js-client)).
 - TypeScript support.
 
 ## Demo
@@ -25,25 +25,20 @@ You can try the [use-tus demo](https://kqito.github.io/use-tus/?path=/story/uset
 ## Installation
 You can install the package from npm.
 ```sh
-npm install use-tus
+npm install use-tus tus-js-client
 ```
 
 or
+
 ```sh
-yarn add use-tus
+yarn add use-tus tus-js-client
 ```
 
 ## Usage
 We can use `useTus` as following.
 
 ```tsx
-import { useTus, TusClientProvider } from 'use-tus'
-
-const App = () => (
-  <TusClientProvider>
-    <Uploader />
-  </TusClientProvider>
-);
+import { useTus } from 'use-tus'
 
 const Uploader = () => {
   const { upload, setUpload, isSuccess, error, remove } = useTus();
@@ -71,7 +66,7 @@ const Uploader = () => {
       return;
     }
 
-    // Start upload the file.
+    // Start to upload the file.
     upload.start();
   }, [upload]);
 
@@ -91,27 +86,79 @@ const Uploader = () => {
 ### `useTus` hooks
 
 ```tsx
-const { upload, setUpload, isSuccess, isAborted, error, remove } = useTus({ cacheKey, autoAbort, autoStart });
+const { upload, setUpload, isSuccess, isAborted, error, remove } = useTus({ autoAbort, autoStart, uploadOptions });
 ```
 
-`useTus` is a hooks to get or create an `Upload` of tus.
+`useTus` is a hooks that creates an object to perform Resumable file upload.
 
 ### Arguments
-- `cacheKey` (type: `string | undefined`)
-  - Specify the key associated with the `Upload` if it's undefined, a random string will be specified.
-
 - `autoAbort` (type: `boolean | undefined`) (default: true)
   - Whether or not to automatically abort uploads when useTus hooks is unmounted.
 
 - `autoStart` (type: `boolean | undefined`) (default: false)
   - Whether or not to start upload the file after `setUpload` function.
 
+- `uploadOptions` (type: `UploadOptions | undefined`) (default: undefined)
+  - Option to used by upload object that generated by that hooks.
+  - For detail type information of `UploadOptions`, please see [here](https://github.com/tus/tus-js-client/blob/master/lib/index.d.ts#L22).
+
+### Returns
+- `upload` (type: `tus.Upload | undefined`)
+  - Object to be used when performing Resumable file upload.
+  - This value is undefined unless the `setUpload` function called.
+  - For detail usage, please see [here](https://github.com/tus/tus-js-client#example)
+
+- `setUpload` (type: `(file: tus.Upload['file'], options?: UploadOptions) => void`)
+  - Function to create an `Upload`.
+  - The property specified in `uploadOptions` will be overwritten if property of `options` are speicified.
+
+- `isSuccess` (type: `boolean`)
+  - Whether the upload was successful or not.
+
+- `isAborted` (type: `boolean`)
+  - Whether the upload was aborted or not.
+
+- `error` (type: `Error | undefined`)
+  - Error when upload fails.
+
+- `remove` (type: `() => void`)
+  - Function to reset states.
+
+### `useTusStore` hooks
+
+```tsx
+const { upload, setUpload, isSuccess, isAborted, error, remove } = useTusStore(cacheKey, { autoAbort, autoStart, uploadOptions  });
+```
+
+`useTusStore` is a hooks that creates an object for resumable file upload and stores it in a context.
+
+This hooks is useful when you want to handle uploads across pages or components.
+
+**Note that using `useTusStore` hooks, the `TusClientProvider` must be specified as the parent or higher element.**
+
+### Arguments
+- `cacheKey` (type: `string`)
+  - Specify the key associated with the `Upload` object is created by `setUpload` function.
+
+- `autoAbort` (type: `boolean | undefined`) (default: true)
+  - Whether or not to automatically abort uploads when useTusStore hooks is unmounted.
+
+- `autoStart` (type: `boolean | undefined`) (default: false)
+  - Whether or not to start upload the file after `setUpload` function.
+
+- `uploadOptions` (type: `UploadOptions | undefined`) (default: undefined)
+  - Option to used by upload object that generated by that hooks.
+  - For detail type information of `UploadOptions`, please see [here](https://github.com/tus/tus-js-client/blob/master/lib/index.d.ts#L22).
+
 ### Returns
 - `upload` (type: `tus.Upload | undefined`)
-  - The value of the `Upload` associated with the cacheKey in the TusClientProvider. If not present, undefined.
+  - Object to be used when performing Resumable file upload.
+  - This value of the `Upload` associated with the cacheKey in the TusClientProvider. If not present, undefined.
+  - For detail usage, please see [here](https://github.com/tus/tus-js-client#example)
 
 - `setUpload` (type: `(file: tus.Upload['file'], options?: tus.Upload['options']) => void`)
-  - Function to create an `Upload` and store it in TusClientProvider.
+  - Function to create an `Upload`.
+  - The property specified in `uploadOptions` will be overwritten if property of `options` are speicified.
 
 - `isSuccess` (type: `boolean`)
   - Whether the upload was successful or not.
@@ -129,28 +176,38 @@ const { upload, setUpload, isSuccess, isAborted, error, remove } = useTus({ cach
 
 ```tsx
 () => (
-  <TusClientProvider>
+  <TusClientProvider defaultOptions={defaultOptions}>
     {children}
   </TusClientProvider>
 )
 ```
 
-`TusClientProvider` is the provider that stores the `Upload` with `useTus` hooks.
-
-**In order to use `useTus`, you need to set `TusClientProvider`.**
+`TusClientProvider` is the provider that stores the `Upload` with `useTusStore` hooks.
 
 ### Props
-- `canStoreURLs` (type: `boolean | undefined`)
-  - A boolean indicating whether the current environment allows storing URLs enabling the corresponding upload to be resumed. [detail](https://github.com/tus/tus-js-client/blob/master/docs/api.md#tuscanstoreurls)
-
-- `defaultOptions` (type: `(file: tus.Upload['file']) => tus.DefaltOptions | undefined`)
+- `defaultOptions` (type: `(file: tus.Upload['file']) => UploadOptions | undefined`)
   - An object containing the default options used when creating a new upload. [detail](https://github.com/tus/tus-js-client/blob/master/docs/api.md#tusdefaultoptions)
 
+### `useTusClient`
+
+```tsx
+const { state, removeUpload, reset } = useTusClient();
+```
+`useTusClient` is a hooks that can be used to retrieve and reset the state of a `TusClientProvider`.
+
+### Returns
+- `state` (type: `{ [cacheKey: string]: UploadState | undefined }`)
+  - Upload information associated with cacheKey
+
+- `removeUpload` (type: `(cacheKey: string) => void`)
+  - Remove the upload instance associated with the specified cacheKey.
+
+- `reset` (type: `() => void`)
+  - Initialize the value of TusClientProvider
+
 ## Examples
 The following are some example of how to use `use-tus`.
 
-Note that the `TusClientProvider` must be specified as the parent or higher element.
-
 ### Uploading a file
 The setUpload and `upload.start` functions can be used to perform resumable file uploads.
 
@@ -272,7 +329,7 @@ const Uploader = () => {
 You can specify default options in the `defaultOptions` props of the `TusClientProvider`.
 
 ```tsx
-import { useTus, DefaultOptions, TusClientProvider } from 'use-tus'
+import { useTusStore, DefaultOptions, TusClientProvider } from 'use-tus'
 
 const defaultOptions: DefaultOptions = (contents) => {
   const file = contents instanceof File ? contents : undefined;
@@ -295,7 +352,7 @@ const App = () => (
 );
 
 const Uploader = () => {
-  const { setUpload } = useTus({ autoAtart: true });
+  const { setUpload } = useTusStore('cacheKey', { autoAtart: true });
 
   const handleSetUpload = useCallback((event: ChangeEvent<HTMLInputElement>) => {
       const file = event.target.files.item(0);
@@ -320,18 +377,18 @@ const Uploader = () => {
 ```
 
 ### Specify upload key
-If you specify `cacheKey` as an argument to useTus, you can get the `upload` associated with it. This is useful for cross-page file uploads.
+If you specify `cacheKey` as an argument to useTusStore, you can get the `upload` associated with it. This is useful for cross-page file uploads.
 
 ```tsx
 const SelectFileComponent = (file: File) => {
   // Create upload accosiated with 'upload-thumbnail' key
-  const { setUpload } = useTus({ cacheKey: 'upload-thumbnail' })
+  const { setUpload } = useTusStore('upload-thumbnail')
 
   setUpload(file)
 }
 
 const UploadFileComponent = () => {
-  const { upload } = useTus({ cacheKey: 'upload-thumbnail' })
+  const { upload } = useTusStore('upload-thumbnail')
 
   upload.start()
 }

package/dist/TusClientProvider/TusClientProvider.d.ts

@@ -1,4 +1,6 @@
-import type { FC } from 'react';
-import { TusConfigs } from '../core/tusHandler';
-export declare type TusClientProviderProps = Readonly<TusConfigs>;
-export declare const TusClientProvider: FC<TusClientProviderProps>;
+import { FC } from "react";
+import { DefaultOptions } from "./types";
+export declare type TusClientProviderProps = Readonly<{
+    defaultOptions?: DefaultOptions;
+}>;
+export declare const TusClientProvider: FC<TusClientProviderProps>;

package/dist/TusClientProvider/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const ERROR_MESSAGES: {
+    readonly tusClientHasNotFounded: "No TusClient set, use TusClientProvider to set one";
+    readonly tusIsNotSupported: "This browser does not support uploads. Please use a modern browser instead.";
+};

package/dist/TusClientProvider/index.d.ts

@@ -1,2 +1,3 @@
-export { TusClientProvider } from './TusClientProvider';
-export type { TusClientProviderProps } from './TusClientProvider';
+export { TusClientProvider } from "./TusClientProvider";
+export type { TusClientProviderProps } from "./TusClientProvider";
+export type { DefaultOptions } from "./types";

package/dist/{core → TusClientProvider/store}/contexts.d.ts

@@ -1,7 +1,7 @@
-import type { Dispatch } from 'react';
-import { TusClientActions } from './tucClientActions';
-import { TusClientState } from './tusClientReducer';
-export declare const TusClientStateContext: import("react").Context<TusClientState | undefined>;
-export declare const TusClientDispatchContext: import("react").Context<Dispatch<TusClientActions> | undefined>;
-export declare const useTusClientState: () => TusClientState;
-export declare const useTusClientDispatch: () => Dispatch<TusClientActions>;
+import type { Dispatch } from "react";
+import { TusClientActions } from "./tucClientActions";
+import { TusClientState } from "./tusClientReducer";
+export declare const TusClientStateContext: import("react").Context<TusClientState | undefined>;
+export declare const TusClientDispatchContext: import("react").Context<Dispatch<TusClientActions> | undefined>;
+export declare const useTusClientState: () => TusClientState;
+export declare const useTusClientDispatch: () => Dispatch<TusClientActions>;

package/dist/{core → TusClientProvider/store}/tucClientActions.d.ts

@@ -1,47 +1,49 @@
-import type { Upload } from 'tus-js-client';
-import { TusConfigs } from './tusHandler';
-export declare type TusClientActions = ReturnType<typeof insertUploadInstance | typeof removeUploadInstance | typeof updateSuccessUpload | typeof updateErrorUpload | typeof updateIsAbortedUpload | typeof updateTusHandlerOptions>;
-export declare const insertUploadInstance: (cacheKey: string, upload: Upload) => {
-    readonly type: "INSERT_UPLOAD_INSTANCE";
-    readonly payload: {
-        readonly cacheKey: string;
-        readonly uploadState: {
-            readonly upload: Upload;
-            readonly isSuccess: false;
-            readonly isAborted: false;
-        };
-    };
-};
-export declare const updateSuccessUpload: (cacheKey: string) => {
-    readonly type: "UPDATE_SUCCESS_UPLOAD";
-    readonly payload: {
-        readonly cacheKey: string;
-    };
-};
-export declare const updateErrorUpload: (cacheKey: string, error?: Error | undefined) => {
-    readonly type: "UPDATE_ERROR_UPLOAD";
-    readonly payload: {
-        readonly cacheKey: string;
-        readonly error: Error | undefined;
-    };
-};
-export declare const updateIsAbortedUpload: (cacheKey: string, isAborted: boolean) => {
-    readonly type: "UPDATE_IS_ABORTED_UPLOAD";
-    readonly payload: {
-        readonly cacheKey: string;
-        readonly isAborted: boolean;
-    };
-};
-export declare const removeUploadInstance: (cacheKey: string) => {
-    readonly type: "REMOVE_UPLOAD_INSTANCE";
-    readonly payload: {
-        readonly cacheKey: string;
-    };
-};
-export declare const updateTusHandlerOptions: (payload: TusConfigs) => {
-    readonly type: "UPDATE_TUS_HANDLER_OPTIONS";
-    readonly payload: Partial<{
-        canStoreURLs: boolean;
-        defaultOptions: import("./tusHandler").DefaultOptions;
-    }>;
-};
+import type { Upload } from "tus-js-client";
+import { DefaultOptions } from "../types";
+export declare type TusClientActions = ReturnType<typeof insertUploadInstance | typeof removeUploadInstance | typeof updateSuccessUpload | typeof updateErrorUpload | typeof updateIsAbortedUpload | typeof resetClient | typeof updateDefaultOptions>;
+export declare const insertUploadInstance: (cacheKey: string, upload: Upload) => {
+    readonly type: "INSERT_UPLOAD_INSTANCE";
+    readonly payload: {
+        readonly cacheKey: string;
+        readonly uploadState: {
+            readonly upload: Upload;
+            readonly isSuccess: false;
+            readonly isAborted: false;
+        };
+    };
+};
+export declare const updateSuccessUpload: (cacheKey: string) => {
+    readonly type: "UPDATE_SUCCESS_UPLOAD";
+    readonly payload: {
+        readonly cacheKey: string;
+    };
+};
+export declare const updateErrorUpload: (cacheKey: string, error?: Error | undefined) => {
+    readonly type: "UPDATE_ERROR_UPLOAD";
+    readonly payload: {
+        readonly cacheKey: string;
+        readonly error: Error | undefined;
+    };
+};
+export declare const updateIsAbortedUpload: (cacheKey: string, isAborted: boolean) => {
+    readonly type: "UPDATE_IS_ABORTED_UPLOAD";
+    readonly payload: {
+        readonly cacheKey: string;
+        readonly isAborted: boolean;
+    };
+};
+export declare const removeUploadInstance: (cacheKey: string) => {
+    readonly type: "REMOVE_UPLOAD_INSTANCE";
+    readonly payload: {
+        readonly cacheKey: string;
+    };
+};
+export declare const resetClient: () => {
+    readonly type: "RESET_CLIENT";
+};
+export declare const updateDefaultOptions: (defaultOptions: DefaultOptions | undefined) => {
+    readonly type: "UPDATE_DEFAULT_OPTIONS";
+    readonly payload: {
+        readonly defaultOptions: DefaultOptions | undefined;
+    };
+};

package/dist/{core → TusClientProvider/store}/tusClientReducer.d.ts

@@ -1,18 +1,18 @@
-import type { Reducer } from 'react';
-import type { Upload } from 'tus-js-client';
-import { TusClientActions } from './tucClientActions';
-import { TusHandler } from './tusHandler';
-export declare type UploadState = {
-    upload: Upload | undefined;
-    isSuccess: boolean;
-    isAborted: boolean;
-    error?: Error;
-};
-export declare type TusClientState = {
-    uploads: {
-        [cacheKey: string]: UploadState | undefined;
-    };
-    tusHandler: TusHandler;
-};
-export declare const tusClientReducer: Reducer<TusClientState, TusClientActions>;
-export declare const tusClientInitialState: TusClientState;
+import type { Reducer } from "react";
+import type { Upload } from "tus-js-client";
+import { DefaultOptions } from "../types";
+import { TusClientActions } from "./tucClientActions";
+export declare type UploadState = {
+    upload: Upload | undefined;
+    isSuccess: boolean;
+    isAborted: boolean;
+    error?: Error;
+};
+export declare type TusClientState = {
+    uploads: {
+        [cacheKey: string]: UploadState | undefined;
+    };
+    defaultOptions: DefaultOptions | undefined;
+};
+export declare const tusClientReducer: Reducer<TusClientState, TusClientActions>;
+export declare const tusClientInitialState: TusClientState;

package/dist/TusClientProvider/types.d.ts

@@ -0,0 +1,2 @@
+import { Upload, UploadOptions } from "tus-js-client";
+export declare type DefaultOptions = (file: Upload["file"]) => UploadOptions;

package/dist/__stories__/Basic.stories.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { Meta } from "@storybook/react";
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Basic: () => JSX.Element;

package/dist/__stories__/CacheKey.stories.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { Meta } from "@storybook/react";
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const CacheKey: () => JSX.Element;

package/dist/__stories__/DefaultOptions.stories.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { Meta } from "@storybook/react";
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const WithDefaultOptions: () => JSX.Element;

package/dist/__stories__/components/BasicButton/BasicButton.d.ts

@@ -0,0 +1,9 @@
+import { ComponentProps } from "react";
+declare type BasicButtonProps = {
+    onClick: ComponentProps<"button">["onClick"];
+    title: string;
+    disabled?: ComponentProps<"button">["disabled"];
+    styleColor?: "primary" | "basic" | "error";
+};
+export declare const BasicButton: import("react").ForwardRefExoticComponent<BasicButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/__stories__/components/BasicButton/index.d.ts

@@ -0,0 +1 @@
+export { BasicButton } from "./BasicButton";

package/dist/__stories__/components/LoadingCircle/LoadingCircle.d.ts

@@ -0,0 +1,2 @@
+import type { VFC } from "react";
+export declare const LoadingCircle: VFC;

package/dist/__stories__/components/LoadingCircle/index.d.ts

@@ -0,0 +1 @@
+export { LoadingCircle } from "./LoadingCircle";

package/dist/__stories__/components/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,7 @@
+import { VFC } from "react";
+declare type ProgressBarProps = {
+    title?: string;
+    value?: number;
+};
+export declare const ProgressBar: VFC<ProgressBarProps>;
+export {};

package/dist/__stories__/components/ProgressBar/index.d.ts

@@ -0,0 +1 @@
+export { ProgressBar } from "./ProgressBar";

package/dist/__stories__/components/UploadIcon/UploadIcon.d.ts

@@ -0,0 +1,2 @@
+import { VFC } from "react";
+export declare const UploadIcon: VFC;

package/dist/__stories__/components/UploadIcon/index.d.ts

@@ -0,0 +1 @@
+export { UploadIcon } from "./UploadIcon";

package/dist/__stories__/constants.d.ts

@@ -0,0 +1 @@
+export declare const TUS_DEMO_ENDPOINT: "https://tusd.tusdemo.net/files/";

package/dist/__tests__/TusClientProvider.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/useTus.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/useTusStore.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/utils/getBlob.d.ts

@@ -0,0 +1 @@
+export declare const getBlob: (str: string) => Blob;

package/dist/__tests__/utils/getDefaultOptions.d.ts

@@ -0,0 +1,2 @@
+import { Upload } from "tus-js-client";
+export declare const getDefaultOptions: () => Upload["options"];

package/dist/__tests__/utils/mock.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="jest" />
+/// <reference types="webpack-env" />
+/// <reference types="node" />
+export declare const createConsoleErrorMock: () => jest.SpyInstance<void, [message?: any, ...optionalParams: any[]]>;
+export declare const insertEnvValue: (value: NodeJS.Process["env"]) => void;
+export declare const startOrResumeUploadMock: jest.SpyInstance<void, [upload: import("tus-js-client").Upload]>;