UnisysUI

A comprehensive React UI component library with modern design and Material UI inspired styling. UnisysUI provides a complete set of reusable components for building beautiful web applications.

🚀 Features

• 20+ Components: Buttons, Inputs, Tables, Menus, Modals, and more
• Material UI Inspired: Clean, modern design following Material Design principles
• TypeScript Ready: Full TypeScript support with type definitions
• Styled Components: CSS-in-JS styling with theme support
• Tree Shaking: Import only what you need
• Responsive: Mobile-first responsive design
• Accessible: ARIA compliant and keyboard navigation support
• Customizable: Extensive theming and customization options

📦 Installation

npm install unisysui styled-components

Peer Dependencies

Make sure you have these peer dependencies installed:

npm install react react-dom styled-components

🎯 Quick Start

import React from 'react';
import { Button, Input, Table, ToasterProvider, Toaster } from 'unisysui';

function App() {
  return (
    <ToasterProvider>
      <div>
        <Button variant="primary">Click me!</Button>
        <Input label="Your name" placeholder="Enter your name" />
        <Toaster />
      </div>
    </ToasterProvider>
  );
}

export default App;

📚 Components

🔘 Form Components

• Button - Multiple variants (primary, secondary, tertiary) and sizes
• Input - Text input with validation and icons
• Textarea - Multi-line text input
• Checkbox - Styled checkbox with custom designs
• RadioButton - Radio button groups
• ToggleSwitch - Modern toggle switches
• Dropdown - Select dropdown with search
• MultiSelect - Multi-selection dropdown with checkboxes
• NumericInput - Number input with increment/decrement controls
• LookupField - Multi-select with chips and search functionality

📊 Data Display

• Table - Advanced data table with sorting, filtering, pagination
• Avatar - User avatars with automatic color generation
• StarRating - Interactive star rating component
• Pagination - Page navigation component

🧭 Navigation

• ListBox - Transfer component for moving items between lists

📋 Layout & Feedback

• Accordion - Collapsible content sections
• Tooltip - Contextual information tooltips
• Toaster - Toast notifications with multiple types
• Loader - Loading indicators and progress bars

🎛️ Interactive

• Slider - Range and value sliders
• HybridSlider - Advanced slider with multiple handles

📅 Date & Time

• DatePicker - Date selection with calendar interface

💻 Component Examples

Button Component

import React from 'react';
import { Button } from 'unisysui';

const ButtonExample = () => {
  return (
    <div style={{ display: 'flex', gap: '12px' }}>
      <Button variant="primary" onClick={() => alert('Primary clicked!')}>
        Primary
      </Button>
      <Button variant="secondary" size="lg">
        Secondary Large
      </Button>
      <Button variant="tertiary" disabled>
        Disabled
      </Button>
    </div>
  );
};

Input Component

import React, { useState } from 'react';
import { Input } from 'unisysui';

const InputExample = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
      <Input
        label="Full Name"
        placeholder="Enter your name"
        value={name}
        onChange={(e) => setName(e.target.value)}
        fullWidth
      />
      <Input
        label="Email"
        type="email"
        placeholder="Enter your email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        error={!email.includes('@') && email ? 'Invalid email' : ''}
        fullWidth
      />
    </div>
  );
};

Checkbox Component

import React, { useState } from 'react';
import { Checkbox } from 'unisysui';

const CheckboxExample = () => {
  const [checked, setChecked] = useState(false);
  const [indeterminate, setIndeterminate] = useState(true);
  
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
      <Checkbox
        label="Accept terms and conditions"
        checked={checked}
        onChange={setChecked}
      />
      <Checkbox
        label="Indeterminate state"
        indeterminate={indeterminate}
        onChange={() => setIndeterminate(!indeterminate)}
      />
      <Checkbox
        label="Disabled checkbox"
        disabled
      />
    </div>
  );
};

Table Component

import React, { useState } from 'react';
import { Table } from 'unisysui';

