@lifesg/web-frontend-engine 1.0.0-alpha.4 → 1.0.0-alpha.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifesg/web-frontend-engine",
-  "version": "1.0.0-alpha.4",
+  "version": "1.0.0-alpha.6",
   "description": "A frontend engine for LifeSG React apps",
   "main": "./cjs/index.js",
   "module": "./index.js",
@@ -23,16 +23,22 @@
     "@js-joda/core": "^5.4.2",
     "@js-joda/locale_en-us": "^4.8.6",
     "@js-joda/timezone": "^2.15.0",
+    "axios": "^1.2.2",
     "country-code-lookup": "^0.0.20",
+    "fabric": "^5.2.4",
+    "file-type": "^16.5.4",
+    "heic2any": "^0.0.3",
     "libphonenumber-js": "^1.10.14",
     "lodash": "^4.17.21",
+    "react-dropzone": "^14.2.3",
     "react-hook-form": "^7.34.2",
     "sanitize-html": "^2.8.1",
     "use-deep-compare-effect": "^1.8.1",
     "yup": "^0.32.11"
   },
   "peerDependencies": {
-    "@lifesg/react-design-system": "^1.0.2",
+    "@lifesg/react-design-system": "v1.1.0-canary.1",
+    "@lifesg/react-icons": "^1.2.0",
     "react": "^17.0.2 || ^18.0.0",
     "react-dom": "^17.0.2 || ^18.0.0",
     "styled-components": "^5.3.5"

package/utils/api-client/api-client.d.ts

@@ -0,0 +1,65 @@
+import { AxiosInstance, AxiosRequestConfig, AxiosResponse } from "axios";
+export declare class AxiosApiClient {
+    private _client;
+    constructor(
+    /** the base url of the api. We suggest each api to have it's own client */
+    baseURL: string, 
+    /** the api timeout duration. Default 15000ms */
+    timeout?: number, 
+    /**
+     * Default:
+     * 	 "Content-Type": "application/json",
+     * 	 "Accept": "application/json",
+     */
+    headers?: {
+        "Content-Type": string;
+        Accept: string;
+    }, 
+    /** Specify if cross-site Access-Control requests should be
+     *  made using credentials such as cookies, authorization headers
+     *  or TLS client certificates
+     */
+    withCredentials?: boolean, config?: AxiosRequestConfig);
+    /**
+     *
+     * @param path the path of the endpoint
+     * @param config AxiosRequestConfig. For simple usage with params, just wrap it in an object (e.g. { params })
+     */
+    get<T>(path: string, config?: AxiosRequestConfig): Promise<T>;
+    /**
+     * Gets response along with the full schema
+     * @param path the path of the endpoint
+     * @param config AxiosRequestConfig. For simple usage with params, just wrap it in an object (e.g. { params })
+     */
+    getFull<T>(path: string, config?: AxiosRequestConfig): Promise<AxiosResponse<T>>;
+    /**
+     *
+     * @param path the path of the endpoint
+     * @param payload the data of the POST request
+     * @param config AxiosRequestConfig
+     */
+    post<T>(path: string, payload?: any, config?: AxiosRequestConfig): Promise<T>;
+    /**
+     *
+     * @param path the path of the endpoint
+     * @param payload the data of the PUT request
+     * @param config AxiosRequestConfig
+     */
+    put<T>(path: string, payload?: any, config?: AxiosRequestConfig): Promise<T>;
+    /**
+     *
+     * @param path the path of the endpoint
+     * @param payload the data of the PATCH request
+     * @param config AxiosRequestConfig
+     */
+    patch<T>(path: string, payload?: any, config?: AxiosRequestConfig): Promise<T>;
+    /**
+     *
+     * @param path the path of the endpoint
+     * @param config AxiosRequestConfig
+     */
+    delete<T>(path: string, config?: AxiosRequestConfig): Promise<T>;
+    getClient(): AxiosInstance;
+    private _handleSuccess;
+    private _handleError;
+}

package/utils/api-client/index.d.ts

@@ -0,0 +1 @@
+export * from "./api-client";

package/utils/file-helper.d.ts

@@ -0,0 +1,39 @@
+export declare namespace FileHelper {
+    /**
+     * truncate file name according to wrapping element width
+     */
+    const truncateFileName: (fileName: string, widthOfElement: number) => string;
+    /**
+     * converts file/blob to dataURL
+     */
+    const fileToDataUrl: (file: File | Blob) => Promise<string>;
+    /**
+     * converts dataURL to blob
+     */
+    const dataUrlToBlob: (dataUrl: string) => Promise<Blob>;
+    /**
+     * estimate filesize from base64 string
+     * https://stackoverflow.com/questions/53228948/how-to-get-image-file-size-from-base-64-string-in-javascript#answer-53229045
+     */
+    const getFilesizeFromBase64: (base64: string) => number;
+    /**
+     * convert array of file extensions to a proper sentence
+     * convert to uppercase
+     * joins array with comma
+     * add `or` before last extension
+     * lists both .JPG and .JPEG
+     */
+    const extensionsToSentence: (list: string[]) => string;
+    /**
+     * converts file extension to mime type
+     */
+    const fileExtensionToMimeType: (ext: string) => string | undefined;
+    /**
+     * reliably derive mime type by checking magic number of the buffer
+     */
+    const getMimeType: (blob: Blob | File) => Promise<import("file-type/core").MimeType>;
+    /**
+     * ensure file name is unique against a list of file names
+     */
+    const deduplicateFileName: (fileNameList: string[], index: number, fileName: string, originalFilename?: string, counter?: number) => string;
+}

package/utils/hooks/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./use-field-event";
 export * from "./use-previous";
 export * from "./use-validation-config";
 export * from "./use-validation-schema";

package/utils/hooks/use-field-event.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Hook that interacts with the event context provider
+ * use this hook to add/dispatch/remove event listeners
+ */
+export declare const useFieldEvent: () => {
+    addFieldEventListener: (type: string, id: string, listener: (ev: Event) => unknown, options?: boolean | AddEventListenerOptions) => void;
+    dispatchFieldEvent: (type: string, id: string, detail?: any) => boolean;
+    removeFieldEventListener: (type: string, id: string, listener: (ev: Event) => unknown, options?: boolean | EventListenerOptions) => void;
+};

package/utils/hooks/use-previous.d.ts

@@ -1 +1,4 @@
-export declare const usePrevious: (value: any) => undefined;
+/**
+ * tracks the previous value
+ */
+export declare const usePrevious: <T = unknown>(value: T) => T;

package/utils/image-helper.d.ts

@@ -0,0 +1,34 @@
+export declare namespace ImageHelper {
+    /**
+     * convert image type
+     */
+    const convertBlob: (blob: File | Blob, outputMimeType?: string) => Promise<string>;
+    /**
+     * converts dataURL to HTMLImageElement
+     */
+    const dataUrlToImage: (dataURL: string) => Promise<HTMLImageElement>;
+    /**
+     * converts blob to HTMLImageElement
+     */
+    const blobToImage: (blob: Blob) => Promise<HTMLImageElement>;
+    /**
+     * resamples image by rendering it on canvas
+     */
+    const resampleImage: (image: HTMLImageElement, options: {
+        scale: number;
+        quality?: number;
+        type?: string;
+    }) => Promise<Blob>;
+    /**
+     * rescursively attempt to compress image till the desired filesize
+     *
+     * fileSize is in kb
+     * optional `maxAttempts` to limit the attempts, if file size still exceeds at the end of it, return the best compressed image
+     */
+    const compressImage: (file: File | Blob, options: {
+        quality?: number;
+        fileSize: number;
+        attempts?: number;
+        maxAttempts?: number;
+    }) => any;
+}

package/utils/index.d.ts

@@ -1,3 +1,7 @@
+export * from "./api-client";
 export * from "./date-time-helper";
+export * from "./file-helper";
+export * from "./image-helper";
 export * from "./object-helper";
 export * from "./test-helper";
+export * from "./window-helper";

package/utils/window-helper.d.ts

@@ -0,0 +1,3 @@
+export declare namespace WindowHelper {
+    const isMobileView: () => boolean;
+}