Foxxy-package

---

Názov balíčka: foxxy-package
Popis: Tento balicek obsahuje zakladne komponenty pre vyvoj frontend vyvoja
Inštalácia: npm i foxxy-package
Licencia: MIT
Email: suchovsky.michal@gmail.com
Obsahujuce komponenty:
ButtonComponent
FormComponent
ModalComponent
OffCanvasComponent
CarouselComponent

---

Priklad pouzitia:

ButtonComponent:

  import { ButtonComponent } from 'foxxy-package';  

  <ButtonComponent.ButtonBox>
    <ButtonComponent.Button text="click" {Argumenty}/>
  </ButtonComponent.ButtonBox>

Argumenty:

Argument	Povinný	Typ	Popis
text	áno	string	Názov Button. Max. 9 znakov!
variant_btn	nie	string	default, white, dark, funny, sun, ocean
border	nie	boolean	Určuje, či má Button mať okraj
round	nie	boolean	Určuje, či má Button mať zaoblené rohy
lg	nie	boolean	Určuje, či má Button byť veľký (large)
sm	nie	boolean	Určuje, či má Button byť malý (small)

+ vsetky arg. obsahujuci element Button pre udalosti:

---

FormComponent:

  import { ButtonComponent, FormComponent } from 'foxxy-package';  

  <FormComponent.Form form_name='my Form' {Argumenty}>
    <FormComponent.FormHeader />
    <FormComponent.FormInputs {Argument pre input}/>
    <ButtonComponent.ButtonBox>
      <ButtonComponent.Button text="click me" {Argumenty pre ButtonComponent}/>
    </ButtonComponent.ButtonBox>
  </FormComponent.Form> 

Argumenty:

Argument	Povinný	Typ	Popis
form_name	áno	string	Názov Formulára.
variant_form	nie	string	default, white, dark, funny

+ vsetky arg. obsahujuci element Form pre udalosti:

Argument pre inputs ( <FormComponent.FormInputs label='my input' /> )

Argument	Povinný	Typ	Popis
label	nie	string	Label pre input

---

ModalComponent:

import { ButtonComponent, FormComponent, ModalComponent } from 'foxxy-package';  

function App() {
  const [show, setShow] = React.useState(false);
  const handleClick = (): void => {
    setShow(!show);
  };
  return (
    <div className="App">
      <div>
        <ButtonComponent.ButtonBox>
          <ButtonComponent.Button text='click me' onClick={handleClick} {Argumenty pre ButtonComponent}/>
        </ButtonComponent.ButtonBox>
      </div>
  
        <ModalComponent.Modal show={show} setShow={setShow} {Argumenty}>
          <FormComponent.Form formName='me form' {Argumenty pre FormComponent} >
            <FormComponent.FormHeader />
            <FormComponent.FormInputs {Argumenty pre FormComponent (input)}/>
          <ButtonComponent.ButtonBox>
            <ButtonComponent.Button text='exit' onClick={handleClick} {Argumenty pre ButtonComponent}/>
          </ButtonComponent.ButtonBox>
          </FormComponent.Form>
        </ModalComponent.Modal>
    </div>
  )
}
export default App

Argumenty:

Argument	Povinný	Typ	Popis
variant_mdl	nie	string	default, white, dark
show	áno	boolean	show={show}
setShow	áno	SetStateAction	setShow={setShow}

---

OffCanvasComponent:

import { ButtonComponent, OffCanvasComponent } from 'foxxy-package';  

function App() {
  const [show, setShow] = React.useState(false);
  const handleClick = (): void => {
    setShow(!show);
  };
  return (
    <div className="App">
      <div>
        <ButtonComponent.ButtonBox>
          <ButtonComponent.Button text='click me' onClick={handleClick} {Argumenty pre ButtonComponent}/>
        </ButtonComponent.ButtonBox>
      </div>

      <OffCanvasComponent.OffCanvas show={show} setShow={setShow} position="left" {Argumenty}>
        <OffCanvasComponent.OffCanvasHeader>
          {textHeader}
        </OffCanvasComponent.OffCanvasHeader>
        <OffCanvasComponent.OffCanvasBody>
          {textBody}
        </OffCanvasComponent.OffCanvasBody>
        <OffCanvasComponent.OffCanvasButoonBox>
          <ButtonComponent.ButtonBox>
            <ButtonComponent.Button text='exit' onClick={handleClick} {Argumenty pre ButtonComponent}/>
          </ButtonComponent.ButtonBox>
        </OffCanvasComponent.OffCanvasButoonBox>
      </OffCanvasComponent.OffCanvas>
    </div>
  )
}
export default App

Argumenty:

Argument	Povinný	Typ	Popis
variant_offCnv	nie	string	default, white, dark
position	áno	string	left, top, right
show	áno	boolean	show={show}
setShow	áno	SetStateAction	setShow={setShow}

textHeader: Vlozte nadpis OffCanvas, typ: string
textBody: Vlozte content OffCanvas, typ: string

---

CarouselsComponent:

import { CarouselComponent } from 'foxxy-package';  

      <CarouselComponent.Carousel {Argumenty}>
        <CarouselComponent.CarouselBox>
          <CarouselComponent.CarouselItem>
            <h1>1</h1>
          </CarouselComponent.CarouselItem>
          <CarouselComponent.CarouselItem>
            <h1>2</h1>
          </CarouselComponent.CarouselItem>
          <CarouselComponent.CarouselItem>
            <h1>3</h1>
          </CarouselComponent.CarouselItem>
        </CarouselComponent.CarouselBox>
      </CarouselComponent.Carousel>

Argumenty:

Argument	Povinný	Typ	Popis
variant_crs	nie	string	default, white, dark

Pridavanie poloziek do CarouselComponentu:

  <CarouselComponent.CarouselItem>
      {elemnet type: string}
  </CarouselComponent.CarouselItem>

---

DropdownComponent:

import { DropdownComponent } from 'foxxy-package';  

    <DropdownComponent.Dropdopwn {Argumenty}>
        <DropdownComponent.DropdownBox>
            <DropdownComponent.DropdownItems {Argument items}/>
        </DropdownComponent.DropdownBox>
    </DropdownComponent.Dropdopwn>

Argumenty:

Argument	Povinný	Typ	Popis
variant_drop	nie	string	default, white, dark
drop_text	ano	string	nazov dropdown
Argument items	Povinný	Typ	Popis
----------------	-----------	------------------------------	----------------------------------------------------
href	ano	string	link pre items
name_link	ano	string	nazov items

Pridavanie poloziek do DropdownComponentu:

    <DropdownComponent.DropdownItems {Argument items} />   

---