Refazendo o shadcn para Angular ao vivo | ZardUI

Go! Eu acho que tá, estamos online já. Vamos ver. Muito boa noite para quem já tá por aí. Aí, ó, pessoal já tá dando buenas noites. Deixa eu botar o chat aqui do lado, vamos ver se aqui funcionando.

Ó, para mim iniciou exatamente agora, ao vivo.

Vamos ao vivo, estamos ao vivo. Boa noite, tá por aí? Dá uma boa noite aí. Primeira live do canal, inicialmente, oficialmente, né, inicializada. Tô aqui com o Luiz Ardi, o meu parceiro, meu brother aqui, que tá à frente do comigo no ZardUI.

E aí, pessoal, boa noite!

Pode dar um boa noite para o povo aí, se apresentar para o pessoal também, mano.

Boa noite, pessoal, eu me chamo Luiz, já trabalhei aí há quase 5 anos como dev, especializado mais na área de front-end, e tô com essa ideia louca aí de tentar portar mais uma ideia louca aí cortar o chat CN para o ângulo.

Não é louca não, pô, ideia legal. A ideia é boa, ideia é boa. Deixa eu dar uma olhadinha aqui. Deixa eu ver. Bom, galera, a ideia aqui a gente compartilhar a tela mesmo e trabalhar um pouco no Xard, codar algumas coisas, revisar por request, olhar algumas outras coisas. E aí vocês vão mandando dúvida aí, dúvida que vocês tiverem, qualquer coisa e tudo mais. Vocês podem mandando dúvida que se vocês quiserem perguntar ou coisa do tipo, pode mandando durante a live, mas Por enquanto, cara, a ideia, eu quero, a gente quer falar um pouco do Zard UI e primeiramente falar o que que é o Zard UI. E aí eu vou deixar meu amigo Luiz Zard no WhatsApp, eu salvei o contato dele de Luiz Zard, para ele dar uma pincelada aí do que que é o Zard UI, que que a gente tá pretendendo aí com essa lib.

Exatamente, vamos lá, pessoal. Primeiramente, ZardUI, ele veio da ideia de tentar transformar bibliotecas de componentes especificamente para o Angular em algo muito mais prático. Então, vamos supor ali que temos situações, eu acho que todo mundo que já trabalhou com Angular teve alguma situação que comeu o pão que o diabo amassou para você conseguir personalizar ali um componente do Material ou do PrimeNG. E assim, ou por exemplo, a forma na qual um componente funcionava não era bem a qual padrão que você utilizava no seu projeto. E por conta disso, até porque já foram problemas que eu passei na pele, eu acabei tendo a ideia de: poxa, por que não criar uma lib que talvez resolvesse esses problemas? Por que não deixar isso mais flexível? E bom, como eu sou, como é que eu posso dizer, quase entusiasta de React, e já trabalhei algumas vezes com ele, eu acabei conhecendo a ChatCNI. Hehe, tô traindo o movimento. Eu acabei conhecendo a ChatCNI, que assim, tem uma proposta totalmente diferente de outras bibliotecas que eu já utilizei na minha vida. Que assim, em vez de você ter que instalar toda a biblioteca compilada no seu projeto, você vai ter todos os fragmentos lá dela. Então, por exemplo, você quer um componente botão, Você vai ter literalmente o botão instalado lá no seu projeto e você pode editar ele como você quiser. Você configura tema, você pode configurar a parte de radio, o que você quiser. E isso a lib inteira segue esse padrão. Então, como isso daí resolveria um problema, eu só fui atrás de soluções para isso na época. Antes eu tinha conhecido até o O que todo mundo comenta quando a gente fala qualquer coisa do Zard, do Spartan. O Spartan realmente é uma lib bem legal, eu acompanhei ela desde o começo, porém assim, a evolução não caminhava muito com o que eu queria. Eu sentia que ela realmente era uma cópia do ChatCNI, até a forma na qual, a forma React de fazer, né? Não caminhava muito com o padrão dos projetos Angular. Então foi daí que surgiu a ideia de criar o Zard. Samuel curtiu muito, a gente brigou diversas vezes porque O meu contato no WhatsApp dele é Luiz Arte, mas no meu WhatsApp o contato dele tá como Zorro Fanboy, porque esse cara é o embaixador do NG Zorro. E do Super Base. Exatamente. O Super Base eu concordo, o Zorro nem tanto. E cara, eu sempre falei, mano, eu já trabalhei com NG Zorro, na prática a dev experience dele é muito boa, porém eu sempre achei ela muito feia. A única Lib Angular que eu acho bonita é o PrimeNG. E aí, cara, por conta disso eu pensei, poxa, vamos unir forças aí. Aí eu falei da ideia dos Zard pro Samuel, ele realmente achou muito legal, e estamos aqui hoje, né?

Pois é. E aí, basicamente, a ideia dos Zard é trazer— a gente até colocou isso lá na É trazer a beleza do ChatGPT, porque, cara, ChatGPT, nunca vi nenhuma biblioteca de componentes mais bonita que a do ChatGPT, cara. A ChatGPT, a UI dele é muito boa, só que com a experiência de desenvolvimento do NG-Zorro, cara. Porque eu, como o embaixador do NG-Zorro, eu, cara, eu uso NG-Zorro já muito tempo, cara, e tipo assim Nunca achei nenhuma outra lib de Angular que tenha uma experiência tão, que seja tão fácil de desenvolver, cara. Então a ideia dos Arde é juntar esses dois mundos perfeitos e criar a melhor lib de Angular. É só esse sonho que a gente tem, cara.

Tem só pouquinha coisa, pouquíssima coisa, né?

E aí o Luiz já tinha a ideia, ele já tinha o domínio, ele já tinha logo E aí uma outra coisa que a gente quer falar também é por que Zardy Y, cara? Fala essa ideia do nome aí, de onde que veio, de onde surgiu essa ideia.

Cara, sou um grande fã aí de Pokémon, então, cara, Zardy, Charizard, quando eu tava pensando em ideias para a Lib, cara, na minha cabeça só vinha nome de Pokémon, cara, não via outra coisa. Então, cara, eu coloquei Zard, pô, Zard parece maneiro. Aí eu, pô, a logo pode ser um Z e tal. Aí qual era o princípio? Ia ser Zard. Aí beleza, colocou UI, funcionou. Antes ia ser apenas Zard, só que o domínio não tava disponível. [LAUGHTER] Daí eu fiz Zard UI e deu tudo certo. E a logo, cara, eu gerei ela pelo Gemini.

Meu Deus, cara.

A minha ideia era que a logo fosse um Z que fizesse referência a um dragão. Tipo Charizard mesmo, entendeu? Só que assim, o Gemini de cara já colocou um negócio tão da hora que eu falei, cara, é isso, pronto, tá feito, né? Exatamente, da hora, mano.

E aí ele já, mano, aí o Luiz já tinha logo, já tinha ideia, só que ele queria fazer sozinho, meus amigos. Aí, aí já é maluquice da cabeça dele, ele pensava que ele ia conseguir fazer uma libra de componentes de Angular sozinho, né, mano?

Só um pobre homem doente.

Terapia tem dia, pelo menos. Sim, mas aí eu cheguei e falei, mano, tá maluco, velho, vamos fazer esse negócio, mano. Eu sempre tive vontade de fazer uma biblioteca. Eu já tive uma outra experiência de criar componentes em Angular. Eu gosto dessa parte, deixar as coisas bonitas, de fazer as coisas legais. Eu falei, mano, eu comprei ideia, velho, vamos embora fazer esse negócio acontecer. Aí eu criei mais um grupo lá na comunidade no WhatsApp e foi entrando gente, cara. Foi entrando gente, a gente, cara, foi questão de 2 meses ou menos, 2, 3 meses, a gente já tinha landing page, a gente já tinha os componentes. E hoje a gente já tem, tipo assim, uma porrada de componente, uma galera foi se juntando. E a galera que tá aqui também tem visto isso, e a gente agradece muito todo mundo. Então, cara, é uma biblioteca que tá crescendo, hein, tá nascendo, nasceu no nosso coração aqui, e é uma necessidade que todo mundo sente. Todo mundo, todo dev anglo sente. Show! Deixa eu ver esse chat aqui, como é que tá esse chat aqui, ó. O Dev Gui, ó, lançou um boa noite, meu patrão. Boa noite, meu patrão. O Gustavo também lançou um boa noite, rapaziada. O Dev Gui falou que veio do grupo da Kip. Da hora, grupo daqui é da hora. Gustavo Araújo, Jefferson lançou um boa noite também. Um cavalo, tudo sobre cavalos, não sei o que é. Tem um cavalo assistindo a live.

Zard, uai, diversidade, mano.

O Gustavo lançou um brabo demais. O Douglas, presente professor. XNT mandou um boa noite. E o Pedro Freitas: vou fazer um fork, pintar de verde, chamar de muito bom. Mas eu não entendi, é só o quê? Só é algum Pokémon?

Ah, por causa do Gobação.

Nossa, velho, meu Deus! Mas é uma boa ideia, cara, é uma boa ideia, muito boa ideia. Show, guys! Bom, não tenho mais muita coisa para falar. Vamos compartilhar a tela e abrir o código aqui, trabalhar um pouquinho, né? Deixa eu compartilhar minha tela com vocês então, meus amigos. Eu vou arrastar isso aqui da live para minha outra tela, tá bom? Eu vou botar o QR code do grupo do WhatsApp aqui para quem quiser acessar nossa comunidade do canal Samuel Rizon. Eu sou Samuel Rizon do canal Samuel Rizon, igual Lucas Montano do canal Lucas Montano. Eu vou compartilhar minha tela aqui, a gente vai trabalhar um pouco. Estão vendo minha tela? Sim, manda aí. Se tiver muito pequeno, meus amigos, eu vou dar um zoom aqui, cara, que aí eu acho que fica mais fácil de ver. Muito boa noite, boa noite, boa noite, boa noite! Vai chegando aí, vai dando boa noite. Quem tiver com dúvida pode mandar dúvida também. Eu já tô com um projeto de prod rodando e o projeto local rodando também. E a gente vai dar uma brincada aqui nos pull requests, nas issues. A gente vai ver algumas coisitas aqui. É bom. Primeiramente, a gente tem aqui no projeto, a gente consegue ver o board do que que tá acontecendo aqui, que a galera tá mexendo. Algumas pessoas acabam não deixando 100% atualizado. Mas a gente tem alguns componentes para revisar. Eu sei que a gente tem 3 pull requests abertos, se eu não me engano.

Deixa eu dar uma olhada. Do Calendar, do Command e do Progress Bar.

