IMacaron Web Basic

Basics for development in React with Tailwind

Made by Macaron

Installation

npm install imacaron-basic

You will need to import the CSS to use this lib. In your index.css add the import on the first line (every import of css before may be overridden by this lib otherwise).
To customize the theme, you will use the @layer theme directive.

@import "imacaron-basic/index.css";
/*Other imports*/

@layer theme {
    :root {
        /* Custom variable to change the theme */
    }
}

/*If you use tailwind you can use the @theme directive*/
@theme {
    /* Custom variable to change the theme*/
}

Customization

Colors

These colors are the base of the lib and are used across many components.

| Name | Variable | Default | |--------------------|----------------------------|-----------| | Primary | --color-primary | #FFB900FF | | On-Primary | --color-on-primary | #FEF3C6FF | | Primary Disabled | --color-primary-disabled | #FE9A00FF | | Secondary | --color-secondary | #00BCFFFF | | On Secondary | --color-on-secondary | #F0F9FFFF | | Secondary Disabled | --color-secondary-disabled | #0084D1FF | | Cancel | --color-cancel | #99A1AFFF | | On Cancel | --color-on-cancel | #1E2939FF | | Cancel Disabled | --color-cancel-disabled | #6A7282FF | | Danger | --color-danger | #FF637EFF | | On Danger | --color-on-danger | #FFE4E6FF | | Danger Disabled | --color-danger-disabled | #FF2056C0 | | Background | --color-background | #1C1917FF | | Text | --color-text | #FFFBEBFF |

Components

Header

The Header component provides a simple header in which you can add a title and some children. Title will be placed on the left and children on the right.
It can also work with SideBar and display a menu button to display said sidebar on mobile.

| part | variable | default | |------------|----------------|-----------| | background | --color-header | #030712FF |

SideBar

The sidebar component provides a responsive sidebar which will be hidden on mobile and work with he Header to be displayed.
You can use the useSideBar hook to have the needed state for managing it.

| part | variable | default | |-----------------|-----------------------------|-----------| | background | --color-sidebar | #030712FF | | background-fade | --color-sidebar-fade | #03071280 | | item:hover | --color-sidebar-item-hover | #101828FF | | item:active | --color-sidebar-item-active | #101828FF |

You can use SideBarItem component in SideBar children to quickly make a menu

Table

The table component is used to display data in a table. This component is pageable, sortable, and the page size is also customizable.
The component has a default theme but can be set via CSS variables.

| part | variable | default | |--------------|----------------------------|-----------| | header | --color-table-header | #171717FF | | header:hover | --color-table-header-hover | #262626FF | | row:hover | --color-table-hover | #27272AFF | | row:even | --color-table-even | #18181BFF | | row:odd | --color-table-odd | #09090BFF | | footer | --color-table-footer | #171717FF | | border | --color-table-border | #FEF3C640 | | loading | --color-table-loading | #FEF3C6FF |

To use the table component, you may use the useTable hook.

useTable<T extends StringIndexedObject>(headers: Header[], data: T[], options: useTableOptions): TableProps

interface useTableOptions {
	pageSize?: number, //The default page size
	pageSizeOptions?: number[], //The options of page size
	maxPage?: number, //The max of page (can be state)
	pageable?: boolean, //If the pagination system is active
	sortable?: boolean, //If the table is sortable
	loading?: boolean, //Loading state (can be state)
	loadingElement?: React.ReactNode, //An element to customize loading
	error?: string, //Error to display (can be state)
}

//Usage
const table = useTable(headers, dataToDisplay, /*options if needed*/);
<Table {...table}/>

Card

The card is a container with a border. You can also add a title.
The component has a default theme, but you can customize it

| Part | Variable | Default | |------------|---------------------|-----------| | Background | --color-card | #292524FF | | Border | --color-card-border | #FEF3C640 |

Utility

Array.prototype.extendTo

This function allows you to expand an array to the desired length by pushing the value you want or undefined

const array = ["Test"];
array.expandTo(8)
console.log(array) // ["Test", undefined, undefined, undefined, undefined, undefined, undefined, undefined]

const array2 = ["Test"];
array.expandTo(4, "Fill")
console.log(array) // ["Test", "Fill", "Fill", "Fill"]

Types Alias

| Type | Alias for | |---------------------|-----------------------------------------| | StringIndexedObject | {[key: string]: string} | | SetState | React.Dispatch<React.SetStateAction> |