@willphan1712000/frontend 1.3.0 → 1.4.0

package/dist/index.d.mts

@@ -375,9 +375,54 @@ declare class Transform {
     private transform;
 }
 
+interface HandleAsyncType<DataType> {
+    error?: string;
+    data?: DataType;
+}
+/**
+ * HandleAsync function -> automatically handle try catch implementation from a promise
+ * @param data a promise that returns a data value
+ * @returns Promise<{error?, data?}>
+ *
+ * @example
+ *
+ * const { error, data } = await handleAsync(api('/api/call')) // api is a function that calls an api and returns a promise with possible errors thrown in between
+ */
+declare function handleAsync<DataType>(data: Promise<DataType>): Promise<HandleAsyncType<DataType>>;
+
+declare const tools: {
+    handleAsync: typeof handleAsync;
+};
+
 /**
  * This interface provides a comprehensive guides on how to design auth object used for authentication on client side
- * - Copyright: Will Phan
+ *
+ * @example
+ *
+ * class auth implements AuthInterface {
+    getSignInUrl({ redirect, client_id, callback_api, }: {
+        redirect?: string;
+        client_id?: string;
+        callback_api?: string;
+    }): string {
+    ...
+    }
+    signin({ username, email, password, redirect, }: {
+        username: string;
+        email?: string;
+        password: string;
+        redirect?: string;
+    }): Promise<void> {
+    ...
+    }
+    validate({ state }: { state?: string; }): Promise<any> {
+    ...
+    }
+    signout({ state }: { state?: string; }): Promise<void> {
+    ...
+    }
+    
+}
  */
 interface AuthInterface<User = any> {
     /**
@@ -427,7 +472,23 @@ type SessionContextType = {
 
 /**
  * This interface provides a guide to design storage object used for client side to operate storage operations
- * - Copyright: Will Phan
+ *
+ * @example
+ *
+ * class storage implements StorageInterface {
+    getToken(): string | null {
+    ...
+    }
+    getUser(): SessionType | null {
+    ...
+    }
+    setToken({ token }: { token: string; }): void {
+    ...
+    }
+    removeToken(): void {
+    ...
+    }
+}
  */
 interface StorageInterface {
     getToken(): string | null;
@@ -441,16 +502,40 @@ interface StorageInterface {
 /**
  * Will-Auth - retrieve session
  * @returns session context
+ *
+ * @example
+ *
+ * const { isLoading, session } = useSession()
  */
 declare function useSession(): SessionContextType;
 
 /**
  * Custom Session Provider using React Context
- * - Copyright: Will Phan
+ *
+ * @example
+ *
+ * <SessionProvider value={useAuthClient(auth)}>
+ * ...
+ * </SessionProvider>
+ * // auth object implementing AuthInterface
  */
 declare const SessionProvider: ({ value, children, }: {
     value: SessionContextType;
     children: ReactNode;
 }) => react_jsx_runtime.JSX.Element;
 
-export { type AuthInterface, Avatar, Button, Canvas, ColorPickerSlider, DropdownSelect, Image$1 as Image, ImageEditor, Image as ImageUtilities, InputFile, InputGoogle, MultiSelect, OptionSlider, type Options$2 as Options, RangeSlider, SessionProvider, type SessionType, type Options$1 as SliderOptions, type StorageInterface, TextArea, Transform, UploadImage, useSession };
+/**
+ * Custom hook for auth
+ * - Copyright: Will Phan
+ * @param auth Auth object implementing AuthInterface
+ * @returns SessionContextType
+ *
+ * @example
+ *
+ * const authClient = new auth() // auth class implements AuthInterface
+ * const { isLoading, session } = useAuthClient(authClient) // auth is an auth object
+ *
+ */
+declare const useAuthClient: (auth: AuthInterface<SessionType>) => SessionContextType;
+
+export { type AuthInterface, Avatar, Button, Canvas, ColorPickerSlider, DropdownSelect, Image$1 as Image, ImageEditor, Image as ImageUtilities, InputFile, InputGoogle, MultiSelect, OptionSlider, type Options$2 as Options, RangeSlider, SessionProvider, type SessionType, type Options$1 as SliderOptions, type StorageInterface, TextArea, Transform, UploadImage, tools, useAuthClient, useSession };

package/dist/index.d.ts

@@ -375,9 +375,54 @@ declare class Transform {
     private transform;
 }
 
+interface HandleAsyncType<DataType> {
+    error?: string;
+    data?: DataType;
+}
+/**
+ * HandleAsync function -> automatically handle try catch implementation from a promise
+ * @param data a promise that returns a data value
+ * @returns Promise<{error?, data?}>
+ *
+ * @example
+ *
+ * const { error, data } = await handleAsync(api('/api/call')) // api is a function that calls an api and returns a promise with possible errors thrown in between
+ */
+declare function handleAsync<DataType>(data: Promise<DataType>): Promise<HandleAsyncType<DataType>>;
+
+declare const tools: {
+    handleAsync: typeof handleAsync;
+};
+
 /**
  * This interface provides a comprehensive guides on how to design auth object used for authentication on client side
- * - Copyright: Will Phan
+ *
+ * @example
+ *
+ * class auth implements AuthInterface {
+    getSignInUrl({ redirect, client_id, callback_api, }: {
+        redirect?: string;
+        client_id?: string;
+        callback_api?: string;
+    }): string {
+    ...
+    }
+    signin({ username, email, password, redirect, }: {
+        username: string;
+        email?: string;
+        password: string;
+        redirect?: string;
+    }): Promise<void> {
+    ...
+    }
+    validate({ state }: { state?: string; }): Promise<any> {
+    ...
+    }
+    signout({ state }: { state?: string; }): Promise<void> {
+    ...
+    }
+    
+}
  */
 interface AuthInterface<User = any> {
     /**
@@ -427,7 +472,23 @@ type SessionContextType = {
 
 /**
  * This interface provides a guide to design storage object used for client side to operate storage operations
- * - Copyright: Will Phan
+ *
+ * @example
+ *
+ * class storage implements StorageInterface {
+    getToken(): string | null {
+    ...
+    }
+    getUser(): SessionType | null {
+    ...
+    }
+    setToken({ token }: { token: string; }): void {
+    ...
+    }
+    removeToken(): void {
+    ...
+    }
+}
  */
 interface StorageInterface {
     getToken(): string | null;
@@ -441,16 +502,40 @@ interface StorageInterface {
 /**
  * Will-Auth - retrieve session
  * @returns session context
+ *
+ * @example
+ *
+ * const { isLoading, session } = useSession()
  */
 declare function useSession(): SessionContextType;
 
 /**
  * Custom Session Provider using React Context
- * - Copyright: Will Phan
+ *
+ * @example
+ *
+ * <SessionProvider value={useAuthClient(auth)}>
+ * ...
+ * </SessionProvider>
+ * // auth object implementing AuthInterface
  */
 declare const SessionProvider: ({ value, children, }: {
     value: SessionContextType;
     children: ReactNode;
 }) => react_jsx_runtime.JSX.Element;
 
-export { type AuthInterface, Avatar, Button, Canvas, ColorPickerSlider, DropdownSelect, Image$1 as Image, ImageEditor, Image as ImageUtilities, InputFile, InputGoogle, MultiSelect, OptionSlider, type Options$2 as Options, RangeSlider, SessionProvider, type SessionType, type Options$1 as SliderOptions, type StorageInterface, TextArea, Transform, UploadImage, useSession };
+/**
+ * Custom hook for auth
+ * - Copyright: Will Phan
+ * @param auth Auth object implementing AuthInterface
+ * @returns SessionContextType
+ *
+ * @example
+ *
+ * const authClient = new auth() // auth class implements AuthInterface
+ * const { isLoading, session } = useAuthClient(authClient) // auth is an auth object
+ *
+ */
+declare const useAuthClient: (auth: AuthInterface<SessionType>) => SessionContextType;
+
+export { type AuthInterface, Avatar, Button, Canvas, ColorPickerSlider, DropdownSelect, Image$1 as Image, ImageEditor, Image as ImageUtilities, InputFile, InputGoogle, MultiSelect, OptionSlider, type Options$2 as Options, RangeSlider, SessionProvider, type SessionType, type Options$1 as SliderOptions, type StorageInterface, TextArea, Transform, UploadImage, tools, useAuthClient, useSession };

package/dist/index.js

@@ -409,6 +409,12 @@ __export(index_exports, {
     UploadImage: function() {
         return UploadImage_default;
     },
+    tools: function() {
+        return tools_default;
+    },
+    useAuthClient: function() {
+        return useAuthClient_default;
+    },
     useSession: function() {
         return useSession;
     }
@@ -3014,6 +3020,55 @@ var Transform = /*#__PURE__*/ function() {
     ]);
     return Transform;
 }();
+// src/utilities/tools/handleAsync.ts
+function handleAsync(data) {
+    return _async_to_generator(function() {
+        var dataAsync, error;
+        return _ts_generator(this, function(_state) {
+            switch(_state.label){
+                case 0:
+                    _state.trys.push([
+                        0,
+                        2,
+                        ,
+                        3
+                    ]);
+                    return [
+                        4,
+                        data
+                    ];
+                case 1:
+                    dataAsync = _state.sent();
+                    return [
+                        2,
+                        {
+                            error: void 0,
+                            data: dataAsync
+                        }
+                    ];
+                case 2:
+                    error = _state.sent();
+                    return [
+                        2,
+                        {
+                            error: error,
+                            data: void 0
+                        }
+                    ];
+                case 3:
+                    return [
+                        2
+                    ];
+            }
+        });
+    })();
+}
+var handleAsync_default = handleAsync;
+// src/utilities/tools/tools.ts
+var tools = {
+    handleAsync: handleAsync_default
+};
+var tools_default = tools;
 // src/auth/react/context.tsx
 var import_react15 = require("react");
 var SessionContext = (0, import_react15.createContext)(void 0);
@@ -3032,6 +3087,51 @@ var SessionProvider = function(param) {
     });
 };
 var SessionProvider_default = SessionProvider;
+// src/auth/react/useAuthClient.ts
+var import_react16 = require("react");
+var useAuthClient = function(auth) {
+    var _ref = _sliced_to_array((0, import_react16.useState)(false), 2), isLoading = _ref[0], setLoading = _ref[1];
+    var sessionRef = (0, import_react16.useRef)(void 0);
+    (0, import_react16.useEffect)(function() {
+        var is = true;
+        var getSession = function() {
+            return _async_to_generator(function() {
+                var _ref, error, session;
+                return _ts_generator(this, function(_state) {
+                    switch(_state.label){
+                        case 0:
+                            setLoading(true);
+                            return [
+                                4,
+                                tools_default.handleAsync(auth.validate({}))
+                            ];
+                        case 1:
+                            _ref = _state.sent(), error = _ref.error, session = _ref.data;
+                            if (error) {
+                                setLoading(false);
+                            }
+                            if (is) {
+                                sessionRef.current = session;
+                                setLoading(false);
+                            }
+                            return [
+                                2
+                            ];
+                    }
+                });
+            })();
+        };
+        getSession();
+        return function() {
+            is = false;
+        };
+    }, []);
+    return {
+        isLoading: isLoading,
+        session: sessionRef.current
+    };
+};
+var useAuthClient_default = useAuthClient;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
     Avatar: Avatar,
@@ -3051,5 +3151,7 @@ var SessionProvider_default = SessionProvider;
     TextArea: TextArea,
     Transform: Transform,
     UploadImage: UploadImage,
+    tools: tools,
+    useAuthClient: useAuthClient,
     useSession: useSession
 });

package/dist/index.mjs

@@ -2895,6 +2895,55 @@ var Transform = /*#__PURE__*/ function() {
     ]);
     return Transform;
 }();
