Skip to content

Commit 7727393

Browse files
tkrotofftkrotoff
committed
Rework the examples for CodeSandbox
FYI CodeSandbox needs react-scripts
1 parent 508edf4 commit 7727393

Some content is hidden

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

45 files changed

+328
-61
lines changed

‎README.md

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -74,23 +74,27 @@ Resources:
7474

7575
## Examples
7676

77-
- CodePen basic example: https://codepen.io/tkrotoff/pen/BRGdqL
77+
- CodePen basic Password example: https://codepen.io/tkrotoff/pen/BRGdqL ([CodeSandbox version](https://codesandbox.io/s/github/tkrotoff/react-form-with-constraints/tree/master/examples/Password))
7878

7979
![example-password](doc/example-password.png)
8080

81-
- CodeSandbox Bootstrap 4 example: https://codesandbox.io/s/nkqrr17qqj
82-
- CodeSandbox Material-UI example: https://codesandbox.io/s/zx62rw4k64
83-
- CodeSandbox WizardForm example: https://codesandbox.io/s/my0ojyzq6p
84-
- CodeSandbox SignUp example: https://codesandbox.io/s/62qwozvm0k
85-
- CodeSandbox ClubMembers example: https://codesandbox.io/s/q8364yn60j
81+
- [Bootstrap 4 example](https://codesandbox.io/s/github/tkrotoff/react-form-with-constraints/tree/master/examples/Bootstrap4)
82+
- [Material-UI example](https://codesandbox.io/s/github/tkrotoff/react-form-with-constraints/tree/master/examples/MaterialUI)
83+
- [WizardForm example](https://codesandbox.io/s/github/tkrotoff/react-form-with-constraints/tree/master/examples/WizardForm)
84+
- [SignUp example](https://codesandbox.io/s/github/tkrotoff/react-form-with-constraints/tree/master/examples/SignUp)
85+
- [ClubMembers example](https://codesandbox.io/s/q8364yn60j)
86+
- [Password without state example](https://codesandbox.io/s/github/tkrotoff/react-form-with-constraints/tree/master/examples/PasswordWithoutState)
8687

8788
- [React Native example](examples/ReactNative):
8889

8990
| iOS | Android |
9091
| ----------------------------------------------------- | ------------------------------------------------------------- |
9192
| ![react-native-example-ios](doc/react-native-ios.png) | ![react-native-example-android](doc/react-native-android.png) |
9293

93-
Other examples inside [the examples directory](examples).
94+
- Other examples from [the examples directory](examples):
95+
- [Plain old React form validation example](https://codesandbox.io/s/github/tkrotoff/react-form-with-constraints/tree/master/examples/PlainOldReact)
96+
- [React with HTML5 constraint validation API example](https://codesandbox.io/s/github/tkrotoff/react-form-with-constraints/tree/master/examples/HTML5ConstraintValidationAPI)
97+
- [Server-side rendering example](examples/ServerSideRendering)
9498

9599
## How it works
96100

@@ -105,7 +109,7 @@ The API works the same way as [React Router v4](https://reacttraining.com/react-
105109

106110
It is also inspired by [AngularJS ngMessages](https://docs.angularjs.org/api/ngMessages#usage).
107111

108-
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).
112+
If you had to implement validation yourself, you would end up with [a global object that tracks errors for each field](examples/PlainOldReact/App.tsx).
109113
react-form-with-constraints [works similarly](packages/react-form-with-constraints/src/FieldsStore.ts).
110114
It uses [React context](https://reactjs.org/docs/legacy-context.html) 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).
111115

‎examples/Bootstrap4/index.html

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,7 @@
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1">
66

7-
<title>Example Bootstrap4</title>
8-
9-
<link rel="stylesheet" href="App.css">
7+
<title>react-form-with-constraints Bootstrap 4 example</title>
108
</head>
119

1210
<body>

‎examples/Bootstrap4/package.json

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,15 @@
22
"name": "bootstrap4-example",
33
"version": "1.0.0",
44
"private": true,
5+
"description": "react-form-with-constraints Bootstrap 4 example",
6+
"keywords": [
7+
"react",
8+
"form",
9+
"validation",
10+
"react-form-with-constraints",
11+
"bootstrap",
12+
"bootstrap4"
13+
],
514

615
"main": "App.jsx",
716

@@ -16,6 +25,8 @@
1625
},
1726

1827
"dependencies": {
28+
"react-scripts": "latest",
29+
1930
"react": "latest",
2031
"react-dom": "latest",
2132

@@ -46,7 +57,6 @@
4657
"style-loader": "latest",
4758
"css-loader": "latest",
4859
"sass-loader": "latest",
49-
"mini-css-extract-plugin": "latest",
5060

5161
"webpack-cli": "latest",
5262
"webpack": "latest",

‎examples/Bootstrap4/webpack.config.js

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
// @ts-check
22

33
const path = require('path');
4-
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
54

65
module.exports = {
76
entry: {
@@ -13,10 +12,6 @@ module.exports = {
1312
filename: '[name].js'
1413
},
1514

16-
plugins: [
17-
new MiniCssExtractPlugin({filename: '[name].css'})
18-
],
19-
2015
resolve: {
2116
extensions: ['.js', '.jsx']
2217
},
@@ -27,11 +22,9 @@ module.exports = {
2722
{ test: /\.js$/, loader: 'source-map-loader' },
2823
{ test: /\.html$/, loader: 'file-loader', options: {name: '[path][name].[ext]'} },
2924
{
30-
// FIXME Don't know how to make source maps work
31-
// See SourceMap not working with Webpack 4.8.1 https://github.com/webpack-contrib/mini-css-extract-plugin/issues/141
3225
test: /\.scss$/,
3326
use: [
34-
MiniCssExtractPlugin.loader,
27+
{ loader: 'style-loader', options: {sourceMap: true} },
3528
{ loader: 'css-loader', options: {sourceMap: true} },
3629
{ loader: 'sass-loader', options: {sourceMap: true} }
3730
]

‎examples/ClubMembers/index.html

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,9 @@
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1">
66

7-
<title>Example ClubMembers</title>
7+
<title>react-form-with-constraints ClubMembers example</title>
88

99
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.css">
10-
<link rel="stylesheet" href="style.css">
1110
</head>
1211

1312
<body>

‎examples/ClubMembers/package.json

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,15 @@
22
"name": "club-members-example",
33
"version": "1.0.0",
44
"private": true,
5+
"description": "react-form-with-constraints ClubMembers example",
6+
"keywords": [
7+
"react",
8+
"form",
9+
"validation",
10+
"react-form-with-constraints"
11+
],
12+
13+
"main": "App.tsx",
514

615
"scripts": {
716
"clean": "del-cli build",
@@ -13,6 +22,8 @@
1322
},
1423

1524
"dependencies": {
25+
"react-scripts": "latest",
26+
1627
"react": "latest",
1728
"react-dom": "latest",
1829

‎examples/ClubMembers/webpack.config.ts

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,14 @@ const config: Configuration = {
1919
rules: [
2020
{ test: /\.tsx?$/, loader: 'ts-loader', options: {onlyCompileBundledFiles: true, compilerOptions: {noEmit: false, module: 'esnext', sourceMap: true}} },
2121
{ test: /\.js$/, loader: 'source-map-loader' },
22-
{ test: /\.(html|css)$/, loader: 'file-loader', options: {name: '[path][name].[ext]'} }
22+
{
23+
test: /\.css$/,
24+
use: [
25+
{ loader: 'style-loader', options: {sourceMap: true} },
26+
{ loader: 'css-loader', options: {sourceMap: true} }
27+
]
28+
},
29+
{ test: /\.html$/, loader: 'file-loader', options: {name: '[path][name].[ext]'} }
2330
]
2431
}
2532
};

‎examples/HTML5Constraints/App.tsx renamed to ‎examples/HTML5ConstraintValidationAPI/App.tsx

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

44
import './index.html';
5-
import '../NoFramework/style.css';
5+
import './style.css';
66

77
// Inspired by ReactJS Form Validation Approaches https://moduscreate.com/reactjs-form-validation-approaches/
88

‎examples/NoFramework/index.html renamed to ‎examples/HTML5ConstraintValidationAPI/index.html

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,7 @@
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1">
66

7-
<title>Example NoFramework</title>
8-
9-
<link rel="stylesheet" href="style.css">
7+
<title>React with HTML5 constraint validation API example</title>
108
</head>
119

1210
<body>

‎examples/HTML5Constraints/package.json renamed to ‎examples/HTML5ConstraintValidationAPI/package.json

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,18 @@
11
{
2-
"name": "html5-constraints-example",
2+
"name": "html5-constraint-validation-api-example",
33
"version": "1.0.0",
44
"private": true,
5+
"description": "React with HTML5 constraint validation API example",
6+
"keywords": [
7+
"react",
8+
"html5",
9+
"form",
10+
"validation",
11+
"constraints",
12+
"constraint-validation-api"
13+
],
14+
15+
"main": "App.tsx",
516

617
"scripts": {
718
"clean": "del-cli build",
@@ -13,6 +24,8 @@
1324
},
1425

1526
"dependencies": {
27+
"react-scripts": "latest",
28+
1629
"react": "latest",
1730
"react-dom": "latest"
1831
},

‎examples/HTML5ConstraintValidationAPI/style.css

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/*
2+
Copy-pasted from PlainOldReact/style.css
3+
Cannot use a symlink nor "import '../PlainOldReact/style.css'" because of CodeSandbox
4+
*/
5+
6+
body {
7+
background-color: lightgrey;
8+
}
9+
10+
form > div {
11+
margin-bottom: 10px;
12+
}
13+
14+
form > div > label {
15+
display: block;
16+
}
17+
18+
div.error {
19+
color: red;
20+
}

‎examples/HTML5Constraints/tsconfig.json renamed to ‎examples/HTML5ConstraintValidationAPI/tsconfig.json

File renamed without changes.

‎examples/PasswordNoState/webpack.config.ts renamed to ‎examples/HTML5ConstraintValidationAPI/webpack.config.ts

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,14 @@ const config: Configuration = {
1919
rules: [
2020
{ test: /\.tsx?$/, loader: 'ts-loader', options: {onlyCompileBundledFiles: true, compilerOptions: {noEmit: false, module: 'esnext', sourceMap: true}} },
2121
{ test: /\.js$/, loader: 'source-map-loader' },
22-
{ test: /\.(html|css)$/, loader: 'file-loader', options: {name: '[name].[ext]'} }
22+
{
23+
test: /\.css$/,
24+
use: [
25+
{ loader: 'style-loader', options: {sourceMap: true} },
26+
{ loader: 'css-loader', options: {sourceMap: true} }
27+
]
28+
},
29+
{ test: /\.html$/, loader: 'file-loader', options: {name: '[name].[ext]'} }
2330
]
2431
}
2532
};

‎examples/MaterialUI/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1">
66

7-
<title>Example Bootstrap4</title>
7+
<title>react-form-with-constraints Material-UI example</title>
88

99
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
1010

‎examples/MaterialUI/package.json

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,17 @@
22
"name": "material-ui-example",
33
"version": "1.0.0",
44
"private": true,
5+
"description": "react-form-with-constraints Material-UI example",
6+
"keywords": [
7+
"react",
8+
"form",
9+
"validation",
10+
"react-form-with-constraints",
11+
"material design",
12+
"material-ui"
13+
],
14+
15+
"main": "App.tsx",
516

617
"scripts": {
718
"clean": "del-cli build",
@@ -13,6 +24,8 @@
1324
},
1425

1526
"dependencies": {
27+
"react-scripts": "latest",
28+
1629
"react": "latest",
1730
"react-dom": "latest",
1831

‎examples/Password/index.html

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,7 @@
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1">
66

7-
<title>Example Password</title>
8-
9-
<link rel="stylesheet" href="style.css">
7+
<title>react-form-with-constraints Password example</title>
108
</head>
119

1210
<body>

‎examples/Password/package.json

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,15 @@
22
"name": "password-example",
33
"version": "1.0.0",
44
"private": true,
5+
"description": "react-form-with-constraints Password example",
6+
"keywords": [
7+
"react",
8+
"form",
9+
"validation",
10+
"react-form-with-constraints"
11+
],
12+
13+
"main": "App.tsx",
514

615
"scripts": {
716
"clean": "del-cli build",
@@ -16,6 +25,8 @@
1625
},
1726

1827
"dependencies": {
28+
"react-scripts": "latest",
29+
1930
"react": "latest",
2031
"react-dom": "latest",
2132

‎examples/Password/webpack.config.ts

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,14 @@ const config: Configuration = {
2929
rules: [
3030
{ test: /\.tsx?$/, loader: 'ts-loader', options: {onlyCompileBundledFiles: true, compilerOptions: {noEmit: false, module: 'esnext', sourceMap: true}} },
3131
{ test: /\.js$/, loader: 'source-map-loader' },
32-
{ test: /\.(html|css)$/, loader: 'file-loader', options: {name: '[path][name].[ext]'} }
32+
{
33+
test: /\.css$/,
34+
use: [
35+
{ loader: 'style-loader', options: {sourceMap: true} },
36+
{ loader: 'css-loader', options: {sourceMap: true} }
37+
]
38+
},
39+
{ test: /\.html$/, loader: 'file-loader', options: {name: '[path][name].[ext]'} }
3340
]
3441
}
3542
};

‎examples/PasswordNoState/App.tsx renamed to ‎examples/PasswordWithoutState/App.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import ReactDOM from 'react-dom';
44
import { FormWithConstraints, FieldFeedbacks, FieldFeedback } from 'react-form-with-constraints';
55

66
import './index.html';
7-
import '../Password/style.css';
7+
import './style.css';
88

99
class Form extends React.Component {
1010
form: FormWithConstraints | null = null;

‎examples/HTML5Constraints/index.html renamed to ‎examples/PasswordWithoutState/index.html

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,7 @@
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1">
66

7-
<title>Example HTML5Contraints</title>
8-
9-
<link rel="stylesheet" href="style.css">
7+
<title>react-form-with-constraints Password without state example</title>
108
</head>
119

1210
<body>

‎examples/PasswordNoState/package.json renamed to ‎examples/PasswordWithoutState/package.json

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,16 @@
11
{
2-
"name": "password-no-state-example",
2+
"name": "password-without-state-example",
33
"version": "1.0.0",
44
"private": true,
5+
"description": "react-form-with-constraints Password without state example",
6+
"keywords": [
7+
"react",
8+
"form",
9+
"validation",
10+
"react-form-with-constraints"
11+
],
12+
13+
"main": "App.tsx",
514

615
"scripts": {
716
"clean": "del-cli build",
@@ -13,6 +22,8 @@
1322
},
1423

1524
"dependencies": {
25+
"react-scripts": "latest",
26+
1627
"react": "latest",
1728
"react-dom": "latest",
1829

0 commit comments

Comments
 (0)