admin_lsac 1.3.1 → 1.4.0

package/.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

package/README.md

@@ -1,162 +1,162 @@
-# Generic Admin Panel
-
-For configuring your own admin panel, follow the next instructions.
-
-### `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.
-
-### `npm install export-to-csv@1.2.1`
-
-Export-to-csv package latest version is not working properly, so make sure you have the last functional version of this package install.
-
-## What do you need to import?
-
-### `import { ChakraProvider } from '@chakra-ui/react'`
-
-### `import { pageToUrl } 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:
-
-### `import { PageSchema } from 'admin_lsac'`
-
-* Import the component from above where you want to write your schemas. (See below for details about schemas)
-
-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:
-
-```
-{your_array.map((page) => (
-  <Route
-    path={`${your_url_to_admin_panel}/${pageToUrl(page)}`}
-    element={
-      <AdminPage
-        pages={your_array}
-        selectedPage={page}
-        basePath={your_url_to_admin_panel}
-      />
-    }
-  />
-))}
-{your_array[0] ? (
-  <Route
-    path={`${your_url_to_admin_panel}/*`}
-    element={
-      <AdminPage
-        pages={your_array}
-        selectedPage={your_array[0]}
-        basePath={your_url_to_admin_panel}
-      />
-    }
-  />
-) : null}
-```
-
-#### ⚠️ Don't forget to wrap the Router component into a ChakraProvider component.
-
-## What is a schema?
-
-```
-export interface PageSchema {
-  name: string;
-  actions: Action[];
-  rowActions: RowAction[];
-  getRequest: () => Promise<any[]>;
-  tableFields: TableField[];
-}
-
-export interface TableField {
-  name: string;
-  access: (obj: any) => string | number | React.ReactElement;
-}
-
-export interface SimpleField {
-  name: string;
-  label: string;
-  type: "string" | "number" | "file";
-  validationSchema: any;
-}
-
-export interface Option {
-  value: string | number | boolean;
-  display: string;
-}
-
-export interface DropdownField {
-  name: string;
-  label: string;
-  type: "dropdown";
-  options?: Option[] | undefined;
-  getOptions: () => Promise<Option[]>;
-}
-
-export interface ObjectField {
-  name: string;
-  label: string;
-  type: "object";
-  fields: FormField[];
-}
-
-export interface ArrayField {
-  name: string;
-  label: string;
-  type: "array";
-  element: Exclude<FormField, ArrayField>;
-}
-
-export type FormField = SimpleField | DropdownField | ObjectField | ArrayField;
-
-export interface Action {
-  name: string;
-  fields?: FormField[];
-  onSubmit: (obj1: any, obj2?: any) => Promise<any>;
-}
-
-export interface RowAction {
-  name: string;
-  fields?: FormField[];
-  initialise?: (obj: any) => any;
-  onSubmit: (obj1: any, obj2?: any) => Promise<any>;
-}
-```
-
-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)
-
-#### An array of schemas would be defined as follows:
-
-```
-const your_array = [
-    {
-        // schema 1
-    },
-    {
-        // schema 2
-    },
-    ...
-];
-```
-
-* In TypeScript, it would slightly change:
-
-```
-const your_array: PageSchema[] = [
-    {
-        // schema 1
-    },
-    {
-        // schema 2
-    },
-    ...
-];
-```
-
-## Other Specifications
-
-Due to some corrupt dependencies, you need a Node version >= 20.5.0 to use this package in a Vite app.
-
-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.
-
-## Learn More
-
-For more details, especially about page schemas, contact the owner. :)
+# Generic Admin Panel
+
+For configuring your own admin panel, follow the next instructions.
+
+### `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.
+
+### `npm install export-to-csv@1.2.1`
+
+Export-to-csv package latest version is not working properly, so make sure you have the last functional version of this package install.
+
+## What do you need to import?
+
+### `import { ChakraProvider } from '@chakra-ui/react'`
+
+### `import { pageToUrl } 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:
+
+### `import { PageSchema } from 'admin_lsac'`
+
+* Import the component from above where you want to write your schemas. (See below for details about schemas)
+
+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:
+
+```
+{your_array.map((page) => (
+  <Route
+    path={`${your_url_to_admin_panel}/${pageToUrl(page)}`}
+    element={
+      <AdminPage
+        pages={your_array}
+        selectedPage={page}
+        basePath={your_url_to_admin_panel}
+      />
+    }
+  />
+))}
+{your_array[0] ? (
+  <Route
+    path={`${your_url_to_admin_panel}/*`}
+    element={
+      <AdminPage
+        pages={your_array}
+        selectedPage={your_array[0]}
+        basePath={your_url_to_admin_panel}
+      />
+    }
+  />
+) : null}
+```
+
+#### ⚠️ Don't forget to wrap the Router component into a ChakraProvider component.
+
+## What is a schema?
+
+```
+export interface PageSchema {
+  name: string;
+  actions: Action[];
+  rowActions: RowAction[];
+  getRequest: () => Promise<any[]>;
+  tableFields: TableField[];
+}
+
+export interface TableField {
+  name: string;
+  access: (obj: any) => string | number | React.ReactElement;
+}
+
+export interface SimpleField {
+  name: string;
+  label: string;
+  type: "string" | "number" | "file";
+  validationSchema: any;
+}
+
+export interface Option {
+  value: string | number | boolean;
+  display: string;
+}
+
+export interface DropdownField {
+  name: string;
+  label: string;
+  type: "dropdown";
+  options?: Option[] | undefined;
+  getOptions: () => Promise<Option[]>;
+}
+
+export interface ObjectField {
+  name: string;
+  label: string;
+  type: "object";
+  fields: FormField[];
+}
+
+export interface ArrayField {
+  name: string;
+  label: string;
+  type: "array";
+  element: Exclude<FormField, ArrayField>;
+}
+
+export type FormField = SimpleField | DropdownField | ObjectField | ArrayField;
+
+export interface Action {
+  name: string;
+  fields?: FormField[];
+  onSubmit: (obj1: any, obj2?: any) => Promise<any>;
+}
+
+export interface RowAction {
+  name: string;
+  fields?: FormField[];
+  initialise?: (obj: any) => any;
+  onSubmit: (obj1: any, obj2?: any) => Promise<any>;
+}
+```
+
+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)
+
+#### An array of schemas would be defined as follows:
+
+```
+const your_array = [
+    {
+        // schema 1
+    },
+    {
+        // schema 2
+    },
+    ...
+];
+```
+
+* In TypeScript, it would slightly change:
+
+```
+const your_array: PageSchema[] = [
+    {
+        // schema 1
+    },
+    {
+        // schema 2
+    },
+    ...
+];
+```
+
+## Other Specifications
+
+Due to some corrupt dependencies, you need a Node version >= 20.5.0 to use this package in a Vite app.
+
+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.
+
+## Learn More
+
+For more details, especially about page schemas, contact the owner. :)

package/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Admin Panel</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/package.json

@@ -1,73 +1,42 @@
-{
-  "name": "admin_lsac",
-  "version": "1.3.1",
-  "description": "Generic Admin Panel created for storing events' data",
-  "private": false,
-  "dependencies": {
-    "@chakra-ui/react": "^2.5.5",
-    "@emotion/react": "^11.10.6",
-    "@emotion/styled": "^11.10.6",
-    "@tanstack/match-sorter-utils": "^8.8.4",
-    "@tanstack/react-table": "^8.10.7",
-    "@tanstack/react-virtual": "^3.0.0-beta.68",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^27.5.2",
-    "@types/node": "^16.18.23",
-    "@types/react-dom": "^18.0.11",
-    "axios": "^1.3.5",
-    "export-to-csv": "^1.2.1",
-    "formik": "^2.2.9",
-    "framer-motion": "^10.11.6",
-    "material-react-table": "^2.0.2",
-    "nth-check": "^2.1.1",
-    "postcss": "^8.4.35",
-    "prettier": "^2.8.7",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router": "^6.10.0",
-    "react-router-dom": "^6.10.0",
-    "react-scripts": "^5.0.1",
-    "react-table": "^7.8.0",
-    "socket.io-client": "^4.7.5",
-    "sweetalert2": "^11.6.13",
-    "typescript": "^4.9.5",
-    "web-vitals": "^2.1.4",
-    "yup": "^1.0.2"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "format": "prettier --write \"src/**/*.ts\" \"src/**/*.tsx\""
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "devDependencies": {
-    "@types/react": "^18.2.65",
-    "@types/react-table": "^7.7.17",
-    "ts-loader": "^9.5.1",
-    "webpack-cli": "^5.1.4"
-  },
-  "main": "dist/components/Page.js",
-  "module": "dist/esm/components/Page.js",
-  "types": "dist/App.d.ts"
-}
+{
+  "name": "admin_lsac",
+  "private": false,
+  "version": "1.4.0",
+  "description": "Generic Admin Panel created for storing events' data",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@chakra-ui/react": "^2.8.2",
+    "@mui/material": "^5.15.20",
+    "axios": "^1.7.2",
+    "export-to-csv": "^1.3.0",
+    "formik": "^2.4.6",
+    "material-react-table": "^2.13.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.24.0",
+    "socket.io-client": "^4.7.5",
+    "sweetalert2": "^11.12.0",
+    "yup": "^1.4.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^7.13.1",
+    "@typescript-eslint/parser": "^7.13.1",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.7",
+    "typescript": "^5.2.2",
+    "vite": "^5.3.1"
+  },
+  "main": "dist/components/AdminPage.js",
+  "module": "dist/esm/components/AdminPage.js",
+  "types": "dist/App.d.ts"
+}

