npm package: @namphuongtechnologi/ui
Description: Packages of ui for namphuongtechnologies
Author: namphuongso
Latest version: 0.0.4

# @namphuongtechnologi/ui

## Introduction

This project is designed to facilitate the reusability of React libraries. It includes a collection of reusable components, ui. The main goal of this project is to streamline the development process by providing a set of pre-built elements that can be incorporated into various React applications. This not only saves time but also ensures consistency across different projects.

## Usage

### Components

## Usage

### Example

## Usage

### Example

```javascript
import { NPLogin } from '@namphuongtechnologi/ui'

function App() {
  const onSubmit = (values: OnLoginValues) => {
    console.log(values);
  };

  const onSendCode = (values: OnLoginValues) => {
    console.log(values);
  };

  return (
    <NPLogin
      logo={{ src: Logo }}
      title="Login"
      description="Enter your email below to login to your account"
      providers={[{ providerType: "google" }]}
      onSubmit={onSubmit}
      onSendCode={onSendCode}
      authStrategy="passwordless"
    />
  );
}
```

- **logo**
  - Type: `HTMLImageElement`
  - CSS Properties for logo
- **title**
  - Type: `String`
  - The title of login template
- **description**
  - Type: `String`
  - The description of login template
- **providers**
  - Type: `Array<Provider>`
  - List of provider use in login template
- **onSubmit**
  - Type: `Function`
  - Click login button
- **onSendCode**
  - Type: `Function`
  - Click send code button when using passwordless authStrategy
- **authStrategy**
  - Type: `String`: `passwordless` or `passwords`
  - Options:
    - `passwordless`: login with email or phone number without password
    - `passwords`: login with username and password
  - Default: `passwordless`
- **identifiers**
  - Type: `Array<String>`
  - Default: `['email']`
  - Options:
    - `email`: use login passwordless with email
    - `phone`: use login passwordless with phone
- **passwordsConfig**
  - Type: `PasswordsConfig`
  - Options config passwords authStrategy
  - Default: `undefined`
  - Work with `authStrategy` is `passwords`
- **passwordlessConfig**
  - Type: `PasswordlessConfig`
  - Options config passwordless authStrategy
  - Default: `undefined`
  - Work with `authStrategy` is `passwordless`
- **loginBtnText**
  - Type: `String`
  - Default: `Đăng nhập`
  - The label of login button
- **loginBtnProps**
  - Type: `HTMLButtonElement`
  - Login button props

## Types

### Provider

| Name           | Type            | Description                    |
| :------------- | :-------------- | :----------------------------- |
| `providerType` | `string`        | **Required**. Type of provider |
| `...`          | `CSSProperties` | CSS Button Properties          |

### PasswordsConfig

| Name                   | Type                | Description                                            |
| :--------------------- | :------------------ | :----------------------------------------------------- |
| `phoneZodSchema`       | `ZodSchema`         | Phone ZodSchema                                        |
| `emailZodSchema`       | `ZodSchema`         | Email ZodSchema                                        |
| `codeZodSchema`        | `ZodSchema`         | Code ZodSchema                                         |
| `emailText`            | `String`            | Email label                                            |
| `phoneText`            | `String`            | Phone label                                            |
| `verifyCodeText`       | `String`            | Verify code label                                      |
| `emailInputProps`      | `HTMLInputElement`  | Email input props                                      |
| `phoneInputProps`      | `HTMLInputElement`  | Phone input props                                      |
| `verifyCodeInputProps` | `HTMLInputElement`  | Verify code input props                                |
| `sendCodeText`         | `String`            | Send code button title                                 |
| `sendCodeBtnProps`     | `HTMLButtonElement` | Send code button props                                 |
| `countdownTime`        | `Number`            | Countdown time disabled after clicked send code button |

### PasswordlessConfig

| Name                 | Type               | Description          |
| :------------------- | :----------------- | :------------------- |
| `usernameZodSchema`  | `ZodSchema`        | Username ZodSchema   |
| `passwordZodSchema`  | `ZodSchema`        | Password ZodSchema   |
| `usernameText`       | `string`           | Username label       |
| `passwordText`       | `string`           | Password label       |
| `usernameInputProps` | `HTMLInputElement` | Username input props |
| `passwordInputProps` | `HTMLInputElement` | Password input props |