Remove NX from admin app (#619)

apps/admin/.eslintrc.json

@@ -1,3 +1,4 @@
 {
-  "extends": ["plugin:@nx/react", "../../.eslintrc.json"]
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*", "node_modules"]
 }

apps/admin/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "admin",
+  "version": "0.1.0",
+  "description": "Front-end for the admin of the Meldingen application",
+  "author": "Gemeente Amsterdam",
+  "license": "EUPL-1.2",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint . --ext .ts,.tsx",
+    "test": "vitest",
+    "test:watch": "vitest watch",
+    "typecheck": "tsc --project ./tsconfig.json --noEmit"
+  },
+  "dependencies": {
+    "keycloak-js": "25.0.6",
+    "ra-data-simple-rest": "5.3.4",
+    "ra-i18n-polyglot": "5.3.4",
+    "ra-keycloak": "1.0.1",
+    "react-admin": "5.3.4",
+    "uber-json-schema-filter": "2.0.5"
+  },
+  "devDependencies": {
+    "ra-core": "5.3.4"
+  }
+}

apps/admin/src/app/Admin.tsx

@@ -1,8 +1,8 @@
 import { Admin as ReactAdmin, Resource } from 'react-admin'
 
 import { ClassificationCreate, ClassificationEdit, ClassificationList } from '../pages/classification'
-import { StaticFormList, StaticFormEdit } from '../pages/static-form'
 import { FormCreate, FormEdit, FormList } from '../pages/form/components'
+import { StaticFormList, StaticFormEdit } from '../pages/static-form'
 
 import { CustomLayout } from './components'
 import { i18nProvider, useAuthProvider } from './providers'

apps/admin/src/app/providers/dataProvider.spec.ts → apps/admin/src/app/providers/dataProvider.test.ts

