Como usar a IU do Chakra com Next.js e React


Construir sites e aplicativos é difícil. Há muitas coisas a serem consideradas para garantir que nossos aplicativos sejam utilizáveis ​​e acessíveis, incluindo como nossos componentes React funcionam.

Como podemos aproveitar o poder da IU do Chakra para criar ótimos aplicativos da web?

O que é Chakra UI?

Chakra UI é uma biblioteca de componentes do React que facilita a construção da IU de um aplicativo ou site.

Seu objetivo é fornecer um conjunto de componentes simples, modular e acessível para começar a funcionar rapidamente.

O que torna o Chakra UI tão bom?

Para começar, por padrão, o Chakra se esforça para tornar cada componente acessível. É uma parte crítica do desenvolvimento de aplicativos que muitas vezes é esquecida, e os mantenedores do Chakra se esforçaram para garantir que os componentes sigam o Diretrizes WAI-ARIA.

O Chakra também inclui uma API simples que permite aos desenvolvedores se tornarem produtivos. Ele permite que pessoas e equipes criem aplicativos inclusivos sem ter que se preocupar em construir um monte de componentes.

Para estilo e personalização, Chakra usa Emoção por baixo do capô para fornecer aos desenvolvedores a capacidade de definir o estilo de seus componentes dentro do JavaScript com adereços de estilo. Ele vem com um tema padrão, mas permite a capacidade de substituí-lo facilmente por configurações personalizadas.

O que vamos construir?

Para ter uma boa ideia de como o Chakra funciona, vamos essencialmente reconstruir o modelo Next.js padrão com componentes de IU do Chakra.

Isso nos ajudará a entender alguns conceitos importantes, como usar Chakra UI com Next.js, como adicionar estilos personalizados com adereços e como personalizar o tema Chakra UI.

Os conceitos aqui podem ser aplicados a qualquer Reagir aplicativo, embora os exemplos sejam ligeiramente específicos para Next.js.

Etapa 0: Criar um novo projeto React com Next.js

Para começar, precisamos de um aplicativo React. Vamos usar Next.js como nossa estrutura, o que nos dará a capacidade de ativar um novo aplicativo com facilidade.

Uma vez dentro do diretório em que deseja criar seu projeto, execute:

yarn create next-app my-chakra-app
# or
npx create-next-app my-chakra-app

Nota: sinta-se à vontade para mudar my-chakra-app para o que você quiser nomear o diretório do projeto.

E quando terminar, você pode navegar até esse diretório e iniciar o projeto com:

yarn dev
# or
npm run dev

Isso deve ativar seu servidor de desenvolvimento em http: // localhost: 3000 e devemos estar prontos para ir!

Modelo Next.js padrão

Acompanhe o commit!

Etapa 1: instalação e configuração da IU do Chakra em Next.js

A seguir, vamos instalar o Chakra UI.

Dentro do diretório do seu projeto, execute:

yarn add @chakra-ui/core @emotion/core @emotion/styled emotion-theming
# or 
npm install @chakra-ui/core @emotion/core @emotion/styled emotion-theming

Isso instalará o Chakra UI e suas dependências, que incluem o Emotion, pois ele depende dele para o estilo.

Para fazer o Chakra funcionar dentro de nosso aplicativo, precisamos configurar um provedor na raiz de nosso aplicativo. Isso permitirá que todos os componentes do Chakra se comuniquem entre si e usem a configuração para manter estilos consistentes.

Dentro pages/_app.js, primeiro vamos importar nosso Provedor no topo:

import { ThemeProvider, theme } from '@chakra-ui/core';

Em seguida, substitua a instrução return dentro do componente por:

function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider theme={theme}>
      <Component {...pageProps} />
    </ThemeProvider>
  )
}

Como você notará, também estamos passando por um theme variável para o nosso provedor. Estamos importando o tema padrão da IU do Chakra direto do Chakra e passando-o para o nosso ThemeProvider para que todos os nossos componentes possam obter os estilos e configurações padrão.

