Add stackblitz templates of ant components

Author: Arun-42

packages/react-renderer-demo/scripts/generate-component-examples.js

@@ -9,7 +9,8 @@ const availableMappers = [
   { title: 'PF4', mapper: 'pf4' },
   { title: 'PF3', mapper: 'pf3' },
   { title: 'BJS', mapper: 'blueprint' },
-  { title: 'SUIR', mapper: 'suir' }
+  { title: 'SUIR', mapper: 'suir' },
+  { title: 'ANT', mapper: 'ant' }
 ];
 
 const targetDirectory = path.resolve(__dirname, '../doc-components');

packages/react-renderer-demo/src/components/component-example.js

@@ -24,6 +24,7 @@ import { pf4Code, pf4WizardCode, pf4Html, pf4Dependencies } from '../stackblitz-
 import { pf3Code, pf3WizardCode, pf3Html, pf3Dependencies } from '../stackblitz-templates/pf3-templates';
 import { blueprintCode, blueprintWizardCode, blueprintHtml, blueprintDependencies } from '../stackblitz-templates/blueprint-templates';
 import { suirCode, suirWizardCode, suirHtml, suirDependencies } from '../stackblitz-templates/suir-template';
+import { antCode, antWizardCode, antHtml, antDependencies } from '../stackblitz-templates/ant-templates';
 import avalableMappers from '../helpers/available-mappers';
 
 const project = {
@@ -120,6 +121,10 @@ const blitzFiles = {
   suir: {
     'index.html': suirHtml,
     'index.js': suirCode
+  },
+  ant: {
+    'index.html': antHtml,
+    'index.js': antCode
   }
 };
 
@@ -128,23 +133,26 @@ const blitzWizards = {
   pf4: pf4WizardCode,
   pf3: pf3WizardCode,
   blueprint: blueprintWizardCode,
-  suir: suirWizardCode
+  suir: suirWizardCode,
+  ant: antWizardCode
 };
 
 const blitzDependencies = {
   mui: muiDependencies,
   pf4: pf4Dependencies,
   pf3: pf3Dependencies,
   blueprint: blueprintDependencies,
-  suir: suirDependencies
+  suir: suirDependencies,
+  ant: antDependencies
 };
 
 const mapperTab = {
   mui: 0,
   pf4: 1,
   pf3: 2,
   blueprint: 3,
-  suir: 4
+  suir: 4,
+  ant: 5
 };
 
 const ComponentExample = ({ variants, schema, activeMapper, component }) => {

packages/react-renderer-demo/src/doc-components/examples-texts/ant/ant-field-array.md

@@ -0,0 +1 @@
+todo

packages/react-renderer-demo/src/doc-components/field-array.js

@@ -6,7 +6,7 @@ import Pf3FieldArray from './examples-texts/pf3/pf3-field-array.md';
 import SuirFieldArray from './examples-texts/suir/suir-field-array.md';
 import BlueprintFieldArray from './examples-texts/blueprint/blueprint-field-array.md';
 import GenericMuiComponent from '../helpers/generic-mui-component';
-
+import AntFieldArray from './examples-texts/ant/ant-field-array.md';
 const FieldArray = ({ activeMapper }) => {
   if (activeMapper === 'mui') {
     return <MuiFieldArray />;
@@ -28,6 +28,10 @@ const FieldArray = ({ activeMapper }) => {
     return <BlueprintFieldArray />;
   }
 
+  if (activeMapper === 'ant') {
+    return <AntFieldArray />;
+  }
+
   return <GenericMuiComponent activeMapper={activeMapper} component="field-array" />;
 };
 

packages/react-renderer-demo/src/helpers/available-mappers.js

@@ -3,7 +3,8 @@ const avalableMappers = [
   { title: 'PF4', mapper: 'pf4' },
   { title: 'PF3', mapper: 'pf3' },
   { title: 'BJS', mapper: 'blueprint' },
-  { title: 'SUIR', mapper: 'suir' }
+  { title: 'SUIR', mapper: 'suir' },
+  { title: 'ANT', mapper: 'ant' }
 ];
 
 export default avalableMappers;

packages/react-renderer-demo/src/helpers/generic-mui-component.js

@@ -10,7 +10,8 @@ export const docsLinks = {
   pf4: 'https://patternfly-react.surge.sh/documentation/react/components/',
   pf3: 'https://patternfly-react-pf3.surge.sh/?path=/story/*',
   blueprint: 'https://blueprintjs.com/docs/',
-  suir: 'https://react.semantic-ui.com/'
+  suir: 'https://react.semantic-ui.com/',
+  ant: 'https://ant.design/components/'
 };
 
 const mapperLinks = {
@@ -44,6 +45,23 @@ const mapperLinks = {
     [componentTypes.BUTTON]: '#core/components/button',
     [componentTypes.DUAL_LIST_SELECT]: '',
     [componentTypes.SLIDER]: '#core/components/sliders'
+  },
+  ant: {
+    [componentTypes.TEXT_FIELD]: 'input',
+    [componentTypes.CHECKBOX]: 'checkbox',
+    [componentTypes.SUB_FORM]: '',
+    [componentTypes.RADIO]: 'radio/#RadioGroup',
+    [componentTypes.TABS]: 'tabs',
+    [componentTypes.DATE_PICKER]: 'date-picker',
+    [componentTypes.TIME_PICKER]: 'time-picker',
+    [componentTypes.WIZARD]: 'steps',
+    [componentTypes.SWITCH]: 'switch',
+    [componentTypes.TEXTAREA]: 'input/#Input.TextArea',
+    [componentTypes.SELECT]: 'select',
+    [componentTypes.PLAIN_TEXT]: 'typography/#Typography.Paragraph',
+    [componentTypes.BUTTON]: 'button',
+    [componentTypes.DUAL_LIST_SELECT]: 'transfer',
+    [componentTypes.SLIDER]: 'slider'
   }
 };
 

packages/react-renderer-demo/src/stackblitz-templates/ant-templates.js

@@ -0,0 +1,70 @@
+export const antHtml = `
+<html>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
+`;
+
+export const antCode = `import React, { Component } from 'react';
+import { render } from 'react-dom';
+import FormRenderer from '@data-driven-forms/react-form-renderer/dist/cjs/form-renderer';
+import FormTemplate from '@data-driven-forms/ant-component-mapper/dist/cjs/form-template';
+import componentMapper from '@data-driven-forms/ant-component-mapper/dist/cjs/component-mapper';
+import 'antd/dist/antd.css'
+
+import schema from './schema'
+
+class App extends Component {
+  render() {
+    return (
+      <div style={{margin: 24}}>
+        <FormRenderer
+          schema={schema}
+          FormTemplate={FormTemplate}
+          componentMapper={componentMapper}
+          onSubmit={console.log}
+        />
+      </div>
+    );
+  }
+}
+
+render(<App />, document.getElementById('root'));`;
+
+export const antWizardCode = `import React, { Component } from 'react';
+import { render } from 'react-dom';
+import FormRenderer from '@data-driven-forms/react-form-renderer/dist/cjs/form-renderer';
+import AntFormTemplate from '@data-driven-forms/ant-component-mapper/dist/cjs/form-template';
+import componentMapper from '@data-driven-forms/ant-component-mapper/dist/cjs/component-mapper';
+import 'antd/dist/antd.css'
+
+import schema from './schema'
+
+const FormTemplate = (props) => <AntFormTemplate {...props} showFormControls={false} />
+
+class App extends Component {
+  render() {
+    return (
+      <div style={{margin: 24}}>
+        <FormRenderer
+          schema={schema}
+          FormTemplate={FormTemplate}
+          componentMapper={componentMapper}
+          onSubmit={console.log}
+        />
+      </div>
+    );
+  }
+}
+
+render(<App />, document.getElementById('root'));`;
+
+export const antDependencies = {
+  react: '^16.12.0',
+  'react-dom': '^16.12.0',
+  '@data-driven-forms/react-form-renderer': 'latest',
+  '@data-driven-forms/ant-component-mapper': '^0.0.2',
+  antd: 'latest',
+  'prop-types': 'latest'
+};