GitHub - Meow-Double/Hatiko-UI: https://www.npmjs.com/package/hatiko-ui

Hatiko-UI Docs 📙

Installation
Components List
Examples
Themes
CLI

**Hatiko-UI** is a library of UI ready components for React. It contains components as well as styles that are expressed using css modules. In addition, there is a CLI that allows you not to pull everything into the project, but only the necessary part. The main feature is that the components are not imported directly from the library, but a folder with ready components is created. Thanks to this you can always customize them by changing the code and styles and create your own ready-made Ui libraries based on it.

ℹ️ INFO
The library is still in early access.

🏠 Installation

Create project

npm create vite@latest

Library installation (can be skipped)

npm install -D hatiko-ui

Install the library as a dev dependency and then use the CLI

npm install -g hatiko-ui

You can install the library globally. This way you don't have to install the library in your project all the time

Using the CLI

hatiko-ui add Button

Detailed information about all commands can be found in the CLI section

npx hatiko-ui add Button

If you don't want to install the library, you can use npx

📃 Component List

A table of components is provided below. There are also designations such as:

Predominant ✅
Absent ❌
In development 🛠️
Covered by tests 🧪
Stories 📕
Old implementation 🗝️

There are also options for compound and uncompound components

Component	Status	Variants	Availability
Button	✅	`Uncompound` \| `Compound`	🧪📕
Input	✅	`Uncompound` \| `Compound`	🧪📕
Textarea	✅	`Uncompound` \| `Compound`	🧪📕
Checkbox	✅	`Uncompound` \| `Compound`	🧪📕
Radio	✅	`Uncompound`\| `Compound`	🧪📕
Modal	✅	`Uncompound` \| `Compound`	🧪📕
Drawer	✅	`Uncompound` \| `Compound`	🧪📕
Badge	✅	`Uncompound`	🧪📕
Select	✅	`Uncompound` \| `Compound`	🧪📕
Dropdown	✅	`Uncompound`\| `Compound`	🧪📕
Typography	✅	`Uncompound`	🧪📕
Linkify	✅	`Uncompound`	🧪📕
Confirm	✅	`Uncompound`\| `Compound`	🧪📕
Accordion	✅	`Uncompound`\| `Compound`	🧪📕
Progressbar	✅	`Uncompound`\| `Compound`	🧪📕
Range	✅	`Uncompound`\| `Compound🗝️`	🧪📕
Breadcrumbs	✅	`Uncompound`\| `Compound`	🧪📕
Pagination	✅	`Uncompound`\| `Compound`	🧪📕
FileUpload	✅	`Uncompound`	🧪📕
ImagePopup	✅	`Uncompound`	🧪📕
Tooltip	✅	`Uncompound`	🧪📕
InputOTP	✅	`Uncompound`	🧪📕
Toast	✅	`Uncompound`	🧪📕
Avatar	✅	`Uncompound`	🧪📕
Switch	✅	`Uncompound`	🧪📕
Navigation Menu	✅	`Uncompound`\| `Compound`	🧪📕
Tabs	✅	`Uncompound`	🧪📕
Table	✅	`Uncompound`\| `Compound`	🧪📕

📚 Examples

Here are examples of using components with descriptions of their props. Each component has several use cases, depending on which props it contains.

Details

Uncompound components

Button

Props	Types	Compulsory
Children	`primary` \| `outline`	true
variant	`primary` \| `outline`	true
startIcon	`ReactNode`	false
endIcon	`ReactNode`	false
loading	`ReactNode`	false
...props	`button props`	false

      <Button
          variant='primary'
          onClick={onAddTask}
          endIcon={<PluseIcon />}
          disabled
      >
         Your text...
      </Button>

Input

Props	Types	compulsory
variant	`primary` \| `outline`	true
label	`string`	false
error	`string`	false
endIcon	`ReactNode`	false
...props	`input props`	false

      <Input
          variant='primary'
          onChange={handleValue}
          label="username"
          error="This field must be filled in"
      />

Textarea

Props	Types	Compulsory
variant	`primary` \| `outline`	true
label	`string`	false
error	`string`	false
...props	`input props`	false

      <Textarea
          variant='primary'
          onChange={handleValue}
          label="About us"
          error="This field must be filled in"
      />

Checkbox

Props	Types	Compulsory
label	`string`	false
className	`string`	false
getCheckboxState	`(state: boolean) => void`	false
...props	`input props`	false

      <Checkbox
          label={data.name}
          className="checkbox_custom"
          getCheckboxState={onActiveCheckbox}
      />

getCheckboxState - function that returns boolean type, depending on the checkbox activity

Modal

Props	Types	Compulsory
children	`ReactNode`	true
classNameOverlay	`string`	false
classNameBody	`string`	false
title	`string`	false
closeBtn	`boolean`	false
isOpen	`boolean`	true
closeModal	`() => void`	true
lazy	`boolean`	false

      <Modal
          isOpen={isOpenModal}
          closeModal={onCloseModal}
          title="Active users list"
          lazy
      >
          <UserList />
          ...
      </Modal>