const TableExample = () => {
  const columns = [
    { key: 'name', title: 'Name', sortable: true },
    { key: 'email', title: 'Email' },
    { key: 'role', title: 'Role' }
  ];

  const data = [
    { id: 1, name: 'John Doe', email: '[email protected]', role: 'Developer' },
    { id: 2, name: 'Jane Smith', email: '[email protected]', role: 'Designer' },
    { id: 3, name: 'Bob Johnson', email: '[email protected]', role: 'Manager' }
  ];

  return (
    <Table
      columns={columns}
      data={data}
      selectable
      showPagination
      pageSize={10}
      onRowSelect={(selected) => console.log('Selected:', selected)}
    />
  );
};

Toast Notifications

import React from 'react';
import { ToasterProvider, Toaster, useToaster, Button } from 'unisysui';

const ToastExample = () => {
  const { addToast } = useToaster();

  const showSuccessToast = () => {
    addToast({
      type: 'success',
      title: 'Success!',
      message: 'Operation completed successfully.',
      duration: 5000
    });
  };

  const showErrorToast = () => {
    addToast({
      type: 'failed',
      title: 'Error!',
      message: 'Something went wrong.',
      duration: 5000
    });
  };

  return (
    <div style={{ display: 'flex', gap: '12px' }}>
      <Button onClick={showSuccessToast}>Success Toast</Button>
      <Button onClick={showErrorToast}>Error Toast</Button>
    </div>
  );
};

// Wrap your app with ToasterProvider
const App = () => (
  <ToasterProvider>
    <ToastExample />
    <Toaster />
  </ToasterProvider>
);

DatePicker Component

import React, { useState } from 'react';
import { DatePicker, LocalizationProvider, AdapterNativeDate } from 'unisysui';

const DatePickerExample = () => {
  const [selectedDate, setSelectedDate] = useState(new Date());

  return (
    <LocalizationProvider dateAdapter={AdapterNativeDate}>
      <DatePicker
        selected={selectedDate}
        onChange={setSelectedDate}
        placeholder="Select a date"
      />
    </LocalizationProvider>
  );
};

Dropdown Component

import React, { useState } from 'react';
import { Dropdown } from 'unisysui';

const DropdownExample = () => {
  const [selectedValue, setSelectedValue] = useState('');
  
  const options = [
    { value: 'react', label: 'React' },
    { value: 'vue', label: 'Vue.js' },
    { value: 'angular', label: 'Angular' }
  ];

  return (
    <Dropdown
      label="Select Framework"
      placeholder="Choose a framework"
      options={options}
      value={selectedValue}
      onChange={setSelectedValue}
      width="300px"
    />
  );
};

Accordion Component

import React from 'react';
import { Accordion } from 'unisysui';

const AccordionExample = () => {
  return (
    <div style={{ maxWidth: '600px' }}>
      <Accordion title="What is UnisysUI?" defaultExpanded>
        UnisysUI is a comprehensive React component library designed for 
        enterprise applications.
      </Accordion>
      
      <Accordion title="Installation">
        Install with: npm install unisysui styled-components
      </Accordion>
      
      <Accordion title="Features">
        <ul>
          <li>20+ Components</li>
          <li>TypeScript Support</li>
          <li>Material Design Inspired</li>
        </ul>
      </Accordion>
    </div>
  );
};

🎨 Theming

All components support theming through styled-components ThemeProvider:

import React from 'react';
import { ThemeProvider } from 'styled-components';
import { theme, Button } from 'unisysui';

const customTheme = {
  ...theme,
  colors: {
    ...theme.colors,
    primary: '#003134',
    accent: '#00D084',
  },
};

function App() {
  return (
    <ThemeProvider theme={customTheme}>
      <Button variant="primary">Themed Button</Button>
    </ThemeProvider>
  );
}

🔧 Advanced Usage

Individual Component Imports

For better tree-shaking, you can import components individually:

import Button from 'unisysui/components/Button';
import Input from 'unisysui/components/Input';

Custom Styling

import styled from 'styled-components';
import { Button } from 'unisysui';

const CustomButton = styled(Button)`
  background: linear-gradient(45deg, #003134 30%, #00D084 90%);
  border-radius: 8px;
  padding: 12px 24px;
`;

🎯 Toast Types & Colors

