feat(cms): setup custom fields

upgrade to typescript v4.5.4 create @tensei/field-json package add styled library to global tensei instance
tenseijs · Dec 16, 2021 · 53067e2 · 53067e2
1 parent 4af29e9
commit 53067e2
Show file tree

Hide file tree

Showing 53 changed files with 1,237 additions and 225 deletions.
diff --git a/examples/typescript/package.json b/examples/typescript/package.json
@@ -22,7 +22,7 @@
     "@types/node": "^15.12.4",
     "nodemon": "^2.0.7",
     "ts-node": "^10.4.0",
-    "typescript": "^4.3.4"
+    "typescript": "^4.5.4"
   },
   "private": true
 }
diff --git a/examples/typescript/src/index.ts b/examples/typescript/src/index.ts
@@ -3,10 +3,12 @@ import { rest } from '@tensei/rest'
 import { auth } from '@tensei/auth'
 import { graphql } from '@tensei/graphql'
 import { files, media } from '@tensei/media'
+import { jsonPlugin } from '@tensei/field-json'
 
 import {
   tensei,
   welcome,
+  json,
   cors,
   resource,
   text,
@@ -18,7 +20,6 @@ import {
   select,
   boolean,
   dateTime,
-  json,
   hasMany
 } from '@tensei/core'
 
@@ -72,31 +73,28 @@ export default tensei()
         belongsToMany('Product')
       ])
       .displayField('Name'),