lazy - a component with this parameter will not be embedded in the tree house during rendering until the component is processed

Drawer

Props	Types	Compulsory
children	`ReactNode`	true
classNameOverlay	`string`	false
classNameBody	`string`	false
title	`string`	false
closeBtn	`boolean`	false
isOpen	`boolean`	true
closeDrawer	`() => void`	true
lazy	`boolean`	false

      <Drawer
          isOpen={isOpenModal}
          closeDrawer={onCloseDrawer}
          title="Active users list"
          lazy
      >
          <UserList />
          ...
      </Drawer>

lazy - a component with this parameter will not be embedded in the tree house during rendering until the component is processed

Badge

Props	Types	Compulsory
variant	\| \|	true
text	`string`	false
className	`string`	false

      <Badge
          text={data.orderStatus}
          variant="success"
      />

Select

Props	Types	Compulsory
items	`string[]`	true
classNameMenu	`string`	false
classNameShowBar	`string`	false
getActiveItem	`(value: string) => void`	false

      <Select
          items={["Item 1", "Item 2", "Item 3", "Item 4"]}
          classNameShowBar="select_bar"
          getActiveItem={onGetActiveItem}
      />

Dropdown

Props	Types	Compulsory
items	`Array<{link:string, text:string, id:number \| string}>`	true
title	`string`	true
classNameMenu	`string`	false
classNameShowBar	`string`	false

      <Drowdown
          title="Food menu"
          items={[
            {
                id:1,
                text:"Pizzas",
                link:"/menu/pizzas"
            },
            {
                id:2,
                text:"Desserts",
                link:"/menu/desserts"
            }
          ]}
          classNameShowBar="dropdown_bar"
      />

Typography

Props	Types	Compulsory
children	`ReactNode`	true
variant	`regular_16` \| `medium_16` \| `bold_16` \| `regular_24` \| `medium_24` \| `bold_24`	true
tag	`h1` \| `h2` \| `h3` \| `h4` \| `h5` \| `h6` \| `div` \| `p` \| `span`	true

      <Typography
          variant="bold_24"
          tag="h1"
      >
          Title typography
      </Typography>

Linkify

Props	Types	Compulsory
children	`string`	true

      <Linkify>
          Go to the website: https://github.com/Meow-Double
      </Linkify>

Linkify - a component that accepts text, and if links are encountered in the text, they will be replaced by an html tag <a href=“...”>...</a>

Linkify

Props	Types	Compulsory
title	`string`	true
classNameOverlay	`string`	false
classNameBody	`string`	false
getAnswer	`(answer: boolean) => void`	true
isOpen	`boolean`	true
closeWindow	`() => void`	true
lazy	`boolean`	false

      <Confirm 
            title="Do you use a hatiko-ui?"
            isOpen={isOpen}
            closeWindow={closeWindow}
            getAnswer={onGetAnswer}
            lazy
      />

Accordion

Props	Types	Compulsory
items	`Array<{title:string, text:string, id:number \| string }>`	true
classNameText	`string`	false
classNameTitle	`string`	false
toggle	`boolean`	false

      <Accordion 
             items={[
                {
                id:1,
                title:"What is hatiko-ui?",
                text:"This is an unpopular ui component library for react, which is designed to make it easier to write your own ui components and speed up the development process."
                },
                {
                id:2,
                title:"Desserts",
                text:"/menu/desserts"
                }
            ]}
            classNameTitle="accrodion_class"
            toggle
      />

toggle - allows you to not close previous accordion tabs that have been opened

Progressbar

Props	Types	Compulsory
progress	`number`	true
title	`string`	false
displayProgress	`boolean`	false

      <Progressbar
            progress={45}
            title="Test covered"
            displayProgress
      />

displayProgress - displays progress percentages

Range

Props	Types	Compulsory
defaultValue	`number`	false
min	`number`	false
max	`number`	false
step	`number`	false
getCurrentValue	`(value: number) => void`	false

      <Range
            defaultValue={50}
            step={10}
            getCurrentValue={onGetValue}
      />

getCurrentValue - gets the current value of range
step - default:1
min - default:1
max - default:100

Breadcrumbs

Props	Types	Compulsory
items	`Array<{label:string, path:string}>`	true
sign	`number`	false

      <Breadcrumbs
            items={[
                  {
                        label:"Menu",
                        path:"/menu",
                  },
                  {
                        label:"pizza",
                        path:"/menu/pizza"
                  }
            ]}
            sign="/"
      />

sign - default:/

ℹ️ INFO For this component you need to install the library react-router-dom

Pagination

Props	Types	Compulsory
page	`number`	true
totalPage	`number`	true
siblings	`number`	true
setPages	`(value: number) => void`	true

      <Pagination
            page={4}
            totalPage={10}
            siblings={1}
            setPages={(value) => setValue(value)}
      />

