Merge remote-tracking branch 'origin/feat/v4-1' into beta

.eslintrc.cjs

@@ -10,8 +10,10 @@ module.exports = {
   ],
   ignorePatterns: [
     '*/build/**/*',
+    '*/dist/**/*',
     '*.json',
     '*.txt',
+    '*.mp4',
     'yarn.lock',
     '*.yaml',
     '*.md',

.gitignore

@@ -162,3 +162,5 @@ build
 
 example-app/cypress/videos
 example-app/public
+example-app/yarn-error.log*
+.nova

example-app/cypress.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from 'cypress'
+import pluginConfig from './cypress/plugins/index.js'
+
+export default defineConfig({
+  e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
+    setupNodeEvents(on, config) {
+      pluginConfig(on, config)
+    },
+    baseUrl: 'http://localhost:3000/admin',
+  },
+})

example-app/cypress/plugins/index.js

@@ -16,7 +16,9 @@
  * @type {Cypress.PluginConfig}
  */
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-module.exports = (on, config) => {
+const pluginConfig = (on, config) => {
   // `on` is used to hook into various events Cypress emits
   // `config` is the resolved Cypress config
 }
+
+export default pluginConfig

example-app/ormconfig.js

@@ -1,16 +1,18 @@
 // eslint-disable-next-line @typescript-eslint/no-var-requires
-const path = require('path')
+import path from 'path'
+import { fileURLToPath } from 'node:url'
 
+const dirname = fileURLToPath(new URL('.', import.meta.url))
 const rootDir = 'build/src'
 
-module.exports = {
+export default {
   type: 'postgres',
   host: process.env.POSTGRES_HOST || 'localhost',
   port: +(process.env.POSTGRES_PORT || 5432),
   username: process.env.POSTGRES_USER || 'postgres',
   password: process.env.POSTGRES_PASSWORD || 'secret',
   database: process.env.POSTGRES_DATABASE || 'postgres',
-  entities: [`${__dirname}/./**/*.entity.js`],
+  entities: [`${dirname}/./**/*.entity.js`],
   migrations: [path.join(rootDir, '/migration/**/*.js')],
   subscribers: [path.join(rootDir, '/subscriber/**/*.js')],
   synchronize: true,

example-app/package.json

@@ -2,35 +2,37 @@
   "name": "example-app",
   "version": "1.0.0",
   "main": "index.js",
+  "type": "module",
   "license": "MIT",
   "scripts": {
     "build": "tsc",
-    "start": "yarn build && node build/index.js",
-    "clean": "rm -rf build && mkdir build",
-    "dev": "yarn clean && concurrently \"wait-on build/src/index.js && nodemon --ext '.js' --watch ../build --watch ./build --ignore 'cypress/**/*.js' node build/src/index.js\" \"yarn build --watch\"",
+    "start": "yarn build && node dist/example-app/src/index.js",
+    "clean": "rm -rf dist && mkdir dist",
+    "dev": "yarn clean && concurrently \"wait-on dist/src/index.js && nodemon --ext '.js' --watch ../build --watch ./dist --ignore 'cypress/**/*.js' node dist/example-app/src/index.js\" \"yarn build --watch\"",
     "cypress:open": "cypress open",
     "cypress:run": "cypress run"
   },
   "devDependencies": {
-    "@types/express": "^4.17.7",
-    "concurrently": "^5.2.0",
-    "cypress": "^4.11.0",
+    "@types/express": "^4.17.17",
+    "concurrently": "^8.0.1",
     "nodemon": "^2.0.4",
-    "ts-node": "^8.10.2",
-    "typescript": "^3.9.7",
-    "wait-on": "^5.2.0"
+    "ts-node": "^10.9.1",
+    "typescript": "^5.0.2",
+    "wait-on": "^7.0.1"
   },
   "dependencies": {
-    "@adminjs/express": "^3.0.0",
-    "@adminjs/typeorm": "1.4.0",
-    "@adminjs/upload": "../",
+    "@adminjs/design-system": "^4.0.0-beta-v4.8",
+    "@adminjs/express": "^6.0.0-beta.3",
+    "@adminjs/typeorm": "5.0.0-beta.1",
     "@google-cloud/storage": "^5.3.0",
-    "adminjs": "^3.3.1",
-    "dotenv": "^8.2.0",
-    "express": "^4.17.1",
+    "adminjs": "7.0.0-beta-v7.4",
+    "cypress": "^12.9.0",
+    "dotenv": "^16.0.3",
+    "express": "^4.18.2",
     "express-formidable": "^1.2.0",
-    "express-session": "^1.17.1",
+    "express-session": "^1.17.3",
     "pg": "^8.3.0",
-    "typeorm": "^0.2.25"
-  }
+    "typeorm": "^0.3.12"
+  },
+  "relativeDependencies": {}
 }

example-app/src/admin/component-loader.ts

@@ -0,0 +1,5 @@
+import { ComponentLoader } from 'adminjs'
+
+const componentLoader = new ComponentLoader()
+
+export { componentLoader }

example-app/src/admin/resources/custom/custom.resource.ts

@@ -1,9 +1,10 @@
 /* eslint-disable no-console */
 /* eslint-disable class-methods-use-this */
-import uploadFeature, { BaseProvider } from '@adminjs/upload'
+import uploadFeature, { BaseProvider } from '../../../../../src/index.js'
+import { componentLoader } from '../../component-loader.js'
 
-import { CreateResourceResult } from '../create-resource-result.type'
-import { Custom } from '../../../custom/custom.entity'
+import { CreateResourceResult } from '../create-resource-result.type.js'
+import { Custom } from '../../../custom/custom.entity.js'
 
 class MyProvider extends BaseProvider {
   constructor() {
@@ -31,6 +32,7 @@ const createPhotoResource = (): CreateResourceResult<typeof Custom> => ({
     properties: { file: { isVisible: { list: true, show: true, edit: true, filter: false } } },
   },
   features: [uploadFeature({
+    componentLoader,
     provider: new MyProvider(),
     properties: { file: 'file', key: 'filePath', bucket: 'bucket', filePath: 'path' },
     validation: { mimeTypes: ['image/png'] },

example-app/src/admin/resources/multi/multi.resource.ts

@@ -1,7 +1,7 @@
-import uploadFeature from '@adminjs/upload'
-
-import { CreateResourceResult } from '../create-resource-result.type'
-import { Multi } from '../../../multi/multi.entity'
+import uploadFeature from '../../../../../src/index.js'
+import { componentLoader } from '../../component-loader.js'
+import { CreateResourceResult } from '../create-resource-result.type.js'
+import { Multi } from '../../../multi/multi.entity.js'
 
 const photoProperties = (options = {}) => ({
   bucket: {
@@ -28,6 +28,7 @@ const photoProperties = (options = {}) => ({
 
 const uploadFeatureFor = (name?: string, multiple = false) => (
   uploadFeature({
+    componentLoader,
     provider: {
       gcp: {
         bucket: process.env.GOOGLE_BUCKET as string,

example-app/src/admin/resources/photo/photo.resource.ts

@@ -1,15 +1,16 @@
-import uploadFeature from '@adminjs/upload'
-
-import { CreateResourceResult } from '../create-resource-result.type'
-import { Photo } from '../../../photo/photo.entity'
+import uploadFeature from '../../../../../src/index.js'
+import { componentLoader } from '../../component-loader.js'
+import { CreateResourceResult } from '../create-resource-result.type.js'
+import { Photo } from '../../../photo/photo.entity.js'
 
 const createPhotoResource = (): CreateResourceResult<typeof Photo> => ({
   resource: Photo,
   options: {
     listProperties: ['id', 's3Key', 'bucket', 'path'],
   },
   features: [uploadFeature({
-    provider: { local: { bucket: 'public' } },
+    componentLoader,
+    provider: { local: { bucket: 'public', opts: {} } },
     properties: { file: 'file', key: 's3Key', bucket: 'bucket', mimeType: 'mime' },
     validation: { mimeTypes: ['image/png'] },
   })],

example-app/src/admin/resources/post/post.resource.ts

@@ -1,17 +1,19 @@
-import uploadFeature from '@adminjs/upload'
-
-import { CreateResourceResult } from '../create-resource-result.type'
-import { Post } from '../../../post/post.entity'
+import uploadFeature from '../../../../../src/index.js'
+import { componentLoader } from '../../component-loader.js'
+import { CreateResourceResult } from '../create-resource-result.type.js'
+import { Post } from '../../../post/post.entity.js'
 
 const createPostResource = (): CreateResourceResult<typeof Post> => ({
   resource: Post,
   options: {
     listProperties: ['id', 'bucketKey', 'bucket', 'path'],
   },
   features: [uploadFeature({
+    componentLoader,
     provider: {
       gcp: {
-        bucket: process.env.GCP_STORAGE_BUCKET,
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        bucket: process.env.GCP_STORAGE_BUCKET!,
         expires: 0,
       },
     },

example-app/src/admin/resources/user/user.resource.ts

@@ -1,14 +1,16 @@
-import uploadFeature from '@adminjs/upload'
-import { CreateResourceResult } from '../create-resource-result.type'
-import credentials from '../../../credentials'
-import { User } from '../../../user/user.entity'
+import uploadFeature from '../../../../../src/index.js'
+import { componentLoader } from '../../component-loader.js'
+import { CreateResourceResult } from '../create-resource-result.type.js'
+import credentials from '../../../credentials.js'
+import { User } from '../../../user/user.entity.js'
 
 const createUserResource = (): CreateResourceResult<typeof User> => ({
   resource: User,
   options: {
     listProperties: ['id', 'avatar', 'email', 'test'],
   },
   features: [uploadFeature({
+    componentLoader,
     provider: { aws: credentials },
     properties: {
       filename: 'name',

example-app/src/index.ts

@@ -1,20 +1,24 @@
 /* eslint-disable import/first */
 import path from 'path'
+import * as url from 'url'
 import { config } from 'dotenv'
 
-config({ path: path.join(__dirname, '../../.env') })
+const dirname = url.fileURLToPath(new URL('.', import.meta.url))
+
+config({ path: path.join(dirname, '../../.env') })
 
 import express from 'express'
 import AdminJS from 'adminjs'
-import { buildRouter } from '@adminjs/express'
+import AdminJSExpress from '@adminjs/express'
 import { Database, Resource } from '@adminjs/typeorm'
 import { createConnection } from 'typeorm'
+import { componentLoader } from './admin/component-loader.js'
 
-import createPhotoResource from './admin/resources/photo/photo.resource'
-import createUserResource from './admin/resources/user/user.resource'
-import createCustomResource from './admin/resources/custom/custom.resource'
-import createPostResource from './admin/resources/post/post.resource'
-import createMultiResource from './admin/resources/multi/multi.resource'
+import createPhotoResource from './admin/resources/photo/photo.resource.js'
+import createUserResource from './admin/resources/user/user.resource.js'
+import createCustomResource from './admin/resources/custom/custom.resource.js'
+import createPostResource from './admin/resources/post/post.resource.js'
+import createMultiResource from './admin/resources/multi/multi.resource.js'
 
 const PORT = 3000
 
@@ -24,6 +28,7 @@ const run = async () => {
   const app = express()
   app.use('/public', express.static('public'))
   const admin = new AdminJS({
+    componentLoader,
     resources: [
       createPhotoResource(),
       createUserResource(),
@@ -47,7 +52,7 @@ const run = async () => {
 
   admin.watch()
 
-  const router = buildRouter(admin)
+  const router = AdminJSExpress.buildRouter(admin)
 
   app.use(admin.options.rootPath, router)
 

example-app/src/photo/photo.entity.ts

@@ -11,7 +11,7 @@ import {
   OneToMany,
 } from 'typeorm'
 
-import { RawFile } from '../utils/types'
+import { RawFile } from '../utils/types.js'
 
 @Entity({ name: 'photos' })
 export class Photo extends BaseEntity {

example-app/tsconfig.json

@@ -1,24 +1,21 @@
 {
   "compilerOptions": {
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "outDir": "./build",
-    "target": "es2017",
+    "jsx": "preserve",
+    "baseUrl": "./",
+    "outDir": "dist",
+    "target": "esnext",
+    "module": "nodenext",
+    "moduleResolution": "nodenext",
     "esModuleInterop": true,
-    "jsx": "react",
     "strictNullChecks": true,
     "strictPropertyInitialization": false,
     "strictFunctionTypes": true,
     "strictBindCallApply": true,
     "noImplicitThis": true,
-    "moduleResolution": "node",
-    "module": "commonjs",
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
     "types": ["cypress"],
-    "paths": {
-      "react": ["node_modules/@types/react"],
-      "adminjs": ["node_modules/adminjs"],
-    },
-    "baseUrl": "."
+    "skipLibCheck": true,
   },
-  "include": ["./src/**/*", "./cypress/**/*", "ormconfig.js", "../src/upload-file"]
+  "include": [ "ormconfig.js", "./src/**/*", "./cypress/**/*", "../src/**/*"]
 }