0.1.1 JSON Studio (#5)

* feat: migrate from CRA to vite
* chore: update dependencies
* fix: onValidate in multiple editors
* feat: deploy to vercel

.github/workflows/deploy.yaml

@@ -0,0 +1,21 @@
+name: Vercel Production Deployment
+env:
+  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+on:
+  push:
+    branches:
+      - main
+jobs:
+  Deploy-Production:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Install Vercel CLI
+        run: npm install --global vercel@latest
+      - name: Pull Vercel Environment Information
+        run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Build Project Artifacts
+        run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Deploy Project Artifacts to Vercel
+        run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}

.github/workflows/preview.yaml

@@ -0,0 +1,21 @@
+name: Vercel Preview Deployment
+env:
+  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+on:
+  push:
+    branches-ignore:
+      - main
+jobs:
+  Deploy-Preview:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Install Vercel CLI
+        run: npm install --global vercel@latest
+      - name: Pull Vercel Environment Information
+        run: vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Build Project Artifacts
+        run: vercel build --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Deploy Project Artifacts to Vercel
+        run: vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }}

.gitignore

@@ -10,6 +10,7 @@
 
 # production
 /build
+/dist
 
 # misc
 .DS_Store
@@ -26,4 +27,5 @@ yarn-error.log*
 .eslintcache
 
 # yarn
-yarn.lock
+yarn.lock
+.vercel

README.md

@@ -1,8 +1,8 @@
-# 🖌 React JSON Editor
+# 🖌 JSON Studio - JSON Schema Based Editor
 
