@willphan1712000/frontend 1.0.0 → 1.0.1

package/README.md

@@ -1,14 +1,8 @@
 <img style="width: 15%" src="./will.png">
 
-## Will-js is a Web development library made easy for Full-stack Development to develop, build, and push to production created by Will Phan
+## Will-js is a Frontend package developed by Will Phan that makes Fronted development easy with pre-built UI components
 
-## It has pre-built classes that can be used for Web Development
-
-## Key Benefits
-
-- Simple syntax that includes object-oriented programming techniques
-- Pre-built functionalities that handle difficult tasks in Full-stack Development
-- Provides flexibility, maintainability, and extensibility
+## UI Components
 
 ## Technology
 
@@ -16,27 +10,12 @@
 
 ## Installation
 
-### Option 1: Clone this project to your local computer
-
-There is a file called W.ts that exports $$ function, this is the root function to use every other functions and classes.
-Simply import $$ to every ts files that you want to use Will-js
-
-```ts
-import { $$ } from "path/of/your/project/Web-Development/W";
-```
-
-### Options 2: Install from npm
+### Install from npm
 
 Run this command in your terminal (note: this assumes you have installed Nodejs)
 
 ```npm
-npm i @willphan1712000/w
-```
-
-Then import $$ function to every ts files that you want to use Will-js as an entry point where you can access every features of the library
-
-```ts
-import { $$ } from "@willphan1712000/w";
+npm i @willphan1712000/frontend
 ```
 
 ## How to use Will-js

package/dist/index.js

