# @mohamedhemidi/vault-ui

> Reusable UI componentes for React and Next

Latest version **2.1.8** (published 2024-02-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install @mohamedhemidi/vault-ui
pnpm add @mohamedhemidi/vault-ui
yarn add @mohamedhemidi/vault-ui
bun add @mohamedhemidi/vault-ui
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.8 |
| Published | 2024-02-20 |
| First published | 2023-12-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 147.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Mohamed Hemidi |
| Maintainers | mohamedhemidi |
| Keywords | react, next, ui, components, react-components |

## Links

- npm: https://www.npmjs.com/package/@mohamedhemidi/vault-ui
- Repository: https://github.com/mohamedhemidi/vault-ui
- Homepage: https://github.com/mohamedhemidi/vault-ui#readme
- Issues: https://github.com/mohamedhemidi/vault-ui/issues
- npm.io page: https://npm.io/package/@mohamedhemidi/vault-ui

## Dependencies (1)

- [autoprefixer](https://npm.io/package/autoprefixer.md) ^10.4.16

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 2.1.8 (latest) — 2024-02-20
- 2.1.7 — 2024-02-20
- 2.1.6 — 2024-02-19
- 2.1.5 — 2024-02-19
- 2.1.4 — 2024-02-18
- 2.0.4 — 2024-01-18
- 2.0.3 — 2023-12-28
- 2.0.2 — 2023-12-10
- 2.0.1 — 2023-12-10
- 2.0.0 — 2023-12-09
- 1.1.1 — 2023-12-07
- 1.1.0 — 2023-12-07
- 1.0.0 — 2023-12-02

## README

# Vault UI

# Table of Contents
1. [Installation](#installation)
2. [Buttons components](#buttonComponent)
3. [Input text components](#InputTextComponent)
4. [Select components](#SelectComponent)
5. [Lazy Load Image Component](#LazyLoadImageComponent)
6. [Toast Component](#ToastComponent)
7. [API references and Usage](#ApiUsageAndReferences)

## Installation 
```sh
 npm install @mohamedhemidi/vault-ui
```

## Buttons components
Simple buttons
```js
<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.
```js
 <Button
    icon={<EditIcon />}
    variant="outlined"
    size="small"
    color="primary"> Primary Outlined Button with Icon</Button>
```
![image](./src/components/Button/preview.png)

## Input text components

Simple input texts
```js
<TextField label="Email" color="primary" type="text" name="username" />
<TextArea
    label="Summary"
    color="success"
    name="summary"
/>
```
Input with Error :
```js
<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"
/>
```
![image](./src/components/Inputs/TextArea/preview.png)

![image](./src/components/Inputs/TextField/preview.png)

## Select components

![image](./src/components/Select/preview.png)
#### Example of usage: 
```js
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

![image](./src/components/LazyLoadImage/preview.jpg)

#### Example of usage: 
```js
<LazyLoadImage 
src={'your_image_path'} alt='alt text' borderRadius="2rem" />
```

## Toast Component

![image](./src/components/Toast/preview.png)

A light and responsive notifications toasts component:

```js
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
&nbsp;
| 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
&nbsp;

| 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
&nbsp;

| 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
&nbsp;

| 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
&nbsp;


| 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"                                                              |

---
_Source: https://npm.io/package/@mohamedhemidi/vault-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._