doom-ui v0.2.8
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
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
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
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
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
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
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.
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
5 years ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago