@willphan1712000/frontend 1.2.0 → 1.4.0

package/dist/index.d.mts

@@ -375,4 +375,167 @@ declare class Transform {
     private transform;
 }
 
-export { Avatar, Button, Canvas, ColorPickerSlider, DropdownSelect, Image$1 as Image, ImageEditor, Image as ImageUtilities, InputFile, InputGoogle, MultiSelect, OptionSlider, type Options$2 as Options, RangeSlider, type Options$1 as SliderOptions, TextArea, Transform, UploadImage };
+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
+ *
+ * @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> {
+    /**
+     *
+     * @param redirect: route that will be returned after successful authentication
+     * @param client_id: oauth client id
+     * @param callback_api: api route for callback
+     * @returns sign in url
+     */
+    getSignInUrl({ redirect, client_id, callback_api, }: {
+        redirect?: string;
+        client_id?: string;
+        callback_api?: string;
+    }): string;
+    /**
+     * Authenticate a user
+     */
+    signin({ username, email, password, redirect, }: {
+        username: string;
+        email?: string;
+        password: string;
+        redirect?: string;
+    }): Promise<void>;
+    /**
+     * Validate user authentication
+     */
+    validate({ state }: {
+        state?: string;
+    }): Promise<User>;
+    /**
+     * Sign a user out
+     */
+    signout({ state }: {
+        state?: string;
+    }): Promise<void>;
+}
+
+type SessionType = {
+    username?: string;
+    email?: string;
+    role?: string;
+} | undefined;
+type SessionContextType = {
+    isLoading: boolean;
+    session: SessionType;
+};
+
+/**
+ * This interface provides a guide to design storage object used for client side to operate storage operations
+ *
+ * @example
+ *
+ * class storage implements StorageInterface {
+    getToken(): string | null {
+    ...
+    }
+    getUser(): SessionType | null {
+    ...
+    }
+    setToken({ token }: { token: string; }): void {
+    ...
+    }
+    removeToken(): void {
+    ...
+    }
+}
+ */
+interface StorageInterface {
+    getToken(): string | null;
+    getUser(): SessionType | null;
+    setToken({ token }: {
+        token: string;
+    }): void;
+    removeToken(): void;
+}
+
+/**
+ * Will-Auth - retrieve session
+ * @returns session context
+ *
+ * @example
+ *
+ * const { isLoading, session } = useSession()
+ */
+declare function useSession(): SessionContextType;
+
+/**
+ * Custom Session Provider using React Context
+ *
+ * @example
+ *
+ * <SessionProvider value={useAuthClient(auth)}>
+ * ...
+ * </SessionProvider>
+ * // auth object implementing AuthInterface
+ */
+declare const SessionProvider: ({ value, children, }: {
+    value: SessionContextType;
+    children: ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+
+/**
+ * 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,4 +375,167 @@ declare class Transform {
     private transform;
 }
 
-export { Avatar, Button, Canvas, ColorPickerSlider, DropdownSelect, Image$1 as Image, ImageEditor, Image as ImageUtilities, InputFile, InputGoogle, MultiSelect, OptionSlider, type Options$2 as Options, RangeSlider, type Options$1 as SliderOptions, TextArea, Transform, UploadImage };
+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
+ *
+ * @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> {
+    /**
+     *
+     * @param redirect: route that will be returned after successful authentication
+     * @param client_id: oauth client id
+     * @param callback_api: api route for callback
+     * @returns sign in url
+     */
+    getSignInUrl({ redirect, client_id, callback_api, }: {
+        redirect?: string;
+        client_id?: string;
+        callback_api?: string;
+    }): string;
+    /**
+     * Authenticate a user
+     */
+    signin({ username, email, password, redirect, }: {
+        username: string;
+        email?: string;
+        password: string;
+        redirect?: string;
+    }): Promise<void>;
+    /**
+     * Validate user authentication
+     */
+    validate({ state }: {
+        state?: string;
+    }): Promise<User>;
+    /**
+     * Sign a user out
+     */
+    signout({ state }: {
+        state?: string;
+    }): Promise<void>;
+}
+
+type SessionType = {
+    username?: string;
+    email?: string;
+    role?: string;
+} | undefined;
+type SessionContextType = {
+    isLoading: boolean;
+    session: SessionType;
+};
+
+/**
+ * This interface provides a guide to design storage object used for client side to operate storage operations
+ *
+ * @example
+ *
+ * class storage implements StorageInterface {
+    getToken(): string | null {
+    ...
+    }
+    getUser(): SessionType | null {
+    ...
+    }
+    setToken({ token }: { token: string; }): void {
+    ...
+    }
+    removeToken(): void {
+    ...
+    }
+}
+ */
+interface StorageInterface {
+    getToken(): string | null;
+    getUser(): SessionType | null;
+    setToken({ token }: {
+        token: string;
+    }): void;
+    removeToken(): void;
+}
+
+/**
+ * Will-Auth - retrieve session
+ * @returns session context
+ *
+ * @example
+ *
+ * const { isLoading, session } = useSession()
+ */
+declare function useSession(): SessionContextType;
+
+/**
+ * Custom Session Provider using React Context
+ *
+ * @example
+ *
+ * <SessionProvider value={useAuthClient(auth)}>
+ * ...
+ * </SessionProvider>
+ * // auth object implementing AuthInterface
+ */
+declare const SessionProvider: ({ value, children, }: {
+    value: SessionContextType;
+    children: ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+
+/**
+ * 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

@@ -397,6 +397,9 @@ __export(index_exports, {
     RangeSlider: function() {
         return RangeSlider_default;
     },
+    SessionProvider: function() {
+        return SessionProvider_default;
+    },
     TextArea: function() {
         return TextArea_default;
     },
@@ -405,6 +408,15 @@ __export(index_exports, {
     },
     UploadImage: function() {
         return UploadImage_default;
+    },
+    tools: function() {
+        return tools_default;
+    },
+    useAuthClient: function() {
+        return useAuthClient_default;
+    },
+    useSession: function() {
+        return useSession;
     }
 });
 module.exports = __toCommonJS(index_exports);
@@ -3008,6 +3020,118 @@ 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);
+function useSession() {
+    var data = (0, import_react15.useContext)(SessionContext);
+    if (data === void 0) throw new Error("Session context is undefined");
+    return data;
+}
+// src/auth/react/SessionProvider.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var SessionProvider = function(param) {
+    var value = param.value, children = param.children;
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SessionContext.Provider, {
+        value: value,
+        children: children
+    });
+};
+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,
@@ -3023,7 +3147,11 @@ var Transform = /*#__PURE__*/ function() {
     MultiSelect: MultiSelect,
     OptionSlider: OptionSlider,
     RangeSlider: RangeSlider,
+    SessionProvider: SessionProvider,
     TextArea: TextArea,
     Transform: Transform,
-    UploadImage: UploadImage
+    UploadImage: UploadImage,
+    tools: tools,
+    useAuthClient: useAuthClient,
+    useSession: useSession
 });

package/dist/index.mjs

@@ -2895,4 +2895,116 @@ var Transform = /*#__PURE__*/ function() {
     ]);
     return Transform;
 }();
-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, TextArea_default as TextArea, Transform, UploadImage_default as UploadImage };
+// 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);
+function useSession() {
+    var data = useContext4(SessionContext);
+    if (data === void 0) throw new Error("Session context is undefined");
+    return data;
+}
+// src/auth/react/SessionProvider.tsx
+import { jsx as jsx20 } from "react/jsx-runtime";
+var SessionProvider = function(param) {
+    var value = param.value, children = param.children;
+    return /* @__PURE__ */ jsx20(SessionContext.Provider, {
+        value: value,
+        children: children
+    });
+};
+var SessionProvider_default = SessionProvider;
+// 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.2.0",
+  "version": "1.4.0",
   "description": "Frontend Library",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",