+// src/utilities/tools/handleAsync.ts
+function handleAsync(data) {
+    return _async_to_generator(function() {
+        var dataAsync, error;
+        return _ts_generator(this, function(_state) {
+            switch(_state.label){
+                case 0:
+                    _state.trys.push([
+                        0,
+                        2,
+                        ,
+                        3
+                    ]);
+                    return [
+                        4,
+                        data
+                    ];
+                case 1:
+                    dataAsync = _state.sent();
+                    return [
+                        2,
+                        {
+                            error: void 0,
+                            data: dataAsync
+                        }
+                    ];
+                case 2:
+                    error = _state.sent();
+                    return [
+                        2,
+                        {
+                            error: error,
+                            data: void 0
+                        }
+                    ];
+                case 3:
+                    return [
+                        2
+                    ];
+            }
+        });
+    })();
+}
+var handleAsync_default = handleAsync;
+// src/utilities/tools/tools.ts
+var tools = {
+    handleAsync: handleAsync_default
+};
+var tools_default = tools;
 // src/auth/react/context.tsx
 import { createContext as createContext4, useContext as useContext4 } from "react";
 var SessionContext = createContext4(void 0);
@@ -2913,4 +2962,49 @@ var SessionProvider = function(param) {
     });
 };
 var SessionProvider_default = SessionProvider;
