Panel image, css support WIP

package.json

@@ -40,9 +40,11 @@
     "@babel/plugin-transform-typescript": "^7.16.1",
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-typescript": "^7.16.0",
+    "@rollup/plugin-alias": "^5.1.0",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-commonjs": "^21.0.3",
     "@rollup/plugin-eslint": "^8.0.1",
+    "@rollup/plugin-image": "^3.0.3",
     "@rollup/plugin-node-resolve": "^13.1.3",
     "@rollup/plugin-replace": "^4.0.0",
     "@rollup/plugin-typescript": "^8.3.1",
@@ -56,19 +58,23 @@
     "prettier": "^2.6.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-is": "^18.0.0",
     "rimraf": "^3.0.2",
     "rollup": "^2.74.0",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-dts": "^4.2.1",
     "rollup-plugin-node-polyfills": "^0.2.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-prettier": "^2.2.2",
+    "rollup-plugin-string": "^3.0.0",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.31.2",
     "ts-jest": "^27.1.4",
     "tslib": "^2.3.1",
     "typedoc": "^0.23.1",
     "typescript": "^4.6.3"
+  },
+  "dependencies": {
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.18"
   }
 }

rollup.config.comp.js

@@ -1,8 +1,10 @@
-import resolve from "@rollup/plugin-node-resolve";
 import commonjs from "@rollup/plugin-commonjs";
 import typescript from "@rollup/plugin-typescript";
-import nodePolyfills from 'rollup-plugin-node-polyfills';
 import replace from '@rollup/plugin-replace';
+import { string } from "rollup-plugin-string";
+import image from '@rollup/plugin-image';
+import alias from '@rollup/plugin-alias';
+import path from 'path';
 
 const globals = {
   "react": "React",
@@ -27,12 +29,18 @@ export default [
       replace({
         "process.env.NODE_ENV": JSON.stringify("production")
       }),
-      nodePolyfills(),
-      resolve({
-        browser: true
-      }),
       commonjs(),
       typescript({ tsconfig: "./tsconfig.comp.json" }),
+      alias({
+        entries: {
+          '@panelAssets': path.resolve(__dirname, './src/components/Admin/assets')
+        }
+      }),
+      image(),
+      string({
+        // Required to be specified
+        include: "**/*.css",
+      }),
       {
         name: 'modify-output',
         renderChunk: (source) => {

rollup.config.main.js

@@ -5,10 +5,15 @@ import dts from "rollup-plugin-dts";
 import copy from "rollup-plugin-copy";
 import nodePolyfills from 'rollup-plugin-node-polyfills';
 import replace from '@rollup/plugin-replace';
+import { string } from "rollup-plugin-string";
+import image from '@rollup/plugin-image';
+import alias from '@rollup/plugin-alias';
+import path from 'path';
 
-import React from 'react';
-import ReactIs from 'react-is';
-import ReactDOM from 'react-dom';
+const globals = {
+  "react": "React",
+  "react-dom": "ReactDOM"
+};
 
 const packageJson = require("./package.json");
 
@@ -19,16 +24,17 @@ export default [
       {
         file: packageJson.main,
         format: "cjs",
-        sourcemap: true,
         name: "Apiker",
-        exports: "named"
+        exports: "named",
+        globals
       },
       {
         file: packageJson.module,
         format: "esm",
-        sourcemap: true
+        globals
       }
     ],
+    external: Object.keys(globals),
     plugins: [
       replace({
         "process.env.NODE_ENV": JSON.stringify("production")
@@ -37,15 +43,18 @@ export default [
       resolve({
         browser: true
       }),
-      commonjs({
-        include: /node_modules/,
-        namedExports: {
-            'react-is': Object.keys(ReactIs),
-            'react': Object.keys(React),
-            'react-dom': Object.keys(ReactDOM)
+      commonjs(),
+      typescript({ tsconfig: "./tsconfig.json" }),
+      alias({
+        entries: {
+          '@panelAssets': path.resolve(__dirname, './src/components/Admin/assets')
         }
       }),
-      typescript({ tsconfig: "./tsconfig.json" }),
+      image(),
+      string({
+        // Required to be specified
+        include: "**/*.css",
+      }),
       copy({
         targets: [
           { src: "plugins/PostBuild.js", dest: "dist/plugins" },

src/components/Admin/Admin.ts

@@ -1,23 +1,14 @@
-import { adminPanelBanId } from "./BanId";
-import { Handler, RequestParams } from "../Request";
+import { Handler } from "../Request";
 import { resRaw } from "../Response";
 import { apikerPagesStatic } from "../Static";
-import { adminPanelBans } from "./Bans";
-import { adminPanelDashboard } from "./Dashboard";
-import { adminWhitelistMiddleware } from "./middleware";
-import { adminPanelSetup } from "./Setup";
-import { adminPanelVisitors } from "./Visitors";
+import { adminPanelPage } from "./Panel";
 
 /**
  * Responses
  */
 export const getAdminRoutes = () => ({
-    "/admp": adminPanelSetup,
-    "/admp/static.js": adminPanelStatic,
-    "/admp/dashboard": (params: RequestParams) => adminWhitelistMiddleware(params, adminPanelDashboard),
-    "/admp/visitors": (params: RequestParams) => adminWhitelistMiddleware(params, adminPanelVisitors),
-    "/admp/bans": (params: RequestParams) => adminWhitelistMiddleware(params, adminPanelBans),
-    "/admp/banid": (params: RequestParams) => adminWhitelistMiddleware(params, adminPanelBanId),
+    "/admp": adminPanelPage,
+    "/admp/static.js": adminPanelStatic
 });
 
 export const adminPanelStatic: Handler = () => {

src/components/Admin/Content.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+export const Content = ({ children } = {} as any) => {
+    return (
+        <div className="content mt-5">
+          <div className="container">
+            <div className="row justify-content-md-center">
+              <div className="col-lg-6">
+                {children}
+              </div>
+            </div>
+          </div>
+        </div>
+      );
+};