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/.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..35831de8 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,21 @@ +{ + "editor.defaultFormatter": "esbenp.prettier-vscode", + "editor.formatOnSave": true, + "editor.tabSize": 2, + "extensions.ignoreRecommendations": true, + "files.insertFinalNewline": true, + "files.trimTrailingWhitespace": true, + "eslint.format.enable": true, + "eslint.validate": [ + "javascript", + "javascriptreact", + "typescript", + "typescriptreact" + ], + "prettier.documentSelectors": ["**/*.{ts,tsx,js,jsx}"], + "prettier.singleQuote": true, + "files.eol": "\n", + "javascript.preferences.quoteStyle": "single", + "typescript.preferences.quoteStyle": "single", + "prettier.quoteProps": "consistent" +} diff --git a/README.md b/README.md index e53b110f..ad0f7f11 100644 --- a/README.md +++ b/README.md @@ -1,58 +1,67 @@ -[![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) -![](screenshot.png) +# React Form Builder 2 + +A complete react form builder that interfaces with a json endpoint to load and save generated forms. + +- Upgraded to React 18.3.1 +- Upgraded related packages ### Editing Items + ![](screenshot2.png) # 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( - , - document.body -) +ReactDOM.render(, document.body); ``` # Props ```javascript -var items = [{ - key: 'Header', - name: 'Header Text', - icon: 'fa fa-header', - static: true, - content: 'Placeholder Text...' -}, -{ - key: 'Paragraph', - name: 'Paragraph', - static: true, - icon: 'fa fa-paragraph', - content: 'Placeholder Text...' -}]; - - + saveUrl="path/to/POST/built/form.json" +/>; ``` # React Form Generator + 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( -