Version V2

.eslintrc.js

@@ -0,0 +1,40 @@
+const path = require('path');
+
+module.exports = {
+  extends: ['airbnb','plugin:@typescript-eslint/recommended', 'prettier'],
+  plugins: ['prettier'],
+  parser:  '@typescript-eslint/parser',
+  rules: {
+    'react/jsx-filename-extension': [2, { extensions: ['.js', '.jsx', '.ts', '.tsx'] }],
+    'prettier/prettier': [2, { extensions: ['.js', '.jsx', '.ts', '.tsx'] }],
+    'no-underscore-dangle': [2, { 'allow': ['__'] }],
+    'default-case': 0,
+    'class-methods-use-this': 0,
+    'no-shadow': 0,
+    'no-plusplus': 0,
+    'prefer-destructuring': 0,
+    'consistent-return': 0,
+    'no-restricted-properties': 0,
+    'react/no-find-dom-node': 0,
+    'react/destructuring-assignment': 0,
+    'react/prop-types': [1, { ignore: ['children'] }],
+    'import/extensions': 0,
+    'no-undef': 0,
+    'react/jsx-props-no-spreading': 0,
+    'react/no-array-index-key': 0,
+    'react/prop-types': 0,
+    '@typescript-eslint/ban-ts-ignore': 0,
+    'react/jsx-wrap-multilines': 0,
+  },
+  settings: {
+    'import/resolver': {
+        node: {
+            paths: [path.resolve(__dirname, 'src')],
+            'extensions': ['.js','.jsx','.ts','.tsx']
+        },
+    },
+  },
+  'env': {
+    'browser': true,
+  }
+};

.gitignore

@@ -6,4 +6,5 @@
 .idea
 npm-debug.log
 node_modules
-dist
+dist
+example

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "printWidth": 100,
+  "singleQuote": true
+}

README.md

@@ -1,180 +1,68 @@
-# React form builder generator
-By this plugin you can easly create form by drag and drop available fields.
-Live Preview: http://reactformbuilder.wokay.me/
+## React and React Native npm package boilerplate with Typescript support
+----
 
