@axon/lego

Axon Web Lego

Bricks are small components given by lib.

Installation

npm i @axon/lego

Bricks

List of bricks

• Form
• Button
• Input
• Select
• Switcher

Form

Props

Name of Function	Required	Type	Default value	Description
onValidSubmit	true	function	-	Function which called after valid form submit
onInvalidSubmit	false	function	-	Function which called after invalid form submit
onChange	false	function	-	Function which called on change any input value

How to use

import {Form, Input} from '@axon/lego';

<Form
  onValidSubmit={(res) => {
    // do some stuff here...
  }}
  onInvalidSubmit={(errors) => {
    // do some stuff here...
  }}
>
  <Input name="email" placeholder="Email" required={true} validators={['email']} />
  <button type="submit">Submit</button>
</Form>

Button

Props

Name of Function	Required	Type	Default value	Description
type	false	string	button	Type of button
disabled	false	boolean	false	Is button disabled
loadingContent	false	object or string	-	If loading === true - render this inside button
loading	false	boolean	false	Is button loading

How to use

import {Button} from '@axon/lego';

<Button
  type="submit"
  onClick={() => {
    // do some stuff here...
  }}
>
  Submit
</Button>

Example

Input

Props

Name of Function	Required	Type	Default value	Description
name	true	string	-	Name of object parameter, passed to onValidSubmit in Form
type	false	string	text	Type of input
value	false	string or boolean	-	Value, which is default in input
validators	false	array	-	Array of validators. Now available email or function, which returns null if no error or string of error
required	false	boolean	-	Check if value is empty
description	false	string	-	Description of input, which shows near input
valueList	false	string[]	-	A set of option elements that represent the values available for other controls.

More information about validators

Now available strings 'email', 'required' or function, first parameter is inputs value second - all other form values (typed)

How to use

import {Form, Input} from '@axon/lego';

<Form
  onValidSubmit={({email}) => {
    // do some stuff here...
  }
>
  <Input name="email_one" placeholder="Email" required={true} validators={['email', (value, {email_two}) => value === email_two ? null : 'Email 1 and email 2 should be equal']} />
  <Input name="email_two" placeholder="Email" required={true} validators={['email', (value, {email_one}) => value === email_one ? null : 'Email 1 and email 2 should be equal']} />
  <button type="submit">Submit</button>
</Form>

Example

Select

Props

Name of Function	Required	Type	Default value	Description
placeholder	false	string	-	-
name	true	string	-	Name of object parameter, passed to onValidSubmit in Form
options	true	array	-	Array of options to select of type {label: 'abc', value: 2}
required	false	boolean	-	On submit check if value is empty

How to use

import {Form, Select} from '@axon/lego';

<Form
  onValidSubmit={({role}) => {
    // do some stuff here...
  }}
>
  <Select
    name="role"
    placeholder="Choose role..."
    options={[{name: 'QA', value: 'qa'}, {name: 'Backend', value: 'back'}]}
    required={true}
  />
  <button type="submit">Submit</button>
</Form>

Example

Switcher

Props

Name of Function	Required	Type	Default value	Description
name	true	string	-	Name of object parameter, passed to onValidSubmit in Form
label	true	string	-	Label of switcher shown near component
value	false	boolean	false	Default value of switcher

How to use

import {Form, Switcher} from '@axon/lego';

<Form
  onValidSubmit={({active}) => {
    // do some stuff here...
  }}
>
  <Switcher name="active" label="Active" value={true} />
  <button type="submit">Submit</button>
</Form>

Example

Radio

Props

Name of Function	Required	Type	Default value	Description
name	true	string	-	Name of object parameter, passed to onValidSubmit in Form
label	false	string	-	Label of radio shown near component
value	true	boolean	false	Value of radio
checked	false	boolean	false	Initial checked state

How to use

import {Form, Radio} from '@axon/lego';

<Form
  onValidSubmit={({active}) => {
    // do some stuff here...
  }}
>
  <Radio name="radio" label="label-1" value="val-1" checked={true} />
  <Radio name="radio" label="label-2" value="val-2" />
  <button type="submit">Submit</button>
</Form>