Add mapper generator #494

rvsia · 2020-05-15T14:11:54Z

When user runs

yarn generate-template

It will ask him for a mapper name and it will automatically create the project folder.

codecov · 2020-05-15T14:15:39Z

Codecov Report

Merging #494 into master will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master     #494   +/-   ##
=======================================
  Coverage   89.78%   89.78%           
=======================================
  Files         144      144           
  Lines        2437     2437           
  Branches      813      813           
=======================================
  Hits         2188     2188           
  Misses        249      249

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 35b9d03...cfa98f5. Read the comment docs.

Hyperkid123

Looks good. I think we should finish these points:

remove any PF(ar any other component library) references
Instead of returning strings with component names, generate simple HTML inputs connected to the form API. Sometimes it might not be clear to how to use the onChange function
Include common packages into examples. We would not want to implement them again in each mapper

Hyperkid123 · 2020-05-18T06:54:39Z

packages/react-renderer-demo/src/app/pages/renderer/development-setup.md

@@ -87,6 +87,16 @@ All packages are releasing together and they share the version number.

 If your changes influence API or add new features, you should describe these new options in the `demo` repository. Thanks!

+# Generating a mapper


I would the template word. it might seem that we are able to just generate fully featured component mapper.

Hyperkid123 · 2020-05-18T06:56:02Z

scripts/generate-mapper.js