The Toaster component supports 4 types with specific colors:

• Success: #A6F5D6 - For successful operations
• Failed: #FAADAC - For error messages
• Attention: #FFEBAD - For warnings
• Info: #CCFFFF - For informational messages

📱 Required Providers

Some components require specific providers:

ToasterProvider (Required for Toaster)

import { ToasterProvider, Toaster } from 'unisysui';

function App() {
  return (
    <ToasterProvider>
      {/* Your app */}
      <Toaster />
    </ToasterProvider>
  );
}

LocalizationProvider (Required for DatePicker)

import { LocalizationProvider, AdapterNativeDate, DatePicker } from 'unisysui';

function App() {
  return (
    <LocalizationProvider dateAdapter={AdapterNativeDate}>
      <DatePicker />
    </LocalizationProvider>
  );
}

🌟 Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Internet Explorer 11+

📖 API Reference

Button Props

interface ButtonProps {
  variant?: 'primary' | 'secondary' | 'tertiary';
  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
  disabled?: boolean;
  onClick?: () => void;
  children: React.ReactNode;
}

Input Props

interface InputProps {
  label?: string;
  placeholder?: string;
  value?: string;
  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
  type?: string;
  disabled?: boolean;
  error?: string | boolean;
  helperText?: string;
  fullWidth?: boolean;
  startIcon?: React.ReactNode;
  endIcon?: React.ReactNode;
}

Checkbox Props

interface CheckboxProps {
  checked?: boolean;
  indeterminate?: boolean;
  disabled?: boolean;
  label?: string;
  onChange?: (checked: boolean) => void;
  error?: boolean;
}

🚀 Getting Started Templates

Basic Form

import React, { useState } from 'react';
import { 
  Input, 
  Button, 
  Checkbox, 
  Dropdown, 
  ToasterProvider, 
  Toaster, 
  useToaster 
} from 'unisysui';

const ContactForm = () => {
  const { addToast } = useToaster();
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: '',
    subscribe: false,
    category: ''
  });

  const categories = [
    { value: 'support', label: 'Support' },
    { value: 'sales', label: 'Sales' },
    { value: 'feedback', label: 'Feedback' }
  ];

  const handleSubmit = () => {
    if (!formData.name || !formData.email) {
      addToast({
        type: 'failed',
        title: 'Validation Error',
        message: 'Please fill in all required fields.',
        duration: 5000
      });
      return;
    }

    addToast({
      type: 'success',
      title: 'Form Submitted!',
      message: 'Thank you for your message.',
      duration: 5000
    });
  };

  return (
    <div style={{ maxWidth: '500px', margin: '0 auto', padding: '20px' }}>
      <h2>Contact Us</h2>
      
      <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
        <Input
          label="Full Name *"
          placeholder="Enter your name"
          value={formData.name}
          onChange={(e) => setFormData(prev => ({ ...prev, name: e.target.value }))}
          fullWidth
        />
        
        <Input
          label="Email Address *"
          type="email"
          placeholder="Enter your email"
          value={formData.email}
          onChange={(e) => setFormData(prev => ({ ...prev, email: e.target.value }))}
          fullWidth
        />
        
        <Dropdown
          label="Category"
          placeholder="Select a category"
          options={categories}
          value={formData.category}
          onChange={(category) => setFormData(prev => ({ ...prev, category }))}
          width="100%"
        />
        
        <Checkbox
          label="Subscribe to newsletter"
          checked={formData.subscribe}
          onChange={(subscribe) => setFormData(prev => ({ ...prev, subscribe }))}
        />
        
        <Button variant="primary" onClick={handleSubmit}>
          Submit Form
        </Button>
      </div>
    </div>
  );
};

function App() {
  return (
    <ToasterProvider>
      <ContactForm />
      <Toaster />
    </ToasterProvider>
  );
}

export default App;

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

📄 License

MIT © UnisysUI Team

📞 Support

• NPM Package: https://www.npmjs.com/package/unisysui
• GitHub Issues: Report bugs or request features
• Documentation: Full component documentation
• Email: [email protected]

Made with ❤️ by the UnisysUI team