npm package: @sudeshmagar/antd-extended-lib
Description: ![npm](https://img.shields.io/npm/v/@sudeshmagar/antd-extended-lib) ![license](https://img.shields.io/npm/l/@sudeshmagar/antd-extended-lib) ![downloads](https://img.shields.io/npm/dm/@sudeshmagar/antd-extended-lib)
Latest version: 1.1.6

# @sudeshmagar/antd-extended-lib

![npm](https://img.shields.io/npm/v/@sudeshmagar/antd-extended-lib)
![license](https://img.shields.io/npm/l/@sudeshmagar/antd-extended-lib)
![downloads](https://img.shields.io/npm/dm/@sudeshmagar/antd-extended-lib)

> A collection of enhanced Ant Design components with additional functionality and pre-built variants.

## 📦 Installation

```bash
npm install @sudeshmagar/antd-extended-lib antd
```

## 🚀 Quick Start

Import styles in your root file:
```jsx
import 'antd/dist/reset.css' //not required if you use tailwindcss
import '@sudeshmagar/antd-extended-lib/dist/style.css' //required
```

## Component Example

### Button
Doesn't support SSR
```tsx
import { Button } from '@sudeshmagar/antd-extended-lib';

// Basic usage
<Button>Click me</Button>

// Variants
<Button customVariant="success">Success</Button>
<Button customVariant="danger">Danger</Button>
```

### Button Props
| Prop          | Type                                 | Default     | Description                     |
|---------------|--------------------------------------|-------------|---------------------------------|
| customVariant | `'default' \| 'success' \| 'danger'` | `'default'` | The style variant of the button |
 |


### Card
Doesn't support SSR

```tsx
import { Card } from '@sudeshmagar/antd-extended-lib';

//Basic usage
<Card>
        <Card.Content>
            <div>Some card content</div>
        </Card.Content>
</Card>

//Full usage
<Card hoverable className="custom-card-classname">
   <Card.Header
           title="Your card titel"
           description="Your card desccription"
           extra={
              <Button customVariant="success"> OK </Button>
           }
   />
   <Card.Content>
      // Your card content
   </Card.Content>
   <Card.Footer>
      // Buttons or information of cards
   </Card.Footer>
</Card>
```
### Card Props
| Prop       | Type               | Default | Description                      |
|------------|--------------------|---------|----------------------------------|
| loading    | `boolean` optional | `false` | Shows skeleton card while `true` |
| hoverable  | `boolean` optional | `false` | Hover effects added while `true` |

### Card.Header Props
| Props       | Type                 | Default | Description                      | 
|-------------|----------------------|---------|----------------------------------|
| title       | `string` optional    | -       | Title of the Card                |
| description | `string` optional    | -       | Description of the Card          |
| extra       | `ReactNode` optional | -       | Adds extra content in the header |


### Toaster
Custom `Toaster` component wrapper for `message` with custom positions. Doesn't support SSR

```tsx
import { Toaster, toast} from '@sudeshmagar/antd-extended-lib';

//Usage

//use this component in your top level page.
//position = "top-left", "top-center", "top-right", "bottom-left", "bottom-center", "bottom-right" 
<Toaster position="top-right" duration={3} />

toast.success("Success");
toast.error("Error occured");
toast.warning("Some warning");
toast.loading("Loading");


//custom JSX toast
<Button onClick={() => toast.success(
        <div style={{display: 'flex', alignItems: 'center'}}>
           <span style={{marginRight: 8}}>🎉</span>
           <span>Custom JSX content !</span>
        </div>
)}>Show JSX Toast</Button>
```

### Toaster Props/Options
| Option   | Type                                                                                              | Default          | Description              |
|----------|---------------------------------------------------------------------------------------------------|------------------|--------------------------|
| type     | `'success' \| 'error' \| 'warning' \| 'info'\| 'loading' `                                        | -                | Type of toast message    |
| message  | `string \| ReactNode`                                                                             | -                | Content of the toast     |
| duration | `number`                                                                                          | `3`              | Duration in seconds      |
| position | `'top-left' \| 'top-center' \| 'top-right' \| 'bottom-left' \| 'bottom-center' \| 'bottom-right'` | `'bottom-right'` | Toast position on screen |


### Input and Form
They are not fully built yet however `Input` works standalone. Supports type="text" only

```tsx
import {Input} from "@sudeshmagar/antd-extended-lib";

const [username, setUsername] = useState("");

<Input label="Username" value={username} onChange={(e) => setUsername(e.target.value)}/>
```

### Input Props
| Props            | Type                    | Default | Description                               |
|------------------|-------------------------|---------|-------------------------------------------|
| label            | `string`                | -       | Sets the label for input                  |
| value            | `string`                | -       | input value                               |
| error            | `'string' \| 'boolean'` | -       | error of input (can be boolean or string) |
| showErrorMessage | `boolean`               | -       | shows error message if `error` is string  |


## Hooks

### useAuth
Authentication hook for managing user session, 
```tsx
import { useAuth } from '@sudeshmagar/antd-extended-lib';
const { isAuthenticated, user, login, logout } = useAuth();
```

| Return Value    | Type                                          | Description                  |
|-----------------|-----------------------------------------------|------------------------------|
| isAuthenticated | `boolean`                                     | Current authentication state |
| user            | `User \| null`                                | User object if authenticated |
| login           | `(credentials: Credentials) => Promise<void>` | Login function               |
| logout          | `() => Promise<void>`                         | Logout function              |


## Utilities

### Validator
Utility function for common validation scenarios.
```tsx
import { validateEmail } from '@sudeshmagar/antd-extended-lib';
// Email validation validateEmail('user@example.com'); // returns boolean
// Required field check validateRequired('some value'); // returns boolean

// Custom Validator Example usage:
export const usernameValidator = createValidator(
        (value: string) => /^[a-zA-Z0-9_]{3,20}$/.test(value),
        'Username must be 3-20 characters and can only contain letters, numbers, and underscores'
);
```
Available Validation Functions:

| Function           | Parameters                                   | Description                                                                                              |
|--------------------|----------------------------------------------|----------------------------------------------------------------------------------------------------------|
| validateEmail      | `emial: string`                              | Returns true if email is valid                                                                           |
| validatePassword   | `password: string`                           | Returns true if password meets requirement                                                               |
| validateUrl        | `url: string`                                | Returns true if URL is valid                                                                             |
| validateMinLength  | `value: string, min: number`                 | True if value meet minimum length                                                                        |
| validateMaxLength  | `value: string, max: number`                 | True if value meet max length                                                                            |
| validateRequired   | `value: any`                                 | checks if value is not empty                                                                             |
| validateNumeric    | `value: string`                              | returns true if value is numeric                                                                         |
| createValidator    | `validator: function, errorMessage: string`  | creates a custom validator which takes validation function and returns error message if validation fails |

### License
MIT © [Sudesh Magar](https://github.com/sudeshmagar)