@sartech/common-components

A comprehensive React component library with common UI components and validation utilities.

🚀 Features

• AgencyBanner: Customizable announcement banner component
• FileUpload: Advanced file upload component with image compression and preview
• Validations: Comprehensive validation utility functions
• Validators: Utility functions for data validation and formatting
• DateFormats: Comprehensive date and time formatting utilities

📦 Installation

npm install @sartech/common-components

🔧 Peer Dependencies

This package requires the following peer dependencies:

{
  "react": "^17.0.0 || ^18.0.0",
  "react-dom": "^17.0.0 || ^18.0.0",
  "react-bootstrap": "^2.8.0",
  "react-icons": "^4.10.0",
  "react-lazyload": "^3.1.0",
  "react-meta-tags": "^0.7.4",
  "react-router-dom": "^6.8.0"
}

📖 Usage

AgencyBanner Component

import { AgencyBanner } from '@sartech/common-components';

function App() {
  return (
    <AgencyBanner
      announcementTitle="Special Offer"
      announcementInfo="Get 50% off on all products!"
      buttonText="Shop Now"
      onClick={() => console.log('Button clicked!')}
      primaryColor="#17517b"
      secondaryColor="#f26f22"
      buttonColor="#ff3838"
    />
  );
}

FileUpload Component

import { FileUpload } from '@sartech/common-components';

function App() {
  const handleUpload = async (fileData) => {
    // Your upload logic here
    const response = await uploadToServer(fileData);
    return { url: response.url };
  };

  return (
    <FileUpload
      label="Upload Image"
      fileType=".png,.jpg,.jpeg,.bmp,.pdf"
      uploadFunction={handleUpload}
      responseUrl={(url) => console.log('Uploaded URL:', url)}
      maxFileSize={204800}
    />
  );
}

Validation Functions

import {
  emailValidation,
  mobileNumberValidation,
  strongPassword,
} from '@sartech/common-components';

// Email validation
const isValidEmail = emailValidation('[email protected]'); // true

// Mobile number validation
const isValidMobile = mobileNumberValidation('1234567890'); // true

// Password validation
const isStrongPassword = strongPassword('MyP@ssw0rd'); // true

Validators Functions

import {
  isNotNull,
  isSuccessResponse,
  isArrayNotEmpty,
  roundToTwoDecimals,
} from '@sartech/common-components';

// Check if value is not null/empty
const isValid = isNotNull('some value'); // true
const isEmpty = isNotNull(''); // false

// Check if response status is success (200)
const isSuccess = isSuccessResponse(200); // true
const isError = isSuccessResponse(404); // false

// Check if array is not empty
const hasItems = isArrayNotEmpty([1, 2, 3]); // true
const isEmpty = isArrayNotEmpty([]); // false

// Round number to two decimal places
const rounded = roundToTwoDecimals(3.14159); // 3.15

DateFormats Functions

import {
  convertStringToDate,
  convertDDMMYYYYToYYYYMMDD,
  convertToLetterDate,
  calculateminutesbetweentwoDates,
  currentDateFormat,
} from '@sartech/common-components';

// Convert string to DD-MM-YYYY format
const formattedDate = convertStringToDate('2023-12-25'); // '25-12-2023'

// Convert DD-MM-YYYY to YYYY-MM-DD
const yyyyFormat = convertDDMMYYYYToYYYYMMDD('25-12-2023'); // '2023-12-25'

// Convert to letter format
const letterDate = convertToLetterDate('25-12-2023'); // 'Mon, 25 Dec, 2023'

// Calculate minutes between two dates
const minutes = calculateminutesbetweentwoDates('2023-12-25T11:30', '2023-12-25T10:00'); // 90

// Get current date in specific format
const currentDate = currentDateFormat(); // '2023-12-25T10-30-45'

## 🎨 Customization

### AgencyBanner Props