Perfeito, então Command, Progress Bar e Calendar. Vamos passar para review aqui. Eu pretendo dar uma olhadinha nesses carinhas aqui hoje com vocês. E a gente tem alguns outros aqui, o pessoal tá trabalhando neles. A gente tem as nossas issues também, e aqui maioria já tem alguém aqui. A gente tá precisando criar mais algumas outras issues, mas uma que a gente já tem, que o pessoal tem reclamado, é no mobile que a gente não tem uma nave barca. Eu compartilhei no grupo da Kipper esses dias. E aí, não, no grupo daqui, não foi o grupo do Fábio. Aí o menino falou, cara, eu clico, não acontece nada. Eu falei, já abre o pull request lá, meu amigo, estamos esperando.

Spoiler: esse navbar nunca existiu.

É, nunca existiu, cara. Tá aqui, tá bugado. A gente tá precisando de alguém para Algum voluntário que se disponibilize para trabalhar aqui, mas show! Vamos começar então, cara. Eu já vou começar olhando algum PR aqui e eu vou pegar por esse último que tá aqui, é o Progress Bar. Beleza. Uma coisa, meus amigos, para vocês que não talvez nunca trabalharam com projeto open source, existem duas formas de vocês contribuírem. Uma é a gente adicionando vocês como membros aqui do projeto. Então quando a gente vem aqui, a gente tem acesso aos times e as outras coisas. E o GitHub vai me pedir para colocar as coisas aqui, mas a gente pode adicionar vocês como colaboradores, ou vocês fazem um fork. O que que é fazer um fork? É basicamente copiar o projeto para o usuário de vocês, igual que o Edmário fez isso. Então ele copiou o projeto para o usuário dele, criou uma nova branch, e aí ele faz um pull request do fork dele. Só que quando eu abro o meu código— deixa eu dar um zoom aqui no meu VS Code também— quando eu abro o meu código, Luiz ficou com essa dúvida, né, Luiz? Quando eu abro o código, eu não consigo achar a branch desse cara. Por quê? Porque não tá no repositório, cara. Ele não faz parte do repositório, ele não consegue criar branch, ele não consegue publicar coisa aqui. Então, como que a gente faz? Existem algumas opções, mas a mais fácil é vir aqui, ó, code no GitHub, e você copia esse códigozinho aqui, ó. Você tem que estar com o GitHub CLI instalado, mas basicamente é gh github pr-checkout 79, que é o número do PR. Então se eu vier aqui e rodar esse código, já mudei para branch do cara e eu estou na branch dele. Show! Então eu dou um npm start, espero que tudo funcione. Beleza, eu venho aqui agora então, opa, Pronto. E eu vou procurar o progress bar. E cadê o progress bar? Não tá.

Ficou duplicado ali, ó.

Ficou duplicado, verdade. Tem dois progress bar. No problem. E já vi que tá bugado.

Sim, esse foi um problema que eu tinha encontrado quando eu tinha dado uma olhada rápida. [LAUGHTER] Eu acho que é bem antigo, mas mesmo assim tamanho do Progress Bar é como se tivesse nulo, entendeu?

Entendi. Então você tá me dizendo que esse Progress Bar, ele tá aqui, ó?

Sim.

Na verdade, ele não tá nem rodando aqui, né?

Eu creio, o principal, que esse é um detalhe muito importante. Normalmente, pessoal, Quando acontecem grandes atualizações na nossa documentação, sou eu quem estou desenvolvendo todas elas. Então, quando eu subo os ajustes, vai uma porrada de coisa de uma vez. Então, assim, o padrão de como funciona a nossa documentação, ele já mudou algumas, umas 3 vezes já. Em uma delas, eu consegui derrubar o nosso ambiente. [LAUGHTER] fazendo o teste ali na prática, mas eu creio que possa ser isso mesmo. Eu creio que seja o conflito, porque se você descer lá embaixo, ele tá com no PR, no link do PR lá embaixo, ele tá com conflito.

Entendi.

Aí eu vou dar uma olhada nesse carinha, aí eu subo, depois a gente volta para fazer o review dele. Eu arrumo os conflitos aqui.

Você vai arrumar os conflitos desse aqui então agora?

Sim, sobre nessa branch já, tá?

Não sei se você vai conseguir saber na branch do cara, tá?

Já tava aberto aqui.

Tá bom, fechou. Eu vou olhar outra aqui então, vou olhar o Command do nosso amigo Lucas Luiz. Mesma coisa, ele fez um fork. E aí eu vou vir aqui para o projeto, mudar para alfa, eita, mudar para alfa e rodar o comandinho ghpr. Deixa eu ver se tá de boa aqui para vocês verem aqui, cara. Size aqui mesmo, deixar no 100%. Tá de boa, qualquer coisa vocês mandam aí no chat, tá, guys? Deixa eu ver se tem alguma coisa aqui. Sim, sim, boa noite, galera. Tem um link do grupo da equipe, mano. O link do grupo da equipe eu não sei não, cara, tem que pegar lá no grupo dela. Depois eu mando lá no grupo para vocês acessarem também. Então aqui a gente tá no do Command agora. Eu já vou abrir aqui o componente para dar uma olhada, mas vamos ver aqui, ó, building, watching files, já tá rodando. Eu vou minimizar tudo aqui, eu vou abrir aqui de novo componentes. Caramba, ele não tá nem com a versão atualizada do Bem, bem antiga. Você também tá cheio de conflito, mas eu vou dar uma analisada no componente, guys, com vocês. Caiu, dou um retorno para o Lucas para ele resolver os conflitos, tá? Mas eu vou dar uma analisada no componente aqui para ver como é que tá funcionando, e eu vou ir mostrando para vocês aqui meu processo de analisar um PR. Deixa eu dar um zoom aqui. Vou dar um zoom aqui para ficar fácil vocês verem também. Eu sempre vou deixar, cara, a aba de DevTools aberta aqui. Como minha tela é grande, então eu sempre deixo a aba de DevTools aberta. E beleza, primeira coisa que eu vou fazer para analisar um componente, cara, quando vocês fizeram um PR, é abrir o ChatCN. Primeira coisa. Então eu bato o olho aqui, se eu jogar isso aqui para cá, isso aqui para cá, Eu vou bater o olho e eu vou ver se tá com uma interface igual ou parecida. Tem que estar pelo menos parecida. Se não tiver, a gente tem que já falar para ajustar. Mas aqui, ó, eu já tô vendo que a cor desse carinha aqui já tá diferente dessa. As cores aqui já tá com contraste bem maior, que na verdade tem que ser um contraste menor. Porque esse aqui não tem que ficar tão forte assim. Aqui tá uma coisa um pouco diferente também, tá vendo? E aqui tem esse Open Calendar aqui, não sei por que que tem esse escrito. Deixa eu ver se esse carinha aqui— e aqui tá bem, bem escurinho, cara. Tá, então a gente já tem alguns detalhes visuais para a gente corrigir. Então, primeira coisa que eu vou fazer, vou tirar print disso aqui, e aqui eu já vou comentar no PR do Lucas. Tô vendo aqui o chat, tá, guys? Eu já vou comentar no PR do Lucas aqui a diferença, mano. Então deixa eu mexer nisso aqui, eu vou deixar um do lado do outro. Só para a gente tentar. E aqui comentando sempre em inglês, meus amigos. Look, vamos tentar manter as mesmas cores. Look at the difference between Zard and ChatZin. Lucas é um cara internacional também. Então, cara, é de boa. Então, só dando um comentário aqui. É esse aqui mesmo, Lucas Silva, esse carinha aqui mesmo. Show! Tá comentado sobre essa questão aqui. Esse aqui eu vou fechar, esse aqui eu vou abrir. E aí, outra coisa que eu vou analisar, que eu acho que é uma coisa que vocês vão gostar, que é analisar o código, cara, então, por request, para ver o que que a gente já pode fazer de diferente aqui, se tem alguma coisa que a gente tem que melhorar no código. Então vamos dar uma analisada aqui no componente de command. Então primeira coisa que eu, que a gente já tem é o componente de command, zart-command-component. Ele criou os zart-size aqui, zart-command-variants. Então a gente já tem uma variante do command aqui, certo? Default size é o default dela, beleza. Ele tem um placeholder, type of command, search, tá? Isso aqui, se quiser, uma coisa que a gente— deixa eu ver— esse placeholder, ele é um input, então a gente pode colocar qualquer coisa. Perfeito. Então a gente tem aqui 2, 2 formas de usar. Então, o z-command, eu consigo já customizar tanto size quanto placeholder. Perfeito. Eu tenho um onChange, um onSelect, uma class normal que a gente normalmente tem, e o command input. Beleza. Esse command input provavelmente é o carinha que a gente tem Esse carinha aqui. E uma coisa que eu já percebi é que ele não tá filtrando o que o ChatGPT já faz, cara. Porque na verdade esse comando, a ideia dele é isso, né? A gente tem uma lista de comandos e aí quando a gente pesquisar por alguma coisa, igual por exemplo aqui, ó, essa é a ideia, que a gente tem uma lista de comandos e a gente pesquisa por billing, ele já lista aqui, já faz o filtro, já mostra somente o billing. Para eu apertar e ele direcionar para algum lugar. Então essa é a ideia do command. Então se a gente pesquisa settings aqui, ele vai fazer esse filtro.

Então isso é uma coisa que a gente precisa ter, que inclusive, dando uma olhada, é algo que até a própria documentação também a gente vai utilizar. Sim, você consegue dar uma pesquisada lá para encontrar um tópico específico que que você queira pesquisar na documentação.

Sim, o Brenner, cara, acabou de mandar uma mensagem aqui, ó: o menu mobile precisa ser baseado na issue do modal ou dá para fazer? Cara, dá para fazer separado, não precisa usar o— falando aqui, né, do modal, eu acho que não precisa usar o modal para fazer isso. Acho que dá para a gente fazer no simples, no HTML e CSS que a gente normalmente faz nos sites. Se a gente vê aqui, aqui, ó, nos components, a gente pegar esse componente aqui, né, jogar ele para esquerda em vez de só sumir com ele. E aí quando clicar no botão aqui, ele traz ele para direita em vez de ser um modal. Acho que seja, resolve o problema. Porque hoje eu acho que a gente só tá sumindo com esse, com esse carinha daqui.

Ou pode ser também um componente diferente para cada um, porque na homepage a gente vai ter tipo, vai ser, vão ser tópicos diferentes na sidebar. Porém, quando você já tá na documentação, seria outro, que aí seria esse com os atalhos para você ir para cada etapa da documentação. Entendi. Aí eu acho que essa é a dúvida por conta da dependência do serviço.

Sim, deixa eu ver aqui no Angular Dev como é que é, cara. Olha lá, que eles fizeram bem diferente, mano. Ou não, não, mano, fizeram a mesma coisa aqui, ó. O menu que eles fizeram aqui na esquerda Eles escondem e depois mostra. É mesmo, cara, só que ele tem essa, fizeram sumir e aparece aqui, mano. Só que aqui o menu deles é um pouco diferente, né? Eles não tem um menu horizontal aqui em cima. Que é o que a gente tem. E o ChatCN, como que é, cara? Vamos aqui em componentes. Caramba, mano, esse aqui é horrível, pelo amor de Deus. Aí você tem que dar um scroll aqui até você achar o componente que você quer. Dropdown, aqui você tem como dar um— não, o search documentation é esse aqui também. Não, ainda já estão pegando viagem.

