From bbb76880d675def9dede78bf65c68750a82b8bfa Mon Sep 17 00:00:00 2001 From: Martin Marosi Date: Mon, 16 Sep 2019 14:39:43 +0200 Subject: [PATCH 001/131] Initial next setup. --- packages/react-renderer-demo/.babelrc | 16 +- .../react-renderer-demo/config/jest.setup.js | 4 - .../config/webpack.config.js | 145 ------------------ packages/react-renderer-demo/demo/index.ejs | 18 --- packages/react-renderer-demo/demo/index.html | 18 --- packages/react-renderer-demo/demo/index.js | 6 - packages/react-renderer-demo/next.config.js | 56 +++++++ .../react-renderer-demo/package-lock.json | 77 ---------- packages/react-renderer-demo/package.json | 35 +---- packages/react-renderer-demo/pages/_app.js | 33 ++++ .../react-renderer-demo/pages/_document.js | 78 ++++++++++ packages/react-renderer-demo/pages/index.js | 31 ++++ .../scripts/after_success.sh | 6 - packages/react-renderer-demo/src/theme.js | 9 ++ 14 files changed, 228 insertions(+), 304 deletions(-) delete mode 100644 packages/react-renderer-demo/config/jest.setup.js delete mode 100644 packages/react-renderer-demo/config/webpack.config.js delete mode 100644 packages/react-renderer-demo/demo/index.ejs delete mode 100644 packages/react-renderer-demo/demo/index.html delete mode 100644 packages/react-renderer-demo/demo/index.js create mode 100644 packages/react-renderer-demo/next.config.js delete mode 100644 packages/react-renderer-demo/package-lock.json create mode 100644 packages/react-renderer-demo/pages/_app.js create mode 100644 packages/react-renderer-demo/pages/_document.js create mode 100644 packages/react-renderer-demo/pages/index.js delete mode 100644 packages/react-renderer-demo/scripts/after_success.sh create mode 100644 packages/react-renderer-demo/src/theme.js diff --git a/packages/react-renderer-demo/.babelrc b/packages/react-renderer-demo/.babelrc index 03b7f90e9..c7ab1f1fb 100644 --- a/packages/react-renderer-demo/.babelrc +++ b/packages/react-renderer-demo/.babelrc @@ -1,4 +1,14 @@ { - "presets": ["@babel/preset-env", "@babel/preset-react"], - "plugins": ["@babel/plugin-syntax-dynamic-import", "lodash", "@babel/plugin-proposal-class-properties"] -} + "presets": [ + [ + "next/babel", + { + "transform-runtime": { + "useESModules": false + } + } + ] + ], + "plugins": [] + } + \ No newline at end of file diff --git a/packages/react-renderer-demo/config/jest.setup.js b/packages/react-renderer-demo/config/jest.setup.js deleted file mode 100644 index 82edfc9e5..000000000 --- a/packages/react-renderer-demo/config/jest.setup.js +++ /dev/null @@ -1,4 +0,0 @@ -import { configure } from 'enzyme'; -import Adapter from 'enzyme-adapter-react-16'; - -configure({ adapter: new Adapter() }); diff --git a/packages/react-renderer-demo/config/webpack.config.js b/packages/react-renderer-demo/config/webpack.config.js deleted file mode 100644 index 1de25f04a..000000000 --- a/packages/react-renderer-demo/config/webpack.config.js +++ /dev/null @@ -1,145 +0,0 @@ -const TerserPlugin = require('terser-webpack-plugin'); -const HtmlWebPackPlugin = require('html-webpack-plugin'); -const MiniCssExtractPlugin = require('mini-css-extract-plugin'); -const resolve = require('path').resolve; -const merge = require('webpack-merge'); -const path = require('path'); -const HtmlWebpackPlugin = require('html-webpack-plugin'); - -const commonConfig = { - resolve: { - alias: { - 'docs/components': path.resolve(__dirname, './../src/docs-components'), - }, - }, - node: { - fs: 'empty', - }, - module: { - rules: [{ - test: /\.(js|jsx)$/, - exclude: /node_modules/, - use: { - loader: 'babel-loader', - }, - }, { - test: /\.(sa|sc|c)ss$/, - use: [ 'style-loader', 'css-loader', 'sass-loader', 'resolve-url-loader' ], - }, { - test: /\.(png|jpg|gif|svg|woff|ttf|eot)/, - loader: 'url-loader', - }, { - test: /\.mdx?$/, - use: [ - 'babel-loader', - '@mdx-js/loader', - ], - }, - ], - }, -}; - -const htmlPlugin = new HtmlWebPackPlugin({ - template: './demo/index.html', - filename: './index.html', -}); - -const devConfig = { - mode: 'development', - entry: './demo/index.js', - output: { - publicPath: '/', - path: resolve('../dist'), - filename: '[name].[hash].js', - }, - devServer: { - historyApiFallback: true, - contentBase: resolve('public'), - publicPath: '/', - }, - devtool: 'source-map', - plugins: [ htmlPlugin ], -}; - -const demoTemplates = [ './index.html', './200.html', './404.html' ]; -const templatePlugins = demoTemplates.map(function(templateName) { - return new HtmlWebPackPlugin({ - hash: false, - filename: templateName, - template: './demo/index.ejs', - }); -}); - -const prodConfig = { - mode: 'production', - entry: './demo/index.js', - optimization: { - minimizer: [ - new TerserPlugin({ - cache: true, - parallel: true, - terserOptions: { - keep_classnames: true, - keep_fnames: true, - }, - }), - ], - }, - output: { - path: resolve('./public'), - filename: 'index.[contenthash].js', - chunkFilename: '[name].chunk.[contenthash].js', - publicPath: '/', - }, - plugins: [].concat(templatePlugins), -}; - -const vendorConfig = { - mode: 'production', - entry: './src/vendor.js', - output: { - path: resolve('./public'), - filename: 'vendor.js', - }, - module: { - rules: [ - { - test: /\.(sa|sc|c)ss$/, - use: [ MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader', 'resolve-url-loader' ], - }, { - test: /\.(png|jpg|gif|svg|woff|ttf|eot)/, - loader: 'url-loader', - }, - ], - }, - plugins: [ new MiniCssExtractPlugin({ filename: 'vendor.css' }) ], -}; - -const pf4vendorConfig = { - mode: 'production', - entry: './src/vendor4.js', - output: { - path: resolve('./public'), - filename: 'vendor4.js', - }, - module: { - rules: [ - { - test: /\.(sa|sc|c)ss$/, - use: [ MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader', 'resolve-url-loader' ], - }, { - test: /\.(png|jpg|gif|svg|woff|ttf|eot)/, - loader: 'url-loader', - }, - ], - }, - plugins: [ new MiniCssExtractPlugin({ filename: 'vendor4.css' }) ], -}; - -module.exports = env => ({ - dev: merge(commonConfig, devConfig), - prod: merge(commonConfig, prodConfig), - vendor: vendorConfig, - vendor4: pf4vendorConfig, -})[env]; - diff --git a/packages/react-renderer-demo/demo/index.ejs b/packages/react-renderer-demo/demo/index.ejs deleted file mode 100644 index a0ef74c1c..000000000 --- a/packages/react-renderer-demo/demo/index.ejs +++ /dev/null @@ -1,18 +0,0 @@ - - - - - - - Data driven forms docs - - - - - - - -
- - - diff --git a/packages/react-renderer-demo/demo/index.html b/packages/react-renderer-demo/demo/index.html deleted file mode 100644 index 6ea20a091..000000000 --- a/packages/react-renderer-demo/demo/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - - - - Data driven forms - - - - - - - -
- - - diff --git a/packages/react-renderer-demo/demo/index.js b/packages/react-renderer-demo/demo/index.js deleted file mode 100644 index ef9cec56e..000000000 --- a/packages/react-renderer-demo/demo/index.js +++ /dev/null @@ -1,6 +0,0 @@ -/* eslint-disable */ -import React from "react"; -import ReactDOM from "react-dom"; -import App from '../src'; - -ReactDOM.render(, document.getElementById('root')); diff --git a/packages/react-renderer-demo/next.config.js b/packages/react-renderer-demo/next.config.js new file mode 100644 index 000000000..fc47d51ad --- /dev/null +++ b/packages/react-renderer-demo/next.config.js @@ -0,0 +1,56 @@ +const withCSS = require('@zeit/next-css'); +const resolve = require('resolve'); + +module.exports = withCSS({ + webpack: (config, options) => { + const { dir, isServer } = options; + config.externals = []; + + if (isServer) { + config.externals.push((context, request, callback) => { + resolve( + request, + { basedir: dir, preserveSymlinks: true }, + (err, res) => { + if (err) { + return callback(); + } + + // Next.js by default adds every module from node_modules to + // externals on the server build. This brings some undesirable + // behaviors because we can't use modules that require CSS files like + // `former-kit-skin-pagarme`. + // + // The lines below blacklist webpack itself (that cannot be put on) + if ( + res.match(/node_modules[/\\].*\.js/) && + !res.match(/node_modules[/\\]webpack/) && + !res.match(/node_modules[/\\]@patternfly\/react-core/) && + !res.match(/node_modules[/\\]@patternfly\/react-styles/) + ) { + return callback(null, `commonjs ${request}`); + } + + callback(); + } + ); + }); + } + + config.module.rules.push({ + test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/, + use: { + loader: 'url-loader', + options: { + limit: 100000, + }, + }, + }); + // Fixes npm packages that depend on `fs` module + config.node = { + fs: 'empty', + }; + + return config; + }, +}); diff --git a/packages/react-renderer-demo/package-lock.json b/packages/react-renderer-demo/package-lock.json deleted file mode 100644 index a03688f4f..000000000 --- a/packages/react-renderer-demo/package-lock.json +++ /dev/null @@ -1,77 +0,0 @@ -{ - "name": "@data-driven-forms/react-starter", - "version": "1", - "lockfileVersion": 1, - "requires": true, - "dependencies": { - "copy-to-clipboard": { - "version": "3.0.8", - "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.0.8.tgz", - "integrity": "sha512-c3GdeY8qxCHGezVb1EFQfHYK/8NZRemgcTIzPq7PuxjHAf/raKibn2QdhHPb/y6q74PMgH6yizaDZlRmw6QyKw==", - "requires": { - "toggle-selection": "^1.0.3" - } - }, - "js-tokens": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", - "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" - }, - "loose-envify": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", - "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", - "requires": { - "js-tokens": "^3.0.0 || ^4.0.0" - } - }, - "object-assign": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", - "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" - }, - "prop-types": { - "version": "15.6.2", - "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz", - "integrity": "sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==", - "requires": { - "loose-envify": "^1.3.1", - "object-assign": "^4.1.1" - } - }, - "react": { - "version": "16.7.0", - "resolved": "https://registry.npmjs.org/react/-/react-16.7.0.tgz", - "integrity": "sha512-StCz3QY8lxTb5cl2HJxjwLFOXPIFQp+p+hxQfc8WE0QiLfCtIlKj8/+5tjjKm8uSTlAW+fCPaavGFS06V9Ar3A==", - "requires": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1", - "prop-types": "^15.6.2", - "scheduler": "^0.12.0" - } - }, - "react-copy-to-clipboard": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.1.tgz", - "integrity": "sha512-ELKq31/E3zjFs5rDWNCfFL4NvNFQvGRoJdAKReD/rUPA+xxiLPQmZBZBvy2vgH7V0GE9isIQpT9WXbwIVErYdA==", - "requires": { - "copy-to-clipboard": "^3", - "prop-types": "^15.5.8" - } - }, - "scheduler": { - "version": "0.12.0", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.12.0.tgz", - "integrity": "sha512-t7MBR28Akcp4Jm+QoR63XgAi9YgCUmgvDHqf5otgAj4QvdoBE4ImCX0ffehefePPG+aitiYHp0g/mW6s4Tp+dw==", - "requires": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" - } - }, - "toggle-selection": { - "version": "1.0.6", - "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz", - "integrity": "sha1-bkWxJj8gF/oKzH2J14sVuL932jI=" - } - } -} diff --git a/packages/react-renderer-demo/package.json b/packages/react-renderer-demo/package.json index 9194ad650..155f76726 100644 --- a/packages/react-renderer-demo/package.json +++ b/packages/react-renderer-demo/package.json @@ -5,8 +5,9 @@ "main": "dist/index.js", "private": true, "scripts": { - "start": "yarn vendor && webpack-dev-server --env dev --config ./config/webpack.config.js --open --hot", - "build": "yarn vendor && webpack --env prod --config ./config/webpack.config.js", + "dev": "next dev", + "build": "next build", + "start": "next start", "vendor": "webpack --env vendor --config ./config/webpack.config.js --progress" }, "repository": { @@ -26,20 +27,8 @@ }, "homepage": "https://github.com/data-driven-forms/react-starter#readme", "devDependencies": { - "@babel/core": "^7.1.6", - "@babel/plugin-syntax-dynamic-import": "^7.0.0", - "@babel/preset-env": "^7.1.6", - "@babel/preset-react": "^7.0.0", "@mdx-js/loader": "^1.1.0", - "babel-core": "^7.0.0-bridge.0", - "babel-eslint": "9.x", - "babel-jest": "^23.6.0", - "babel-loader": "^8.0.4", - "babel-plugin-lodash": "^3.3.4", - "css-loader": "^1.0.1", - "enzyme": "^3.7.0", - "enzyme-adapter-react-16": "^1.7.0", - "enzyme-to-json": "^3.3.4", + "@zeit/next-css": "^1.0.1", "eslint": "5.x", "eslint-config-prettier": "^3.3.0", "eslint-config-react-app": "^3.0.5", @@ -48,18 +37,8 @@ "eslint-plugin-import": "2.x", "eslint-plugin-jsx-a11y": "6.x", "eslint-plugin-react": "^7.11.1", - "html-webpack-plugin": "^3.2.0", - "mini-css-extract-plugin": "^0.4.4", - "node-sass": "^4.10.0", - "regenerator-runtime": "^0.12.1", - "resolve-url-loader": "^3.0.0", - "sass-loader": "^7.1.0", - "style-loader": "^0.23.1", - "url-loader": "^1.1.2", - "webpack": "^4.25.1", - "webpack-cli": "^3.1.2", - "webpack-dev-server": "^3.1.10", - "webpack-merge": "^4.1.4" + "file-loader": "^4.2.0", + "url-loader": "^2.1.0" }, "dependencies": { "@babel/plugin-proposal-class-properties": "^7.2.3", @@ -76,6 +55,8 @@ "@patternfly/react-icons": "~3.9.2", "@patternfly/react-tokens": "^2.5.1", "brace": "^0.11.1", + "clsx": "^1.0.4", + "next": "^9.0.5", "patternfly-react": "^2.25.1", "prop-types": "^15.6.2", "raw-loader": "^3.1.0", diff --git a/packages/react-renderer-demo/pages/_app.js b/packages/react-renderer-demo/pages/_app.js new file mode 100644 index 000000000..3f904e3cb --- /dev/null +++ b/packages/react-renderer-demo/pages/_app.js @@ -0,0 +1,33 @@ +import React from 'react'; +import App from 'next/app'; +import Head from 'next/head'; +import { ThemeProvider } from '@material-ui/styles'; +import CssBaseline from '@material-ui/core/CssBaseline'; +import theme from '../src/theme'; + +export default class MyApp extends App { + componentDidMount() { + // Remove the server-side injected CSS. + const jssStyles = document.querySelector('#jss-server-side'); + if (jssStyles) { + jssStyles.parentNode.removeChild(jssStyles); + } + } + + render() { + const { Component, pageProps } = this.props; + + return ( + + + My page + + + { /* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */ } + + + + + ); + } +} diff --git a/packages/react-renderer-demo/pages/_document.js b/packages/react-renderer-demo/pages/_document.js new file mode 100644 index 000000000..3ff720aa7 --- /dev/null +++ b/packages/react-renderer-demo/pages/_document.js @@ -0,0 +1,78 @@ +import React from 'react'; +import Document, { Head, Main, NextScript } from 'next/document'; +import { ServerStyleSheets } from '@material-ui/styles'; +import theme from '../src/theme'; + +class MyDocument extends Document { + render() { + return ( + + + + + { /* PWA primary color */ } + + + + +
+ + + + ); + } +} + +MyDocument.getInitialProps = async ctx => { + // Resolution order + // + // On the server: + // 1. app.getInitialProps + // 2. page.getInitialProps + // 3. document.getInitialProps + // 4. app.render + // 5. page.render + // 6. document.render + // + // On the server with error: + // 1. document.getInitialProps + // 2. app.render + // 3. page.render + // 4. document.render + // + // On the client + // 1. app.getInitialProps + // 2. page.getInitialProps + // 3. app.render + // 4. page.render + + // Render app and page and get the context of the page with collected side effects. + const sheets = new ServerStyleSheets(); + const originalRenderPage = ctx.renderPage; + + ctx.renderPage = () => + originalRenderPage({ + enhanceApp: App => props => sheets.collect(), + }); + + const initialProps = await Document.getInitialProps(ctx); + + return { + ...initialProps, + // Styles fragment is rendered after the app and page rendering finish. + styles: [ + + { initialProps.styles } + { sheets.getStyleElement() } + , + ], + }; +}; + +export default MyDocument; diff --git a/packages/react-renderer-demo/pages/index.js b/packages/react-renderer-demo/pages/index.js new file mode 100644 index 000000000..8a9c831dd --- /dev/null +++ b/packages/react-renderer-demo/pages/index.js @@ -0,0 +1,31 @@ +import React from 'react'; +import Container from '@material-ui/core/Container'; +import Typography from '@material-ui/core/Typography'; +import Box from '@material-ui/core/Box'; +import MuiLink from '@material-ui/core/Link'; + +function Copyright() { + return ( + + { 'Copyright © ' } + + Your Website + { ' ' } + { new Date().getFullYear() } + { '.' } + + ); +} + +export default function Index() { + return ( + + + + Next.js example + + + + + ); +} diff --git a/packages/react-renderer-demo/scripts/after_success.sh b/packages/react-renderer-demo/scripts/after_success.sh deleted file mode 100644 index 9c5535a55..000000000 --- a/packages/react-renderer-demo/scripts/after_success.sh +++ /dev/null @@ -1,6 +0,0 @@ - #!/usr/bin/env bash - - yarn - yarn vendor - yarn build - \ No newline at end of file diff --git a/packages/react-renderer-demo/src/theme.js b/packages/react-renderer-demo/src/theme.js new file mode 100644 index 000000000..9c4b59f5a --- /dev/null +++ b/packages/react-renderer-demo/src/theme.js @@ -0,0 +1,9 @@ +import { createMuiTheme } from '@material-ui/core/styles'; + +const theme = createMuiTheme({ + typography: { + useNextVariants: true, + }, +}); + +export default theme; From 3672569cbbd9ff97b6652fbaf78414cc15c0ed34 Mon Sep 17 00:00:00 2001 From: Martin Marosi Date: Mon, 16 Sep 2019 15:36:35 +0200 Subject: [PATCH 002/131] Added basic navigation --- packages/react-renderer-demo/pages/_app.js | 2 +- packages/react-renderer-demo/pages/index.js | 31 +-- .../{src => src-bak}/App.js | 0 .../{src => src-bak}/app.scss | 0 .../common/component/code-editor.js | 0 .../common/component/connected-links.js | 0 .../common/component/raw-component.js | 0 .../common/component/renderer-doc-page.js | 0 .../{src => src-bak}/common/doc-page.js | 0 .../common/documenation-pages.js | 0 .../{src => src-bak}/common/example-common.js | 0 .../common/examples-definitions.js | 0 .../{src => src-bak}/common/examples-nav.js | 0 .../common/examples-texts/custom-component.js | 0 .../examples-texts/generic-mui-component.js | 0 .../common/examples-texts/tabs.js | 0 .../common/examples-texts/wizard.js | 0 .../{src => src-bak}/common/gh-svg-icon.js | 0 .../common/helpers/list-of-content.js | 0 .../{src => src-bak}/common/logo-svg-icon.js | 0 .../common/md-helper/mdx-components.js | 0 .../common/md-helper/share-button.js | 0 .../menu-renderer/find-connected-links.js | 0 .../common/menu-renderer/mapper.js | 0 .../common/menu-renderer/menu-context.js | 0 .../common/menu-renderer/menu-renderer.js | 0 .../common/menu-renderer/schema-demo.js | 0 .../{src => src-bak}/common/nav-styles.js | 0 .../{src => src-bak}/common/npm-svg-icon.js | 0 .../{src => src-bak}/common/other-pages.js | 0 .../common/other-text/manageiq-components.js | 0 .../{src => src-bak}/components/footer.js | 0 .../components/landing-page-cards.js | 0 .../components/landing-page-title.js | 0 .../{src => src-bak}/demo-data/miq-schema.js | 0 .../demo-data/widget-schema.js | 0 .../demo-data/wizard-schema.js | 0 .../mui-wizzard/step-buttons.js | 0 .../mui-wizzard/wizard-step.js | 0 .../mui-wizzard/wizzard.js | 0 .../docs-components/component-api.md | 0 .../component-api/exampleLink.js | 0 .../form-fields-mapper-docs.scss | 0 .../component-mapper/form-fields-mapper.js | 0 .../component-mapper/layout-mapper.js | 0 .../docs-components/component-mapping.md | 0 .../docs-components/condition.md | 0 .../docs-components/data-types.md | 0 .../data-types/data-types-example.js | 0 .../docs-components/field-provider.md | 0 .../docs-components/form-controls.md | 0 .../form-controls/custom-buttons.js | 0 .../docs-components/get-started.md | 0 .../get-started/get-started.js | 0 .../docs-components/installation.md | 0 .../docs-components/manageiq-components.md | 0 .../docs-components/pf3-wizard.md | 0 .../docs-components/pf4-wizard.md | 0 .../docs-components/renderer-api.md | 0 .../docs-components/unmounting.md | 0 .../unmounting/clear-on-unmount.js | 0 .../docs-components/validators.md | 0 .../validators/async-validator.js | 0 .../validators/custom-function.js | 0 .../validators/global-message.js | 0 .../validators/length-validators.js | 0 .../validators/number-validator.js | 0 .../validators/pattern-validator.js | 0 .../validators/record-level-validation.js | 0 .../validators/required-validator.js | 0 .../validators/url-validator.js | 0 .../docs-components/wizard.md | 0 .../{src => src-bak}/index.js | 0 .../{src => src-bak}/layout.js | 0 .../{src => src-bak}/pages/demo.js | 0 .../pages/form-renderer-page.js | 0 .../{src => src-bak}/pages/landing-page.js | 0 .../{src => src-bak}/pages/not-found-page.js | 0 .../{src => src-bak}/pages/show-case.js | 0 .../{src => src-bak}/tests/demo-test.test.js | 0 .../{src => src-bak}/vendor.js | 0 .../{src => src-bak}/vendor.scss | 0 .../{src => src-bak}/vendor4.js | 0 .../src/components/common/gh-svg-icon.js | 9 + .../src/components/layout.js | 180 ++++++++++++++++++ .../components/navigation/app-navigation.js | 42 ++++ .../src/components/navigation/mapper.js | 82 ++++++++ .../components/navigation/menu-renderer.js | 162 ++++++++++++++++ .../src/components/navigation/nav-styles.js | 48 +++++ .../src/components/navigation/schema.js | 81 ++++++++ 90 files changed, 615 insertions(+), 22 deletions(-) rename packages/react-renderer-demo/{src => src-bak}/App.js (100%) rename packages/react-renderer-demo/{src => src-bak}/app.scss (100%) rename packages/react-renderer-demo/{src => src-bak}/common/component/code-editor.js (100%) rename packages/react-renderer-demo/{src => src-bak}/common/component/connected-links.js (100%) rename packages/react-renderer-demo/{src => src-bak}/common/component/raw-component.js (100%) rename packages/react-renderer-demo/{src => src-bak}/common/component/renderer-doc-page.js (100%) rename packages/react-renderer-demo/{src => src-bak}/common/doc-page.js (100%) rename packages/react-renderer-demo/{src => src-bak}/common/documenation-pages.js (100%) rename packages/react-renderer-demo/{src => src-bak}/common/example-common.js (100%) rename packages/react-renderer-demo/{src => src-bak}/common/examples-definitions.js (100%) rename packages/react-renderer-demo/{src => src-bak}/common/examples-nav.js (100%) rename packages/react-renderer-demo/{src => src-bak}/common/examples-texts/custom-component.js (100%) rename packages/react-renderer-demo/{src => src-bak}/common/examples-texts/generic-mui-component.js (100%) rename packages/react-renderer-demo/{src => src-bak}/common/examples-texts/tabs.js (100%) rename packages/react-renderer-demo/{src => src-bak}/common/examples-texts/wizard.js (100%) rename packages/react-renderer-demo/{src => src-bak}/common/gh-svg-icon.js (100%) rename packages/react-renderer-demo/{src => src-bak}/common/helpers/list-of-content.js (100%) rename packages/react-renderer-demo/{src => src-bak}/common/logo-svg-icon.js (100%) rename packages/react-renderer-demo/{src => src-bak}/common/md-helper/mdx-components.js (100%) rename packages/react-renderer-demo/{src => src-bak}/common/md-helper/share-button.js (100%) rename packages/react-renderer-demo/{src => src-bak}/common/menu-renderer/find-connected-links.js (100%) rename packages/react-renderer-demo/{src => src-bak}/common/menu-renderer/mapper.js (100%) rename packages/react-renderer-demo/{src => src-bak}/common/menu-renderer/menu-context.js (100%) rename packages/react-renderer-demo/{src => src-bak}/common/menu-renderer/menu-renderer.js (100%) rename packages/react-renderer-demo/{src => src-bak}/common/menu-renderer/schema-demo.js (100%) rename packages/react-renderer-demo/{src => src-bak}/common/nav-styles.js (100%) rename packages/react-renderer-demo/{src => src-bak}/common/npm-svg-icon.js (100%) rename packages/react-renderer-demo/{src => src-bak}/common/other-pages.js (100%) rename packages/react-renderer-demo/{src => src-bak}/common/other-text/manageiq-components.js (100%) rename packages/react-renderer-demo/{src => src-bak}/components/footer.js (100%) rename packages/react-renderer-demo/{src => src-bak}/components/landing-page-cards.js (100%) rename packages/react-renderer-demo/{src => src-bak}/components/landing-page-title.js (100%) rename packages/react-renderer-demo/{src => src-bak}/demo-data/miq-schema.js (100%) rename packages/react-renderer-demo/{src => src-bak}/demo-data/widget-schema.js (100%) rename packages/react-renderer-demo/{src => src-bak}/demo-data/wizard-schema.js (100%) rename packages/react-renderer-demo/{src => src-bak}/demo-missing-fields/mui-wizzard/step-buttons.js (100%) rename packages/react-renderer-demo/{src => src-bak}/demo-missing-fields/mui-wizzard/wizard-step.js (100%) rename packages/react-renderer-demo/{src => src-bak}/demo-missing-fields/mui-wizzard/wizzard.js (100%) rename packages/react-renderer-demo/{src => src-bak}/docs-components/component-api.md (100%) rename packages/react-renderer-demo/{src => src-bak}/docs-components/component-api/exampleLink.js (100%) rename packages/react-renderer-demo/{src => src-bak}/docs-components/component-mapper/form-fields-mapper-docs.scss (100%) rename packages/react-renderer-demo/{src => src-bak}/docs-components/component-mapper/form-fields-mapper.js (100%) rename packages/react-renderer-demo/{src => src-bak}/docs-components/component-mapper/layout-mapper.js (100%) rename packages/react-renderer-demo/{src => src-bak}/docs-components/component-mapping.md (100%) rename packages/react-renderer-demo/{src => src-bak}/docs-components/condition.md (100%) rename packages/react-renderer-demo/{src => src-bak}/docs-components/data-types.md (100%) rename packages/react-renderer-demo/{src => src-bak}/docs-components/data-types/data-types-example.js (100%) rename packages/react-renderer-demo/{src => src-bak}/docs-components/field-provider.md (100%) rename packages/react-renderer-demo/{src => src-bak}/docs-components/form-controls.md (100%) rename packages/react-renderer-demo/{src => src-bak}/docs-components/form-controls/custom-buttons.js (100%) rename packages/react-renderer-demo/{src => src-bak}/docs-components/get-started.md (100%) rename packages/react-renderer-demo/{src => src-bak}/docs-components/get-started/get-started.js (100%) rename packages/react-renderer-demo/{src => src-bak}/docs-components/installation.md (100%) rename packages/react-renderer-demo/{src => src-bak}/docs-components/manageiq-components.md (100%) rename packages/react-renderer-demo/{src => src-bak}/docs-components/pf3-wizard.md (100%) rename packages/react-renderer-demo/{src => src-bak}/docs-components/pf4-wizard.md (100%) rename packages/react-renderer-demo/{src => src-bak}/docs-components/renderer-api.md (100%) rename packages/react-renderer-demo/{src => src-bak}/docs-components/unmounting.md (100%) rename packages/react-renderer-demo/{src => src-bak}/docs-components/unmounting/clear-on-unmount.js (100%) rename packages/react-renderer-demo/{src => src-bak}/docs-components/validators.md (100%) rename packages/react-renderer-demo/{src => src-bak}/docs-components/validators/async-validator.js (100%) rename packages/react-renderer-demo/{src => src-bak}/docs-components/validators/custom-function.js (100%) rename packages/react-renderer-demo/{src => src-bak}/docs-components/validators/global-message.js (100%) rename packages/react-renderer-demo/{src => src-bak}/docs-components/validators/length-validators.js (100%) rename packages/react-renderer-demo/{src => src-bak}/docs-components/validators/number-validator.js (100%) rename packages/react-renderer-demo/{src => src-bak}/docs-components/validators/pattern-validator.js (100%) rename packages/react-renderer-demo/{src => src-bak}/docs-components/validators/record-level-validation.js (100%) rename packages/react-renderer-demo/{src => src-bak}/docs-components/validators/required-validator.js (100%) rename packages/react-renderer-demo/{src => src-bak}/docs-components/validators/url-validator.js (100%) rename packages/react-renderer-demo/{src => src-bak}/docs-components/wizard.md (100%) rename packages/react-renderer-demo/{src => src-bak}/index.js (100%) rename packages/react-renderer-demo/{src => src-bak}/layout.js (100%) rename packages/react-renderer-demo/{src => src-bak}/pages/demo.js (100%) rename packages/react-renderer-demo/{src => src-bak}/pages/form-renderer-page.js (100%) rename packages/react-renderer-demo/{src => src-bak}/pages/landing-page.js (100%) rename packages/react-renderer-demo/{src => src-bak}/pages/not-found-page.js (100%) rename packages/react-renderer-demo/{src => src-bak}/pages/show-case.js (100%) rename packages/react-renderer-demo/{src => src-bak}/tests/demo-test.test.js (100%) rename packages/react-renderer-demo/{src => src-bak}/vendor.js (100%) rename packages/react-renderer-demo/{src => src-bak}/vendor.scss (100%) rename packages/react-renderer-demo/{src => src-bak}/vendor4.js (100%) create mode 100644 packages/react-renderer-demo/src/components/common/gh-svg-icon.js create mode 100644 packages/react-renderer-demo/src/components/layout.js create mode 100644 packages/react-renderer-demo/src/components/navigation/app-navigation.js create mode 100644 packages/react-renderer-demo/src/components/navigation/mapper.js create mode 100644 packages/react-renderer-demo/src/components/navigation/menu-renderer.js create mode 100644 packages/react-renderer-demo/src/components/navigation/nav-styles.js create mode 100644 packages/react-renderer-demo/src/components/navigation/schema.js diff --git a/packages/react-renderer-demo/pages/_app.js b/packages/react-renderer-demo/pages/_app.js index 3f904e3cb..846adbc8e 100644 --- a/packages/react-renderer-demo/pages/_app.js +++ b/packages/react-renderer-demo/pages/_app.js @@ -20,7 +20,7 @@ export default class MyApp extends App { return ( - My page + Data driven forms { /* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */ } diff --git a/packages/react-renderer-demo/pages/index.js b/packages/react-renderer-demo/pages/index.js index 8a9c831dd..ba87e0e5e 100644 --- a/packages/react-renderer-demo/pages/index.js +++ b/packages/react-renderer-demo/pages/index.js @@ -2,30 +2,19 @@ import React from 'react'; import Container from '@material-ui/core/Container'; import Typography from '@material-ui/core/Typography'; import Box from '@material-ui/core/Box'; -import MuiLink from '@material-ui/core/Link'; -function Copyright() { - return ( - - { 'Copyright © ' } - - Your Website - { ' ' } - { new Date().getFullYear() } - { '.' } - - ); -} +import Layout from '../src/components/layout'; export default function Index() { return ( - - - - Next.js example - - - - + + + + + Next.js example + + + + ); } diff --git a/packages/react-renderer-demo/src/App.js b/packages/react-renderer-demo/src-bak/App.js similarity index 100% rename from packages/react-renderer-demo/src/App.js rename to packages/react-renderer-demo/src-bak/App.js diff --git a/packages/react-renderer-demo/src/app.scss b/packages/react-renderer-demo/src-bak/app.scss similarity index 100% rename from packages/react-renderer-demo/src/app.scss rename to packages/react-renderer-demo/src-bak/app.scss diff --git a/packages/react-renderer-demo/src/common/component/code-editor.js b/packages/react-renderer-demo/src-bak/common/component/code-editor.js similarity index 100% rename from packages/react-renderer-demo/src/common/component/code-editor.js rename to packages/react-renderer-demo/src-bak/common/component/code-editor.js diff --git a/packages/react-renderer-demo/src/common/component/connected-links.js b/packages/react-renderer-demo/src-bak/common/component/connected-links.js similarity index 100% rename from packages/react-renderer-demo/src/common/component/connected-links.js rename to packages/react-renderer-demo/src-bak/common/component/connected-links.js diff --git a/packages/react-renderer-demo/src/common/component/raw-component.js b/packages/react-renderer-demo/src-bak/common/component/raw-component.js similarity index 100% rename from packages/react-renderer-demo/src/common/component/raw-component.js rename to packages/react-renderer-demo/src-bak/common/component/raw-component.js diff --git a/packages/react-renderer-demo/src/common/component/renderer-doc-page.js b/packages/react-renderer-demo/src-bak/common/component/renderer-doc-page.js similarity index 100% rename from packages/react-renderer-demo/src/common/component/renderer-doc-page.js rename to packages/react-renderer-demo/src-bak/common/component/renderer-doc-page.js diff --git a/packages/react-renderer-demo/src/common/doc-page.js b/packages/react-renderer-demo/src-bak/common/doc-page.js similarity index 100% rename from packages/react-renderer-demo/src/common/doc-page.js rename to packages/react-renderer-demo/src-bak/common/doc-page.js diff --git a/packages/react-renderer-demo/src/common/documenation-pages.js b/packages/react-renderer-demo/src-bak/common/documenation-pages.js similarity index 100% rename from packages/react-renderer-demo/src/common/documenation-pages.js rename to packages/react-renderer-demo/src-bak/common/documenation-pages.js diff --git a/packages/react-renderer-demo/src/common/example-common.js b/packages/react-renderer-demo/src-bak/common/example-common.js similarity index 100% rename from packages/react-renderer-demo/src/common/example-common.js rename to packages/react-renderer-demo/src-bak/common/example-common.js diff --git a/packages/react-renderer-demo/src/common/examples-definitions.js b/packages/react-renderer-demo/src-bak/common/examples-definitions.js similarity index 100% rename from packages/react-renderer-demo/src/common/examples-definitions.js rename to packages/react-renderer-demo/src-bak/common/examples-definitions.js diff --git a/packages/react-renderer-demo/src/common/examples-nav.js b/packages/react-renderer-demo/src-bak/common/examples-nav.js similarity index 100% rename from packages/react-renderer-demo/src/common/examples-nav.js rename to packages/react-renderer-demo/src-bak/common/examples-nav.js diff --git a/packages/react-renderer-demo/src/common/examples-texts/custom-component.js b/packages/react-renderer-demo/src-bak/common/examples-texts/custom-component.js similarity index 100% rename from packages/react-renderer-demo/src/common/examples-texts/custom-component.js rename to packages/react-renderer-demo/src-bak/common/examples-texts/custom-component.js diff --git a/packages/react-renderer-demo/src/common/examples-texts/generic-mui-component.js b/packages/react-renderer-demo/src-bak/common/examples-texts/generic-mui-component.js similarity index 100% rename from packages/react-renderer-demo/src/common/examples-texts/generic-mui-component.js rename to packages/react-renderer-demo/src-bak/common/examples-texts/generic-mui-component.js diff --git a/packages/react-renderer-demo/src/common/examples-texts/tabs.js b/packages/react-renderer-demo/src-bak/common/examples-texts/tabs.js similarity index 100% rename from packages/react-renderer-demo/src/common/examples-texts/tabs.js rename to packages/react-renderer-demo/src-bak/common/examples-texts/tabs.js diff --git a/packages/react-renderer-demo/src/common/examples-texts/wizard.js b/packages/react-renderer-demo/src-bak/common/examples-texts/wizard.js similarity index 100% rename from packages/react-renderer-demo/src/common/examples-texts/wizard.js rename to packages/react-renderer-demo/src-bak/common/examples-texts/wizard.js diff --git a/packages/react-renderer-demo/src/common/gh-svg-icon.js b/packages/react-renderer-demo/src-bak/common/gh-svg-icon.js similarity index 100% rename from packages/react-renderer-demo/src/common/gh-svg-icon.js rename to packages/react-renderer-demo/src-bak/common/gh-svg-icon.js diff --git a/packages/react-renderer-demo/src/common/helpers/list-of-content.js b/packages/react-renderer-demo/src-bak/common/helpers/list-of-content.js similarity index 100% rename from packages/react-renderer-demo/src/common/helpers/list-of-content.js rename to packages/react-renderer-demo/src-bak/common/helpers/list-of-content.js diff --git a/packages/react-renderer-demo/src/common/logo-svg-icon.js b/packages/react-renderer-demo/src-bak/common/logo-svg-icon.js similarity index 100% rename from packages/react-renderer-demo/src/common/logo-svg-icon.js rename to packages/react-renderer-demo/src-bak/common/logo-svg-icon.js diff --git a/packages/react-renderer-demo/src/common/md-helper/mdx-components.js b/packages/react-renderer-demo/src-bak/common/md-helper/mdx-components.js similarity index 100% rename from packages/react-renderer-demo/src/common/md-helper/mdx-components.js rename to packages/react-renderer-demo/src-bak/common/md-helper/mdx-components.js diff --git a/packages/react-renderer-demo/src/common/md-helper/share-button.js b/packages/react-renderer-demo/src-bak/common/md-helper/share-button.js similarity index 100% rename from packages/react-renderer-demo/src/common/md-helper/share-button.js rename to packages/react-renderer-demo/src-bak/common/md-helper/share-button.js diff --git a/packages/react-renderer-demo/src/common/menu-renderer/find-connected-links.js b/packages/react-renderer-demo/src-bak/common/menu-renderer/find-connected-links.js similarity index 100% rename from packages/react-renderer-demo/src/common/menu-renderer/find-connected-links.js rename to packages/react-renderer-demo/src-bak/common/menu-renderer/find-connected-links.js diff --git a/packages/react-renderer-demo/src/common/menu-renderer/mapper.js b/packages/react-renderer-demo/src-bak/common/menu-renderer/mapper.js similarity index 100% rename from packages/react-renderer-demo/src/common/menu-renderer/mapper.js rename to packages/react-renderer-demo/src-bak/common/menu-renderer/mapper.js diff --git a/packages/react-renderer-demo/src/common/menu-renderer/menu-context.js b/packages/react-renderer-demo/src-bak/common/menu-renderer/menu-context.js similarity index 100% rename from packages/react-renderer-demo/src/common/menu-renderer/menu-context.js rename to packages/react-renderer-demo/src-bak/common/menu-renderer/menu-context.js diff --git a/packages/react-renderer-demo/src/common/menu-renderer/menu-renderer.js b/packages/react-renderer-demo/src-bak/common/menu-renderer/menu-renderer.js similarity index 100% rename from packages/react-renderer-demo/src/common/menu-renderer/menu-renderer.js rename to packages/react-renderer-demo/src-bak/common/menu-renderer/menu-renderer.js diff --git a/packages/react-renderer-demo/src/common/menu-renderer/schema-demo.js b/packages/react-renderer-demo/src-bak/common/menu-renderer/schema-demo.js similarity index 100% rename from packages/react-renderer-demo/src/common/menu-renderer/schema-demo.js rename to packages/react-renderer-demo/src-bak/common/menu-renderer/schema-demo.js diff --git a/packages/react-renderer-demo/src/common/nav-styles.js b/packages/react-renderer-demo/src-bak/common/nav-styles.js similarity index 100% rename from packages/react-renderer-demo/src/common/nav-styles.js rename to packages/react-renderer-demo/src-bak/common/nav-styles.js diff --git a/packages/react-renderer-demo/src/common/npm-svg-icon.js b/packages/react-renderer-demo/src-bak/common/npm-svg-icon.js similarity index 100% rename from packages/react-renderer-demo/src/common/npm-svg-icon.js rename to packages/react-renderer-demo/src-bak/common/npm-svg-icon.js diff --git a/packages/react-renderer-demo/src/common/other-pages.js b/packages/react-renderer-demo/src-bak/common/other-pages.js similarity index 100% rename from packages/react-renderer-demo/src/common/other-pages.js rename to packages/react-renderer-demo/src-bak/common/other-pages.js diff --git a/packages/react-renderer-demo/src/common/other-text/manageiq-components.js b/packages/react-renderer-demo/src-bak/common/other-text/manageiq-components.js similarity index 100% rename from packages/react-renderer-demo/src/common/other-text/manageiq-components.js rename to packages/react-renderer-demo/src-bak/common/other-text/manageiq-components.js diff --git a/packages/react-renderer-demo/src/components/footer.js b/packages/react-renderer-demo/src-bak/components/footer.js similarity index 100% rename from packages/react-renderer-demo/src/components/footer.js rename to packages/react-renderer-demo/src-bak/components/footer.js diff --git a/packages/react-renderer-demo/src/components/landing-page-cards.js b/packages/react-renderer-demo/src-bak/components/landing-page-cards.js similarity index 100% rename from packages/react-renderer-demo/src/components/landing-page-cards.js rename to packages/react-renderer-demo/src-bak/components/landing-page-cards.js diff --git a/packages/react-renderer-demo/src/components/landing-page-title.js b/packages/react-renderer-demo/src-bak/components/landing-page-title.js similarity index 100% rename from packages/react-renderer-demo/src/components/landing-page-title.js rename to packages/react-renderer-demo/src-bak/components/landing-page-title.js diff --git a/packages/react-renderer-demo/src/demo-data/miq-schema.js b/packages/react-renderer-demo/src-bak/demo-data/miq-schema.js similarity index 100% rename from packages/react-renderer-demo/src/demo-data/miq-schema.js rename to packages/react-renderer-demo/src-bak/demo-data/miq-schema.js diff --git a/packages/react-renderer-demo/src/demo-data/widget-schema.js b/packages/react-renderer-demo/src-bak/demo-data/widget-schema.js similarity index 100% rename from packages/react-renderer-demo/src/demo-data/widget-schema.js rename to packages/react-renderer-demo/src-bak/demo-data/widget-schema.js diff --git a/packages/react-renderer-demo/src/demo-data/wizard-schema.js b/packages/react-renderer-demo/src-bak/demo-data/wizard-schema.js similarity index 100% rename from packages/react-renderer-demo/src/demo-data/wizard-schema.js rename to packages/react-renderer-demo/src-bak/demo-data/wizard-schema.js diff --git a/packages/react-renderer-demo/src/demo-missing-fields/mui-wizzard/step-buttons.js b/packages/react-renderer-demo/src-bak/demo-missing-fields/mui-wizzard/step-buttons.js similarity index 100% rename from packages/react-renderer-demo/src/demo-missing-fields/mui-wizzard/step-buttons.js rename to packages/react-renderer-demo/src-bak/demo-missing-fields/mui-wizzard/step-buttons.js diff --git a/packages/react-renderer-demo/src/demo-missing-fields/mui-wizzard/wizard-step.js b/packages/react-renderer-demo/src-bak/demo-missing-fields/mui-wizzard/wizard-step.js similarity index 100% rename from packages/react-renderer-demo/src/demo-missing-fields/mui-wizzard/wizard-step.js rename to packages/react-renderer-demo/src-bak/demo-missing-fields/mui-wizzard/wizard-step.js diff --git a/packages/react-renderer-demo/src/demo-missing-fields/mui-wizzard/wizzard.js b/packages/react-renderer-demo/src-bak/demo-missing-fields/mui-wizzard/wizzard.js similarity index 100% rename from packages/react-renderer-demo/src/demo-missing-fields/mui-wizzard/wizzard.js rename to packages/react-renderer-demo/src-bak/demo-missing-fields/mui-wizzard/wizzard.js diff --git a/packages/react-renderer-demo/src/docs-components/component-api.md b/packages/react-renderer-demo/src-bak/docs-components/component-api.md similarity index 100% rename from packages/react-renderer-demo/src/docs-components/component-api.md rename to packages/react-renderer-demo/src-bak/docs-components/component-api.md diff --git a/packages/react-renderer-demo/src/docs-components/component-api/exampleLink.js b/packages/react-renderer-demo/src-bak/docs-components/component-api/exampleLink.js similarity index 100% rename from packages/react-renderer-demo/src/docs-components/component-api/exampleLink.js rename to packages/react-renderer-demo/src-bak/docs-components/component-api/exampleLink.js diff --git a/packages/react-renderer-demo/src/docs-components/component-mapper/form-fields-mapper-docs.scss b/packages/react-renderer-demo/src-bak/docs-components/component-mapper/form-fields-mapper-docs.scss similarity index 100% rename from packages/react-renderer-demo/src/docs-components/component-mapper/form-fields-mapper-docs.scss rename to packages/react-renderer-demo/src-bak/docs-components/component-mapper/form-fields-mapper-docs.scss diff --git a/packages/react-renderer-demo/src/docs-components/component-mapper/form-fields-mapper.js b/packages/react-renderer-demo/src-bak/docs-components/component-mapper/form-fields-mapper.js similarity index 100% rename from packages/react-renderer-demo/src/docs-components/component-mapper/form-fields-mapper.js rename to packages/react-renderer-demo/src-bak/docs-components/component-mapper/form-fields-mapper.js diff --git a/packages/react-renderer-demo/src/docs-components/component-mapper/layout-mapper.js b/packages/react-renderer-demo/src-bak/docs-components/component-mapper/layout-mapper.js similarity index 100% rename from packages/react-renderer-demo/src/docs-components/component-mapper/layout-mapper.js rename to packages/react-renderer-demo/src-bak/docs-components/component-mapper/layout-mapper.js diff --git a/packages/react-renderer-demo/src/docs-components/component-mapping.md b/packages/react-renderer-demo/src-bak/docs-components/component-mapping.md similarity index 100% rename from packages/react-renderer-demo/src/docs-components/component-mapping.md rename to packages/react-renderer-demo/src-bak/docs-components/component-mapping.md diff --git a/packages/react-renderer-demo/src/docs-components/condition.md b/packages/react-renderer-demo/src-bak/docs-components/condition.md similarity index 100% rename from packages/react-renderer-demo/src/docs-components/condition.md rename to packages/react-renderer-demo/src-bak/docs-components/condition.md diff --git a/packages/react-renderer-demo/src/docs-components/data-types.md b/packages/react-renderer-demo/src-bak/docs-components/data-types.md similarity index 100% rename from packages/react-renderer-demo/src/docs-components/data-types.md rename to packages/react-renderer-demo/src-bak/docs-components/data-types.md diff --git a/packages/react-renderer-demo/src/docs-components/data-types/data-types-example.js b/packages/react-renderer-demo/src-bak/docs-components/data-types/data-types-example.js similarity index 100% rename from packages/react-renderer-demo/src/docs-components/data-types/data-types-example.js rename to packages/react-renderer-demo/src-bak/docs-components/data-types/data-types-example.js diff --git a/packages/react-renderer-demo/src/docs-components/field-provider.md b/packages/react-renderer-demo/src-bak/docs-components/field-provider.md similarity index 100% rename from packages/react-renderer-demo/src/docs-components/field-provider.md rename to packages/react-renderer-demo/src-bak/docs-components/field-provider.md diff --git a/packages/react-renderer-demo/src/docs-components/form-controls.md b/packages/react-renderer-demo/src-bak/docs-components/form-controls.md similarity index 100% rename from packages/react-renderer-demo/src/docs-components/form-controls.md rename to packages/react-renderer-demo/src-bak/docs-components/form-controls.md diff --git a/packages/react-renderer-demo/src/docs-components/form-controls/custom-buttons.js b/packages/react-renderer-demo/src-bak/docs-components/form-controls/custom-buttons.js similarity index 100% rename from packages/react-renderer-demo/src/docs-components/form-controls/custom-buttons.js rename to packages/react-renderer-demo/src-bak/docs-components/form-controls/custom-buttons.js diff --git a/packages/react-renderer-demo/src/docs-components/get-started.md b/packages/react-renderer-demo/src-bak/docs-components/get-started.md similarity index 100% rename from packages/react-renderer-demo/src/docs-components/get-started.md rename to packages/react-renderer-demo/src-bak/docs-components/get-started.md diff --git a/packages/react-renderer-demo/src/docs-components/get-started/get-started.js b/packages/react-renderer-demo/src-bak/docs-components/get-started/get-started.js similarity index 100% rename from packages/react-renderer-demo/src/docs-components/get-started/get-started.js rename to packages/react-renderer-demo/src-bak/docs-components/get-started/get-started.js diff --git a/packages/react-renderer-demo/src/docs-components/installation.md b/packages/react-renderer-demo/src-bak/docs-components/installation.md similarity index 100% rename from packages/react-renderer-demo/src/docs-components/installation.md rename to packages/react-renderer-demo/src-bak/docs-components/installation.md diff --git a/packages/react-renderer-demo/src/docs-components/manageiq-components.md b/packages/react-renderer-demo/src-bak/docs-components/manageiq-components.md similarity index 100% rename from packages/react-renderer-demo/src/docs-components/manageiq-components.md rename to packages/react-renderer-demo/src-bak/docs-components/manageiq-components.md diff --git a/packages/react-renderer-demo/src/docs-components/pf3-wizard.md b/packages/react-renderer-demo/src-bak/docs-components/pf3-wizard.md similarity index 100% rename from packages/react-renderer-demo/src/docs-components/pf3-wizard.md rename to packages/react-renderer-demo/src-bak/docs-components/pf3-wizard.md diff --git a/packages/react-renderer-demo/src/docs-components/pf4-wizard.md b/packages/react-renderer-demo/src-bak/docs-components/pf4-wizard.md similarity index 100% rename from packages/react-renderer-demo/src/docs-components/pf4-wizard.md rename to packages/react-renderer-demo/src-bak/docs-components/pf4-wizard.md diff --git a/packages/react-renderer-demo/src/docs-components/renderer-api.md b/packages/react-renderer-demo/src-bak/docs-components/renderer-api.md similarity index 100% rename from packages/react-renderer-demo/src/docs-components/renderer-api.md rename to packages/react-renderer-demo/src-bak/docs-components/renderer-api.md diff --git a/packages/react-renderer-demo/src/docs-components/unmounting.md b/packages/react-renderer-demo/src-bak/docs-components/unmounting.md similarity index 100% rename from packages/react-renderer-demo/src/docs-components/unmounting.md rename to packages/react-renderer-demo/src-bak/docs-components/unmounting.md diff --git a/packages/react-renderer-demo/src/docs-components/unmounting/clear-on-unmount.js b/packages/react-renderer-demo/src-bak/docs-components/unmounting/clear-on-unmount.js similarity index 100% rename from packages/react-renderer-demo/src/docs-components/unmounting/clear-on-unmount.js rename to packages/react-renderer-demo/src-bak/docs-components/unmounting/clear-on-unmount.js diff --git a/packages/react-renderer-demo/src/docs-components/validators.md b/packages/react-renderer-demo/src-bak/docs-components/validators.md similarity index 100% rename from packages/react-renderer-demo/src/docs-components/validators.md rename to packages/react-renderer-demo/src-bak/docs-components/validators.md diff --git a/packages/react-renderer-demo/src/docs-components/validators/async-validator.js b/packages/react-renderer-demo/src-bak/docs-components/validators/async-validator.js similarity index 100% rename from packages/react-renderer-demo/src/docs-components/validators/async-validator.js rename to packages/react-renderer-demo/src-bak/docs-components/validators/async-validator.js diff --git a/packages/react-renderer-demo/src/docs-components/validators/custom-function.js b/packages/react-renderer-demo/src-bak/docs-components/validators/custom-function.js similarity index 100% rename from packages/react-renderer-demo/src/docs-components/validators/custom-function.js rename to packages/react-renderer-demo/src-bak/docs-components/validators/custom-function.js diff --git a/packages/react-renderer-demo/src/docs-components/validators/global-message.js b/packages/react-renderer-demo/src-bak/docs-components/validators/global-message.js similarity index 100% rename from packages/react-renderer-demo/src/docs-components/validators/global-message.js rename to packages/react-renderer-demo/src-bak/docs-components/validators/global-message.js diff --git a/packages/react-renderer-demo/src/docs-components/validators/length-validators.js b/packages/react-renderer-demo/src-bak/docs-components/validators/length-validators.js similarity index 100% rename from packages/react-renderer-demo/src/docs-components/validators/length-validators.js rename to packages/react-renderer-demo/src-bak/docs-components/validators/length-validators.js diff --git a/packages/react-renderer-demo/src/docs-components/validators/number-validator.js b/packages/react-renderer-demo/src-bak/docs-components/validators/number-validator.js similarity index 100% rename from packages/react-renderer-demo/src/docs-components/validators/number-validator.js rename to packages/react-renderer-demo/src-bak/docs-components/validators/number-validator.js diff --git a/packages/react-renderer-demo/src/docs-components/validators/pattern-validator.js b/packages/react-renderer-demo/src-bak/docs-components/validators/pattern-validator.js similarity index 100% rename from packages/react-renderer-demo/src/docs-components/validators/pattern-validator.js rename to packages/react-renderer-demo/src-bak/docs-components/validators/pattern-validator.js diff --git a/packages/react-renderer-demo/src/docs-components/validators/record-level-validation.js b/packages/react-renderer-demo/src-bak/docs-components/validators/record-level-validation.js similarity index 100% rename from packages/react-renderer-demo/src/docs-components/validators/record-level-validation.js rename to packages/react-renderer-demo/src-bak/docs-components/validators/record-level-validation.js diff --git a/packages/react-renderer-demo/src/docs-components/validators/required-validator.js b/packages/react-renderer-demo/src-bak/docs-components/validators/required-validator.js similarity index 100% rename from packages/react-renderer-demo/src/docs-components/validators/required-validator.js rename to packages/react-renderer-demo/src-bak/docs-components/validators/required-validator.js diff --git a/packages/react-renderer-demo/src/docs-components/validators/url-validator.js b/packages/react-renderer-demo/src-bak/docs-components/validators/url-validator.js similarity index 100% rename from packages/react-renderer-demo/src/docs-components/validators/url-validator.js rename to packages/react-renderer-demo/src-bak/docs-components/validators/url-validator.js diff --git a/packages/react-renderer-demo/src/docs-components/wizard.md b/packages/react-renderer-demo/src-bak/docs-components/wizard.md similarity index 100% rename from packages/react-renderer-demo/src/docs-components/wizard.md rename to packages/react-renderer-demo/src-bak/docs-components/wizard.md diff --git a/packages/react-renderer-demo/src/index.js b/packages/react-renderer-demo/src-bak/index.js similarity index 100% rename from packages/react-renderer-demo/src/index.js rename to packages/react-renderer-demo/src-bak/index.js diff --git a/packages/react-renderer-demo/src/layout.js b/packages/react-renderer-demo/src-bak/layout.js similarity index 100% rename from packages/react-renderer-demo/src/layout.js rename to packages/react-renderer-demo/src-bak/layout.js diff --git a/packages/react-renderer-demo/src/pages/demo.js b/packages/react-renderer-demo/src-bak/pages/demo.js similarity index 100% rename from packages/react-renderer-demo/src/pages/demo.js rename to packages/react-renderer-demo/src-bak/pages/demo.js diff --git a/packages/react-renderer-demo/src/pages/form-renderer-page.js b/packages/react-renderer-demo/src-bak/pages/form-renderer-page.js similarity index 100% rename from packages/react-renderer-demo/src/pages/form-renderer-page.js rename to packages/react-renderer-demo/src-bak/pages/form-renderer-page.js diff --git a/packages/react-renderer-demo/src/pages/landing-page.js b/packages/react-renderer-demo/src-bak/pages/landing-page.js similarity index 100% rename from packages/react-renderer-demo/src/pages/landing-page.js rename to packages/react-renderer-demo/src-bak/pages/landing-page.js diff --git a/packages/react-renderer-demo/src/pages/not-found-page.js b/packages/react-renderer-demo/src-bak/pages/not-found-page.js similarity index 100% rename from packages/react-renderer-demo/src/pages/not-found-page.js rename to packages/react-renderer-demo/src-bak/pages/not-found-page.js diff --git a/packages/react-renderer-demo/src/pages/show-case.js b/packages/react-renderer-demo/src-bak/pages/show-case.js similarity index 100% rename from packages/react-renderer-demo/src/pages/show-case.js rename to packages/react-renderer-demo/src-bak/pages/show-case.js diff --git a/packages/react-renderer-demo/src/tests/demo-test.test.js b/packages/react-renderer-demo/src-bak/tests/demo-test.test.js similarity index 100% rename from packages/react-renderer-demo/src/tests/demo-test.test.js rename to packages/react-renderer-demo/src-bak/tests/demo-test.test.js diff --git a/packages/react-renderer-demo/src/vendor.js b/packages/react-renderer-demo/src-bak/vendor.js similarity index 100% rename from packages/react-renderer-demo/src/vendor.js rename to packages/react-renderer-demo/src-bak/vendor.js diff --git a/packages/react-renderer-demo/src/vendor.scss b/packages/react-renderer-demo/src-bak/vendor.scss similarity index 100% rename from packages/react-renderer-demo/src/vendor.scss rename to packages/react-renderer-demo/src-bak/vendor.scss diff --git a/packages/react-renderer-demo/src/vendor4.js b/packages/react-renderer-demo/src-bak/vendor4.js similarity index 100% rename from packages/react-renderer-demo/src/vendor4.js rename to packages/react-renderer-demo/src-bak/vendor4.js diff --git a/packages/react-renderer-demo/src/components/common/gh-svg-icon.js b/packages/react-renderer-demo/src/components/common/gh-svg-icon.js new file mode 100644 index 000000000..82e4b0e06 --- /dev/null +++ b/packages/react-renderer-demo/src/components/common/gh-svg-icon.js @@ -0,0 +1,9 @@ +import React from 'react'; + +const GhIcon = props => ( + +); + +export default GhIcon; diff --git a/packages/react-renderer-demo/src/components/layout.js b/packages/react-renderer-demo/src/components/layout.js new file mode 100644 index 000000000..5eab6783f --- /dev/null +++ b/packages/react-renderer-demo/src/components/layout.js @@ -0,0 +1,180 @@ +import React, { useState, useRef } from 'react'; +import clsx from 'clsx'; +import { makeStyles } from '@material-ui/core/styles'; +import Toolbar from '@material-ui/core/Toolbar'; + +import Drawer from '@material-ui/core/Drawer'; +import Divider from '@material-ui/core/Divider'; +import IconButton from '@material-ui/core/IconButton'; +import MenuIcon from '@material-ui/icons/Menu'; +import SvgIcon from '@material-ui/core/SvgIcon'; +import Router from 'next/router'; + +import GhIcon from './common/gh-svg-icon'; +import Navigation from './navigation/app-navigation'; + +const drawerWidth = 240; + +const useStyles = makeStyles(theme => ({ + mainGradient: { + backgroundImage: 'linear-gradient(135deg, #41108E 0%, rgba(165, 37, 193, 1) 44.76%, #FC9957 100%)', + backgroundSize: '100vw 100vh', + backgroundRepeat: 'no-repeat', + transition: theme.transitions.create([ 'margin', 'width' ], { + easing: theme.transitions.easing.easeOut, + duration: theme.transitions.duration.enteringScreen, + }), + }, + mainGradientShift: { + width: `calc(100vw - ${drawerWidth}px)`, + transition: theme.transitions.create([ 'margin', 'width' ], { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.leavingScreen, + }), + }, + root: { + display: 'flex', + }, + appBar: { + position: 'fixed', + transition: theme.transitions.create([ 'margin', 'width' ], { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.leavingScreen, + }), + }, + menuButton: { + marginRight: theme.spacing(2), + }, + hide: { + display: 'none', + }, + drawer: { + width: drawerWidth, + flexShrink: 0, + }, + drawerPaper: { + width: drawerWidth, + }, + drawerHeader: { + display: 'flex', + alignItems: 'center', + padding: '0 8px', + ...theme.mixins.toolbar, + justifyContent: 'flex-end', + }, + content: { + flexGrow: 1, + transition: theme.transitions.create('margin', { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.leavingScreen, + }), + marginLeft: -drawerWidth, + }, + contentShift: { + transition: theme.transitions.create('margin', { + easing: theme.transitions.easing.easeOut, + duration: theme.transitions.duration.enteringScreen, + }), + marginLeft: 0, + }, + menuIcons: { + fill: theme.palette.common.white, + }, + rightAppBar: { + right: 0, + width: '100%', + backgroundImage: 'linear-gradient(135deg, #41108E 0%, rgba(165, 37, 193, 1) 44.76%, #FC9957 100%)', + backgroundSize: '100vw 100vh', + backgroundRepeat: 'no-repeat', + zIndex: 900, + }, + toolbarOverride: { + zIndex: 1000, + }, + appBarShift: { + width: `calc(100% - ${drawerWidth}px)`, + marginLeft: drawerWidth, + transition: theme.transitions.create([ 'margin', 'width' ], { + easing: theme.transitions.easing.easeOut, + duration: theme.transitions.duration.enteringScreen, + }), + }, +})); + +const Layout = ({ children }) => { + const classes = useStyles(); + const [ open, setOpen ] = useState(false); + const searchRef = useRef(null); + + const handleDrawerOpen = () => { + setOpen(true); + // setTimeout(() => searchRef.current.focus(), 500); + }; + + const handleDrawerClose = () => { + setOpen(false); + }; + + const pathname = Router && Router.router && Router.router.pathname; + return ( + +
+ + + + + + + + + + + +
+ + { children } +
+
+ + ); +}; + +export default Layout; diff --git a/packages/react-renderer-demo/src/components/navigation/app-navigation.js b/packages/react-renderer-demo/src/components/navigation/app-navigation.js new file mode 100644 index 000000000..1adcd056e --- /dev/null +++ b/packages/react-renderer-demo/src/components/navigation/app-navigation.js @@ -0,0 +1,42 @@ +import React from 'react'; +import Link from '@material-ui/core/Link'; +import List from '@material-ui/core/List'; +import ListSubheader from '@material-ui/core/ListSubheader'; +import RouterLink from 'next/link'; +import { makeStyles } from '@material-ui/core/styles'; +import IconButton from '@material-ui/core/IconButton'; +import ChevronLeftIcon from '@material-ui/icons/ChevronLeft'; + +import { navStyles } from './nav-styles'; +import MenuRenderer from './menu-renderer'; +import schema from './schema'; + +const useStyles = makeStyles(navStyles); +const Navigation = ({ closeNav, searchRef }) => { + + const classes = useStyles(); + + return ( + + + + + Data driven forms + + + + + + + ) } + className={ classes.listRoot } + > + + + ); +}; + +export default Navigation; diff --git a/packages/react-renderer-demo/src/components/navigation/mapper.js b/packages/react-renderer-demo/src/components/navigation/mapper.js new file mode 100644 index 000000000..a7b2f2d69 --- /dev/null +++ b/packages/react-renderer-demo/src/components/navigation/mapper.js @@ -0,0 +1,82 @@ +import React, { useState, forwardRef } from 'react'; +import List from '@material-ui/core/List'; +import ListItem from '@material-ui/core/ListItem'; +import ListItemText from '@material-ui/core/ListItemText'; +import Typography from '@material-ui/core/Typography'; +import ExpandLess from '@material-ui/icons/ExpandLess'; +import ExpandMore from '@material-ui/icons/ExpandMore'; +import Collapse from '@material-ui/core/Collapse'; +import makeStyles from '@material-ui/core/styles/makeStyles'; +import Link from '@material-ui/core/Link'; +import RouterNavLink from 'next/link'; +import { useRouter } from 'next/router'; + +import { navStyles } from './nav-styles'; + +const useStyles = makeStyles(navStyles); + +const Item = ({ href, linkText, component }) => { + const classes = useStyles(); + const router = useRouter(); + + return ( + ( + + + + )) } + > + + { linkText } + + + ); +}; + +const FinalList = ({ + title, + level, + link, + fields, + previousLinks = [], + renderItems, + openable = true, + open = false, +}) => { + const [ isOpen, setIsOpen ] = useState(openable ? open : true); + + const closeNav = () => setIsOpen(state => !state); + const classes = useStyles(); + + return ( + + { title && ( + + + { openable ? isOpen ? : : null } + + ) } + + + { renderItems(fields, level + 1, [ ...previousLinks, link ]) } + + + + ); +}; + +const Mapper = { + wrapper: FinalList, + item: Item, +}; + +export default Mapper; diff --git a/packages/react-renderer-demo/src/components/navigation/menu-renderer.js b/packages/react-renderer-demo/src/components/navigation/menu-renderer.js new file mode 100644 index 000000000..05e633091 --- /dev/null +++ b/packages/react-renderer-demo/src/components/navigation/menu-renderer.js @@ -0,0 +1,162 @@ +import React, { useState } from 'react'; +import TextField from '@material-ui/core/TextField'; +import { useRouter } from 'next/router'; +import Mapper from './mapper'; +import { makeStyles } from '@material-ui/core/styles'; +import { navStyles } from './nav-styles'; + +const useStyles = makeStyles(navStyles); + +const createLink = (...args) => args.join('/'); + +const renderItems = (items, level = 0, previousLinks = [ '' ]) => { + if (!items) { + return null; + } + + if (Array.isArray(items)) { + return items.map(item => renderItems(item, level, previousLinks)); + } + + const { fields, title, link, linkText, component, open, ...props } = items; + + if (fields) { + return ( + + );} + + return ( + + ); +}; + +const MenuRenderer = ({ schema }) => { + return { renderItems(schema) }; +}; + +const searchFunction = (linkText, value) => + linkText + .toLowerCase() + .replace(/ /g, '') + .includes(value.toLowerCase().replace(/ /g, '')); + +const filterSchema = (schema, value) => { + if (schema.fields) { + const result = filterSchema(schema.fields, value); + if (result) { + return { + ...schema, + open: true, + fields: result, + }; + } + + return null; + } + + if (Array.isArray(schema)) { + const result = schema + .map(field => filterSchema(field, value)) + .filter(x => x); + if (result.length > 0) { + return result; + } + + return null; + } + + return searchFunction(schema.linkText, value) ? schema : null; +}; + +const memoizeSearch = () => { + const cache = {}; + + return (schema, value) => { + if (value in cache) { + return cache[value]; + } + + cache[value] = filterSchema(schema, value); + return cache[value]; + }; +}; + +const findSelected = (schema, currentLocation, level = 1) => { + if (schema.fields) { + return { + ...schema, + open: schema.link === currentLocation[level], + level, + fields: findSelected(schema.fields, currentLocation, level + 1), + }; + } + + if (Array.isArray(schema)) { + return schema.map(field => findSelected(field, currentLocation, level)); + } + + return schema; +}; + +const memoizeCurrent = () => { + const cache = {}; + + return (schema, currentLocation) => { + const value = currentLocation.join('-'); + + if (value in cache) { + return cache[value]; + } + + cache[value] = findSelected(schema, currentLocation); + return cache[value]; + }; +}; + +const search = memoizeSearch(); +const current = memoizeCurrent(); + +const Menu = ({ schema, searchRef }) => { + const router = useRouter(); + const [ value, setValue ] = useState(''); + const classes = useStyles(); + const currentLocation = router.pathname.split('/'); + + const schemaFiltered = value !== '' ? search(schema, value) : current(schema, currentLocation); + + return ( + + setValue(e.target.value) } + className={ classes.searchButton } + inputRef={ searchRef } + autoFocus + /> + + + ); +}; + +export default Menu; diff --git a/packages/react-renderer-demo/src/components/navigation/nav-styles.js b/packages/react-renderer-demo/src/components/navigation/nav-styles.js new file mode 100644 index 000000000..80084d4d6 --- /dev/null +++ b/packages/react-renderer-demo/src/components/navigation/nav-styles.js @@ -0,0 +1,48 @@ +const drawerWidth = 240; + +export const navStyles = theme => ({ + root: { + display: 'flex !important', + }, + navHeader: { + display: 'flex', + justifyContent: 'space-between', + borderBottom: `1px solid ${theme.palette.grey[200]}`, + }, + appBar: { + width: `calc(100% - ${drawerWidth}px)`, + marginLeft: drawerWidth, + }, + drawer: { + width: drawerWidth, + flexShrink: 0, + }, + drawerPaper: { + top: 'initial', + width: drawerWidth, + }, + toolbar: theme.mixins.toolbar, + content: { + flexGrow: 1, + backgroundColor: theme.palette.background.default, + padding: theme.spacing(3), + }, + listRoot: { + width: '100%', + maxWidth: 360, + backgroundColor: theme.palette.background.paper, + }, + nested: { + padding: '8px 16px !important', + justifyContent: 'flex-start !important', + }, + listItem: { + padding: '8px 16px !important', + justifyContent: 'flex-start !important', + }, + searchButton: { + width: '100%', + paddingLeft: 16, + paddingRight: 16, + }, +}); diff --git a/packages/react-renderer-demo/src/components/navigation/schema.js b/packages/react-renderer-demo/src/components/navigation/schema.js new file mode 100644 index 000000000..ed364f834 --- /dev/null +++ b/packages/react-renderer-demo/src/components/navigation/schema.js @@ -0,0 +1,81 @@ +// import { baseExamples } from '../examples-definitions'; +// import { otherExamples } from '../other-pages'; +// import { docs } from '../documenation-pages'; + +const schema = [ + { + linkText: 'Demo', + link: 'show-case', + }, + { + linkText: 'Live Form Editor', + link: 'live-editor', + }, + { + title: 'React form renderer', + link: 'renderer', + fields: [ + //...docs, + ], + }, + { + title: 'Component definitions', + link: 'component-example', + fields: [ + //...baseExamples.sort((a, b) => a.linkText.localeCompare(b.linkText)), + ], + }, + { + title: 'Others', + link: 'others', + fields: [ + //...otherExamples, + ], + }, +]; + +const generateLinks = (data, prevLink, prefix = '', escapeLink) => data.map((item, index) => { + let result = { ...item }; + if (result.fields) { + result.fields = generateLinks( + result.fields, + { + link: `/${result.link || result.component}`, + label: result.linkText || result.title, + }, + `/${result.link || result.component}`, + data[index + 1] ? { + link: `${prefix}/${data[index + 1].link || data[index + 1].component}`, + label: data[index + 1].linkText || data[index + 1].title, + } : undefined + ); + } + + if (index > 0 && !result.prev) { + result.prev = { + link: `${prefix}/${data[index - 1].link || data[index - 1].component}`, + label: data[index - 1].linkText || data[index - 1].title, + }; + } + + if (!result.prev) { + result.prev = prevLink; + } + + if (data[index + 1] && !result.next) { + result.next = { + link: `${prefix}/${data[index + 1].link || data[index + 1].component}`, + label: data[index + 1].linkText || data[index + 1].title, + }; + } + + if (index === data.length - 1 && escapeLink && !result.next) { + result.next = escapeLink; + } + + return result; +}); + +const links = generateLinks(schema); + +export default links; From 702eebb0ce2d5b0df8a4f081b09da917a7311af2 Mon Sep 17 00:00:00 2001 From: Martin Marosi Date: Mon, 16 Sep 2019 15:40:14 +0200 Subject: [PATCH 003/131] Moved layout to common component --- packages/react-renderer-demo/pages/_app.js | 5 ++++- packages/react-renderer-demo/pages/index.js | 12 +++--------- .../react-renderer-demo/src/components/layout.js | 4 +++- 3 files changed, 10 insertions(+), 11 deletions(-) diff --git a/packages/react-renderer-demo/pages/_app.js b/packages/react-renderer-demo/pages/_app.js index 846adbc8e..3d46784e8 100644 --- a/packages/react-renderer-demo/pages/_app.js +++ b/packages/react-renderer-demo/pages/_app.js @@ -4,6 +4,7 @@ import Head from 'next/head'; import { ThemeProvider } from '@material-ui/styles'; import CssBaseline from '@material-ui/core/CssBaseline'; import theme from '../src/theme'; +import Layout from '../src/components/layout'; export default class MyApp extends App { componentDidMount() { @@ -25,7 +26,9 @@ export default class MyApp extends App { { /* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */ } - + + + ); diff --git a/packages/react-renderer-demo/pages/index.js b/packages/react-renderer-demo/pages/index.js index ba87e0e5e..26b7bbb1d 100644 --- a/packages/react-renderer-demo/pages/index.js +++ b/packages/react-renderer-demo/pages/index.js @@ -7,14 +7,8 @@ import Layout from '../src/components/layout'; export default function Index() { return ( - - - - - Next.js example - - - - +

