@axon/lego NPM

Axon Web Lego

build

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>

prop-types ramda uuid

@everything-registry/sub-chunk-104 @infinitebrahmanuniverse/nolb-_axo @zalastax/nolb-_axo

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago