asayyex-ui v1.0.16

Asayyex UI

This library contains components require to build a beautiful React App faster and better. We are planning to include components that are not available in the current UI Libraries.

Installation

npm:

npm install asayyex-ui

yarn:

yarn add asayyex-ui

Getting started with Asayyex UI

Here is an example of a basic app using Asayyex UI's Button component:

import React from 'react';
import { Button } from 'asayyex-ui';

function App() {
  return <Button variant="contained">Hello World</Button>;
}

Try changing the variant to outlined.

Components Available

All the available components are listed down here. If you don't see any component you want. Don't worry we are working on it.

1. Accordion
2. Button
3. Checkbox
4. Chip
5. DatePicker
6. Drawer
7. drawer
8. Select
9. Spinner
10. Switch
11. TextField
12. TimePicker

Accordion

Here is an example of Accordion

import React from 'react';
import { Accordion } from 'asayyex-ui';

function App() {
  return <Accordion title="Accordion Header">
  Accordion body
  </Accordion>;
}

Available Props

Button

Here is an example of Button

import React from 'react';
import { Button } from 'asayyex-ui';

function App() {
  return <Button variant="contained">
  Contained Button
  </Button>;
}

Available Props

Checkbox

Here is an example of Checkbox:

import React from 'react';
import { Checkbox } from 'asayyex-ui';

function App() {
  const handleCheckChange = (event) => {
    console.log('Checkbox checked:', event.target.checked);
  };

  return (
    <div>
      <Checkbox
        label="Checkbox Label"
        size="md"
        onCheckChange={handleCheckChange}
        defaultChecked={false}
        isDisabled={false}
        isChecked={false}
        error={false}
        name="checkboxInput"
      />
    </div>
  );
}

Available Props

Chip

Here is an example of Chip:

import React from 'react';
import { Chip } from 'asayyex-ui';

function App() {
  const handleDelete = (event) => {
    console.log('Chip deleted:', event);
  };

  return (
    <Chip
      size="md"
      variant="contained"
      onDelete={handleDelete}
      deleteIcon={<DeleteIcon />}
      avatar={<Avatar src={avatarImage} alt="Avatar" />}
      title="Example Chip"
      isClickable={true}
    />
  );
}

Available Props

DatePicker

Here is an example of DatePicker

import React from 'react';
import { DatePicker } from 'asayyex-ui';

function App() {
  const handleDateChange = (date) => {
    console.log('Selected date:', date);
  };

  return (
    <div>
      <DatePicker
        label="Select Date"
        placeholder="Choose a date"
        value={new Date()}
        onDateChange={handleDateChange}
        dateFormat="DD/MM/YYYY"
        wrapperClassName="datepicker-wrapper"
        labelClassName="datepicker-label"
        inputClassName="datepicker-input"
        iconClassName="datepicker-icon"
        errorClassName="datepicker-error"
        wrapperStyle={{ marginBottom: '10px' }}
        labelStyle={{ color: 'blue' }}
        inputStyle={{ border: '1px solid black' }}
        iconStyle={{ fontSize: '20px' }}
        errorStyle={{ color: 'red' }}
        minDate={new Date(2023, 0, 1)}
        maxDate={new Date(2023, 11, 31)}
      />
    </div>
  );
}

export default App;

Available Props

Drawer

Here is an example of Drawer:

import React, { useState } from 'react';
import { Drawer } from 'asayyex-ui';

function App() {
  const [open, setOpen] = useState(false);

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <div>
      <button onClick={() => setOpen(true)}>Open Drawer</button>
      <Drawer
        open={open}
        onClose={handleClose}
        size="md"
        position="right"
        title="Drawer Title"
        closeOnOverlayClick={true}
      >
        <p>Drawer Content</p>
        <button onClick={handleClose}>Close Drawer</button>
      </Drawer>
    </div>
  );
}

Available Props

TextField

Here is an example of TextField

import React from 'react';
import { TextField } from 'asayyex-ui';

function App() {
  return (
      <TextField
        label="Name"
        placeholder="Enter your name"
        size="md"
        isDisabled={false}
        error={false}
        leftIcon={<i className="fa fa-user" />}
        rightIcon={<i className="fa fa-check" />}
        wrapperClassName="text-field-wrapper"
        labelClassName="label"
        inputClassName="input"
        iconClassName="icon"
        errorClassName="error"
        wrapperStyle={{ marginBottom: '10px' }}
        labelStyle={{ color: 'blue' }}
        inputStyle={{ border: '1px solid black' }}
        iconStyle={{ fontSize: '20px' }}
        errorStyle={{ color: 'red' }}
      />
  );
}

export default App;

Available Props

TimePicker

Here is an example of TimePicker

import React from 'react';
import { TimePicker } from 'asayyex-ui';

function App() {
  const handleTimeChange = (time) => {
    console.log('Selected time:', time);
  };

  return (
    <div>
      <TimePicker
        label="Select Time"
        placeholder="Choose a time"
        value="12:00 PM"
        onTimeChange={handleTimeChange}
        timeFormat="hh:mm A"
        name="timeInput"
        is24Hours={false}
        wrapperClassName="timepicker-wrapper"
        labelClassName="timepicker-label"
        inputClassName="timepicker-input"
        iconClassName="timepicker-icon"
        errorClassName="timepicker-error"
        wrapperStyle={{ marginBottom: '10px' }}
        labelStyle={{ color: 'blue' }}
        inputStyle={{ border: '1px solid black' }}
        iconStyle={{ fontSize: '20px' }}
        errorStyle={{ color: 'red' }}
      />
    </div>
  );
}

export default App;

Available Props