nepto-design-system v1.0.5

nepto-design-system

Note: Helper utilities for developing react components.

Installation

$ yarn add nepto-design-system

How to use the storybook

$ yarn
$ yarn storybook

Included Components

*is the default option

Alert

Parameters:

• children - React.ReactNode
• color - *error | info | success | warning
• icon - string
• iconStyle - *line | solid
• closeable - false | true

Avatar

Parameters:

• onClick - function
• type - *default | tile | hex
• label - string
• state - *false | true
• src - *(replace with first letter) | string
• size - 144 | 88 | *56 | 40 | 32 | 24
• color - string

Button

Parameters:

• children - React.ReactNode
• onClick - function
• style - *block | plain | text
• size - *large | medium | small
• color - *primary | secondary | accent
• iconLeft - string
• iconRight - string
• iconStyle - *line | solid
• disabled - *false | true
• width - string

Button-Icon

Parameters:

• onClick - function
• color - *primary | secondary | accent
• icon - string
• iconStyle - *line | solid
• disabled - *false | true

Checkbox

Parameters:

• children - React.ReactNode
• checked - *false | true
• labelPosition - *right | left
• disabled - *false | true

Chip

Parameters:

• children - React.ReactNode
• type - *default | role | icon
• icon - string
• iconStyle - *line | solid
• colseable - *false | true
• color - *default(shade) | primary | secondary | accent | purple | orange | warning | error | success | info

Chip - emoji

Parameters:

• children - React.ReactNode
• react - *react | reacted
• emoji - string

Dialog

Parameters:

• title - string
• content - string
• button - string
• buttonSub - string
• visible - *false | true
• onButtonClick - function
• onButtonSubClick - function
• onOverlayClick - function

Fab

Parameters:

• children - React.ReactNode
• onClick - function
• color - *primary | secondary | accent
• size - *large | medium | small
• labelPosition - *right | left
• icon - string
• iconStyle - *line | solid
• disabled - *false | true
• floating - *floating

Grid - col

Parameters:

• children - React.ReactNode
• col - string
• offset - string
• order - string
• xs - string | boolean
• xsOffset - string
• xsOrder - string
• sm - string | boolean
• smOffset - string
• smOrder - string
• lg - string | boolean
• lgOffset - string
• lgOrder - string
• xl - string | boolean
• xlOffset - string
• xlOrder - string

Grid - container

Parameters:

• children - React.ReactNode
• fluid - *false | true

Grid - row

Parameters:

• children - React.ReactNode
• noGutters - *false | true
• justifyContent - start | center | end | between
• alignItem - start | center | end

Grid - spacer

Icon

Parameters:

• children - React.ReactNode
• solid - * false | true

Menu

Parameters:

• children - React.ReactNode
• fit - true | false
• close - true | false
• top - string | boolean;

Modal

Parameters:

• children - React.ReactNode
• visible - true | false
• onOverlayClick - function

Radio

Parameters:

• chlidren - React.ReactNode
• checked - *false | true
• labelPosition - *right | left
• disabled - *false | true
• name - string

RadioGroup

Parameters:

• children - React.ReactNode

Skeleton

Parameters:

• type - *plain | thumb | list | list-large

Stepper

Parameters:

• range - *2 | 3 | 4
• current - *0 | 1 | 2 | 3 | 4

Switch

Parameters:

• chlidren - React.ReactNode
• checked - *false | true
• labelPosition - *right | left
• disabled - *false | true

Tab

Parameters:

• children - React.ReactNode
• itemNumber - number
• tabIndex - number
• onClick - function

TabItem

Parameters:

• children - React.ReactNode
• selected - *false | true
• onClick - function

Textarea

Parameters:

• label - string
• placeholder - string
• hint - string
• counter - number
• state - disabled | error
• onChange - funciton

Textfield

Parameters:

• children - React.ReactNode
• onClick - function
• label - string
• type - *text | email | number | password
• value - string
• hint - string
• counter - number
• state - *default | disabled | error
• iconLeft - string
• iconRight - string
• iconStyle - *line | solid
• placeholder - string
• clearable - *false | true
• onIconRightClick - function
• onChange - function

Textfield - Dense

Parameters:

• label - string
• type - *text | email | number | password
• state - disabled | error
• iconLeft - string
• iconRight - string
• iconStyle - *line | solid
• clearable - *false | true
• onIconRightClick - function
• onChange - function

Toast

Parameters:

• children - React.ReactNode;
• color - *primary | secondary | error | success
• button - string
• time - *0(infinite) | number
• visible - *false | true

License

MIT