Eu creio que no mobile ele deve ser diferente. Eu acho que na versão desktop é quando você clicar, abre aquele comando, se eu não estiver enganado.

Aqui já dando um erro aqui, ó. Dialog box requires a dialog title. Já tá dando um errinho aqui, ó. Não, no menu pode não precisar ser o mesmo certinho não, cara. Não gostei não.

Sim, a ideia principal do Zard é que a gente se inspira muito no chat, sim, mas não queremos ser tanto assim uma cópia.

É, copia, mas não faz igual, tá ligado?

Exatamente.

Aí ele falou que é o exemplo, o exemplo do menu do chat mobile é bem diferente. Não tinha nem prestado atenção nisso, cara. Mas dá para ser, cara. Clicou aqui, ele abre um menuzinho para o lado ou para cima. Mas eu penso em algo parecido com isso aqui, cara. Tem que fugir muito não, algo mais simples mesmo, tá? Então deixa eu parar aqui. E voltando para esse componente de command aqui então, meus amigos, então deixar as cores iguais. A gente precisa fazer esse filtro. Então eu penso, cara, porque aqui a gente, se eu não me engano, deixa eu ver como é que o Lucas fez aqui. A gente tem um carinha aqui e a gente tem um content. E aí é dentro desse content aqui que a gente coloca o z-command option group. Então a gente sim tem um zcommand option group, esse carinha aqui, que ele tem mais algumas coisinhas aqui normal. Ele tem um zcommand option component. Agora a grande questão, mano, é como que a gente vai fazer esse search, porque a gente vai precisar Uma coisa é certa, a gente vai ter que ter um View Options Content Children, esse carinha aqui, ó, que ele já tá usando isso aqui. Ele tem esse options, e aí provavelmente nesse options eu tenho o value. Label. Aí que você me quebra, meu amigo. Será que a gente tem que deixar esse aqui no any? Não, pô, que a gente tem que, velho, label e icon deveria ser um string, pelo menos o padrão que a gente tá seguindo.

Sim, label string também.

Make code suggestion. Eu gosto é disso aqui, mano. String, mano, ele tá pegando dele. Ele tá pegando o meu outro usuário do Git. Que maravilha! Fazer o comentário por aqui então. Vamos vir aqui, vamos achar o Command Option Group. Esse carinha aqui, qual que eu tô, cara? Command Option só, caramba! Como é que eu aumento isso aqui, velho? Command Option, esse carinha aqui. Então aqui, o que que você falou, Luiz? Que o icon tem que ser um string, certo? Sim, o label também, né?

É um string. Agora, o value, acho que realmente poderia ir para não, porque pode ser uma coisa bem variada, entendeu?

É porque pensando Pensando, um option ele pode ser um string, ele pode ser um objeto, ele pode ser várias coisas, cara.

Sim.

Então eu já vou dar um start no review aqui falando sobre isso. Então vamos continuar aqui na nossa, o command aí que é um model shortcut. Que que esse command faz, cara? Aqui Agora, essa aqui é uma pergunta. Que que esse model aqui, mano? Isso aqui é signal? O cara tá usando signal aqui, mas tá botando NGIF aqui. Ô, Lucas, me ajuda aí, mano. O NGIF que o cara tá usando, velho.

Essa é a força do hábito, é totalmente compreensível.

Aí não, pô, NGI assim não, mano, tá maluco.

O Dead Guy falou que a gente poderia usar um generic para o, para o Zé Velho, cara.

Usar um generic aqui, mano, que aí a gente teria que passar, seria para o pratepagem ali do ZVelo. Perfeito, tô ligado, tô ligado. E aí, só que o que eu tô pensando é como que a gente vai, acho que ele vai já pegar automático, né, quando a gente passar o velo. Nossa, mas pensando, não sei se vai dar certo nunca. Z command option, talvez dê, cara, porque aí ele vai pegar o— como a gente tá deixando aqui a tipagem genérica, ele vai pegar o valor que a gente passou genérico e vai tipar aqui. Eu só não sei se ele vai deixar isso certinho, cara. Aqui tá no T, você come de option string. Boa! Se eu passar um objeto aqui, se eu passar um pudim, um array pudim 1, 2, 3, nice! O cara é brabo aí, ó. Puta ideia boa, mano. Gostei de fazer review live. Já vou editar aqui, ó. Quer ver? Deixa eu cancelar, excluir, string string. E aí eu vou vir aqui, é que é, aqui vai ser um T string, string. Oi, Dead Guy, você tem GitHub, mano? Queria botar seu GitHub aqui como sugestão, meu amigo. Se tiver, manda seu GitHub aí. Por enquanto vou deixar aqui, a gente continua para cá. Mas então a gente deixa aqui como generic. String, string. Eu vou alterando o código aqui só para já ir vendo o que que vai rolar. Usar label, ele tá usando um template Outlet. Aqui, strings not accepted in place ref. Ele tá me falando que— ah, mano, olha o que que ele fez aqui, velho. Ele fez uma variável para saber se a se é uma string ou uma label. Eu sei uma forma melhor de resolver isso, mano. Eu só não sei se eu cheguei a colocar aqui. Deixa eu ver se eu tenho aqui ainda. Sobe, cara. Aprendi de Card. Card V2 example. Essa branch aqui, cara, não, que não. Ô caramba, libzard, lib components, shared utils, tem alguma coisa. Deixa eu ver se é isso aqui que eu tô caçando. Esse carinha aqui, ó, que eu tinha criado no core. A gente não tem aqui, mas dá uma olhada o que que eu tinha feito, cara. Aqui eu tinha feito uma diretiva que faz isso. Então esse carinha do card aqui, ó, por exemplo, em vez da gente fazer, ó, dá uma olhada, mostrar para vocês que que eu fiz aqui. E aí eu vou falar para o Lucas para a gente trabalhar dessa mesma forma. A gente vai ter uma diretiva que chama z-string template, z-string template outlet, e a gente passa variável. E aí dentro dela aqui também a gente passa essa variável. Então a única coisa que eu fiz foi esse ng-container aqui com a diretiva. E aí, em vez da gente fazer isso aqui, ó, se é uma string label eu passo ela como um valor, se não eu passo ela como um template, a gente faz só isso aqui. E aí ele já vai renderizar, o Angular já vai renderizar, é, tanto sendo uma string quanto sendo um template. Que a gente passar no Angular. Então, por isso que no card, por exemplo, da demo, aqui, ó, cadê, cadê, cadê? Doc, card demo custom, aqui, ó. Então a gente tem a opção de passar tanto como uma string. Oxe, esse card aqui tá Tá bugado, default aqui, ó. Então a gente pode passar o title, por exemplo, como uma string, e o description. Quanto a gente também pode passar ela como um template. Então eu consigo criar um ng-template, coloca o template de title, e aí eu consigo customizar aquele template, tá bom? Então o que eu vou falar para o nosso amigo Luiz fazer é basicamente isso, meus amigos. A gente vai ter esse string template outlet aqui. E aí é uma diretiva que basicamente vai receber isso aqui. Eu peguei do NG Zorro, tá? Eu não criei esse negócio do zero aqui não, mas basicamente ele vai dar uma, ele vai recriar a view aqui dele. E aí a gente verifica, né? Ele já tem uns templates outlet, a gente verifica se é um template ref Então a gente tem uma variável aqui, ó, que verifica se é uma instância do template ref. Se for um template ref, ele vai dar um ViewContainer, create MDView, e mostrar o template ref. Se não, no MDView ele vai só passar o contexto aqui, ó, e ele vai mostrar o texto como ele deve ser, tá bom? Então ele tem algumas outras coisas aqui. Ele tem um construtor que a gente pode transformar isso aqui para as versões mais novas do Angular. E ele tem mais várias outras coisas aqui para recriar e atualizar essas— a view toda vez que acontecer alguma mudança. Então esse carinha aqui, essa diretiva, eu peguei lá do @ng-zorro, e é uma diretiva que simplifica bastante a nossa vida quando a gente tem que fazer algo desse tipo aqui, ó. Porque se a gente só aceita uma string aqui, mano, a gente não consegue customizar os valores do HTML, tá bom? Então essa vai ser uma forma que a gente vai poder fazer aqui. Deixa eu pegar esse carinha aqui. Não, command não. Aqui. Commit, Command, Option. Tá aí, Luiz? Tô sim, tá bom. Tô vendo mais comentário no YouTube também, não sei se o pessoal tá por aqui. Dá um oi, meus amigos. Tem 11 pessoas com a gente, tá bom.

Mãe, tô famoso!

2 pessoas leram. Ô, mano, o negócio aqui ele mostra quantas pessoas leram o QR code, tá?

Sim, notificou aqui para mim.

Que da hora, mano!

Até aqui para mim também mostrou quando alguém escaneou.

Que da hora! Cadê aqui?

Eu tô aqui na branch do progress bar, cara. Eu não sei se alguma limitação, porque agora eu tô usando Linux, né? Eu abandonei a vida de Windows. Tinha algumas alterações que eu já tinha feito há um tempo que ele não pegou, aí tava bugado aqui nessa branch específica. Daí eu tô ajustando, daqui a pouco eu tô subindo.

Fechou. E aí, deixa eu só pegar um exemplo aqui para mostrar para ele. Então tô falando, você poderia usar essa diretiva aqui. Aí eu falando, então você vai conseguir, then you'll be able to use the variable. Dessa forma. E aí eu vou vir aqui, eu vou colocar um código, ts, isso aqui não, HTML. Show! Então mais uma coisinha aqui do PR. A outra coisa que eu tava comentando também era do NGIF, mano.

Mata, Njie Ife! Esse daí foi bom enquanto durou.

Ife. Aqui. É isso aqui mesmo, é isso aqui mesmo. Njie Ife. Existing icon, tá. Então a gente já tem algumas coisinhas aqui do PR. Se tiver o command, o command no caso, deixa eu pensar. Ah tá, Open Calendar. E o shortcut, se tiver também, ele mostra. Perfeito. Agora alguém me explica o que que é KBD, gente? KBD, que que é isso aqui, mano?

Abreviação de cabide.

Que que é isso aqui, mano? Que que é KBD, cara? É uma tag aqui que o cara usou, mano. Tá lá no HTML element.

KBD, será que é para colocar os atalhos de teclado HTML?

Que viagem torta que é essa aqui, cara? Uma entrada de teclado. Eu acho que é para ficar. Cadê o Zadio? Ai, mano, aqui. Não tô entendendo o que que é KBD, mano. Cabide. Que que é cabedelo?

Exatamente isso. Eu acho que é a tecla semântica para a gente conseguir exibir, indicar que aquilo dali é atalho de teclado, que aquilo dali é uma tecla.

