Skip to content
This repository was archived by the owner on Oct 16, 2024. It is now read-only.

Commit aa65c4a

Browse files
bennobuilderbennobuilder
authored
Merge pull request #205 from agile-ts/develop
New Release 🎉
2 parents 79b2dd2 + e6ef3a7 commit aa65c4a

File tree

37 files changed

+2003
-1180
lines changed

37 files changed

+2003
-1180
lines changed

‎.changeset/tall-bees-act.md‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
---
2+
'@agile-ts/api': patch
3+
'@agile-ts/core': patch
4+
'cra-template-agile': patch
5+
'cra-template-agile-typescript': patch
6+
'@agile-ts/event': patch
7+
'@agile-ts/logger': patch
8+
'@agile-ts/multieditor': patch
9+
'@agile-ts/proxytree': patch
10+
'@agile-ts/react': patch
11+
'@agile-ts/utils': patch
12+
'@agile-ts/vue': patch
13+
---
14+
15+
#### :bug: Bug Fix
16+
* `core`, `multieditor`, `react`
17+
* [#204](https://github.com/agile-ts/agile/pull/204) fix multieditor ([@bennodev19](https://github.com/bennodev19))
18+
* `api`, `core`, `cra-template-agile-typescript`, `cra-template-agile`, `event`, `logger`, `multieditor`, `proxytree`, `react`, `utils`, `vue`
19+
* [#201](https://github.com/agile-ts/agile/pull/201) fix commonjs bundle ([@bennodev19](https://github.com/bennodev19))
20+
21+
#### Committers: 1
22+
- BennoDev ([@bennodev19](https://github.com/bennodev19))
23+

‎examples/react/develop/multieditor-ts/.env‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
11
SKIP_PREFLIGHT_CHECK=true
2-
BROWSER=chrome

‎examples/react/develop/multieditor-ts/package.json‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,21 +11,24 @@
1111
"react-dom": "^16.13.1",
1212
"react-router-dom": "^5.2.0",
1313
"react-scripts": "3.4.3",
14-
"typescript": "^3.9.7"
14+
"typescript": "^3.9.7",
15+
"yup": "^0.32.9"
1516
},
1617
"devDependencies": {
1718
"@testing-library/react": "^9.3.2",
1819
"@testing-library/user-event": "^7.1.2",
1920
"@types/node": "^12.0.0",
2021
"@types/react": "^16.9.0",
2122
"@types/react-dom": "^16.9.0",
22-
"@types/react-router-dom": "^5.1.5"
23+
"@types/react-router-dom": "^5.1.5",
24+
"source-map-explorer": "^2.5.2"
2325
},
2426
"scripts": {
2527
"start": "react-scripts start",
2628
"build": "react-scripts build",
2729
"test": "react-scripts test",
2830
"eject": "react-scripts eject",
31+
"analyze": "yarn run build && source-map-explorer 'build/static/js/*.js'",
2932
"install:dev:agile": "yalc add @agile-ts/core @agile-ts/react @agile-ts/multieditor & yarn install",
3033
"install:prod:agile": "yalc add @agile-ts/core @agile-ts/react @agile-ts/multieditor & yarn install"
3134
},

‎examples/react/develop/multieditor-ts/src/App.tsx‎

Lines changed: 47 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,45 @@
1-
import React from "react";
2-
import "./App.css";
3-
import ErrorMessage from "./components/ErrorMessage";
4-
import { useAgile } from "@agile-ts/react";
5-
import { signUpEditor } from "./core/signUpEditor";
6-
import { generateColor, generateId } from "./core/utils";
1+
import React from 'react';
2+
import './App.css';
3+
import ErrorMessage from './components/ErrorMessage';
4+
import { useAgile } from '@agile-ts/react';
5+
import { signUpEditor } from './core/signUpEditor';
6+
import { generateColor, generateId } from './core/utils';
7+
8+
let renderCount = 0;
79

810
const App = () => {
911
useAgile(signUpEditor.deps);
1012

13+
renderCount++;
14+
1115
return (
1216
<form>
1317
<h1>Sign Up</h1>
1418
<label>First Name:</label>
1519
<input
16-
onChange={(e) => signUpEditor.setValue("firstName", e.target.value)}
17-
value={signUpEditor.getValueById("firstName")}
20+
onChange={(e) => signUpEditor.setValue('firstName', e.target.value)}
21+
defaultValue={signUpEditor.getItemInitialValue('firstName')}
1822
/>
19-
<ErrorMessage error={signUpEditor.getStatus("firstName")?.message} />
23+
<ErrorMessage error={signUpEditor.getStatus('firstName')?.message} />
2024

2125
<label>Last Name:</label>
2226
<input
2327
onChange={(e) =>
24-
signUpEditor.setValue("lastName", e.target.value, {
28+
signUpEditor.setValue('lastName', e.target.value, {
2529
background: false,
2630
})
2731
}
28-
value={signUpEditor.getValueById("lastName")}
32+
defaultValue={signUpEditor.getItemInitialValue('lastName')}
33+
value={signUpEditor.getItemValue('lastName')}
2934
/>
30-
<ErrorMessage error={signUpEditor.getStatus("lastName")?.message} />
35+
<ErrorMessage error={signUpEditor.getStatus('lastName')?.message} />
3136

3237
<label>Image</label>
3338
<div
34-
style={{ display: "flex", flexDirection: "row", alignItems: "center" }}
35-
>
39+
style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
3640
<div
3741
style={{
38-
backgroundColor: signUpEditor.getValueById("image")?.color,
42+
backgroundColor: signUpEditor.getItemValue('image')?.color,
3943
width: 100,
4044
height: 100,
4145
borderRadius: 100,
@@ -45,64 +49,73 @@ const App = () => {
4549
style={{ marginLeft: 50 }}
4650
onClick={(event) => {
4751
signUpEditor.setValue(
48-
"image",
52+
'image',
4953
{
5054
id: generateId(),
5155
color: generateColor(),
5256
},
5357
{ background: false }
5458
);
5559
event.preventDefault();
56-
}}
57-
>
60+
}}>
5861
Reset Image
5962
</button>
6063
</div>
61-
<ErrorMessage error={signUpEditor.getStatus("image")?.message} />
64+
<ErrorMessage error={signUpEditor.getStatus('image')?.message} />
6265

6366
<label>Gender</label>
6467
<select
65-
defaultValue={""}
66-
onChange={(e) => signUpEditor.setValue("gender", e.target.value)}
67-
>
68-
<option value={""}>Select...</option>
68+
defaultValue={''}
69+
onChange={(e) => signUpEditor.setValue('gender', e.target.value)}>
70+
<option value={''}>Select...</option>
6971
<option value="male">Male</option>
7072
<option value="female">Female</option>
7173
</select>
72-
<ErrorMessage error={signUpEditor.getStatus("gender")?.message} />
74+
<ErrorMessage error={signUpEditor.getStatus('gender')?.message} />
7375

7476
<label>Username</label>
7577
<input
76-
onChange={(e) => signUpEditor.setValue("userName", e.target.value)}
78+
onChange={(e) => signUpEditor.setValue('userName', e.target.value)}
79+
defaultValue={signUpEditor.getItemInitialValue('userName')}
7780
/>
78-
<ErrorMessage error={signUpEditor.getStatus("userName")?.message} />
81+
<ErrorMessage error={signUpEditor.getStatus('userName')?.message} />
7982

8083
<label>Email</label>
81-
<input onChange={(e) => signUpEditor.setValue("email", e.target.value)} />
82-
<ErrorMessage error={signUpEditor.getStatus("email")?.message} />
84+
<input
85+
onChange={(e) => signUpEditor.setValue('email', e.target.value)}
86+
defaultValue={signUpEditor.getItemInitialValue('email')}
87+
/>
88+
<ErrorMessage error={signUpEditor.getStatus('email')?.message} />
8389

8490
<label>Age</label>
85-
<input onChange={(e) => signUpEditor.setValue("age", e.target.value)} />
86-
<ErrorMessage error={signUpEditor.getStatus("age")?.message} />
91+
<input
92+
onChange={(e) =>
93+
signUpEditor.setValue('age', e.target.value, { background: false })
94+
}
95+
defaultValue={signUpEditor.getItemInitialValue('age')}
96+
value={signUpEditor.getItemValue('age')}
97+
/>
98+
<ErrorMessage error={signUpEditor.getStatus('age')?.message} />
8799

88100
<label>About you</label>
89101
<textarea
90-
onChange={(e) => signUpEditor.setValue("aboutYou", e.target.value)}
102+
onChange={(e) => signUpEditor.setValue('aboutYou', e.target.value)}
103+
defaultValue={signUpEditor.getItemInitialValue('aboutYou')}
91104
/>
92-
<ErrorMessage error={signUpEditor.getStatus("aboutYou")?.message} />
105+
<ErrorMessage error={signUpEditor.getStatus('aboutYou')?.message} />
93106

94107
<button
95108
style={{ marginLeft: 50 }}
96109
onClick={async (event) => {
97110
event.preventDefault();
98111
console.log(signUpEditor);
99112
await signUpEditor.submit();
100-
}}
101-
>
113+
}}>
102114
Submit
103115
</button>
104116
<p>Is Modified: {signUpEditor.isModified.toString()}</p>
105117
<p>Is Valid: {signUpEditor.isValid.toString()}</p>
118+
<p>Render Count: {renderCount}</p>
106119
</form>
107120
);
108121
};

‎examples/react/develop/multieditor-ts/src/core/signUpEditor.ts‎

Lines changed: 62 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,42 @@
1-
import { createMultieditor, Validator } from '@agile-ts/multieditor';
1+
import {
2+
agileResolver,
3+
createMultieditor,
4+
isEmail,
5+
isNumber,
6+
isRequired,
7+
isString,
8+
matchesRegex,
9+
maxLength,
10+
maxNumber,
11+
minLength,
12+
minNumber,
13+
yupResolver,
14+
} from '@agile-ts/multieditor';
15+
import { globalBind } from '@agile-ts/core';
16+
import * as Yup from 'yup';
217
import { generateColor, generateId, isLight } from './utils';
18+
import { assignSharedLogger, createLogger, Logger } from '@agile-ts/logger';
319

4-
export const isValidNameValidator = new Validator()
5-
.required()
6-
.string()
7-
.min(2)
8-
.max(10)
9-
.matches(/^([^0-9]*)$/, 'No Numbers allowed!');
20+
assignSharedLogger(createLogger({ level: Logger.level.DEBUG }));
21+
22+
export const isValidNameValidator = agileResolver(
23+
isRequired,
24+
isString,
25+
minLength(2),
26+
maxLength(10),
27+
matchesRegex(/^([^0-9]*)$/, 'No Numbers allowed!')
28+
);
1029

1130
export const signUpEditor = createMultieditor((editor) => ({
12-
data: {
31+
initialData: {
1332
id: 'myCoolId',
1433
firstName: 'Jeff',
1534
lastName: '',
1635
gender: undefined,
1736
userName: '',
1837
email: '',
19-
aboutYou: '',
2038
age: undefined,
39+
aboutYou: '',
2140
image: {
2241
id: generateId(),
2342
color: generateColor(),
@@ -26,39 +45,53 @@ export const signUpEditor = createMultieditor((editor) => ({
2645
onSubmit: async (preparedData) => {
2746
alert(JSON.stringify(preparedData));
2847
},
29-
validateMethods: {
48+
validationSchema: {
49+
// Outsourced Validator
3050
firstName: isValidNameValidator,
31-
lastName: isValidNameValidator,
51+
52+
// Validation with Yup
53+
lastName: yupResolver(
54+
Yup.string()
55+
.required()
56+
.min(2)
57+
.max(10)
58+
.matches(/^([^0-9]*)$/, 'No Numbers allowed!')
59+
),
60+
61+
// Outsourced Validator with additional validation method
3262
userName: isValidNameValidator
33-
.clone()
63+
.copy()
3464
.addValidationMethod(async (key, value, editor) => {
3565
const isValid = value === 'Jeff';
3666
if (!isValid)
3767
editor.setStatus(key, 'error', 'Sry only the name Jeff is allowed!');
3868
return isValid;
3969
}),
40-
email: editor.Validator().required().string().email(),
41-
aboutYou: editor
42-
.Validator()
43-
.required()
44-
.string()
45-
.min(10)
70+
71+
// Validation with Agile
72+
email: agileResolver(isRequired, isString, isEmail),
73+
74+
age: agileResolver(isRequired, isNumber, minNumber(18), maxNumber(100)),
75+
76+
// Validation with Yup and Agile
77+
aboutYou: agileResolver(isRequired)
78+
.append(yupResolver(Yup.string().min(10)))
4679
.addValidationMethod(async (key, value, editor) => {
4780
const isValid = typeof value === 'string' && !value.includes('fuck');
4881
if (!isValid)
4982
editor.setStatus(key, 'error', 'The word fuck is not allowed!');
5083
return isValid;
5184
}),
52-
age: editor.Validator().required().number().min(18).max(100),
53-
gender: editor.Validator().required(),
54-
image: editor
55-
.Validator()
56-
.required()
57-
.addValidationMethod(async (key, value, editor) => {
85+
86+
gender: agileResolver(isRequired),
87+
88+
image: agileResolver(isRequired).addValidationMethod(
89+
async (key, value, editor) => {
5890
const isValid = isLight(value.color);
5991
if (!isValid) editor.setStatus(key, 'error', 'The Image is to dark!');
6092
return isValid;
61-
}),
93+
}
94+
),
6295
},
6396
computeMethods: {
6497
lastName: (value) => {
@@ -69,5 +102,8 @@ export const signUpEditor = createMultieditor((editor) => ({
69102
},
70103
},
71104
fixedProperties: ['id'],
72-
reValidateMode: 'afterFirstSubmit',
105+
reValidateMode: 'onChange',
73106
}));
107+
108+
// For better debugging
109+
globalBind('__core__', { signUpEditor });

0 commit comments

Comments
 (0)