@willphan1712000/frontend 1.1.0 → 1.3.0

package/README.md

@@ -1,8 +1,15 @@
 <img style="width: 15%" src="./will.png">
 
-## Will-js is a Frontend package developed by Will Phan that makes Fronted development easy with pre-built UI components
+## Frontend package developed by Will Phan that makes Fronted development easy with pre-built UI components
 
 ## UI Components
+- DropdownSelect, type Options
+- RangeSlider
+- OptionSlider, type SliderOptions
+- ColorPickerSlider
+- MultiSelect
+- Button
+- Avatar
 
 ## Technology
 

package/dist/index.d.mts

@@ -9,17 +9,15 @@ interface Props$b {
     options: Options$2;
     value: string;
     onChange: (value: string) => void;
-    width?: string;
 }
 /**
  * Dropdown Select component, allowing users to select options from dropdown menu
  * @param options - list of options, which is an array of object [{ label: string, value: string }]
  * @param value - a chosen value
  * @param onChange - a function to set a value
- * @param width - specify the width of the component
  * @returns
  */
-declare const DropdownSelect: ({ options, value, onChange, width }: Props$b) => react_jsx_runtime.JSX.Element;
+declare const DropdownSelect: ({ options, value, onChange }: Props$b) => react_jsx_runtime.JSX.Element;
 
 interface Props$a {
     value: string;
@@ -377,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

@@ -9,17 +9,15 @@ interface Props$b {
     options: Options$2;
     value: string;
     onChange: (value: string) => void;
-    width?: string;
 }
 /**
  * Dropdown Select component, allowing users to select options from dropdown menu
  * @param options - list of options, which is an array of object [{ label: string, value: string }]
  * @param value - a chosen value
  * @param onChange - a function to set a value
- * @param width - specify the width of the component
  * @returns
  */
-declare const DropdownSelect: ({ options, value, onChange, width }: Props$b) => react_jsx_runtime.JSX.Element;
+declare const DropdownSelect: ({ options, value, onChange }: Props$b) => react_jsx_runtime.JSX.Element;
 
 interface Props$a {
     value: string;
@@ -377,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);
@@ -422,6 +428,10 @@ function useMyContext() {
 var import_react2 = require("react");
 // src/components/DropdownSelect/styles.ts
 var styles = {
+    container: {
+        width: "100%",
+        position: "relative"
+    },
     select_box: {
         borderRadius: "10px",
         border: "solid 1px #dadada",
@@ -498,7 +508,7 @@ var Search = function(param) {
             name: "search",
             onChange: function(e) {
                 return onSearch(options.filter(function(ele) {
-                    return ele.value.toLowerCase().includes(e.target.value.toLowerCase());
+                    return ele.label.toLowerCase().includes(e.target.value.toLowerCase());
                 }));
             }
         })
@@ -572,7 +582,7 @@ var Dropdown_default = Dropdown;
 var import_io = require("react-icons/io");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var DropdownSelect = function(param) {
-    var options = param.options, value = param.value, onChange = param.onChange, _param_width = param.width, width = _param_width === void 0 ? "200" : _param_width;
+    var options = param.options, value = param.value, onChange = param.onChange;
     var _ref = _sliced_to_array((0, import_react3.useState)(false), 2), open = _ref[0], setOpen = _ref[1];
     var _ref1 = _sliced_to_array((0, import_react3.useState)(false), 2), isHoverClose = _ref1[0], setHoverClose = _ref1[1];
     var selectRef = (0, import_react3.useRef)(null);
@@ -596,10 +606,7 @@ var DropdownSelect = function(param) {
             setOpen: setOpen
         },
         children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", {
-            style: {
-                width: "".concat(width, "px"),
-                position: "relative"
-            },
+            style: styles_default.container,
             ref: selectRef,
             children: [
                 /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", {
@@ -3007,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,
@@ -3022,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

@@ -306,6 +306,10 @@ function useMyContext() {
 import { useEffect, useRef, useState } from "react";
 // src/components/DropdownSelect/styles.ts
 var styles = {
+    container: {
+        width: "100%",
+        position: "relative"
+    },
     select_box: {
         borderRadius: "10px",
         border: "solid 1px #dadada",
@@ -382,7 +386,7 @@ var Search = function(param) {
             name: "search",
             onChange: function(e) {
                 return onSearch(options.filter(function(ele) {
-                    return ele.value.toLowerCase().includes(e.target.value.toLowerCase());
+                    return ele.label.toLowerCase().includes(e.target.value.toLowerCase());
                 }));
             }
         })
@@ -456,7 +460,7 @@ var Dropdown_default = Dropdown;
 import { IoMdClose } from "react-icons/io";
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var DropdownSelect = function(param) {
-    var options = param.options, value = param.value, onChange = param.onChange, _param_width = param.width, width = _param_width === void 0 ? "200" : _param_width;
+    var options = param.options, value = param.value, onChange = param.onChange;
     var _useState2 = _sliced_to_array(useState2(false), 2), open = _useState2[0], setOpen = _useState2[1];
     var _useState21 = _sliced_to_array(useState2(false), 2), isHoverClose = _useState21[0], setHoverClose = _useState21[1];
     var selectRef = useRef2(null);
@@ -480,10 +484,7 @@ var DropdownSelect = function(param) {
             setOpen: setOpen
         },
         children: /* @__PURE__ */ jsxs2("div", {
-            style: {
-                width: "".concat(width, "px"),
-                position: "relative"
-            },
+            style: styles_default.container,
             ref: selectRef,
             children: [
                 /* @__PURE__ */ jsxs2("div", {
@@ -2894,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.1.0",
+  "version": "1.3.0",
   "description": "Frontend Library",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",