스크립트
00:00:00Este é o Asterix, a própria versão da Meta do ShadCN, construída sobre a nossa solução de estilização, StyleX.
00:00:05É totalmente personalizável, licenciado pela MIT, e a Meta diz que tem refinado isso internamente
00:00:09há 8 anos em 13.000 aplicações. Se você é alguém que não gosta de Tailwind ou ShadCN,
00:00:15este deve definitivamente interessar você, e mesmo que você goste do ShadCN,
00:00:18vamos ver se há um motivo para mudar.
00:00:24Honestamente, estou realmente impressionado com a quantidade de componentes e recursos com os quais foi lançado,
00:00:29isso mostra que eles têm usado isso internamente há anos.
00:00:32Existem mais de 150 componentes acessíveis criados sobre o React, mas em vez de percorrer esta lista,
00:00:37a melhor maneira de mostrar é provavelmente com os nossos modelos, pois eles mostram todos em uso conjunto.
00:00:41Temos uma tabela de grupo aqui com seções de status e menus suspensos.
00:00:44Temos um formulário de pagamento onde você pode ver todos os elementos individuais de formulário de que vai precisar,
00:00:48junto com o status do formulário para coisas como mensagens de erro.
00:00:50Você pode criar um quadro Kanban de arrastar e soltar com ele, ou construir uma IDE com abas e barras laterais.
00:00:56Sites de comércio eletrônico, ele resolve isso para você.
00:00:58E até mesmo um site de chat com IA, ele também pode fazer isso, completo com um componente de markdown para renderizar a resposta que você recebe.
00:01:03Ele também possui um botão de inscrição.
00:01:05Não, espere, isso é o YouTube, mas vá em frente e clique em inscrever-se se gostar do que estamos fazendo aqui, ajuda muito.
00:01:10Como você pode ver, o Asterix deve realmente cobrir praticamente todas as suas necessidades de componentes,
00:01:14e todos esses componentes vêm, na verdade, daquela biblioteca principal.
00:01:16Então, usar isso é exatamente o mesmo que usar qualquer componente, e você pode conferir a documentação para todas as opções que um componente possui.
00:01:23Por exemplo, um botão pode ter um ícone, pode ter conteúdo final, tamanhos, variantes, enfim, praticamente tudo o que você precisar.
00:01:30Mas agora vamos entrar no motivo pelo qual você realmente deveria usar isso.
00:01:32O argumento da Meta é que os sistemas de design sempre forçaram você a escolher entre duas más opções.
00:01:36A primeira opção é adotar um sistema de uma grande empresa como o Material UI, e agora todos os seus aplicativos parecem um produto do Google com personalização limitada.
00:01:44A segunda opção é pegar algo como o ShadCN, copiar e colar os componentes no seu projeto, mas agora você é o dono do código,
00:01:50então cada projeto tem seu próprio fork de cada componente, e as correções upstream tornam-se difíceis de seguir porque agora é seu trabalho atualizar tudo isso.
00:01:57Algumas pessoas não gostam de ser responsáveis por todo aquele código de componente, então o Asterix afirma acabar com esse problema.
00:02:03Com o Asterix, o sistema controla o comportamento, a acessibilidade e a qualidade, e os temas controlam a aparência,
00:02:08sendo personalizados ao nível de tokens para coisas como cor, tipo, raio, movimento, tudo o que você poderia precisar sem nunca reescrever um componente.
00:02:14Então, aqui tenho um aplicativo que fiz usando alguns desses modelos do site do Asterix,
00:02:18e este é, na verdade, o visual padrão de todos os componentes se você não fornecer um tema a eles, então ele já vem com um tema base.
00:02:24Para criar nosso próprio tema, porém, podemos usar a função define theme,
00:02:27e isso vem, na verdade, com alguns recursos legais.
00:02:29O primeiro é a opção de cor.
00:02:31Às vezes você sabe qual deve ser a cor principal da sua marca, no meu caso é um verde brilhante,
00:02:35mas você não quer gerar a cor de fundo, a cor de destaque, você não quer realmente pensar em todas essas cores individuais.
00:02:40Então, com o Asterix aqui, se eu apenas salvar isso, você pode ver que ele realmente gera essas opções para mim,
00:02:44então eu consigo um ponto de partida muito bom apenas com base em uma cor hexadecimal.
00:02:48Depois da cor, temos também as opções de tipografia.
00:02:50Isso é bem autoexplicativo, estamos usando aqui, mas também temos uma escala.
00:02:54Portanto, o tamanho base para o meu texto será 14,
00:02:57mas então terá uma proporção de 1.2.
00:02:59O que isso significa é que a cada nível que subimos no tamanho do texto, então se eu fosse para o tamanho de texto grande,
00:03:03ele pegará a base e a multiplicará por 1.2, e esse será o tamanho individual do nosso texto,
00:03:08então ele está gerando todos esses tokens para nós.
00:03:10Depois disso, podemos controlar o raio.
00:03:12Isso é bem autoexplicativo.
00:03:14Se eu quisesse que nossos botões fossem arredondados, poderia definir isso como um número alto,
00:03:17e se eu quisesse que tudo tivesse cantos retos, poderia definir isso como zero.
00:03:21Depois disso, temos a opção auxiliar final, que é o movimento,
00:03:23e isso controla essencialmente a velocidade da animação para coisas como passar o mouse e clicar.
00:03:27Então, você pode chegar muito longe com o tema personalizado apenas definindo algumas variáveis aqui em cima,
00:03:31e isso gera todos os tokens para você.
00:03:34Mas e se você não gostar de alguns dos tokens que ele selecionou?
00:03:36Por exemplo, se eu quisesse mudar a cor escolhida para o meu botão secundário aqui,
00:03:40podemos ir para a seção de tokens aqui,
00:03:42e uma coisa muito legal sobre este tema e também sobre esta seção de tokens é que tudo é type-safe,
00:03:47então ele conhece os tokens que podemos definir,
00:03:49e é por isso que é melhor fazer isso em um arquivo JavaScript ou TypeScript em vez de CSS,
00:03:53já que podemos obter essa segurança de tipo.
00:03:55A cor de fundo daquele botão secundário é definida pelo token de cor neutra,
00:03:58então tudo o que preciso fazer é definir isso como um array onde um deles é o modo claro e o outro é o modo escuro.
00:04:03Para mim, isso será apenas a mesma cor.
00:04:05Se eu salvar agora, você pode ver que ele mudou a cor do meu botão secundário,
00:04:08mas temos um problema em que este texto não parece certo,
00:04:11já que mudei a cor.
00:04:12Então o que quero fazer é mudar a cor do texto para preto,
00:04:15mas o problema é que isso é definido pela variável de cor primária do texto,
00:04:18então se eu for em frente e salvar isso,
00:04:19você pode ver que ele muda grande parte do texto na minha tela para preto,
00:04:22em vez de apenas o do botão, como eu queria.
00:04:24Então, em vez de mudar esse token globalmente,
00:04:26o que posso fazer é apenas mudar para o componente.
00:04:28É aqui que podemos usar a seção de componentes.
00:04:30Digamos que queremos mudar nosso botão aqui.
00:04:32Eu forneço qual é a variante, no meu caso, secundária,
00:04:35então posso colocar quaisquer variáveis CSS que eu quiser aqui.
00:04:37Então eu só quero que a cor seja preta.
00:04:39Então, se eu salvar isso agora,
00:04:40podemos ver que nosso botão secundário tem aquela cor de texto preta,
00:04:42mas nada mais mudou agora.
00:04:44Está limitado apenas a este componente.
00:04:46A outra coisa legal sobre esta seção de componentes
00:04:47é que você também pode definir suas próprias variantes personalizadas.
00:04:50Então, digamos que eu quisesse uma variante de botão chamada “meu botão”.
00:04:52Posso configurar isso aqui com uma cor preta e uma cor de fundo vermelha,
00:04:56e então, quando eu for usar o meu botão,
00:04:57é tudo type-safe,
00:04:58e ele sabe que “meu botão” é uma variante válida.
00:05:00Você pode ver aqui,
00:05:01que agora temos um botão de “inscrever-se”.
00:05:02Portanto, você realmente pode fazer muito apenas com essa configuração de tema,
00:05:05ajustando completamente cada parte de cada componente,
00:05:07ou apenas o estilo geral do seu aplicativo.
00:05:09E existem até alguns temas pré-construídos
00:05:10se você quiser começar a partir de uma boa base.
00:05:12Você pode ver que há muitas personalizações nesses arquivos,
00:05:15e você pode até estender temas,
00:05:16então você pode construir sobre um existente
00:05:18em vez de fazer um completamente novo a cada vez.
00:05:20Todos esses temas também podem ser criados para produção.
00:05:23Então, funciona em aplicativos renderizados no lado do servidor, como o Next.js.
00:05:26Ele gerará estaticamente todo o CSS e JavaScript necessários.
00:05:28Um dos grandes benefícios de ter um lugar único como este para seus temas
00:05:31é que ajuda a reforçar a consistência da sua marca.
00:05:34Este é, na verdade, um argumento que vi contra o Tailwind,
00:05:36onde, como um desenvolvedor pode escrever qualquer classe,
00:05:38ou uma IA pode escrever qualquer uma,
00:05:40às vezes você acaba com componentes que têm um pouco de desvio de estilo
00:05:42já que alguém decidiu usar sua própria classe Tailwind.
00:05:45Quando você tem um tema definido como este,
00:05:46é apenas mais fácil de acompanhar, já que tudo acontece em um só lugar.
00:05:49Você pode ver facilmente o que mudou em seu tema,
00:05:53e a IA não precisa pensar nas classes Tailwind que pode usar,
00:05:56ela simplesmente usa os tokens e os componentes fornecidos.
00:05:58Embora eu deva dizer que você pode alcançar algo bastante semelhante
00:06:00com o Tailwind e o ShadCN,
00:06:01onde você define tudo como um token,
00:06:03embora não seja type-safe,
00:06:05então será muito mais difícil de aplicar.
00:06:06Agora, além dos temas,
00:06:07você também pode simplesmente estilizar um componente diretamente
00:06:09se quiser fazer uma alteração,
00:06:10e na verdade existem algumas maneiras de fazer isso.
00:06:12A maneira recomendada é provavelmente usar o X-Style,
00:06:14porque isso usa o StyleX,
00:06:16no qual este foi construído,
00:06:17e que a Meta obviamente fez.
00:06:19Você também pode usar outras bibliotecas como Tailwind,
00:06:21Panda, e várias coisas desse tipo,
00:06:22ou apenas CSS puro com o nome da classe.
00:06:24Então você pode ver aqui,
00:06:25que tenho substituições definidas no StyleX.
00:06:27Tenho alguns estilos chamados de botão Primário,
00:06:29onde quero que a cor seja branca,
00:06:30e a cor de fundo seja vermelha.
00:06:32Se eu agora quiser apenas alterar um único botão nesta página,
00:06:34tudo o que preciso fazer é dar a ele a prop X-Style,
00:06:36e passar meus estilos StyleX,
00:06:38e se eu salvar isso,
00:06:39você pode ver que meu botão Primário agora se ajusta a esses estilos.
00:06:42Então é assim que você estiliza algo,
00:06:43se você apenas quiser que seja único,
00:06:45e não quiser fazer essa alteração
00:06:46para todos os botões Primários.
00:06:47Você pode ver na documentação
00:06:48todas as maneiras diferentes que você tem para estilizar um componente.
00:06:51É super flexível,
00:06:52mas a coisa realmente legal que quero destacar
00:06:53é este suporte ao Tailwind.
00:06:55Eles fizeram isso
00:06:56com o que chamam de ponte Tailwind.
00:06:58Então, isso permite que você continue a usar o Tailwind,
00:07:00mas ele mapeia todos os tokens de design
00:07:01do seu tema que você configurou no Asterix
00:07:03para essas classes utilitárias do Tailwind.
00:07:06Então, coisas como suas cores,
00:07:07raio,
00:07:07tamanho da fonte,
00:07:08são todas definidas pelo tema do Asterix,
00:07:10mas então o Tailwind pode usá-las
00:07:11com os nomes de classe do Tailwind.
00:07:13Para mim, porém,
00:07:13eu provavelmente continuaria a usar o StyleX,
00:07:15já que é em torno dele que o Asterix foi construído,
00:07:17e só acho que misturar essas bibliotecas
00:07:18vai ser mais confuso do que vale a pena.
00:07:20Seguindo em frente da estilização, porém,
00:07:21outro ótimo recurso do Asterix
00:07:22é como ele funciona bem com a IA.
00:07:24Existe, na verdade, uma CLI do Asterix,
00:07:26mas ela não é destinada ao uso humano,
00:07:28e é na verdade destinada para a IA.
00:07:29Ela contém coisas como comandos
00:07:30para buscar toda a documentação
00:07:31sobre cada componente,
00:07:33carregá-la no contexto
00:07:34apenas para ajudar seus agentes a trabalharem com esse componente,
00:07:36e pode até preencher seu agents.md
00:07:38apenas para dar mais orientações.
00:07:40Descobri, na verdade, quando estava usando isso
00:07:41em todas as minhas demonstrações,
00:07:42que ele fez um trabalho extremamente bom nisso,
00:07:43e achei que modelos como Fable,
00:07:45GPT,
00:07:45todos podiam trabalhar com o Asterix,
00:07:47mesmo sendo uma biblioteca relativamente nova.
00:07:49No geral,
00:07:49você pode ver que o Asterix é apenas um sistema de design
00:07:51sério e repleto de recursos,
00:07:52e eu só passei pelo básico.
00:07:54Recomendo fortemente conferir a documentação,
00:07:55pois é muito bem escrita,
00:07:57e a maioria desses componentes
00:07:58até tem seções de melhores práticas,
00:08:00o que será muito útil para um LLM,
00:08:02e também há um playground
00:08:03se você apenas quiser testar isso
00:08:04sem ter um projeto.
00:08:06Você usaria algo assim?
00:08:07Deixe-me saber nos comentários abaixo,
00:08:08espere aí, inscreva-se,
00:08:09e como sempre,
00:08:10vejo você no próximo.