Não, ah, mano, é só para, tipo assim, pelo que eu entendi, né, ele deixa nessa formatação, cara.

Sim, cara, eu curti.

Sei não, mano. Cadê o command? O chatzinho usa isso? Eu tenho quase certeza que não, mano. Ela é só um spam mesmo, velho.

Sim, eu acho que ele colocou pela questão do— deixa umas práticas mesmo. Eu não achei ruim, eu acho que dava para só personalizar um pouco para essa bagaça aqui, cara. Mas eu não, eu sei, eu curti. Sendo bem honesto, eu nem sabia da existência disso daí. Também nunca vi, nunca precisei usar.

Aqui, ó, uma pergunta do Dead Guy: realmente preciso usar model em vez de input? Creio que ele tenha feito assim só para poder fazer o set no teste unitário.

É, isso faz sentido porque tá usando o model.required, etc., só que na maioria dos componentes, se não todos, estão sendo utilizados inputs. Até os componentes internos a gente usa o input signals.

Eu vou perguntar para ele, cara, porque que você tá usando o model aqui em vez de Input, simples assim. Cadê, cadê, cadê? Why are you using model instead of input? Instead of show, a forma correta seria você tá Os impulsos seria com fixed, fixed component, set input. É, mano, essa parada do signals para teste unitário, se a gente vai ter que chamar o Henrique Custódia para conversar com a gente, não sei se ele tá por aí. Exatamente, mas pelo que o Dead Guy falou, é isso, mano, a gente tem que setar ele de uma forma diferente, mano.

Sim, o nosso herói do Membros dos testes sanitários, inclusive comprem o curso dele aí, ó.

Brabo, membros do teste sanitário. Eu não curto fazer isso aqui, cara, não curto ficar acertando na mão. O normal, né, o corpo, tipo assim, não vou dizer o correto, né, mas o cenário perfeito seria a gente criar um componente, cara, e passar ele igual eu fiz. Caramba, aqui não tem nem meu componente.

Nosso herói Henrique Custódia acabou de entrar na live, o cara aí, ó.

Estamos falando de teste unitário, cara. Mas é isso aqui, é usar o host element. Esse cara não, esse carinha aqui não, mano. Puts, mano, cadê meu? Não, esse aqui a gente não precisa. Esse aqui também não. O tooltip, cara, o tooltip eu tinha feito isso, mas ele não tá nem com o tooltip aqui. Eu acho que é, mano, acho que vai ter que mudar bastante coisa aqui, velho, porque ele fez essa branch aqui da main, não foi nem da alpha. Por isso que tá cheio desse, cheio de bug aqui, mano.

Sim, se acessa aí, eu acho que você consegue dar um git pull, mas aí teria que arrumar, quebra algumas outras coisas.

Eu vou só dar uma olhada aqui na, aqui eu sei que tem o tooltip, cara, mas eu só vou mostrar para vocês sobre questão do teste unitário, a parte que seria o Dev Alpha.

Então deve, Alpha não, Alpha e a Master tão iguais.

Mas é porque tem muito tempo, parece que ele fez, mano. Mas aqui, ó, no tooltip, o que que eu fiz? Eu criei, esse aqui é o teste, eu criei um componente para testar, cara. E aí dentro desse componente eu coloco as minhas variações dos testes e eu altero dentro do componente. Então quando a gente vai testar, por exemplo, um command aqui em vez de ficar setando as variáveis na mão, a gente seta no componente, que a ideia do teste unitário é a gente fazer o que o usuário faria, né? Mas aqui também tá de boa, mano. Mas eu acho que foi, deve ser por isso mesmo que o Dead Guy falou dessa parada dele ter usado o model ao invés do input. Tá bom, aqui eu vou deixar um N mesmo, velho, que eu já falei que tem que mudar e colocar outra variável lá. Mas a gente tem aqui, bom, isso aqui, ó, a gente precisa fazer com a variante, cara. Não aqui no código. Isso aqui a gente precisa fazer uma variante igual a gente tem o command variant aqui que ele tá usando no command component. Então a gente tem as variantes e a gente passa essas classes aqui, ó, para esse cara no command variant e a gente passa as variantes dos inputs. Aqui vai ser a mesma coisa. A gente vai ter que ter um classes. Então a gente vai ter que ter esse carinha aqui, ó, classes. A gente vai poder importar esses caras aqui. Isso aqui por enquanto eu posso tirar, é só para customizar a classe. Mas aqui vai vir aqui, ó, z-value. Só que aqui o command variante vai ser o command option variants. Então export const command option variants. E aí a gente tem várias variantes. Aqui eu tô só deixando o Copilot preencher. Command option variants. Eita, pera aí. Aqui, aqui e aqui. Por exemplo. E aí a gente passa no classes aqui, a gente vem aqui e faz isso aqui, ó. Perfeito. E aí a gente mata essas customizações que ele acabou fazendo aqui. Então disabled, ele tá passando todos esses carinhas aqui, a gente passaria esse carinha aqui para as variantes. É dessa forma que a gente tá fazendo aqui no Zard. Isso aqui, aproveitando para explicar para vocês, né, esse class variance authority aqui não foi ideia nossa que a gente tirou da cabeça. A gente tá pegando a mesma ideia que o ChatGPT faz. Então ChatGPT usa essa biblioteca Porque que basicamente ela faz? A gente chama esse carinha CVA aqui, tudo que a gente passar aqui no primeiro parâmetro ele vai colar, ele vai colar assim, né? Porque basicamente o que a gente faz é esse carinha vai transformar, vai ser as classes que a gente tem na nossa div, que o ChatGPT usa o Tailwind. Então a gente tá pegando esses classes aqui, então É a mesma coisa fazer isso aqui, ó, Ctrl+C, Ctrl+V, tá? Então fiz, colei esse carinha aqui. E aí nas variantes que a gente passa o valor aqui, né, true ou false, ou o valor dela, e aí baseado nesse valor, por exemplo, size for sm, ele vai colar esse carinha ali. Então o disable, se for true, ele vai colar esse valor aqui. Se for falso, ele vai deixar só com essas classes aqui. Então ele meio que automatiza essa parte da gente trabalhar com as variáveis do Tailwind. E é uma forma, entre aspas, mais fácil da gente ter controle de todas as classes e propriedades do Tailwind que a gente tá utilizando no projeto, para não ficar tudo no HTML aquela maluquice de fazer esses ifs aqui, deixar o código muito confuso. Então a gente usa essas variantes para isso, tá bom, guys? Então uma dica aí para vocês, como que a gente está fazendo aqui no Zard. Vamos ver o que que o pessoal tá falando aqui, ó. Interessante essa ideia, Dead Guy. Interessante ter um host component, nunca tinha feito assim. Normalmente uso set input mesmo e funciona bem. É, cara, teste unitário, cara, cada um tem seu jeito de fazer. Eu já vi, cara, ai, cara, eu já vi gente fazendo teste unitário do cara literalmente pegar a lógica que ele tinha no componente, copiar a lógica e colocar no teste unitário.

Hello, hello, Samuel, no te escucho. Deixa eu ver se foi aqui, eu vou dar um refresh na tela. É, ainda não tô escutando.

Sim, muito.

O pessoal tá falando aqui no chat também.

Alô, alô, alô! Alô?

Te escuto sim! O pessoal na live tá escutando?

Alô, alô, alô, alô, me ouvindo não tô assim agora estou vendo então agora sim o pessoal da live também não tava escutando e é demora um pouquinho para voltar tive que mudar o microfone aqui Não sei por que não, cara, não mexi em nada. Mas eu tava falando aqui do teste unitário, voltando aqui para o teste, que normalmente eu uso essa parte de ter um componente aqui no teste para eu testar esse componente. Aí eu posso criar vários componentes pequenos que fazem com que eu teste de uma forma mais assertiva. Pronto. Agora sim, foi tudo aí. Deixa eu voltar aqui, ó. Boa noite, estou criando meu primeiro projeto web para colocar no ar e a complexidade é tipo aquela lá, seu lado da igreja. Utilizo Supa também, não sei muito de mercado. Você acha que é um bom projeto para o currículo? Cara, qualquer projeto que você fizer para o seu currículo é bom. E agora, se for uma complexidade tipo ministério, aí, meu filho, é melhor ainda. Porque ministrar é complexo para caramba, cara.

É, quando você tá começando, uma coisa que eu acho muito legal, principalmente quando você já não tá mais naquele básico, cara, em vez de ficar fazendo projetinho de curso, se você tem uma ideia maneira, cara, tenta ajudar alguém. Vê, sei lá, o seu barbeiro, a sua igreja, seu pai, vê algum projetinho, alguma coisa que você consiga desenvolver que vai ajudar eles. Isso é um case muito legal para você ter no currículo, principalmente quando você tá começando. Isso aí realmente é algo bem legal.

Case bom, mano, é esse case aqui, velho. Mano, esse aqui eu não acreditei hoje não quando eu vi, cara. Pera aí, pera aí que eu vou mostrar para vocês. Cadê projetos, mano? Olha essa maravilha aqui, cara. O maluco me fez um SAS de certidão de nascimento e caderneta de vacinação para bebê reborn, velho.

Esse cara tá além.

Esse cara aqui, mano, ele atingiu um nível, o nível de, sei lá, cara, esse cara não tá nesse ano, ele tá em 2050, velho. O maluco criou um Saje bebê reborn, velho, para criar os documentos, mano. Vamos criar um bebê reborn aqui, mano. Essa live tá muito bagunçada, velho. Meu Deus, eu tô falando de bebê.

Vamos colocar o Zardinho aí.

Vamos, Zardinho da Silva, mano do céu! Nasceu quando? Nasceu esse ano, né, cara? O Zardinho. Vamos ver qual que foi o primeiro comício do Zardinho aqui.

Pô, acho que foi ano passado, cara, se não for mais. Caramba, não, ano passado sim, porque tem aquela primeira versão que eu tinha feito com HTML puro.

Primeiro commit do Sardinha, não, 5 de março. Ah, tá, 5 de março de 2025. Então pera aí, Sardinha. Maio, abril, março, 5 de março. Local e data de nascimento: Brasil. Brasil. Pais em resposta: Samuel Rizonho e Luiz Ardi. Rizonho e Luiz Ardi. Pediatra: quem vai ser, quem quer ser nosso pediatra, cara? O pediatra dos Muito bom, mano! Doutor Custódia, meu Deus! Será que isso aqui vai virar um corte, velho? Que merda, mano! Agora não quer nem saber, mano. Se o cara chegar no final, alguém vai ter que fazer o Pix aí para o cara. Selecciona as vacinas, mano do céu, isso aqui tá muito bom, velho. Deixa eu dar zoom para vocês verem.

Cara, tá bem completinho, mano.

Seleciona as vacinas que seu bebê reborn já tomou ou que você gostaria de incluir na caderneta.

