pixelize-design-library 1.1.66 → 1.1.70

package/dist/Pages/accordion.js

@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var Accordion_1 = __importDefault(require("../Components/Accordion/Accordion"));
 var react_2 = require("@chakra-ui/react");
-var fa_1 = require("react-icons/fa");
+var lucide_react_1 = require("lucide-react");
 var Accordions = function () {
     return (react_1.default.createElement("div", null,
         react_1.default.createElement(Accordion_1.default, { allowToggle: true, items: [
                 {
                     header: (react_1.default.createElement(react_1.default.Fragment, null,
                         react_1.default.createElement(react_2.Box, { as: "span", flex: "1", textAlign: "left" }, "Section 1 title"),
-                        react_1.default.createElement(fa_1.FaChevronDown, { style: { marginRight: "8px" } }))),
+                        react_1.default.createElement(lucide_react_1.ChevronDown, { style: { marginRight: "8px" } }))),
                     content: (react_1.default.createElement("div", null,
                         react_1.default.createElement(react_2.Text, null, "This is text inside Section 1."),
                         react_1.default.createElement(react_2.Box, { bg: "gray.200", p: 4, mt: 2 }, "This is a box with more content inside Section 1."),
@@ -29,7 +29,7 @@ var Accordions = function () {
                 {
                     header: (react_1.default.createElement(react_1.default.Fragment, null,
                         react_1.default.createElement(react_2.Box, { as: "span", flex: "1", textAlign: "left" }, "Section 1 title"),
-                        react_1.default.createElement(fa_1.FaChevronDown, { style: { marginRight: "8px" } }))),
+                        react_1.default.createElement(lucide_react_1.ChevronDown, { style: { marginRight: "8px" } }))),
                     content: (react_1.default.createElement("div", null,
                         react_1.default.createElement(react_2.Text, null, "This is text inside Section 1."),
                         react_1.default.createElement(react_2.Box, { bg: "gray.200", p: 4, mt: 2 }, "This is a box with more content inside Section 1."),

package/dist/Pages/button.js

@@ -5,14 +5,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var ButtonGroupIcon_1 = __importDefault(require("../Components/ButtonGroupIcon/ButtonGroupIcon"));
-var fi_1 = require("react-icons/fi");
 var Button_1 = __importDefault(require("../Components/Button/Button"));
+var lucide_react_1 = require("lucide-react");
 var ButtonPage = function () {
     return (react_1.default.createElement("div", null,
-        react_1.default.createElement(ButtonGroupIcon_1.default, { buttonText: "hello", rightIcon: react_1.default.createElement(fi_1.FiHome, null), leftIcon: react_1.default.createElement(fi_1.FiHome, null), size: "md", variant: "solid", 
+        react_1.default.createElement(ButtonGroupIcon_1.default, { buttonText: "hello", rightIcon: react_1.default.createElement(lucide_react_1.House, null), leftIcon: react_1.default.createElement(lucide_react_1.House, null), size: "md", variant: "solid", 
             // color="red"
             rightIconDropdown: true, dropdownOptions: [
-                { label: "123", id: "1", image: react_1.default.createElement(fi_1.FiHome, { style: { marginRight: "20px" } }) },
+                { label: "123", id: "1", image: react_1.default.createElement(lucide_react_1.House, { style: { marginRight: "20px" } }) },
                 { label: "456", id: "2" }
             ], onDropdownOptionClick: function (e, option) {
                 console.log(e, option);

package/dist/Pages/dropdown.js

@@ -5,19 +5,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var DropDown_1 = __importDefault(require("../Components/Dropdown/DropDown"));
-var fi_1 = require("react-icons/fi");
+var lucide_react_1 = require("lucide-react");
 var DropdownPage = function () {
     var exportOptionss = [
         { id: 1, label: "Upload file" },
-        { id: 2, label: "Documents", image: fi_1.FiChevronUp },
-        { id: 3, label: "CRM workDrive", image: fi_1.FiChevronUp },
-        { id: 4, label: "Other Cloud Drives", image: fi_1.FiChevronUp },
-        { id: 5, label: "Link(URL)", image: fi_1.FiChevronUp },
+        { id: 2, label: "Documents", image: lucide_react_1.ChevronUp },
+        { id: 3, label: "CRM workDrive", image: lucide_react_1.ChevronUp },
+        { id: 4, label: "Other Cloud Drives", image: lucide_react_1.ChevronUp },
+        { id: 5, label: "Link(URL)", image: lucide_react_1.ChevronUp },
     ];
     return (react_1.default.createElement("div", null,
         react_1.default.createElement(DropDown_1.default, { ButtonText: "hello", optionsSize: "sm", options: exportOptionss, 
             // dropDownButtonStyle={{ color: "red" }}
-            DropdownIcon: react_1.default.createElement(fi_1.FiMoreHorizontal, { color: "gray.500" }), dropdownType: "button", handleOptionSelect: function (id, label) {
+            DropdownIcon: react_1.default.createElement(lucide_react_1.Ellipsis, { color: "gray.500" }), dropdownType: "button", handleOptionSelect: function (id, label) {
                 console.log("optionid", id, label);
             }, buttonProps: { variant: "solid", colorScheme: "red" }, isVisibleIconShow: true, divider: true })));
 };

package/dist/Pages/input.js

@@ -5,16 +5,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var TextInput_1 = __importDefault(require("../Components/Input/TextInput"));
-var fi_1 = require("react-icons/fi");
+var lucide_react_1 = require("lucide-react");
 var InputPage = function () {
     return (react_1.default.createElement("div", null,
         react_1.default.createElement(TextInput_1.default, { label: "My Label", id: "hello", name: "hello", 
             //helperText="Hello"
             //errorMessage="Required"
             //error={true}
-            type: "text", inputRightIcon: react_1.default.createElement(fi_1.FiUser, { color: "gray.300" }), onRightIconclick: function () {
+            type: "text", inputRightIcon: react_1.default.createElement(lucide_react_1.User, { color: "gray.300" }), onRightIconclick: function () {
                 console.log("icon click");
-            }, inputLeftIcon: react_1.default.createElement(fi_1.FiUser, { color: "gray.300" }), onLeftIconClick: function () {
+            }, inputLeftIcon: react_1.default.createElement(lucide_react_1.User, { color: "gray.300" }), onLeftIconClick: function () {
                 console.log("icon click");
             }, key: "input", 
             // border={"0px solid"}

package/dist/Pages/selectSearch.js

@@ -28,7 +28,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var SelectSearch_1 = __importDefault(require("../Components/SelectSearch/SelectSearch"));
-var fi_1 = require("react-icons/fi");
+var lucide_react_1 = require("lucide-react");
 var SelectSearchs = function () {
     var _a = (0, react_1.useState)("Option 1"), selectSearchText = _a[0], setSelectSearchText = _a[1];
     var _b = (0, react_1.useState)({ id: "1", label: "Option 1" }), selectedOption = _b[0], setSelectedOption = _b[1];
@@ -45,7 +45,7 @@ var SelectSearchs = function () {
                     console.log(value);
                 }, initialSelectedOption: selectedOption, onOptionSelect: function (data) {
                     setSelectSearchText(data.label);
-                }, name: "hai", label: "SelectSearch", searchQuery: selectSearchText, rightIcon: react_1.default.createElement(fi_1.FiUser, { color: "gray.300" }), isMultipleSelect: false, onOptionMultiSelect: function (data) {
+                }, name: "hai", label: "SelectSearch", searchQuery: selectSearchText, rightIcon: react_1.default.createElement(lucide_react_1.User, { color: "gray.300" }), isMultipleSelect: false, onOptionMultiSelect: function (data) {
                     setSelectedOption(data);
                 } })),
         react_1.default.createElement("br", null),
@@ -65,7 +65,7 @@ var SelectSearchs = function () {
                 // onOptionSelect={(data) => {
                 //   setMultiSelectSearchText(data.label);
                 // }}
-                name: "hai", label: "MultiSelectSearch", searchQuery: multiSelectSearchText, rightIcon: react_1.default.createElement(fi_1.FiUser, { color: "gray.300" }), isMultipleSelect: true, onOptionMultiSelect: function (data) {
+                name: "hai", label: "MultiSelectSearch", searchQuery: multiSelectSearchText, rightIcon: react_1.default.createElement(lucide_react_1.User, { color: "gray.300" }), isMultipleSelect: true, onOptionMultiSelect: function (data) {
                     setMultiSelectedOption(data);
                 } }))));
 };

package/dist/Theme/Default/fonts.d.ts

@@ -0,0 +1,35 @@
+import "@fontsource/ubuntu-sans";
+declare const fontOptions: {
+    fonts: {
+        body: string;
+        heading: string;
+        mono: string;
+    };
+    fontSizes: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+        "3xl": string;
+        "4xl": string;
+        "5xl": string;
+        "6xl": string;
+        "7xl": string;
+        "8xl": string;
+        "9xl": string;
+    };
+    fontWeights: {
+        hairline: number;
+        thin: number;
+        light: number;
+        normal: number;
+        medium: number;
+        semibold: number;
+        bold: number;
+        extrabold: number;
+        black: number;
+    };
+};
+export default fontOptions;

package/dist/Theme/Default/fonts.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("@fontsource/ubuntu-sans");
+var fontOptions = {
+    fonts: {
+        body: "Ubuntu Sans, serif",
+        heading: "Ubuntu Sans, serif",
+        mono: "Ubuntu Sans, monospace",
+    },
+    fontSizes: {
+        xs: "0.75rem",
+        sm: "0.875rem",
+        md: "1rem",
+        lg: "1.125rem",
+        xl: "1.25rem",
+        "2xl": "1.5rem",
+        "3xl": "1.875rem",
+        "4xl": "2.25rem",
+        "5xl": "3rem",
+        "6xl": "3.75rem",
+        "7xl": "4.5rem",
+        "8xl": "6rem",
+        "9xl": "8rem",
+    },
+    fontWeights: {
+        hairline: 100,
+        thin: 200,
+        light: 300,
+        normal: 400,
+        medium: 500,
+        semibold: 600,
+        bold: 700,
+        extrabold: 800,
+        black: 900,
+    },
+};
+exports.default = fontOptions;

package/package.json

@@ -1,22 +1,20 @@
 {
   "name": "pixelize-design-library",
-  "version": "1.1.66",
+  "version": "1.1.70",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@chakra-ui/icons": "^2.1.1",
     "@chakra-ui/react": "^2.8.2",
     "@fontsource-variable/inter": "^5.1.0",
-    "apexcharts": "^3.49.1",
     "framer-motion": "^11.2.2",
     "jodit-react": "^4.1.2",
+    "lucide-react": "^0.487.0",
     "react": "^18.3.1",
     "react-apexcharts": "^1.4.1",
     "react-datepicker": "^7.3.0",
     "react-dom": "^18.3.1",
-    "react-icons": "^5.2.1",
     "react-scripts": "^5.0.1"
   },
   "scripts": {
@@ -63,8 +61,8 @@
     "path": "^0.12.7",
     "prettier": "^3.3.2",
     "prop-types": "^15.8.1",
-    "webpack": "^5.91.0",
-    "typescript": "^4.9.5"
+    "typescript": "^4.9.5",
+    "webpack": "^5.91.0"
   },
   "husky": {
     "hooks": {

package/.github/workflows/build.yml

@@ -1,31 +0,0 @@
-name: Check Build on PR
-
-# Trigger the workflow when a pull request is raised against the develop branch
-on:
-  pull_request:
-    branches:
-      - develop
-
-# Define the job to run the build
-jobs:
-  check-build:
-    runs-on: ubuntu-latest
-
-    steps:
-    # Check out the code from the repository
-    - name: Checkout code
-      uses: actions/checkout@v3
-
-    # Set up Node.js environment
-    - name: Set up Node.js
-      uses: actions/setup-node@v3
-      with:
-        node-version: '18'  # Specify your required Node.js version
-
-    # Install npm dependencies
-    - name: Install dependencies
-      run: npm install
-
-    # Run the build script
-    - name: Run build
-      run: npm run build

package/dist/Components/Table/Utils/functions.d.ts

@@ -1,3 +0,0 @@
-import { DataObject } from "../TableProps";
-export declare const searchAndSortData: (data: DataObject[], searchValues: Record<string, string>) => DataObject[];
-export declare function debounce<T extends (...args: any[]) => void>(func: T, delay: number): (...args: Parameters<T>) => void;

package/dist/Components/Table/Utils/functions.js

@@ -1,46 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.debounce = exports.searchAndSortData = void 0;
-var searchAndSortData = function (data, searchValues) {
-    var filteredData = data.filter(function (item) {
-        return Object.keys(searchValues).every(function (key) {
-            var searchValue = searchValues[key].toLowerCase();
-            return item[key].toString().toLowerCase().includes(searchValue);
-        });
-    });
-    return filteredData.sort(function (a, b) {
-        var aMatchCount = 0;
-        var bMatchCount = 0;
-        Object.keys(searchValues).forEach(function (key) {
-            var searchValue = searchValues[key].toLowerCase();
-            if (a[key] && a[key].toString().toLowerCase() === searchValue) {
-                aMatchCount++;
-            }
-            if (b[key] && b[key].toString().toLowerCase() === searchValue) {
-                bMatchCount++;
-            }
-            if (a[key] && a[key].toString().toLowerCase().includes(searchValue)) {
-                aMatchCount += 0.5;
-            }
-            if (b[key] && b[key].toString().toLowerCase().includes(searchValue)) {
-                bMatchCount += 0.5;
-            }
-        });
-        return bMatchCount - aMatchCount;
-    });
-};
-exports.searchAndSortData = searchAndSortData;
-function debounce(func, delay) {
-    var timer;
-    return function () {
-        var args = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            args[_i] = arguments[_i];
-        }
-        clearTimeout(timer);
-        timer = setTimeout(function () {
-            func.apply(void 0, args);
-        }, delay);
-    };
-}
-exports.debounce = debounce;

package/dist/Pages/katable.d.ts

@@ -1,3 +0,0 @@
-import React from "react";
-declare const katable: () => React.JSX.Element;
-export default katable;

package/dist/Pages/katable.js

@@ -1,194 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var KaTable_1 = __importDefault(require("../Components/KaTable/KaTable"));
-var KaTable_2 = require("../Components/KaTable/KaTable");
-var icons_1 = require("@chakra-ui/icons");
-var katable = function () {
-    var DataType = KaTable_2.TableEnums.DataType;
-    var dataArray = Array(50)
-        .fill(undefined)
-        .map(function (_, index) { return ({
-        column1: index % 2 === 0,
-        column2: "column:2 row:".concat(index + 1),
-        column3: index + 5,
-        column4: index + 10,
-        column5: index + 15,
-        column6: index + 20,
-        column7: index + 25,
-        column8: index + 30,
-        column9: index + 35,
-        column10: index + 40,
-        column11: index + 45,
-        column12: index + 50,
-        column13: index + 55,
-        column14: index + 60,
-        column15: new Date(2022, 11, index),
-        id: index + 1,
-    }); });
-    var columns = [
-        {
-            key: "column1",
-            title: "Column 1",
-            dataType: DataType.Boolean,
-            width: 150,
-            columnFreeze: true,
-            customHeader: false,
-        },
-        {
-            key: "column2",
-            title: "Column 2",
-            dataType: DataType.String,
-            width: 150,
-        },
-        {
-            key: "column3",
-            title: "Column 3",
-            dataType: DataType.Number,
-            width: 150,
-        },
-        {
-            key: "column4",
-            title: "Column 4",
-            dataType: DataType.Number,
-            width: 150,
-        },
-        {
-            key: "column5",
-            title: "Column 5",
-            dataType: DataType.Number,
-            width: 150,
-        },
-        {
-            key: "column6",
-            title: "Column 6",
-            dataType: DataType.Number,
-            width: 150,
-        },
-        {
-            key: "column7",
-            title: "Column 7",
-            dataType: DataType.Number,
-            width: 150,
-        },
-        {
-            key: "column8",
-            title: "Column 8",
-            dataType: DataType.Number,
-            width: 150,
-        },
-        {
-            key: "column9",
-            title: "Column 9",
-            dataType: DataType.Number,
-            width: 150,
-        },
-        {
-            key: "column10",
-            title: "Column 10",
-            dataType: DataType.Number,
-            width: 150,
-        },
-        {
-            key: "column11",
-            title: "Column 11",
-            dataType: DataType.Number,
-            width: 150,
-        },
-        {
-            key: "column12",
-            title: "Column 12",
-            dataType: DataType.Number,
-            width: 150,
-        },
-        {
-            key: "column13",
-            title: "Column 13",
-            dataType: DataType.Number,
-            width: 150,
-        },
-        {
-            key: "column14",
-            title: "Column 14",
-            dataType: DataType.Number,
-            width: 150,
-        },
-        {
-            key: "column15",
-            title: "Column 15",
-            dataType: DataType.Date,
-            width: 150,
-        },
-        {
-            key: "editColumn",
-            width: 80,
-            customHeader: false,
-        },
-    ];
-    var kaTableFormat = function (props) {
-        if (props.column.dataType === DataType.Date) {
-            return (props.value &&
-                props.value.toLocaleDateString("en", {
-                    month: "2-digit",
-                    day: "2-digit",
-                    year: "numeric",
-                }));
-        }
-    };
-    var EditButton = function (_a) {
-        var dispatch = _a.dispatch, rowKeyValue = _a.rowKeyValue;
-        return (react_1.default.createElement("div", { className: "edit-cell-button" },
-            react_1.default.createElement(icons_1.EditIcon, null),
-            react_1.default.createElement(icons_1.DeleteIcon, null)));
-    };
-    var handleSortChange = function (newSortState, columnName) {
-        console.log("Sort state for ".concat(columnName, " changed to:"), newSortState);
-    };
-    var handleMenuItemClick = function (action, columnName) {
-        console.log("Menu item clicked for ".concat(columnName, ":"), action);
-    };
-    var menuItems = [
-        { label: "Sort", action: "Sort" },
-        { label: "Hide column", action: "Hide column" },
-        {
-            label: "Filter",
-            submenu: [
-                { label: "Filter by Date", action: "Filter by Date" },
-                { label: "Filter by Name", action: "Filter by Name" },
-                { label: "Filter by Status", action: "Filter by Status" },
-            ],
-        },
-    ];
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement(KaTable_1.default, { data: dataArray, columns: columns, checkSelect: true, onRowClick: function (rowKeyValue) {
-                console.log("Row clicked", rowKeyValue);
-            }, onSelectionChange: function (selectedRows) {
-                console.log("Selected rows:", selectedRows);
-            }, menuItems: menuItems, onSortChange: handleSortChange, onMenuItemClick: handleMenuItemClick, format: kaTableFormat, childComponents: {
-                cellText: {
-                    content: function (props) {
-                        if (props.column.key === "editColumn") {
-                            return react_1.default.createElement(EditButton, __assign({}, props));
-                        }
-                    },
-                },
-            }, loading: {
-                enabled: false,
-                text: "Loading data",
-            } })));
-};
-exports.default = katable;

package/dist/Utils/common.d.ts

@@ -1,7 +0,0 @@
-export declare function SortMultiColumnData(data: Record<string, any>[], sortConfig: {
-    column: string;
-    direction: string;
-}[]): Record<string, any>[];
-export declare const getPreviousColumnWidth: (columns: any, key: any) => any;
-export declare const getFieldType: (header: string, data: any) => "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function";
-export declare const calculateLeftOffset: (columns: number[], index: number) => number;

package/dist/Utils/common.js

@@ -1,64 +0,0 @@
-"use strict";
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.calculateLeftOffset = exports.getFieldType = exports.getPreviousColumnWidth = exports.SortMultiColumnData = void 0;
-function SortMultiColumnData(data, sortConfig) {
-    if (!sortConfig.length)
-        return data;
-    return __spreadArray([], data, true).sort(function (a, b) {
-        for (var _i = 0, sortConfig_1 = sortConfig; _i < sortConfig_1.length; _i++) {
-            var _a = sortConfig_1[_i], column = _a.column, direction = _a.direction;
-            if (direction === "none") {
-                continue;
-            }
-            var dirMultiplier = direction === "asc" ? 1 : -1;
-            // Compare values for the current column
-            if (a[column] < b[column])
-                return -1 * dirMultiplier;
-            if (a[column] > b[column])
-                return 1 * dirMultiplier;
-            // If values are equal, continue to the next sorting rule
-        }
-        return 0; // Return 0 if all sort conditions are equal
-    });
-}
-exports.SortMultiColumnData = SortMultiColumnData;
-var getPreviousColumnWidth = function (columns, key) {
-    var index = columns === null || columns === void 0 ? void 0 : columns.findIndex(function (column) { return column.key === key; });
-    if (index > 0) {
-        return columns[index - 1].width;
-    }
-    return 0;
-};
-exports.getPreviousColumnWidth = getPreviousColumnWidth;
-// export function calculateLeftOffset(columns: any, currentIndex: number) {
-//   let offset = 0;
-//   for (let i = 0; i < currentIndex; i++) {
-//     if (columns[i].isFreeze) {
-//       offset += columns[i].width || 100;
-//     }
-//   }
-//   return offset;
-// }
-var getFieldType = function (header, data) {
-    for (var _i = 0, data_1 = data; _i < data_1.length; _i++) {
-        var row = data_1[_i];
-        if (row[header] !== null) {
-            return typeof row[header];
-        }
-    }
-    return "string";
-};
-exports.getFieldType = getFieldType;
-var calculateLeftOffset = function (columns, index) {
-    return columns.slice(0, index).reduce(function (sum, width) { return sum + width; }, 0);
-};
-exports.calculateLeftOffset = calculateLeftOffset;

package/webpack.config.js

@@ -1,48 +0,0 @@
-/* eslint-disable */
-const path = require("path");
-module.exports = {
-  // Entry point of your application
-  entry: "./src/index.ts",
-  // Development mode for better debugging
-  mode: "development",
-  module: {
-    rules: [
-      // TypeScript loader
-      {
-        test: /\.tsx?$/,
-        use: "ts-loader",
-        exclude: /node_modules/,
-      },
-      // CSS loader
-      {
-        test: /\.css$/,
-        use: ["style-loader", "css-loader"],
-      },
-      // File loader for image assets
-      {
-        test: /\.(png|svg|jpg|jpeg|gif)$/i,
-        type: "asset/resource",
-      },
-    ],
-  },
-  resolve: {
-    // Add `.ts` and `.tsx` as resolvable extensions.
-    extensions: [".tsx", ".ts", ".js"],
-  },
-  output: {
-    // Output directory
-    path: path.resolve(__dirname, "dist"),
-    // Output file name
-    filename: "bundle.js",
-  },
-  // Source maps for debugging
-  devtool: "inline-source-map",
-  // Dev server configuration
-  devServer: {
-    static: {
-      directory: path.join(__dirname, "public"),
-    },
-    compress: true,
-    port: 9000,
-  },
-};