admin_lsac 1.4.9 → 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

@@ -2,29 +2,29 @@
 
 For configuring your own admin panel, follow the next instructions.
 
-### `npm install admin_lsac`
+## How to install it?
 
-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.
-
-### `npm install export-to-csv@1.2.1`
+- `npm install admin_lsac`
 
-Export-to-csv package latest version is not working properly, so make sure you have the last functional version of this package install.
+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. If your project is TypeScript-based, you need to write the following line as well:
+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'`
 
-* Import the component from above where you want to write your schemas. (See below for details about schemas)
+If your project is TypeScript-based, you need to use the line above as well.
 
-You need to create an array of schemas for your own admin panel. You can write the following inside your Routes component from App.js / App.ts:
+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?
 
 ```
 {your_array.map((page) => (
@@ -39,7 +39,7 @@ You need to create an array of schemas for your own admin panel. You can write t
     }
   />
 ))}
-{your_array[0] ? (
+{your_array[0] ? ( // recommended default route when accessing admin panel
   <Route
     path={`${your_url_to_admin_panel}/*`}
     element={
@@ -53,7 +53,9 @@ You need to create an array of schemas for your own admin panel. You can write t
 ) : null}
 ```
 
-#### ⚠️ Don't forget to wrap the Router component into a ChakraProvider component.
+You will need to create an array of schemas for your own admin panel.
+
+#### ⚠️ Don't forget to wrap the Router component into a ChakraProvider component. Otherwise, you will not like the way it looks. :)
 
 ## What is a schema?
 
@@ -121,9 +123,165 @@ export interface RowAction {
 }
 ```
 
-A page schema is based on these interfaces, which can be imported into your files. A page schema describes how one table of your admin panel would need to be structured to accomplish what the user needs regarding an entity. (i.e. users, teams, companies, quizzes)
+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 would be defined as follows:
+#### An array of schemas must be defined as below:
 
 ```
 const your_array = [
@@ -137,7 +295,7 @@ const your_array = [
 ];
 ```
 
-* In TypeScript, it would slightly change:
+- In TypeScript, it would slightly change:
 
 ```
 const your_array: PageSchema[] = [
@@ -153,9 +311,9 @@ const your_array: PageSchema[] = [
 
 ## Other Specifications
 
-Due to some corrupt dependencies, you need a Node version >= 20.5.0 to use this package in a Vite app.
+Due to some corrupt dependencies, you will need a Node version >= 20.5.0 to use this NPM package (it may work in some cases, but we still recommend updating Node to a newer version).
 
-For every entity you describe through a page schema, getRequest and onSubmit functions will use routes created for the entity. `getRequest` function will make a GET request, while `onSumbit` will probably make a POST, PATCH or DELETE request.
+For every entity you describe through a page schema, getRequest and onSubmit functions use routes created for the entity. `getRequest` function makes a GET request, while `onSumbit` function generally makes a POST, PATCH or DELETE request.
 
 ## Learn More
 

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.4.9",
+  "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()],
-})
+});