+ There wil be dragons +

); } diff --git a/packages/react-renderer-demo/src/components/layout.js b/packages/react-renderer-demo/src/components/layout.js index 5eab6783f..d416eff27 100644 --- a/packages/react-renderer-demo/src/components/layout.js +++ b/packages/react-renderer-demo/src/components/layout.js @@ -170,7 +170,9 @@ const Layout = ({ children }) => { - { children } +
+ { children } +
From b8d6123aaf2cbf6edcd0110549ac6ea40cf5b897 Mon Sep 17 00:00:00 2001 From: Martin Marosi Date: Mon, 16 Sep 2019 15:51:00 +0200 Subject: [PATCH 004/131] Added landing page --- packages/react-renderer-demo/pages/index.js | 63 +++++- .../src-bak/common/gh-svg-icon.js | 9 - .../react-renderer-demo/src-bak/layout.js | 185 ------------------ .../src-bak/pages/landing-page.js | 61 ------ .../src/components/code-editor/index.js | 41 ++++ .../components/common/landing-page-logo.js} | 0 .../landing-page}/landing-page-cards.js | 5 +- .../landing-page}/landing-page-title.js | 2 +- 8 files changed, 101 insertions(+), 265 deletions(-) delete mode 100644 packages/react-renderer-demo/src-bak/common/gh-svg-icon.js delete mode 100644 packages/react-renderer-demo/src-bak/layout.js delete mode 100644 packages/react-renderer-demo/src-bak/pages/landing-page.js create mode 100644 packages/react-renderer-demo/src/components/code-editor/index.js rename packages/react-renderer-demo/{src-bak/common/logo-svg-icon.js => src/components/common/landing-page-logo.js} (100%) rename packages/react-renderer-demo/{src-bak/components => src/components/landing-page}/landing-page-cards.js (97%) rename packages/react-renderer-demo/{src-bak/components => src/components/landing-page}/landing-page-title.js (93%) diff --git a/packages/react-renderer-demo/pages/index.js b/packages/react-renderer-demo/pages/index.js index 26b7bbb1d..20495673c 100644 --- a/packages/react-renderer-demo/pages/index.js +++ b/packages/react-renderer-demo/pages/index.js @@ -1,14 +1,61 @@ import React from 'react'; -import Container from '@material-ui/core/Container'; +import { makeStyles } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; -import Box from '@material-ui/core/Box'; +import Button from '@material-ui/core/Button'; +import Link from 'next/link'; -import Layout from '../src/components/layout'; +import LandingPageTitle from '../src/components/landing-page/landing-page-title'; +import LandingPageCards from '../src/components/landing-page/landing-page-cards'; -export default function Index() { +const useStyles = makeStyles(theme => ({ + landingPageContainer: { + marginTop: 128, + paddingBottom: 48, + }, + landingPageText: { + marginTop: 48, + textAlign: 'center', + color: theme.palette.common.white, + maxWidth: 540, + marginLeft: 'auto', + marginRight: 'auto', + }, + getStartedLink: { + display: 'block', + textAlign: 'center', + marginTop: 48, + }, + getStartedButton: { + border: `1px solid ${theme.palette.common.white}`, + borderRadius: 2, + color: theme.palette.common.white, + paddingLeft: 16, + paddingRight: 16, + textTransform: 'none', + }, +})); + +const LandingPage = () => { + const classes = useStyles(); return ( -

- There wil be dragons -

+ +
+ + + Data Driven Forms is a component designed for ManageIQ and Red Hat Cloud Services projects that takes + JSON form definitions and renders them into react components. + +
+ + + +
+
+ + ); -} +}; + +export default LandingPage; diff --git a/packages/react-renderer-demo/src-bak/common/gh-svg-icon.js b/packages/react-renderer-demo/src-bak/common/gh-svg-icon.js deleted file mode 100644 index 82e4b0e06..000000000 --- a/packages/react-renderer-demo/src-bak/common/gh-svg-icon.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; - -const GhIcon = props => ( - -); - -export default GhIcon; diff --git a/packages/react-renderer-demo/src-bak/layout.js b/packages/react-renderer-demo/src-bak/layout.js deleted file mode 100644 index 8043666e3..000000000 --- a/packages/react-renderer-demo/src-bak/layout.js +++ /dev/null @@ -1,185 +0,0 @@ -import React from 'react'; -import clsx from 'clsx'; -import PropTypes from 'prop-types'; -import makeStyles from '@material-ui/core/styles/makeStyles'; -import Drawer from '@material-ui/core/Drawer'; -import Toolbar from '@material-ui/core/Toolbar'; -import Divider from '@material-ui/core/Divider'; -import IconButton from '@material-ui/core/IconButton'; -import MenuIcon from '@material-ui/icons/Menu'; -import SvgIcon from '@material-ui/core/SvgIcon'; -import GhIcon from './common/gh-svg-icon'; - -import { withRouter } from 'react-router-dom'; -import Navigation from './common/examples-nav'; -import Footer from './components/footer'; -import ConnectedLinks from './common/component/connected-links'; - -export const drawerWidth = 240; - -const useStyles = makeStyles(theme => ({ - mainGradient: { - backgroundImage: 'linear-gradient(135deg, #41108E 0%, rgba(165, 37, 193, 1) 44.76%, #FC9957 100%)', - backgroundSize: '100vw 100vh', - backgroundRepeat: 'no-repeat', - transition: theme.transitions.create([ 'margin', 'width' ], { - easing: theme.transitions.easing.easeOut, - duration: theme.transitions.duration.enteringScreen, - }), - }, - mainGradientShift: { - width: `calc(100vw - ${drawerWidth}px)`, - transition: theme.transitions.create([ 'margin', 'width' ], { - easing: theme.transitions.easing.sharp, - duration: theme.transitions.duration.leavingScreen, - }), - }, - root: { - display: 'flex', - }, - appBar: { - position: 'fixed', - transition: theme.transitions.create([ 'margin', 'width' ], { - easing: theme.transitions.easing.sharp, - duration: theme.transitions.duration.leavingScreen, - }), - }, - menuButton: { - marginRight: theme.spacing(2), - }, - hide: { - display: 'none', - }, - drawer: { - width: drawerWidth, - flexShrink: 0, - }, - drawerPaper: { - width: drawerWidth, - }, - drawerHeader: { - display: 'flex', - alignItems: 'center', - padding: '0 8px', - ...theme.mixins.toolbar, - justifyContent: 'flex-end', - }, - content: { - flexGrow: 1, - transition: theme.transitions.create('margin', { - easing: theme.transitions.easing.sharp, - duration: theme.transitions.duration.leavingScreen, - }), - marginLeft: -drawerWidth, - }, - contentShift: { - transition: theme.transitions.create('margin', { - easing: theme.transitions.easing.easeOut, - duration: theme.transitions.duration.enteringScreen, - }), - marginLeft: 0, - }, - menuIcons: { - fill: theme.palette.common.white, - }, - rightAppBar: { - right: 0, - width: '100%', - backgroundImage: 'linear-gradient(135deg, #41108E 0%, rgba(165, 37, 193, 1) 44.76%, #FC9957 100%)', - backgroundSize: '100vw 100vh', - backgroundRepeat: 'no-repeat', - zIndex: 900, - }, - toolbarOverride: { - zIndex: 1000, - }, - appBarShift: { - width: `calc(100% - ${drawerWidth}px)`, - marginLeft: drawerWidth, - transition: theme.transitions.create([ 'margin', 'width' ], { - easing: theme.transitions.easing.easeOut, - duration: theme.transitions.duration.enteringScreen, - }), - }, -})); - -const Layout = ({ children, location: { pathname }}) => { - const classes = useStyles(); - const [ open, setOpen ] = React.useState(pathname !== '/'); - const searchRef = React.useRef(null); - - function handleDrawerOpen() { - setOpen(true); - setTimeout(() => searchRef.current.focus(), 500); - } - - function handleDrawerClose() { - setOpen(false); - } - - return ( - -
- - - - - - - - - -
- - { children } - -
-
-