Custom Antd Input Component and utilities Library

This project provides reusable React components for building forms with Ant Design. It includes input fields, flexible cards, form handling hooks, buttons, and utility validation functions.

Features

• 🎨 Enhanced Ant Design components with additional functionality
• 🪝 Custom React hooks for common UI patterns
• 🧩 Utility functions for form validation and token handling
• 📦 Lightweight bundle size (≤ 300 KB)
• 🌲 Tree-shakable and ESM compatible

Installation

bash

Using npm

npm install @scope/ant-react-ui-kit

Using yarn

yarn add @scope/ant-react-ui-kit

Using pnpm

pnpm add @scope/ant-react-ui-kit

📁 Project Structure

src/
├── components/
│   ├── Input/
│   │   ├── CustomFormInput.tsx
│   │   └── index.tsx
│   ├── Card/
│   │   ├── FlexibleCard.tsx
│   │   └── index.tsx
│   └── Button/
│       ├── SubmitButton.tsx
│       └── index.tsx
├── hooks/
│   ├── useFormHandler.tsx
│   └── index.tsx
└── utils/
    ├── validators.tsx
    └── index.tsx

🧩 Components

✅ CustomFormInput

A fully integrated Ant Design input component with validation and optional formatting.

Props:

• label: string — Label for the form item.
• name: string — Name of the form field.
• rules?: Rule[] — Validation rules.
• formatter?: (value: string) => string — Optional formatter for display.
• parser?: (value: string) => string — Optional parser to sanitize input.
• prefixIcon?: ReactNode — Optional prefix icon.
• suffixIcon?: ReactNode — Optional suffix icon.

Usage:

<CustomFormInput
  label="Email"
  name="email"
  rules={[{ required: true, message: 'Email is required' }]}
/>

🃏 FlexibleCard

An enhanced wrapper around Ant Design's Card with extra UI functionality.

Props:

• isLoading?: boolean — Show skeleton loader.
• tags?: string[] — Array of tag labels.
• tagColors?: Record<string, string> — Mapping of tag names to colors.
• highlightOnHover?: boolean — Enable hover effect.
• cornerAction?: ReactNode — Optional content in top-right corner.

Usage:

<FlexibleCard
  title="Profile"
  isLoading={false}
  tags={["Admin", "New"]}
  tagColors={{ Admin: 'red', New: 'green' }}
  highlightOnHover
  cornerAction={<Button size="small">Edit</Button>}
>
  <p>User profile content...</p>
</FlexibleCard>

🚀 SubmitButton

A form submit button with built-in loading, success, and reset handling.

Props:

• isSubmittingFailed?: boolean — Reset button if submission failed.
• onSuccessComplete?: () => void — Callback on success.
• Other standard Ant Design ButtonProps.

Usage:

<SubmitButton
  loading={isSubmitting}
  isSubmittingFailed={hasErrors}
  onSuccessComplete={() => message.success('Submitted!')}
>
  Submit
</SubmitButton>

🧠 Hooks

useFormHandler

Hook to manage form state, errors, submission, and Ant Design integration.

Returns:

• values, errors, isValid, isDirty
• setFieldValue, setFieldError, resetForm
• handleSubmit(): Promise
• registerForm(formInstance)

Usage:

const {
  values,
  errors,
  handleSubmit,
  registerForm,
  setFieldValue,
} = useFormHandler({
  initialValues: { email: "" },
  onSubmit: async (values) => console.log(values),
});

Utilities

🧪 Validators (utils/validators.tsx)

Various validation functions for forms and input fields.

import { isValidEmail, validatePassword, isPhoneValid } from '@scope/ant-react-ui-kit';

isValidEmail(email: string): boolean

const isValid = isValidEmail('[email protected]'); // true

Checks if an email is valid.

validatePassword(password: string, options?): { isValid, score, errors }

const passwordResult = validatePassword('P@ssw0rd', {
  minLength: 8,
  requireUppercase: true,
  requireNumbers: true,
  requireSpecialChars: true
});

Validates strength of password.

isValidPhone(phone: string): boolean

const isPhoneValid = isPhoneValid('9803135946'); 

Simple regex-based phone validation.

🧪 Unit Tests

This project uses Jest and React Testing Library for unit testing.

Test Setup

The following dependencies have been added to the project:

• jest
• babel-jest
• @babel/preset-env
• @babel/preset-react
• @babel/preset-typescript
• @testing-library/react
• @testing-library/jest-dom
• identity-obj-proxy
• @types/jest
• jest-environment-jsdom

The following configuration files have been added to the project:

• jest.config.cjs
• babel.config.cjs
• jest.setup.ts

Test Files

Test files are located in the __tests__ directory within each component's directory. For example, the tests for the SubmitButton component are in src/components/Button/__tests__/Button.test.tsx.

Running Tests

To run the tests, use the following command:

npm test

📜 License

MIT © 2025