Finalmente, queremos adicionar um componente chamado CSSReset direito como um filho direto de nosso ThemeProvider.

Primeiro, adicione CSSReset como uma importação:

import { ThemeProvider, theme, CSSReset } from '@chakra-ui/core';

Em seguida, adicione o componente dentro ThemeProvider:

<ThemeProvider theme={theme}>
  <CSSReset />
  <Component {...pageProps} />
</ThemeProvider>

E agora, se recarregarmos a página, podemos ver que as coisas estão um pouco diferentes!

Next.js com Chakra UI CSS Reset

O navegador vem com muitos estilos padrão e, por padrão, a IU do Chakra não os substitui. Isso inclui estilos como bordas em um elemento de botão.

Embora não precisemos necessariamente do CSS Reset aqui, poderíamos substituir essas coisas manualmente. Isso nos fornece uma base onde saberemos que a IU do Chakra está funcionando como deveria e podemos começar a adicionar nossos componentes.

Acompanhe o commit!

Etapa 2: Adicionando componentes Chakra UI a um aplicativo React

Agora a parte divertida. Vamos usar os componentes de IU do Chakra para tentar reconstruir o modelo padrão Next.js. Não terá uma aparência 100% exata, mas carregará o espírito e podemos personalizá-lo como quisermos.

Construindo o Título e a Descrição

Começando do topo, vamos atualizar nosso título e descrição.

No topo da página, precisamos importar nosso Heading componente:

import { Heading, Link } from "@chakra-ui/core";

Então vamos substituir o <h1> com:

<Heading as="h1" size="2xl" mb="2">
  Welcome to Next.js!
</Heading>

Aqui, estamos usando o Título componente que então definimos “como” um h1. Podemos usar qualquer nome de tag de elemento de cabeçalho HTML, mas como estamos substituindo um h1, queremos usá-lo.

Também estamos definindo um size atributo, que nos permite controlar o tamanho do cabeçalho, bem como mb, que significa margin-bottom, permitindo-nos adicionar algum espaço abaixo.

E já podemos ver que nossa página está mais parecida com o modelo padrão.

Componente Chakra UI Heading

Também queremos adicionar de volta nosso link.

Adicionar Link à nossa declaração de importação na parte superior e, em seguida, dentro de nosso <Heading> componente, substitua o texto Next.js por:

<Link color="teal.500" href="https://nextjs.org">Next.js!</Link>

Chakra Ligação componente cria um link conforme o esperado, mas nos permite usar os adereços de estilo para personalizá-lo. Aqui, estamos usando a variável de cor teal.500 que o Chakra fornece para mudar nosso link com as cores do Chakra.

E podemos ver que temos nosso link Next.js!

Chakra UI Heading com Link Component

A última parte do cabeçalho é a descrição. Para isso, queremos usar o componente Texto.

Adicionar Text e Code à declaração de importação e substitua a descrição por:

<Text fontSize="xl" mt="2">
  Get started by editing <Code>pages/index.js</Code>
</Text>

Estamos usando o Texto componente para recriar um <p> tag e o Código componente para criar nosso <code> tag. Semelhante ao nosso componente Heading, estamos adicionando um fontSize para aumentar a fonte e mt que significa margin-top para adicionar algum espaço acima dele.

E agora temos nosso cabeçalho!

Componente Chakra UI Text com código

Substituindo cartões de informação por componentes de IU do Chakra

Para cada um de nossos cartões, podemos usar os mesmos conceitos que fizemos com o cabeçalho para recriar cada uma de nossas caixas.

Para começar, adicione uma importação para o Flex componente e substitua a tag <div className={styles.grid}> com:

<Flex flexWrap="wrap" alignItems="center" justifyContent="center" maxW="800px" mt="10">
  ...
</Flex>

Certifique-se de deixar todos os cartões dentro do componente Flex. o Flex O componente irá recriar nossa grade adicionando Flexbox junto com as mesmas propriedades que estavam na grade antes.

