Antd form code generator

46 | Antd react form code generator 47 |

49 | 50 | 55 | 56 | 57 |

63 | 64 |

65 | {formCode ? ( 66 | message.success("Copied!")} 69 | > 70 | 73 | 74 | ) : null} 75 | 76 |

78 |

27 | {this.props.errors && this.props.errors.length ? ( 28 | 33 | ) : ( 34 |

Error will appear here

35 | )} 36 | 37 | ); 38 | } 39 | } 40 | 41 | export default ErrorDisplay; 42 | -------------------------------------------------------------------------------- /src/core/generator.js: -------------------------------------------------------------------------------- 1 | import prettier from "prettier/standalone"; 2 | import plugins from "prettier/parser-babylon"; 3 | import { pipe } from "../common/utils"; 4 | import { validateSchema } from "./validator"; 5 | 6 | const fieldGenerator = ({ field, label }) => { 7 | if (typeof field === "object") { 8 | const { type, props, options } = field; 9 | 10 | const propsStr = props 11 | ? Object.keys(props) 12 | .map(p => `${p}="${props[p]}"`) 13 | .join(" ") 14 | : ""; 15 | 16 | if (type === "Select") { 17 | return `<${type} ${propsStr}>{${ 18 | options.varName 19 | }.map(o => )}`; 22 | } 23 | 24 | if (type === "Input") { 25 | return `<${type} ${propsStr} />`; 26 | } 27 | 28 | if (type === "Checkbox") { 29 | return `<${type} ${propsStr}>${label}`; 30 | } 31 | } 32 | return `<${field} />`; 33 | }; 34 | 35 | const generator = declarations => { 36 | const formItems = declarations.map(d => { 37 | return `\n{/** ${d.label} Field */} 38 | 39 | {getFieldDecorator ('${d.valuePropName}', { 40 | ${d.initialValue ? `initialValue: ${d.initialValue},` : ``} 41 | rules: ${JSON.stringify(d.validations)}, 42 | }) (${fieldGenerator(d)})} 43 | `; 44 | }); 45 | return formItems; 46 | }; 47 | 48 | const commentWrapper = codeItems => 49 | `${codeItems.join("\n\n")}`; 50 | 51 | const formatCode = codeString => 52 | prettier.format(codeString, { parser: "babylon", plugins: [plugins] }); 53 | 54 | const wrapper = declarations => { 55 | const { status: isValid, errors } = validateSchema(declarations); 56 | 57 | let code; 58 | if (isValid) { 59 | code = pipe( 60 | [declarations], 61 | generator, 62 | commentWrapper, 63 | formatCode 64 | )[0]; 65 | } 66 | 67 | return { isValid, errors, code }; 68 | }; 69 | 70 | export default wrapper; 71 | -------------------------------------------------------------------------------- /src/core/validator.js: -------------------------------------------------------------------------------- 1 | import Ajv from "ajv"; 2 | 3 | // TODO: Break the validator in parts using the dependency keyword 4 | const VALIDATOR_SCHEMA = { 5 | type: "array", 6 | title: "Antd form code schema", 7 | description: "Schema to generate antd lib specific form code", 8 | minItems: 1, 9 | items: { 10 | type: "object", 11 | properties: { 12 | field: { 13 | if: { type: "string" }, 14 | then: { enum: ["Input"] }, 15 | else: { 16 | type: "object", 17 | properties: { 18 | type: { 19 | type: "string", 20 | enum: ["Select", "Input", "Checkbox"] 21 | }, 22 | props: { 23 | type: "object", 24 | patternProperties: { 25 | "[sS]*": { 26 | anyOf: [{ type: "string" }, { type: "number" }] 27 | } 28 | } 29 | }, 30 | options: { 31 | type: "object", 32 | properties: { 33 | varName: { 34 | type: "string" 35 | }, 36 | labelKey: { 37 | type: "string" 38 | }, 39 | valueKey: { 40 | type: "string" 41 | } 42 | }, 43 | required: ["varName"] 44 | } 45 | }, 46 | required: ["type"] 47 | } 48 | }, 49 | label: { 50 | type: "string" 51 | }, 52 | validations: { 53 | type: "array", 54 | minItems: 1, 55 | items: { 56 | type: "object", 57 | properties: { 58 | message: { type: "string" }, 59 | enums: { type: "string" }, 60 | len: { type: "number" }, 61 | max: { type: "number" }, 62 | min: { type: "number" }, 63 | pattern: { type: "string" }, 64 | required: { type: "boolean" }, 65 | type: { 66 | type: "string", 67 | enum: [ 68 | "string", 69 | "number", 70 | "boolean", 71 | "method", 72 | "regexp", 73 | "integer", 74 | "float", 75 | "array", 76 | "object", 77 | "enum", 78 | "date", 79 | "url", 80 | "hex", 81 | "email" 82 | ] 83 | } 84 | }, 85 | required: ["message"] 86 | } 87 | }, 88 | valuePropName: { 89 | type: "string" 90 | } 91 | }, 92 | required: ["field", "label", "valuePropName"] 93 | } 94 | }; 95 | 96 | export const validateSchema = data => { 97 | const ajv = new Ajv(); // options can be passed, e.g. {allErrors: true} 98 | const validate = ajv.compile(VALIDATOR_SCHEMA); 99 | const isValid = validate(data); 100 | 101 | let returnVal; 102 | if (!isValid) { 103 | returnVal = { 104 | status: false, 105 | errors: validate.errors 106 | }; 107 | } else { 108 | returnVal = { 109 | status: true 110 | }; 111 | } 112 | 113 | return returnVal; 114 | }; 115 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @import "~antd/dist/antd.css"; 2 | 3 | body { 4 | margin: 0; 5 | padding: 0; 6 | font-family: sans-serif; 7 | } 8 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import registerServiceWorker from './registerServiceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | registerServiceWorker(); 9 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /src/registerServiceWorker.js: -------------------------------------------------------------------------------- 1 | // In production, we register a service worker to serve assets from local cache. 2 | 3 | // This lets the app load faster on subsequent visits in production, and gives 4 | // it offline capabilities. However, it also means that developers (and users) 5 | // will only see deployed updates on the "N+1" visit to a page, since previously 6 | // cached resources are updated in the background. 7 | 8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy. 9 | // This link also includes instructions on opting out of this behavior. 10 | 11 | const isLocalhost = Boolean( 12 | window.location.hostname === 'localhost' || 13 | // [::1] is the IPv6 localhost address. 14 | window.location.hostname === '[::1]' || 15 | // 127.0.0.1/8 is considered localhost for IPv4. 16 | window.location.hostname.match( 17 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 18 | ) 19 | ); 20 | 21 | export default function register() { 22 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 23 | // The URL constructor is available in all browsers that support SW. 24 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location); 25 | if (publicUrl.origin !== window.location.origin) { 26 | // Our service worker won't work if PUBLIC_URL is on a different origin 27 | // from what our page is served on. This might happen if a CDN is used to 28 | // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374 29 | return; 30 | } 31 | 32 | window.addEventListener('load', () => { 33 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 34 | 35 | if (isLocalhost) { 36 | // This is running on localhost. Lets check if a service worker still exists or not. 37 | checkValidServiceWorker(swUrl); 38 | 39 | // Add some additional logging to localhost, pointing developers to the 40 | // service worker/PWA documentation. 41 | navigator.serviceWorker.ready.then(() => { 42 | console.log( 43 | 'This web app is being served cache-first by a service ' + 44 | 'worker. To learn more, visit https://goo.gl/SC7cgQ' 45 | ); 46 | }); 47 | } else { 48 | // Is not local host. Just register service worker 49 | registerValidSW(swUrl); 50 | } 51 | }); 52 | } 53 | } 54 | 55 | function registerValidSW(swUrl) { 56 | navigator.serviceWorker 57 | .register(swUrl) 58 | .then(registration => { 59 | registration.onupdatefound = () => { 60 | const installingWorker = registration.installing; 61 | installingWorker.onstatechange = () => { 62 | if (installingWorker.state === 'installed') { 63 | if (navigator.serviceWorker.controller) { 64 | // At this point, the old content will have been purged and 65 | // the fresh content will have been added to the cache. 66 | // It's the perfect time to display a "New content is 67 | // available; please refresh." message in your web app. 68 | console.log('New content is available; please refresh.'); 69 | } else { 70 | // At this point, everything has been precached. 71 | // It's the perfect time to display a 72 | // "Content is cached for offline use." message. 73 | console.log('Content is cached for offline use.'); 74 | } 75 | } 76 | }; 77 | }; 78 | }) 79 | .catch(error => { 80 | console.error('Error during service worker registration:', error); 81 | }); 82 | } 83 | 84 | function checkValidServiceWorker(swUrl) { 85 | // Check if the service worker can be found. If it can't reload the page. 86 | fetch(swUrl) 87 | .then(response => { 88 | // Ensure service worker exists, and that we really are getting a JS file. 89 | if ( 90 | response.status === 404 || 91 | response.headers.get('content-type').indexOf('javascript') === -1 92 | ) { 93 | // No service worker found. Probably a different app. Reload the page. 94 | navigator.serviceWorker.ready.then(registration => { 95 | registration.unregister().then(() => { 96 | window.location.reload(); 97 | }); 98 | }); 99 | } else { 100 | // Service worker found. Proceed as normal. 101 | registerValidSW(swUrl); 102 | } 103 | }) 104 | .catch(() => { 105 | console.log( 106 | 'No internet connection found. App is running in offline mode.' 107 | ); 108 | }); 109 | } 110 | 111 | export function unregister() { 112 | if ('serviceWorker' in navigator) { 113 | navigator.serviceWorker.ready.then(registration => { 114 | registration.unregister(); 115 | }); 116 | } 117 | } 118 | -------------------------------------------------------------------------------- /src/validator.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rajatvijay/antd-form-code-generator/785b06c6b1c7383b61d6a68d7d3a64d6601e3efb/src/validator.js --------------------------------------------------------------------------------

TimeTable

46 | Antd react form code generator 47 |