Eu sei que o Zard, ele é, não tá prevenido de poliomielite.

Coitado do menino, quem tá valente tomou BCG, mano. BCG é essa aqui, é Tem que ter. Olha lá, você é louco, Drauzio Variola, mano, nem fodendo, velho. Muito bom, mano. Olha lá, sold out. Meu Deus, chuta, bebê. Eu vou deixar esse Drauzio Variola aqui, mano. Isso aqui tá muito bom, meu Deus, mano! Tríplice viral, os ardinhos, tá? Hepatite A, hepatite B, poliomielite também. Foi o que você falou que não toma. Não, não tomou. Rotavírus, febre amarela, tetraviral. Tem a tríplice e a tetra. Tá bom, tá bom, né? Ficou faltando umas, esquecemos de dar umas vacinas para o garoto. Certidão de nascimento já saiu já. Que viagem torta que é essa aqui, mano? Ah, eu tenho que pagar para me fazer o download, tá?

Vê ali no final, finalizar ali.

Finalizar. Após conferir, prossiga para o download dos documentos. Mas aqui, meu amigo, já temos aqui, ó. Para que eu vou pagar, velho?

Tira o print.

Aí, já vou mandar lá no grupo. Jardim da Silva, mano, isso aqui tá muito bom, velho. Meu Deus, mano! E cadê o pediatra? Tá aqui, Henrique Costa. Calma aí, mano, calma aí, calma aí, calma aí. Como é que eu vou tirar print desse negócio aqui agora? Ficou muito grande. Pera aí.

Aí, ó, polietileno silicone tetra pack, o Dereck comentou.

Isso aqui ficou tudo rosa, né, mano? Putz, velho, usadinha, não sei. Ele não sabe qual que é o gênero dele ainda. Caramba, ficou com um negocinho aqui na frente, velho. Eu sou chato. Que isso aqui sai. Pera aí que eu tô mandando lá no— tô salvando lá no Zap Zap.

Ela acabou de falar que ele solicita doação. Essa aplicação, mas o download é grátis. Cara, se eu fosse o dono, mano, eu colocaria aí um trackingzinho para saber quantos downloads ele vai conseguir.

Olha lá, mano, olha lá, Zardinho da Silva. Reborn, mano. Esse maluco aqui mitou, velho, mitou, mano. Se alguém quiser fazer um Pix para esse cara aí, pode fazer, cara. Ajude-nos a mandar essa causa fazendo uma doação via Pix.

Exatamente, todos aqui a favor de bebê Reborn.

Meu Deus, mano, mano, será que esse Pix vai para o menino? Mas eu vou fazer um Pix para ele, mano, fazer um Pix aqui na live para o menino. Drauzio Varela me pegou muito, velho. Deixa eu ver para onde que vai esse Pix aqui, cara. Ixi, deu erro no QR code do Pix, tá?

Bug em produção.

Se o moleque lançou um QR code aqui que não funciona no site dele, aí deu ruim, mano. Tá perdendo dinheiro. Ah lá, mano, deu erro mesmo.

Nem o copy e cola funciona.

Nossa, mas que copia e coloca esse aqui, velho. Caramba, deixa eu tentar o copia e cola aqui. Aí não, mano, deixa eu avisar ele aqui, velho. Já avisei o maluco, o carinha aqui, velho. Deixa eu ver se esse copia e cola vai funcionar. É Pix copia e cola, é aqui que clona cartão. Sai fora, mano, não tô mostrando nada para vocês aqui, pô. É, não tá funcionando não, mano. Coitado, mano. Aí deu ruim, pô. Depois nós faz um Pix para esse cara para ajudar ele aqui. Mas, mano, mano, isso aqui é ter ideia legal, mano. Aqui o SaaS do cara, velho. Pagamento facilitado aí, ó. Geração automática, documentos após confirmação. Maluco, o maluco meteu o louco, velho, meteu o louco, pegou o hype e mandou bravo, brabo, brabo, brabo. É isso mesmo, é do Luiz Felipe, esse carinha mesmo. É o outro pedindo dinheiro aqui. Me empresta um dinheiro aí que eu mando para ele, pô.

Deixa eu segurar aqui o dinheiro para você.

Ai, velho, olha lá, cara, aqui deixa eu ver o que que mais a galera tá fazendo. Ele solicitou doação, polietileno, silicone, tetrapaque. Ah, nem, velho, pelo amor de Deus, mano.

Vou voltar aqui para prevenção contra derretimentos também, algo muito importante.

Prevenção que?

Contra derretimento.

Derretimento. Aí, velho, tá bom, vamos continuar aqui. Então o Luiz, o nosso outro amigo Luiz aqui, ele tem que usar uma variante aqui, mano. Putz, vai ter que mexer com isso mais aqui, velho. Eu acho que vai ser mais vantagem criar uma outra, uma outra branch da Alpha e codar da outra branch.

Ou assim, o conflito você conseguiu arrumar? Esse daí realmente é, eu tô arrumando na maioria porque realmente Eu entendo que eu tô subindo sem atualizações de uma hora para outra, então eu consigo arrumar mais fácil. Aí ele consegue continuar com a mesma mente, assim fica melhor.

O cara perguntou o que que é chat CN aqui, mano. Pera aí, pera aí, pera aí, preciso colocar uma sessão. Vamos olhar os comentários aqui, que a live aqui é ao vivo. Ele falou umas baguio do bebê Ribon registrar e do postinho do susto.

Cara, dá para colocar, mano, registrar tipo um token único da blockchain, tá ligado? Aí você coloca a tela do BBB Reborn, aí assim você realmente tem a guarda única dele.

Aí, ó, aí, ó, a ideia de startup aí, ó, já faz uma startup disso, pô.

Já podem pensar ali, já pode ser implementação para documentação que ele tá fazendo ali, ó, para o bebê.

Aí, ó, que que é o chat? O outro já tá respondendo aqui, ó. ChatGPT é um cara que criou um mecanismo para instalação de componentes, seu codebase, sem usar o pacote npm. Virou padrão de mercado. Isso mesmo, é uma biblioteca que o pessoal aqui, ó, 10 frases. Aqui é live, é muito bom. Risonho 2025. Tá certo, mas chatzinho, esse carinha aqui, mano, uma biblioteca de componentes para React só, open source. E basicamente que os cara fizeram aqui, essa biblioteca de componentes você não instala ela na sua máquina, ela fica, os componentes ficam lá no npm, o componente vai para dentro do seu projeto. Então é como se eu chegasse nessa pasta de botão aqui, ó, copiasse esse componente para dentro do seu projeto em Angular ou em React. E aí você tem total acesso ao componente para alterar e fazer tudo, tá bom? Posts automáticos para conta Instagram do seu bebê reborn influencer. Meu, mano, a galera aqui tá, a galera aqui tá foda, velho. Aí, mano, essa ideia dos caras, cara, mas daí é legal, mano. Melhor, mano, melhor. Dá para a gente fazer um bot no WhatsApp para você mandar a foto do seu bebê reborn e o bot falar se o seu bebê reborn tá com a saúde boa ou não. Aí, pelo desgaste do seu WhatsApp.

Exatamente.

Quem vai fazer a landing page já para nós? Você é louco, mano! O negócio é criar uma creche de bebê reborn. Essa aí também é da hora, velho. Tem creche cachorro já, pô.

Exatamente. Só tem que tomar cuidado para não deixar as crianças muito tempo no sol, senão vai derreter.

Se o bebê reborn, ele cresce, ele virou— meu Deus, mano, deixa eu tirar um negócio desse daqui, velho. Aí, com calma aí nos comentários, mano.

Eu já vi os caras comentando sobre bebê, como eu compro um bebê reborn já com 18 anos.

Ai, vamos voltar para cá, mano. Já deu mais de uma hora de live, velho. Vocês são muito maluco, mano. Aí, ó, mais uma ideia: geração de vídeo com API para fazer seu bebê reborn se mexer, pelo menos no celular.

Melhor ainda, para fazer ele falar, pelo menos no celular.

Meu Deus, mano! Vamos voltar para os hardwire aqui, mano, pelo amor de Deus. Tá, então eu tenho que comentar aqui no PR do Lucas, mano, para ele. O e-code aqui é em português e inglês. Español, manitos. Nos hablamos español también, manitos. We could use variant here. Could use variant here. Hmm, deixa eu pegar esse carinha aqui. Command variant. Vem para cá, GitHub. Oxi, aqui que que eu tinha feito aqui mesmo assim. E aí esse carinha aqui é o mesmo daqui, é, eu só vou colocar um exemplo aqui. Tessie. Tô vendo umas mensagens aqui no grupo do Zap. Tem mais gente chegando aí, mano. Ai, ai, mano, já falamos de Zardwide, bebê reborn.

Cara, temos até um pequeno ponto aí que esse é um porém que já falaram bastante, por conta da documentação que ela ainda tá sendo desenvolvida. No site, mas é sobre a forma na qual o Zard vai ser instalado no projeto. Porque temos assim, a ideia realmente nessa questão com o ChatGPT, a gente vai realmente copiar bastante. A ideia é que realmente seja muito mais flexível para você conseguir fazer instalação de um componente novo. Então quando você iniciar um projeto novo, você pode utilizar a nossa CLI que a gente está desenvolvendo pro próprio Saaad, que ele já vai estar adaptada perfeitamente para um projetinho Angular, vai ser 100% focado nisso. E também para você ir fazendo adição de novos componentes. Então você vai ter opção de fazer manual, porque assim, o que a gente tá tentando mudar um pouco é até comparada aos nossos, entre aspas, concorrentes que também estão desenvolvendo esse porte para o Angular é que a gente tá utilizando muito menos dependências. Então muita coisa realmente é, são coisas mais do dia a dia, mas para você utilizar boa parte dos componentes você não tem tantas dependências assim. Então caso você queira fazer um update, porque obviamente quando a gente já tiver uma versão 1.0 muitas alterações já vão ter sido feitas, sempre que acontecer um update, não só na sidebar, a gente já vai ter indicador ali que aconteceu essa configuração. Mas em vez de você ter que fazer um pedido de via CLI, caso você queira, é só você ir lá, copiar do site, colou aí bonitinho. Então a ideia é que tenha as duas opções para variar do público aí.

Sim, é porque hoje a gente tem essa que você colocou aqui, né, manual, que tem que fazer isso aqui manualmente. Mas a ideia é fazer isso aqui que o ChatGPT faz, cara, é a gente dar um npm zardui init. E aí ele já vai fazer toda essa configuração aqui, né, mano?

Exato.

Vai usar, adicionar o Tailwind, vai instalar essas dependências que a gente tem, vai configurar os paths, vai deixar tudo prontinho. E aí depois vai ser só isso aqui, ó: npx zardui add-button.

Exatamente. Você só vai adicionar cada componente que você quer usar. Se você não quer usar todos Fica opcional. Quanto a CLI, a gente ainda está— estamos aliando ainda alguns detalhes.