Neste ponto, deve ser exatamente o mesmo que antes.

Em seguida, adicione Box ao extrato de importação e, em seguida, substitua o primeiro cartão por:

<Box as="a" href="https://nextjs.org/docs" p="6" m="4" borderWidth="1px" rounded="lg" flexBasis="45%">
  <Heading as="h3" size="lg" mb="2">Documentation &rarr;</Heading>
  <Text fontSize="lg">Find in-depth information about Next.js features and API.</Text>
</Box>

Semelhante ao nosso componente Heading, estamos definindo nosso Caixa componente “como” um <a> tag permitindo que ele sirva como um link. Em seguida, configuramos nossos adereços de estilo para replicar nossos cartões.

Dentro dele, usamos o componente Título e Texto para recriar o conteúdo real dos cartões.

E depois de alterar apenas o primeiro cartão, agora podemos ver as alterações:

Componente Chakra UI Box

Agora, podemos voltar e substituir as outras três cartas com os mesmos componentes para terminar de recriar nossa grade.

Para diversão, podemos adicionar um quinto cartão com um link para a IU do Chakra:

<Box as="a" href="https://chakra-ui.com/" p="6" m="4" borderWidth="1px" rounded="lg" flexBasis="45%">
  <Heading as="h3" size="lg" mb="2">Chakra UI &rarr;</Heading>
  <Text fontSize="lg">Build accessible React apps & websites with speed.</Text>
</Box>

E com todas as nossas alterações, agora podemos ver nosso modelo inicial Next.js recriado!

Chakra UI recriando grade Next.js

Acompanhe o commit!

Etapa 3: fazer componentes responsivos com Chakra UI

Parte do que a grade Next.js padrão foi capaz de fornecer foi a capacidade de os cartões se expandirem até a largura total, uma vez que o tamanho do navegador torna-se pequeno o suficiente. Isso é particularmente relevante em 600px, o que normalmente significa que alguém está em um dispositivo móvel.

Se olharmos nossa página em um dispositivo móvel, podemos ver que nossos cartões não estão ocupando toda a largura.

Chakra UI padrão sem responsivo

Chakra nos permite definir estilos responsivos com seu dimensionamento embutido, permitindo-nos recriar facilmente nossos cartões de grade responsivos.

Para fazer isso, em vez de passar um único valor para nossos adereços de estilo, podemos passar um array.

Por exemplo, em cada um dos nossos componentes do Box, vamos atualizar o flexBasis suporte para:

flexBasis={['auto', '45%']}

Aqui, de acordo com Chakra’s pontos de interrupção responsivos padrão , estamos dizendo que por padrão, queremos nosso flexBasis para ser definido como auto. Mas para qualquer coisa 480px e maior, novamente que é o primeiro ponto de interrupção padrão do Chakra, nós o configuramos para 45%.

Chakra considera seu estilo responsivo como móvel primeiro, é por isso que você vê o 480px atuar como um tamanho mínimo, não um tamanho máximo.

E com essa mudança, agora podemos ver que, em um grande dispositivo, ainda temos nossa grade.

Componentes de IU do Chakra em dispositivos grandes

Mas agora no celular, nossos cartões ocupam toda a largura!

Componentes da IU do Chakra em um pequeno dispositivo

Usar o padrão de matriz funciona para todos os pontos de interrupção, portanto, se você quiser mais controle sobre seus estilos, o Chakra permite que você faça isso.

Acompanhe o commit!

Etapa 4: Personalizando o tema Chakra UI padrão

Embora o Chakra forneça um tema padrão muito bom, também temos a capacidade de personalizá-lo ao nosso gosto para combinar com nossa marca ou gosto pessoal.

Por exemplo, embora o azul-petróleo que usamos para nosso link de título seja ótimo e use os estilos de Chakra, e se eu quisesse personalizar todos os links para usar o roxo que eu usar no meu site?