page - сurrent page (active page)
totalPage - total number of pages
siblings - range of visible pagination pages
setPages - a function that takes as an argument a value - the page that will be changed (most often useState)

ℹ️ INFO
Built-in utilities are used, don't forget to add them to the project when you use this component

FileUpload

Props	Types	Compulsory
getFiles	`number`	true
className	`number`	false
fileAccept	`number`	false

      <FileUpload
            className="upload_class"
            fileAccept=".png, .jpg, .jpeg"
            setPages={(files) => setFiles(files)}
      />

fileAccept - specify, comma separated, the file formats that will be allowed to be selected

ImagePopup

Props	Types	Compulsory
images	`string[]`	true
isOpen	`boolean`	true
closePopup	`() => void`	true
classNameOverlay	`string`	false
classNameImages	`string`	false

      <ImagePopup
            images=[ImageFirst, ImageSecond, ImageThird]
            isOpen={isOpen}
            closePopup={onClosePopup}
            classNameImages="images_class"
      />

Tooltip

Props	Types	Compulsory
children	`ReacNode`	true
title	`string`	true
className	`() => void`	false

      <Tooltip
            title="It's a tooltip component"
            isOpen={isOpen}
      >
            Tooltip component
      </Tooltip>

InputOTP

Props	Types	Compulsory
getValue	`(value: string) => void`	true
length	`number`	false
className	`string`	false

      <InputOTP
            className="input-otp_class"
            getValue={getInputValue}
            length={6}
      />

Toast

Props	Types	Compulsory
toastList	`Array<ToastListTypes>`	true
clearToasts	`(toasts: ToastListTypes[]) => void`	true
position	`PositionTypes`	false
durationDelete	`number`	false

Types

      type ToastVariants = 'success' | 'danger' | 'info' | 'warning';

      type PositionTypes = 'bottom-right';

      type ToastListTypes = {
            id: number;
            title?: string;
            description: string;
            variant: ToastVariants;
      };

Toast

      <Toast
            toastList={[{
                  id:1,
                  variant:"success",
                  description:"This is a toast component"
            }]}
            clearToasts={getInputValue}
            durationDelete={3000}
      />

- **durationDelete** - The default will be 2000 milliseconds

Avatar

Props	Types	Compulsory
path	`string`	true

      <Avatar path="./hatiko-ui/avatar.png" />

- **path** - Path to the image file

Switch

Props	Types	Compulsory
getState	`(value: boolean) => void`	false
className	`string`	false
checked	`boolean`	false

      <Switch getState={value => setState(value)} checked />

Navigation Menu

Props	Types	Compulsory
items	`NavigationMenuItem[]`	true
title	`string`	true
className	`string`	false

Types

      type NavigationMenuItem = {
            id: number | string;
            text: string;
            path: string;
      };

NavigationMenu

      <NavigationMenu
            items={[
                  {
                        id:1,
                        text:"item1",
                        path:"/item1"
                  },
                     {
                        id:2,
                        text:"item2",
                        path:"/item2"
                  },
                     {
                        id:2,
                        text:"item2",
                        path:"/item2"
                  }
            ]} 
       />

Tabs

Props	Types	Compulsory
schema	`T`	true
className	`string`	false
classNameContent	`string`	false

Types

      export interface TabsProps<T> {
            schema: T;
            className?: string;
            classNameContent?: string;
      }

      //T extends Record<String, ReactNode>

Tabs

      <Tabs
            items={{
                  hatikoUi:"This library is hatikoUI",
                  Author:"This is text about author",
            }} 
       />

Table

; ;

Props	Types	Compulsory
schema	`T`	true
className	`string`	false

Types

      export interface TableProps<T> {
            schema: T;
            className?: string;
      }

      //T extends Record<String, ReactNode[]>

Tabs

      <Table
            items={{
                  row1:["column1", 2, 3],
                  row2:["column1", null, "column3"],
                  row3:["column1", "column2", 2]
            }} 
       />

Details

Compound components

Button

ButtonCompound

Props	Types	Compulsory
children	`ReactNode`	true
variant	`ButtonPropsVariants`	true
...props	`button props`	false

Types

      type ButtonPropsVariants = 'primary' | 'outline';

      interface ButtonProps extends ComponentProps<'button'> {
            children: ReactNode;
            variant: ButtonPropsVariants;
      }

ButtonIcon

Props	Types	Compulsory
icon	`ReactNode`	true

Types

      interface ButtonIconProps {
            icon: ReactNode;
      }

Button Example 1

      <ButtonCompound>
            <span>Search</span>
            <ButtonIcon icon={<SearchIcon />}>
      </ButtomCompound>

Button Example 2

      <ButtonCompound>
            <ButtonIcon icon={<FindIcon />}>
            <span>Find</span>
      </ButtomCompound>

