admin_lsac 1.5.0 → 2.0.0

package/.eslintrc.cjs

@@ -6,7 +6,7 @@ module.exports = {
     'plugin:@typescript-eslint/recommended',
     'plugin:react-hooks/recommended',
   ],
-  ignorePatterns: ['dist', '.eslintrc.cjs', 'src/testSchemas', 'admin_lsac.d.ts'],
+  ignorePatterns: ['dist', '.eslintrc.cjs', 'server'],
   parser: '@typescript-eslint/parser',
   plugins: ['react-refresh'],
   rules: {
@@ -14,5 +14,7 @@ module.exports = {
       'warn',
       { allowConstantExport: true },
     ],
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-unused-vars': 'off',
   },
 }

package/README.md

@@ -4,25 +4,25 @@ For configuring your own admin panel, follow the next instructions.
 
 ## How to install it?
 
-### `npm install admin_lsac`
+- `npm install admin_lsac`
 
 This command will download and install the specified package and its dependencies into your project's node_modules directory, making it available for use in your project.
 
 ## What do you need to import?
 
-### `import { ChakraProvider } from '@chakra-ui/react'`
+- `import { ChakraProvider } from '@chakra-ui/react'`
 
-### `import { pageToUrl } from 'admin_lsac'`
+- `import { pageToUrl } from 'admin_lsac'`
 
-### `import { AdminPage } from 'admin_lsac'`
+- `import { AdminPage } from 'admin_lsac'`
 
 You can import these in App.js / App.ts or wherever your routes to the pages are located.
 
-### `import { PageSchema } from 'admin_lsac'`
+- `import { PageSchema } from 'admin_lsac'`
 
 If your project is TypeScript-based, you need to use the line above as well.
 
-- Import the component from above where you want to write your schemas. (See below for details about schemas)
+Import the component from above where you want to write your schemas! (See below for details about schemas)
 
 ## How to add routes to the admin panel's pages?
 
