@willphan1712000/frontend 1.2.0 → 1.3.0

package/dist/index.d.mts

@@ -375,4 +375,82 @@ 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 };
+/**
+ * This interface provides a comprehensive guides on how to design auth object used for authentication on client side
+ * - Copyright: Will Phan
+ */
+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
+ * - Copyright: Will Phan
+ */
+interface StorageInterface {
+    getToken(): string | null;
+    getUser(): SessionType | null;
+    setToken({ token }: {
+        token: string;
+    }): void;
+    removeToken(): void;
+}
+
+/**
+ * Will-Auth - retrieve session
+ * @returns session context
+ */
+declare function useSession(): SessionContextType;
+
+/**
+ * Custom Session Provider using React Context
+ * - Copyright: Will Phan
+ */
+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 };

package/dist/index.d.ts

@@ -375,4 +375,82 @@ 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 };
+/**
+ * This interface provides a comprehensive guides on how to design auth object used for authentication on client side
+ * - Copyright: Will Phan
+ */
+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
+ * - Copyright: Will Phan
+ */
+interface StorageInterface {
+    getToken(): string | null;
+    getUser(): SessionType | null;
+    setToken({ token }: {
+        token: string;
+    }): void;
+    removeToken(): void;
+}
+
+/**
+ * Will-Auth - retrieve session
+ * @returns session context
+ */
+declare function useSession(): SessionContextType;
+
+/**
+ * Custom Session Provider using React Context
+ * - Copyright: Will Phan
+ */
+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 };

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,9 @@ __export(index_exports, {
     },
     UploadImage: function() {
         return UploadImage_default;
+    },
+    useSession: function() {
+        return useSession;
     }
 });
 module.exports = __toCommonJS(index_exports);
@@ -3008,6 +3014,24 @@ var Transform = /*#__PURE__*/ function() {
     ]);
     return Transform;
 }();
+// 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;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
     Avatar: Avatar,
@@ -3023,7 +3047,9 @@ var Transform = /*#__PURE__*/ function() {
     MultiSelect: MultiSelect,
     OptionSlider: OptionSlider,
     RangeSlider: RangeSlider,
+    SessionProvider: SessionProvider,
     TextArea: TextArea,
     Transform: Transform,
-    UploadImage: UploadImage
+    UploadImage: UploadImage,
+    useSession: useSession
 });

package/dist/index.mjs

@@ -2895,4 +2895,22 @@ 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/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;
+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 };

package/package.json

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