-export { Avatar_default as Avatar, Button_default as Button, Canvas, ColorPickerSlider_default as ColorPickerSlider, DropdownSelect_default as DropdownSelect, Image_default as Image, ImageEditor_default as ImageEditor, Image_default2 as ImageUtilities, InputFile_default as InputFile, InputGoogle_default as InputGoogle, MultiSelect_default as MultiSelect, OptionSlider_default as OptionSlider, RangeSlider_default as RangeSlider, SessionProvider_default as SessionProvider, TextArea_default as TextArea, Transform, UploadImage_default as UploadImage, useSession };
+// src/auth/react/useAuthClient.ts
+import { useEffect as useEffect11, useRef as useRef11, useState as useState12 } from "react";
+var useAuthClient = function(auth) {
+    var _useState12 = _sliced_to_array(useState12(false), 2), isLoading = _useState12[0], setLoading = _useState12[1];
+    var sessionRef = useRef11(void 0);
+    useEffect11(function() {
+        var is = true;
+        var getSession = function() {
+            return _async_to_generator(function() {
+                var _ref, error, session;
+                return _ts_generator(this, function(_state) {
+                    switch(_state.label){
+                        case 0:
+                            setLoading(true);
+                            return [
+                                4,
+                                tools_default.handleAsync(auth.validate({}))
+                            ];
+                        case 1:
+                            _ref = _state.sent(), error = _ref.error, session = _ref.data;
+                            if (error) {
+                                setLoading(false);
+                            }
+                            if (is) {
+                                sessionRef.current = session;
+                                setLoading(false);
+                            }
+                            return [
+                                2
+                            ];
+                    }
+                });
+            })();
+        };
+        getSession();
+        return function() {
+            is = false;
+        };
+    }, []);
+    return {
+        isLoading: isLoading,
+        session: sessionRef.current
+    };
+};
+var useAuthClient_default = useAuthClient;
+export { Avatar_default as Avatar, Button_default as Button, Canvas, ColorPickerSlider_default as ColorPickerSlider, DropdownSelect_default as DropdownSelect, Image_default as Image, ImageEditor_default as ImageEditor, Image_default2 as ImageUtilities, InputFile_default as InputFile, InputGoogle_default as InputGoogle, MultiSelect_default as MultiSelect, OptionSlider_default as OptionSlider, RangeSlider_default as RangeSlider, SessionProvider_default as SessionProvider, TextArea_default as TextArea, Transform, UploadImage_default as UploadImage, tools_default as tools, useAuthClient_default as useAuthClient, useSession };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@willphan1712000/frontend",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Frontend Library",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",