Merge pull request #52 from uploadcare/feat/bump-file-uploader

feat: bump file-uploader from 1.2.0 to 1.9.0

README.md

@@ -32,7 +32,12 @@ considerations.
 
 ## Quick start
 ### From NPM:
-1. Install the package: `npm install @uploadcare/react-uploader`
+1. Install the package: 
+
+```bash
+npm install @uploadcare/react-uploader
+```
+
 2. Connect React Uploader from your script file:
 ```jsx
 import { FileUploaderRegular } from "@uploadcare/react-uploader";
@@ -49,7 +54,7 @@ We provide a full set of props that are used in File Uploader. For review we sug
 
 For convenience, we provide the ability to access the File Uploader API using `apiRef`.
 You can see what methods are available in `apiRef` in the [documentation][uc-docs-file-uploader-api].
-It is important to note that you need to use `InstanceType` utility type to define `apiRef` type.
+It is important to note that we now pass all InstanceType from UploadCtxProvider.
 
 ```jsx
 import React, {useRef, useEffect} from "react";
@@ -60,9 +65,9 @@ import {
 import "@uploadcare/react-uploader/core.css";
 
 const Example = () => {
-    const uploaderRef = useRef <InstanceType<UploadCtxProvider> | null>(null);
+  const uploaderRef = useRef<InstanceType<UploadCtxProvider> | null>(null);
 
-    <FileUploaderRegular apiRef={uploaderRef} pubkey="YOUR_PUBLIC_KEY"/>;
+  <FileUploaderRegular apiRef={uploaderRef} pubkey="YOUR_PUBLIC_KEY"/>;
 }
 ```
 
@@ -78,22 +83,27 @@ import { FileUploaderRegular } from "@uploadcare/react-uploader";
 import "@uploadcare/react-uploader/core.css";
 
 <FileUploaderRegular
-    pubkey="YOUR_PUBLIC_KEY"
-    onModalOpen={() => {
-        console.log('modal-open')
-    }}
+  pubkey="YOUR_PUBLIC_KEY"
+  onModalOpen={() => {
+      console.log('modal-open')
+  }}
 />
 ```
 
-
 ## Styles
 You can customize the appearance of the React Uploader by using the `className` prop, which lets you apply custom CSS classes to the `FileUploader` wrapper, including the `Regular`, `Minimal`, and `Inline` variations.
 
+However, if you need to assign a class specifically to the uploader file. Use the `classNameUploader` prop.
+
 ```jsx
 import { FileUploaderRegular } from "@uploadcare/react-uploader";
 import "@uploadcare/react-uploader/core.css";
 
-<FileUploaderRegular className="fileUploaderWrapper" pubkey="YOUR_PUBLIC_KEY"/>;
+<FileUploaderRegular 
+  classNameUploader="uc-dark" 
+  className="fileUploaderWrapper" 
+  pubkey="YOUR_PUBLIC_KEY"
+/>;
 ```
 
 ```css

packages/react-uploader/README.md

@@ -32,7 +32,12 @@ considerations.
 
 ## Quick start
 ### From NPM:
-1. Install the package: `npm install @uploadcare/react-uploader`
+1. Install the package: 
+
+```bash
+npm install @uploadcare/react-uploader
+```
+
 2. Connect React Uploader from your script file:
 ```jsx
 import { FileUploaderRegular } from "@uploadcare/react-uploader";
@@ -60,9 +65,9 @@ import {
 import "@uploadcare/react-uploader/core.css";
 
 const Example = () => {
-    const uploaderRef = useRef <InstanceType<UploadCtxProvider> | null>(null);
+  const uploaderRef = useRef<InstanceType<UploadCtxProvider> | null>(null);
 
-    <FileUploaderRegular apiRef={uploaderRef} pubkey="YOUR_PUBLIC_KEY"/>;
+  <FileUploaderRegular apiRef={uploaderRef} pubkey="YOUR_PUBLIC_KEY"/>;
 }
 ```
 
@@ -78,22 +83,27 @@ import { FileUploaderRegular } from "@uploadcare/react-uploader";
 import "@uploadcare/react-uploader/core.css";
 
 <FileUploaderRegular
-    pubkey="YOUR_PUBLIC_KEY"
-    onModalOpen={() => {
-        console.log('modal-open')
-    }}
+  pubkey="YOUR_PUBLIC_KEY"
+  onModalOpen={() => {
+      console.log('modal-open')
+  }}
 />
 ```
 
-
 ## Styles
 You can customize the appearance of the React Uploader by using the `className` prop, which lets you apply custom CSS classes to the `FileUploader` wrapper, including the `Regular`, `Minimal`, and `Inline` variations.
 
+However, if you need to assign a class specifically to the uploader file. Use the `classNameUploader` prop.
+
 ```jsx
 import { FileUploaderRegular } from "@uploadcare/react-uploader";
 import "@uploadcare/react-uploader/core.css";
 
-<FileUploaderRegular className="fileUploaderWrapper" pubkey="YOUR_PUBLIC_KEY"/>;
+<FileUploaderRegular 
+  classNameUploader="uc-dark" 
+  className="fileUploaderWrapper" 
+  pubkey="YOUR_PUBLIC_KEY"
+/>;
 ```
 
 ```css

packages/react-uploader/package.json

@@ -33,7 +33,7 @@
     "next": "13 || 14"
   },
   "dependencies": {
-    "@uploadcare/file-uploader": "^1.2.0",
+    "@uploadcare/file-uploader": "^1.9.0",
     "@uploadcare/react-adapter": "^0.3.0"
   },
   "repository": {

packages/react-uploader/src/Uploader/Inline/FileUploaderInline.tsx

@@ -20,7 +20,7 @@ const AdapterFileUploaderInline = customElementToReactComponent({
   elClass: UC.FileUploaderMinimal,
 });
 
-export const FileUploaderInline: FC<TProps> = ({
+export const FileUploaderInline: FC<TProps<"Inline">> = ({
   ctxName,
   className,
   classNameUploader,
@@ -31,7 +31,7 @@ export const FileUploaderInline: FC<TProps> = ({
   const CTX_NAME = useMemo(() => ctxName ?? UC.UID.generate(), [ctxName]);
 
   const { eventHandlers, config } = useMemo(
-    () => getCalcPropertyOfProps<TProps>(props),
+    () => getCalcPropertyOfProps<"Inline">(props),
     [props],
   );
 

packages/react-uploader/src/Uploader/Minimal/FileUploaderMinimal.tsx

@@ -20,7 +20,7 @@ const AdapterFileUploaderMinimal = customElementToReactComponent({
   elClass: UC.FileUploaderMinimal,
 });
 
-export const FileUploaderMinimal: FC<TProps> = ({
+export const FileUploaderMinimal: FC<TProps<"Minimal">> = ({
   ctxName,
   className,
   classNameUploader,
@@ -31,7 +31,7 @@ export const FileUploaderMinimal: FC<TProps> = ({
   const CTX_NAME = useMemo(() => ctxName ?? UC.UID.generate(), [ctxName]);
 
   const { eventHandlers, config } = useMemo(
-    () => getCalcPropertyOfProps<TProps>(props),
+    () => getCalcPropertyOfProps<"Minimal">(props),
     [props],
   );
 

packages/react-uploader/src/Uploader/Regular/FileUploaderRegular.tsx

@@ -21,7 +21,7 @@ const AdapterFileUploaderRegular = customElementToReactComponent({
   elClass: UC.FileUploaderRegular,
 });
 
-export const FileUploaderRegular: FC<TProps> = ({
+export const FileUploaderRegular: FC<TProps<"Regular">> = ({
   ctxName,
   className,
   classNameUploader,
@@ -31,8 +31,8 @@ export const FileUploaderRegular: FC<TProps> = ({
 }) => {
   const CTX_NAME = useMemo(() => ctxName ?? UC.UID.generate(), [ctxName]);
 
-  const { eventHandlers, config } = useMemo(
-    () => getCalcPropertyOfProps<TProps>(props),
+  const { eventHandlers, config, uploader } = useMemo(
+    () => getCalcPropertyOfProps<"Regular">(props),
     [props],
   );
 
@@ -50,7 +50,7 @@ export const FileUploaderRegular: FC<TProps> = ({
           {...eventHandlers}
         />
         {/* @ts-ignore */}
-        <AdapterFileUploaderRegular class={classNameUploader} ctx-name={CTX_NAME} />
+        <AdapterFileUploaderRegular class={classNameUploader} ctx-name={CTX_NAME} {...uploader} />
       </div>
     </ConditionalSuspense>
   );

packages/react-uploader/src/Uploader/types.ts

@@ -14,29 +14,64 @@ type TExtraPrefixOn<S extends string> = `on${Capitalize<S>}`;
 
 type TPrefixOnAndCamelCase<S extends string> = TExtraPrefixOn<TToCamelCase<S>>;
 
-export type TEventsSchema = {
-  [K in keyof EventMap as TPrefixOnAndCamelCase<K>]: (
-    event: EventMap[K]["detail"],
-  ) => void;
+
+export type FileUploaderModes = 'Regular' | 'Minimal' | 'Inline'
+
+type CommonProps = {
+  /**
+   * The class name for wrapper over uploader
+   */
+  className?: string;
+
+  /**
+   * The class name for uploader
+   */
+  classNameUploader?: string;
+
+  /**
+   * The unique ID
+   */
+  ctxName?: string;
 };
 
-type TRefUploadCtxProvider = {
-  apiRef?: Ref<InstanceType<UploadCtxProvider>>;
+type FileUploaderRegularProps = {
+  /**
+   * The prop controls the button's visibility in regular mode.
+   */
+  headless?: boolean;
 };
 
-type TPropsWithEvents = Partial<TEventsSchema>;
+type FileUploaderMinimalProps = {};
 
-type TPropsWithConfig = Partial<ConfigType>;
+type FileUploaderInlineProps = {};
 
-type TDefaultProps = {
-  className?: string;
-  classNameUploader?: string;
-  ctxName?: string;
-} & Pick<TPropsConditionalSuspense, "fallback">;
+type UploadCtxPropviderProps = {
+  apiRef?: Ref<InstanceType<UploadCtxProvider>>;
+};
+
+export type EventProps = Partial<TEventsSchema>;
+
+export type ConfigProps = Partial<Omit<ConfigType, "pubkey">> & {
+  pubkey: ConfigType["pubkey"];
+};
 
-export type TProps = TDefaultProps &
-  TRefUploadCtxProvider &
-  TPropsWithEvents &
-  TPropsWithConfig;
+export type TProps<T extends FileUploaderModes> = CommonProps &
+  ConfigProps &
+  EventProps &
+  UploadCtxPropviderProps &
+  Pick<TPropsConditionalSuspense, "fallback"> &
+  (T extends "Regular"
+    ? FileUploaderRegularProps
+    : T extends "Minimal"
+    ? FileUploaderMinimalProps
+    : T extends "Inline"
+    ? FileUploaderInlineProps
+    : never);
 
 export { UploadCtxProvider } from "@uploadcare/file-uploader";
+
+export type TEventsSchema = {
+  [K in keyof EventMap as TPrefixOnAndCamelCase<K>]: (
+    event: EventMap[K]["detail"],
+  ) => void;
+};

packages/react-uploader/src/utils/getCalcPropertyOfProps.ts

@@ -1,17 +1,27 @@
-export const getCalcPropertyOfProps = <T extends Object>(props: T) => {
+import type { FileUploaderModes, TProps } from "../Uploader/types";
+
+export const getCalcPropertyOfProps = <T extends FileUploaderModes>(props: TProps<T>) => {
   const eventHandlers: Record<string, unknown> = {};
   const config: Record<string, unknown> = {};
+  const uploader: Record<string, unknown> = {};
+
+  for (const [prop, value] of Object.entries(props)) {
+    if (prop.startsWith("on")) {
+      eventHandlers[prop] = value;
+      continue;
+    }
 
-  Object.entries(props).forEach(([key, value]) => {
-    if (key.startsWith("on")) {
-      eventHandlers[key] = value;
-    } else {
-      config[key] = value;
+    if (prop === "headless") {
+      uploader[prop] = value;
+      continue;
     }
-  });
+
+    config[prop] = value;
+  }
 
   return {
     eventHandlers,
+    uploader,
     config,
   };
 };