Button Example 3

      <ButtonCompound>
           loading...
      </ButtomCompound>

Input

InputCompound

Props	Types	Compulsory
children	`ReactNode`	true
...props	`label props`	false

Types

      interface InputCompoundProps extends ComponentProps<'label'> {
            children: ReactNode;
      }

InputItem

Props	Types	Compulsory
variant	`InputVariants`	true
error	`boolean`	false
...props	`input props`	false

Types

      type InputItemVariants = 'primary' | 'outline';

      interface InputItemProps extends ComponentProps<'input'> {
            variant: InputItemVariants;
            error?: boolean;
      }

InputGroup

Props	Types	Compulsory
variant	`InputVariants`	true
className	`string`	false

Types

      interface InputGroupProps {
            children: ReactNode;
            className?: string;
      }

InputText

Props	Types	Compulsory
text	`string`	true
className	`string`	false

Types

      interface InputTextProps {
            text: string;
            className?: string;
      }

InputErrorTex

Props	Types	Compulsory
text	`string`	true
className	`string`	false

Types

      interface InputErrorTextProps {
            text: string;
            className?: string;
      }

Input Example 1

      <InputCompound>
            <InputText text="username"/>
            <InputItem error={!!error.message.text} variant="primary"/>
            <InputErrorText text={error.message.text}>
      </InputCompound>

Input Example 2

      <InputCompound>
            <InputGroup>
                  <InputItem variant="outline"/>
                  <SearchIcon />
            </InputGroup>
      </InputCompound>

Textarea

InputCompound

Props	Types	Compulsory
children	`ReactNode`	true
className	`string`	false
...props	`label props`	false

Types

      interface InputCompoundProps extends ComponentProps<'label'> {
            children: ReactNode;
      }

TextareaItem

Props	Types	Compulsory
variant	`TextareaItemVariants`	true
...props	`input props`	false

Types

      type TextareaItemVariants = 'primary' | 'outline';

      interface TextareaItemProps extends ComponentProps<'textarea'> {
            variant: TextareaItemVariants;
      }

TextareaText

Props	Types	Compulsory
text	`string`	true
className	`string`	false

Types

      interface TextareaTextProps {
            text: string;
            className?: string;
      }

TextareaErrorText

Props	Types	Compulsory
text	`string`	true
className	`string`	false

Types

      interface TextareaErrorTextProps {
            error: string;
            className?: string;
      }

Textarea Example 1

      <TextareaCompound>
            <TextareaText text="about us"/>
            <TextareaItem error={!!error.message.text} variant="primary"/>
      </TextareaCompound>

Textarea Example 2

      <TextareaCompound>
            <TextareaText text="about us"/>
            <TextareaItem error={!!error.message.text} variant="outline"/>
            <TextareaErrorText text={error.message.text}>
      </TextareaCompound>

Checkbox

CheckboxCompound

Props	Types	Compulsory
children	`ReactNode`	true
className	`string`	false
...props	`label props`	false

Types

      interface CheckboxCompoundProps extends ComponentProps<'label'> {
            children:ReactNode;
            className?: string;
      }

CheckboxItem

Props	Types	Compulsory
getCheckboxState	`(state: boolean) => void`	true

Types

      interface CheckboxItemProps extends ComponentProps<'input'> {
            getCheckboxState: (state: boolean) => void;
      }

CheckboxText

Props	Types	Compulsory
text	`string`	true
className	`string`	false

Types

      interface CheckboxTextProps {
            text: string;
            className?: string;
      }

Checkbox Example 1

      <CheckboxCompound>
            <CheckboxItem getCheckboxState={getValue}/>
      </CheckboxCompound>

Checkbox Example 2

       <CheckboxCompound>
            <CheckboxItem getCheckboxState={getValue}/>
            <CheckboxText text="checkbox label"/>
      </CheckboxCompound>

Radio

RadioCompound

Props	Types	Compulsory
children	`ReactNode`	true
className	`string`	false
name	`string`	false

Types

      interface RadioCompoundProps {
            children: ReactNode;
            className?: string;
            name?: string;
      }

RadioTitle

Props	Types	Compulsory
title	`string`	true
className	`string`	false

Types

      interface RadioTitleProps {
            title: string;
            className?: string;
      }

RadioItem

Props	Types	Compulsory
type	`radio`	false
...props	`input props`	false

Types

      type RadioItemProps = ComponentProps<'input'>;

Radio Example 1

      <RadioCompound>
            <RadioItem />
      </RadioCompound>

Radio Example 2

        <RadioCompound>
            <RadioItem />
            <RadioTitle title="Radio element" />
      </RadioCompound>

Modal

ModalCompound

Props	Types	Compulsory
children	`ReactNode`	true
classNameOverlay	`string`	false
classNameBody	`string`	false
isOpen	`boolean`	true
closeModal	`() => void`	true
lazy	`boolean`	false