É isso mesmo. Então mais para frente a gente vai ter toda essa parte configurada aqui. Bom, voltando aqui no nosso Command Component, a gente tem uns tipos aqui, a gente vai precisar atualizar isso aqui depois também. Com os tipos desse carinha aqui. Só que aqui ele tá usando isso aqui onde, cara? Exato, command option. Perfeito. E o command component, cara, tem bastante classe. Ele tem o window aqui, mas talvez a gente precise Eu não sei, cara, como é que é o chat CN. Uma coisa boa que a gente tem, que a gente consegue fazer isso aqui, cara.

Assim, tem um pequeno porém que é sobre a questão das variantes, é que era uma coisa que eu até vi quando tava sendo analisado o componente de acórdion. Algumas classes elas não mudam, tem algumas classes que realmente assim nem faz muito sentido ela ter variant. Então assim, se realmente for algo chumbado, que é realmente para seguir aquele padrão, eu não vejo muito sentido ter tanta variante mesmo também. Eu acho que algumas coisas, e inclusive algumas coisas eu nem acho necessário. Por exemplo, eu creio que o Acórdion, deixa eu até abrir aqui, ele não tem variant. Se tem, deve ser algo mínimo, porque realmente não é necessário. Os padrões que você quiser editar Nesse faria mais sentido você realmente ir lá e alterar diretamente no componente para se adaptar ao que você quer no projeto, seja mudar ícone, mudar alguns padrões. Mas realmente esse não é— alguns componentes realmente eu não vejo tanto sentido ter tantas variants. Acho que não funciona para tudo.

Perfeito, também acho. A grande questão é a gente deixar aqui tudo certinho. Mas a gente tem essas variantes aqui. Eu sei que aqui ele já tá usando os input, tem um comma de input aqui. Esse comma de input ele tá usando para alguma coisa, cara. Caramba, tem bastante código ainda, cara. Vamos analisar essa bagaça aqui para a gente ver o que que a gente fez aqui. Até um selected index. Content children, um query list para ele pegar todos os grupos. Os grupos, os grupos são esses grupos aqui. Perfeito. Então aqui ele dá um query list nos grupos. Initialize options. New options, groups, reduce. Ele cria as opções. Update option selection. Go into options and select, select index. Mas aqui ele fez alguma coisa de selecionar que eu não achei uma forma de selecionar aqui, mano. Consigo digitar, mas eu não consegui selecionar. Não acontece nada, mano. Luiz agora deve estar no 18º sono dele já, porque mora lá para fazer Europa, e aí ele deve estar no 18º sono dele.

Ou ele acabou de acordar?

Não, não sei se ele acabou de acordar, não. Aí, ó, Falmir chegou aí também. Deixa eu ver uma coisa aqui, mano. Tem muita coisa, velho. Acho que tem que sentar com o Lucas depois, mano. Para bater um papo com ele, para ver o que que a gente vai fazer, cara. Mas ainda faltando bastante coisa aqui nesse, nesse command aqui. Falta conseguir selecionar, falta conseguir filtrar quando a gente digitar. Mas aqui, ó, find group by option index. Tem muita, muito código aqui, cara. Como que o ShadCN deixou isso aqui tudo num arquivo só, mano. Ele tem a dialogue própria, dialogue, dialogue content, registry default UI dialog. Não sei o que que é isso aqui, é provavelmente o dialog dele, porque o command aqui do do ChatCN, ele tem também uma parada de você conseguir usar ele como um dialog. Na verdade, é a principal funcionalidade desse dialog, cara. Igual aqui, ó, document. A ideia do dialog é isso aqui, guys. A gente tem isso aqui, ó, um lugar onde você aperta Ctrl+K, por exemplo, ele aparece os links. Links, Getting Started. Aí quando eu clico, ele já me manda para o lugar, para o link, ou ação que eu quero fazer. Essa é a ideia do command, porque o command só ele assim não faz sentido. Ele tem que ser um dialogue. Isso é outra coisa que a gente tem que pensar, cara.

Eu acho que seria mais uma dependência para o, para o dial, que tá travando acho que uns 3 componentes, eu acho, né.

O Henrique, eu mandei mensagem para ele, ele falou que tinha começado a desenvolver, mas ele tava tentando desenvolver de uma forma sem usar, eu acho que o CDK do Angular. Aí eu mandei mensagem para ele, falou que eu posso, que é coisa, eu posso pegar essa tarefa, que aí eu pego esse modal para fazer e a gente já desbloqueia esses carinhas aqui também.

Sim, porque eu creio que boa parte dos outros até tipo confirme modal, modal padrão, esse mesmo, não seria mais a utilização do tô tentando lembrar, não. É só o serviço mesmo, não seria realmente algo tão grande. E a variante desse serviço seria que a gente utilizaria no sidebar, acho que para o sidebar e também para o toast, toast alert.

Ah, mano, o ChatCN usa uma outra biblioteca para isso, mano. Ela não faz, eles não fizeram isso do zero. Olha lá, eles usam essa biblioteca aqui, ó. Sim, npm install cmdk.

Tudo é um conglomeradozinho de várias libs. Assim, pro React faz sentido, pro Angular não muito.

Pro Angular não. Mas aqui, por exemplo, se a gente pega aqui o código, ele vai usar Command input, command list, command empty. Caramba, ele tem command de várias. Na versão Raycast linear, tem vários tipos de command aqui, cara. Mas a gente não vai usar uma biblioteca para isso, cara. A gente vai fazer o nosso próprio command.

A gente vai ter só para coisas bem específicas, por exemplo, carrossel, que aí realmente não dá para fugir muito. Fazendo à mão seria psicopatia já.

Parece que um cara criou isso aqui para o Angular, velho. Olha lá, criou, mano. Que da hora! Criou mesmo, NGXpert sem MDK. Só que eu não acho que faz sentido, mano, a gente usar uma lib só para isso, velho.

Não, porque eu acho que só com serviço a gente já resolve parcialmente esse problema.

É, então realmente seria só o que o Lucas fez aqui, o Luiz fez aqui, é isso aqui, mano. Só que a gente vai precisar adicionar um filtro aqui. Então, por exemplo, profile, ele vai filtrar e mostrar e colocar isso aqui para a gente conseguir usar no modal.

Exato, que aí seria só passar para você nisso.

Exato.

E configurar o trigger, né, pelo comando.

Exato. Agora o que eu tô me perguntando é, pensando, pensando numa boa experiência, se a gente vai usar um modal Eu poderia, em vez de criar esse command, todo um HTML.

Ele está junto do serviço? Não, mano.

Eu tô pensando, em vez da gente criar um HTML do command, a gente mandar só um JSON.

Eu acho que ele poderia também ser nutrido por um JSON, tipo um JSON, um objeto só. Eu acho que isso funcionaria, era só definir um padrão, né, definir ali um contrato de interface para que fique melhor para todo mundo. Mas a questão do componente, eu acho que ainda seria necessário, entendeu? Mas assim, não realmente nessa questão de passar tudo. Sim, mas eu acho que dá para dar uma diminuídazinha, entendeu?

E eu pensava, pensando em algo desse tipo aqui, mano, porque basicamente, cara, um desenho que a gente pode passar aqui, mano. Então a gente passa lá o suggestions ou um title aqui de todo tamanho. Sim. E aí o label, o value. É porque, porque outra coisa, por exemplo, mano, esse command, qual que é o objetivo dele? O objetivo dele é você executar uma ação, certo?

Sim.

Então aqui, em vez de ser um value, eu posso ser uma função. Boa!

Pode também possível passar uma função, né?

Um callback com callbackzinho, pensar, ou pode tipo assim, porque ng-zorro é bem parecido com que eu tava pensando em fazer, algo bem parecido com modal do Zorro, mano, no sentido de a gente abre o modal A gente tem um serviço de command. Deixa eu ver aqui. Service, modal service, esse carinha aqui mesmo. Esse aqui, ó, this.bzard-command-service.

Não esquece de dar um zoom aí.

Ai, perdão, mano. Boa! Eu pensei em lançar um, em algo parecido, cara. Tipo assim, lançar um usar de command service e a gente dá um create e a gente passa em um array para ele os objetos e as coisas que vão estar no command, cara.

Isso faz sentido, eu curti. Porém, tem, eu vejo só um pequeno detalhe, que seria, por exemplo, eu tenho ali calendário, search emoji, calculadora. Vamos supor que o calculadora, em vez de tipo clicar, eu dei o trigger, abrir, cliquei, em vez de tipo me direcionar para calculadora, e se ele chamar uma função, entendeu? Para tipo, sei lá, abrir um modal, e o modal tem a calculadora, entendeu? Sim, só essa questão desse callback que eu fiquei confuso como funcionaria nesse padrão que você sugeriu.

Mas ficaria assim mesmo, mano, porque a gente poderia passar, porque igual aqui no Zorro, o que que a gente tem? A gente tem cnz, um OK aqui, ó. Sim, esse carinha aqui nada mais é do que o trigger quando eu dou um clique no OK. Então quando eu abro o modal no Zorro, eu tenho o cancel e o OK. Quando eu clico no OK, ele chama esse carinha aqui.

A gente pode colocar o retorno personalizado. Eita, um retorno personalizado que indique o que foi clicado. Então acho que pode retornar ali a label, pode retornar o tipo, algo, um indicadorzinho ali que indique qual foi o item que o cara clicou. Porque se ele quiser fazer várias condições para fazer várias coisas diferentes, aí é possível, entendeu?

Aí que tá, mano, como é que esses cara fazem aqui, velho?

Seria no caso só retornar um evento.

Porque pensa, mano, porque eu vou criar isso aqui dinamicamente, cara. Sim, muitas das coisas que eu quero criar dinamicamente. E aí a minha ação pode ser uma função, ela pode ser uma rota para dentro da aplicação, certo?

Sim.

E para mim não faz sentido isso ficar, por exemplo, dentro de um OK geral. Quando eu clico eu chamo uma função para saber onde que eu cliquei. Sim, para mim isso tem que estar dentro do objeto que eu crio esse carinha aqui, ó, porque igual aqui no nosso option hoje—

é porque isso só me veio na cabeça, não, por exemplo, não da gente, é porque assim, só para confirmar, eu não sei se você tá pensando tipo a gente vai passar um JSON e esse JSON tá vindo, tipo, o cara montou, entendeu? Tô falando tipo de um JSON que, por exemplo, veio do back-end, entendeu?

Sim, sim.

Aí lá, tipo, eu vejo que não faria muito sentido, tipo, o cara retornar a função no API, pela API, entendeu? Aí por isso que eu falei dessa questão do quando você clicar no item específico você também poder ter opção ali de um event, né? Tipo aqueles eventos que a gente pega quando a gente tem no DOM, né, a gente tá fazendo algumas manipulações, algo que indique no que você clicou, entendeu?