package/tsconfig.app.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "outDir": "./dist/esm",
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": false,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

package/tsconfig.json

@@ -1,31 +1,11 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noFallthroughCasesInSwitch": true,
-    "module": "commonjs",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": false,
-    "jsx": "react-jsx",
-    "noUncheckedIndexedAccess": true,
-    "outDir": "./dist/cjs"
-  },
-  "include": [
-    "src"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
-}
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "noEmit": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

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

package/dist/App.d.ts

@@ -1,76 +0,0 @@
-import * as React from "react";
-
-declare module "admin_lsac" {
-  export interface TableField {
-    name: string;
-    access: (obj: any) => string | number | React.ReactElement;
-  }
-
-  export interface SimpleField {
-    name: string;
-    label: string;
-    type: "string" | "number" | "file";
-    validationSchema: any;
-  }
-
-  export interface Option {
-    value: string | number | boolean;
-    display: string;
-  }
-
-  export interface DropdownField {
-    name: string;
-    label: string;
-    type: "dropdown";
-    options?: Option[] | undefined;
-    getOptions: () => Promise<Option[]>;
-  }
-
-  export interface ObjectField {
-    name: string;
-    label: string;
-    type: "object";
-    fields: FormField[];
-  }
-
-  export interface ArrayField {
-    name: string;
-    label: string;
-    type: "array";
-    element: Exclude<FormField, ArrayField>;
-  }
-
-  export type FormField = SimpleField | DropdownField | ObjectField | ArrayField;
-
-  export interface Action {
-    name: string;
-    fields?: FormField[];
-    onSubmit: (obj1: any, obj2?: any) => Promise<any>;
-  }
-
-  export interface RowAction {
-    name: string;
-    fields?: FormField[];
-    initialise?: (obj: any) => any;
-    onSubmit: (obj1: any, obj2?: any) => Promise<any>;
-  }
-
-  export interface PageSchema {
-    name: string;
-    actions: Action[];
-    rowActions: RowAction[];
-    getRequest: () => Promise<any[]>;
-    tableFields: TableField[];
-  }
-
-  export interface PageProps {
-    pages: PageSchema[];
-    selectedPage: PageSchema;
-    basePath: string;
-    apiURL?: string;
-  }
-
-  export function AdminPage(props: PageProps): React.ReactElement;
-
-  export function pageToUrl(page: PageSchema): string;
-}

package/dist/App.js

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("@chakra-ui/react");
-var react_router_dom_1 = require("react-router-dom");
-var Page_1 = require("./components/Page");
-var Page_2 = require("./components/Page");
-function App(_a) {
-    var pages = _a.pages, basePath = _a.basePath;
-    return ((0, jsx_runtime_1.jsx)(react_1.ChakraProvider, { children: (0, jsx_runtime_1.jsx)(react_router_dom_1.BrowserRouter, { children: (0, jsx_runtime_1.jsxs)(react_router_dom_1.Routes, { children: [pages.map(function (page) { return ((0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "".concat(basePath, "/").concat((0, Page_2.pageToUrl)(page)), element: (0, jsx_runtime_1.jsx)(Page_1.AdminPage, { pages: pages, selectedPage: page, basePath: basePath, apiURL: "http://localhost:3001" }) })); }), pages[0] ? ((0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "".concat(basePath, "/*"), element: (0, jsx_runtime_1.jsx)(Page_1.AdminPage, { pages: pages, selectedPage: pages[0], basePath: basePath, apiURL: "http://localhost:3001" }) })) : null] }) }) }));
-}
-exports.default = App;