Types

      interface ModalCompoundProps {
            children: ReactNode;
            classNameOverlay?: string;
            classNameBody?: string;
            isOpen: boolean;
            closeModal: () => void;
            lazy?: boolean;
      }

ModalHeader

Props	Types	Compulsory
children	`ReactNode`	true
className	`string`	false

Types

      interface ModalHeaderProps {
            children: ReactNode,
            className?:string
      }

ModalTitle

Props	Types	Compulsory
title	`ReactNode`	true
className	`string`	false

Types

      interface ModalTitleProps {
            title: ReactNode,
            className?:string;
      }

ModalContent

Props	Types	Compulsory
children	`ReactNode`	true
className	`string`	false

Types

      interface ModalContentProps {
            children: ReactNode;
            className?:string;
      }

ModalCloseBtn

Props	Types	Compulsory
className	`string`	false

Types

      interface ModalCloseBtnProps {
            className?:string;
      }

Moda Example 1

      <ModalCompound 
            isOpen={isOpen} 
            closeModal={onCloseModal}
            classNameBody="modal_body"
            lazy
      >
            <ModalContent>
                  ...content
            </ModalContent>
      </ModalCompound>

Moda Example 2

      <ModalCompound 
            isOpen={isOpen} 
            closeModal={onCloseModal}
      >
            <ModalHeader>
                  <ModalTitle title="modal_title" />
                  <ModalCloseBtn />
            </ModalHeader>
            <ModalContent>
                  ...content
            </ModalContent>
      </ModalCompound>

Drawer

DrawerCompound

Props	Types	Compulsory
children	`ReactNode`	true
classNameOverlay	`string`	false
classNameBody	`string`	false
isOpen	`boolean`	true
closeDrawer	`() => void`	true
lazy	`boolean`	false

Types

      export interface DrawerCompoundProps {
            children: ReactNode
            classNameOverlay?: string;
            classNameBody?: string;
            isOpen: boolean;
            closeDrawer: () => void;
            lazy?: boolean;
      }

DrawerHeader

Props	Types	Compulsory
children	`ReactNode`	true
className	`string`	false

Types

      interface DrawerHeaderProps {
            children: ReactNode,
            className?:string
      }

DrawerTitle

Props	Types	Compulsory
title	`ReactNode`	true
className	`string`	false

Types

      interface DrawerTitleProps {
            title: ReactNode,
            className?:string;
      }

DrawerContent

Props	Types	Compulsory
children	`ReactNode`	true
className	`string`	false

Types

      interface DrawerContentProps {
            children: ReactNode;
            className?:string;
      }

DrawerCloseBtn

Props	Types	Compulsory
className	`string`	false

Types

      interface DrawerCloseBtnProps {
            className?:string;
      }

Drawer Example 1

      <DrawerCompound 
            isOpen={isOpen} 
            closeDrawer={onCloseDrawer}
            classNameBody="drawer_title"
            lazy
      >
            <DrawerContent>
                  ...content
            </DrawerContent>
      </DrawerCompound>

Drawer Example 2

      <DrawerCompound 
            isOpen={isOpen} 
            closeDrawer={onCloseDrawer}
      >
            <DrawerHeader>
                  <DrawerTitle title="drawer_title" />
                  <DrawerCloseBtn />
            </DrawerHeader>
            <DrawerContent>
                  ...content
            </DrawerContent>
      </DrawerCompound>

Select

SelectCompound

Props	Types	Compulsory
children	`ReactNode`	true
classNameShowBar	`string`	false
classNameMenu	`string`	false

Types

      interface SelectCompoundProps {
            children: ReactNode;
            classNameShowBar?: string;
            classNameMenu?: string;
      }

SelectItem

Props	Types	Compulsory
children	`ReactNode`	true
className	`string`	false

Types

      interface SelectItemProps {
            children: string;
            className?: string;
      }

Select Example 1

      <SelectCompound 
            classNameShowBar="select_bar"
      >
         <SelectItem>Item 1</SelectItem > 
         <SelectItem>Item 2</SelectItem > 
         <SelectItem>Item 3</SelectItem > 
      </SelectCompound>

Dropdown

DropdownCompound

Props	Types	Compulsory
children	`ReactNode`	true
classNameShowBar	`string`	false
classNameMenu	`string`	false
title	`string`	true

Types

      interface DropdownCompoundProps {
            children: ReactNode;
            title: string;
            classNameShowBar?: string;
            classNameMenu?: string;
      }

DropdownItem

Props	Types	Compulsory
path	`ReactNode`	true
text	`string`	true

Types

      interface DropdownItemProps {
            path: string;
            text: string;
      }

Dropdown Example 1

      <DropdownCompound 
            classNameShowBar="select_bar"
      >
         <DropdownItem path="/item1" text="item1"/> 
         <DropdownItem path="/item2" text="item2"/> 
         <DropdownItem path="/item3" text="item3"/> 
      </DropdownCompound>