Para começar, o Chakra vem com um roxo padrão, então podemos atualizar nosso link para usar esse roxo:

Welcome to <Link color="purple.500" href="https://nextjs.org">Next.js!</Link>

E vemos nossa mudança.

Fazendo o link do cabeçalho Next.js em roxo com o prop de estilo de cor

Parece ótimo, mas vamos atualizá-lo para o roxo exato que uso.

Dentro de pages/_app.js, vamos criar um novo objeto no topo da página, onde espalharemos o tema padrão criando um novo objeto de tema. Também substituiremos o theme suporte com nosso novo objeto:

const customTheme = {
  ...theme
}

function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider theme={customTheme}>

Se salvarmos e recarregarmos a página, ela terá a mesma aparência.

Em seguida, queremos atualizar as cores, portanto, em nosso objeto de tema personalizado, vamos adicionar a propriedade colors, onde podemos definir nosso roxo personalizado:

const customTheme = {
  ...theme,
  colors: {
    ...theme.colors,
    purple: '#692ba8'
  }
}

Nota: você verá aqui que também estamos divulgando theme.colors. Se não o fizermos, estaremos substituindo o objeto de cores apenas com o valor roxo, o que significa que não teremos outras cores.

Mas se recarregarmos a página, nosso link não será mais roxo!

Link Next.js sem cor

Chakra normalmente usa gamas de cores que nos permitem usar diferentes tons de cada uma das cores. Em nosso componente Link, estamos especificando purple.500 que não definimos para existir.

Para corrigir isso, podemos usar uma ferramenta como Amostra Inteligente para obter todos os valores de cores de que precisamos e defini-los em nosso objeto de tema personalizado:

const customTheme = {
  ...theme,
  colors: {
    ...theme.colors,
    purple: {
      50: '#f5e9ff',
      100: '#dac1f3',
      200: '#c098e7',
      300: '#a571dc',
      400: '#8c48d0',
      500: '#722fb7',
      600: '#59238f',
      700: '#3f1968',
      800: '#260f40',
      900: '#10031a',
    }
  }
}

Dica: Na verdade, o Smart Swatch permite que você copie esses valores como um objeto JavaScript, tornando mais fácil colar em nosso tema!

E agora se recarregarmos a página, podemos ver nosso roxo!

Next.js com roxo personalizado

Embora tenhamos usado um valor de intervalo aqui, também podemos especificar variáveis ​​de cor sem um intervalo.

Digamos que eu queira deixar o Chakra padrão roxo “como está”, mas forneça uma maneira de fazer referência ao meu roxo.

Para fazer isso, eu poderia remover esses valores roxos e adicionar uma nova variável personalizada:

const customTheme = {
  ...theme,
  colors: {
    ...theme.colors,
    spacejelly: '#692ba8'
  }
}

Em seguida, atualize meu link para usar essa cor:

Welcome to <Link color="spacejelly" href="https://nextjs.org">Next.js!</Link>

E podemos ver que agora estamos usando nosso roxo sem substituir o original:

Next.js com variável de cor personalizada

Podemos aplicar isso à maioria dos estilos de Chakra, incluindo Tipografia e configuração de Breakpoints personalizados. É outra forma de personalizar nosso projeto e, ao mesmo tempo, aproveitar o poder do Chakra!

Acompanhe o commit!

O que mais você pode fazer com a IU do Chakra?

Enquanto examinamos alguns exemplos mais simples, ele realmente abre a porta para mudanças de estilo e controles mais complexos que o Chakra fornece com suas APIs de componentes.

Também há muitos componentes incríveis que você pode usar para transformar seu site ou aplicativo e tornar o desenvolvimento rápido e fácil!

Eles até fornecer receitas que tem alguns exemplos de como você pode combinar os componentes resultando em uma funcionalidade poderosa. Isso inclui um cabeçalho responsivo e até mesmo adicionar animações com Framer Motion.





Fonte

Leave a Reply

Your email address will not be published. Required fields are marked *