@@ -7,6 +7,19 @@ function _array_like_to_array(arr, len) {
 function _array_with_holes(arr) {
     if (Array.isArray(arr)) return arr;
 }
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
 function _iterable_to_array_limit(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
@@ -34,6 +47,45 @@ function _iterable_to_array_limit(arr, i) {
 function _non_iterable_rest() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
 function _sliced_to_array(arr, i) {
     return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
 }
@@ -124,25 +176,80 @@ function useMyContext() {
 }
 // src/components/DropdownSelect/Dropdown.tsx
 var import_react2 = require("react");
-// scss-module:./dropdownSelect.module.css#scss-module
-var dropdownSelect_module_default = {
-    "select_box": "dropdownSelect-module__select_box___Q8S31",
-    "value": "dropdownSelect-module__value___izaXQ",
-    "close": "dropdownSelect-module__close___axGDo",
-    "element": "dropdownSelect-module__element___Q56x3",
-    "dropdown": "dropdownSelect-module__dropdown___cjfHn",
-    "search_border": "dropdownSelect-module__search_border___xQU5q",
-    "search": "dropdownSelect-module__search___kGmqs"
+// src/components/DropdownSelect/styles.ts
+var styles = {
+    select_box: {
+        borderRadius: "10px",
+        border: "solid 1px #dadada",
+        padding: "5px 10px",
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        cursor: "pointer"
+    },
+    value: {
+        marginRight: "auto"
+    },
+    close: {
+        borderRadius: "50%",
+        width: "20px",
+        height: "20px",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center"
+    },
+    element: {
+        display: "flex",
+        padding: "5px",
+        borderRadius: "10px",
+        justifyContent: "flex-start",
+        alignItems: "center",
+        cursor: "pointer"
+    },
+    dropdown: {
+        position: "absolute",
+        boxSizing: "border-box",
+        width: "100%",
+        left: "0",
+        display: "flex",
+        flexDirection: "column",
+        border: "solid 1px #dadada",
+        borderRadius: "10px",
+        padding: "5px",
+        maxHeight: "300px",
+        overflowY: "auto",
+        backgroundColor: "white"
+    },
+    search_border: {
+        position: "sticky",
+        top: 0,
+        left: 0,
+        boxSizing: "border-box",
+        width: "100%",
+        backgroundColor: "white",
+        marginBottom: "5px"
+    },
+    search: {
+        width: "100%",
+        borderRadius: "5px",
+        padding: "5px",
+        border: "solid 1px #dadada",
+        display: "flex",
+        justifyContent: "flex-start",
+        alignItems: "center",
+        boxSizing: "border-box"
+    }
 };
+var styles_default = styles;
 // src/components/DropdownSelect/Search.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var Search = function(param) {
     var options = param.options, onSearch = param.onSearch;
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-        className: dropdownSelect_module_default.search_border,
+        style: styles_default.search_border,
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
             placeholder: "Search",
-            className: dropdownSelect_module_default.search,
+            style: styles_default.search,
             id: "search",
             name: "search",
             onChange: function(e) {
@@ -159,7 +266,8 @@ var import_jsx_runtime2 = require("react/jsx-runtime");
 var Dropdown = function() {
     var _useMyContext = useMyContext(), options = _useMyContext.options, onChange = _useMyContext.onChange, setOpen = _useMyContext.setOpen;
     var _ref = _sliced_to_array((0, import_react2.useState)(true), 2), isVisible = _ref[0], setVisible = _ref[1];
-    var _ref1 = _sliced_to_array((0, import_react2.useState)(options), 2), optionsCopy = _ref1[0], setOption = _ref1[1];
+    var _ref1 = _sliced_to_array((0, import_react2.useState)(-1), 2), keyOnHover = _ref1[0], setKeyOnHover = _ref1[1];
+    var _ref2 = _sliced_to_array((0, import_react2.useState)(options), 2), optionsCopy = _ref2[0], setOption = _ref2[1];
     var dropdownRef = (0, import_react2.useRef)(null);
     var handleResize = function() {
         var dropdown = dropdownRef.current;
@@ -181,13 +289,12 @@ var Dropdown = function() {
         };
     }, []);
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
-        className: dropdownSelect_module_default.dropdown,
         ref: dropdownRef,
-        style: isVisible ? {
+        style: isVisible ? _object_spread_props(_object_spread({}, styles_default.dropdown), {
             top: "calc(100% + 5px)"
-        } : {
+        }) : _object_spread_props(_object_spread({}, styles_default.dropdown), {
             bottom: "calc(100% + 5px)"
-        },
+        }),
         children: [
             /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Search_default, {
                 options: options,
@@ -195,13 +302,21 @@ var Dropdown = function() {
             }),
             optionsCopy.map(function(option, key) {
                 return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
-                    className: dropdownSelect_module_default.element,
+                    style: _object_spread_props(_object_spread({}, styles_default.element), {
+                        backgroundColor: keyOnHover === key ? "#f0f0f0" : "#fff"
+                    }),
                     onClick: function() {
                         onChange(option.value);
                         setOpen(function(prev) {
                             return !prev;
                         });
                     },
+                    onMouseEnter: function() {
+                        return setKeyOnHover(key);
+                    },
+                    onMouseLeave: function() {
+                        return setKeyOnHover(-1);
+                    },
                     children: option.label
                 }, key);
             })
@@ -215,6 +330,7 @@ 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 _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);
     var clickHandler = function(e) {
         var select = selectRef.current;
@@ -243,7 +359,7 @@ var DropdownSelect = function(param) {
             ref: selectRef,
             children: [
                 /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", {
-                    className: dropdownSelect_module_default.select_box,
+                    style: styles_default.select_box,
                     onClick: function() {
                         return setOpen(function(prev) {
                             return !prev;
@@ -251,11 +367,13 @@ var DropdownSelect = function(param) {
                     },
                     children: [
                         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", {
-                            className: dropdownSelect_module_default.value,
+                            style: styles_default.value,
                             children: value
                         }),
                         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", {
-                            className: dropdownSelect_module_default.close,
+                            style: _object_spread_props(_object_spread({}, styles_default.close), {
+                                backgroundColor: isHoverClose ? "#f0f0f0" : "#fff"
+                            }),
                             title: "clear",
                             onClick: function() {
                                 onChange("");
@@ -263,6 +381,12 @@ var DropdownSelect = function(param) {
                                     return !prev;
                                 });
                             },
+                            onMouseEnter: function() {
+                                return setHoverClose(true);
+                            },
+                            onMouseLeave: function() {
+                                return setHoverClose(false);
+                            },
                             children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_io.IoMdClose, {})
                         })
                     ]
@@ -275,15 +399,6 @@ var DropdownSelect = function(param) {
 var DropdownSelect_default = DropdownSelect;
 // src/components/RangeSlider/RangeSlider.tsx
 var import_react4 = require("react");
-// scss-module:./rangeSlider.module.css#scss-module
-var rangeSlider_module_default = {
-    "slider_border": "rangeSlider-module__slider_border___CoeFx",
-    "thumb": "rangeSlider-module__thumb___OnFSM",
-    "thumb_shadow": "rangeSlider-module__thumb_shadow___L16TY",
-    "fill": "rangeSlider-module__fill___urGCN",
-    "rest": "rangeSlider-module__rest___pO2pi",
-    "value": "rangeSlider-module__value___Evg0D"
-};
 // src/components/RangeSlider/functions.ts
 function encode(value, min, max) {
     return (parseInt(value) - parseInt(min)) * 100 / (parseInt(max) - parseInt(min));
@@ -291,6 +406,70 @@ function encode(value, min, max) {
 function decode(percent, min, max) {
     return Math.round(parseInt(min) + percent * (parseInt(max) - parseInt(min)));
 }
+// src/components/RangeSlider/styles.ts
+var styles2 = {
+    slider_border: {
+        position: "relative",
+        display: "flex",
+        gap: "5px",
+        flexDirection: "column",
+        height: "10px"
+    },
+    thumb: {
+        width: "17px",
+        height: "17px",
+        cursor: "pointer",
+        position: "absolute",
+        borderRadius: "50%",
+        top: "50%",
+        transform: "translate(-50%, -50%)",
+        zIndex: 1
+    },
+    thumb_shadow: {
+        content: '""',
+        position: "absolute",
+        top: "-9px",
+        left: "-9px",
+        width: "35px",
+        height: "35px",
+        opacity: 0.2,
+        zIndex: -1,
+        borderRadius: "50%",
+        scale: "0",
+        transition: "scale .1s linear"
+    },
+    fill: {
+        position: "absolute",
+        left: 0,
+        top: 0,
+        height: "100%",
+        borderRadius: "5px",
+        cursor: "pointer"
+    },
+    rest: {
+        position: "absolute",
+        top: "50%",
+        transform: "translateY(-50%)",
+        opacity: 0.3,
+        width: "100%",
+        height: "70%",
+        borderRadius: "5px",
+        cursor: "pointer"
+    },
+    value: {
+        position: "absolute",
+        bottom: "30px",
+        left: "50%",
+        transform: "translateX(-50%)",
+        transformOrigin: "bottom left",
+        backgroundColor: "#f0f0f7",
+        borderRadius: "5px",
+        padding: "5px",
+        scale: "0",
+        transition: "scale .1s linear"
+    }
+};
+var styles_default2 = styles2;
 // src/components/RangeSlider/RangeSlider.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var RangeSlider = function(param) {
@@ -347,10 +526,9 @@ var RangeSlider = function(param) {
         isMouseDown
     ]);
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", {
-        className: rangeSlider_module_default.slider_border,
-        style: {
+        style: _object_spread_props(_object_spread({}, styles_default2.slider_border), {
             width: "".concat(width, "px")
-        },
+        }),
         onMouseDown: function(e) {
             handleDrag(true, e);
             setMouseDown(true);
@@ -362,18 +540,16 @@ var RangeSlider = function(param) {
         ref: sliderBorderRef,
         children: [
             /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", {
-                className: rangeSlider_module_default.fill,
-                style: {
+                style: _object_spread_props(_object_spread({}, styles_default2.fill), {
                     background: color,
                     width: "".concat(percentage, "%")
-                }
+                })
             }),
             /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", {
-                className: rangeSlider_module_default.thumb,
-                style: {
+                style: _object_spread_props(_object_spread({}, styles_default2.thumb), {
                     background: color,
                     left: "".concat(percentage, "%")
-                },
+                }),
                 onMouseMove: function() {
                     return setHover(true);
                 },
@@ -382,63 +558,107 @@ var RangeSlider = function(param) {
                 },
                 children: [
                     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", {
-                        className: rangeSlider_module_default.value,
-                        style: {
+                        style: _object_spread_props(_object_spread({}, styles_default2.value), {
                             scale: isMouseDown || isHover ? "1" : "0"
-                        },
+                        }),
                         children: value
                     }),
                     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", {
-                        className: rangeSlider_module_default.thumb_shadow,
-                        style: {
+                        style: _object_spread_props(_object_spread({}, styles_default2.thumb_shadow), {
                             background: color,
                             scale: isMouseDown || isHover ? "1" : "0"
-                        }
+                        })
                     })
                 ]
             }),
             /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", {