Confirm

ConfirmCompound

Props	Types	Compulsory
children	`ReactNode`	true
classNameOverlay	`string`	false
classNameBody	`string`	false
isOpen	`boolean`	true
lazy	`boolean`	false

Types

      interface ConfirmCompoundProps {
            children: ReactNode;
            classNameOverlay?: string;
            classNameBody?: string;
            isOpen: boolean;
            lazy?: boolean;
      }

ConfirmTitle

Props	Types	Compulsory
title	`string`	true
className	`string`	false

Types

      interface ConfirmTitleProps {
            title: string;
            className?: string;
      }

ConfirmButtonList

Props	Types	Compulsory
children	`ReactNode`	true
className	`string`	false

Types

      interface ConfirmButtonListProps {
            children: ReactNode;
            className?: string;
      }

ConfirmButton

Props	Types	Compulsory
type	`ConfirmButtonTypes`	true
text	`string`	false
getAnswer	`(value: boolean) => void`	true
className	`string`	false

Types

      type ConfirmButtonTypes = 'truth' | 'lies';

      interface ConfirmButtonProps {
            type: ConfirmButtonTypes;
            text?: string;
            getAnswer: (value: boolean) => void;
            className?: string;
      }

Confirm Example 1

      <ConfirmCompound
            classNameBody="confirm_body"
            isOpen={isOpen}
            lazy
      >
            <ConfirmTitle title="Do you like hatiko-ui?"/>
            <ConfirmButtonList>
                  <ConfirmButton 
                        type="truth" 
                        getAnswer={onGetValue} 
                        text="yes"
                  >
                  <ConfirmButton 
                        type="lies" 
                        getAnswer={onGetValue} 
                        text="yes"
                  >
            </ConfirmButtonList>
      </ConfirmCompound>

Accordion

AccordionCompound

Props	Types	Compulsory
children	`ReactNode`	true
className	`string`	false

Types

      interface AccordionCompoundProps {
            children: ReactNode;
            className?: string;
      }

AccordionGroup

Props	Types	Compulsory
children	`ReactNode`	true
title	`string`	true
className	`string`	false

Types

      interface AccordionGroupProps {
            children: ReactNode;
            title: string;
            className?: string;
      }

AccordionItem

Props	Types	Compulsory
title	`string`	true
className	`string`	false

Types

      interface AccordionItemProps {
            title: string;
            className?: string;
      }

Accordion Example 1

      <AccordionCompound
            classNameBody="confirm_body"
            isOpen={isOpen}
            lazy
      >
            <AccordionGroup>
                  <AccordionItem title="Select"/>
                  <AccordionItem title="Modal"/>
                  <AccordionItem title="Drawer"/>
            </AccordionGroup>
      </AccordionCompound>

Progressbar

ProgressbarCompound

Props	Types	Compulsory
children	`ReactNode`	true
progress	`number`	true
className	`string`	false

Types

      interface ProgressbarCompoundProps {
            children: ReactNode;
            progress: number;
            className?: string;
      }

ProgressbarInfoGrouop

Props	Types	Compulsory
children	`ReactNode`	true
className	`string`	false

Types

      interface ProgressbarInfoGrouopProps {
            children: ReactNode;
            className?: string;
      }

ProgressbarLine

Props	Types	Compulsory
className	`string`	false

Types

      interface ProgressbarLineProps {
            className?: string;
      }

ProgressbarTitle

Props	Types	Compulsory
title	`ReactNode`	true
className	`string`	false

Types

      interface ProgressbarTitleProps {
            title: ReactNode;
            className?: string;
      }

ProgressbarPercent

Props	Types	Compulsory
className	`string`	false

Types

      interface ProgressbarPercentProps {
            className?: string;
      }

Progressbar Example 1

      <ProgressbarCompound progress={20}>
            <ProgressbarInfoGrouop>
                  <ProgressbarTitle title="progress"/>
                  <ProgressbarPercent />
            </ProgressbarInfoGrouop>
            <PrrogressbarLine />
      </ProgressbarCompound>

Progressbar Example 2

      <ProgressbarCompound progress={20} className="progressbar">
            <PrrogressbarLine />
      </ProgressbarCompound>

Range

RangeCompound

Props	Types	Compulsory
children	`ReactNode`	true
className	`string`	false
min	`number`	false
max	`number`	false
step	`number`	false

Types

      interface RangeCompoundProps {
            children: ReactNode;
            min?:number;
            max?:number;
            step?:number;
            className?:string
      }

RangeMinText

Props	Types	Compulsory
className	`string`	false

Types

      interface RangeMinTextProps {
            className?:string
      }

RangeMaxText

Props	Types	Compulsory
className	`string`	false

Types

      interface RangeMaxTextProps {
            className?:string
      }

ProgressbarTitle

Props	Types	Compulsory
defaultValue	`number`	true
getCurrentValue	`(value: number) => void`	true
className	`string`	false

