conecta-uai
v1.2.14
Published
Component Library for Conecta applications
Downloads
53
Readme
Conecta Uai
Component Library project for Conecta front-end applications
Uso/Exemplos
import {Button, LinkButton, Input} from 'conecta-uai'
function App() {
return (
<>
<Input small {...args}/>
<Button small {...args}> Botão </Button>
<LinkButton {...args}>Botão</LinkButton>
</>
)
}
Funcionalidades
- AITag
- Button
- Tooltip
- Checkbox
- DropdownButton
- Input
- LinkButton
- Logo
- MenuOption
- NavButton
- ProductButton
- SnackMessage
- SupportButton
- ToggleButton
- DropdownMenu
- Grid
- Menu
- SnackList
- Skeleton
- Modal
Tooltip
import {Tooltip} from 'conecta-uai'
function App() {
return (
<>
<div>
<Tooltip position="left" title="Left" > <span>teste</span> </Tooltip>
</div>
</>
)
}
Renderizará um tooltip com a mensagem "Left" ao passar o mouse sobre o span.
Modal
import {Modal} from 'conecta-uai'
function App() {
return (
<>
<Modal show={true} {...args} >
<Modal.Header onClose={onClose}>
<h2>Modal Header</h2>
</Modal.Header>
<Modal.Body>
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</Modal.Body>
<Modal.Footer>
<h3>Modal Footer</h3>
</Modal.Footer>
</Modal>
</>
)
}
Renderizará um modal quando show
for true
.
Documentação de cores
| Cor | Variable | | ----------------- | ---------------------------------------------------------------- | | Autorya Pallete | --color-primary | | Conecta Pallete | --color-second | | Gray Pallete | --color-gray | | Success Pallete | --color-success | | Danger Pallete | --color-danger | | Warn Pallete | --color-warn |
Instalação
Instale conecta-uai com npm
npm install conecta-ui
Instale conecta-uai local
npm install /path-to-conecta-ui
Rodando localmente
Clone o projeto
git clone https://github.com/Ecossistema-Conecta/conecta-uai
Entre no diretório do projeto
cd conecta-uai
Instale as dependências
npm install
Rode o Rollup
npm run rollup
Instale a dependência no projeto desejado
npm install /path-to-conecta-ui
ou
npm run storybook
Demonstração
Para verificar como os componente são renderizados e quais opções eles tem, rode:
npm run storybook
e escolha o componente desejado.
Deploy
Automatizado com github actions
não esqueça de alterar a versão em package.json com base na sua alteração