Skip to content

Commit c28d123

Browse files
tkrotofftkrotoff
committed
Split in multiple packages thx to Lerna + add React Native support
1 parent 89b7662 commit c28d123

File tree

113 files changed

+2042
-264
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

113 files changed

+2042
-264
lines changed

‎.vscode/launch.json

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,28 @@
22
"version": "0.2.0",
33
"configurations": [
44
{
5-
"name": "Jest",
5+
"name": "Jest react-form-with-constraints",
66
"type": "node",
77
"request": "launch",
8-
"program": "${workspaceRoot}/node_modules/.bin/jest",
8+
"program": "${workspaceRoot}/packages/react-form-with-constraints/node_modules/.bin/jest",
99
"args": ["--runInBand", "--no-cache"],
10-
"cwd": "${workspaceRoot}",
10+
"cwd": "${workspaceRoot}/packages/react-form-with-constraints",
1111
"runtimeArgs": [
1212
"--nolazy" // See What does the Node.js `--nolazy` flag mean? http://stackoverflow.com/q/21534565/990356
1313
],
1414
"env": {
1515
"NODE_ENV": "development"
1616
}
17+
},
18+
{
19+
"name": "Jest react-form-with-constraints-bootstrap4",
20+
"type": "node",
21+
"request": "launch",
22+
"program": "${workspaceRoot}/packages/react-form-with-constraints-bootstrap4/node_modules/.bin/jest",
23+
"args": ["--runInBand", "--no-cache"],
24+
"cwd": "${workspaceRoot}/packages/react-form-with-constraints-bootstrap4",
25+
"runtimeArgs": ["--nolazy"],
26+
"env": {"NODE_ENV": "development"}
1727
}
1828
]
1929
}

