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

Instalação.

npm install --save vwapp-react-components

Uso

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 () => (
  <Fragment>
    <FlexContainer reverse direction="row" justify="center" align="center" className="bg-dark" style={{height: "200px"}}>
      <FlexItem>01</FlexItem>
      <FlexItem>02</FlexItem>
    </FlexContainer>
    <Line />
    <FlexContainer wrap direction="col" justify="center" align="stretch" className="bg-dark" style={{height: "200px"}}>
      <FlexItem>01</FlexItem><FlexItem>02</FlexItem><FlexItem>03</FlexItem><FlexItem>04</FlexItem><FlexItem>05</FlexItem>
      <FlexItem>06</FlexItem><FlexItem>07</FlexItem><FlexItem>08</FlexItem><FlexItem>09</FlexItem><FlexItem>10</FlexItem>
      <FlexItem>11</FlexItem><FlexItem>12</FlexItem><FlexItem>13</FlexItem><FlexItem>14</FlexItem><FlexItem>15</FlexItem>
      <FlexItem>16</FlexItem><FlexItem>17</FlexItem><FlexItem>18</FlexItem><FlexItem>19</FlexItem><FlexItem>20</FlexItem>
      <FlexItem>21</FlexItem><FlexItem>22</FlexItem><FlexItem>23</FlexItem><FlexItem>24</FlexItem><FlexItem>25</FlexItem>
      <FlexItem>26</FlexItem><FlexItem>27</FlexItem><FlexItem>28</FlexItem><FlexItem>29</FlexItem><FlexItem>30</FlexItem>
    </FlexContainer>
    <Line />
    <FlexContainer direction="row" justify="center" align="stretch" className="bg-dark" style={{height: "200px"}}>
      <FlexItem order="3" length="100px">01</FlexItem>
      <FlexItem grow order="2" align="center">02</FlexItem>
      <FlexItem grow order="0">03</FlexItem>
      <FlexItem shrink order="1">04</FlexItem>
      <FlexItem grow order="4">05</FlexItem>
    </FlexContainer>
    <BreakLine />
  </Fragment>
);

Documentação

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

1. Flexbox

Componentes para facilitar o uso do flexbox.

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 (<div>) do component, por exemplo, <FlexContainer as="ul">.
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.
- col: Empilha os itens verticalmente, ou seja, de cima para baixo.
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

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

col

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
  
  col
- end: Alinha os itens no final.
  
  row
  
  col
- center: Alinha os itens no centro.
  
  row
  
  col
- space-around: Alinha os itens com espaçamentos ao redor deles.
  
  row
  
  col
- space-between: Alinha os itens com espaçamentos entre eles.
  
  row
  
  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
  
  col
- end: Alinha os itens no final.
  
  row
  
  col
- center: Alinha os itens no centro.
  
  row
  
  col
- stretch: Preenche os itens no container.
  
  row
  
  col
- baseline: Alinha os itens tendo como base seu texto. Só funciona com o wrap não setado. css: "align-items".
  
  row
  
  col
- space-around: Alinha os itens com espaçamentos ao redor deles. Só funciona com o wrap setado. css: "align-content".
  
  row
  
  col
- space-between: Alinha os itens com espaçamentos entre eles. Só funciona com o wrap setado. css: "align-content".
  
  row
  
  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)
grow: Faz o item crescer proporcionalmente em relação aos demais, preenchendo a linha. (Booleano - default: false - css: flex-grow)
shrink: Não deixe o item diminuir tanto quanto os outros itens. (Booleano - default: false - css: flex-shrink)
length: Configura um tamanho inicial para o item em pixels. (String - Opcional - css: flex-basis).
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.
- end: Alinha o item no final.
- center: Alinha o item no centro.
- stretch: Preenche o item no container.
- baseline: Alinha o item tendo como base seu texto.

Exemplo

<FlexContainer reverse direction="row" justify="center" align="space-around">
  <FlexItem>01</FlexItem>
  <FlexItem>02</FlexItem>
</FlexContainer>

<FlexContainer wrap direction="col" justify="center" align="stretch">
  <FlexItem>01</FlexItem><FlexItem>02</FlexItem><FlexItem>03</FlexItem><FlexItem>04</FlexItem><FlexItem>05</FlexItem><FlexItem>06</FlexItem><FlexItem>07</FlexItem><FlexItem>08</FlexItem><FlexItem>09</FlexItem><FlexItem>10</FlexItem><FlexItem>11</FlexItem><FlexItem>12</FlexItem><FlexItem>13</FlexItem><FlexItem>14</FlexItem><FlexItem>15</FlexItem><FlexItem>16</FlexItem><FlexItem>17</FlexItem><FlexItem>18</FlexItem><FlexItem>19</FlexItem><FlexItem>20</FlexItem><FlexItem>21</FlexItem><FlexItem>22</FlexItem><FlexItem>23</FlexItem><FlexItem>24</FlexItem><FlexItem>25</FlexItem><FlexItem>26</FlexItem><FlexItem>27</FlexItem><FlexItem>28</FlexItem><FlexItem>29</FlexItem><FlexItem>30</FlexItem>
</FlexContainer>

<FlexContainer direction="row" justify="center" align="stretch">
  <FlexItem order="3" length="100px">01</FlexItem>
  <FlexItem grow order="2" align="center">02</FlexItem>
  <FlexItem grow order="0">03</FlexItem>
  <FlexItem shrink order="1">04</FlexItem>
  <FlexItem grow order="4">05</FlexItem>
</FlexContainer>
);

2. Pagination

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:

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

"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

Crie uma conta no https://www.npmjs.com/
Execute no terminal npm login e logar com as credenciais criadas no npmjs
Execute npm publish na pasta do projeto
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

Name		Name	Last commit message	Last commit date
Latest commit History 86 Commits
example		example
src		src
.editorconfig		.editorconfig
.eslintignore		.eslintignore
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
README.md		README.md
package-lock.json		package-lock.json
package.json		package.json

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

vwapp-react-components

Instalação.

Uso

Documentação

1. Flexbox

Componentes

Propriedades (FlexContainer)

Propriedades (FlexItem)

Exemplo

2. Pagination

Componentes

Propriedades especificas:

Exemplo:

Contribuir

1. Como rodar o ambiente de desenvolvimento:

2. Como instalar ou remove um pacote.

3. Publicar no npmjs

4. Publicar documentação github pages

5. Atualizando um projeto.

Licença

About

Releases

Packages

Languages

VWApplications/vwapp-react-components

Folders and files

Latest commit

History

Repository files navigation

vwapp-react-components

Instalação.

Uso

Documentação

1. Flexbox

Componentes

Propriedades (FlexContainer)

Propriedades (FlexItem)

Exemplo

2. Pagination

Componentes

Propriedades especificas:

Exemplo:

Contribuir

1. Como rodar o ambiente de desenvolvimento:

2. Como instalar ou remove um pacote.

3. Publicar no npmjs

4. Publicar documentação github pages

5. Atualizando um projeto.

Licença

About

Topics

Resources

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages