ev-ui-lab

v0.1.15

Published

18 days ago

A comprehensive UI component library built with React, Material-UI, and TypeScript

0High
0Medium
0Low

evervent_pvt_ltd

react mui material-ui components ui typescript

Evervent-UI-Library

A comprehensive, production-ready UI component library built with React, Material-UI, and TypeScript. Designed for rapid development with full type safety and customizable theming.

📦 Installation

npm install ev-ui-lab

🔧 Prerequisites

Ensure your project has the following peer dependencies:

npm install react react-dom @mui/material @mui/icons-material @emotion/react @emotion/styled sass

Minimum versions:

React: ^18.0.0 or ^19.0.0
React DOM: ^18.0.0 or ^19.0.0
MUI Material: ^7.0.0
MUI Icons Material: ^7.0.0

🚀 Quick Start

1. Import Styles (Required - Do this once in your app)

Import the component styles in your root layout or main app file:

For Next.js App Router (app/layout.tsx):

import "ev-ui-lab/styles.css";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

For Next.js Pages Router (pages/_app.tsx):

import "ev-ui-lab/styles.css";

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

For Create React App (src/index.js or src/App.js):

import "ev-ui-lab/styles.css";

2. Import and Use Components

Now you can import and use components in any file:

import { TextInputField, Button, DatePicker } from "ev-ui-lab";

function App() {
  const [email, setEmail] = React.useState("");

  return (
    <div>
      <TextInputField
        title="Email"
        placeholder="Enter your email"
        value={email}
        value_update={(attr, value) => setEmail(value)}
      />
      <Button
        text="Submit"
        className="primaryBtn"
        size="medium"
        onClick={() => console.log("Submitted")}
      />
    </div>
  );
}

� Documentation

Complete documentation is available in the docs/ folder:

📘 Getting Started Guide - Installation, setup, and quick start
📚 Component Documentation - Detailed docs for each component
🔍 API Reference - Complete API documentation
🎨 Styling Guide - Theming and customization
💡 Examples - Real-world usage examples
🔄 Migration Guide - Upgrading between versions
🤝 Contributing - How to contribute
⚡ Quick Reference - Cheat sheet

Quick Links

�📚 Component Documentation

Form Components

Input Field

Advanced text input with validation, password visibility toggle, and icon support.

import { TextInputField } from "ev-ui-lab";
import EmailIcon from "@mui/icons-material/Email";

<TextInputField
  title="Email"
  value={email}
  attrName="email"
  value_update={(attr, value) => setEmail(value)}
  placeholder="Enter your email"
  validation_type="ALPHANUMERIC"
  required={true}
  max_length={50}
  warn_status={hasError}
  error_message="Invalid email"
  startIcon={<EmailIcon />}
  disabled={false}
/>;

Props:

title (string): Label for the input field
value (string): Current value
attrName (string): Attribute name passed to value_update
value_update (function): Callback (attrName, newValue) => void
validation_type (string): "NUMBER", "NAME", "ALPHANUMERIC", "PASSWORD", "ALL_CAPS", "ALPHANUMERIC_ALL", "NUMBER_WITH_DECIMAL", "ADDRESS"
placeholder (string): Placeholder text
required (boolean): Mark as required
max_length (number): Maximum character length
warn_status (boolean): Show error state
error_message (string): Error message to display
disabled (boolean): Disable input
startIcon (ReactNode): Icon at start of input
endIcon (ReactNode): Icon at end of input

Select Dropdown

Dropdown select with custom styling and icon support.

import { SelectInputField } from "ev-ui-lab";

const options = [
  { label: "Option 1", value: "opt1" },
  { label: "Option 2", value: "opt2" },
];

<SelectInputField
  title="Select Country"
  value={country}
  attrName="country"
  value_update={(attr, value) => setCountry(value)}
  options={options}
  placeholder="Choose a country"
  required={true}
  warn_status={hasError}
  error_message="Please select a country"
/>;

Props:

title (string): Label for the select
value (string): Selected value
attrName (string): Attribute name
value_update (function): Callback (attrName, newValue) => void
options (array): Array of { label: string, value: string }
placeholder (string): Placeholder text
startIcon (ReactNode): Icon at start
disabled (boolean): Disable select
required (boolean): Mark as required
warn_status (boolean): Show error state
error_message (string): Error message

DatePicker

Custom date picker with year, month, and day selection.

import { DatePicker } from "ev-ui-lab";

<DatePicker
  label="Birth Date"
  value={date}
  onChange={(newDate) => setDate(newDate)}
  format="DD-MM-YYYY"
  minYear={1900}
  maxYear={2030}
  minDate={new Date("1900-01-01")}
  maxDate={new Date()}
  required={true}
  warn_status={hasError}
  error_message="Please select a date"
  showTodayButton={true}
  disabled={false}
/>;

Props:

label (string): Label for the date picker
value (string | Date): Current date value
onChange (function): Callback (dateString | null) => void
format (string): Date format - "DD-MM-YYYY", "MM-DD-YYYY", "YYYY-MM-DD", "DD/MM/YYYY"
minYear (number): Minimum year (default: 1925)
maxYear (number): Maximum year (default: current year + 10)
minDate (Date): Minimum selectable date
maxDate (Date): Maximum selectable date
required (boolean): Mark as required
warn_status (boolean): Show error state
error_message (string): Error message
showTodayButton (boolean): Show "Today" button
disabled (boolean): Disable picker

Upload File

File upload component with drag-and-drop styling.

import { UploadFile } from "ev-ui-lab";

<UploadFile
  label="Document"
  file={selectedFile}
  onChange={(e) => setSelectedFile(e.target.files?.[0] || null)}
  onRemove={() => setSelectedFile(null)}
  accept=".pdf,.doc,.docx"
  info="PDF, DOC, DOCX only (Max 5MB)"
  icon="/folder_icon.svg"
  tickIcon="/success_icon.svg"
/>;

Props:

label (string): Label for the upload
file (File | null): Selected file
onChange (function): File input change handler
onRemove (function): Remove file handler
accept (string): Accepted file types
icon (string): Upload icon path
tickIcon (string): Success icon path
info (string): Info text below label

Search Dropdown & Search Multiple Dropdown

Searchable dropdown components for single and multiple selection.

import { SearchSelectDropdown, SearchMultipleSelectDropdown } from "ev-ui-lab";

// Single select
<SearchSelectDropdown
  options={options}
  value={selected}
  onChange={setSelected}
  placeholder="Search..."
/>

// Multiple select
<SearchMultipleSelectDropdown
  options={options}
  values={selectedItems}
  onChange={setSelectedItems}
  placeholder="Search and select..."
/>

Checkbox

Styled checkbox component.

import { Checkbox } from "ev-ui-lab";

<Checkbox
  checked={isChecked}
  onChange={(e) => setIsChecked(e.target.checked)}
  label="I agree to terms"
/>;

Radio Buttons

Radio button components with different styling options.

import { RadioText, BorderRadioButton } from "ev-ui-lab";

<RadioText
  value="option1"
  selected={selectedOption === "option1"}
  onChange={() => setSelectedOption("option1")}
  label="Option 1"
/>

<BorderRadioButton
  value="option2"
  selected={selectedOption === "option2"}
  onChange={() => setSelectedOption("option2")}
  label="Option 2"
/>

UI Components

Buttons

Customizable button with loading state and icon support.

import { Button } from "ev-ui-lab";
import SendIcon from "@mui/icons-material/Send";

<Button
  text="Submit"
  className="primaryBtn"
  size="medium"
  onClick={handleSubmit}
  loader={isLoading}
  disabled={false}
  fullWidth={true}
  startIcon={<SendIcon />}
/>;

Props:

text (ReactNode): Button text or content
className (string): CSS class name for styling
size (string): "xs", "small", "medium", "large", "xl"
onClick (function): Click handler
loader (boolean): Show loading spinner
disabled (boolean): Disable button
fullWidth (boolean): Full width button
startIcon (ReactNode): Icon at start
endIcon (ReactNode): Icon at end