-                className: rangeSlider_module_default.rest,
-                style: {
+                style: _object_spread_props(_object_spread({}, styles_default2.rest), {
                     background: color
-                }
+                })
             })
         ]
     });
 };
 var RangeSlider_default = RangeSlider;
-// scss-module:./optionSlider.module.css#scss-module
-var optionSlider_module_default = {
-    "border": "optionSlider-module__border___DvXkD",
-    "background": "optionSlider-module__background___P6MQP",
-    "options": "optionSlider-module__options___OLBcd",
-    "element": "optionSlider-module__element___obtjI"
+// src/components/OptionSlider/styles.ts
+var styles3 = {
+    border: {
+        borderRadius: "10px",
+        overflow: "auto",
+        boxShadow: "rgba(0, 0, 0, 0.16) 0px 1px 4px",
+        aspectRatio: "4",
+        display: "flex",
+        flexDirection: "row",
+        position: "relative",
+        scrollbarWidth: "none",
+        msOverflowStyle: "none",
+        boxSizing: "border-box",
+        margin: 0,
+        padding: 0
+    },
+    background: {
+        position: "relative",
+        width: "100%",
+        height: "100%",
+        opacity: "0.3",
+        boxSizing: "border-box",
+        margin: 0,
+        padding: 0
+    },
+    options: {
+        height: "100%",
+        padding: "5px",
+        gap: "5px",
+        position: "absolute",
+        top: "50%",
+        transform: "translateY(-50%)",
+        left: 0,
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: "center",
+        alignItems: "center",
+        boxSizing: "border-box",
+        margin: 0
+    },
+    element: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        cursor: "pointer",
+        width: "auto",
+        height: "100%",
+        aspectRatio: "1 / 1",
+        borderRadius: "50%",
+        overflow: "hidden",
+        border: "solid 1px #000",
+        boxSizing: "border-box",
+        margin: 0,
+        padding: 0
+    }
 };
