vwapp-react-components

Componentes customizados usando o bootstrap4 de forma mais legivel em react.

Os componentes de formulário foram passados para a lib: vwapp-react-form

![NPM](https://www.npmjs.com/package/vwapp-react-components) ![JavaScript Style Guide](https://standardjs.com)

Instalação.

``bash npm install --save vwapp-react-components`

`Uso`

`jsx import React, { Fragment } from 'react'; import { FlexContainer, FlexItem as Box, Line, BreakLine } from 'vwapp-react-components'; import styled from 'styled-components';

const FlexItem = styled(Box)
background-color: green;
text-align: center;
margin: 10px;
padding: 5px;

export default () => ( 01 02 0102030405 0607080910 1112131415 1617181920 2122232425 2627282930 01 02 03 04 05 );`

`Documentação`

Além das propriedades especificas de cada componente, também pode ser inserido outras propriedades como: id, className, ...

`$3`

Componentes para facilitar o uso do flexbox.

!1

!2

!3

#### Componentes

* FlexContainer * FlexItem

#### Propriedades (FlexContainer)

As imagens estão organizados em direction row, col, e wrap respectivamente. Exceção do atributo wrap que ta organizado em false e true.

* as: Substitui a tag padrão (`

`) do component, por exemplo, ``

.
* direction: Empilha os itens horizontalmente ou verticalmente, ou seja, da esquerda para a direita ou de cima para baixo. (String - padrão: "row" - css: flex-direction).
  - row: Empilha os itens horizontalmente, ou seja, da esquerda para a direita.
    !direction row
  - col: Empilha os itens verticalmente, ou seja, de cima para baixo.
    !direction col
* wrap: Faz com que os itens ao chegar no limite passe para a próxima linha ou coluna. (Booleano - padrão: false - css: flex-wrap)
  nowrap
  !nowrap
  wrap
  !wrap
* reverse: Inverte a ordem dos itens definidas no atributo "direction" ou "wrap". Ele também inverte o alinhamento do atributo "justify" (Booleano - padrão: false - css: flex-direction e flex-wrap).
  row
  !reverse row
  col
  !reverse col
  wrap
  !reverse wrap
* justify: Alinha todos os itens do container verticalmente (col) ou horizontalmente (row). (String - padrão: "initial" - css: justify-content).
  - start: Alinha os itens no começo.
    row
    !start row
    col
    !start col
  - end: Alinha os itens no final.
    row
    !end row
    col
    !end col
  - center: Alinha os itens no centro.
    row
    !center row
    col
    !center col
  - space-around: Alinha os itens com espaçamentos ao redor deles.
    row
    !space-around row
    col
    !space-around col
  - space-between: Alinha os itens com espaçamentos entre eles.
    row
    !space-between row
    col
    !space-between col
* align: Alinha todos os itens do container verticalmente (row) ou horizontalmente (col). (String - padrão: "initial" - css: align-items ou align-content). O "align-content" é ativado se o container tiver o atributo "wrap" setado nele, ou seja, ele alinha os conjuntos de itens como um todo. Caso contrário é ativado o "align-items" que alinha os itens separadamente.
  - start: Alinha os itens no começo.
    row
    !start row
    col
    !start col
  - end: Alinha os itens no final.
    row
    !end row
    col
    !end col
  - center: Alinha os itens no centro.
    row
    !center row
    col
    !center col
  - stretch: Preenche os itens no container.
    row
    !stretch row
    col
    !stretch col
  - baseline: Alinha os itens tendo como base seu texto. Só funciona com o wrap não setado. css: "align-items".
    row
    !baseline row
    col
    !baseline col
  - space-around: Alinha os itens com espaçamentos ao redor deles. Só funciona com o wrap setado. css: "align-content".
    row
    !space-around row
    col
    !space-around col
  - space-between: Alinha os itens com espaçamentos entre eles. Só funciona com o wrap setado. css: "align-content".
    row
    !space-between row
    col
    !space-between col
#### Propriedades (FlexItem)
* order: Ordena os itens da forma que for inserido. Só é aceito valores de 1-12 e todos os itens devem ser preenchidos.
Ou seja, a lista de itens só pode ter no máximo 12 itens. (String - Opcional - css: order)
  !order
* grow: Faz o item crescer proporcionalmente em relação aos demais, preenchendo a linha. (Booleano - default: false - css: flex-grow)
  !grow
* shrink: Não deixe o item diminuir tanto quanto os outros itens. (Booleano - default: false - css: flex-shrink)
  !shrink
* length: Configura um tamanho inicial para o item em pixels. (String - Opcional - css: flex-basis).
  !length
* align: Especifica o alinhamento do item selecionado dentro do conteiner. A propriedade substitui o alinhamento do atributo "align" definido no container. (String - Opcional - css: align-self).
  - start: Alinha o item no começo.
    !start
  - end: Alinha o item no final.
    !end
  - center: Alinha o item no centro.
    !center
  - stretch: Preenche o item no container.
    !stretch
  - baseline: Alinha o item tendo como base seu texto.
    !start
#### Exemplo

`jsx 01 02

010203040506070809101112131415161718192021222324252627282930

01 02 03 04 05 );`

`$3`

Componentes relacionados a criação de paginações.

#### Componentes

* Pagination

#### Propriedades especificas:

* totalItens: Total de itens que será paginado. (Inteiro - obrigatório)

* activePage: Página ativa pelo usuário na função handlePagination. (Inteiro - obrigatório)

* itemPerPage: Quantidade de itens que aparecerá por páginas. (Inteiro - default 20)

* pageRange: Quantidade de páginas que irá aparecer no componente de cada vez. (Inteiro - default 5)

* firstPageText: Título ou Icone que ao clicar vai voltar para a primeira página. (String - default "Primeiro")

* lastPageText: Título ou Icone que ao clicar vai redirecionar para a última página. (String - default "Último")

* prevPageText: Título ou Icone que ao clicar vai voltar para a página anterior. (String - default "<<")

* nextPageText: Título ou Icone que ao clicar vai avançar para a próxima página. (String - default ">>")

* handlePagination: Função que irá tratar a paginação. (Função - Obrigatório).

#### Exemplo:

`jsx totalItens={60} itemPerPage={20} activePage={this.state.activePage} handlePagination={this.__handlePagination} />`

`Contribuir`

#### 1. Como rodar o ambiente de desenvolvimento:

Rode os dois comandos abaixo em 2 abas diferentes. O primeiro comando vai ficar observando modificações do seu pacote e o segundo comando consome essas modificações no html.

No diretorio raiz rode o npm start

`npm start`

No diretorio example rode o npm start.

`cd example npm start`

#### 2. Como instalar ou remove um pacote.

Para instalar um novo pacote tem que fazer o seguinte comando:

`npm install --save-dev nome-do-pacote`

Com ele instalado tem que coloca-lo no package.json

`json "dependencies": { "nome-do-pacote": "^versao", "...": "..." }, "peerDependencies": { "nome-do-pacote": "^versao", "...": "..." }`

Com isso, teste se esse pacote está sendo utilizado, caso não rode o npm install e reinicie os servidores.

#### 3. Publicar no npmjs

1. Crie uma conta no https://www.npmjs.com/ 2. Execute no terminal`npm login`e logar com as credenciais criadas no npmjs 3. Execute`npm publish`na pasta do projeto 4. E então use em outros projetos!

#### 4. Publicar documentação github pages

Rode o comando para criar uma pagina com a build do projeto example do seu repositório.

`npm run deploy``

#### 5. Atualizando um projeto.

Versões: MAJOR.MINOR.PATCH

* MAJOR: Versão em que fizeste modificações incompatives com versões anteriores, ou seja, que irá quebrar algo anteriormente feito.
* MINOR: Quando você adicionar funcionalidades que são compativeis com versões anteriores.
* PATCH: Correções de erros/bugs compativeis com versões anteriores.

Licença

Criado a partir do pacote: Create React Library