Mas eu acho que isso aqui para esse commerce talvez não vai funcionar, mano, porque, por exemplo, esse value aqui, que é lenda, sim, beleza, cliquei no que é lenda, que que eu faço com isso aqui? Como é que, como que eu Pensa, eu chamei o command, beleza? E aí o command, eu sei que ele tem um onSelect, um select, onChange. Perfeito. Aí a grande questão é onChange, command change, console.log Command change, on change. Perfeito. A questão é, eu teria que tratar e fazer um ngIf ou um switch para cada um dos itens que eu tô colocando aqui, mano.

Isso, a ideia é que tipo isso poderia ser algo opcional, entendeu? Mas acho que era interessante no event ele retornar o qual item que foi retornado, só para, não sei, dependendo do tipo de situação isso pode ser útil, entendeu? Não que esse seja o padrão que a gente queira, mas seria mais uma opção.

Mas por exemplo, isso aqui para mim é inviável, mano. Eu não acho que isso aqui tem que funcionar assim, mano.

Então acho que aí seria flexibilidade, entendeu? Pode funcionar assim. Não deveria, entendeu?

Nem poder. Isso aqui não faz nem sentido, velho. Eu tenho que fazer. Meu OneChange não tá nem funcionando aí. Fudeu. Cadê? Z1 select. Eita, Giovana!

Será que é aí mesmo?

Z1 select, emit.

Aí, ó, ele retornou o item que foi selecionado.

Não, mas não tá retornando, tá acontecendo nada. Devia estar aparecendo coisa aqui, ó. Ele não tá nem caindo lá. Command component, um select aqui, tá nem chegando aqui, ó. Aí eu tenho que selecionar Enter. Puts, tem que ser pelo Enter, pelo mouse não dá não. Ô Luiz, me ajude, meu amigo, me ajude!

É, retornar o objeto é uma boa.

Não, mas mano, para mim isso aqui quebra toda experiência de desenvolvimento, mano. Não faz sentido nenhum eu ter que usar esse negócio assim, velho.

Mas chegou, como seria a opção dele passar uma função customizada para um item que ele tem, por exemplo?

Se fosse uma função, não poderia ser pelo HTML. Primeiro. Segundo, é um zé velho e não talvez um— a função— calma aí que eu tenho, tô tentando lembrar um exemplo que eu já fiz no ministério, cara. Um monte que eu fiz isso, velho. Eu tenho um objeto Caramba, não lembro, mano. Mas eu penso, cara, de fazer alguma coisa assim, ó, com init disk.z command service.create E aí eu venho, options, eu vou ter um, perfeito, label, não quero value, callback, é um option 1. Value. Se for uma função, sim, a gente pode ter também um value com router link, mano, ou um link URL.

É tipo, se ele realmente tiver um URL ou um path, por exemplo, RouterLink, perfeito.

Sim, e eu tenho um value normal, mano, um value normal de, sei lá, option 2, que seria só o display, né?

Só o que iria exibir.

Exato, que aí aqui nesse service aqui Tá no command. E aí o command, a gente tem algumas opções também. Command basic aqui, né? Eu teria que ter um grupo também. O grupo Poderia ser um label, suggestions, child, children. Aí o children é um option, esse carinha aqui, ó.

Eu consegui captar a ideia.

Entendeu? E aí, porque assim a gente consegue fazer tanto, é, a gente consegue já, se for um link para página, a gente já mata com router link. E aí, se eu clicar nesse router link aqui, ele já manda, redireciona eu para página.

É uma coisa que pode colocar é que assim, até próprias condições dentro do componente, tipo, se não tem router link, então não vai ser uma rota interna. Aí tipo, se tiver, sei lá, HTTPS, por exemplo, no URL, por exemplo, o valor URL, aí seria um target, né, target blank para outra página.

Aí a gente tem que lidar isso aqui porque Que aí quando clicar, eu selecionar essa opção, eu tenho que verificar qual ação que eu vou tomar para ela, se eu vou emitir um valor. Porque aí aqui a gente vai ter esse options, mas a gente vai ter, por exemplo, um onSelect. Perfeito! Ai, eu amo isso aqui, cara. Um select, um change.

Pronto, isso aí perfeito, porque no onSelect vai retornar o valor que foi Foi selecionado.

Aí aqui eu consigo trabalhar condicionais específicas, condicionais específicas, mas eu também tenho condicionais aqui, ó.

Sim.

E aí eu não tenho que me preocupar em criar um componente só para mim criar esse command aqui, colocar o HTML dele, depois criar um outro componente para chamar esse carinha aqui, colocar esse command aqui, mano. Eu vou criar um serviço de command.

Sim, que quando instalar, acho que assim, quando fizer essa instalação ou você adicionar no seu projeto, já viria os dois juntos, a base do componente e o serviço para utilizar ele. Aí se a pessoa quisesse personalizar, daí era com ela. Que até a questão dos ícones, que é uma grande questão aí que eu quero realmente deixar bem documentado para mostrar que pode ser alterado, né? Você não vai ser obrigado a seguir a dependência que a gente colocou. Recomendamos, mas não é obrigatório. Você pode utilizar o que der na telha. Na verdade, melhor, né? O que o UX der na telha. Isso é um ponto sempre importante.

Galera da live, vocês acompanharam esse brainstorm aqui? Vocês estão tão vivo aí? Tem 7 pessoas assistindo a gente ainda, mano. Isso é um milagre, primeira live do canal. Tô muito feliz, pessoal tá assistindo aqui, pô.

Boas horinhas de live já falando de código, pô. Isso aí é muito bom.

Mas eu não curti, mano, essa parada de do command, porque aqui, ó, como que o ChatCnn é, velho? Ah lá, você tem que criar o command no HTML, mano. Não dá, velho.

É, aí com serviço aí só faria injeção dele, né? Deixa os carinha até provavelmente fora da Dom. Exato.

É porque um command é um dialogue, mano. Isso aqui não faz sentido eu ter um componente para isso. Eu não vou botar um command desse no meio de uma página minha.

Sim, ele tem que sobrepor tudo.

Ele vai ser literalmente um dialogue na minha play. É isso aqui, mano, command para mim é isso aqui, ó.

Sim, na verdade eu acho que aí esse exemplozinho aí é realmente algo só ilustrando mesmo, sem o clique, só para realmente mostrar, entendeu?

Agora eu sei que eles têm uma outra coisa aqui que usa esse command, mano. Eles têm um outro select, não, acho que autocomplete, acordeon, alert dialog. Cara, eles têm uma parada aqui que eles usam os combo box. Esse carinha aqui, ó, eu acho que é esse aqui. O ChatCN tem um combo box que usa o command, mano.

Eu acho que deve ser tipo essa partezinha que tá abrindo com uma pesquisa, etc.

De qualquer forma, é um dialogue também, mano. Sim, só que ele usa o command.

É, nesse o funcionamento seria diferente, mas a premissa é o mesmo.

Aí ele tem um value e um label. Aqui ele tem um value e um label. Ele tem um frameworks. Aí ele faz um foreach aqui, ó, mas ele monta isso aqui no HTML também, só que é um popover trigger. Mas ela, mano, ele dá um command list, command empty, command group e o command item. Isso aqui é uma outra, é isso aqui é um autocomplete, cara, nada mais que isso. Aí ele usa o popover e o command, os dois componentes. O popover dele, a gente não tem popover ainda, não, mas o popover nada mais é do que um tooltip, cara.

É a estrutura é a mesma.

O content aqui é o componente. Sim, é isso, mano. Então uma coisa que é tranquilo da gente fazer também. A questão é, a gente vai precisar então deixar esse command para a gente conseguir montar ele no HTML. Isso aí é fato, porque até para o dialog a gente precisa colocar o HTML disso.

Sim, mesmo que ele faça a injeção lá do código na tela pelo serviço, de todo jeito vai ter que ter HTML lá.

É, e o HTML a gente deixa dessa forma aqui mesmo.

Sim, porque realmente ficaria bem mais enxuto, porque assim, o option seria nada mais nada menos do que um for aí, né?

Isso seria só um, exato. E aí, para o command de dialogue, a gente pode usar o serviço, que ele vai gerar esse aqui dinamicamente.

Sim, aí cada group seria um arrayzinho separado.

Exato, exato. Aí a gente usaria assim, top, top, fechou, mano. Tem alguém por aí na live ainda? Dá um oi, meus amigos, que a gente já vai parar por aqui hoje, mano. E aí na próxima eu vou codar o componente de dialogue. Na próxima eu já pego o componente de dialogue para codar. Aí vai ser uma live codando o componente mesmo, em vez de— porque aqui acabou que por request que tinha muita coisa para fazer, mano, para olhar. E aí eu vou codar o pull request na próxima live. Os cara tão aí ainda, pô. Então, olha, parece uma pequena barata aqui. Deixa eu matar.

Pronto, eliminado ao vivo.

Então, meus amigos, hoje foi mais uma live para a gente ver, mano, como é que ia ser. Primeira live que eu faço. Na minha vida e no canal. Acho que deu para a gente bater um papo legal, falar sobre algumas coisas de teste unitário, falar sobre, conversar bastante sobre esse componente aqui, né, uma forma da gente deixar ele bem legal. Isso aqui, cara, é um componente que eu não vi, não tem nenhuma outra lib de Angular que tem, cara, pelo menos eu não sei até agora. Não sei se o PrimeNG tem, mas eu não— mano, parece que tem.

Command, não, acho que eles têm, é Command K ali.

É, mas não tem, tem esse componente aqui, não achei.

Talvez o nome seja diferente.

Command menu.

Pera aí, abrir de novo ali. Search by Algolia, tá vendo ali embaixo?

Eita, Giovanna! Ah, pronto, falar, usar uma outra parada, mano, para fazer o Command. Eles usam esse site e a pesquisa tá sendo nesse carinha aqui, ó. Sim, que maravilha, hein? Olá, você tá doido?

É legalzinho, eu não sabia da existência desse desse cara. Eu sabia que tinha isso, mas não dessa Algolia aí.

Build search in frontend. Show, meus amigos! Então a nossa ideia vai ser fazer um componente desse aqui. A gente vai poder usar ele como um serviço também, mas para isso a gente vai precisar de um serviço, de um modal. Então na próxima live eu já prometo para vocês que eu vou codar esse modal com vocês. Eu já tenho uma ideia de como que ele vai ser, já tem uma boa parte do código. E aí na próxima live a gente faz literalmente o componente. Então eu vou mexer em nada, próxima live eu vou abrir aqui, abrir a branch, criar a branch com vocês e codar. O componente, fechou? E aí a gente cria esse componente de modal porque ele já tá precisando, já tá passando da hora da gente criar esse componente. E ele vai ser um sucesso, vai ser igual a Njesor, mano, vai ser isso aqui, ó, mano. Isso aqui é a melhor experiência de modal que eu já tive na minha vida, cara, com Angular. Vocês não sabem, vocês sabem, cara, vocês gostam de sofrer com Angular Material, cara. Vocês gostam? Deixa eu falar um pouquinho mal do Angular Material. Não aguento, cara.

