4.0.0 • Published 2 years ago

@labex-hambre-ui/react

Licence

MIT

Version

4.0.0

Deps

Size

700 kB

Vulns

Weekly

Summary Dependency Versions

@labex-hambre-ui/react

Esta biblioteca fornece um conjunto de componentes React para a construção de interfaces de usuário, sendo compatível com as versões mais recentes do NextJS 13 e 14 , seguindo as diretrizes dos três pilares.

Abordagem dos três pilares

Server Components Para não usar Javascript no lado do cliente.
Client Components Enviando somente o javascript necessário para o navegador (cliente).
Streaming SSR Ler/escrever dados de forma parcial + Server-Side Rendering

Componentes

Avatar
Box
Button
Checkbox
Heading
Loading
MessageIcon
MultiStep
Radio
Select
Switch
Text
TextArea
TextInput
Transition

Compatibilidade

A biblioteca @labex-hambre-ui/react é compatível com as seguintes versões de dependências:

NextJS 12
NextJS 13
NextJS 14
@radix-ui

Instalações e configurações

Para instalar o @labex-hambre-ui/react, utilize o seguinte comando npm:

npm i @labex-hambre-ui/react@latest

Para ativar o Intellisense da biblioteca na criação de um styled component, entre em tsconfig.json e altere o moduleResolution para 'Node', dessa forma.

"moduleResolution": "Node",

Todos os arquivos styles.js que você criar, seja para uma página ou componente, deve ter a configuração use client antes de tudo, pois os estilos devem ser renderizados no lado do cliente, como neste exemplo a seguir.

'use client'
import { Text, styled } from "@labex-hambre-ui/react";

export const LinkRedirect = styled('div', {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    gap: '$2',
    cursor: 'pointer',
    color: '$hambre600',
    fontSize: '$sm',
    textDecoration: 'none',

    '&:hover': {
        color: '$hambre300',
        transition: 'all ease .36s'
    },
})

Visite o Storybook da Biblioteca

Storybook

License

Released in 2023 License Made with by Laciene Melo #lacymelo . This project is under the MIT license. Give a ️ if this project helped you!