Types

      interface RangeLineProps {
            defaultValue?:number;
            getCurrentValue?: (value: number) => void;
            className?:string;
      }

Range Example 1

      <RangeCompound min={20} max={2000} step={10}>
            <RangeMinText />
            <RangeLine default={60} getCurrentValue={onGetValue}/>
            <RangeMaxText />
      </RangeCompound>

Range Example 2

        <RangeCompound className="range" >
            <RangeLine getCurrentValue={onGetValue}/>
      </RangeCompound>

Breadcrumbs

BreadcrumbsCompound

Props	Types	Compulsory
children	`ReactNode`	true
className	`string`	false
sign	`string`	false

Types

      interface BreadcrumbsCompoundProps {
            children: ReactNode;
            sign?: string;
            className?:string;
      }

RangeMinText

Props	Types	Compulsory
label	`string`	true
path	`string`	true
active	`boolean`	false
className	`string`	false

Types

      interface BreadcrumbsItem {
            label: string;
            path: string;
            active?: boolean;
            className?:string;
      }

Range Example 1

      <BreadcrumbsCompound sign="//">
            <BreadcrumbsItem label="item1" path="/item1"/>
            <BreadcrumbsItem label="item2" path="/item2"/>
            <BreadcrumbsItem label="item3" path="/item3"/>
            <BreadcrumbsItem label="item4" path="/item4" active/>
      </BreadcrumbsCompound>

Pagination

PaginationCompound

Props	Types	Compulsory
children	`ReactNode`	true
className	`string`	false
page	`number`	true
totalPage	`number`	true
siblings	`number`	true
setPages	`(value: number) => void`	true

Types

      interface PaginationCompoundProps {
            children:ReactNode;
            page:number,
            totalPage: number,
            siblings:number
            setPages:(value: number) => void;
            className?:string;
      }

PaginationCells

Props	Types	Compulsory
className	`string`	false

Types

      interface PaginationCellsProps{
            className?:string;
      }

PaginationArrow

Props	Types	Compulsory
className	`string`	false
direction	`right`	\ `left`

Types

      interface PaginationArrowProps {
            direction:"right" | "left";
            className?:string;
      }

PaginationDoubleArrow

Props	Types	Compulsory
className	`string`	false
direction	`right`	\ `left`

Types

      interface PaginationArrowProps {
            direction:"right" | "left";
            className?:string;
      }

Pagination Example 1

      <PaginationCompound 
            page={currentPage} 
            totalPage={totalPage}
            siblings={3}
            setPages={onGetValue}
            className="pagination"
      >
            <PaginationDoubleArrow  direction="left"/>
            <PaginationArrow direction="left"/>
            <PaginationCells />
            <PaginationArrow direction="right"/>
            <PaginationDoubleArrow  direction="right"/>

      </PaginationCompound>

Pagination Example 2

      <PaginationCompound 
            page={4} 
            totalPage={10}
            siblings={3}
            setPages={onGetValue}
            className="pagination"
      >
            <PaginationArrow direction="left"/>
            <PaginationCells />
            <PaginationArrow direction="right"/>

      </PaginationCompound>

Navigation Menu

NavigationMenuCompound

Props	Types	Compulsory
title	`string`	true
children	`ReactNode`	true
className	`string`	false

Types

      interface NavigationMenuCompoundProps {
            children: ReactNode;
            className?: string;
            title: string;
      }

NavigationMenuItem

Props	Types	Compulsory
children	`ReactNode`	true
path	`string`	true
className	`string`	false

Types

      interface NavigationMenuItemProps {
            children: string;
            path: string;
            className?: string;
      }

Navigation Menu Example 1

      <NavigationMenuCompound title="Menu">
            <NavigationMenuItem path="/home">Home</NavigationMenuItem>
            <NavigationMenuItem path="/about">About</NavigationMenuItem>
            <NavigationMenuItem path="/contact">Contact</NavigationMenuItem>
      </NavigationMenuCompound>

Table

TableCompound

Props	Types	Compulsory
children	`ReactNode`	true
className	`string`	false

Types

      interface TableCompoundProps {
            children: ReactNode;
            className?: string;
      }

TableBody

Props	Types	Compulsory
children	`ReactNode`	true
className	`string`	false

TableRow

Props	Types	Compulsory
children	`ReactNode`	true
className	`string`	false

TableData

Props	Types	Compulsory
children	`ReactNode`	true
className	`string`	false

Table Menu Example 1

      <TableData>
            <TableBody>
                  <TableData>
                        <TableRow>
                              Item 1
                        </TableRow>
                        <TableRow>
                              Item 2
                        </TableRow>
                        <TableRow>
                              Item 3
                        </TableRow>
                  </TableData>
                  <TableData>
                        <TableRow>
                              Item 4
                        </TableRow>
                        <TableRow>
                              Item 5
                        </TableRow>
                        <TableRow>
                              Item 6
                        </TableRow>
                  </TableData>
            </TableBody>
      </TableData>