Abre o coração, velho.

Vocês gostam, cara, que esse diálogo maldito desse cara aqui, mano?

Calma, você não tá compartilhando a tela.

Ai, mano, ai, perdão. Já tô com raiva aqui, ó.

Não esquece do Zoom.

Angular Material, você vem aqui, ó, e aí olha isso aqui que maravilha. Dialog, clica. Examples, só que você montar o dialogue, cara, você tem isso aqui, cara. Beleza, open dialogue, parece ser bonito, cara, mas vai precisar fazer alguma coisa que essa merda aqui dentro você não consegue, mano. O ng-zorro, cara, você tem várias e várias opções. Uma coisa que o Matheus me deixa muito puto no dialogue É porque ele não me dá o dialog com o header e um footer bonitinho. Eu tenho que criar esse header e o footer, não sei por quê, não sei por quê. Você vem aqui, você tem um botãozinho de cancel, install, open dialog. Beleza, onde que eu configuro esse cancel, esse install aqui? Olha lá, não tem como, cara. Match actions, match close. Já no ng-zorro, meus amigos, eu tenho como configurar tudo que vocês imaginarem do modal, cara. Então eu tenho, eu tenho um ngOnInit, eu tenho um ngOnInitOnCancel, que são chamados quando eu clico no botão. Eu consigo, olha aqui, Coisa maravilhosa, né, Jesus? Eu consigo dar um nz-ok-loading para ele carregar, eu consigo dar o nz-ok-text customizar o texto, customizar o botão. Eu tenho nz-title, cara, tem tudo aqui, cara. Tem um footer, eu tenho que conseguir colocar ele como draggable. Então no serviço, e a gente vai ter isso nos No nosso serviço a gente vai ter várias dessas customizações que facilitam bastante. Se eu não passar o title, ele não coloca o reader do modal, cara. Simples. Tem coisa mais simples do que isso? Não tem, cara. Então, se eu não passar o reader, ele não vai botar. Se eu não passar o title, não vai botar o reader. Ele vai botar só o componente que eu for instanciar aqui. E aí eu tenho os botõezinhos de cancel e OK aqui. Eu consigo transformar, colocar ele vermelhinho, danger. Consegue colocar várias coisas aqui, ó. Tem até um draggable modal, mano. Olha isso aqui, que coisa maravilhosa. Então a gente vai ter um modal bem parecido com esse do NG-Zorro e bem diferente com esse do Material, que eu não gosto, tá bom?

Não gostamos.

Esse realmente concordo, é muito ruim.

Experiência nesse eu dou o braço a torcer.

É ruim, mano. É triste, cara. É triste, tá bom? Então semana que vem, meus amigos, nesse mesmo horário, nesse mesmo canal, nessa mesma Batcaverna, estaremos aqui quinta-feira que vem, 8 horas da noite, codando o componente de modal dos Ardui. Hoje a gente deu uma olhada no PR de command. Você conseguiu resolver o do progress bar, mano, ou não?

Cara, tô vendo que tá com um probleminha aqui. Os conflitos eu já tinha arrumado aqui, eu encontrei onde é que tava o problema. E eu encontrei onde é que tá o problema para não exibir ele, e não é do componente, é o nosso bom e velho CodeBox.

Ah, entendi.

Tá bom, então eu já tô olhando aqui onde que tá, como que eu arrumo isso, tá?

Nosso Luiz Artes vai dar uma olhada disso. E depois a gente tem mais um um PR para a gente analisar aqui, que é o de calendário. Esse aqui também é outro que vai dar pano para manga.

Sim, esse aí ficou a mais, ficou muito legal, ficou bem legal, cara.

A gente tem uma olhada aqui antes, mas esse calendário aqui ficou bem legal. Depois a gente dá uma olhada nesse aqui também, tá bom? Então, meus amigos, vamos ver os comentários do povo aqui. Não sei se eu perdi mais alguma coisa, mas o último aqui que eu vejo, modal do material Somos sem nenhuma, e ainda faz a memória às vezes. É isso aí, cara, modal do Mateo é uma maravilha, velho. Nossa, como eu amo esse modal, cara. Fora que, cara, uma coisa que eu não consigo entender, a galera que usa o modal sem o service, mano. Tem muita, muita gente que usa o modal, cara, fazendo ele no HTML. Aí você faz o modal, você faz o modal no HTML e você abre ele pelo HTML, cara. Isso aí também é outra coisa que eu não entendo, cara.

Sim, às vezes que eu vi isso, e às vezes que assim, nesses 5 anos aí que eu vi necessidade de fazer, era sempre gambiarra, por dificuldade de personalizar o padrão do projeto.

Não consigo entender, cara. Mas é que pelo menos agora eles mudaram bastante coisa, mas esse aqui já tá no último, né? Aí você tem os elementos aqui. Não gosto, mano, não gosto. Tem o Jezor que é bom. Jezor você passa, você passa o contexto para ele, você passa variável aqui, ó, você dá um implicit nz_data aqui, ó, você passa coisa para dentro do modal. No Ministral eu uso modal para todo lado, cara, e o modal ainda é modal com o formulário dinâmico. Então a maioria dos modais do Ministral, por exemplo, Se eu entro aqui no Ministério fazendo meu jabazinho normal, calma que não tá compartilhando, calma que eu vou compartilhar aqui, ó. Se eu entro aqui no Ministério, qualquer coisa que eu abro aqui de modal, mano, é dinâmico. Então basicamente para cá eu passo um JSON falando que eu quero o nome, o tipo do ministério, com select para ele. E aí aqui eu já tenho, quando eu clico em adicionar, que eu faço as minhas ações. Então, cara, tem modal para todo lado, velho. Modal a gente usa em sistema o tempo todo, mano. É, se eu preciso notificar os voluntários, eu boto aqui o select, aí eu passo para ele as coisas que eu tenho. Isso aqui é tudo feito dinamicamente, eu não preciso ficar criando componente para isso aqui, cara. Esse aqui eu acho que eu precisei porque eu tive que fazer essa customização aqui dessa mensagem para ela. Essa é uma mensagem Então eu tive que criar esse componentezinho aqui, mas o resto aqui é tudo dinâmico, cara. Então o pessoal que fica criando modal na mão, fica criando form group na mão, cara, não precisa mais disso não, tá, meus amigos? Vamos fazer os trem mais fácil, mais rápido. Eu sou um dev preguiçoso, cara. O que eu puder fazer para me adiantar minha vida quando eu tô tiver acordando, eu vou fazer. Confia.

Isso me levantou até um ponto. Esse tópico do formulário dinâmico e etc., pode ser a seção de formulário lá no componente. Pode ser literalmente um textinho lá explicando como fazer isso, entendeu? Acho que ficaria mais interessante. Sim, a gente pode deixar até uns utilities ali para validações específicas, mas dá para fazer um negócio bem legal.

Concordo. Fechou. Quer falar mais alguma coisa, Luiz?

Cara, só queria agradecer pelo convite. É a primeira live que eu participo mostrando meu rosto e mostrando o lado desenvolvedor do Luiz. As outras lives eu não podia falar meu nome, senão com certeza seria cancelado. Então é isso, cara. E também obrigado pelo apoio, né, pelos ágeis. É muito legal ver uma ideia que tava na sua cabeça tomando realidade. Realmente alcançando alguma proporção. Realmente é muito legal isso.

Que da hora, mano! Quer fazer um jabá, alguma coisa aí? Rede social, trabalho?

Cara, só me siga no LinkedIn, Luiz Gomes com 2 S. Você já consegue me encontrar pelo link, ou só Luiz Gomes, já vai ter a minha foto bonitinha por lá. Só isso mesmo. Pelo LinkedIn, no GitHub, mesma coisa.

Manda o link aí, mano.

Manda agora.

Deixa eu ver se eu acho você aqui, Luiz Gomes. Aí eu mando aqui também, pessoal. Luiz, achei, achei aqui, mano. Deixa eu mandar para galera aqui.

Show! No meu LinkedIn já tem o meu GitHub lá, quem quiser participar é nós. E show, principal Por favor, dá estrelinha lá no repositório do Zard.

Pô, mano, isso é verdade, velho. Vamos fazer mesmo. Vocês não fizeram ainda? Vai lá e dá estrelinha aqui, ó.

Exatamente, dá estrelinha lá, porque nosso objetivo principal para esse ano é ser a melhor livre de componente desse ano.

Exato, meus amigos. E a gente vai estar apresentando o Zard lá no Angular SP no dia 24 de junho. Isso aí, então estaremos. Angular SP vai ser online mesmo, tá, gays? 24 de junho, 4 dias depois do meu aniversário, tá? Meu presentinho de aniversário, vocês quiserem me dar aí, ó, a presença lá no, na live do Angular SP, da gente vai apresentar os ARD lá.

Exatamente, às 7 horas estaremos lá.

Fechou. E é isso, meus amigos, foram 2 horas de live. Não dá, mano, o tempo nem para, eu nem vejo o tempo passar aqui, mano, vai codando aqui, vai mexendo. Galera, obrigado para todo mundo que participou aí, que mandou mensagem, que viu. Espero que vocês tenham aprendido alguma coisa aí também com a gente. Acho que na próxima live a gente vai ter mais código, né, mais mão na massa. Então vai ter mais coisa, mais dúvida que vocês vão vão ter. Mas obrigado todo mundo que participou, obrigado pelo apoio que você sempre tem dado, tanto para mim, tanto para o Luiz aí no Zard. E tamo junto, meus amigos, vocês são fera para caramba. Quem não tiver na comunidade, no canal, quem tiver vendo esse vídeo depois também, a gente tem uma comunidade no WhatsApp. Fazendo meu jabá aqui também, então tem o meu LinkedIn, deixa eu mandar aqui também para vocês. Meu LinkedIn, LinkedIn Samuel Rizon, para quem quiser me seguir por lá. Eu vou mandar depois, amanhã eu vou postar, né, sobre essa live, como que foi, que que a gente fez. E aí quem puder dar uma força lá na live, lá no post do LinkedIn, que no LinkedIn a gente tem bastante alcance. Então quando postar alguma coisinha lá, dá uma forcinha, curtir, compartilhar se você quiser, mas só de curtir já ajuda o LinkedIn. É bem legal nisso aí que a gente fica vendo a curtida dos outros dos outros, pessoas, é todo invasivo, né? Você não tá nem curtindo as coisas, tá vendo que os outros curte. Mas é isso, meus amigos, brigadão, Deus abençoe vocês e a gente se vê na semana que vem. E até a próxima, valeu, Luiz, brigadão, mano, você é fera!

Eu que agradeço, cara. Valeu, pessoal, até mais, valeu, guys, tamo junto!