@mohamedhemidi/vault-ui

Vault UI

Table of Contents

1. Installation
2. Buttons components
3. Input text components
4. Select components
5. Lazy Load Image Component
6. Toast Component
7. API references and Usage

Installation

 npm install @mohamedhemidi/vault-ui

Buttons components

Simple buttons

<Button color="primary">Primary Button</Button>
<Button color="success">Success Button</Button>

When using Icons it's highly recommended to use Google svg icons as they support re-coloring with fill attribute.

 <Button
    icon={<EditIcon />}
    variant="outlined"
    size="small"
    color="primary"> Primary Outlined Button with Icon</Button>

Input text components

Simple input texts

<TextField label="Email" color="primary" type="text" name="username" />
<TextArea
    label="Summary"
    color="success"
    name="summary"
/>

Input with Error :

<TextField
    label="Username"
    error
    errorMessage="Username is already taken, try another"
    color="primary"
    type="text"
    name="username"
/>
<TextArea
          label="Description"
          color="success"
          name="description"
          error
          errorMessage="Please write a description"
/>

Select components

Example of usage:

const options = [
  { label: "First", value: 1 },
  { label: "Second", value: 2 },
  { label: "Third", value: 3 },
  { label: "Fourth", value: 4 },
  { label: "Fifth", value: 5 },
];
function App() {
    const [value1, setValue1] = useState<SelectOption[]>([options[0]]);
    const [value2, setValue2] = useState<SelectOption | undefined>(options[0]);
    
    return (
         <Select
          multiple
          options={options}
          value={value1}
          onChange={(o) => setValue1(o)}
        />
        
        <Select
          options={options}
          value={value2}
          onChange={(o) => setValue2(o)}
        />
    )
}

Lazy Load Image Component

Example of usage:

<LazyLoadImage 
src={'your_image_path'} alt='alt text' borderRadius="2rem" />

Toast Component

A light and responsive notifications toasts component:

const [active, setsActive] = useState(false);

<Toast
    message="You signed up successfully" // Toast message
    timer={6} // 6 seconds to close
    active={active} // 
    close={() => setsActive(false)}
/>

API References and Usage

API references doc for the button component and usage

 

Name	Type	Default	Description
children	node	-	The content of the button
color	|"primary" |"secondary" |"info" |"warning" |"danger" |"success" |"neutral"	primary	The background color of the button
size	|"small" |"medium" |"large"	small	The size of the button
variant	|"outlined" |"ghost" |"filled" |"shadow"	filled	The variant shape to use
rounded	boolean	false	If true the button will be rounded If true, the button accepts only icons and No text or children
disabled	boolean	false	If true button will be disabled
loading	boolean	false	If true a loading spinner shows and button will be disabled
icon	node	-	svg element placed at the beginning of the button , Google icons are recomended
width	number	auto	Width size in rem unit
height	number	auto	Height size in rem unit

API References for Text Field component

 

Name	Type	Default	Description
color	|"primary" |"secondary" |"info" |"warning" |"danger" |"success" |"neutral"	primary	The color of the input outline
label	text	-	The label text of the input
placeholder	text	-	The placeholder text of the input
error	boolean	false	If true the borders and label get a red color
errorMessage	text	-	The error message in case of validation error
disabled	boolean	false	If true button will be disabled
width	number	auto	Width size in rem unit

API References for Text Area component

 

Name	Type	Default	Description
color	|"primary" |"secondary" |"info" |"warning" |"danger" |"success" |"neutral"	primary	The color of the input outline
label	text	-	The label text of the input
placeholder	text	-	The placeholder text of the input
error	boolean	false	If true the borders and label get a red color
errorMessage	text	-	The error message in case of validation error
disabled	boolean	false	If true button will be disabled
width	number	auto	Width size in rem unit

API References for Select component

 

Name	Type	Default	Description
multiple	boolean	false	If true the select accept multi selection and
options*	array	-	An array of key value objects, ex : [{label: "Item 1", value: "items-one"}]
value*	array	-	An array of key value Object , usually set in component state.

API References for Lazy Load Image component

 

Name	Type	Default	Description
src	string	-	The path to the image
alt	string	-	Alt text for SEO
fallbackImage	string	-	The path for the small size bitmap image that displays while loading, an auto base64 image is generated if this not provided
borderRadius	string	0	The radius of the image in string with unit eg: "3rem" , "15px"