-    resource('Review')
-      .fields([
-        text('Headline').required(),
-        belongsTo('Customer').nullable(),
-        text('Name').nullable(),
-        text('Email').nullable(),
-        textarea('Content').required(),
-        integer('Rating').required().min(0).max(5),
-        boolean('Approved').default(false).hideOnCreate().hideOnCreateApi(),
-        belongsTo('Product')
-      ]),
-    resource('Order')
-      .fields([
-        integer('Total').required(),
-        belongsTo('Customer'),
-        text('Stripe Checkout ID').hideOnIndex(),
-        belongsToMany('Product')
-      ]),
-    resource('Order Item')
-      .fields([
-        integer('Quantity').required(),
-        integer('Total').required(),
-        belongsTo('Order').required(),
-        belongsTo('Product').required()
-      ]),
+    resource('Review').fields([
+      text('Headline').required(),
+      belongsTo('Customer').nullable(),
+      text('Name').nullable(),
+      text('Email').nullable(),
+      textarea('Content').required(),
+      integer('Rating').required().min(0).max(5),
+      boolean('Approved').default(false).hideOnCreate().hideOnCreateApi(),
+      belongsTo('Product')
+    ]),
+    resource('Order').fields([
+      integer('Total').required(),
+      belongsTo('Customer'),
+      text('Stripe Checkout ID').hideOnIndex(),
+      belongsToMany('Product')
+    ]),
+    resource('Order Item').fields([
+      integer('Quantity').required(),
+      integer('Total').required(),
+      belongsTo('Order').required(),
+      belongsTo('Product').required()
+    ]),
     resource('Option')
       .fields([
         text('Name').required(),
@@ -127,6 +125,7 @@ export default tensei()
   ])
   .plugins([
     welcome(),
+    jsonPlugin().plugin(),
     cms().plugin(),
     media().plugin(),
     auth()

diff --git a/examples/typescript/tsconfig.json b/examples/typescript/tsconfig.json
@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "module": "commonjs",
-    "declaration": false,
+    "declaration": true,
     "outDir": "./build",
     "strict": true,
     "baseUrl": "./src",

diff --git a/packages/auth/package.json b/packages/auth/package.json
@@ -16,7 +16,7 @@
     "jest": "^26.0.1",
     "prettier": "^2.0.5",
     "supertest": "^4.0.2",
-    "typescript": "^4.2.4"
+    "typescript": "^4.5.4"
   },
   "scripts": {
     "prettier": "prettier --write './**/*.{js,json,ts,css}'",

diff --git a/packages/auth/src/index.ts b/packages/auth/src/index.ts
@@ -12,7 +12,6 @@ import {
   array,
   textarea,
   belongsTo,
-  belongsToMany,
   dateTime,
   DataPayload,
   FieldContract,
@@ -1220,7 +1219,7 @@ export class Auth implements AuthContract {
               .handle(async (request, { formatter: { ok, unauthorized } }) => {
                 try {
                   return ok(await this.handleRefreshTokens(request as any))
-                } catch (error) {
+                } catch (error: any) {
                   return unauthorized({
                     message: error.message || 'Invalid refresh token.'
                   })
@@ -2281,14 +2280,16 @@ export class Auth implements AuthContract {
     return this.populateContextFromToken(token, ctx)
   }
 
-  private validateForgotPassword = async (payload: DataPayload) => {
+  private validateForgotPassword = async (
+    payload: DataPayload
+  ): Promise<[boolean, DataPayload]> => {
     try {
       const { email } = await validateAll(payload, {
         email: 'required|email'
       })
 
       return [true, { email }]
-    } catch (errors) {
+    } catch (errors: any) {
       return [false, errors]
     }
   }
@@ -2361,15 +2362,17 @@ export class Auth implements AuthContract {
     return true
   }
 
-  private validateResetPassword = async (payload: DataPayload) => {
+  private validateResetPassword = async (
+    payload: DataPayload
+  ): Promise<[boolean, DataPayload]> => {
     try {
       const { token, password } = await validateAll(payload, {
         token: 'required|string',
         password: 'required|string|min:8'
       })
 
       return [true, { token, password }]
-    } catch (errors) {
+    } catch (errors: any) {
       return [false, errors]
     }
   }

diff --git a/packages/cashier/package.json b/packages/cashier/package.json
@@ -16,7 +16,7 @@
     "jest": "^26.0.1",
     "prettier": "^2.0.5",
     "supertest": "^4.0.2",
-    "typescript": "^4.2.4"
+    "typescript": "^4.5.4"
   },
   "scripts": {
     "prettier": "prettier --write './**/*.{js,json,ts,css}'",

diff --git a/packages/cli/_templates/default/new/package.json.ejs.t b/packages/cli/_templates/default/new/package.json.ejs.t
@@ -29,6 +29,6 @@ to: <%= h.changeCase.param(name) %>/package.json
         "postcss": "^8.2.4",
         "tailwindcss": "^2.0.2",
         "ts-loader": "^8.0.14",
-        "typescript": "^4.2.4"
+        "typescript": "^4.5.4"
     }
 }
diff --git a/packages/cli/src/BaseCommands/Build.ts b/packages/cli/src/BaseCommands/Build.ts
@@ -48,7 +48,7 @@ export const build = command('build')
       if (!compiled) {
         this.exitCode = 1
       }
-    } catch (error) {
+    } catch (error: any) {
       this.logger.fatal(error)
       this.exitCode = 1
     }

diff --git a/packages/cli/src/BaseCommands/Compiler/Compiler.ts b/packages/cli/src/BaseCommands/Compiler/Compiler.ts
@@ -61,7 +61,7 @@ export class Compiler {
   private async copyFiles(files: string[], outDir: string) {
     try {
       await copyfiles(files, outDir, { cwd: this.appRoot, parents: true })
-    } catch (error) {
+    } catch (error: any) {
       if (!error.message.includes("the file doesn't exist")) {
         throw error
       }

diff --git a/packages/cli/src/Kernel/index.ts b/packages/cli/src/Kernel/index.ts
@@ -299,7 +299,7 @@ export class Kernel implements KernelContract {
 
     try {
       await this.exitHandler(this)
-    } catch (exitHandlerError) {
+    } catch (exitHandlerError: any) {
       logger.warning(
         'Expected exit handler to exit the process. Instead it raised an exception'
       )

diff --git a/packages/cms/core.ts b/packages/cms/core.ts
@@ -1,6 +1,15 @@
 import Qs from 'qs'
 import Axios, { AxiosRequestConfig } from 'axios'
-import * as Lib from '@tensei/components'
+import * as Lib from '@tensei/eui'
+import {
+  ResourceContract,
+  TenseiState,
+  TenseiCtxInterface,
+  TenseiRegisterFunction,
+  Tensei,
+  CmsRoute
+} from '@tensei/components'
+import * as styled from 'styled-components'
 
 // Form
 import FormText from './form/text'
@@ -9,7 +18,6 @@ import FormNumber from './form/number'
 import FormSlug from './form/slug'
 import FormBoolean from './form/boolean'
 import FormSelect from './form/select'
-import FormJson from './form/json'
 import FormPassword from './form/password'
 import { BelongsToMany as FormBelongsToMany } from './form/belongs-to-many'
 
@@ -22,6 +30,7 @@ import IndexNumber from './index/number'
 import { IndexSelect } from './index/select'
 
 class Core {
+  styled = {} as any
   state = (() => {
     let config = {}
     let admin = null
@@ -30,7 +39,7 @@ class Core {
       [key: string]: boolean
     } = {}
     let resourcesMap: {
-      [key: string]: Lib.ResourceContract
+      [key: string]: ResourceContract
     } = {}
     let registered = false
 
@@ -59,7 +68,7 @@ class Core {
       permissions,
       registered,
       resourcesMap
-    } as Lib.TenseiState
+    } as TenseiState
   })()
 
   constructor() {
@@ -72,13 +81,11 @@ class Core {
 
   getPath = (path: string) => `/${this.state.config.dashboardPath}/${path}`
 
-  private hooks: Lib.TenseiRegisterFunction[] = []
+  private hooks: TenseiRegisterFunction[] = []
 
-  lib: Lib.Tensei['lib'] = {
-    ...Lib
-  }
+  eui: Tensei['eui'] = Lib as any
 
-  components: Lib.Tensei['components'] = {
+  components: Tensei['components'] = {
     form: {
       Slug: FormSlug,
       Text: FormText,
@@ -87,7 +94,6 @@ class Core {
       Integer: FormNumber,
       Boolean: FormBoolean,
       Textarea: FormTextarea,
-      Json: FormJson,
       ManyToOne: FormBelongsToMany,
       ManyToMany: FormBelongsToMany,
       OneToMany: FormBelongsToMany
@@ -103,9 +109,9 @@ class Core {
     }
   }
 
-  routes: Lib.CmsRoute[] = []
+  routes: CmsRoute[] = []
 
-  route = (route: Partial<Lib.CmsRoute>) => {
+  route = (route: Partial<CmsRoute>) => {
     this.routes.push({
       ...(route as any),
       path: this.getPath(route.path!),
@@ -115,7 +121,7 @@ class Core {
     })
   }
 
-  ctx: Lib.TenseiCtxInterface = {} as any
+  ctx: TenseiCtxInterface = {} as any
 
   client = Axios.create({
     baseURL: this.state.config.apiPath,
@@ -170,7 +176,7 @@ class Core {
     }
   }
 
-  register = (fn: Lib.TenseiRegisterFunction) => {
+  register = (fn: TenseiRegisterFunction) => {
     this.hooks.push(fn)
   }
 
@@ -201,3 +207,7 @@ class Core {
 
 window.axios = Axios
 window.Tensei = new Core()
+window.Tensei.styled = {
+  ...styled,
+  styled: styled.default
+}
diff --git a/packages/cms/form/json/index.ts b/packages/cms/form/json/index.ts
diff --git a/packages/cms/main.tsx b/packages/cms/main.tsx
@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom'
 import { BrowserRouter } from 'react-router-dom'
 import './core'
 import './load-icons'
-import { ThemeProvider as StyledThemeProvider } from 'styled-components'
+import { ThemeProvider } from 'styled-components'
 
 import { CmsRoute } from '@tensei/components'
 import { useAuthStore } from './store/auth'
@@ -75,9 +75,9 @@ const App: React.FunctionComponent = ({ children }) => {
         toastLifeTimeMs={6000}
         dismissToast={remove}
       ></EuiGlobalToastList>
-      <StyledThemeProvider theme={euiTheme}>
+      <ThemeProvider theme={euiTheme}>
         {booted ? children : 'Booting app...'}
-      </StyledThemeProvider>
+      </ThemeProvider>
     </>
   )
 }

diff --git a/packages/cms/package.json b/packages/cms/package.json
@@ -49,7 +49,9 @@
     "speakingurl": "^14.0.1",
     "throttle-debounce": "^3.0.1",
     "ts-loader": "^8.0.11",
-    "typescript": "^4.2.4",
+    "typescript": "^4.5.4",
+    "@tensei/eui": "1.0.5",
+    "styled-components": "^5.3.3",
     "webpack-bundle-analyzer": "^4.5.0",
     "webpack-require-from": "^1.8.6"
   },
@@ -68,11 +70,7 @@
   },
   "dependencies": {
     "@tensei/core": "^0.10.0",
-    "@tensei/eui": "1.0.3",
     "@tensei/mail": "^0.10.0",
-    "@types/codemirror": "^5.60.5",
-    "react-codemirror2": "^7.2.1",
-    "codemirror": "^5.64.0",
     "@types/csurf": "^1.11.0",
     "@types/express-session": "^1.17.3",
     "csurf": "^1.11.0",
@@ -81,8 +79,6 @@
     "moment": "^2.29.1",
     "passport": "^0.4.1",
     "passport-local": "^1.0.0",
-    "styled-components": "^5.3.3",
-    "throttle-debounce": "^3.0.1",
     "zustand": "^3.6.5"
   }
 }