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