Toggle Switch

Toggle switch components with different styling.

import { ToggleSwitch, Switch } from "ev-ui-lab";

<ToggleSwitch
  checked={isEnabled}
  onChange={(e) => setIsEnabled(e.target.checked)}
/>

<Switch
  checked={isActive}
  onChange={(e) => setIsActive(e.target.checked)}
/>

💡 Usage Examples

Complete Form Example

import React, { useState } from "react";
import {
  TextInputField,
  SelectInputField,
  DatePicker,
  Button,
  UploadFile,
} from "ev-ui-lab";

function RegistrationForm() {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    country: "",
    birthDate: "",
  });
  const [file, setFile] = useState<File | null>(null);
  const [errors, setErrors] = useState({});

  const handleInputChange = (field: string, value: string) => {
    setFormData((prev) => ({ ...prev, [field]: value }));
  };

  const handleSubmit = () => {
    console.log("Form submitted:", formData, file);
  };

  const countries = [
    { label: "United States", value: "us" },
    { label: "United Kingdom", value: "uk" },
    { label: "Canada", value: "ca" },
  ];

  return (
    <form>
      <TextInputField
        title="Full Name"
        value={formData.name}
        attrName="name"
        value_update={handleInputChange}
        validation_type="NAME"
        required={true}
      />

      <TextInputField
        title="Email"
        value={formData.email}
        attrName="email"
        value_update={handleInputChange}
        placeholder="[email protected]"
        required={true}
      />

      <SelectInputField
        title="Country"
        value={formData.country}
        attrName="country"
        value_update={handleInputChange}
        options={countries}
        required={true}
      />

      <DatePicker
        label="Date of Birth"
        value={formData.birthDate}
        onChange={(date) => handleInputChange("birthDate", date || "")}
        format="DD-MM-YYYY"
        maxDate={new Date()}
      />

      <UploadFile
        label="ID Document"
        file={file}
        onChange={(e) => setFile(e.target.files?.[0] || null)}
        onRemove={() => setFile(null)}
        accept=".pdf,.jpg,.png"
      />

      <Button
        text="Register"
        className="primaryBtn"
        size="large"
        onClick={handleSubmit}
        fullWidth={true}
      />
    </form>
  );
}

📚 Available Components

This library includes a comprehensive set of production-ready components:

Form Components:

✅ TextInputField - Advanced text input with validation types, icons, and error states
✅ SelectInputField - Dropdown select with custom styling
✅ SearchSelectDropdown - Searchable single-select dropdown
✅ SearchMultipleSelectDropdown - Searchable multi-select dropdown
✅ DatePicker - Custom date picker with year/month/day selection
✅ UploadFile - File upload component with drag & drop
✅ Checkbox - Styled checkbox with multiple sizes
✅ RadioText - Radio button with text variant
✅ BorderRadioButton - Radio button with border styling
✅ ToggleSwitch - Custom toggle switch component

UI Components:

✅ Button - Customizable button with multiple sizes (XS, Small, Medium, Large, XL) and variants
✅ Switch - Material-UI switch with custom styling
✅ SpinLoader - Loading spinner component

See all components with examples in the documentation below or check the GitHub repository for source code and examples.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

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

📄 License

🐛 Issues

Found a bug or have a feature request? Please open an issue on GitHub.

📞 Support

For questions and support, please visit our GitHub repository.

Built with ❤️ by the Evervent Team

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Evervent-UI-Library

📦 Installation

🔧 Prerequisites

🚀 Quick Start

1. Import Styles (Required - Do this once in your app)

2. Import and Use Components

� Documentation

Quick Links

�📚 Component Documentation

Form Components

Input Field

Select Dropdown

DatePicker

Upload File

Search Dropdown & Search Multiple Dropdown

Checkbox

Radio Buttons

UI Components

Buttons

Toggle Switch

💡 Usage Examples

Complete Form Example

📚 Available Components

Form Components:

UI Components:

🤝 Contributing

📄 License

🐛 Issues

📞 Support