‎README.md

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
[![codecov](https://codecov.io/gh/tkrotoff/react-form-with-constraints/branch/master/graph/badge.svg)](https://codecov.io/gh/tkrotoff/react-form-with-constraints)
66
[![gzip size](http://img.badgesize.io/https://unpkg.com/react-form-with-constraints@latest/dist/react-form-with-constraints.production.min.js.gz?compression=gzip)](https://unpkg.com/react-form-with-constraints/dist/react-form-with-constraints.production.min.js.gz)
77

8-
Simple form validation for React in [~400 lines of code](src)
8+
Simple form validation for React in [~400 lines of code](packages/react-form-with-constraints/src)
99

1010
- Installation: `npm install react-form-with-constraints`
1111
- CDN: https://unpkg.com/react-form-with-constraints/dist/
@@ -39,6 +39,7 @@ Resources:
3939
- No dependency beside React (no Redux, MobX...)
4040
- No special component like `<TextField>`, just plain old `<input>` or whatever you like
4141
- Re-render only what's necessary
42+
- Support for [React Native](examples/ReactNative) with npm package `react-form-with-constraints-native`
4243
- ...
4344

4445
```JSX
@@ -68,12 +69,19 @@ Resources:
6869
## Examples
6970

7071
- CodePen basic example: https://codepen.io/tkrotoff/pen/BRGdqL
72+
73+
![example-password](doc/example-password.png)
74+
7175
- CodeSandbox Bootstrap 4 example: https://codesandbox.io/s/qk0zro1qm4
7276
- CodeSandbox WizardForm example: https://codesandbox.io/s/my0ojyzq6p
7377
- CodeSandbox SignUp example: https://codesandbox.io/s/62qwozvm0k
7478
- CodeSandbox ClubMembers example: https://codesandbox.io/s/q8364yn60j
7579

76-
![example-password](doc/example-password.png)
80+
- [React Native example](examples/ReactNative):
81+
82+
| iOS | Android |
83+
| ----------------------------------------------------- | ------------------------------------------------------------- |
84+
| ![react-native-example-ios](doc/react-native-ios.png) | ![react-native-example-android](doc/react-native-android.png) |
7785

7886
Other examples inside [the examples directory](examples).
7987

@@ -91,8 +99,8 @@ The API works the same way as [React Router v4](https://reacttraining.com/react-
9199
It is also inspired by [AngularJS ngMessages](https://docs.angularjs.org/api/ngMessages#usage).
92100

93101
If you had to implement validation yourself, you would end up with [a global object that tracks errors for each field](examples/NoFramework/App.tsx).
94-
react-form-with-constraints [works](src/Fields.ts) [similarly](src/FieldsStore.ts) (although not using [`setState`](https://reactjs.org/docs/react-component.html#setstate)).
95-
It uses [React context](https://facebook.github.io/react/docs/context.html#parent-child-coupling) to share the [`FieldsStore`](src/FieldsStore.ts) object across [`FieldFeedbacks`](src/FieldFeedbacks.tsx) and [`FieldFeedback`](src/FieldFeedback.tsx).
102+
react-form-with-constraints [works similarly](packages/react-form-with-constraints/src/Fields.ts) (although not using `setState`).
103+
It uses [React context](https://facebook.github.io/react/docs/context.html#parent-child-coupling) to share the [`FieldsStore`](packages/react-form-with-constraints/src/FieldsStore.ts) object across [`FieldFeedbacks`](packages/react-form-with-constraints/src/FieldFeedbacks.tsx) and [`FieldFeedback`](packages/react-form-with-constraints/src/FieldFeedback.tsx).
96104

97105
## API
98106

‎dist/.gitkeep

Whitespace-only changes.

‎doc/react-native-android.png

33.5 KB
Loading

‎doc/react-native-ios.png

28.6 KB
Loading

‎examples/Bootstrap4/App.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
import * as React from 'react';
44
import * as ReactDOM from 'react-dom';
55

6-
import { FormWithConstraints, FieldFeedback } from '../../src/index';
7-
import { FieldFeedbacks, FormGroup, FormControlLabel, FormControlInput } from '../../src/Bootstrap4';
6+
import { FormWithConstraints, FieldFeedback } from 'react-form-with-constraints';
7+
import { FieldFeedbacks, FormGroup, FormControlLabel, FormControlInput } from 'react-form-with-constraints-bootstrap4';
88

99
import './index.html';
1010

‎examples/Bootstrap4/package.json

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"name": "bootstrap4-example",
3+
"version": "0.7.0",
4+
"private": true,
5+
6+
"scripts": {
7+
"clean": "del-cli build",
8+
9+
"build": "cross-env NODE_ENV=development webpack -d",
10+
"build:watch": "cross-env NODE_ENV=development webpack -d --watch"
11+
},
12+
13+
"devDependencies": {
14+
"react": "latest",
15+
"react-dom": "latest",
16+
17+
"react-form-with-constraints": "^0.7.0",
18+
"react-form-with-constraints-bootstrap4": "^0.7.0",
19+
20+
"webpack": "latest",
21+
"babel-loader": "latest",
22+
"babel-core": "latest",
23+
"babel-preset-react": "latest",
24+
"file-loader": "latest",
25+
26+
"del-cli": "latest",
27+
"cross-env": "latest"
28+
}
29+
}

‎examples/Bootstrap4/webpack.config.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
// @ts-check
2+
3+
const path = require('path');
4+
5+
module.exports = {
6+
entry: {
7+
App: './App.jsx'
8+
},
9+
10+
output: {
11+
path: path.join(__dirname, 'build'),
12+
filename: '[name].js'
13+
},
14+
15+
resolve: {
16+
extensions: ['.js', '.jsx']
17+
},
18+
19+
module: {
20+
rules: [
21+
{ test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader', options: {presets: ['react']} },
22+
{ test: /\.(html|css|png)$/, loader: 'file-loader', options: {name: '[path][name].[ext]'} }
23+
]
24+
}
25+
};

‎examples/ClubMembers/App.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ import { useStrict, observable, action, computed } from 'mobx';
44
import { observer } from 'mobx-react';
55
import DevTools from 'mobx-react-devtools';
66

7-
import { FormWithConstraints, FieldFeedbacks, FieldFeedback } from '../../src/index';
8-
import DisplayFields from '../../src/DisplayFields';
7+
import { FormWithConstraints, FieldFeedbacks, FieldFeedback } from 'react-form-with-constraints';
8+
import { DisplayFields } from 'react-form-with-constraints-tools';
99

1010
import './index.html';
1111
import './style.css';

‎examples/ClubMembers/package.json

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
{
2+
"name": "club-members-example",
3+
"version": "0.7.0",
4+
"private": true,
5+
6+
"scripts": {
7+
"clean": "del-cli build",
8+
9+
"tsc": "tsc",
10+
11+
"build": "cross-env NODE_ENV=development webpack -d",
12+
"build:watch": "cross-env NODE_ENV=development webpack -d --watch"
13+
},
14+
15+
"devDependencies": {
16+
"typescript": "latest",
17+
18+
"react": "latest",
19+
"@types/react": "latest",
20+
"react-dom": "latest",
21+
"@types/react-dom": "latest",
22+
23+
"react-form-with-constraints": "^0.7.0",
24+
"react-form-with-constraints-tools": "^0.7.0",
25+
26+
"mobx": "latest",
27+
"mobx-react": "latest",
28+
"mobx-react-devtools": "latest",
29+
30+
"ts-node": "latest",
31+
"@types/node": "latest",
32+
33+
"webpack": "latest",
34+
"@types/webpack": "latest",
35+
"ts-loader": "latest",
36+
"file-loader": "latest",
37+
38+
"del-cli": "latest",
39+
"cross-env": "latest"
40+
}
41+
}

‎examples/ClubMembers/tsconfig.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"extends": "../../tsconfig-react-es5",
3+
4+
"files": [
5+
"App.tsx"
6+
]
7+
}

‎examples/ClubMembers/webpack.config.ts

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import * as path from 'path';
2+
import { Configuration } from 'webpack';
3+
4+
const config: Configuration = {
5+
entry: {
6+
App: './App.tsx'
7+
},
8+
9+
output: {
10+
path: path.join(__dirname, 'build'),
11+
filename: '[name].js'
12+
},
13+
14+
resolve: {
15+
extensions: ['.js', '.ts', '.tsx']
16+
},
17+
18+
module: {
19+
rules: [
20+
{ test: /\.tsx?$/, loader: 'ts-loader', options: {onlyCompileBundledFiles: true, compilerOptions: {noEmit: false, module: 'esnext', declaration: false}} },
21+
{ test: /\.(html|css|png)$/, loader: 'file-loader', options: {name: '[path][name].[ext]'} }
22+
]
23+
}
24+
};
25+
26+
export = config;

‎examples/HTML5Constraints/package.json

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{
2+
"name": "html5-constraints-example",
3+
"version": "0.7.0",
4+
"private": true,
5+
6+
"scripts": {
7+
"clean": "del-cli build",
8+
9+
"tsc": "tsc",
10+
11+
"build": "cross-env NODE_ENV=development webpack -d",
12+
"build:watch": "cross-env NODE_ENV=development webpack -d --watch"
13+
},
14+
15+
"devDependencies": {
16+
"typescript": "latest",
17+
18+
"react": "latest",
19+
"@types/react": "latest",
20+
"react-dom": "latest",
21+
"@types/react-dom": "latest",
22+
23+
"ts-node": "latest",
24+
"@types/node": "latest",
25+
26+
"webpack": "latest",
27+
"@types/webpack": "latest",
28+
"ts-loader": "latest",
29+
"file-loader": "latest",
30+
31+
"del-cli": "latest",
32+
"cross-env": "latest"
33+
}
34+
}

‎examples/HTML5Constraints/tsconfig.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"extends": "../../tsconfig-react-es5",
3+
4+
"files": [
5+
"App.tsx"
6+
]
7+
}

‎examples/HTML5Constraints/webpack.config.ts

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import * as path from 'path';
2+
import { Configuration } from 'webpack';
3+
4+
const config: Configuration = {
5+
entry: {
6+
App: './App.tsx'
7+
},
8+
9+
output: {
10+
path: path.join(__dirname, 'build'),
11+
filename: '[name].js'
12+
},
13+
14+
resolve: {
15+
extensions: ['.js', '.ts', '.tsx']
16+
},
17+
18+
module: {
19+
rules: [
20+
{ test: /\.tsx?$/, loader: 'ts-loader', options: {onlyCompileBundledFiles: true, compilerOptions: {noEmit: false, module: 'esnext', declaration: false}} },
21+
{ test: /\.(html|css|png)$/, loader: 'file-loader', options: {name: '[name].[ext]'} }
22+
]
23+
}
24+
};
25+
26+
export = config;

‎examples/HttpStatusCode/App.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
22
import * as ReactDOM from 'react-dom';
33

4-
import { FormWithConstraints, FieldFeedbacks, FieldFeedback } from '../../src/index';
4+
import { FormWithConstraints, FieldFeedbacks, FieldFeedback } from 'react-form-with-constraints';
55

66
import './index.html';
77
import '../Password/style.css';

‎examples/HttpStatusCode/package.json

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"name": "http-status-code-example",
3+
"version": "0.7.0",
4+
"private": true,
5+
6+
"scripts": {
7+
"clean": "del-cli build",
8+
9+
"tsc": "tsc",
10+
11+
"build": "cross-env NODE_ENV=development webpack -d",
12+
"build:watch": "cross-env NODE_ENV=development webpack -d --watch"
13+
},
14+
15+
"devDependencies": {
16+
"typescript": "latest",
17+
18+
"react": "latest",
19+
"@types/react": "latest",
20+
"react-dom": "latest",
21+
"@types/react-dom": "latest",
22+
23+
"react-form-with-constraints": "^0.7.0",
24+
25+
"ts-node": "latest",
26+
"@types/node": "latest",
27+
28+
"webpack": "latest",
29+
"@types/webpack": "latest",
30+
"ts-loader": "latest",
31+
"file-loader": "latest",
32+
33+
"del-cli": "latest",
34+
"cross-env": "latest"
35+
}
36+
}

‎examples/HttpStatusCode/tsconfig.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"extends": "../../tsconfig-react-es5",
3+
4+
"files": [
5+
"App.tsx"
6+
]
7+
}

‎examples/HttpStatusCode/webpack.config.ts

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import * as path from 'path';
2+
import { Configuration } from 'webpack';
3+
4+
const config: Configuration = {
5+
entry: {
6+
App: './App.tsx'
7+
},
8+
9+
output: {
10+
path: path.join(__dirname, 'build'),
11+
filename: '[name].js'
12+
},
13+
14+
resolve: {
15+
extensions: ['.js', '.ts', '.tsx']
16+
},
17+
18+
module: {
19+
rules: [
20+
{ test: /\.tsx?$/, loader: 'ts-loader', options: {onlyCompileBundledFiles: true, compilerOptions: {noEmit: false, module: 'esnext', declaration: false}} },
21+
{ test: /\.(html|css|png)$/, loader: 'file-loader', options: {name: '[name].[ext]'} }
22+
]
23+
}
24+
};
25+
26+
export = config;

‎examples/MDN_Form_validation/App.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
22
import * as ReactDOM from 'react-dom';
33

4-
import { FormWithConstraints, FieldFeedbacks, FieldFeedback } from '../../src/index';
4+
import { FormWithConstraints, FieldFeedbacks, FieldFeedback } from 'react-form-with-constraints';
55

66
import './style.css';
77
import './index.html';

0 commit comments

Comments
 (0)