-![alt text](https://wokay.me/uploads/1533415655.gif)
+### About
+This boilerplate make it easier to create npm package from Typescript projects.
 
+The project is intended to be used with the latest Active LTS release of [Node.js][nodejs]. 
 
-# Quick start
-##### 1. Install Plugin
-`npm i react-form-creator`
-##### 2. Import component to script
-`import FormBuilder from 'react-form-creator'`
-##### 3. Display/render component
-```
-          <FormBuilder />
-```
 
-# Component 'FilterBuilder options'
+### Getting Started
 
-`jsonLoad` - You can pass previous generated json to recreate existing form
-
-`fields` - Here you can define your own field to add. Example of value this option:
-```
- fields={
-         relation: { // name of new field
-             classIcon: 'fa-flag',
-             showFields: new Set(['optionBuilder']), //show field without open tab
-             label: "Relation", //displayed label
-             typeInput: "relation", //this same name like key of the object
-             fields: {
-                 'text': {
-                     'inputType': "text",//possible type, another options: textarea | text |                      'inputType': "text",//possible type, another options: textarea | text | number | checkbox | optionBuilder | select
-                     'label': 'Relation to component',//label
-                     'value': "",//default value
-                     'name': 'componentRelation'//name to which is added value in json
-                 },
-             },
-             banField: new Set([
-                 'placeholder',//remove default fields, list of them below
-             ])
-         },
-     }
-```
-# Methods
-**Get Json Callback**
-`getJson` - Function which get data from existing form generator filter as argument. _IMPORTANT YOU NEED TO USE REFS TO CONNECT TO FORM, EXAMPLE OF USE UNDER_
-`makeActionWhenJsonChange` - This function is trigger when form is changed, independs what change was made, it can be edit field or add new
+To start, just clone the repository with following commands:
 
-# Examples
-### Example of use methods
-```
+```sh
+git clone https://github.com/pankod/react-typescript-npm-package-boilerplate
 
+cd react-typescript-npm-package-boilerplate
 
-    getJsonCallback(){
-        console.log(this.refs.formBuilder.getJson());
-    }
+npm install
+```
 
-    makeActionWhenJsonChange = (json) => {
-        console.log(json)
-    }
-
-            <FormBuilder ref="formBuilder" makeActionWhenJsonChange={this.makeActionWhenJsonChange}/>
-            <button onClick={()=>console.log(this.getJsonCallback())}>Show form in console</button>
+ **Then run the following commands for:**
 
-```
-### Example of use existing form to recreate
-```
-jsonload = [
-               {
-                   "typeField": "number",
-                   "label": "number",
-                   "required": true,
-                   "name": "field_9_1533415584155",
-                   "class": "",
-                   "tipText": "",
-                   "placeholder": "",
-                   "value": "",
-                   "min_value": "",
-                   "max_value": "",
-                   "step": "",
-                   "sufix": ""
-               },
-               {
-                   "typeField": "textArea",
-                   "label": "",
-                   "required": false,
-                   "name": "field_dqd_1533415591447",
-                   "class": "",
-                   "tipText": "",
-                   "placeholder": "",
-                   "value": "",
-                   "min_length": "",
-                   "max_length": "",
-                   "cols": "30",
-                   "rows": "10"
-               }
-           ]
-
- <FormBuilder jsonLoad={this.jsonload}/>
-
-```
-### Pre defined fields
-```
-{
-                'label' : {
-                    'inputType': "text",
-                    'label': 'Label',
-                    'value': "",
-                    'name': 'label'
-                },
-                'name' : {
-                    'inputType': "text",
-                    'label': 'Name',
-                    'value': "",
-                    'name': 'name'
-                },
-                'required' : {
-                    'inputType': "checkbox",
-                    'label': 'Required',
-                    'value': false,
-                    'name': 'required'
-                },
-                'class': {
-                    'inputType': "text",
-                    'label': 'CSS class',
-                    'value': "",
-                    'name': 'class'
-                },
-                'tipText': {
-                    'inputType': "text",
-                    'label': 'Tip',
-                    'value': "",
-                    'name': 'tipText'
-                },
-                'placeholder': {
-                    'inputType': "text",
-                    'label': 'Placeholder',
-                    'value': "",
-                    'name': 'placeholder'
-                },
-                'defaultValue': {
-                    'inputType': "text",
-                    'label': 'Default value',
-                    'value': "",
-                    'name': 'value'
-                },
-            }  
+ **Babel build** : 
+```sh 
+$ npm run babel-build
 ```
 
-### Input type select
-```
-            {
-                    'inputType': "select",
-                    'label': 'Header level',
-                    'name': 'headerlevel',
-                    'options': [
-                        {
-                            'label': 'H1',
-                            'value': 'h1'
-                        },
-                        {
-                            'label': 'H2',
-                            'value': 'h2'
-                        },
-                    ]
-                }
+ **Typescript build** : 
+```sh 
+$ npm run ts-build
 ```
 
-# How generate form? Use another plugin:
-https://github.com/seapage/generate-form-from-json
+#### This boilerplate includes:
 
-# License
-GNU 3.0
+- Typescript 3
+- TSLint with Microsoft rules
+- Jest and Enzyme support,
+- Simple example of TypeScript code
+- .editorconfig for consistent file format
 
-# Author
+**You should change the lines on package.json:**
 
-### Krzysztof Łokaj "Wokay"
-- Blog https://wokay.me/
-- Twitter https://twitter.com/_Wokay
-- Linkedin https://www.linkedin.com/in/wokay/
+If you develop React for web:
+
+```json
+"devDependencies:{
+  "@types/react": "^16.8.5", // or @latest
+  "@types/react-dom": "^16.8.2", // or @latest
+},
+
+"peerDependencies": {
+    "react": "*",
+    "react-dom": "*",
+}
+```
+or React-Native development environment 
+```json
+"devDependencies:{
+  "@types/react": "^16.8.5", // or @latest
+  "@types/react-native": "^16.8.2", // or @latest
+},
+
+"peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+}
+```