@willphan1712000/frontend 1.0.0

package/dist/index.mjs

@@ -0,0 +1,588 @@
+// src/components/DropdownSelect/DropdownSelect.tsx
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+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 _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();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+import { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+// src/components/DropdownSelect/context.ts
+import { createContext, useContext } from "react";
+var MyContext = createContext(void 0);
+function useMyContext() {
+    var data = useContext(MyContext);
+    if (data === void 0) throw new Error("Select context is undefined");
+    return data;
+}
+// src/components/DropdownSelect/Dropdown.tsx
+import { useEffect, useRef, useState } from "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/Search.tsx
+import { jsx } from "react/jsx-runtime";
+var Search = function(param) {
+    var options = param.options, onSearch = param.onSearch;
+    return /* @__PURE__ */ jsx("div", {
+        className: dropdownSelect_module_default.search_border,
+        children: /* @__PURE__ */ jsx("input", {
+            placeholder: "Search",
+            className: dropdownSelect_module_default.search,
+            id: "search",
+            name: "search",
+            onChange: function(e) {
+                return onSearch(options.filter(function(ele) {
+                    return ele.value.toLowerCase().includes(e.target.value.toLowerCase());
+                }));
+            }
+        })
+    });
+};
+var Search_default = Search;
+// src/components/DropdownSelect/Dropdown.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var Dropdown = function() {
+    var _useMyContext = useMyContext(), options = _useMyContext.options, onChange = _useMyContext.onChange, setOpen = _useMyContext.setOpen;
+    var _useState = _sliced_to_array(useState(true), 2), isVisible = _useState[0], setVisible = _useState[1];
+    var _useState1 = _sliced_to_array(useState(options), 2), optionsCopy = _useState1[0], setOption = _useState1[1];
+    var dropdownRef = useRef(null);
+    var handleResize = function() {
+        var dropdown = dropdownRef.current;
+        var dimension = dropdown.getBoundingClientRect();
+        var distanceToBottom = window.innerHeight - dimension.bottom;
+        var distanceToTop = dimension.top;
+        if (distanceToBottom < 0) {
+            setVisible(false);
+        }
+        if (distanceToTop < 0) {
+            setVisible(true);
+        }
+    };
+    useEffect(function() {
+        handleResize();
+        window.addEventListener("scroll", handleResize);
+        return function() {
+            window.removeEventListener("scroll", handleResize);
+        };
+    }, []);
+    return /* @__PURE__ */ jsxs("div", {
+        className: dropdownSelect_module_default.dropdown,
+        ref: dropdownRef,
+        style: isVisible ? {
+            top: "calc(100% + 5px)"
+        } : {
+            bottom: "calc(100% + 5px)"
+        },
+        children: [
+            /* @__PURE__ */ jsx2(Search_default, {
+                options: options,
+                onSearch: setOption
+            }),
+            optionsCopy.map(function(option, key) {
+                return /* @__PURE__ */ jsx2("div", {
+                    className: dropdownSelect_module_default.element,
+                    onClick: function() {
+                        onChange(option.value);
+                        setOpen(function(prev) {
+                            return !prev;
+                        });
+                    },
+                    children: option.label
+                }, key);
+            })
+        ]
+    });
+};
+var Dropdown_default = Dropdown;
+// src/components/DropdownSelect/DropdownSelect.tsx
+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 _useState2 = _sliced_to_array(useState2(false), 2), open = _useState2[0], setOpen = _useState2[1];
+    var selectRef = useRef2(null);
+    var clickHandler = function(e) {
+        var select = selectRef.current;
+        if (!select.contains(e.target)) {
+            setOpen(false);
+        }
+    };
+    useEffect2(function() {
+        window.addEventListener("click", clickHandler);
+        return function() {
+            return window.removeEventListener("click", clickHandler);
+        };
+    }, []);
+    return /* @__PURE__ */ jsx3(MyContext.Provider, {
+        value: {
+            options: options,
+            value: value,
+            onChange: onChange,
+            setOpen: setOpen
+        },
+        children: /* @__PURE__ */ jsxs2("div", {
+            style: {
+                width: "".concat(width, "px"),
+                position: "relative"
+            },
+            ref: selectRef,
+            children: [
+                /* @__PURE__ */ jsxs2("div", {
+                    className: dropdownSelect_module_default.select_box,
+                    onClick: function() {
+                        return setOpen(function(prev) {
+                            return !prev;
+                        });
+                    },
+                    children: [
+                        /* @__PURE__ */ jsx3("div", {
+                            className: dropdownSelect_module_default.value,
+                            children: value
+                        }),
+                        /* @__PURE__ */ jsx3("div", {
+                            className: dropdownSelect_module_default.close,
+                            title: "clear",
+                            onClick: function() {
+                                onChange("");
+                                setOpen(function(prev) {
+                                    return !prev;
+                                });
+                            },
+                            children: /* @__PURE__ */ jsx3(IoMdClose, {})
+                        })
+                    ]
+                }),
+                open && /* @__PURE__ */ jsx3(Dropdown_default, {})
+            ]
+        })
+    });
+};
+var DropdownSelect_default = DropdownSelect;
+// src/components/RangeSlider/RangeSlider.tsx
+import { useEffect as useEffect3, useRef as useRef3, useState as useState3 } from "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));
+}
+function decode(percent, min, max) {
+    return Math.round(parseInt(min) + percent * (parseInt(max) - parseInt(min)));
+}
+// src/components/RangeSlider/RangeSlider.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var RangeSlider = function(param) {
+    var _param_min = param.min, min = _param_min === void 0 ? "0" : _param_min, _param_max = param.max, max = _param_max === void 0 ? "100" : _param_max, _param_color = param.color, color = _param_color === void 0 ? "#f0f0f7" : _param_color, _param_width = param.width, width = _param_width === void 0 ? "200" : _param_width, value = param.value, onChange = param.onChange;
+    var percentage = encode(value, min, max);
+    var sliderBorderRef = useRef3(null);
+    var _useState3 = _sliced_to_array(useState3(false), 2), isMouseDown = _useState3[0], setMouseDown = _useState3[1];
+    var _useState31 = _sliced_to_array(useState3(false), 2), isHover = _useState31[0], setHover = _useState31[1];
+    var handleDrag = function(isClicked, e) {
+        if (!isMouseDown && !isClicked) return;
+        var sliderBorder = sliderBorderRef.current;
+        var dimension = sliderBorder.getBoundingClientRect();
+        var clientX;
+        if ("touches" in e) {
+            clientX = e.touches[0].clientX;
+        } else {
+            clientX = e.clientX;
+        }
+        percentage = (clientX - dimension.left) / dimension.width;
+        var currentValue = decode(percentage, min, max);
+        if (currentValue > parseInt(max)) {
+            currentValue = parseInt(max);
+        }
+        if (currentValue < parseInt(min)) {
+            currentValue = parseInt(min);
+        }
+        onChange(currentValue.toString());
+    };
+    useEffect3(function() {
+        var handleMove = function(e) {
+            if (e.type === "touchmove") {
+                e.preventDefault();
+            }
+            handleDrag(false, e);
+        };
+        var handleMouseUp = function() {
+            setMouseDown(false);
+        };
+        if (isMouseDown) {
+            document.addEventListener("mousemove", handleMove);
+            document.addEventListener("mouseup", handleMouseUp);
+            document.addEventListener("touchmove", handleMove, {
+                passive: false
+            });
+            document.addEventListener("touchend", handleMouseUp);
+        }
+        return function() {
+            document.removeEventListener("mousemove", handleMove);
+            document.removeEventListener("mouseup", handleMouseUp);
+            document.removeEventListener("touchmove", handleMove);
+            document.removeEventListener("touchend", handleMouseUp);
+        };
+    }, [
+        isMouseDown
+    ]);
+    return /* @__PURE__ */ jsxs3("div", {
+        className: rangeSlider_module_default.slider_border,
+        style: {
+            width: "".concat(width, "px")
+        },
+        onMouseDown: function(e) {
+            handleDrag(true, e);
+            setMouseDown(true);
+        },
+        onTouchStart: function(e) {
+            handleDrag(true, e);
+            setMouseDown(true);
+        },
+        ref: sliderBorderRef,
+        children: [
+            /* @__PURE__ */ jsx4("span", {
+                className: rangeSlider_module_default.fill,
+                style: {
+                    background: color,
+                    width: "".concat(percentage, "%")
+                }
+            }),
+            /* @__PURE__ */ jsxs3("span", {
+                className: rangeSlider_module_default.thumb,
+                style: {
+                    background: color,
+                    left: "".concat(percentage, "%")
+                },
+                onMouseMove: function() {
+                    return setHover(true);
+                },
+                onMouseLeave: function() {
+                    return setHover(false);
+                },
+                children: [
+                    /* @__PURE__ */ jsx4("span", {
+                        className: rangeSlider_module_default.value,
+                        style: {
+                            scale: isMouseDown || isHover ? "1" : "0"
+                        },
+                        children: value
+                    }),
+                    /* @__PURE__ */ jsx4("span", {
+                        className: rangeSlider_module_default.thumb_shadow,
+                        style: {
+                            background: color,
+                            scale: isMouseDown || isHover ? "1" : "0"
+                        }
+                    })
+                ]
+            }),
+            /* @__PURE__ */ jsx4("span", {
+                className: rangeSlider_module_default.rest,
+                style: {
+                    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/OptionSlider.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "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__ */ jsxs4("div", {
+        className: optionSlider_module_default.border,
+        style: {
+            width: "".concat(width, "px")
+        },
+        children: [
+            /* @__PURE__ */ jsx5("div", {
+                className: optionSlider_module_default.background,
+                style: {
+                    background: color
+                }
+            }),
+            /* @__PURE__ */ jsx5("div", {
+                className: optionSlider_module_default.options,
+                children: options.map(function(option, key) {
+                    return /* @__PURE__ */ jsx5("div", {
+                        style: {
+                            background: color,
+                            border: value === option.value ? "solid 2px #000" : "solid 1px #000"
+                        },
+                        className: optionSlider_module_default.element,
+                        onClick: function() {
+                            return onChange(option.value);
+                        },
+                        title: option.value,
+                        children: option.label
+                    }, key);
+                })
+            })
+        ]
+    });
+};
+var OptionSlider_default = OptionSlider;
+// src/components/ColorPickerSlider/ColorPickerSlider.tsx
+import { useEffect as useEffect4, useRef as useRef4, useState as useState4 } from "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;
+    return h * 100 / 360;
+}
+function decode2(percent) {
+    return hslToHex(percent * 360, 100, 50);
+}
+function hexToHsl(hex) {
+    if (hex.length === 7) {
+        hex = hex.substring(1);
+    }
+    var r = parseInt(hex.substring(0, 2), 16) / 255;
+    var g = parseInt(hex.substring(2, 4), 16) / 255;
+    var b = parseInt(hex.substring(4, 6), 16) / 255;
+    var cmax = Math.max(r, g, b);
+    var cmin = Math.min(r, g, b);
+    var delta = cmax - cmin;
+    var h = 0;
+    var s = 0;
+    var l = (cmax + cmin) / 2;
+    if (delta !== 0) {
+        s = delta / (1 - Math.abs(2 * l - 1));
+        if (cmax === r) {
+            h = (g - b) / delta;
+        } else if (cmax === g) {
+            h = (b - r) / delta + 2;
+        } else {
+            h = (r - g) / delta + 4;
+        }
+        h = h * 60;
+        if (h < 0) {
+            h += 360;
+        }
+    }
+    return {
+        h: Math.round(h),
+        s: Math.round(s * 100),
+        l: Math.round(l * 100)
+    };
+}
+function hslToHex(h, s, l) {
+    s /= 100;
+    l /= 100;
+    var c = (1 - Math.abs(2 * l - 1)) * s;
+    var x = c * (1 - Math.abs(h / 60 % 2 - 1));
+    var m = l - c / 2;
+    var r_prime = 0;
+    var g_prime = 0;
+    var b_prime = 0;
+    var sector = h / 60;
+    if (sector >= 0 && sector < 1) {
+        var ref;
+        ref = [
+            c,
+            x,
+            0
+        ], r_prime = ref[0], g_prime = ref[1], b_prime = ref[2], ref;
+    } else if (sector >= 1 && sector < 2) {
+        var ref1;
+        ref1 = [
+            x,
+            c,
+            0
+        ], r_prime = ref1[0], g_prime = ref1[1], b_prime = ref1[2], ref1;
+    } else if (sector >= 2 && sector < 3) {
+        var ref2;
+        ref2 = [
+            0,
+            c,
+            x
+        ], r_prime = ref2[0], g_prime = ref2[1], b_prime = ref2[2], ref2;
+    } else if (sector >= 3 && sector < 4) {
+        var ref3;
+        ref3 = [
+            0,
+            x,
+            c
+        ], r_prime = ref3[0], g_prime = ref3[1], b_prime = ref3[2], ref3;
+    } else if (sector >= 4 && sector < 5) {
+        var ref4;
+        ref4 = [
+            x,
+            0,
+            c
+        ], r_prime = ref4[0], g_prime = ref4[1], b_prime = ref4[2], ref4;
+    } else if (sector >= 5 && sector < 6) {
+        var ref5;
+        ref5 = [
+            c,
+            0,
+            x
+        ], r_prime = ref5[0], g_prime = ref5[1], b_prime = ref5[2], ref5;
+    }
+    var r = Math.round((r_prime + m) * 255);
+    var g = Math.round((g_prime + m) * 255);
+    var b = Math.round((b_prime + m) * 255);
+    var toHex = function(c2) {
+        var hex = c2.toString(16).toUpperCase();
+        return hex.length === 1 ? "0" + hex : hex;
+    };
+    return "#".concat(toHex(r)).concat(toHex(g)).concat(toHex(b));
+}
+// src/components/ColorPickerSlider/ColorPickerSlider.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var ColorPickerSlider = function(param) {
+    var value = param.value, onChange = param.onChange, _param_width = param.width, width = _param_width === void 0 ? "200" : _param_width;
+    var percentage = encode2(value);
+    var sliderBorderRef = useRef4(null);
+    var _useState4 = _sliced_to_array(useState4(false), 2), isMouseDown = _useState4[0], setMouseDown = _useState4[1];
+    var _useState41 = _sliced_to_array(useState4(false), 2), isHover = _useState41[0], setHover = _useState41[1];
+    var handleDrag = function(isClicked, e) {
+        if (!isMouseDown && !isClicked) return;
+        var sliderBorder = sliderBorderRef.current;
+        var dimension = sliderBorder.getBoundingClientRect();
+        var clientX;
+        if ("touches" in e) {
+            clientX = e.touches[0].clientX;
+        } else {
+            clientX = e.clientX;
+        }
+        percentage = (clientX - dimension.left) / dimension.width;
+        if (percentage < 0) percentage = 0;
+        if (percentage > 1) percentage = 0.99;
+        onChange(decode2(percentage));
+    };
+    useEffect4(function() {
+        var handleMove = function(e) {
+            if (e.type === "touchmove") {
+                e.preventDefault();
+            }
+            handleDrag(false, e);
+        };
+        var handleMouseUp = function() {
+            setMouseDown(false);
+        };
+        if (isMouseDown) {
+            document.addEventListener("mousemove", handleMove);
+            document.addEventListener("mouseup", handleMouseUp);
+            document.addEventListener("touchmove", handleMove, {
+                passive: false
+            });
+            document.addEventListener("touchend", handleMouseUp);
+        }
+        return function() {
+            document.removeEventListener("mousemove", handleMove);
+            document.removeEventListener("mouseup", handleMouseUp);
+            document.removeEventListener("touchmove", handleMove);
+            document.removeEventListener("touchend", handleMouseUp);
+        };
+    }, [
+        isMouseDown
+    ]);
+    return /* @__PURE__ */ jsxs5("div", {
+        className: colorPickerSlider_module_default.border,
+        style: {
+            width: "".concat(width, "px")
+        },
+        onMouseDown: function(e) {
+            handleDrag(true, e);
+            setMouseDown(true);
+        },
+        onTouchStart: function(e) {
+            handleDrag(true, e);
+            setMouseDown(true);
+        },
+        ref: sliderBorderRef,
+        children: [
+            /* @__PURE__ */ jsx6("div", {
+                className: colorPickerSlider_module_default.thumb,
+                style: {
+                    width: "".concat(parseInt(width) * 0.1, "px"),
+                    background: value,
+                    left: "".concat(percentage, "%")
+                },
+                onMouseMove: function() {
+                    return setHover(true);
+                },
+                onMouseLeave: function() {
+                    return setHover(false);
+                }
+            }),
+            /* @__PURE__ */ jsx6("div", {
+                className: colorPickerSlider_module_default.label,
+                style: {
+                    left: "".concat(percentage, "%"),
+                    scale: isHover || isMouseDown ? "1" : "0"
+                },
+                children: value
+            })
+        ]
+    });
+};
+var ColorPickerSlider_default = ColorPickerSlider;
+export { ColorPickerSlider_default as ColorPickerSlider, DropdownSelect_default as DropdownSelect, OptionSlider_default as OptionSlider, RangeSlider_default as RangeSlider };

package/index.ts

@@ -0,0 +1,13 @@
+// DropSelect component
+export { default as DropdownSelect } from './src/components/DropdownSelect/DropdownSelect';
+export type { Options } from './src/components/DropdownSelect/DropdownSelect';
+
+// RangeSlider component
+export { default as RangeSlider } from './src/components/RangeSlider/RangeSlider';
+
+// OptionSlider component
+export { default as OptionSlider } from './src/components/OptionSlider/OptionSlider';
+export type { Options as SliderOptions } from './src/components/OptionSlider/OptionSlider';
+
+// ColorPickerSlider
+export { default as ColorPickerSlider } from './src/components/ColorPickerSlider/ColorPickerSlider';

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@willphan1712000/frontend",
+  "version": "1.0.0",
+  "description": "Frontend Library",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "watch": "tsup --watch",
+    "build": "tsup"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@swc/core": "^1.13.5",
+    "@testing-library/jest-dom": "^6.9.0",
+    "@testing-library/react": "^16.3.0",
+    "@types/jest": "^27.5.2",
+    "@types/node": "^16.18.126",
+    "@types/react": "^19.1.16",
+    "@types/react-dom": "^19.1.9",
+    "esbuild-plugin-css-module": "^0.1.0",
+    "esbuild-plugin-react18-css": "^0.0.4",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "ts-loader": "^9.5.4",
+    "tsup": "^8.5.0",
+    "typescript": "^5.9.3",
+    "web-vitals": "^5.1.0"
+  },
+  "dependencies": {
+    "react-icons": "^5.5.0"
+  }
+}

package/public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>