Hatiko-UI Docs 📙

• Installation
• Components List
• Examples
• Themes
• CLI

ℹ️ INFO
The library is still in early access.

🏠 Installation

1. Create project

npm create vite@latest

2. 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

3. 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.

| 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>

| 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"
      />

| 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"
      />

| 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

| 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

| 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

| Props | Types | Compulsory | |----------------|-----|---------------| | variant | | | | true| | text | string | false| | className | string | false|

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

| 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}
      />

| 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"
      />

| 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>

| 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>

| 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
      />

| 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

| Props | Types | Compulsory | |----------------|-----|---------------| | progress | number | true| | title | string | false| | displayProgress | boolean | false|

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

• displayProgress - displays progress percentages

| 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

| 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

| 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

| 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

| 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"
      />

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

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

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

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

| 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}
      />

| Props | Types | Compulsory | |----------------|-----|---------------| | path | string | true|

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

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

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

| 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"
                  }
            ]} 
       />

| 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",
            }} 
       />

; ;

| 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]
            }} 
       />

| 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;
      }

| 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>

| Props | Types | Compulsory | |----------------|-----|---------------| | children | ReactNode | true| | ...props | label props | false|

Types

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

| 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;
      }

| Props | Types | Compulsory | |----------------|-----|---------------| | variant | InputVariants | true| | className | string | false|

Types

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

| Props | Types | Compulsory | |----------------|-----|---------------| | text | string | true| | className | string | false|

Types

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

| 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>

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

Types

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

| Props | Types | Compulsory | |----------------|-----|---------------| | variant | TextareaItemVariants | true| | ...props | input props | false|

Types

      type TextareaItemVariants = 'primary' | 'outline';

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

| Props | Types | Compulsory | |----------------|-----|---------------| | text | string | true| | className | string | false|

Types

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

| 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>

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

Types

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

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

Types

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

| 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>

| Props | Types | Compulsory | |----------------|-----|---------------| | children | ReactNode | true| | className | string | false| | name | string | false|

Types

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

| Props | Types | Compulsory | |----------------|-----|---------------| | title | string | true| | className | string | false|

Types

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

| 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>

| 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;
      }   

| Props | Types | Compulsory | |----------------|-----|---------------| | children | ReactNode | true| | className | string | false|

Types

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

| Props | Types | Compulsory | |----------------|-----|---------------| | title | ReactNode | true| | className | string | false|

Types

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

| Props | Types | Compulsory | |----------------|-----|---------------| | children | ReactNode | true| | className | string | false|

Types

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

| 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>

| 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;
      }

| Props | Types | Compulsory | |----------------|-----|---------------| | children | ReactNode | true| | className | string | false|

Types

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

| Props | Types | Compulsory | |----------------|-----|---------------| | title | ReactNode | true| | className | string | false|

Types

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

| Props | Types | Compulsory | |----------------|-----|---------------| | children | ReactNode | true| | className | string | false|

Types

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

| 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>

| Props | Types | Compulsory | |----------------|-----|---------------| | children | ReactNode | true| | classNameShowBar | string | false| | classNameMenu | string | false|

Types

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

| 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>

| 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;
      }

| 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>

| 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;
      }

| Props | Types | Compulsory | |----------------|-----|---------------| | title | string | true| | className | string | false|

Types

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

| Props | Types | Compulsory | |----------------|-----|---------------| | children | ReactNode | true| | className | string | false|

Types

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

| 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>

| Props | Types | Compulsory | |----------------|-----|---------------| | children | ReactNode | true| | className | string | false|

Types

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

| Props | Types | Compulsory | |----------------|-----|---------------| | children | ReactNode | true| | title | string | true| | className | string | false|

Types

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

| 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>

| Props | Types | Compulsory | |----------------|-----|---------------| | children | ReactNode | true| | progress | number | true| | className | string | false|

Types

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

| Props | Types | Compulsory | |----------------|-----|---------------| | children | ReactNode | true| | className | string | false|

Types

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

| Props | Types | Compulsory | |----------------|-----|---------------| | className | string | false|

Types

      interface ProgressbarLineProps {
            className?: string;
      }

| Props | Types | Compulsory | |----------------|-----|---------------| | title | ReactNode | true| | className | string | false|

Types

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

| 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>

| 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
      }

| Props | Types | Compulsory | |----------------|-----|---------------| | className | string | false|

Types

      interface RangeMinTextProps {
            className?:string
      }

| Props | Types | Compulsory | |----------------|-----|---------------| | className | string | false|

Types

      interface RangeMaxTextProps {
            className?:string
      }

| 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>

| Props | Types | Compulsory | |----------------|-----|---------------| | children | ReactNode | true| | className | string | false| | sign | string | false|

Types

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

| 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>

| 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;
      }

| Props | Types | Compulsory | |----------------|-----|---------------| | className | string | false|

Types

      interface PaginationCellsProps{
            className?:string;
      }

| Props | Types | Compulsory | |----------------|-----|---------------| | className | string | false| | direction | right |\ left | false|

Types

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

| Props | Types | Compulsory | |----------------|-----|---------------| | className | string | false| | direction | right |\ left | false|

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>

| Props | Types | Compulsory | |------------|-------------|------------| | title | string | true | | children | ReactNode | true | | className | string | false |

Types

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

| 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>

| Props | Types | Compulsory | |------------|-------------|------------| | children | ReactNode | true | | className | string | false |

Types

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

| Props | Types | Compulsory | |------------|-------------|------------| | children | ReactNode | true | | className | string | false |

| Props | Types | Compulsory | |------------|-------------|------------| | children | ReactNode | true | | className | string | false |

| 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

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

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

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

| 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