+var styles_default3 = styles3;
 // src/components/OptionSlider/OptionSlider.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var OptionSlider = function(param) {
     var value = param.value, onChange = param.onChange, _param_width = param.width, width = _param_width === void 0 ? "200" : _param_width, options = param.options, _param_color = param.color, color = _param_color === void 0 ? "#f0f0f7" : _param_color;
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", {
-        className: optionSlider_module_default.border,
-        style: {
+        style: _object_spread_props(_object_spread({}, styles_default3.border), {
             width: "".concat(width, "px")
-        },
+        }),
         children: [
             /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", {
-                className: optionSlider_module_default.background,
-                style: {
+                style: _object_spread_props(_object_spread({}, styles_default3.background), {
                     background: color
-                }
+                })
             }),
             /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", {
-                className: optionSlider_module_default.options,
+                style: styles_default3.options,
                 children: options.map(function(option, key) {
                     return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", {
-                        style: {
+                        style: _object_spread_props(_object_spread({}, styles_default3.element), {
                             background: color,
                             border: value === option.value ? "solid 2px #000" : "solid 1px #000"
-                        },
-                        className: optionSlider_module_default.element,
+                        }),
                         onClick: function() {
                             return onChange(option.value);
                         },
@@ -453,12 +673,6 @@ var OptionSlider = function(param) {
 var OptionSlider_default = OptionSlider;
 // src/components/ColorPickerSlider/ColorPickerSlider.tsx
 var import_react5 = require("react");
-// scss-module:./colorPickerSlider.module.css#scss-module
-var colorPickerSlider_module_default = {
-    "border": "colorPickerSlider-module__border___-6cw8",
-    "thumb": "colorPickerSlider-module__thumb___p2fHW",
-    "label": "colorPickerSlider-module__label___Aa0AV"
-};
 // src/components/ColorPickerSlider/functions.ts
 function encode2(color) {
     var h = hexToHsl(color).h;
@@ -562,6 +776,39 @@ function hslToHex(h, s, l) {
     };
     return "#".concat(toHex(r)).concat(toHex(g)).concat(toHex(b));
 }
+// src/components/ColorPickerSlider/styles.ts
+var styles4 = {
+    border: {
+        background: "linear-gradient(to right, hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(300, 100%, 50%), hsl(0, 100%, 50%))",
+        borderRadius: "10px",
+        aspectRatio: 20,
+        cursor: "pointer",
+        appearance: "none",
+        outline: "none",
+        position: "relative"
+    },
+    thumb: {
+        borderRadius: "50%",
+        aspectRatio: 1,
+        position: "absolute",
+        top: "50%",
+        transform: "translate(-50%, -50%)",
+        boxShadow: "rgba(0, 0, 0, 0.24) 0px 3px 8px",
+        border: "solid 2px #fff"
+    },
+    label: {
+        position: "absolute",
+        bottom: "200%",
+        transform: "translateX(-50%)",
+        borderRadius: "5px",
+        padding: "5px",
+        fontSize: "15px",
+        background: "#f0f0f7",
+        transition: "scale .1s linear",
+        transformOrigin: "bottom left"
+    }
+};
+var styles_default4 = styles4;
 // src/components/ColorPickerSlider/ColorPickerSlider.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var ColorPickerSlider = function(param) {
@@ -613,10 +860,9 @@ var ColorPickerSlider = function(param) {
         isMouseDown
     ]);
     return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", {
-        className: colorPickerSlider_module_default.border,
-        style: {
+        style: _object_spread_props(_object_spread({}, styles_default4.border), {
             width: "".concat(width, "px")
-        },
+        }),
         onMouseDown: function(e) {
             handleDrag(true, e);
             setMouseDown(true);
@@ -628,12 +874,11 @@ var ColorPickerSlider = function(param) {
         ref: sliderBorderRef,
         children: [
             /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", {
-                className: colorPickerSlider_module_default.thumb,
-                style: {
+                style: _object_spread_props(_object_spread({}, styles_default4.thumb), {
                     width: "".concat(parseInt(width) * 0.1, "px"),
                     background: value,
                     left: "".concat(percentage, "%")
-                },
+                }),
                 onMouseMove: function() {
                     return setHover(true);
                 },
@@ -642,11 +887,10 @@ var ColorPickerSlider = function(param) {
                 }
             }),
             /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", {
-                className: colorPickerSlider_module_default.label,
-                style: {
+                style: _object_spread_props(_object_spread({}, styles_default4.label), {
                     left: "".concat(percentage, "%"),
                     scale: isHover || isMouseDown ? "1" : "0"
-                },
+                }),
                 children: value
             })
         ]