-
Notifications
You must be signed in to change notification settings - Fork 352
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add examples app with React Vanilla and Material UI renderers
This introduces a new private package `examples-app` to create a simple web page that ultimately has child pages for every example. In this initial commit, only the react vanilla and material renderers are added. Therefore, they are bundled with rollup to be able to run as standalone pages. - Add rollup configs to bundle react vanilla and material examples - Add required dev deps and upgrade rollup dev dep to ^2.78.0 for all packages - change material deps to ~5.2.2 because latest 5.x versions break api for Autocomplete - Add private package `examples-app` with a script to aggregate the examples - Add root level npm script to create the examples app - regenerate package-lock.json Part of #1706
- Loading branch information
1 parent
187b2b8
commit 5a84cd3
Showing
22 changed files
with
4,966 additions
and
3,634 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| # JSON Forms - More Forms. Less Code | ||
|
|
||
| *Complex forms in the blink of an eye* | ||
|
|
||
| JSON Forms eliminates the tedious task of writing fully-featured forms by hand by leveraging the capabilities of JSON, JSON Schema and Javascript. | ||
|
|
||
| ## Examples App | ||
|
|
||
| This package aggregates JSON Forms examples and makes them reachable via single `index.html` file. | ||
|
|
||
| Aggregating the examples assumes that packages were built and their examples bundled. | ||
| Afterwards, the examples app can be aggregated with [prepare-examples-app.js](./prepare-examples-app.js) into folder `dist`. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| <!doctype html> | ||
| <html> | ||
|
|
||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>JSON Forms Examples</title> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| </head> | ||
|
|
||
| <body> | ||
| <h1>JSON Forms Examples</h1> | ||
| <ul> | ||
| <li><a href="react-vanilla">React Vanilla Renderers</a></li> | ||
| <li><a href="react-material">React Material Renderers</a></li> | ||
| </ul> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| { | ||
| "name": "@jsonforms/examples-app", | ||
| "version": "3.1.0-alpha.0", | ||
| "private": true, | ||
| "license": "MIT", | ||
| "type": "module", | ||
| "scripts": { | ||
| }, | ||
| "devDependencies": { | ||
| "@types/fs-extra": "^9.0.13", | ||
| "fs-extra": "^11.1.0" | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| #!/usr/bin/env node | ||
|
|
||
| import { copySync } from 'fs-extra/esm'; | ||
| import { copyFileSync, mkdirSync, rmdirSync } from 'fs'; | ||
| import { dirname, join } from 'path'; | ||
| import { fileURLToPath } from 'url'; | ||
|
|
||
| const __filename = fileURLToPath(import.meta.url); | ||
| const __dirname = dirname(__filename); | ||
|
|
||
| const distDir = join(__dirname, 'dist'); | ||
| const packagesDir = join(__dirname, '..'); | ||
| const examples = { | ||
| 'react-vanilla': join(packagesDir, 'vanilla-renderers', 'example', 'dist'), | ||
| 'react-material': join(packagesDir, 'material-renderers', 'example', 'dist') | ||
| } | ||
|
|
||
| // Clean and recreate dist dir | ||
| console.log('Clean and recreate dist dir...'); | ||
| rmdirSync(distDir, { recursive: true, force: true }); | ||
| mkdirSync(distDir, { recursive: true }); | ||
|
|
||
| // Copy index and built examples | ||
| console.log('Copy index.html...'); | ||
| console.log('Copy example apps...'); | ||
| copyFileSync(join(__dirname, 'index.html'), join(distDir, 'index.html')); | ||
| Object.keys(examples).forEach(key => { | ||
| console.log(`Copying example ${key}...`); | ||
| const path = examples[key]; | ||
| copySync(path, join(distDir, key)); | ||
| }); | ||
|
|
||
| console.log('...finished'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| <!doctype html> | ||
| <html> | ||
|
|
||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>JSON Forms React Material RendererSet</title> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <link rel="stylesheet" href="bundle.css"> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div id="root"></div> | ||
| </body> | ||
| <script src="bundle.js"></script> | ||
|
|
||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import commonjs from '@rollup/plugin-commonjs'; | ||
| import json from '@rollup/plugin-json'; | ||
| import nodeResolve from '@rollup/plugin-node-resolve'; | ||
| import replace from '@rollup/plugin-replace'; | ||
| import copy from 'rollup-plugin-copy'; | ||
| import css from 'rollup-plugin-import-css'; | ||
| import typescript from 'rollup-plugin-typescript2'; | ||
|
|
||
| /** | ||
| * @type {import('rollup').RollupOptions} | ||
| */ | ||
| const config = { | ||
| input: 'example/index.ts', | ||
| output: { | ||
| file: 'example/dist/bundle.js', | ||
| format: 'iife', | ||
| sourcemap: true | ||
| }, | ||
| plugins: [ | ||
| replace({ | ||
| 'process.env.NODE_ENV': JSON.stringify('production'), | ||
| preventAssignment: true, // recommended to be set by library to be forward compatible | ||
| }), | ||
| nodeResolve({ browser: true }), | ||
| // Transform mixed because some JsonForms modules use import and require | ||
| commonjs({ transformMixedEsModules: true }), | ||
| css(), | ||
| json(), | ||
| typescript({ | ||
| tsconfigOverride: { | ||
| compilerOptions: { | ||
| // Do not emit typescript declarations for our bundled example app | ||
| declaration: false | ||
| } | ||
| }}), | ||
| copy({ | ||
| targets: [ | ||
| { | ||
| src: 'example/index.bundled.html', | ||
| dest: 'example/dist', | ||
| rename: () => 'index.html' | ||
| }, | ||
| { | ||
| src: '../examples-react/src/logo.svg', | ||
| dest: 'example/dist/assets' | ||
| } | ||
| ] | ||
| }), | ||
| ] | ||
| } | ||
|
|
||
| export default config; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| <!doctype html> | ||
| <html> | ||
|
|
||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>JSON Forms React Vanilla RendererSet</title> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <link rel="stylesheet" href="example.css"> | ||
| <link rel="stylesheet" href="example.dark.css"> | ||
| <link rel="stylesheet" href="bundle.css"> | ||
| <style type="text/css"> | ||
| #theme { | ||
| position: absolute; | ||
| color: whitesmoke; | ||
| top: 0.25em; | ||
| left: 0.25em; | ||
| } | ||
| </style> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div id="theme"></div> | ||
| <div id="root"></div> | ||
| </body> | ||
| <script src="bundle.js"></script> | ||
|
|
||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| import commonjs from '@rollup/plugin-commonjs'; | ||
| import json from '@rollup/plugin-json'; | ||
| import nodeResolve from '@rollup/plugin-node-resolve'; | ||
| import replace from '@rollup/plugin-replace'; | ||
| import copy from 'rollup-plugin-copy'; | ||
| import css from 'rollup-plugin-import-css'; | ||
| import typescript from 'rollup-plugin-typescript2'; | ||
|
|
||
| /** | ||
| * @type {import('rollup').RollupOptions} | ||
| */ | ||
| const config = { | ||
| input: 'example/index.ts', | ||
| output: { | ||
| file: 'example/dist/bundle.js', | ||
| format: 'iife', | ||
| sourcemap: true | ||
| }, | ||
| plugins: [ | ||
| replace({ | ||
| 'process.env.NODE_ENV': JSON.stringify('production'), | ||
| preventAssignment: true, // recommended to be set by library to be forward compatible | ||
| }), | ||
| nodeResolve({ browser: true }), | ||
| // Transform mixed because some JsonForms modules use import and require | ||
| commonjs({ transformMixedEsModules: true }), | ||
| css(), | ||
| json(), | ||
| typescript({ | ||
| tsconfigOverride: { | ||
| compilerOptions: { | ||
| // Do not emit typescript declarations for our bundled example app | ||
| declaration: false | ||
| } | ||
| }}), | ||
| copy({ | ||
| targets: [ | ||
| { | ||
| src: 'example/example*.css', | ||
| dest: 'example/dist' | ||
| }, | ||
| { | ||
| src: 'example/index.bundled.html', | ||
| dest: 'example/dist', | ||
| rename: () => 'index.html' | ||
| }, | ||
| { | ||
| src: '../examples-react/src/logo.svg', | ||
| dest: 'example/dist/assets' | ||
| } | ||
| ] | ||
| }), | ||
| ] | ||
| } | ||
|
|
||
| export default config; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.