@@ -125,6 +125,162 @@ export interface RowAction {
 
 A page schema is based on these interfaces, and it describes how one table of your admin panel would need to be structured to accomplish what the user needs to do regarding an entity. (i.e. users, teams, companies, quizzes)
 
+The most important interface is `PageSchema`, as it is at the top of the relations between all these interfaces.
+
+What do the fields of `PageSchema` refer to?
+
+- name = name of the table
+- actions = these are operations that can affect all entries in the table (like updating all or some of the entries in the table) or operations that envolve creating new entries (one by one)
+- rowActions = these are operations that can affect just one entry/row (like updating or deleting an entry)
+- getRequest = this is a field containg the function that will retrieve all the entries from one table in the database
+- tableFields = these are the 'definitions' of the displayed table's columns
+
+The operations for the rowActions and actions will generally have a form to complete before executing it. There are 4 types of inputs for the form part:
+
+- simpleField = simple data like numbers, strings or files
+- dropdownField = enable the user to choose an option from a predefined list
+- arrayField = arrays of data
+- objectField = an object containing more fields/inputs, or even other objects (some cool recursion)
+
+#### Schema example
+
+```
+const domain = "http://localhost:3001"; // dev mode
+
+// helper function
+const getAuth = () => {
+  // return a token or whatever :)
+};
+
+const companies: PageSchema = {
+  name: "Companies",
+
+  getRequest: async () => { // retrieve all entries from the database
+    const res = await axios.get(domain + "/something", {
+      headers: getAuth(),
+    });
+    return res.data;
+  },
+
+  tableFields: [ // the columns displayed on the page
+    {
+      name: "Company ID", // the ID must be displayed (and as first column),
+      // if you would like to use rowActions ⚠️
+      access: (obj: any) => obj.id, // obj.field_name
+    },
+    {
+      name: "Name",
+      access: (obj: any) => obj.name,
+    },
+    {
+      name: "Logo",
+      access: (obj: any) => // you can have even more complex functions
+        obj.logoUrl
+          ? React.createElement("img", {
+            src: obj.logoUrl,
+            alt: "ERROR",
+            style: { width: "100px" },
+          })
+          : "No Image Available",
+    },
+  ],
+
+  actions: [
+    {
+      name: "Create New Quiz",
+      fields: [
+        {
+          name: "name",
+          label: "Quiz Name",
+          type: "string", // for every FormField, type must be specified
+          validationSchema: Yup.string().required(),
+        },
+        {
+          name: "questions",
+          label: "Questions",
+          type: "array",
+          element: {
+            name: "",
+            label: "",
+            type: "object",
+            fields: [
+              {
+                name: "text",
+                label: "Question Text",
+                type: "string",
+                validationSchema: Yup.string().required(),
+              },
+              {
+                name: "type",
+                label: "Question Type",
+                type: "dropdown",
+                getOptions: async () => [
+                  {
+                    value: "OPEN",
+                    display: "Open",
+                  },
+                  {
+                    value: "SINGLE",
+                    display: "Single",
+                  },
+                  {
+                    value: "MULTIPLE",
+                    display: "Multiple",
+                  },
+                ],
+              },
+            ],
+          },
+        },
+      ],
+      onSubmit: async (formValues: any) => { // onSubmit function can also be complex
+        // for actions, onSubmit will always have one param (formValues - you can change the name though)
+        // process formVaues as you wish
+
+        // Nevertheless, submitting the actual data is the most important thing
+        const result = await axios.post(domain + "/something", formValues, {
+          headers: getAuth(),
+        });
+
+        return result.data;
+      }
+    },
+  ],
+
+  rowActions: [
+    {
+      name: "Delete Event - Variant 1", // without form
+      onSubmit: async (eventId: number) => { // onSubmit has only param, the row's ID
+        const res = await axios.delete(
+          domain + "/something/" + eventId
+        );
+        return res.data;
+      },
+    },
+    {
+      name: "Delete Event - Variant 2", // with form
+      fields: [
+        {
+          name: "input",
+          label: "Mock Field",
+          type: "string",
+          validationSchema: "",
+        },
+      ],
+      onSubmit: async (formValues: any, eventId: number) => { // onSubmit has two params
+      // the first param - formValues, while the second is the row's ID
+        const res = await axios.delete(
+          domain + "/something/" + eventId
+        );
+        return res.data;
+      },
+    },
+  ],
+}
+```
+
+Please note that the schema above is not related to any entity, and the fields of PageSchema do not necessarily have any relation between them. These are just random examples to teach you how to create your own schemas.
+
 #### An array of schemas must be defined as below:
 
 ```

package/dist/esm/src/components/AdminPage.d.ts

@@ -1,6 +1,6 @@
-import { PageSchema } from "../schema";
+import { PageSchema } from '../schema';
 export declare function pageToUrl(page: PageSchema): string;
-export declare function AdminPage({ pages, selectedPage, basePath, apiURL }: {
+export declare function AdminPage({ pages, selectedPage, basePath, apiURL, }: {
     pages: PageSchema[];
     selectedPage: PageSchema;
     basePath: string;

package/dist/esm/src/components/AdminPage.js

@@ -1,22 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
-import { ChakraProvider } from "@chakra-ui/react";
-import { Button, Modal, ModalHeader, ModalBody, useDisclosure, ModalOverlay, ModalContent, ModalCloseButton, Box, Stack, } from "@chakra-ui/react";
-import { GenericForm } from "./GenericForm";
-import { ThemeProvider } from "@emotion/react";
-import { createTheme } from "@mui/material/styles";
-import { MaterialReactTable } from "material-react-table";
-import { mkConfig, generateCsv, download } from "export-to-csv";
-import Swal from "sweetalert2";
-import MenuItem from "@mui/material/MenuItem";
-import { io } from "socket.io-client";
-import { newSocket } from "../utils/websockets";
+import { useEffect, useState } from 'react';
+import { ChakraProvider } from '@chakra-ui/react';
+import { Button, Modal, ModalHeader, ModalBody, useDisclosure, ModalOverlay, ModalContent, ModalCloseButton, Box, Stack, } from '@chakra-ui/react';
+import { GenericForm } from './GenericForm';
+import { ThemeProvider } from '@emotion/react';
+import { createTheme } from '@mui/material/styles';
+import { MaterialReactTable } from 'material-react-table';
+import { mkConfig, generateCsv, download } from 'export-to-csv';
+import Swal from 'sweetalert2';
+import MenuItem from '@mui/material/MenuItem';
+import { io } from 'socket.io-client';
+import { newSocket } from '../utils/websockets';
 export function pageToUrl(page) {
-    return `${page.name.toLowerCase().replace(" ", "_")}`;
+    return `${page.name.toLowerCase().replace(' ', '_')}`;
 }
-function Header({ pages, data, basePath, }) {
+function Header({ pages, data, basePath }) {
     return (_jsx(Box, { background: "blue.50", padding: 1, children: _jsxs(Stack, { margin: 3, direction: "row", justifyContent: "space-between", alignItems: "center", children: [_jsx(Stack, { margin: 4, gap: 10, direction: "row", alignItems: "center", children: pages.map((p) => (_jsx(Box, { as: "a", href: `${basePath}/${pageToUrl(p)}`, children: p.name }))) }), _jsx(Stack, { direction: "row", children: _jsx(Button, { colorScheme: "red", onClick: () => {
-                            const filename = prompt("Enter filename:");
+                            const filename = prompt('Enter filename:');
                             if (filename)
                                 exportToCSV(data, filename);
                         }, children: "Export Data" }) })] }) }));
@@ -25,10 +25,10 @@ function exportToCSV(data, filename) {
     const formatImageData = (obj) => {
         const formattedObj = {};
         for (const key in obj) {
-            if (typeof obj[key] !== "object") {
+            if (typeof obj[key] !== 'object') {
                 formattedObj[key] = obj[key];
             }
-            else if (typeof obj[key] === "object" && obj[key] != null) {
+            else if (typeof obj[key] === 'object' && obj[key] != null) {
                 Object.keys(obj[key]).forEach((k) => {
                     formattedObj[`${key}.${k}`] = obj[key][k];
                 });
@@ -47,12 +47,12 @@ function exportToCSV(data, filename) {
     }
     else {
         Swal.fire({
-            title: "Error while exporting CSV!",
-            text: "There is no data to export.",
+            title: 'Error while exporting CSV!',
+            text: 'There is no data to export.',
         });
     }
 }
-export function AdminPage({ pages, selectedPage, basePath, apiURL = '' }) {
+export function AdminPage({ pages, selectedPage, basePath, apiURL = '', }) {
     const { isOpen, onOpen, onClose } = useDisclosure();
     const [selectedAction, setSelectedAction] = useState({});
     const [data, setData] = useState([]);
@@ -68,10 +68,10 @@ export function AdminPage({ pages, selectedPage, basePath, apiURL = '' }) {
         });
     }, [refetch]); // Do not remove 'refetch' from here !!!
     useEffect(() => {
-        socket.on("updateData", (message) => {
-            console.log("Message emitted from socket: " + message);
+        socket.on('updateData', (message) => {
+            console.log('Message emitted from socket: ' + message);
             setRefetch(true);
-            const rowActionsMenu = document.querySelector(".MuiPaper-root.MuiPopover-paper.MuiMenu-paper");
+            const rowActionsMenu = document.querySelector('.MuiPaper-root.MuiPopover-paper.MuiMenu-paper');
             if (rowActionsMenu) {
                 rowActionsMenu.remove();
             }
@@ -83,7 +83,7 @@ export function AdminPage({ pages, selectedPage, basePath, apiURL = '' }) {
     return (_jsxs(_Fragment, { children: [_jsx(Header, { pages: pages, data: data, basePath: basePath }), _jsx(ThemeProvider, { theme: createTheme(), children: _jsx(MaterialReactTable, { columns: selectedPage.tableFields.map((field, index) => ({
                         accessorFn: (row) => row[index],
                         header: field.name,
-                    })), data: displayData, muiTableContainerProps: { sx: { maxHeight: "70vh" } }, enableColumnResizing: true, enableColumnPinning: true, enableGlobalFilterModes: true, enablePagination: true, paginationDisplayMode: "pages", enableRowVirtualization: true, rowVirtualizerOptions: { overscan: 20 }, renderTopToolbarCustomActions: () => (_jsx(ChakraProvider, { children: _jsx(Stack, { margin: 0, padding: 3, direction: "row", children: selectedPage.actions.map((action) => (_jsx(Button, { colorScheme: "blue", onClick: () => {
+                    })), data: displayData, muiTableContainerProps: { sx: { maxHeight: '70vh' } }, enableColumnResizing: true, enableColumnPinning: true, enableGlobalFilterModes: true, enablePagination: true, paginationDisplayMode: "pages", enableRowVirtualization: true, rowVirtualizerOptions: { overscan: 20 }, renderTopToolbarCustomActions: () => (_jsx(ChakraProvider, { children: _jsx(Stack, { margin: 0, padding: 3, direction: "row", children: selectedPage.actions.map((action) => (_jsx(Button, { colorScheme: "blue", onClick: () => {
                                     setSelectedAction(action);
                                     onOpen();
                                 }, children: action.name }))) }) })), enableRowActions: true, renderRowActionMenuItems: (obj) => {
@@ -91,12 +91,12 @@ export function AdminPage({ pages, selectedPage, basePath, apiURL = '' }) {
                                 setSelectedAction(rowAction);
                                 setRowId(obj.row.original[0]);
                                 onOpen();
-                                const rowActionsMenu = document.querySelector(".MuiPaper-root.MuiPopover-paper.MuiMenu-paper");
+                                const rowActionsMenu = document.querySelector('.MuiPaper-root.MuiPopover-paper.MuiMenu-paper');
                                 if (rowActionsMenu) {
                                     rowActionsMenu.remove();
                                 }
-                            }, children: rowAction.name + " " + obj.row.original[0] })));
-                    } }) }), _jsxs(Modal, { size: "6xl", isOpen: isOpen, onClose: onClose, children: [_jsx(ModalOverlay, {}), _jsxs(ModalContent, { children: [_jsx(ModalHeader, { children: selectedAction.name }), _jsx(ModalCloseButton, {}), _jsxs(ModalBody, { children: [selectedAction.fields && selectedAction.fields?.length > 0 ? (_jsx(GenericForm, { action: selectedAction, onClose: onClose, rowId: rowId })) : (_jsx(Button, { colorScheme: "blue", mr: 3, onClick: () => {
+                            }, children: rowAction.name + ' ' + obj.row.original[0] })));
+                    } }) }), _jsxs(Modal, { size: '6xl', isOpen: isOpen, onClose: onClose, children: [_jsx(ModalOverlay, {}), _jsxs(ModalContent, { children: [_jsx(ModalHeader, { children: selectedAction.name }), _jsx(ModalCloseButton, {}), _jsxs(ModalBody, { children: [selectedAction.fields && selectedAction.fields?.length > 0 ? (_jsx(GenericForm, { action: selectedAction, onClose: onClose, rowId: rowId })) : (_jsx(Button, { colorScheme: "blue", mr: 3, onClick: () => {
                                             selectedAction.onSubmit(rowId);
                                             onClose();
                                         }, children: "Confirm Action" })), _jsx(Button, { colorScheme: "red", mr: 3, onClick: onClose, children: "Close" })] })] })] })] }));

package/dist/esm/src/components/GenericForm.d.ts

@@ -1,4 +1,4 @@
-import { Action, RowAction } from "../schema";
+import { Action, RowAction } from '../schema';
 interface GenericFormProps {
     action: Action | RowAction;
     onClose?: () => void;

package/dist/esm/src/components/GenericForm.js

@@ -1,41 +1,39 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Box, Button, FormControl, FormErrorMessage, FormLabel, Input, Select, } from "@chakra-ui/react";
-import { Field, Form, Formik, FieldArray, getIn } from "formik";
-import * as Yup from "yup";
-import Swal from "sweetalert2";
-import { useEffect, useState } from "react";
+import { Box, Button, FormControl, FormErrorMessage, FormLabel, Input, Select, } from '@chakra-ui/react';
+import { Field, Form, Formik, FieldArray, getIn } from 'formik';
+import * as Yup from 'yup';
+import Swal from 'sweetalert2';
+import { useEffect, useState } from 'react';
 function parseValidation(fields) {
     if (!fields) {
         return {};
     }
     return fields.reduce((acc, field) => {
-        if (field.type !== "dropdown" &&
-            field.type !== "object" &&
-            field.type !== "array") {
+        if (field.type !== 'dropdown' && field.type !== 'object' && field.type !== 'array') {
             acc[field.name] = field.validationSchema;
         }
-        else if (field.type === "array") {
-            if (field.element.type === "dropdown") {
+        else if (field.type === 'array') {
+            if (field.element.type === 'dropdown') {
                 acc[field.name] = Yup.array().of(Yup.string().required());
             }
-            else if (field.element.type === "object") {
+            else if (field.element.type === 'object') {
                 acc[field.name] = Yup.array().of(Yup.object(parseValidation(field.element.fields)));
             }
             else {
                 acc[field.name] = Yup.array().of(field.element.validationSchema);
             }
         }
-        else if (field.type === "object") {
+        else if (field.type === 'object') {
             acc[field.name] = Yup.object(parseValidation(field.fields));
         }
-        if (field.type === "dropdown") {
+        if (field.type === 'dropdown') {
             acc[field.name] = Yup.string().required();
         }
         return acc;
     }, {});
 }
 function generateSingleField(formfield, fieldName, key) {
-    return (_jsx(Field, { name: fieldName, children: ({ field, form }) => (_jsxs(FormControl, { isInvalid: getIn(form.touched, fieldName) && getIn(form.errors, fieldName), children: [_jsx(FormLabel, { marginTop: 2, children: formfield.label }), formfield.type === "string" || formfield.type === "number" ? (_jsx(Input, { ...field, type: formfield.type === "number" ? "number" : "text", placeholder: "" })) : formfield.type === "file" ? (_jsx(Input, { type: "file", name: fieldName, onChange: (event) => {
+    return (_jsx(Field, { name: fieldName, children: ({ field, form }) => (_jsxs(FormControl, { isInvalid: getIn(form.touched, fieldName) && getIn(form.errors, fieldName), children: [_jsx(FormLabel, { marginTop: 2, children: formfield.label }), formfield.type === 'string' || formfield.type === 'number' ? (_jsx(Input, { ...field, type: formfield.type === 'number' ? 'number' : 'text', placeholder: "" })) : formfield.type === 'file' ? (_jsx(Input, { type: "file", name: fieldName, onChange: (event) => {
                         if (event.currentTarget.files != null) {
                             form.setFieldValue(fieldName, event.currentTarget.files[0]);
                         }
@@ -46,18 +44,18 @@ function parseFields(fields, previous) {
         return [];
     }
     const computedFields = fields.map((formfield, key) => {
-        let fieldName = previous !== undefined ? previous + "." + formfield.name : formfield.name;
-        if (formfield.type === "object") {
+        const fieldName = previous !== undefined ? previous + '.' + formfield.name : formfield.name;
+        if (formfield.type === 'object') {
             const objectFields = parseFields(formfield.fields, fieldName);
             return _jsx(FormControl, { children: objectFields }, fieldName);
         }
-        else if (formfield.type === "array") {
+        else if (formfield.type === 'array') {
             return (_jsx(FieldArray, { name: fieldName, children: ({ remove, push, form }) => (_jsxs("div", { children: [_jsx(FormLabel, { marginTop: 2, children: formfield.label }), getIn(form.values, fieldName).length > 0 &&
-                            getIn(form.values, fieldName).map((_, index) => (_jsxs(Box, { paddingLeft: 10, children: [_jsx("h4", { children: _jsx("b", { children: `${fieldName}.${index}` }) }), _jsx(Box, { paddingLeft: 10, children: formfield.element.type === "object"
+                            getIn(form.values, fieldName).map((_, index) => (_jsxs(Box, { paddingLeft: 10, children: [_jsx("h4", { children: _jsx("b", { children: `${fieldName}.${index}` }) }), _jsx(Box, { paddingLeft: 10, children: formfield.element.type === 'object'
                                             ? parseFields(formfield.element.fields, `${fieldName}.${index}`)
                                             : generateSingleField(formfield.element, `${fieldName}.${index}`, key) }), _jsxs(Button, { type: "button", colorScheme: "red", marginY: 2, onClick: () => remove(index), children: ["Remove ", `${fieldName}.${index}`] })] }))), _jsxs(Button, { type: "button", marginY: 2, colorScheme: "blue", onClick: () => {
                                 let value = undefined;
-                                if (formfield.element.type === "object") {
+                                if (formfield.element.type === 'object') {
                                     value = getCustomInitialValues(formfield.element.fields);
                                 }
                                 else {
@@ -73,18 +71,18 @@ function parseFields(fields, previous) {
     return computedFields;
 }
 function getCustomInitialValues(fields) {
-    let obj = {};
+    const obj = {};
     if (!fields) {
         return obj;
     }
     fields.forEach((field) => {
-        if (field.type === "array")
+        if (field.type === 'array')
             obj[field.name] = [];
-        else if (field.type === "object")
+        else if (field.type === 'object')
             obj[field.name] = getCustomInitialValues(field.fields);
-        else if (field.type === "string")
-            obj[field.name] = "";
-        else if (field.type === "number")
+        else if (field.type === 'string')
+            obj[field.name] = '';
+        else if (field.type === 'number')
             obj[field.name] = 0;
         else
             obj[field.name] = null;
@@ -104,11 +102,11 @@ async function setOptions(fields) {
         return;
     }
     const promises = fields.map(async (field) => {
-        if (field.type === "dropdown")
+        if (field.type === 'dropdown')
             field.options = await field.getOptions();
-        else if (field.type === "array")
+        else if (field.type === 'array')
             await setOptions([field.element]);
-        else if (field.type === "object")
+        else if (field.type === 'object')
             await setOptions(field.fields);
     });
     await Promise.all(promises);
@@ -137,14 +135,14 @@ export function GenericForm({ action, onClose, rowId }) {
                         await action.onSubmit(values);
                     if (onClose)
                         onClose();
-                    Swal.fire("Ok");
+                    Swal.fire('Ok');
                 }
                 catch (e) {
                     if (onClose)
                         onClose();
                     const err = e.request.response;
                     Swal.fire({
-                        text: "Error: " + err,
+                        text: 'Error: ' + err,
                     });
                 }
             }, children: ({ isSubmitting }) => (_jsxs(Form, { children: [formFields, _jsx(Button, { mt: 4, colorScheme: "teal", isLoading: isSubmitting, type: "submit", children: "Submit" }), _jsx(Button, { mt: 4, colorScheme: "teal", type: "reset", children: "Initialise Form" })] })) }) }));

package/dist/esm/src/main.js

@@ -4,4 +4,4 @@ import ReactDOM from 'react-dom/client';
 import App from './App';
 import { event } from './testSchemas/event';
 import './index.css';
-ReactDOM.createRoot(document.getElementById('root')).render(_jsx(React.StrictMode, { children: _jsx(App, { pages: [event], basePath: '' }) }));
+ReactDOM.createRoot(document.getElementById('root')).render(_jsx(React.StrictMode, { children: _jsx(App, { pages: [event], basePath: "" }) }));

package/dist/esm/src/schema.d.ts

@@ -6,7 +6,7 @@ export interface TableField {
 export interface SimpleField {
     name: string;
     label: string;
-    type: "string" | "number" | "file";
+    type: 'string' | 'number' | 'file';
     validationSchema: any;
 }
 export interface Option {
@@ -16,20 +16,20 @@ export interface Option {
 export interface DropdownField {
     name: string;
     label: string;
-    type: "dropdown";
+    type: 'dropdown';
     options?: Option[] | undefined;
     getOptions: () => Promise<Option[]>;
 }
 export interface ObjectField {
     name: string;
     label: string;
-    type: "object";
+    type: 'object';
     fields: FormField[];
 }
 export interface ArrayField {
     name: string;
     label: string;
-    type: "array";
+    type: 'array';
     element: Exclude<FormField, ArrayField>;
 }
 export type FormField = SimpleField | DropdownField | ObjectField | ArrayField;

package/dist/esm/src/utils/websockets.js

@@ -1,9 +1,9 @@
-import io from "socket.io-client";
-import { useEffect } from "react";
+import io from 'socket.io-client';
+import { useEffect } from 'react';
 const Socket = (setSocket, apiURL) => {
     useEffect(() => {
         const socketRef = io(apiURL, {
-            transports: ["websocket"],
+            transports: ['websocket'],
         });
         setSocket(socketRef);
         return () => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "admin_lsac",
   "private": false,
-  "version": "1.5.0",
+  "version": "2.0.0",
   "description": "Generic Admin Panel created for storing events' data",
   "scripts": {
     "dev": "vite",

package/vite.config.ts

@@ -1,7 +1,7 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react-swc'
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react-swc';
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-})
+});