d.ts file to help TS typing

[joaomantovani]

First of all, thanks for the package, it's really helpful!

I've created a .d.ts file to type the package. It's not perfect, but will help if you've a TS project.

Create a file on your project:

touch types/react-cloudinary-upload-widget.d.ts

Paste this inside the file:

declare module 'react-cloudinary-upload-widget' {
  import * as React from 'react';

  export interface WidgetButtonProps {
    myWidgetFunction: () => void;
    style?: React.CSSProperties;
    buttonText?: string;
    buttonType?: 'button' | 'submit' | 'reset';
  }

  export const WidgetButton: React.FC<WidgetButtonProps>;

  export interface GenerateSignatureParams {
    custom_coordinates?: boolean;
    eager?: string;
    filename_override?: string;
    headers?: string;
    public_id?: string;
    source?: string;
    timestamp: number;
    unique_filename?: boolean;
    upload_preset?: string;
    use_filename?: boolean;
  }

  export interface GenerateSignatureResponse {
    signature: string;
    api_key: string;
    resource_type: string;
    eager?: string;
    public_id?: string;
    [key: string]: any;
  }

  export type GenerateSignatureCallback = (result: GenerateSignatureResponse | GenerateSignatureResponse[]) => void;

  export type PrepareUploadParamsCallback = (
    cb: GenerateSignatureCallback,
    params: GenerateSignatureParams | GenerateSignatureParams[]
  ) => Promise<void>;

  export interface WidgetOptions {
    showCompletedButton?: boolean;
    multiple?: boolean;
    singleUploadAutoClose?: boolean;
    showAdvancedOptions?: boolean;
    showPoweredBy?: boolean;
    styles?: any;
    googleDriveClientId?: string;
    buttonText?: string;
    style?: React.CSSProperties;
    autoClose?: boolean;
    sources: StringSet[];
    onSuccess: (result: WidgetResult) => void;
    onFailure: (error: any, result: WidgetResult) => void;
    logging?: boolean;
    customPublicId?: string;
    destroy?: boolean;
    apiKey: string;
    accepts?: string;
    contentType?: string;
    withCredentials?: boolean;
    sourceKeys?: {
      [key: string]: string;
    };
    cloudName: string;
    uploadPreset: string;
    folder?: string;
    cropping?: boolean;
    resourceType: 'auto' | 'image' | 'video' | 'raw';
    use_filename?: boolean;
    unique_filename?: boolean;
    eager?: string;
    prepareUploadParams?: PrepareUploadParamsCallback;
  }

  export interface WidgetResult {
    event: string;
    info: Info;
  }

  export interface Info {
    id: string;
    batchId: string;
    asset_id: string;
    public_id: string;
    version: number;
    version_id: string;
    signature: string;
    width: number;
    height: number;
    format: string;
    resource_type: string;
    created_at: string;
    tags: any[];
    bytes: number;
    type: string;
    etag: string;
    placeholder: boolean;
    url: string;
    secure_url: string;
    folder: string;
    access_mode: string;
    original_filename: string;
    path: string;
    thumbnail_url: string;
  }

  export type WidgetCallback = (error: any, result: WidgetResult) => void;

  export interface WidgetInstance {
    update(options: WidgetOptions): void;
    open(): void;
    destroy(): void;
  }

  type StringSet =
    | 'local'
    | 'url'
    | 'camera'
    | 'dropbox'
    | 'image_search'
    | 'facebook'
    | 'instagram'
    | 'shutterstock'
    | 'gettyimages'
    | 'istock'
    | 'unsplash'
    | 'google_drive';

  export interface WidgetFunction {
    (
      sources: StringSet[],
      sourceKeys: { [key: string]: string } | null,
      resourceType: 'auto' | 'image' | 'video' | 'raw',
      cloudName: string,
      uploadPreset: string,
      folder: string | null,
      cropping: boolean,
      generateSignatureUrl: string,
      onSuccess: (result: WidgetResult) => void,
      onFailure: (error: any, result: WidgetResult) => void,
      logging: boolean,
      customPublicId: string | null,
      eager: string | null,
      apiKey: string,
      accepts: string,
      contentType: string,
      withCredentials: boolean,
      use_filename: boolean,
      unique_filename: boolean,
      googleDriveClientId: string | null,
      multiple: boolean,
      widgetStyles: any | null,
      destroy: boolean,
      autoClose: boolean
    ): void;
    destroy(): void;
    open(): void;
  }

  export const myWidget: WidgetFunction;
  export const cloudinaryOnSuccessCallback: (result: WidgetResult) => void;
  export const cloudinaryOnFailureCallback: (error: any, result: WidgetResult) => void;
  export const Widget: React.FC<WidgetOptions>;
  export const WidgetLoader: React.FC;
}

It will help on typing.

[Ahmadh26]

Thank you for this <3 !

[IskIvanov]

Minor fix, in the WidgetOptions generateSignatureUrl is missing.

export interface WidgetOptions {
    showCompletedButton?: boolean;
    multiple?: boolean;
    singleUploadAutoClose?: boolean;
    showAdvancedOptions?: boolean;
    showPoweredBy?: boolean;
    styles?: any;
    googleDriveClientId?: string;
    buttonText?: string;
    style?: React.CSSProperties;
    autoClose?: boolean;
    sources: StringSet[];
    onSuccess: (result: WidgetResult) => void;
    onFailure: (error: any, result: WidgetResult) => void;
    logging?: boolean;
    customPublicId?: string;
    destroy?: boolean;
    generateSignatureUrl: string;
    apiKey: string;
    accepts?: string;
    contentType?: string;
    withCredentials?: boolean;
    sourceKeys?: {
      [key: string]: string;
    };
    cloudName: string;
    uploadPreset: string;
    folder?: string;
    cropping?: boolean;
    resourceType: 'auto' | 'image' | 'video' | 'raw';
    use_filename?: boolean;
    unique_filename?: boolean;
    eager?: string;
    prepareUploadParams?: PrepareUploadParamsCallback;
  }