Skip to content

Commit 38dcca9

Browse files
daKmoRdaKmoR
committed
fix: cycle dependencies by adding form-system package
1 parent b3a27f7 commit 38dcca9

File tree

8 files changed

+163
-116
lines changed

8 files changed

+163
-116
lines changed

‎docs/forms.md‎

Lines changed: 0 additions & 28 deletions
This file was deleted.

‎packages/form-system/README.md‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
# Form System
2+
3+
[//]: # (AUTO INSERT HEADER PREPUBLISH)
4+
5+
The Form System allows you to create complex forms with various validation in an easy way.
6+
7+
## Features
8+
- built in [validate](../validate) for error/warning/info/success
9+
- formatting of values
10+
- accessible
11+
- ...
12+
13+
## Packages
14+
15+
| Package | Description |
16+
| ----------------------------------- | ---------------------------------- |
17+
| [checkbox](../checkbox) | Checkbox form element |
18+
| [checkbox-group](../checkbox-group) | Group of checkboxes |
19+
| [field](../field) | Base class for all inputs |
20+
| [form](../form) | Wrapper for multiple form elements |
21+
| [input](../input) | Input element for strings |
22+
| [input-amount](../input-amount) | Input element for amounts |
23+
| [input-date](../input-date) | Input element for dates |
24+
| [input-email](../input-email) | Input element for e-mails |
25+
| [input-iban](../input-iban) | Input element for IBANs |
26+
| [radio](../radio) | Radio form element |
27+
| [radio-group](../radio-group) | Group of radios |
28+
| [select](../select) | Simple native dropdown element |
29+
| [textarea](../textarea) | Multiline text input |
30+
| [validate](../validate) | Validation for our form components |
31+
32+
## Meta Package
33+
34+
This is a meta package to show interaction between various form elements.
35+
For usage and installation please see the appropriate packages.

‎packages/form-system/package.json‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
{
2+
"name": "@lion/form-system",
3+
"version": "0.0.0",
4+
"description": "The Form System allows you to create complex forms with various validation in an easy way",
5+
"author": "ing-bank",
6+
"homepage": "https://github.com/ing-bank/lion/",
7+
"license": "MIT",
8+
"publishConfig": {
9+
"access": "public"
10+
},
11+
"repository": {
12+
"type": "git",
13+
"url": "https://github.com/ing-bank/lion.git",
14+
"directory": "packages/form-system"
15+
},
16+
"scripts": {
17+
"prepublishOnly": "../../scripts/insert-header.js"
18+
},
19+
"keywords": [
20+
"lion",
21+
"web-components",
22+
"form"
23+
],
24+
"main": "index.js",
25+
"module": "index.js",
26+
"files": [
27+
"stories",
28+
"test",
29+
"*.js"
30+
],
31+
"devDependencies": {
32+
"@lion/core": "0.0.0",
33+
"@lion/form": "0.0.0",
34+
"@lion/fieldset": "0.0.0",
35+
"@lion/textarea": "0.0.0",
36+
"@lion/input": "0.0.0",
37+
"@lion/checkbox": "0.0.0",
38+
"@lion/checkbox-group": "0.0.0",
39+
"@lion/radio": "0.0.0",
40+
"@lion/radio-group": "0.0.0",
41+
"@lion/input-iban": "0.0.0",
42+
"@lion/input-amount": "0.0.0",
43+
"@lion/input-date": "0.0.0",
44+
"@lion/input-email": "0.0.0",
45+
"@open-wc/testing": "^0.11.1",
46+
"@open-wc/storybook": "^0.1.5"
47+
}
48+
}

‎packages/form/stories/umbrella.stories.js‎ renamed to ‎packages/form-system/stories/index.stories.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { storiesOf, html } from '@open-wc/storybook';
22

3-
import '../lion-form.js';
3+
import '@lion/form/lion-form.js';
44
import '@lion/fieldset/lion-fieldset.js';
55
import '@lion/textarea/lion-textarea.js';
66
import '@lion/input/lion-input.js';

‎packages/form/package.json‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -33,16 +33,9 @@
3333
"@lion/fieldset": "0.0.0"
3434
},
3535
"devDependencies": {
36-
"@lion/textarea": "0.0.0",
3736
"@lion/input": "0.0.0",
38-
"@lion/checkbox": "0.0.0",
39-
"@lion/checkbox-group": "0.0.0",
40-
"@lion/radio": "0.0.0",
41-
"@lion/radio-group": "0.0.0",
4237
"@lion/input-iban": "0.0.0",
43-
"@lion/input-amount": "0.0.0",
44-
"@lion/input-date": "0.0.0",
45-
"@lion/input-email": "0.0.0",
38+
"@lion/textarea": "0.0.0",
4639
"@lion/validate": "0.0.0",
4740
"@open-wc/testing": "^0.11.1",
4841
"@open-wc/storybook": "^0.1.5"

‎packages/form/stories/index.stories.js‎

Lines changed: 77 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,77 @@
1-
import './main.stories.js';
2-
import './umbrella.stories.js';
1+
import { storiesOf, html, action } from '@open-wc/storybook';
2+
3+
import '../lion-form.js';
4+
import '@lion/fieldset/lion-fieldset.js';
5+
import '@lion/input-iban/lion-input-iban.js';
6+
import '@lion/textarea/lion-textarea.js';
7+
8+
import { maxLengthValidator } from '@lion/validate';
9+
10+
storiesOf('Forms|<lion-form>', module)
11+
.add(
12+
'Basic form result',
13+
() => html`
14+
<lion-form id="form"
15+
><form>
16+
<lion-fieldset label="Personal data" name="personalData">
17+
<lion-fieldset label="Full Name" name="fullName">
18+
<lion-input name="firstName" label="First Name" .modelValue=${'Foo'}></lion-input>
19+
<lion-input name="lastName" label="Last Name" .modelValue=${'Bar'}></lion-input>
20+
</lion-fieldset>
21+
<lion-fieldset label="Location" name="location">
22+
<lion-input name="country" label="Country" .modelValue=${'Netherlands'}></lion-input>
23+
<lion-input name="city" label="City" .modelValue=${'Amsterdam'}></lion-input>
24+
</lion-fieldset>
25+
<lion-input name="birthdate" label="Birthdate" .modelValue=${'23-04-1991'}></lion-input>
26+
</lion-fieldset>
27+
<lion-textarea
28+
name="comments"
29+
help-text="If none, leave empty"
30+
label="Comments"
31+
></lion-textarea>
32+
<button
33+
@click=${() =>
34+
action('serializeGroup')(document.querySelector('#form').serializeGroup())}
35+
>
36+
Log to Action Logger
37+
</button>
38+
</form></lion-form
39+
>
40+
`,
41+
)
42+
.add('Form Submit/Reset', () => {
43+
const submit = () => {
44+
const form = document.querySelector('#form');
45+
if (form.errorState === false) {
46+
action('serializeGroup')(form.serializeGroup());
47+
}
48+
};
49+
return html`
50+
<lion-form id="form" @submit="${submit}"
51+
><form>
52+
<lion-fieldset label="Name" name="name">
53+
<lion-input
54+
name="firstName"
55+
label="First Name"
56+
.errorValidators=${['required', maxLengthValidator(15)]}
57+
>
58+
</lion-input>
59+
<lion-input
60+
name="lastName"
61+
label="Last Name"
62+
.errorValidators=${['required', maxLengthValidator(15)]}
63+
>
64+
</lion-input>
65+
</lion-fieldset>
66+
<button type="submit">Submit</button>
67+
<button type="button" @click=${() => document.querySelector('#form').resetGroup()}>
68+
Reset
69+
</button>
70+
<p>
71+
A reset button should never be offered to users. This button is only used here to
72+
demonstrate the functionality.
73+
</p>
74+
</form></lion-form
75+
>
76+
`;
77+
});

‎packages/form/stories/main.stories.js‎

Lines changed: 0 additions & 77 deletions
This file was deleted.

‎stories/index.stories.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import '../packages/fieldset/stories/index.stories.js';
1313
import '../packages/checkbox-group/stories/index.stories.js';
1414
import '../packages/radio-group/stories/index.stories.js';
1515
import '../packages/form/stories/index.stories.js';
16+
import '../packages/form-system/stories/index.stories.js';
1617

1718
import '../packages/icon/stories/index.stories.js';
1819
import '../packages/ajax/stories/index.stories.js';

0 commit comments

Comments
 (0)