fix: cycle dependencies by adding form-system package
This commit is contained in:
Thomas Allmer
parent
b3a27f7c0d
commit
38dcca96ac
8 changed files with 163 additions and 116 deletions
|
|
@ -1,28 +0,0 @@
|
|||
# Forms
|
||||
|
||||
Forms allows you to create complex forms with various validation in an easy way.
|
||||
|
||||
## Features
|
||||
- built in [validate](../packages/validate) for error/warning/info/success
|
||||
- formatting of values
|
||||
- accessible
|
||||
- ...
|
||||
|
||||
## Packages
|
||||
|
||||
| Package | Description |
|
||||
| ------------------------------------------------------ | -------------------------------------------- |
|
||||
| [checkbox](../packages/checkbox) | Checkbox form element |
|
||||
| [checkbox-group](../packages/checkbox-group) | Group of checkboxes |
|
||||
| [field](../packages/field) | Base class for all inputs |
|
||||
| [form](../packages/form) | Wrapper for multiple form elements |
|
||||
| [input](../packages/input) | Input element for strings |
|
||||
| [input-amount](../packages/input-amount) | Input element for amounts |
|
||||
| [input-date](../packages/input-date) | Input element for dates |
|
||||
| [input-email](../packages/input-email) | Input element for e-mails |
|
||||
| [input-iban](../packages/input-iban) | Input element for IBANs |
|
||||
| [radio](../packages/radio) | Radio form element |
|
||||
| [radio-group](../packages/radio-group) | Group of radios |
|
||||
| [select](../packages/select) | Simple native dropdown element |
|
||||
| [textarea](../packages/textarea) | Multiline text input |
|
||||
| [validate](../packages/validate) | Validation for our form components |
|
||||
35
packages/form-system/README.md
Normal file
35
packages/form-system/README.md
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
# Form System
|
||||
|
||||
[//]: # (AUTO INSERT HEADER PREPUBLISH)
|
||||
|
||||
The Form System allows you to create complex forms with various validation in an easy way.
|
||||
|
||||
## Features
|
||||
- built in [validate](../validate) for error/warning/info/success
|
||||
- formatting of values
|
||||
- accessible
|
||||
- ...
|
||||
|
||||
## Packages
|
||||
|
||||
| Package | Description |
|
||||
| ----------------------------------- | ---------------------------------- |
|
||||
| [checkbox](../checkbox) | Checkbox form element |
|
||||
| [checkbox-group](../checkbox-group) | Group of checkboxes |
|
||||
| [field](../field) | Base class for all inputs |
|
||||
| [form](../form) | Wrapper for multiple form elements |
|
||||
| [input](../input) | Input element for strings |
|
||||
| [input-amount](../input-amount) | Input element for amounts |
|
||||
| [input-date](../input-date) | Input element for dates |
|
||||
| [input-email](../input-email) | Input element for e-mails |
|
||||
| [input-iban](../input-iban) | Input element for IBANs |
|
||||
| [radio](../radio) | Radio form element |
|
||||
| [radio-group](../radio-group) | Group of radios |
|
||||
| [select](../select) | Simple native dropdown element |
|
||||
| [textarea](../textarea) | Multiline text input |
|
||||
| [validate](../validate) | Validation for our form components |
|
||||
|
||||
## Meta Package
|
||||
|
||||
This is a meta package to show interaction between various form elements.
|
||||
For usage and installation please see the appropriate packages.
|
||||
48
packages/form-system/package.json
Normal file
48
packages/form-system/package.json
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
{
|
||||
"name": "@lion/form-system",
|
||||
"version": "0.0.0",
|
||||
"description": "The Form System allows you to create complex forms with various validation in an easy way",
|
||||
"author": "ing-bank",
|
||||
"homepage": "https://github.com/ing-bank/lion/",
|
||||
"license": "MIT",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/ing-bank/lion.git",
|
||||
"directory": "packages/form-system"
|
||||
},
|
||||
"scripts": {
|
||||
"prepublishOnly": "../../scripts/insert-header.js"
|
||||
},
|
||||
"keywords": [
|
||||
"lion",
|
||||
"web-components",
|
||||
"form"
|
||||
],
|
||||
"main": "index.js",
|
||||
"module": "index.js",
|
||||
"files": [
|
||||
"stories",
|
||||
"test",
|
||||
"*.js"
|
||||
],
|
||||
"devDependencies": {
|
||||
"@lion/core": "0.0.0",
|
||||
"@lion/form": "0.0.0",
|
||||
"@lion/fieldset": "0.0.0",
|
||||
"@lion/textarea": "0.0.0",
|
||||
"@lion/input": "0.0.0",
|
||||
"@lion/checkbox": "0.0.0",
|
||||
"@lion/checkbox-group": "0.0.0",
|
||||
"@lion/radio": "0.0.0",
|
||||
"@lion/radio-group": "0.0.0",
|
||||
"@lion/input-iban": "0.0.0",
|
||||
"@lion/input-amount": "0.0.0",
|
||||
"@lion/input-date": "0.0.0",
|
||||
"@lion/input-email": "0.0.0",
|
||||
"@open-wc/testing": "^0.11.1",
|
||||
"@open-wc/storybook": "^0.1.5"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import { storiesOf, html } from '@open-wc/storybook';
|
||||
|
||||
import '../lion-form.js';
|
||||
import '@lion/form/lion-form.js';
|
||||
import '@lion/fieldset/lion-fieldset.js';
|
||||
import '@lion/textarea/lion-textarea.js';
|
||||
import '@lion/input/lion-input.js';
|
||||
|
|
@ -33,16 +33,9 @@
|
|||
"@lion/fieldset": "0.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@lion/textarea": "0.0.0",
|
||||
"@lion/input": "0.0.0",
|
||||
"@lion/checkbox": "0.0.0",
|
||||
"@lion/checkbox-group": "0.0.0",
|
||||
"@lion/radio": "0.0.0",
|
||||
"@lion/radio-group": "0.0.0",
|
||||
"@lion/input-iban": "0.0.0",
|
||||
"@lion/input-amount": "0.0.0",
|
||||
"@lion/input-date": "0.0.0",
|
||||
"@lion/input-email": "0.0.0",
|
||||
"@lion/textarea": "0.0.0",
|
||||
"@lion/validate": "0.0.0",
|
||||
"@open-wc/testing": "^0.11.1",
|
||||
"@open-wc/storybook": "^0.1.5"
|
||||
|
|
|
|||
|
|
@ -1,2 +1,77 @@
|
|||
import './main.stories.js';
|
||||
import './umbrella.stories.js';
|
||||
import { storiesOf, html, action } from '@open-wc/storybook';
|
||||
|
||||
import '../lion-form.js';
|
||||
import '@lion/fieldset/lion-fieldset.js';
|
||||
import '@lion/input-iban/lion-input-iban.js';
|
||||
import '@lion/textarea/lion-textarea.js';
|
||||
|
||||
import { maxLengthValidator } from '@lion/validate';
|
||||
|
||||
storiesOf('Forms|<lion-form>', module)
|
||||
.add(
|
||||
'Basic form result',
|
||||
() => html`
|
||||
<lion-form id="form"
|
||||
><form>
|
||||
<lion-fieldset label="Personal data" name="personalData">
|
||||
<lion-fieldset label="Full Name" name="fullName">
|
||||
<lion-input name="firstName" label="First Name" .modelValue=${'Foo'}></lion-input>
|
||||
<lion-input name="lastName" label="Last Name" .modelValue=${'Bar'}></lion-input>
|
||||
</lion-fieldset>
|
||||
<lion-fieldset label="Location" name="location">
|
||||
<lion-input name="country" label="Country" .modelValue=${'Netherlands'}></lion-input>
|
||||
<lion-input name="city" label="City" .modelValue=${'Amsterdam'}></lion-input>
|
||||
</lion-fieldset>
|
||||
<lion-input name="birthdate" label="Birthdate" .modelValue=${'23-04-1991'}></lion-input>
|
||||
</lion-fieldset>
|
||||
<lion-textarea
|
||||
name="comments"
|
||||
help-text="If none, leave empty"
|
||||
label="Comments"
|
||||
></lion-textarea>
|
||||
<button
|
||||
@click=${() =>
|
||||
action('serializeGroup')(document.querySelector('#form').serializeGroup())}
|
||||
>
|
||||
Log to Action Logger
|
||||
</button>
|
||||
</form></lion-form
|
||||
>
|
||||
`,
|
||||
)
|
||||
.add('Form Submit/Reset', () => {
|
||||
const submit = () => {
|
||||
const form = document.querySelector('#form');
|
||||
if (form.errorState === false) {
|
||||
action('serializeGroup')(form.serializeGroup());
|
||||
}
|
||||
};
|
||||
return html`
|
||||
<lion-form id="form" @submit="${submit}"
|
||||
><form>
|
||||
<lion-fieldset label="Name" name="name">
|
||||
<lion-input
|
||||
name="firstName"
|
||||
label="First Name"
|
||||
.errorValidators=${['required', maxLengthValidator(15)]}
|
||||
>
|
||||
</lion-input>
|
||||
<lion-input
|
||||
name="lastName"
|
||||
label="Last Name"
|
||||
.errorValidators=${['required', maxLengthValidator(15)]}
|
||||
>
|
||||
</lion-input>
|
||||
</lion-fieldset>
|
||||
<button type="submit">Submit</button>
|
||||
<button type="button" @click=${() => document.querySelector('#form').resetGroup()}>
|
||||
Reset
|
||||
</button>
|
||||
<p>
|
||||
A reset button should never be offered to users. This button is only used here to
|
||||
demonstrate the functionality.
|
||||
</p>
|
||||
</form></lion-form
|
||||
>
|
||||
`;
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,77 +0,0 @@
|
|||
import { storiesOf, html, action } from '@open-wc/storybook';
|
||||
|
||||
import '../lion-form.js';
|
||||
import '@lion/fieldset/lion-fieldset.js';
|
||||
import '@lion/input-iban/lion-input-iban.js';
|
||||
import '@lion/textarea/lion-textarea.js';
|
||||
|
||||
import { maxLengthValidator } from '@lion/validate';
|
||||
|
||||
storiesOf('Forms|<lion-form>', module)
|
||||
.add(
|
||||
'Basic form result',
|
||||
() => html`
|
||||
<lion-form id="form"
|
||||
><form>
|
||||
<lion-fieldset label="Personal data" name="personalData">
|
||||
<lion-fieldset label="Full Name" name="fullName">
|
||||
<lion-input name="firstName" label="First Name" .modelValue=${'Foo'}></lion-input>
|
||||
<lion-input name="lastName" label="Last Name" .modelValue=${'Bar'}></lion-input>
|
||||
</lion-fieldset>
|
||||
<lion-fieldset label="Location" name="location">
|
||||
<lion-input name="country" label="Country" .modelValue=${'Netherlands'}></lion-input>
|
||||
<lion-input name="city" label="City" .modelValue=${'Amsterdam'}></lion-input>
|
||||
</lion-fieldset>
|
||||
<lion-input name="birthdate" label="Birthdate" .modelValue=${'23-04-1991'}></lion-input>
|
||||
</lion-fieldset>
|
||||
<lion-textarea
|
||||
name="comments"
|
||||
help-text="If none, leave empty"
|
||||
label="Comments"
|
||||
></lion-textarea>
|
||||
<button
|
||||
@click=${() =>
|
||||
action('serializeGroup')(document.querySelector('#form').serializeGroup())}
|
||||
>
|
||||
Log to Action Logger
|
||||
</button>
|
||||
</form></lion-form
|
||||
>
|
||||
`,
|
||||
)
|
||||
.add('Form Submit/Reset', () => {
|
||||
const submit = () => {
|
||||
const form = document.querySelector('#form');
|
||||
if (form.errorState === false) {
|
||||
action('serializeGroup')(form.serializeGroup());
|
||||
}
|
||||
};
|
||||
return html`
|
||||
<lion-form id="form" @submit="${submit}"
|
||||
><form>
|
||||
<lion-fieldset label="Name" name="name">
|
||||
<lion-input
|
||||
name="firstName"
|
||||
label="First Name"
|
||||
.errorValidators=${['required', maxLengthValidator(15)]}
|
||||
>
|
||||
</lion-input>
|
||||
<lion-input
|
||||
name="lastName"
|
||||
label="Last Name"
|
||||
.errorValidators=${['required', maxLengthValidator(15)]}
|
||||
>
|
||||
</lion-input>
|
||||
</lion-fieldset>
|
||||
<button type="submit">Submit</button>
|
||||
<button type="button" @click=${() => document.querySelector('#form').resetGroup()}>
|
||||
Reset
|
||||
</button>
|
||||
<p>
|
||||
A reset button should never be offered to users. This button is only used here to
|
||||
demonstrate the functionality.
|
||||
</p>
|
||||
</form></lion-form
|
||||
>
|
||||
`;
|
||||
});
|
||||
|
|
@ -13,6 +13,7 @@ import '../packages/fieldset/stories/index.stories.js';
|
|||
import '../packages/checkbox-group/stories/index.stories.js';
|
||||
import '../packages/radio-group/stories/index.stories.js';
|
||||
import '../packages/form/stories/index.stories.js';
|
||||
import '../packages/form-system/stories/index.stories.js';
|
||||
|
||||
import '../packages/icon/stories/index.stories.js';
|
||||
import '../packages/ajax/stories/index.stories.js';
|
||||
|
|
|
|||
Loading…
Reference in a new issue