New UI integration

Dockerfile

@@ -22,6 +22,5 @@ RUN yarn install && yarn build
 ENV PORT=3000
 EXPOSE $PORT
 
-
-CMD [ "yarn", "workspace", "@celluloid/server", "run", "start"]
+CMD [ "yarn", "server", "start"]
 

docker-compose.yml

@@ -18,7 +18,7 @@ services:
       POSTGRES_MULTIPLE_DATABASES: celluloid, keycloak
     volumes:
       - ./.data:/var/lib/postgresql/data
-      - ./scripts/pg-init-scripts:/docker-entrypoint-initdb.d
+      - ./scripts/pg-init-scripts.sh:/docker-entrypoint-initdb.d/init.sh
     ports:
       - "5432:5432"
     restart: unless-stopped

package.json

@@ -20,6 +20,7 @@
     "clean": "for package in $(ls packages); do (cd packages/${package} && yarn clean); done",
     "build": "yarn workspaces foreach -pt run build",
     "i18n:sync": "yarn workspace translations sync",
+    "database:migrate": "./scripts/docker-bootstrap.sh admin",
     "deploy": "./bin/deploy",
     "eslint": "eslint --ext .js,.jsx,.ts,.tsx",
     "prettier:all": "prettier --ignore-path .eslintignore \"**/*.{js,jsx,ts,tsx,md}\"",

packages/admin/package.json

@@ -11,13 +11,15 @@
     "node": ">=14.16"
   },
   "scripts": {
-    "dev": "dotenv -e .env -- nodemon -e ts,json --exec node --loader ts-node/esm src/server.ts",
+    "dev": "dotenv -e .env -- nodemon -e ts,json --exec node --loader ts-node/esm src/index.ts",
     "dev-tsup": "tsup src/index.ts --watch --onSuccess 'node dist/index.js'",
+    "test": "echo $TEST",
     "build": "rm -rf dist && tsc",
-    "start": "node --use-strict dist/index.js"
+    "start": "DATABASE_URL=$DATABASE_URL node --use-strict dist/index.js"
   },
   "dependencies": {
     "@adminjs/express": "6.0.0",
+    "@adminjs/import-export": "^3.0.0",
     "@adminjs/prisma": "4.0.0",
     "@adminjs/themes": "^1.0.0",
     "@celluloid/database": "*",

packages/admin/src/index.ts

@@ -30,14 +30,12 @@ const start = async () => {
   });
 
 
-  app.use('/', adminRouter);
+  app.use('/admin', adminRouter);
 
   const __dirname = url.fileURLToPath(new URL('.', import.meta.url))
 
   app.use("/admin", express.static(path.join(__dirname, "../public")));
 
-  app.get("/*", (_, res) => res.status(404).send("page not found"));
-
   app.listen(3000, () => {
     console.log(
       `AdminJS started on localhost:3000`

packages/admin/src/server.ts

@@ -1,4 +1,5 @@
 import AdminJSExpress from "@adminjs/express";
+import importExportFeature from "@adminjs/import-export";
 import * as AdminJSPrisma from "@adminjs/prisma";
 import { dark, light, noSidebar } from '@adminjs/themes'
 import { DMMFClass, prisma } from "@celluloid/database";
@@ -55,11 +56,11 @@ const getAdminRouter = (options: Partial<AdminJSOptions> = {}) => {
     branding: {
       companyName: 'Celluloid',
       withMadeWithLove: false,
-      logo: '/admin/assets/images/logo.svg',
+      logo: '/assets/images/logo.svg',
       theme: overrides
     },
     assets: {
-      styles: ['/admin/assets/styles/override.css'],
+      styles: ['/assets/styles/override.css'],
     },
     dashboard: {
       component: Components.MyInput,
@@ -130,7 +131,12 @@ const getAdminRouter = (options: Partial<AdminJSOptions> = {}) => {
               },
             },
           },
-        }
+        },
+        features: [
+          importExportFeature({
+            componentLoader,
+          }),
+        ],
       },
       {
         resource: { model: dmmf.modelMap.Comment, client: prisma },
@@ -157,12 +163,9 @@ const getAdminRouter = (options: Partial<AdminJSOptions> = {}) => {
   };
 
 
-
   const admin = new AdminJS(adminOptions);
   if (process.env.NODE_ENV == "developement")
     admin.watch()
-
-  console.log("DATABASE_URL", process.env.DATABASE_URL);
   return AdminJSExpress.buildRouter(admin);
 };
 

packages/client/jsconfig.json

@@ -8,9 +8,6 @@
             "~components/*": [
                 "src/components/*"
             ],
-            "~hooks/*": [
-                "src/hooks/*"
-            ],
             "~images/*": [
                 "src/images/*"
             ],
@@ -40,6 +37,12 @@
             ],
             "~/*": [
                 "src/*"
+            ],
+            "~pages/*": [
+                "src/pages/*"
+            ],
+            "~hooks/*": [
+                "src/hooks/*"
             ]
         }
     }

packages/client/package.json

@@ -30,14 +30,17 @@
     "change-case": "^4.0.0",
     "connected-react-router": "6.9.3",
     "enzyme": "^3.3.0",
+    "formik": "^2.2.9",
     "get-urls": "^11.0.0",
     "history": "^4.7.2",
     "i18next": "^22.0.4",
     "i18next-browser-languagedetector": "^7.0.0",
     "linkify-urls": "^4.0.0",
     "lodash": "^4.17.21",
+    "material-ui-confirm": "^3.0.9",
     "material-ui-pickers": "^1.0.0-rc.17",
     "moment-duration-format": "^2.2.2",
+    "mui-image": "^1.0.7",
     "prop-types": "^15.6.2",
     "query-string": "^6.1.0",
     "ramda": "^0.28.0",
@@ -58,7 +61,8 @@
     "redux-thunk": "^2.3.0",
     "rooks": "^7.4.1",
     "shiitake": "^3.0.2",
-    "typescript": "^5.0.4"
+    "typescript": "^5.0.4",
+    "yup": "^1.1.1"
   },
   "browserslist": {
     "production": [
@@ -86,6 +90,7 @@
     "@types/jss": "^9.3.0",
     "@types/lodash": "^4.14.187",
     "@types/moment-duration-format": "^2.2.0",
+    "@types/mui-image": "^1.0.1",
     "@types/node": "^16.18.3",
     "@types/query-string": "^6.0.0",
     "@types/randomcolor": "^0.5.0",