+    type: 'input',
+    message: 'Project name (i.e.: pf4, pf3, mui, blueprint, etc.):',
+    validate(input) {
+      if (/^([A-Za-z\d])+$/.test(input)) {


I think we can allow a bit more characters. -, _ would be a good addition

Hyperkid123 · 2020-05-18T06:56:51Z

scripts/generate-mapper.js

+    1. Update styles in "packages/${componentmapper}-component-mapper/demo/index.html"
+    2. Add dependencies in "packages/${componentmapper}-component-mapper/package.json",
+    3. Mark the dependencies as globals/external in "packages/${componentmapper}-component-mapper/rollup.config.js"
+    4. Mark the dependencies as externals in "packages/${componentmapper}-component-mapper/config/webpack.config.js"


This step is not necessary. Webpack is only used for dev server.

Hyperkid123 · 2020-05-18T06:57:33Z

templates/component-mapper/README.md

@@ -0,0 +1,179 @@
+[![npm version](https://badge.fury.io/js/%40data-driven-forms%2Fpf4-component-mapper.svg)](https://badge.fury.io/js/%40data-driven-forms%2Fpf4-component-mapper)


PF4 reference

Hyperkid123 · 2020-05-18T07:01:33Z

templates/component-mapper/demo/demo-schemas/miq-schema.js

@@ -0,0 +1,1949 @@
+/* eslint-disable camelcase */
+const input = {


I don't think it's necessary to copy this schema. I think we can even remove it completely

Hyperkid123 · 2020-05-18T07:09:56Z

templates/component-mapper/src/src/files/field-array.js

+import React from 'react';
+import PropTypes from 'prop-types';
+
+const FieldArray = () => 'FieldArray';


Same here I would show of the common package.

Hyperkid123 · 2020-05-18T07:10:44Z

templates/component-mapper/src/src/files/form-template.js

+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
+};
+
+export const Description = ({ children }) => <span>{children}</span>;


<p></p> span is inline

Hyperkid123 · 2020-05-18T07:11:14Z

templates/component-mapper/src/src/files/form-template.js

+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
+};
+
+export const Form = ({ children, ...props }) => <form {...props}>{children}</form>;


noValidate is missing. The form will prioritize HTML validation over ours.

Hyperkid123 · 2020-05-18T07:12:05Z

templates/component-mapper/src/src/files/radio.js

+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Radio = () => 'Radio';


Again we can use some basic implementation to showcase what props and how to use them in order to get this working. Mainly the onChange is important

Hyperkid123 · 2020-05-18T07:12:41Z

templates/component-mapper/src/src/files/select.js

+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Select = () => 'Select';


rvsia · 2020-05-18T10:25:39Z

@Hyperkid123 changed, it creates a fully functional mapper now. All components should work.

Hyperkid123 · 2020-05-18T14:11:32Z

templates/component-mapper/src/files/checkbox.js

+  return (
+    <React.Fragment>
+      <label htmlFor={name}>{label}</label>
+      <input {...input} type="checkbox" disabled={isDisabled}/>


you are missing id={name} for the label to work

Hyperkid123 · 2020-05-22T08:55:57Z

🎉 This PR is included in version 2.4.0 🎉

The release is available on

Demo can be found here!

rvsia added the enhancement New feature or request label May 15, 2020

rvsia requested a review from Hyperkid123 May 15, 2020 14:11

rvsia assigned Hyperkid123 May 15, 2020

rvsia force-pushed the addMapperGenerator branch from 883787e to 9ffa298 Compare May 15, 2020 14:12

rvsia linked an issue May 15, 2020 that may be closed by this pull request

Make generator for component mappers #491

Closed

Hyperkid123 reviewed May 18, 2020

View reviewed changes

rvsia force-pushed the addMapperGenerator branch 2 times, most recently from 2179e12 to 00b9861 Compare May 18, 2020 10:22

Add mapper generator

ea36b35

rvsia force-pushed the addMapperGenerator branch from 00b9861 to ea36b35 Compare May 18, 2020 10:25

Hyperkid123 reviewed May 18, 2020

View reviewed changes

Hyperkid123 approved these changes May 18, 2020

View reviewed changes

Generator: add id to checkbox

cfa98f5

rvsia force-pushed the addMapperGenerator branch from 0c28d74 to cfa98f5 Compare May 18, 2020 14:30

Hyperkid123 merged commit 00ff550 into data-driven-forms:master May 18, 2020

Hyperkid123 added the released label May 22, 2020

rvsia deleted the addMapperGenerator branch June 4, 2020 14:02

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add mapper generator #494

Add mapper generator #494

Uh oh!

rvsia commented May 15, 2020 •

edited

Loading

Uh oh!

codecov bot commented May 15, 2020 •

edited

Loading

Uh oh!

Hyperkid123 left a comment

Uh oh!

Hyperkid123 May 18, 2020

Uh oh!

Hyperkid123 May 18, 2020

Uh oh!

Hyperkid123 May 18, 2020

Uh oh!

Hyperkid123 May 18, 2020

Uh oh!

Hyperkid123 May 18, 2020

Uh oh!

Hyperkid123 May 18, 2020

Uh oh!

Hyperkid123 May 18, 2020

Uh oh!

Hyperkid123 May 18, 2020

Uh oh!

Hyperkid123 May 18, 2020

Uh oh!

Hyperkid123 May 18, 2020

Uh oh!

rvsia commented May 18, 2020

Uh oh!

Hyperkid123 May 18, 2020

Uh oh!

Hyperkid123 commented May 22, 2020

Uh oh!

Uh oh!

		@@ -87,6 +87,16 @@ All packages are releasing together and they share the version number.

		If your changes influence API or add new features, you should describe these new options in the `demo` repository. Thanks!

		# Generating a mapper

		@@ -0,0 +1,179 @@
		[![npm version](https://badge.fury.io/js/%40data-driven-forms%2Fpf4-component-mapper.svg)](https://badge.fury.io/js/%40data-driven-forms%2Fpf4-component-mapper)

		@@ -0,0 +1,1949 @@
		/* eslint-disable camelcase */
		const input = {

Add mapper generator #494

Add mapper generator #494

Uh oh!

Conversation

rvsia commented May 15, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented May 15, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Hyperkid123 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rvsia commented May 18, 2020

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Hyperkid123 commented May 22, 2020

Uh oh!

Uh oh!

rvsia commented May 15, 2020 •

edited

Loading

codecov bot commented May 15, 2020 •

edited

Loading