feat: Json editor (#212)

* feat: Json editor

* Modified Json editor

* Modified Json editor

* chore(cms): setup json form field designs

Co-authored-by: Kati Frantz <bahdcoder@gmail.com>

examples/typescript/src/index.ts

@@ -41,7 +41,7 @@ export default tensei()
         dateTime('Date Issued').nullable(),
         textarea('Description').creationRules('required', 'max:255'),
         integer('Price').rules('required').sortable(),
-        json('Metadata').nullable(),
+        json('Metadata').nullable().rules('required'),
         belongsToMany('Category'),
         belongsToMany('Product Option'),
         belongsToMany('Order Item'),

packages/cms/core.ts

@@ -9,6 +9,7 @@ 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 { BelongsToMany as FormBelongsToMany } from './form/belongs-to-many'
 
 // Index
@@ -78,6 +79,7 @@ class Core {
       Integer: FormNumber,
       Boolean: FormBoolean,
       Textarea: FormTextarea,
+      Json: FormJson,
       ManyToOne: FormBelongsToMany,
       ManyToMany: FormBelongsToMany
     },

packages/cms/form/json/index.ts

@@ -0,0 +1,2 @@
+import FormJson from './json'
+export default FormJson

packages/cms/form/json/json.tsx

@@ -0,0 +1,109 @@
+import React from 'react'
+import styled from 'styled-components'
+import { EuiText } from '@tensei/eui/lib/components/text'
+import { Controlled as CodeMirror } from 'react-codemirror2'
+
+import 'codemirror/lib/codemirror.css'
+import 'codemirror/addon/edit/closebrackets'
+import 'codemirror/mode/javascript/javascript'
+import 'codemirror/addon/display/autorefresh'
+
+import { FormComponentProps } from '@tensei/components'
+
+const Wrapper = styled.div<{
+  focus?: boolean
+}>`
+  ${({ theme, focus }) => `
+    .react-codemirror2 {
+      cursor: text;
+      background-repeat: no-repeat;
+      background-size: 0% 100%;
+      padding: 12px;
+      border-bottom-left-radius: 6px;
+      border-bottom-right-radius: 6px;
+      background-color: ${theme.colors.formControlBackground};
+      box-shadow: ${theme.colors.formControlBoxShadow};
+
+      transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in;
+
+      ${
+        focus
+          ? `
+      background-color: #FFF;
+      background-image: ${theme.colors.formControlBgImage};
+      background-size: 100% 100%;
+      outline: none;
+      box-shadow: inset 0 0 0 1px rgb(69 45 164 / 10%);
+      `
+          : ``
+      }
+  }
+
+  .CodeMirror {
+    height: auto;
+    font-family: ${theme.font.familyCode};
+  }
+
+  .CodeMirror-scroll {
+    min-height: 6rem;
+    background-color: ${
+      focus
+        ? theme.colors.formControlBgImage
+        : theme.colors.formControlBackground
+    };
+  }
+`}
+`
+
+const JsonHeader = styled.div`
+  ${() => `
+    padding: 6px 12px;
+    font-weight: 500;
+    background-color: #fcfcfc;
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+    border: 1px solid rgb(69 45 164 / 10%);
+    border-bottom: none;
+  `}
+`
+
+const FormJson: React.FC<FormComponentProps> = ({
+  field,
+  value,
+  onChange,
+  onFocus,
+  activeField
+}) => {
+  const focused = activeField?.databaseField === field.databaseField
+
+  return (
+    <Wrapper focus={focused}>
+      <JsonHeader>
+        <EuiText size="xs">JSON TEXT</EuiText>
+      </JsonHeader>
+      <CodeMirror
+        value={value}
+        options={{
+          autoCloseBrackets: true,
+          mode: { name: 'javascript', json: true },
+          lineWrapping: true,
+          viewportMargin: Infinity,
+          indentUnit: 4,
+          indentWithTabs: true,
+          // @ts-ignore
+          height: 'auto',
+          theme: 'none',
+          autoRefresh: true
+        }}
+        autoCursor
+        onBeforeChange={(editor, data, value) => {
+          onChange(value)
+        }}
+        onFocus={onFocus}
+        {...field.attributes}
+      />
+    </Wrapper>
+  )
+}
+
+export default FormJson

packages/cms/main.tsx

@@ -27,11 +27,21 @@ const extensions = {
   colors: {
     LIGHT: {
       bgShade: '#f9f9f9',
-      primaryTransparent: 'rgba(44, 69, 239, 0.06)'
+      primaryTransparent: 'rgba(44, 69, 239, 0.06)',
+      formControlBackground: '#fbfcfd',
+      formControlBoxShadow:
+        '0 0 transparent, inset 0 0 0 1px rgb(69 45 164 / 10%)',
+      formControlBgImage:
+        'linear-gradient(to top, #2346F8, #2346F8 2px, transparent 2px, transparent 100%)'
     },
     DARK: {
       bgShade: '#f9f9f9',
-      primaryTransparent: 'rgba(44, 69, 239, 0.06)'
+      primaryTransparent: 'rgba(44, 69, 239, 0.06)',
+      formControlBackground: '#fbfcfd',
+      formControlBoxShadow:
+        '0 0 transparent, inset 0 0 0 1px rgb(69 45 164 / 10%)',
+      formControlBgImage:
+        'linear-gradient(to top, #2346F8, #2346F8 2px, transparent 2px, transparent 100%)'
     }
   }
 }

packages/cms/package.json

@@ -70,6 +70,9 @@
     "@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",

packages/cms/styled.d.ts

@@ -5,6 +5,9 @@ interface ThemeExtensions {
   colors: {
     bgShade: string
     primaryTransparent: string
+    formControlBackground?: string
+    formControlBoxShadow?: string
+    formControlBgImage?: string
   }
 }
 

packages/common/src/fields/Json.ts

@@ -13,6 +13,8 @@ export class Json extends Field {
     super(name, databaseField)
 
     this.rules('json')
+
+    this.hideOnIndex()
   }
 }