@@ -1,8 +1,10 @@
+import { vi } from 'vitest'
+
 import { dataProvider } from './dataProvider'
 
 describe('dataProvider', () => {
   it('uses a PUT request for the `form` resource', async () => {
-    const httpClient = jest.fn().mockResolvedValue({ json: { id: 1 } })
+    const httpClient = vi.fn().mockResolvedValue({ json: { id: 1 } })
 
     const client = dataProvider('http://localhost:3000', httpClient)
 
@@ -19,7 +21,7 @@ describe('dataProvider', () => {
   })
 
   it('uses a PATCH request for all other resources', async () => {
-    const httpClient = jest.fn().mockResolvedValue({ json: { id: 1 } })
+    const httpClient = vi.fn().mockResolvedValue({ json: { id: 1 } })
 
     const client = dataProvider('http://localhost:3000', httpClient)
 

apps/admin/src/pages/form/components/BuilderInput.tsx

@@ -1,11 +1,10 @@
+import type { FormioSchema } from '@meldingen/formio'
+import { FormBuilder } from '@meldingen/formio'
 import type { ComponentSchema } from 'formiojs'
 import { useEffect, useState } from 'react'
 import { TextInput } from 'react-admin'
 import { useFormContext } from 'react-hook-form'
 
-import type { FormioSchema } from '@meldingen/formio'
-import { FormBuilder } from '@meldingen/formio'
-
 import styles from './BuilderInput.module.css'
 
 export const BuilderInput = () => {

apps/admin/src/pages/form/components/ClassificationInput.tsx

@@ -10,7 +10,7 @@ import styles from './ClassificationInput.module.css'
 const OptionRenderer = () => {
   const record = useRecordContext()
 
-  if (!record) return
+  if (!record) return undefined
 
   return (
     <span className={styles.autoCompleteOption}>

apps/admin/src/pages/form/components/FormCreate.tsx

@@ -1,7 +1,8 @@
+import type { FormioSchema } from '@meldingen/formio'
 import { Create } from 'react-admin'
 
-import type { FormioSchema } from '@meldingen/formio'
 import { filterFormResponse } from '../utils/filterFormResponse'
+
 import { CreateEditForm } from './CreateEditForm'
 
 export const FormCreate = () => {

apps/admin/src/pages/form/components/FormEdit.tsx

@@ -1,7 +1,8 @@
+import type { FormioSchema } from '@meldingen/formio'
 import { Edit } from 'react-admin'
 
-import type { FormioSchema } from '@meldingen/formio'
 import { filterFormResponse } from '../utils/filterFormResponse'
+
 import { CreateEditForm } from './CreateEditForm'
 
 export const FormEdit = () => {

apps/admin/src/pages/form/utils/__snapshots__/filterFormResponse.spec.tsx.snap → apps/admin/src/pages/form/utils/__snapshots__/filterFormResponse.test.tsx.snap

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`filterFormResponse renders the correct output 1`] = `
+exports[`filterFormResponse > renders the correct output 1`] = `
 {
   "classification": null,
   "components": [

apps/admin/src/pages/form/utils/filterFormResponse.ts

@@ -1,3 +1,4 @@
+import type { FormInput } from '@meldingen/api-client'
 import {
   FormCheckboxComponentInputSchema,
   FormComponentInputValidateSchema,
@@ -7,7 +8,6 @@ import {
   FormSelectComponentInputSchema,
   FormTextAreaComponentInputSchema,
   FormTextFieldComponentInputSchema,
-  FormInput,
 } from '@meldingen/api-client'
 import filter from 'uber-json-schema-filter'
 
@@ -23,7 +23,7 @@ const filterBySchemaPerType = (obj: any) => {
       return filter(FormCheckboxComponentInputSchema, obj)
     case 'textarea':
       // Add autoExpand to object if it doesn't exist, the builder doesn't do that by default
-      if (!obj.hasOwnProperty('autoExpand')) {
+      if (!Object.hasOwn(obj, 'autoExpand')) {
         return filter(FormTextAreaComponentInputSchema, { ...obj, autoExpand: false })
       }
 
@@ -51,12 +51,10 @@ export const filterFormResponse = (obj: any): FormInput => {
   // This function is used to filter an additional questions form, which is always
   // a wizard with panels containing questions. Therefore the form has a fixed depth of two levels.
   const firstLevelComponents = obj.components.map((firstLevelComponent: any) => {
-    const secondLevelComponents = firstLevelComponent.components.map((secondLevelComponent: any) => {
-      return {
-        ...filterBySchemaPerType(secondLevelComponent),
-        validate: getFilteredValidateObject(secondLevelComponent.validate),
-      }
-    })
+    const secondLevelComponents = firstLevelComponent.components.map((secondLevelComponent: any) => ({
+      ...filterBySchemaPerType(secondLevelComponent),
+      validate: getFilteredValidateObject(secondLevelComponent.validate),
+    }))
 
     const filteredObject = {
       ...filterBySchemaPerType(firstLevelComponent),

apps/admin/src/pages/static-form/StaticFormEdit.tsx

@@ -1,5 +1,5 @@
 import { FormTextAreaComponentInputSchema } from '@meldingen/api-client'
-import { FormioSchema } from '@meldingen/formio'
+import type { FormioSchema } from '@meldingen/formio'
 import { Edit, SaveButton, SimpleForm, TextInput, Toolbar } from 'react-admin'
 import filter from 'uber-json-schema-filter'
 

apps/admin/tsconfig.json

@@ -1,22 +1,13 @@
 {
+  "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "allowJs": false,
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": false,
     "jsx": "react-jsx",
     "resolveJsonModule": true,
-    "types": ["vite/client"],
+    "types": ["vite/client", "jest", "node"],
     "strict": true
   },
-  "files": [],
-  "include": [],
-  "references": [
-    {
-      "path": "./tsconfig.app.json"
-    },
-    {
-      "path": "./tsconfig.spec.json"
-    }
-  ],
-  "extends": "../../tsconfig.base.json"
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
 }

apps/admin/vite.config.ts

@@ -1,30 +1,20 @@
-/// <reference types='vitest' />
-import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'
 import react from '@vitejs/plugin-react'
-import { defineConfig } from 'vite'
+import tsconfigPaths from 'vite-tsconfig-paths'
+import { defineConfig } from 'vitest/config'
 
 export default defineConfig({
-  root: __dirname,
-  cacheDir: '../../node_modules/.vite/apps/admin',
-
+  plugins: [tsconfigPaths(), react()],
   server: {
     port: 3001,
-    host: 'localhost',
   },
-
-  plugins: [react(), nxViteTsPaths()],
-
-  // Uncomment this if you are using workers.
-  // worker: {
-  //  plugins: [ nxViteTsPaths() ],
-  // },
-
-  build: {
-    outDir: '../../dist/apps/admin',
-    emptyOutDir: true,
-    reportCompressedSize: true,
-    commonjsOptions: {
-      transformMixedEsModules: true,
+  test: {
+    coverage: {
+      enabled: true,
     },
+    globals: true,
+    environment: 'jsdom',
+    include: ['src/**/*.test.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    setupFiles: ['./vitest.setup.ts'],
+    watch: false,
   },
 })

apps/admin/vitest.setup.ts

@@ -0,0 +1,3 @@
+/// <reference types="@testing-library/jest-dom" />
+
+import '@testing-library/jest-dom/vitest'

package.json

@@ -15,10 +15,10 @@
   },
   "scripts": {
     "build": "pnpm run /^build:/",
-    "build:admin": "nx build admin",
+    "build:admin": "pnpm -F=admin build",
     "build:public": "pnpm -F=public build",
     "dev": "pnpm run /^dev:/",
-    "dev:admin": "nx dev admin",
+    "dev:admin": "pnpm -F=admin dev",
     "dev:public": "pnpm -F=public dev",
     "generate-api-client": "openapi-ts",
     "lint": "npm run lint:css && npm run lint:md && npm run prettier && nx run-many --target=lint --exclude=api-client,form-renderer && pnpm -r --no-bail lint && pnpm -r --no-bail typecheck",
@@ -43,17 +43,10 @@
     "@amsterdam/design-system-tokens": "0.13.0",
     "@formio/react": "5.3.0",
     "formiojs": "4.21.5",
-    "jest-fixed-jsdom": "0.0.9",
-    "keycloak-js": "25.0.6",
-    "ra-data-simple-rest": "5.3.4",
-    "ra-i18n-polyglot": "5.3.4",
-    "ra-keycloak": "1.0.1",
     "react": "18.3.1",
-    "react-admin": "5.3.4",
     "react-dom": "18.3.1",
     "react-hook-form": "7.53.2",
     "tslib": "2.8.1",
-    "uber-json-schema-filter": "2.0.5",
     "vite-tsconfig-paths": "5.1.3"
   },
   "devDependencies": {