🦎 Themes

Default

Hex color	Visual	Naming
`#69974e`		primary
`#617D52`		primary (70% opacity)
`#75a857`		primary-light
`#90b978`		primary-hover
`#90b978`		primary-disabled

Ocean

Hex color	Visual	Naming
`#64959E`		primary
`#577680`		primary (70% opacity)
`#72a6af`		primary-light
`#84c0cb`		primary-hover
`#8fcad4`		primary-disabled

New-York

Hex color	Visual	Naming
`#1f1f38`		primary
`#2D2C3F`		primary (70% opacity)
`#35355e`		primary-light
`#434376`		primary-hover
`#626288`		primary-disabled

Classic

Hex color	Visual	Naming
`#3b3b3b`		primary
`#3E3D41`		primary (70% opacity)
`#4d4c4c`		primary-light
`#636363`		primary-hover
`#878686`		primary-disabled

🚀 CLI

hatiko-ui - includes a command to automatically create components with the required directories and files

add <...arguments> - Adds the uncompound components specified as arguments to the catalog.

Example

hatiko-ui add Button Input Select

add <...arguments> --compound - Adds the compound components specified as arguments to the catalog. (The flag compound indicates that the components will be of the compound type).

Example

hatiko-ui add Button Input Modal --compound

ℹ️ INFO
When installing the components, all the necessary folders will be pulled in automatically, except for utils and auxiliary. If you wish, you can delete them, but please note that some components may use this data.

theme <theme name> - adds a folder containing the colors of a particular theme.

Example

hatiko-ui theme ocean

ℹ️ INFO
A list of all topics and colors is provided above in the table.

📁 Main catalog: `hatiko-ui`

Contains three main folders:

uncompound – contains the catalogs of the individual components and the file index.ts.
compound – contains directories of individual components and a compound file of type index.ts.
auxiliary – contains all auxiliary components.
styles – includes three files: index.css, reset.css, variables.css.
icons – contains files with icons and index.ts to export them.
utils – contains auxiliary functions and utilities.
config – contains everything necessary for storybook and tests.


uncompound/
│── Button/
│   ├── Button.tsx
│   ├── Button.module.css
│── Input/
│   ├── Input.tsx
│   ├── Input.module.css
│── Modal/
│   ├── Modal.tsx
│   ├── Modal.module.css
│── Linkify/
│   ├── Linkify.tsx
│   ├── Linkify.module.css
...
│── index.ts

compound/
│── Button/
│   ├── Button.tsx
│   ├── Button.module.css
│── Modal/
│   ├── Modal.tsx
│   ├── Modal.module.css
...
│── index.ts

auxiliary/
│── Container/
│   ├── Container.tsx
│   ├── Container.module.css
│── Spinner/
│   ├── Spinner.tsx
│   ├── Spinner.module.css
│── Protal/
│   ├── Protal.tsx
│── index.ts

config/
│── storybook/
│   │── styles/
│   │   │── index.css
│   │── decorators/
│   │   │── RouterDecorator.tsx
│   │── images/
│   │   │── image-1.jpg
│   │   │── image-2.jpg
│   │   │── image-3.jpg
│── test/
│   ├── componentRender.tsx

styles/
│── themes/
│   │── default/
│       ├── variables.css
│── index.css
│── reset.css
│── variables.css

utils/
│── common/
│   ├── range.ts
│   ├── index.ts
│── context/
│   ├── createAccurateContext.ts
│   ├── useAccurateContext.ts
│── pagination/
│   ├── paginationRange.ts
│── index.ts

icons/
│── CloseIcon.tsx
│── SearchIcon.tsx
│── index.ts

Name		Name	Last commit message	Last commit date
Latest commit History 22 Commits
.husky		.husky
.storybook		.storybook
config/vitest		config/vitest
docs/media		docs/media
hatiko-ui		hatiko-ui
public		public
src		src
.eslintrc.cjs		.eslintrc.cjs
.gitignore		.gitignore
.prettierignore		.prettierignore
.prettierrc.js		.prettierrc.js
.stylelintrc.js		.stylelintrc.js
README.md		README.md
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts
vitest.config.ts		vitest.config.ts

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Repository files navigation

Hatiko-UI Docs 📙

🏠 Installation

📃 Component List

📚 Examples

🦎 Themes

🚀 CLI

📁 Main catalog: `hatiko-ui`

About

Uh oh!

Releases

Packages

Uh oh!

Languages

Meow-Double/Hatiko-UI

Folders and files

Latest commit

History

Repository files navigation

Hatiko-UI Docs 📙

🏠 Installation

📃 Component List

📚 Examples

🦎 Themes

🚀 CLI

📁 Main catalog: hatiko-ui

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Languages

📁 Main catalog: `hatiko-ui`

Packages