-![CI/CD](https://github.com/sujinleeme/react-json-editor/actions/workflows/master_deploy.yml/badge.svg)
-[![Codecov](https://img.shields.io/codecov/c/github/sujinleeme/react-json-editor)](https://codecov.io/gh/sujinleeme/react-json-editor)
-![License](https://img.shields.io/github/license/sujinleeme/react-json-editor)
+![CI/CD](https://github.com/sujinleeme/json-studio/actions/workflows/master_deploy.yml/badge.svg)
+[![Codecov](https://img.shields.io/codecov/c/github/sujinleeme/json-studio)](https://codecov.io/gh/sujinleeme/json-studio)
+![License](https://img.shields.io/github/license/sujinleeme/json-studio)
 
 ![alt text](./demo.png "demo")
 
@@ -12,14 +12,15 @@
 
 ## Built with
 
-- [create-react-app](https://reactjs.org/docs/create-a-new-react-app.html)
-- [monaco-react](https://github.com/suren-atoyan/monaco-react)
-- [fluentui-react](https://github.com/microsoft/fluentui)
-- [dirty-json](https://github.com/RyanMarcus/dirty-json)
+- [monaco-react](https://github.com/suren-atoyan/monaco-react) - Monaco Editor for React
+- [fluent ui](https://github.com/microsoft/fluentui) - A react component library developed by Microsoft
+- [dirty-json](https://github.com/RyanMarcus/dirty-json) - A JSON parser that tries to handle non-conforming or otherwise invalid JSON
+- [Ajv](https://github.com/ajv-validator/ajv) - A fastest JSON validator for Node.js and browser
+- [vite](https://vitejs.dev) and [vercel](https://vercel.com)
 
 ## Demo
 
-Visit : https://sujinleeme.github.io/react-json-editor/
+Visit to https://json-studio.vercel.app
 
 ## Installation
 
@@ -33,19 +34,11 @@ As the initialization process is supposed to load some scripts from CDN, there i
 
 See : https://github.com/suren-atoyan/monaco-react/issues/88
 
-### Error-Message-Bar
-
-`OnValidate`
-
-In this web, there are multiple editor components and one of them has broken input, only onValidate of the last component is executed and it has the other component's markers values. The absence of the API for live model makers makes it harder to provide an alternative approach.
-
-See: https://github.com/suren-atoyan/monaco-react/issues/182
-
 ## TODO
 
 - Form integration
 - Toast notification message
 
 ## License
 
-MIT (2020)
+MIT (2020~)

public/index.html → index.html

@@ -2,29 +2,26 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <meta name="description" content="Web site created using create-react-app" />
+    <link rel="apple-touch-icon" href="/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="manifest" href="/manifest.json" />
     <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
+      Notice the use of  in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
 
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>JSON Online Editor</title>
+    <title>JSON Studio</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
@@ -40,4 +37,5 @@
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
   </body>
+  <script type="module" src="/src/index.tsx"></script>
 </html>

package.json

@@ -1,15 +1,14 @@
 {
-  "name": "react-json-editor",
+  "name": "json-studio",
   "author": {
     "name": "Sujin Lee",
-    "email": "sujinlee.me@gmail.com",
-    "url": "https://sujinlee.me/"
+    "email": "sujinlee.me@gmail.com"
   },
-  "description": "A simple online json editor",
-  "version": "0.1.0",
+  "description": "JSON Schema Based Editor",
+  "version": "0.1.1",
   "repository": {
     "type": "git",
-    "url": "https://github.com/sujinleeme/react-json-editor"
+    "url": "https://github.com/sujinleeme/json-studio"
   },
   "keywords": [
     "json",
@@ -19,33 +18,48 @@
   ],
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/sujinleeme/react-json-editor/issues"
+    "url": "https://github.com/sujinleeme/json-studio/issues"
+  },
+  "homepage": "https://json-studio.vercel.app",
+  "jest": {
+    "preset": "ts-jest/presets/js-with-ts",
+    "testEnvironment": "jest-environment-jsdom",
+    "moduleNameMapper": {
+      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
+      "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
+    },
+    "modulePaths": [
+      "<rootDir>/src"
+    ]
   },
-  "homepage": "/react-json-editor/",
   "dependencies": {
-    "@fluentui/react": "^7.158.1",
-    "@monaco-editor/react": "^4.0.9",
-    "ajv": "^7.0.3",
+    "@fluentui/react": "^8.114.0",
+    "@monaco-editor/react": "^4.6.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "ajv": "^8.12.0",
+    "browserslist-to-esbuild": "^1.2.0",
     "dirty-json": "^0.9.2",
-    "monaco-editor": "^0.22.3",
-    "prettier": "^2.2.1",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-scripts": "^4.0.2",
-    "typescript": "^4.0.3",
-    "uuid": "^8.3.2",
-    "web-vitals": "^0.2.4"
+    "monaco-editor": "^0.45.0",
+    "prettier": "^3.1.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^5.3.3",
+    "uuid": "^9.0.1",
+    "vite": "^5.0.10",
+    "vite-tsconfig-paths": "^4.2.2",
+    "web-vitals": "^3.5.0"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "CI=true react-scripts test",
-    "test:coverage": "yarn test --coverage",
-    "eject": "react-scripts eject",
+    "start": "vite",
+    "build": "tsc && vite build",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage .",
+    "test:debug": "jest --inspect-brk --runInBand --no-cache",
+    "preview": "vite preview",
     "format": "prettier --write src/**/*.ts{,x}",
     "lint": "tsc --noEmit && eslint src/**/*.ts{,x}",
-    "predeploy": "yarn build",
-    "deploy": "gh-pages -d build"
+    "predeploy": "yarn build"
   },
   "husky": {
     "hooks": {
@@ -67,39 +81,29 @@
       "react-app/jest"
     ]
   },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
   "devDependencies": {
-    "@testing-library/dom": "^7.29.4",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.2.5",
-    "@testing-library/react-hooks": "^5.0.3",
-    "@testing-library/user-event": "^12.1.10",
-    "@types/jest": "^26.0.15",
-    "@types/node": "^12.0.0",
-    "@types/react": "^17.0.1",
-    "@types/react-dom": "^17.0.0",
-    "@types/uuid": "^8.3.0",
-    "@typescript-eslint/eslint-plugin": "^4.14.0",
-    "@typescript-eslint/parser": "^4.14.0",
-    "eslint": "^7.18.0",
-    "eslint-config-airbnb-typescript": "^12.0.0",
-    "eslint-config-airbnb-typescript-prettier": "^4.1.0",
-    "eslint-config-prettier": "^7.2.0",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-prettier": "^3.3.1",
-    "gh-pages": "^3.1.0",
-    "husky": "^4.3.8",
-    "lint-staged": "^10.5.3"
+    "@testing-library/dom": "^9.3.3",
+    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/jest": "^29.5.11",
+    "@types/node": "^20.10.5",
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.18",
+    "@types/uuid": "^9.0.7",
+    "@typescript-eslint/eslint-plugin": "^6.15.0",
+    "@typescript-eslint/parser": "^6.15.0",
+    "eslint": "^8.56.0",
+    "eslint-config-airbnb-typescript": "^17.1.0",
+    "eslint-config-airbnb-typescript-prettier": "^5.0.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-prettier": "^5.1.2",
+    "husky": "^8.0.3",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "lint-staged": "^15.2.0",
+    "ts-jest": "^29.1.1"
   }
 }

src/App.tsx

@@ -5,11 +5,11 @@ import { Stack, IStackStyles, mergeStyleSets } from "@fluentui/react";
 import { AppBar } from "./components/app-bar";
 import { CommandBar } from "./components/command-bar";
 import { JSONEditor } from "./components/json-editor";
-import { SampleData } from "./components/json-editor/mock-data";
+import { SampleData } from "./components/json-editor/utils/__mocks__/mock-data";
 import { useToggle } from "./hooks";
 
 enum Editor {
-  Schema = "Schema",
+  Schema = "JSON Schema",
   InputJson = "Input JSON",
 }
 
@@ -54,7 +54,7 @@ const App = (): JSX.Element => {
     }
   }, [isSchemaEditorOn, isSchemaSampleDataOn, toggleSchemaSampleDataOn]);
 
-  const handleSchemaValueChange = (value: string) => setSchemaValue(value);
+  const handleSchemaValueChange = (value?: string) => setSchemaValue(value);
 
   const getSchemaValue = () =>
     isSchemaSampleDataOn && !schemaValue ? SampleData.schema : schemaValue;