| Prop                   | Type     | Default                                          | Description             |
| ---------------------- | -------- | ------------------------------------------------ | ----------------------- |
| `announcementTitle`    | string   | 'Agency Markup'                                  | Title text              |
| `announcementInfo`     | string   | 'Now create the Agency Markup for more revenue!' | Info text               |
| `buttonText`           | string   | 'Create Agency Markup'                           | Button text             |
| `onClick`              | function | -                                                | Button click handler    |
| `primaryColor`         | string   | '#17517b'                                        | Primary color           |
| `secondaryColor`       | string   | '#f26f22'                                        | Secondary color         |
| `buttonColor`          | string   | '#ff3838'                                        | Button color            |
| `buttonHoverColor`     | string   | '#e62e2e'                                        | Button hover color      |
| `titleTextColor`       | string   | '#fff'                                           | Title text color        |
| `infoTextColor`        | string   | 'transparent'                                    | Info text color         |
| `buttonTextColor`      | string   | '#fff'                                           | Button text color       |
| `buttonHoverTextColor` | string   | '#fff'                                           | Button hover text color |
| `announcementImage`    | string   | placeholder URL                                  | Image URL               |

### FileUpload Props

| Prop             | Type     | Default                     | Description               |
| ---------------- | -------- | --------------------------- | ------------------------- |
| `id`             | string   | 'file-upload'               | Component ID              |
| `cid`            | string   | 'file-input'                | Input ID                  |
| `label`          | string   | 'Choose File'               | Input label               |
| `fileType`       | string   | '.png,.jpg,.jpeg,.bmp,.pdf' | Accepted file types       |
| `uploadFunction` | function | default function            | Upload handler            |
| `maxFileSize`    | number   | 204800                      | Max file size in bytes    |
| `showPreview`    | boolean  | true                        | Show image preview        |
| `quality`        | number   | 0.8                         | Image compression quality |

## 🔍 Available Validation Functions

- `emailValidation(email)` - Email format validation
- `mobileNumberValidation(phone)` - Mobile number validation
- `characterValidation(text)` - Alphanumeric with spaces validation
- `characternameValidation(name)` - Alphabetic with spaces validation
- `spaceValidation(text)` - Space character check
- `characternameUnderScoreValidation(text)` - Alphabetic with underscore validation
- `characternameHypenValidation(text)` - Alphabetic with hyphen validation
  - `alpahnumericValidate(text)` - Alphanumeric validation
- `validatePassword(password)` - Special character check
- `panNumberValidation(pan)` - PAN number validation
- `gstNumberValidation(gst)` - GST number validation
- `strongPassword(password)` - Strong password validation
- `urlParamsToJSON(url)` - URL parameters to JSON conversion

## 🔧 Available Validators Functions

- `isNotNull(data)` - Check if value is not null, undefined, or empty
- `isSuccessResponse(status)` - Check if HTTP status code is 200 (success)
- `isArrayNotEmpty(arr)` - Check if array exists and has items
- `roundToTwoDecimals(num)` - Round number to two decimal places with smart rounding

## 📅 Available DateFormats Functions

- `calculateminutesbetweentwoDates(endDate, startDate)` - Calculate minutes between two dates
- `convertStringToDate(dateString)` - Convert string to DD-MM-YYYY format
- `convertDDMMYYYYToYYYYMMDD(dateString)` - Convert DD-MM-YYYY to YYYY-MM-DD
- `convertYYYYMMDDToDDMMYYYY(dateString)` - Convert YYYY-MM-DD to DD-MM-YYYY
- `convertToLetterDate(dateString)` - Convert to letter format (Mon, 25 Dec, 2023)
- `convertDateToLetterDate(dateString)` - Convert any date to letter format
- `convertToLetterDateTime(dateString)` - Convert to letter format with time
- `currentDateFormat()` - Get current date in YYYY-MM-DDTHH-mm-ss format
- `formatTo(date, format)` - Format date to any moment.js format
- `getTimeZoneDate(date, domain_name)` - Get timezone specific date
- `isTimeAfter(one, two)` - Check if one time is after another
- `enumerateDaysBetweenDates(startDate, endDate)` - Get array of dates between two dates
- `addYearsToDate(years, dateObj)` - Add/subtract years to date
- `convertTimeToMin(timeString)` - Convert time string to minutes
- `convertToHHMM(timeString)` - Convert time to HH:mm format

## 🛠️ Development

### Build

```bash
npm run build

Development Mode

npm run dev

Clean Build

npm run clean

📄 License

MIT

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📞 Support

For support and questions, please open an issue on the GitHub repository.