0.2.8 • Published 10 months ago

doom-ui v0.2.8

Weekly downloads
-
License
ISC
Repository
-
Last release
10 months ago

Doom UI

Doom UI is a small UI library published for training purposes. This library provides a set of reusable components that can be integrated into your projects.

Installation

Minimum requirements:

  • Node.js 14.17.0 or higher

To install Doom UI, use npm:

npm install doom-ui

Components examples

Button

Button

This component renders a customizable button element.

Props:

  • buttonProps (ButtonHTMLAttributes): Optional. Additional properties to be applied to the button element.
  • children (string): Required. The text or elements to be displayed inside the button.
  • onClick (() => void): Optional. Function to be called when the button is clicked.
  • type (ButtonHTMLAttributes"type"): Optional. Specifies the type of the button. Default is "button".
<Button
type="submit"
buttonProps={{
    disabled: isSubmitDisabled,
}}
>
Save
</Button>

Input

Input

This component renders a customizable input element.

Props:

  • error (string): Optional. The error message to be displayed below the input.
  • id (string): Optional. The id of the input element.
  • inputProps (InputHTMLAttributes): Optional. Additional properties to be applied to the input element.
  • label (string): Optional. The label to be displayed above the input.
  • type (string): Optional. Specifies the type of the input. Default is "text".
  • endAdornment (ReactNode): Optional. The element to be displayed at the end of the input.
<Input
    id="last-name"
    label="Last Name"
    type="text"
    inputProps={{
        onChange: (e) => setValue("lastName", e.target.value),
    }}
    error={formState.errors["lastName"]?.message}
/>

DatePicker

DatePicker

This component renders a customizable date picker element. (Using Input component internally)

Props:

  • error (string): Optional. The error message to be displayed below the input.
  • id (string): Optional. The id of the input element.
  • inputProps (InputHTMLAttributes): Optional. Additional properties to be applied to the input element.
  • label (string): Optional. The label to be displayed above the input.
  • endAdornment (ReactNode): Optional. The element to be displayed at the end of the input.
<DatePicker
    id="start-date"
    label="Start Date"
    inputProps={{
        onChange: (date) => setValue("startDate", date),
    }}
    error={formState.errors["startDate"]?.message}
/>

Dialog

Dialog

This component renders a customizable dialog element.

Props:

  • children (ReactNode): Required. The content to be displayed inside the dialog.
  • closeOnOverlayClick (boolean): Optional. Specifies whether the dialog should be closed when the overlay is clicked.
  • open (boolean): Required. Specifies whether the dialog is open.
  • onClose (() => void): Required. Function to be called when the dialog is closed.
const ConfirmationDialog: FC<Props> = ({ open, onClose }) => {
  return (
    <Dialog open={open} onClose={onClose} closeOnOverlayClick>
      <div className="p-4">
        <h2 className="text-xl font-semibold">Dialog Title</h2>
        <p className="text-sm">Dialog content goes here.</p>
      </div>
    </Dialog>
  );
};

Select

Select

This component renders a customizable select element.

Props:

  • id (string): Optional. The id of the select element.
  • onChange ((e: ChangeEvent) => void): Optional. Function to be called when the select value changes.
  • options (SelectOption[]): Required. The options to be displayed in the select element.
  • inputProps (SelectHTMLAttributes): Optional. Additional properties to be applied to the select element.
  • label (string): Optional. The label to be displayed above the select element.
  • error (string): Optional. The error message to be displayed below the select element.

SelectOption:

type SelectOption = {
    value: string;
    label: string;
};
<Select
    id="showEntries"
    onChange={(e) => onSelectChange(e.target.value)}
    options={[
        { value: "10", label: "10" },
        { value: "20", label: "20" },
        { value: "50", label: "50" },
        { value: "100", label: "100" },
    ]}
/>

Table

Table

This component renders a customizable table element. Uses a react context to manage the state of the table.

Props:

  • columns (Column[]): Required. The columns to be displayed in the table.
  • rows (Row[]): Required. The rows to be displayed in the table.
  • enablePagination (boolean): Optional. Specifies whether pagination should be enabled.
  • enableSearch (boolean): Optional. Specifies whether search should be enabled.
  • isLoading (boolean): Optional. Specifies whether the table is loading.
  • title (string): Optional. The title to be displayed above the table.

Column:

type TableColumnType = {
    key: string;
    label: string;
};

Row:

type TableRowType = {
    [key: string]: TableRowValue;
};

type TableRowValue = {
    value: string;
    hide?: boolean;
};
const columns: TableColumnType[] = [
    { key: "name", label: "Name" },
    { key: "email", label: "Email" },
    { key: "role", label: "Role" },
];

const rows: TableRowType[] = [
    {
        name: { value: "John Doe" },
        email: { value: "john.doe@mail.com", hide: true },
        role: { value: "Admin" },
    },
    {
        name: { value: "Jane Doe" },
        email: { value: "jane.doe@mail.com", hide: true },
        role: { value: "User" },
    },
];

return <Table
    columns={columns}
    rows={rows}
    enablePagination
    enableSearch
    isLoading={isFetchingEmployees}
    title="Current Employees"
/>

Contact

For any questions or feedback, please open an issue on our GitHub repository.

0.1.96

10 months ago

0.1.97

10 months ago

0.1.98

10 months ago

0.1.99

10 months ago

0.1.90

10 months ago

0.1.91

10 months ago

0.1.92

10 months ago

0.1.93

10 months ago

0.1.94

10 months ago

0.1.95

10 months ago

0.1.85

10 months ago

0.1.86

10 months ago

0.1.87

10 months ago

0.1.88

10 months ago

0.1.89

10 months ago

0.1.81

10 months ago

0.1.82

10 months ago

0.1.83

10 months ago

0.1.84

10 months ago

0.1.0

10 months ago

0.1.2

10 months ago

0.1.1

10 months ago

0.1.8

10 months ago

0.1.7

10 months ago

0.1.4

10 months ago

0.1.3

10 months ago

0.1.6

10 months ago

0.1.5

10 months ago

0.0.16

5 years ago

0.2.1

10 months ago

0.2.0

10 months ago

0.2.7

10 months ago

0.2.6

10 months ago

0.2.8

10 months ago

0.2.3

10 months ago

0.2.2

10 months ago

0.2.5

10 months ago

0.2.4

10 months ago

0.0.15

5 years ago

0.0.13

5 years ago

0.0.14

5 years ago

0.0.12

5 years ago

0.0.11

5 years ago

0.0.10

5 years ago

0.0.9

5 years ago

1.0.2

5 years ago

0.0.3

5 years ago

0.0.8

5 years ago

0.0.5

5 years ago

0.0.4

5 years ago

0.0.7

5 years ago

0.0.6

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago