diff --git a/.babelrc b/.babelrc index 2a4a32d9..fdcb5a36 100644 --- a/.babelrc +++ b/.babelrc @@ -1,6 +1,13 @@ { "presets": [ - "es2015", - "react" + "@babel/preset-env", + "@babel/preset-react" + ], + "plugins": [ + "@babel/plugin-proposal-class-properties", + "@babel/plugin-proposal-json-strings", + "@babel/plugin-syntax-dynamic-import", + "@babel/plugin-syntax-import-meta", + "@babel/plugin-transform-runtime" ] -} \ No newline at end of file +} diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 00000000..7734a2a8 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,17 @@ +# http://editorconfig.org +root = true + +[*] +charset = utf-8 +end_of_line = lf +indent_size = 2 +indent_style = space +max_line_length = 80 +trim_trailing_whitespace = true + +[*.md] +max_line_length = 0 +trim_trailing_whitespace = false + +[COMMIT_EDITMSG] +max_line_length = 0 diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 00000000..b0400586 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,3 @@ +**/variables.js +**/webpack.*.js +/docs/*.*.js \ No newline at end of file diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 00000000..b9b0b6de --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,39 @@ +{ + "parser": "babel-eslint", + "extends": ["airbnb-base"], + "plugins": [ + "react" + ], + "globals": { + "window": true, + "document": true, + "navigator": true + }, + "rules": { + "max-len": [1, 180, 2, {"ignoreComments": true}], + "semi": [2, "always"], + "comma-dangle": "warn", + "camelcase": "warn", + "prefer-destructuring": "warn", + "no-param-reassign": "warn", + "linebreak-style": 0, + "operator-linebreak": "off", + "no-underscore-dangle": "off", + "class-methods-use-this": "off", + "arrow-parens": "off", + "indent": "off", + "no-plusplus": "off", + "no-return-assign": "off", + "object-curly-newline": "off", + "no-prototype-builtins": "warn", + "react/jsx-uses-vars": [2], + "react/jsx-uses-react": 1 + }, + "settings": { + "import/resolver": { + "node": { + "extensions": [".js", ".jsx"] + } + } + } +} \ No newline at end of file diff --git a/.gitignore b/.gitignore index 4598cb8f..f7261633 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,50 @@ +# Logs +logs +*.log +npm-debug.log* +.idea/ +*.iml +.DS_Store + + +# Runtime data +pids +*.pid +*.seed + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (http://nodejs.org/api/addons.html) +build/Release + +# Dependency directories node_modules -components -example/bundle.js -example/.git \ No newline at end of file +jspm_packages + +# Optional npm cache directory +.npm + +# Optional REPL history +.node_repl_history + +dist/ +lib/ +public/app.* +public/uploads/ +public/temp + +# bundles +bundle.js diff --git a/.travis.yml b/.travis.yml deleted file mode 100644 index 2b18f2e5..00000000 --- a/.travis.yml +++ /dev/null @@ -1,16 +0,0 @@ -sudo: false -language: node_js -node_js: - - "4.2.3" -env: - - CXX=g++-4.8 -addons: - apt: - sources: - - ubuntu-toolchain-r-test - packages: - - g++-4.8 - - libcairo2-dev - - libjpeg8-dev - - libpango1.0-dev - - libgif-dev \ No newline at end of file diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 00000000..8388f076 --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,16 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + + { + "type": "pwa-chrome", + "request": "launch", + "name": "Launch Chrome against localhost", + "url": "http://localhost:8080", + "webRoot": "${workspaceFolder}" + } + ] +} \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..2f240dfe --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "xd.globalEditor": false +} \ No newline at end of file diff --git a/README.md b/README.md index e53b110f..6c460b2d 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,16 @@ -[![npm package](https://img.shields.io/badge/npm-0.0.3-orange.svg?style=flat-square)](https://www.npmjs.com/package/react-forms-builder) -[![Build Status](https://api.travis-ci.org/blackjk3/react-form-builder.svg?branch=master)](https://travis-ci.org/blackjk3/react-form-builder) -# React Form Builder -A complete react form builder that interfaces with a json endpoint to load and save generated forms. The toolbox contains 16 items for gathering data. Everything from star ratings to signature boxes! +[![npm version](https://badge.fury.io/js/react-form-builder2.svg)](//npmjs.com/package/react-form-builder2) +[![downloads](https://img.shields.io/npm/dm/react-form-builder2.svg)](https://img.shields.io/npm/dm/react-form-builder2.svg) +# React Form Builder 2 +A complete react form builder that interfaces with a json endpoint to load and save generated forms. +- Upgraded to React 16.8.6 +- Bootstrap 4.x, Font-Awesome 5.x +- Use react-dnd for Drag & Drop +- Save form data with dummy api server +- Show posted data on readonly form +- Multi column row +- Custom Components + +[DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku, hence it may not work if free time runs out for month. ![](screenshot.png) @@ -11,11 +20,13 @@ A complete react form builder that interfaces with a json endpoint to load and s # Basic Usage ```javascript -var React = require('react'); -var FormBuilder = require('react-forms-builder'); +import React from 'react'; +import ReactDOM from 'react-dom'; +import { ReactFormBuilder } from 'react-form-builder2'; +import 'react-form-builder2/dist/app.css'; -React.render( - , +ReactDOM.render( + , document.body ) ``` @@ -38,7 +49,7 @@ var items = [{ content: 'Placeholder Text...' }]; - @@ -48,11 +59,13 @@ var items = [{ Now that a form is built and saved, let's generate it from the saved json. ```javascript -var React = require('react'); -var FormBuilder = require('react-forms-builder'); +import React from 'react'; +import ReactDOM from 'react-dom'; +import { ReactFormGenerator } from 'react-form-builder2'; +import 'react-form-builder2/dist/app.css'; -React.render( -