Refazendo o shadcn para Angular ao vivo | Criando o modal do ZardUI (parte 3)

E aí, meus amigos, tudo bem com vocês? Samuel Rezon por aqui. E mais uma live hoje, Dia dos Namorados. Tamo aqui nessa mesma Batcaverna, nesse mesmo Bate Canal, e estamos aqui para codar, continuar codando os hardwares, meus amigos. Deixa eu só terminar de mandar umas mensagens aqui no grupo da live avisando o pessoal. Quem já tá por aí, manda um boa noite, cara. Você tá aqui No dia dos namorados, vendo uma live, cara. É, obrigado, cara, eu te agradeço. Eu mandei no grupo, mandei no grupo lá da comunidade do Anglo falando qual que foi a minha estratégia para estar aqui na live hoje com vocês, meus amigos. Que a estratégia começa antes, né, cara? Você não pode só pensar assim depois, tudo mais, não. Começa antes. Em vez de eu sair com a mulher à noite Eu fui de surpresa, eu fiz uma surpresa para ela de manhã. De manhã a gente pegou, a gente tinha que sair, aí eu peguei o carro de manhã de surpresa, botei ela no carro. Eu falei que não ia dar para a gente tomar café aqui, que ia tomar café em outro lugar. E aí ela falou: não, então faz meu café aqui que eu levo o café na mão, a gente compra uma coisa na padaria. E aí eu falei: não, beleza. Entramos dentro do carro, eu fui levar ela na cafeteria que ela gosta. Foi de surpresa, de surpresa para ela, o cafezinho da manhã. Paguei o café da manhã, óbvio, né, meus amigos? Paguei, dei de surpresa para ela. E aí depois eu fui perguntar: amor, você não se importa se eu fizer a live hoje à noite não, no dia dos namorados? Ela: não, tem problema não, a gente já tomou café da manhã e tudo mais. Então, ó, vale night da live de hoje, tá feito. Aí o Rafael: boa noite, meu amigo. Você tá bom, mano? Como é que você tá? Tudo certo? Só bora! E aí fica a dica para vocês aí, meus amigos, tem que se planejar para live. Deixa eu só mandar em mais um grupinho aqui que eu acabei falando com vocês, não mandei no grupo. Fechou. Então bora, cara, bora, bora, bora, bora, bora. Vou perder muito tempo não. Eu pretendo, cara, live de hoje eu não pretendia até 11 horas não, tá bom? Então eu pretendo ir até umas 9, 9:30 por aí, mas eu creio que hoje já vai dar para a gente. Já abriu o PR do Dialog, do ChatCN. Então vamos para o código aqui, ó, já tô com código aberto aqui. Mas a minha ideia hoje, a gente abrir o PR do Dialog por request. Vai ficar faltando algumas poucas coisas para a gente implementar. Eu não sei se eu já vou colocar, né, a parte do, do alert aqui, mas a minha ideia, cara, é pelo menos abrir por request, já deixar para galera começar a revisar, dar algumas, algumas, dá uma olhada no código. E a minha ideia também hoje, guys, é dar uma olhada lá nas issues e no board do nosso projeto, porque quando a gente vem aqui, cara, algumas pessoas pegaram algumas issues, e aí pegaram e tá com o nome aqui, mas não tá desenvolvendo. Então vou dar uma, fazer uma limpezinha aqui para liberar algumas issues para galera pegar. E vou criar algumas também. Então dá uma revisada aqui porque tem uma galera sem trabalho. Vocês estão sem trabalho? Tá cheio de trabalho aqui nos hardwares para vocês trabalharem, tá bom? Então por favor, é só entrar aqui, pegar uma ish, meter bala, abrir o pull request que a gente dá uma olhada, tá? E aí assim que eu terminar essa parte do pull request, depois a gente vai dar uma continuidade, de olho na continuidade, no olhar esses PRs abertos aqui para a gente finalizar eles. Fechou. Mas hoje vamos lá então. O objetivo é a gente tem o nosso dialogue aqui, que ele já tá funcionando lindamente. Mas tipo assim, cara, já tá 100% pronto, velho. Não tem, não tem o que fazer, mano. Já tá 100% pronto, já tá tudo funcionando. A gente consegue salvar aqui, pegar os valores do formulário, a gente consegue passar qualquer tipo de componente para cá, a gente consegue passar uma string. A nossa API aqui já fala todas as opções que a gente tem. Eu só vou tirar esse autofocus, que eu creio que a gente vai criar uma issue para isso aqui depois, para a gente colocar. E dá uma revisada no código, ver se tem alguma coisa para a gente modificar, para a gente melhorar. E abriu por request, show! Beleza. Então esse carinha aqui eu vou comentar ele, deixar o comentário do Dudu aqui. Aqui ele já vai dar um bug. Que que ele tá dando erro aqui? Não sei o que que ele tá dando erro. Format. Default Format, tá maluco, tá maluquito, tá maluquito. Quando dá isso aqui, mano, refresh aqui, ó, reload. Vocês não tem isso aqui no seu VS Code, mano? É literalmente uma extensão. Ah, outra coisa, guys, perdão, viajei aqui. Estou tentando me adaptar ao cursor. Tá. Então estou tentando me adaptar ao cursor, tô até usando ele aqui, mas confesso, cara, que para mim algumas coisas ainda não estão batendo direitinho, tá vendo? Ele dá alguns bugs aqui ainda que me desanima às vezes, cara. Igual uma coisa que me desanima muito aqui, ó, quando eu quero limpar o terminal, aperto Ctrl+K, só que agora Ctrl+K é um outro shortcut para alguma coisa de IA, mano. Aí eu tenho que vir aqui mudar esse shortcut aqui, cara. Então não sei o que que eu vou aprontar não, cara. Lá ele não tá, não tá querendo, cara, não tá querendo formatar. E aí me explica, me explica uma coisa dessa. Já dei reload aqui. Se não der certo aqui, eu vou para o VS Code e vida que segue. Naquele tá dando algum erro do Eu já tenho o pre-instalado aqui. Não, tá desabilitado, burro. Vamos dar um reload aqui. Dá boa noite aí, guys. Manda um boa noite para mim aí. Fala boa noite aí. Tem 4 ou 5 pessoas assistindo aí, se eu não me engano. Manda boa noite aí, solta o like no vídeo, dá aquele likezão no vídeo. Default format. Vamos botar o preview aqui. Não quer formatar, mano, não quer formatar. Meu Deus, quando dou Ctrl+S ele não formata. Ai, que maravilha! Provavelmente, mano, não sei se é do import sorter. Import, sorter. Não consigo comentar, cara. Comente. Não dá, mano, não dá, não dá. Deixa eu ir para o meu VS Code aqui, guys. Não consigo, cara, tá vendo? Eu não consigo usar o cursor, velho. Já não consigo comentar as coisas, cara. Eu perdi muita Control+K+C para comentar. Aí, o que que ele faz? Que caramba, não funciona, cara, não funciona. Então, aqui, ó, cursor, não quero. VS Code, esse aqui eu gosto, cara. Como eu gosto do meu VS Code, velho. Deixa eu dar um npm run start aqui. Bonito, meu VS Code é bonito, cara. Deixa ele bonitinho. Funciona tudo, funciona todos os meus comandos. Pronto, salvei. Não quis funcionar também não. Não é possível, guys. Format default é o S-Lint. Meu Deus, tá difícil a situação aqui, viu, guys. Pronto, ver se code funciona. Show! Então beleza, aqui ele tá dando o problema do autofocus, tá tudo certo porque eu removi o autofocus. Como eu disse, a gente vai fazer isso depois, vamos criar uma issue para isso. Por enquanto nosso modal não vai ter um autofocus. Perfeito. Isso aqui, cara, como eu tinha comentado, qual que é a diferença? Por que que a gente faz isso aqui, cara? Porque no ng-zorro, quando a gente vem aqui, ó, no modal, modal, a gente tem os modal de confirm, tá vendo? Então eu dou um modal service.confirm E aí, em vez dele abrir um modal normal para mim, ele vai abrir um modal disso aqui, ó, com título, a descrição, um ícone e um botãozinho. No chat.cn, chat.cn dialog, só que não é o dialog, cara, é o alert dialog. Cadê alert dialog? Esse carinha aqui, ó. Então a gente vai trabalhar nisso aqui e eu acho que é melhor a gente fazer um outro componente. Eu vou criar uma issue. Na verdade a gente tem, se eu não me engano, uma issue para isso. A gente tem uma issue de modal e uma issue de confirm modal, que é basicamente a mesma coisa, tá? Só que o modal é um modal com header e tudo mais. O confirm é só esse carinha aqui. Que ele usa praticamente as mesmas coisas. Se não der para a gente usar todo o mesmo scope do nosso modal, a gente pode usar o service dele, o ref e toda coisa que a gente tem aqui, tá bom? Então esse aqui eu vou tirar também, a gente não vai trabalhar nisso. Esse aqui eu vou tirar. E agora eu vou dar só uma revisada Vou dar uma revisada aqui no nosso código para saber se tá tudo certo. Então estamos usando classes aqui, estamos usando inject. Deixa eu tirar as coisas aqui que atrapalham a visualização e vou dar um zoom aqui para vocês para ficar fácil. Então, ó, SelectorZDialog, SportSZDialog, import class, tá pegando as classes aqui que pega das variantes do meu dialog. Perfeito. Então dessas variantes aqui, isso aqui a gente pega do ChatCN, tá? A gente não tem nenhuma variante no dialog além da padrão. Esse data state aqui é para as nossas variantes, por causa, porque aqui, ó, baseado no state, state open, ele dá uma animação, tá bom? Então quando a gente abre aqui, ó lá, ele tá dando uma animaçãozinha. Eu não sei, guys, eu não tô gostando muito dessa animação, velho. Só que eu não sei se eu tirar isso aqui vai mudar alguma coisa. Data Stitch Open. Não, é Sliding from Left. Caramba, velho, isso aqui eu vou tirar. Closed. Vamos ver, ó, ele veio de algum lugar aqui. No, do chat scene faz isso, cara. Não, tá, é logo. ChatGPT não faz isso, velho. Que viagem torta que é essa aqui, que esse negócio tá arrumando, velho. Slide in, zoom em 95%, fade in zero. Ele tá vindo de algum lugar aqui que eu não sei de onde que é, cara. State Shopping, Animating. Provavelmente isso aqui, olha quem tá aí, meus amigos, o mestre, o brabo do ângulo, Fábio Miranda. E aí, mano, tudo certo? Tudo certo, tudo certo. Tô aqui apanhando, cara. Então tá funcionando essa bagaça aqui, ó, esse left aqui funcionando. Tô apanhando, puta, Wind, cara. Virei os olhos, tá ruim. Que merda, velho, meu Deus, mano. Virei os olhos. O Helder Fonseca também deu um boa noite. Boa noite, meu amigo, tudo certo? Como é que tá o Dia dos Namorados aí, guys? Eu tô codando, estou codando, tá? Temos um negocinho aqui para verificar se a string Tem conteúdo. Tranquilidade, tranquilidade, tá certo, mano. O normal, que triste, cara. Pior que é verdade, bicho. Beleza, temos CDK do Portal Outlet aqui. Ok, triggered, cancel trigger, o state. Tudo Signal, tá bom? Estamos usando aqui Signal para todo lado, para todo lado, literalmente. Temos um construtor de super aqui porque a gente estende do Base Portal Outlet, getNav. Aí, ó, aí, ó, o segredo aí, ó, fiz um sitezinho para patroa e foi suave. O normal é não funcionar. Miranda Fábio, 2025. Cara, de resto aqui tá tudo certo no componente, o HTML também. Sexta que vem volta a codar, vou voltar a pegar os hard aí, mano. Aí, ó. Volta mesmo, já tem só isso, já tá aqui, ó, lá o tocho. Olha quem tá aqui, ó, Fábio Miranda tá aqui, ó, esperando aqui, ó, só esperando o PR. Só fazer um tochozinho lá, tochozinho de boa. Ixi, caramba, lá o chatzinho dele, que viagem! Torta, mano. Essa aqui é nova, hein? Mas é isso aqui, é o toastzinho. Por que que eles depreciaram? Eu não sei não, mano, mas você vai conseguir usar bastante parte dessa, desse negócio do modal que eu tô usando aqui, mano, nesse toast. Mas aqui, ó, aqui, ó, isso aqui também, ó, ó. Eu levei a minha para jantar no final de semana, como bom casal mais 30 que somos aí. Anota, anota, anota! Levou para jantar no final de semana, mano. Aí sim, velho, aí sim, aí sim, tá certo, mano. O meu, eu já, eu já mandei a pílula no grupo lá. Eu levei, eu saí com a patroa, foi de manhã, meu amigo, de manhã. O segredo, cara, segredinho dos namorados, cara. Eu lembro da última vez que a gente foi tentar ir num dia dos namorados do nada num lugar, mano. A gente não conseguiu, foi nada. Passamos, foi raiva, voltamos para casa e pedimos no iFood, velho. Última vez, eu lembro, foi triste, né? Que, ó, o Helder falando aqui que o Helder tá cuidando do carrossel. Eu continuo do nosso querido carrossel, tô fazendo umas coisas bem bacanas. Show, mano, show! Se depois quiser mostrar aqui para gente numa live, numa próxima live, só falar, mano. Que aí se eu te mando o link aqui, você entra, compartilha com a galera aqui como é que tá. E eu, Fábio, vou levar para jantar sábado também, restaurante de portas fechadas. Aí, ó, você é louco, aí compensa. Ai, ai, bom, dando continuidade aqui, ó, pode, pode falando aí, guys. Eu vou compartilhando aqui, vou mostrando comentário de vocês. Vamos conversando e codando. Eu tô só revisando aqui o código do dialogue. Eu tô revisando o código do dialogue para abrir o pull request, guys. Então, para mim tem bastante coisa ok aqui. A gente tem até teste unitário que eu já fiz. Vocês lembram que na live passada eu fiz os testes unitários? Então aqui já tem as coisas do footer, do header, de outras coisas. E aí, beleza, aqui tá ok, aqui tá ok. O dialog service também tá ok, cara, não tem muita coisa. Não tem muita coisa que é de boa, que precisa ter esse, esse service aqui mesmo. Qualquer coisa, talvez a gente pode deixar isso aqui mais dinâmico ainda para uns outros componentes, que aí a gente deixa isso num serviço compartilhado. Os nossos testes unitários, eu fiz alguns testes unitários aqui, depois a gente consegue fazer mais. E as nossas variantes que a gente tá sempre tendo um arquivo de variante, e o dialogue ref. Isso aqui faz sentido ter um arquivo separado, não vejo problema não. Show! Só olhando o comentário da galera: se é pica mesmo, por que só não manda ela gerar o código e converte da Libras para o inglês? Seu sonho, né, mano? Isso aí, a gente perde o emprego, mano. Mas não faz, mano. Ô dó, não faz. Aí, hoje já serve para facilitar, mano. Eu particularmente uso muito o Copilot, por exemplo, coisa que facilita muito, mano, teste unitário, velho. Mano, Copilot para teste unitário é bom demais, velho, que a gente já tem uma porrada de teste aqui. Eu dou um enter, ele já Já vai me dar um teste aqui, ó, should close the dialog when I click outside the dialog. E aí, normalmente não funciona de primeira, mas já adianta bastante coisa, velho. Espera aí, o Helder falou: esse negócio de pegar a frente da mulher, coisa de gente nova. Pois é, mano, tem 5 anos de casado ainda, pô, vai com calma. Primeiro, cara, primeiro, primeiro na verdade, né, eu e minha esposa, a gente casou muito rápido. Então nosso único dia dos namorados que a gente passou namorando mesmo, porque a gente namorou, noivou e casou em um ano, a gente foi lá no Porcão de BH, cara. Mano, eu botei terno, eu pedi ela para, eu pedi ela para ir de vestido vermelho, fui de terno, cheguei lá, mano, os cara rico tudo de bermuda e chinelo no Porcão no dia dos namorados, velho, e eu de terno, e minha namorada, né, no caso, de vestido vermelho. É muita coisa de moleque, mano. Eu tinha 22 anos, mas foi da hora, foi da hora, foi bom para relembrar. Já era para ter 30 livros melódicos. Era, mano, era uma delas, devia estar melhor já. Mas ninguém ainda se compara ao NZZOR, nem os Hardwire, nem os Hardwire ainda chega perto do NZZOR, tá? Nem os Hardwire, nem o Prime LG, nem o Anglo Material, NGZorro tá aqui, o resto tá tudo aqui embaixo, tudo aqui embaixo enfileiradinho, tá? NGZorro é bom demais, mas concordo, cara, devia ter mais Libisboas por aí, cara, que não tem. Então beleza, mano, deixa eu fazer essa parada aqui que eu não preciso. Eita, caramba! Aquele deu mexer em algumas coisas. Deixa eu ver aqui. Excelente, tá certo. Beleza, tem problema não. Então tá certo, é isso mesmo. As variantes, eu tirei algumas coisas também. Beleza, vou comitar aqui, guys. Meu commit hoje tá aqui, ó, pum. Simplify dialogue component buttons and update variants. Eu só não gostei que foi um feat, cara. Eu preferiria ter um refact. Deixa eu tirar um pouquinho do zoom aqui. Então, refactor, short description, save. Beleza, beleza. Sync changes. E a gente vai lá para o GitHub. Aí o Fábio mandou a brava aí, ó. Mas tu era o único certo. Escolar sai de bermuda, chinelo, especial. Isso é verdade, mano. Tinha uns cara lá de bermuda, chinelo no Dia dos Namorados, porcão lotado. Tive que fazer reserva, bicho. Reserva é um restaurante mó top lá em BH. E os cara bermuda, chinelo, camisa normal no Dia dos Namorados. Eu não entendo, cara, mas tá bom. Fui feliz aquele dia, tranquilo. Show! Vamos abrir o por request aqui. Não, não é para master não, mano, alpha. Para alpha, beleza. Aqui preview, então vamos abrir aqui. Tirar um printzinho para a galerinha que gosta. Implementação, o link para issue. Então vou vir aqui, Xarte, o modal, que no caso virou dialog, mas não tem esse problema. Type of change, new feature. Time de futebol. Break change, não testei no Chrome, não testei no Safari, testei aqui e não tem nenhum erro no console. Boa! Create pull request, guys. Take a quick sec here. Pronto, pronto. Caceta, mano, olha o tanto de conflito. Culpa do Luiz, cara. Vamos dar um rebase aqui, guys. Como que eu faço no VS Code, velho? Vocês estão vendo que eu não uso terminal. Eu sei que vocês usam terminal, cara, mas eu sou front-end. Front-end que usa terminal Não é front-end, velho, faz tudo no VS Code, mano, tudo aqui, ó. O Helder Fonseca perguntou aqui, ó, foi o Copilot que gerou sua mensagem? Eu gero meus com Cloud. Foi, mano, aqui foi. Eu normalmente, cara, ultimamente eu tenho usado Copilot. Então vem aqui, clico aqui nesse botãozinho, ele vai gerar mensagem. Se eu não gostar, mano, eu abro aqui meu terminal, aí eu uso o terminal, que aqui é necessário. Eu não quis fazer nenhuma automação para nada. Jogo CCM aqui, ó. Aí não tem nenhuma alteração, né? Mas que burro, dá zero para ele. Mas esse comandinho aqui, cara, ele vai gerar um commit para mim baseado no meu padrão de commit. Eu tenho o primeiro vídeo que eu tenho aqui no canal do YouTube, eu falo sobre isso, mano. Mas ele usa o cloud também, então é bem legal, mano. Eu curto bastante. Bermudinha do Camisa de Futebol. Gosto mais do tempo dialogue do que modal, mano. Tipo assim, eu tinha começado com modal por causa do NG-Zorro, só que o ChatGPT usa dialogue, mano. Então, como a gente tá, não sei, botei dialogue. Fábio mandou aqui, pera aí, deixa eu mudar para cá que fica mais fácil de ver porque o texto é grande. O dialogue modal são duas coisas diferentes. Em tese, o dialogue é a janelinha que abre com ações. O modal é uma janela que abre e pode não ter opção de ações. Entendi. Janela que abre com ações. Beleza, então a gente tá fazendo um dialogue mesmo, é isso aí mesmo. Só que, mano, outra coisa que eu fico bolado com ChatGPT é, por exemplo, o tabs deles. Os cara fala que tabs é isso aqui, mano. Isso aqui nunca foi tab, cara. Nunca foi, mano. Que dia que isso aqui é uma tab? Isso aqui não é tab, cara. Aí eu lembro que a galera, quando o Rian tava fazendo esse componente de tab, ele fez, mano. Deixa eu ver se tem no comentário aqui, ó. Não, acho que a gente mandou foi no grupo, mano. Mas ele perguntou, cara, sobre esse tab do ChatGPT, cara. Eu lembro que eu mandei para ele um artigo de uma página de UX/UI falando diferença entre tab e esse aqui. Mas tab é isso aqui, ó, tab. Isso aqui é do Unigesu, tabs. Isso aqui é tab para mim. Isso aqui é uma tab. Isso aqui não é uma tab, não. Isso aqui para mim é outra coisa diferente, mas aí tem essas paradinhas mesmo, cara, normal. Já vou botar o Luiz aqui, vou botar o Henrique, vou botar você aqui para revisar o PR também, tá, mano? Quer nem saber. Aqui, ó, porque o Sparta é tão dividido. Dividido em que sentido, mano? Spartan, eles estão lançando a V1, mano. Arrumaram um parceiro lá, ó, zero ops, arrumaram um parceiro e vão lançar a V1. Mas, mano, uma coisa que realmente eu não entendo no Spartan é a diferença de helmet e brain. É loucura, mano. O Helmet e o Brain deles. Eu realmente não entendo, mano. Igual aqui, ó, você tem que importar coisa do Brain, então ng, para o dialog deles aqui, ó, só o alert dialog. Deixa eu botar o que a gente fez aqui, ó. Você tem que importar coisa do Brain, lá, Brain dialog content directive, e você tem que importar as coisas do Helmet, que é Helm. Então o Brain tem brn Isso aqui tudo para abrir um fucking modal. Então tudo aqui, ó, aí você tem que importar. E hoje, né, tá manualmente, então você basicamente tem que lembrar a nomenclatura de tudo, importar manualmente para você usar a diretiva, todas as diretivas aqui, mano. Ou você fica com a documentação aberta e vai copiando e colando. Aí é osso, velho. Aí é osso. Caramba, mano, mudaram a documentação dele aqui também, velho. Que viagem torta, mano. Botaram aqui. Que que é isso aqui, gente? Declarative Usage. Não sei o que que é isso aqui não, cara, mas ele falou, tem que importar 400 coisas para ser um fonoma, dividido demais, chega atrapalhar a leitura do projeto. Exato, mano, exatamente isso, mano, exatamente isso. É muita coisa, mano, muita coisa lá, mano. Olha isso aqui, isso aqui tudo para um dialogue, velho. Como é que a gente fez aqui, mano? Coisa simples, é um serviço, um diálogo tem que ser um serviço. Falar com o Luiz depois que ele mexeu, cara. Luiz mexeu tanto, mas tanto, mas tanto nesse, nesse carinha aqui que mostra, né, o código, que tá tudo desformatado, mano. Não ficou bom não, gostei não. Aqui tá assim, mas o nosso dialogue aqui, mano, é um service. Você dá um create aqui, ó, passa o título, descrição, conteúdo, se você quiser passar algum valor para ele, e aqui você pega o retorno dele, cara, acabou, não tem segredo, mano. Isso é só importa o dialogue module porque em Angular, né, então o Angular a gente consegue pegar componente, service, juntar tudo um módulo e importar. A gente tem sim, tá tudo usando standalone, mas como a gente aqui Como a gente aqui, ó, no dialogue, dialogue component, a gente tem mais de um componente, mano. Então a gente teria que importar o componente, o serviço. E aí a gente vem aqui, faz isso aqui, ó, a gente importa como módulo os ArtButtons, ArtDialog, overlay e o portal. Então a gente precisa desses carinhas aqui. Então para não ter que ficar importando tudo isso aqui além do provider do service aqui, a gente cria o usar esse dialog module, importa ele, cara. Não faz sentido a gente importar tudo aquilo separadamente igual o cara do Spartan fez, mano. Show! Então, meus amigos, ó, o PR tá aberto, vocês já podem revisar meu PR. Deixa eu mandar o link aqui para vocês, depois eu vou mandar lá no grupo dos artes também. Fechou. PR tá aberto e eu tenho que corrigir. Deixa eu fazer meu— eu tava falando para vocês aqui, mas aqui, ó, se liga como é que eu faço o merge, mano. Vem aqui, ó, três pontinhos, branch, rebase branch, Alpha Origin. Bede. Então aqui não sei de qual que tá vindo não, mano. Acho que é do incoming. Com certeza tem que mostrar isso aqui, pô, não faz sentido. Aqui, aqui e aqui. Mais, mais, mais, mais, mais. AddDialogComponent. Mostra mais o erro lá. Que que ele tá dando de erro aqui? Caramba, aceita nos dois. Agora é achar qual que ele, qual que é aqui, ó, resolvendo problema na mão aqui, provavelmente é esse aqui, ó, provavelmente. Beleza, aqui continue, prontinho. Git push -f. Para dar o que depois eu tenho que usar o terminal, né, porque eu tenho que dar um traço F. Mas normalmente é tudo por aqui. Então tá resolvido o conflito aqui do modal também, do dialog. Beleza, branch está pronta. Deixa eu só testar para ver se tá tudo funcionando. Para aqui o projeto, sobe de novo. Pra galera que tá chegando aí, estamos abrindo o PR aqui do dialogue do Zard Y. Fechou aqui, quer recarregar a página e tá funcionando lindamente. Gente, isso aqui tá muito bonito, velho. Isso aqui tá muito, muito bonito. Tá muito bonito. Fechou, fechou. Beleza, então PR tá aberto, vocês já podem revisar. E agora vou dar uma olhada aqui nessas issues. O Fábio já falou que essa aqui ele vai pegar para fazer, né, Fábio? Tô de olho, hein? Se não pegar na próxima live, eu tô tirando seu nome daqui, tá? Essa do modal aqui, deixa eu abrir os projetos. Essa do modal aqui, acabei de abrir o pull request. Então eu vou vir aqui e mudar o modal para em review. Show! Esse confirm modal eu vou colocar ele como pronto aqui. Eu vou tirar meu nome porque eu vou deixar isso aqui para outra pessoa fazer. Tirei, tirei. Como a gente já tem um modal, eu consigo focar em algumas outras coisas aqui de revisar PR, fazer algumas outras coisas, tá, guys? Então aqui, ó, confirme modal, eu já me tirei daqui, beleza. Então modal tá ok. Breadcrumb, cara, eu sei que o nosso brother Vitor Souza Ó, quem chegou aí, ó, Jefferson. A pergunta, a pergunta que eu gosto, mano. Olha cá, a galera que tá no grupo já sabe, mano, eu boto pilha, cara, eu boto pilha. Mas, cara, respondendo simples e direto, NG Zorro mil vezes. Eu sou team NG Zorro, NG Zorro. NGZorro, mais uma vez, mil vezes, cara. Mas falando, cara, sem brincadeira, eu cheguei a usar aqui, ó, Prime NG. Eu sei que a galera gosta do Prime NG, mano. Eu tentei usar ele uma vez, cara, só que eu usei ele antes da V17, tá vendo? Nessa V17 aqui, ó, se você, quando a gente entra no site deles, deixa eu dar um zoom aqui para vocês verem, ele já mostra que ele, tipo assim, a primeira versão dele foi V17, mas não foi, cara. Então eu usei o PrimeNG antes da V17 e, mano, era uma biblioteca normal, cara, de componentes, sabe? Não era lá aquelas coisas, não, tipo assim, é ok, cara, não é ruim. Mas também não é a melhor, entendeu? Só que qual que é o B.O., cara? Antes da v17 era, tá, beleza, tá usando as coisas. Que que eles fizeram na v17? Os cara literalmente mudaram tudo, velho. E aí quem usava o PrimeNG antes da v17, mano, se ferrou, porque você atualizar, eles, cara, eles mudaram a biblioteca da água para o vinho, literalmente. Então é como se Eles refizeram a biblioteca e quem usava o PramNG antes da v17, tipo assim, vai só ficar na v16. Para mudar para v17 vai ter que mudar uma porrada de coisa, então tanto breaking change. Isso eu não acho legal, mano, isso eu não curto não, velho. Isso é loucura. É igual o Material fez, cara. Material já tá na versão 3. E aí, por exemplo, um projeto lá da empresa, a gente usa o Material, atualizamos agora Eles botaram todos os componentes, mano. Acho que foi na v16, cara. Eles botaram todos os componentes do Material como legacy, cara. Tudo. Mas sabe o que que é tudo? É tudo, mano. Todos, todos os componentes do Angular Material foram mudados com o nome dos imports para mat-button-legacy. E aí você tem que mudar todos os importes da sua aplicação inteira, mano. Imagina o trampo que deu, cara. Você foi no Schematics, mano, mas cara, o Schematics deixou algumas coisas passar. Então, por exemplo, eu peguei uma tarefa esses dias lá no trampo, aí eu fui testar, o modal não tava abrindo. Aí eu fui ver por que que era, porque o Schematics não tinha atualizado o modal. E mano, simplesmente não abre porque você tá usando a versão atual que não, que tipo assim, botaram break change em tudo e botaram para Legacy e falaram que resolveram. Pronto, resolvido, mano. Eu não gosto disso aí, não faz sentido nenhum. Enquanto isso, meus amigos, aqui, ó, o nosso lindo, nosso querido NG Zorro está aqui firme e forte, cara. Tá na V19 ainda, mas numa constância perfeita de versões, numa constância. O Anglo lança versão pouco, logo Pouco tempo depois a galera já atualiza para versão nova, tá atualizando com muita coisa nova, cara. Eles lançaram aqui, por exemplo, um splitter. Isso aqui não tinha antes, cara, lançaram na versão 19. Foda para caramba, cara, foda para caramba, foda para caramba. Então, cara, tem muita coisa, cara. É uma coisa que eu uso muito aqui, lançaram na V17 Flex, mano. Ministério, eu uso isso aqui para todo lado, cara, mas para todo lado. Para não ter que ficar colocando CSS para criar flex, porque eu não uso Tailwind, não sou usuário de Tailwind, sou usuário de Tailwind nos UI, porque a gente tá copiando o ChatCN. Mas eu uso flex, mano. Você bota um nz-flex aqui, ó, vertical, acabou, mano. Alinhando a vertical, não tem segredo. E você pode usar ele em vez de uma div com nz-flex, ele é o próprio componente, cara. Então fica muito fácil de trabalhar, muito fácil fazer as coisas. Então tem uma coisa nova aqui no Space, um input number aqui novo. Colocaram um legacy aqui nesse aqui, ó, mas só um componente, cara, não é uma biblioteca inteira que eles mudaram. Isso aqui eles lançaram um aqui, ó, feature component. Isso aqui eu achei da hora, velho. Isso aqui não tinha também não, lançar esse checklist aqui, ó. Você lança o seu SaaS, a pessoa entra no seu SaaS, você já cria um checklist para ela dos steps que ela tem que fazer para aprender a usar o sistema. Olha que coisa linda! E lembrando, cara, o NG Zorro, ele usa o Ant Design. Então ele não pega as ideias do nada, ele pega a ideia do Ant Design, cara, que é uma biblioteca de React bem famosa também no React. Então, lá, mesma coisa, cara, mesma coisa, só que para o Angular. Só que o que que o NG-Zorro tem de diferente, cara? A experiência de desenvolvimento. Isso aí a galera não entende, cara. Isso é uma coisa que a galera ainda não entende. Por que que eu bato tanto na tecla da experiência de desenvolvimento, de programar e de usar o NG-Zorro, cara? Porque é diferente, mano. Vocês só vão conseguir entender isso quando vocês usarem o NG-Zorro. E quando vocês usarem, usar de UI, porque a nossa proposta é ter uma experiência de desenvolvimento igual a do NGINX. Porque, mano, a gente apanha muito que esses outros, que essas outras bibliotecas, cara, não tem uma experiência boa. É tudo muito fácil, tudo muito rápido, tem muito componente, é tudo pronto, fácil de usar. Aí o Jefferson mandou aqui, ó, que eu achei legal para a gente ver a quantidade de componentes disponíveis. Pô, mano, tem bastante, mas o NGINX tem mais, cara. E tem tudo que você precisa, literalmente, na palma da sua mão, de uma forma muito simples, prática e fácil. Aí o Helder mandando aqui, ó: pensei que você gostasse do anglo-matir. Não, mano, anglo-matir eu não gosto não, cara, não gosto nem a pau, não gosto, mas não gosto, não gosto. Eu achei, eu acho na verdade uma vergonha, cara, uma vergonha do do time da Google não fazer uma biblioteca de componentes, tipo assim, que realmente atenda a gente como desenvolvedor, cara. E, cara, é a mais famosa. Por quê? Porque é a biblioteca oficial do Angular, cara. Entre aspas, né, oficial, porque é da Google, mas é biblioteca oficial, cara. Só que vocês que usam, são usuários de Angular Material, vocês sofrem, cara. Só que vocês estão aqui, ó, com um negocinho aqui no olho que vocês não conseguem enxergar. Porque vocês não usaram em Jesus ainda. Simples assim, simples assim, meus amigos. Tá, breadcrumb, cara. Vitor Souza, não tem nenhum PR dele, cara, e eu não sei quem que é esse brother aqui, então eu vou mandar para ele, cara. Vito sauce. Mandar uma perguntinha aqui. Se ele não responder até semana que vem, a gente tira o nome, pega, pega para outro, deixa livre, tá bom? Então, breadcrumb, progress bar. Eita caramba, abre aqui. Progress bar, Edmário tem interesse em criar esse componente. Eu acho que é esse aqui, tá com PR aberto já, cara. Cadê, cadê, cadê? Beleza, esse brother aqui, mano, o Luiz falou que ele já tinha aberto o PR, só que tava cheio de conflito lá. Tava cheio de conflito e ele fez um fork. Então depois a gente vai ter que revisar o PR dele aqui para ver como é que tá, tá? Mas esse aqui a gente já tá com PR aberto. Deixa eu só ver como é que tá lá no projeto, se ele já tá em code review aqui. Beleza, progress bar tá aqui. Show. Então, progress bar. Esse aqui do Cauã, cara, eu tinha mandado uma pergunta para ele, mas depois eu vou mandar aqui de novo. Show! O calendar, cara, mano, esse brother aqui, você nem o nome dele, Diego, brabo! O cara simplesmente fez o componente de calendar, cara, ele fez o componente, mano. A gente tá para revisar. Tem bastante coisa, cara, bastante coisa para olhar, revisar. Parece que não tem nenhum conflito aqui, mas depois na live eu consigo dar uma olhada aqui, dar uma revisada, ver o que que a gente pode dar de retorno para ele. Eu sei que o Luiz tinha falado que ia dar uma olhada também, mas tem um componente calendário, cara, ele fez bastante coisa. Eu achei Foda para caramba, mano. Foda para caramba, velho. Foda para caramba, moleque fez muita coisa, mano. Eu acho que falta só deixar uma estilização mais parecida com a do, com a do cara. Acho que é só depois a gente dá um tapa para deixar algo mais parecido com isso aqui, com essa interface. Mas, mano, o cara fez um componente calendário, vocês estão entendendo isso, mano? Feature Calendar, quer ver? Deixa eu ver se eu consigo rodar ele aqui, mano. Deixa eu mudar aqui para o Calendar, aqui dá um sync, do npm run start. Vou mostrar para vocês o componente calendário, só esperar rodar aqui. Beleza. Rodou. Components, Calendar. Se liga nisso aqui, mano. O maluco fez, velho, componente calendário. Você consegue selecionar as linhas aqui, ó. Depois a gente tem que olhar isso aqui. Olha lá, mas tá, mano, aqui, velho, um fucking componente calendário, mano. Consegue abrir aqui e mostrar as coisas aqui, visão de semana. Olha isso, mano! E visão de dia, brabo, tá brabo, brabo, brabo, muito brabo! Nenhum evento para hoje. Week View com eventos. Olha, olha isso aqui, mano! Aqui clicou, aqui a gente provavelmente deve ter um on-click nela. Da hora, imaginei! Seleciona a data, ele tem as datas selecionadas. E aí dá para quando clicar aqui, dá para pegar o evento desse dia, mano. Mas ficou foda, mano, ficou muito foda, cara. Já tem as coisas aqui, o evento, ele deixou bem, bem explicado aqui. É só a gente trabalhar nessa questão da documentação para deixar aqui e trabalhar para ele ficar aqui, ó. É isso aqui, é um trabalho que a gente vai ter, cara, porque o que ele fez foi esse aqui, né? Ele fica assim. Então a gente tem que fazer esse calendário ficar ter uma versão dele assim, bem parecida com a do ChatGPT, qual interface do ChatGPT, porque aqui tá com interface um pouco diferente, certo? Mas, cara, isso aqui já é muita coisa, mano. Dá para a gente trabalhar muita coisa com isso aqui, cara. E aí fazer o calendário deixa eu ver aqui, ó, fazer o calendário funcionar. Caramba, que viagem torta que é essa aqui! Mas funcionar, por exemplo, para esse tipo de coisa aqui, ó, para um input, entendeu? Então clicou, a gente fazia um input calendar, clicou, selecionou, botou a data lá no input, date. Depois a gente tem que ter um time picker também. Mas a ideia depois no futuro é a gente ter um calendáriozinho assim, ó, um input calendar. Caramba, isso aqui é loucura, hein? Tomorrow, tomorrow, today. Não é possível, mano. Olha isso aqui, velho. Olha isso aqui, ó. Seu post vai ser publicado dia 13. Se eu boto today aqui, cadê? Today, 12. Next week, 19. Que viagem torta que é essa aqui, cara? Next month. Isso aqui, né? Que que é isso, mano? This component uses Crono Node Library to parse natural language dates. Isso aqui eu nunca tinha visto não, tá? Isso aqui é novidade. Isso aqui é novidade. Você usa linguagem natural linguagem humana para definir uma data no calendário, mano. Loucura, mano, loucura, tá? Loucura. Last year, June 1st. Aqui não vai pegar. June 1st pegou, tá? Você tá doido, você tá doido aí, ó. Deixa o like, guys, deixa o like. O Fábio Miranda já mandou aí, ó, deixa o like, cara. Quem é criador de conteúdo sabe da importância desses likes, dos comentários. Valeu, Fábio. Eu esqueço, mano, eu fico aqui na live, eu vou comentando com vocês, vou conversando com vocês. Mas valeu, Fabião, aqui, ó. Tamo junto, mano. Obrigado, viu, por participar aí. Tamo junto e misturado. Até a próxima, meu amigo. E tô esperando seu PR, hein. Esquece não. O Helder mandou aqui, ó, calendário. P.S., isso é sensacional. Isso aqui é um calendário. P.S., aqui, ó, se liga aqui, ó. Você tá doido! Pérsia, mano, pior que é Pérsia mesmo, velho. Pérsia e Rígiri, já, já lá te calendário. Você quer loucura, você quer loucura. Entendi foi nada aqui, tá? Mas esse aqui foi da hora, mano. Aí um calendário por forme. Então isso aqui, ó, isso aqui a gente vai ter que ter, mano, tem que ter um pick date aqui, ó. Com opção de você passar uma data anterior, só as datas diferentes. Isso aí, isso aqui tem que ter, mano. No NG Zorro, o calendar, tem esse calendar aqui, eu já usei bastante, cara, é bem da hora. Esse é o calendar do NG Zorro. Mas realmente, mano, aqui a gente tá falando de calendar e o componente que eu tô falando aqui seria o componente de input de date picker. É um componente diferente, são coisas diferentes, tá certo? Então coisas diferentes. Você quer um date picker? Então a gente consegue botar esse date picker aqui, ó. Isso aqui é uma coisa, acho que até um, uma isca que eu posso criar, mas o componente de calendar É isso aqui, mano, que é lenda. Cadê, cadê, cadê, cadê? Que é lenda, que é lenda! A gente tem um calendário bem grande aqui para a gente mostrar. No Ministral, cara, eu uso bastante, uso bastante mesmo, cara. Aqui, ó, por exemplo, meu calendário, eu uso aqui, ó. Eu dei um— isso aqui é um calendário do NGZorro, cara. Eu dei uma customizada nele, sabe, para ele ficar assim. Mas quando eu clico aqui, ó, ele aparece as reuniões. Da semana. Eu uso ele aqui, por exemplo, em eventos, que é o mesmo calendário, sabe? Eu uso ele aqui, ó, nos DNAs. Deixa eu mudar de igreja aqui só para mostrar para vocês, mas eu uso aqui, ó, G6, nas reuniões. Então é um componentezinho, é esse componente de calendar que eu uso aqui, cara. Só que eu uso ele com um reader customizado, que eu customizei para ficar mais fácil. Eu botei esse hoje, esse para frente, para trás, e um select de mês, sabe, para ficar um pouquinho mais fácil de navegar entre eles. E eu customizei esse iconezinho aqui, ó, esse botãozinho, para ficar bonitinho assim. Porque aqui ele só ficava marcado assim, sabe? Aí eu acabei customizando um pouquinho isso aqui, foi bem tranquilo. E uso bastante, cara, uso bastante. Tem uma parte de calendário aqui também, ó, que é maior. Esse aqui é o calendário que a gente tem geral, mas é o calendário grande aqui, ó, que é o que a gente usaria, sabe? Então o que eu penso é que esse calendário aqui mesmo é esse calendário que eu usaria ele aqui, ó, um calendário grande de tudo que tem com os eventos. E aí eu tenho que conseguir customizar esses eventos, colocar esses eventos aqui enfileirados, certo? Então aqui eu posso vir aqui para os dias anteriores, mês anteriores, se tiver mais de um evento, ele fica enfileirado aqui, fica bonitinho, você clica ele abre um modal. Então eu penso que esse calendário aqui, esse componente, seria basicamente isso. Show! E aí eu sei que no ChatGPT botaram tudo dentro de um negócio só, cara. Não sei como é que funciona esse negócio aqui não. Só chamo Calendar aqui, o molde, e acabou. É que, como é que eu uso? Como é que eu boto o evento aqui nele? Não sei, cara, sei não. Se a gente vai ter que descobrir, é que ele é componente de um top of react, daí pica. Eu quero ainda dele aqui, é desse jeito. Mas show, cara, moleque! O cara, o cara foi brabo aqui, tá, do calendário. Então, calendar, o carrossel, o nosso amigo o Helder já falou aqui na live que ele tá trabalhando nele, certo? Cara brabo também, fazendo bastante coisa, ajudando bastante. O chat, a gente tá aberto, não tem ninguém com ele. O table, cara, o nosso brother aqui falou que pegou ele também, esqueci o nome dele, Ezequiel. Deixa eu mandar uma perguntinha aqui, ó. Mandando para ele aqui. Show! O Comand, o Comand, o Lucas fez, cara. Eu comentei uma porrada de coisa aqui revisando o PR dele, só que ele não respondeu ainda não. Fiz bastante comentários. Só que ele não respondeu ainda não. Então esse aqui tá, já tem bastante coisa também. E o toast, não, esse toast aqui tá duplicado, mano. Aqui é o toast, tem um do toast do Fábio aqui, ó. O Fábio, que que eu vou fazer, mano? Deixa eu remover esse toast daqui. Vou remover o Fábio daqui, eu vou fechar esse toast aqui. Porque o toast que eu criei aqui, ó, ele já tem todas as especificações do serviço, as referências. Ele que tá mais completo, tá? Então eu vou tirar aqui, eu vou botar Fábio, Fábio Miranda. Fechou, tá feito aqui então, que aí fica mais fácil quando o Fábio for desenvolver, cara. Aqui eu vou abrir nos projetos só para me achar o Toast aqui. Cadê Toast? Não tá aqui. Deixa eu achar aqui. Abre GitHub aqui. Issues. Toast. Botar no board. Board está no progress. Não tá não. Oxe, tá falando que tá no progress aqui, mano, mas não tá. Eu tinha tirado ele daqui. Beleza, toast restore in progress. Ready, beleza, apareceu aqui com Fabião. Show! É, o Éder mandou aqui, ó, tem um link. Pera aí, só vou ver. Tem um link ali na página do site falando de date pick, deve ser lá que explica. Que linda! Aqui, ó, esse react day picker aqui, ó. React day picker. Só que o ChatGPT mudou bastante coisa na interface. Aí ele mandou usar É a diferença entre um framework com a lib. Ele manda usar a documentação da outra lib que ele usa, se a gente quiser customizar o negócio, mano, entendeu? Então você olha a documentação de outra lib em vez de olhar a sua documentação da sua lib, entendeu? É assim mesmo. Então vamos, navigation, selection modes. Entendi, entendi, realmente. E o que eles querem da composição do DatePicker? See the DatePicker page for more information. Então aqui a gente tem um DatePicker. DatePicker is built using a composition of popover and calendar components. See installation instructions for the popover and the calendar components. Perfeito. Ele usa um popover, ele instancia, né, o componente de calendário como um popover. Entendi, entendi, entendi. E o Spartan? Spartan tem que ser Ctrl+K funciona aqui, não funciona lá. Calendar. O componente do Spark é um pouquinho diferente, mano. HLM Calendar, date, min, max, disable, date disable, week start zone 0. A gente vai ter algo parecido com isso aqui mesmo. Aí vem aqui, ó, Brain API. Nossa Senhora, mano, muita coisa, velho. Help API, Multiple Selection. Ixi, tinha que botar uma, não consigo desselecionar, cara. Socorro, é no mínimo 2, tá? E o date picker, ele tem date picker? Tem, que é o componente calendário. É uma coisa, date picker é um componente, é feito pelo Popover e o componente calendário, cara. Mas ficou da hora também, cara. Não achei ruim não, só ver como é que ele fez mesmo para entender. Eita, caramba, voltou lá para baixo. Date picker, min/max, span picker, date, é, chama realmente date picker. Perfeito, é assim mesmo. Mesma coisa dentro do Razor aqui, ó. Quando a gente vem no DatePicker, a gente chama o— provavelmente o ZDatePicker, NZDatePicker, e passa a model para ele do nosso FormsModel, o tipo, e aí ele vai instanciar para a gente. Perfeito. Show! O que que eu falei, cara? Eu falei que eu ia— deixa eu abrir aqui de novo, cara, as issues. Eu ia criar uma issue por alerte, para o dialogue, dialogue alert, alerte dialogue. Show! E aí, deixa eu mostrar uma coisa para vocês, guys. A gente tem aqui, ó, deixa eu tentar achar agora, cara. Perfeito! Se liga nesse aqui, guys, esse aqui é novo. Quem tá na live, presta atenção, dá uma olhada nisso aqui, ó. Dentro do nosso ZardUI a gente tem uma pasta chamada docs e tem um instructions, instructions, meu Deus. Instructions.md. Que que é isso aqui, cara? Isso aqui é instruções que eu vou passar para uma inteligência artificial, para o ChatGPT, que vai ser— eu vou mostrar para vocês como é que eu vou fazer, mas eu vou passar para o ChatGPT, eu vou mandar esse aqui para o ChatGPT. Então ele tá falando, ó, você é um expert em gerar um GitHub Issues para novos componentes, usa esse guideline aqui o título tem que ter assim, o componente tem que ter assim, a descrição tem que ser clara, as referências tem que estar assim, ó, exemplo, ChatGPT, um spec de API aqui, acceptance criteria aqui, e um exemplo final. Então esse instructions aqui vai gerar uma issue igual essa aqui, ó. Olha que coisa mais linda! Você pega uma issue dessa aqui, fica até fácil desenvolver, não fica? O toast, as referências. Então você clica, você consegue ver a referência do Xar, do ChatCN, do Zorro e do Spartan. Ele já cria o link aqui certinho baseado nisso. E aí depois aqui, normalmente a gente tem que criar, né, isso aqui na mão, a API, como é que vai ficar, e um acceptance criteria. Então vou mostrar para vocês aqui na prática. Ctrl+C. Eu vou abrir o nosso amigo ChatGPT. GPT, vou abrir nosso GPT aqui. Apresentamos a nova memória aprimorada. Agora não quero saber, agora não. Vou mandar esse aqui para ele. Mandei. Aí ele me pede, me deu o nome do componente, aí eu vou mandar Vou mandar aqui, ó, alert dialog. Então vamos aqui, o GPTeco, cadê o GPTeco, mano? Tá aqui, alert dialog. E olha, gente, olha, ai meu Deus, e é bom demais, né, mano? E olha que foda, mano, ele já entendeu, ó, que o ChatCN ele usa o component alert dialog. O ng-zorro não tem o componente alert dialog, ele tem o modal, é um componente só. Isso aqui é muito foda, mano. Então eu copio aqui, eu vou vir aqui nas issues do meu lindo usar UI. A gente já tem aqui, ó, que a gente fez também, né, cara, um template para isso. Olha lá, é o mesmo template, tá vendo? Então Ctrl+A. Ctrl+V. Aqui eu vou pegar, que é do nome. Quando eu venho no preview, já tem aqui, ó, que coisa linda! Praticamente tudo que a gente precisa, exceto esse criteria. Pronto, e create. Tá pronto, meus amigos. Vocês já podem pegar aqui a issue do alert dialog. É um modal que representa a interação de um usuário. E aí tem as referências. Quando a gente abre aqui, ele abre tanto a UI quanto o source code. Se você quiser ver o código source desse carinha, tá vendo? Ele é um dialog aqui. Ele já mostra aqui um expected API. Já usa lá o z-open, z-title, z-description, z-confirm text, z-cancel text. Z-danger. Aqui a gente vai ter que mudar, mas a gente vai usar a mesma coisa do nosso modal que a gente tem, tá? Mas já tá pronto aqui o componente de alert dialog, então já tá pronto para alguém pegar. Deixa eu ver os comentários aqui que vocês mandaram. Tem bastante comentário. Só dando um tchau para o Hélder aqui que ele mandou. Falou, meu amigo. Não sei se você tá aqui ainda, mas obrigado por ter participado aí. Obrigado por estar compartilhando com a biblioteca. Você é brabo, mano. Tudo de bom para você. Até semana que vem. É, Mateus Goés mandou: Samuel, onde que você hospeda o front do Ministrali? Mano, eu hospedo ele no Firebase Hosting. Eu tenho um vídeo aqui no canal que eu falo sobre o Ai, deixa eu mostrar aqui, ó. Pera aí, onde que seus prédios front? Eu tenho um vídeo aqui no canal, mano. Esse vídeo aqui, ó, foi até o vídeo que o Mano Devim reagiu, cara. Aqui, ó, eu ganho R$2.000 por mês com essa simples. No vídeo, mano, eu mostro o Ministre e depois eu mostro a arquitetura que eu uso, cara. Então basicamente ela é o Firebase Hosting, é gratuito, não pago nada. É muito simples de manter isso aqui, tá? A gente usa aqui nos Arduai também, então é bem simples de manter essa arquitetura. Então eu tenho todo o meu front-end dentro do Firebase Hosting, que é gratuito. Tem uma parte bem, bem generosa, a parte gratuita, não pago nada, e eu subo as coisas nele. Então bem fácil, bem, bem fácil mesmo, tá? O Gabriel mandou aqui, ó, então me fez basear no ChatGPT, cantei a pedra. Caraca, até a pedra! E é isso mesmo, mano, igual eu falei, que, ó, só joguei no ChatGPT a instructions, tá aqui, tá lá, mano, tá o código Open Sans, cara. Tem instrução aqui, você manda a instrução para ele, a instrução tem tudo, cara. Aqui, ó, quando a gente vem aqui dar um preview, mostrando para vocês, ele mostra aqui, ó, as instruções, o título, a descrição, as referências. Expect API, critérios de aceite, um exemplo, labels, consistency, o prefixo, né, que a gente usa nos hard UI, tudo tem que ser feito em inglês. E aqui um exemplo de uma issue. Então eu dou um exemplo do que que eu tô esperando, e aí ele fala, cara, me manda aí qual componente você quer criar. Então mandei lá, só mandei, cara, alert dialog, acabou. Só copiei e colei, colei lá. Qual o outro que a gente tinha olhado, cara? O date picker. Vou mandar para ele aqui, ó, date picker. E aí ele vai me criar uma issue do date picker. Esse aqui a gente vai precisar também. Perfeito, copiei. Cheguei aqui, colei, novo componente, Ctrl+A, Ctrl+V, e eu só pego isso aqui, ó, que é do título, apago. Beleza, que ele já colocou todas as referências, a parte de que a gente espera, né, date picker, placeholder, placeholder, minDate, maxDate, disable. E aqui, cara, eu gosto de olhar o do ng-zorro. Porque a nossa, o que a gente espera, né, que a experiência de desenvolvimento seja do ng-zorro. Então eu venho aqui no ng-zorro, tem API do ng-zorro e ele tem bastante coisa aqui, cara, um detpick. Basta a gente dar uma olhadinha aqui. Disable, deixa eu ver se a gente tem um disable aqui. Z-disable, Z-clearable. Format, isso aqui é importante. Max date, min date, a gente tem aqui também no ng-zorro. Placement, tá, z-onchange, z-on-touched, perfeito. Placeholder, z-value. Disable date, isso aqui é muito importante, mano. Isso aqui é importante para caramba. Aí uma outra dica, cara, aqui a gente não vai conseguir formatar. Então o que que normalmente eu faço? Eu venho aqui no meu VS Code mesmo, colo, porque no meu VS Code eu consigo formatar bonitinho. E além disso, no meu VS Code, eu— qual que eu vou colocar aqui? É o Z— caramba, mano— ZDisableDate. ZDisableDate. Perfeito. Então ele já pegou que é um date aqui, ó. Date boolean function to disable specific dates. Aqui o ChatGPT, o Copilot, manda muito bem, cara. Tá, tá, depois a gente pode ir adicionando outras coisas, cara, mas de início, min date. Acho que aqui a gente não tem o min date nem o max date. Esse aqui não precisa. Placeholder, clearable, hello clear. ZLO clear. Perfeito, perfeito. Inicial clear. Acho que isso aqui não precisa. Disable date. Eita, caramba, não quero salvar isso aqui não. Imposto de renda, ZLOK, eu também por enquanto não precisa. ZMODE, date week, month, quarter, set picker mode. Isso aqui é da hora, mano. Z mode, Z mode, date week. Here, perfeito. Eita, Giovanna, eita, quebrando tudo aqui. Por quê, caramba? Beleza. The mode default date. Perfeito, cara, aqui já foi. E vamos criar aqui também. Beleza, então criamos a issue de alert dialog date picker. Tudo já tem aqui, beleza. Já tem bastante coisa, cara. Show. Respondendo o Gabriel aqui, ó. Fala, Gabriel. Mano, chegou a dar uma olhada no Spartan UI, que que você pensa a respeito, mano? Já sim, cara, já respondi isso aqui na última live. Eu sei que a maioria das lives que a gente for fazer aqui, quando a gente fala, né, a gente vai falar sobre o Spartan. Mas, cara, qual que é a questão do Spartan? Que que a gente tem contra o Spartan? Deixar sua perguntinha aqui, cara. O Spartan, cara, eu tenho um post no Tab News aqui só para você entender a diferença, cara. Tab News, meus conteúdos. Bora construir o ChatGPT para Angular. Qual que é a questão do Spartan, mano? O Spartan, o cara teve a mesma ideia que a gente, cara, que é trazer o ChatGPT para o Angular. Só que, porém, contudo, entretanto, ele trouxe a forma de desenvolver do React para o Angular, e isso não ficou legal, mano, não ficou legal, porque o jeito que a gente desenvolve em Angular é totalmente diferente do React, cara. Então, por exemplo, se a gente chega aqui no ChatGPT, que eu gosto de comparar, por exemplo, é o— vamos pegar esse aqui, ó, alert dialog, que é o exemplo que eu tenho ali, ó, alert dialog. No React, cara, você tem tudo separado, entendeu? Você tem tudo separado aqui, ó. Então você passa tudo isso aqui para você criar um alert. Você pode sim criar um componente para fazer isso e passar por parâmetro isso aqui, pode. Mas essa é a forma do React desenvolver. E ele fez a mesma coisa, mano. Só que ele fez a mesma coisa e olha como é que ficou, cara. Isso aqui tudo, olha o tanto de import que você tem que fazer, cara. Ele separou em brain, em helmet. Ele colocou import de componente diretivo para todo lado, mano. Aqui, ó, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 11 imports para criar o alert dialog. E aí, o que que eu sempre bato na tecla, cara, de uma biblioteca de componentes para Angular que funciona, que é o ng-zorro. Então, a premissa do usar UI, cara, o nosso objetivo é ter a beleza do chat.cn, aqui, ó, a beleza do chat.cn, o style do chat.cn, com poder no ng-zorro. E qual que é o poder do NGSO? É isso aqui, ó. Isso aqui é a forma que o Spartan UI mostra um dialogue, e essa aqui é a forma que a gente quer fazer no ChatGPT, no ZardUI. Cara, um dialogue não precisa ter mais do que isso, mano. É um service. Eu não preciso importar tudo isso aqui, mano. Eu não preciso, cara. Eu preciso só de um service. Um service que faz o quê? Eu passo o título, o conteúdo e espero uma resposta. Aqui, ó, eu tenho uma função que espera uma resposta. Isso é uma experiência de desenvolvimento, entendeu? Isso aqui é uma coisa que você já tem como padrão, que é fácil de você entender, e no seu dia a dia é muito fácil de você desenvolver, cara. Agora, ficar, mano, fazer isso aqui na mão, cara, na mão, para você ter literalmente, cara, um botãozinho aqui, ó, isso aqui, ó. Você tem isso aqui, entende? Essa é a diferença, cara. E aí o cara que fez o Spartan, cara, assim que o cara criou, eu fiquei muito empolgado com o projeto e eu ia começar a trabalhar nele, começar a contribuir nele no projeto open source. Só que quando eu cheguei e eu vi essa baguncinha aqui que ficou, cara, eu desanimei total, mano. Eu falei, não dá não. Aí eu conversando com o Luiz, né, que é o outro fundador, tá comigo à frente dos Ardui. Ele já tinha ideia também, eu tinha vontade. Ele falou, mano, vamos fazer esse negócio junto, velho, vamos abrir para comunidade Angular, falar para galera e falar, cara, vamos criar um chat para o Angular, cara. E aí hoje a gente tá aqui, cara. A gente começou a codar em março, primeiro comitê foi em março, a gente já tá em junho e já tem, cara, mais de 10 componentes. A gente já tem tooltip, Já tem tooltip, já tem as tabs, a gente já tem um switch, select. Esse select tá bem simplesinho, galera, a gente tem que melhorar ainda. O rádio, o modal, que é o que eu tô fazendo, acabei de abrir o por request, fiz aqui na live. Loader, input, olha o tanto de componente que a gente já tem, mano. Dropdown, esse aqui é outro que tá bugado também, tem que corrigir. Divider. Então, mano, isso aqui foi tudo feito pela comunidade em 2, 3 meses, 3 meses. Então, tipo assim, foi muito rápido o que a galera fez, que a galera chegou para contribuir. Já tem uma galera que contribuiu e já tá rodando, mano. Então a nossa ideia é fazer isso, ó, já linkar todas as pessoas que contribuíram no projeto. Isso é um projeto que nasceu agora, mano, tem Pouco tempo. E aí, toda quinta eu tô vindo aqui fazendo uma live, trabalhando nisso aqui, programando, mostrando tudo, cara, todo o processo. E é isso, mano. Por isso que é o que eu penso a respeito do Spartan. A gente só quer ser uma biblioteca de componentes para Angular que funcione de verdade. Maneiro demais! Nunca cheguei a um tribo compartilhada, pensou se poderia ter uma experiência da hora com ele? Pô, tá aí o projeto, mano, para você contribuir, velho. A gente aqui se ajuda, faz bastante coisa. A gente tem uma comunidade no WhatsApp aqui em cima, aqui, ó, tem um QR code para o grupo do WhatsApp, tem um grupo lá dos hardwire. E a gente bate papo lá, me recomenda alguma coisa de colocar a mão na massa, mano. Você já sabe Angular, cara, já consegue colocar a mão na massa, mano. Não tem segredo. Os componentes aqui são todos bem distribuídos. Aqui eu tenho na live, né, esse componente, por exemplo, do dialog, eu comecei ele do zero aqui na live. Então desde a primeira live até hoje eu fiz o componente do zero. Então é bem simples de você criar as coisas. A documentação, mano, que é uma coisa que a gente fica preocupado, né, ela é automática, mano. A documentação você faz aqui, as coisas, cara. Por exemplo, botão aqui, ó, deixa eu pegar o componente botão. Isso aqui é um markdown, mano, você não precisa criar a página disso aqui. Você quer feito por um markdown e a API também é feito por um markdown. Então aqui, ó, dentro da nossa, do nosso projeto a gente tem as libs, a área src, lib, components. E para cada pasta aqui a gente tem os códigos do componente, a gente tem os códigos do componente aqui, ó. E aí, por exemplo, a gente tem uma pasta chamada demo e uma pasta chamada doc. E aí, para cada pasta doc, a gente tem o API.md, tá vendo? Esse API.md é um markdown que gera esse carinha aqui, ó. Então, mano, é muito simples, cara, de você contribuir, de você criar as coisas. E aqui a pasta demo, a gente tem os demos, as demos, que é um componente que usa o zButton. A gente bota ele aqui no button.ts para mostrar os exemplos do componente default e ele já gera a página inteira dinamicamente. É bem simples, ele gera já com preview e com código. Esse código aqui é esse código desse default aqui, ó, zard-demo-button-default-component. Então, cara, tipo assim, você já sabe Angular, já fez alguma coisa, bota a mão na massa, mano, você vai aprender muita coisa nova aqui. A gente tá usando o Signals, a gente tá usando todas as coisas novas do Angular, então uma puta oportunidade da gente aprender coisa nova aqui. Que estão lançando nas versões mais novas do Angular, sabe? Então tem bastante coisa que a gente consegue aprender nesses projetos, cara, que coisa que às vezes a gente não consegue aprender nos projetos da empresa que a gente tá, mano. Eu entendo, cara, tem empresa hoje que a gente tá, talvez você tá no Angular 12, o Angular 10, tem empresa no 9, sabe? E aí acaba que a gente não consegue pegar todas as atualizações, as coisas novas que o Angular tem, cara. Mas entra lá para comunidade, mano, e a gente se ajuda lá. A gente bate papo, a gente conversa, fala do projeto. Se tiver com dúvida, pega uma issue. Se tiver com dúvida, manda mensagem lá. A gente faz uma videochamada e a gente se ajuda lá para você conseguir contribuir também. Vai ser muito bem-vindo. Show! É isso, meus amigos. Já são 9:30, já deu uma hora e meia de live. Eu queria, cara, muito testar uma última coisa aqui com vocês, guys. Não sei se vai dar certo a gente fazer agora, mas eu queria atualizar a versão do Angular só para, só de teste aqui, ó. Só de teste, tá, que eu vou fazer. Vou botar na alfa aqui e vou criar aqui um V20, feature Angular V20, só para mostrar vocês uma coisa, cara, que eu curto. Vamos ver se vai dar certo. Eu só vou fazer um teste. Para ver se vai rolar. Por que que a gente usa o NX? Por que que eu uso NX? Muita gente me pergunta por que que eu uso. Deixa eu voltar aqui, ó. Tem gente pergunta por que que a gente usou o NX aqui, por que que a gente usa o NX, cara. Uma das coisas mais fortes que o NX tem é para a gente atualizar projeto do Angular, cara. Então, NX update Angular version, se eu pesquiso aqui, cara, A gente tem aqui, ó, um comandinho. Caramba, eu esqueci o nome do comando, cara. Aqui, ó, esse aqui, ó, npx nx migrate latest. Se liga que ele vai fazer, cara. Rodamos aqui. A gente tá usando a versão 19 do Angular, tá? Então a gente já tá numa versão bem atualizada. A versão mais recente tá na 20 do Angular, se eu não me engano. O Angular lançou agora a v20. E aí, o que o NX faz, cara? Olha lá, ele já tá pegando não só as ele tá pegando não só as bibliotecas do Angular, cara, mas ele tá pegando todas as outras bibliotecas e atualizando junto. Ele tá perguntando se eu quero ativar o remote cache. Vamos skip for now. Beleza. Que que ele fez? Olha aqui, ó, ele criou um arquivo de migrations. Olha lá, que que ele faz aqui, cara? Ele literalmente roda todas as migrations do Angular, que o Angular Criou remove legacy cache e outras coisas dele também, migrations de Jest, next-angular lá. Ele vai rodar todas as migrations. Então agora o que que a gente precisa fazer? Ele fala aqui, ó, make sure package.json makes sense, then run npm install. Beleza, npm install. Por quê? Olha o tanto de biblioteca ele atualizou, cara. Angular, NX e várias outras bibliotecas aqui. Aqui ele já deu um erro. Found S-Lint 9. É S-Lint. 928, 980. Vamos ver aqui, ó, por causa dessa biblioteca aqui, ó, TypeScript, ESLint Parser. Deu um erro. Isso aqui é normal para atualizar biblioteca, cara. Could not resolve dependency. S-Lint. 720, uso S-Lint 856. Mas onde que eu tô usando esse TypeScript S-Lint aqui? Excellent. 98 from the root project. 928. Next. Excellent. Provavelmente a gente não tá pronto ainda para atualizar tudo certinho. Provavelmente deve estar faltando alguma coisa do next aqui. Para a gente atualizar, cara, porque tá vendo aqui, ó. Então a gente deixa isso para depois, guys. Eu queria só testar para ver se ia rodar de primeira. Infelizmente não rodou. Vamos esperar mais um pouquinho, mais uns dias ou um mês ou dois meses para a gente atualizar para versão 20, para deixar tudo certo. O problema tá aqui dentro do NX, o S-Lint plugin. Talvez se eu tirar o node_modules, dá um npm install, né? Rodou não. Apagar o package-lock, npm install. Não foi. Agora é o ngx-markdown. Vamos lá, como 23. NGINX Markdown, rodar de primeira, mega cena total. Pior que é mesmo, né, mano? Você tá doido, velho. Rodar de primeira é uma migração. NPM NGINX Markdown, vamos só ver aqui, ó. Porque é isso, mano, para atualizar para versão muito nova, cara, sempre vai dar esses problemas, sabe? Tô só vendo aqui se já tem, eu já tenho a 20, 20 rodando aqui, mas ainda cai nessa dependência aqui do próprio NX, NX, cara, NX, SLint plugin, npm Nexa, excelente plugin. Vamos ver se ele tem mais uma versão mais nova, só para mim não deixar passar, porque aqui ele tá usando 21.2.0, nem a última. 21, aí, last publish 3 horas atrás. Você tá doido? Tô atualizando ainda, mano. Acabou de sair a versão, então provavelmente é isso. Então vamos esperar só mais um pouquinho para a gente conseguir atualizar tudo certinho. Mas eu tenho certeza que aqui, ó, só dele criar, mano, só dele criar já esse migrations aqui, já tá tudo certo. Eu só queria testar, cara, isso aqui, ó. Mas já que não deu certo Fica para a próxima, não vou quebrar cabeça com isso porque atualizar para a versão 20 do Angular agora, só que tem zero download. Cadê? Onde tem zero download? É exato, é porque acabaram de lançar, mano, acabaram de lançar a versão, cara. Provavelmente eles estão O que que ele tá falando? Tá falando com o ESLint plugin, olha lá, o 21.2.0, ele usa o TypeScript ESLint Passe, que usa o TypeScript Passe 6, 7, 8 do plugin aqui. Só que esse aqui usa o ESLint 8.56, cara. Só que a gente acabou já atualizando para o ESLint Cadê, cadê, cadê, cadê? É 29. Então provavelmente esse é o B.O., mano. Se eu der um npm install slint@8, não sei qual que é a última versão do SLint, cara, que tá na 8. É excelente. Nem sei se isso aqui vai funcionar, viu, guys. 928 lá e a 8. Caramba, não tem! Você tá doido? Não tem lá. É verdade, mano, excelente, mudou coisa para caramba, velho. Esquece, mano, deixa esses cara resolver esse B.O. aqui. Eu não vou pegar esse negócio aqui agora. Esse link mudou, foi tudo, mano, tudo, tudo. Você imaginar, acho que não é, esse link mudou, tá até aqui, ó, no histórico. Não tem nem a versão 8, só a partir da 9. Resetaram tudo, falaram quero nem saber, vai ficar só com a 9 mesmo. Mas fechou, guys. Bom, Galera, obrigado todo mundo que tá aí, obrigado todo mundo que tá participando. Muito boa noite para vocês, aproveitem o restinho aí do Dia dos Namorados de vocês. A gente passou mais um dia, o Dia dos Namorados, aqui codando, fechou? Para quem entrou lá para comunidade, seja muito bem-vindo. Ramon, valeu, mano, valeu por estar aí também. O Ramon que tá por aqui, que mandou as mensagens, o Gabriel também. Guys, obrigado pela participação. Semana que vem estamos aqui de novo, quinta-feira, 8 horas da noite, rodando mais, fazendo mais algumas coisas para o Zard, mexendo mais algumas coisas. Tamo junto lá na comunidade do WhatsApp. Então todo dia a gente tá lá mandando mensagem. Se tiver dúvida, tiver problema, manda lá, tá? Tá com B.O. no serviço hoje. Ela, hoje eu descobri, cara, meu Deus, mano, hoje 3 horas da tarde, olha a história, mano. Meu sócio tinha uma apresentação com Cliente, cara, cliente novo, acabou de contratar o ministrário, contratou o sistema, só se foi apresentar para fazer a implementação, que deixou tudo pronto, né, antes de 3 horas, né. Então deixou tudo pronto, tava tudo certo, chegou 3 horas, começou a conversar com o cliente, tava o sistema fora do ar, mano. Ele mandou uma mensagem desesperado, velho: cara, o sistema caiu aqui, o que aconteceu? Eu fui ver, mano, aí eu descobri no grupo, cara, no grupo da comunidade, a galera perguntou: galera, o Super Base tá funcionando aí para vocês? Aí eu falei, tá, não, mano. Aí a gente foi, aí que eu fui descobrir que o Claudio Fé tava fora, ficou fora de 3 às 5:30, mais ou menos 5 horas ficou fora, ficou fora tudo, cara. Claudio Fé, Claudio Fé manda na internet inteira, né, tudo passa por ele. Aí ficou fora, ficou fora tudo, cara. E aí o sistema ficou fora, aí foi, foi loucura o dia de hoje, cara. Mas é isso, cara. Então fiquei sabendo lá pela comunidade, a gente tem um grupo tanto do geral para bater assunto aleatório, falar sobre Angular, Superbase e vários outros assuntos. Temos o grupo dos hard UI para a gente conversar e falar só sobre as coisas dos hard UI. E a gente tem também, cara, um grupo que a gente está se ajudando e está se incentivando em fazer atividade física, que é o Refatorando Shape. Então, galera que vai para academia, galera que faz alguma atividade física, a gente está com um grupo lá, a gente fica postando foto, posta dica, posta coisa. E a gente criou um grupo no Gymheads também, pra gente ter um ranking lá de quem fez mais atividade durante o mês. E a gente tá planejando, eu tô planejando, né, daqui um, acho que mês que vem, já tô dando, tô olhando ainda, mas eu tô olhando pra gente dar uma premiação pra quem fizer mais atividade durante o mês, fechou? Então vai valer uma Coca e uma coxinha, uma Coca talvez, pra quem ganhar. Mas fechou, guys, vejo vocês então lá pelo WhatsApp. Semana que vem aqui nessa mesma Batcaverna, nesse mesmo Bate Canal. E é isso, meus amigos, muito boa noite, aproveitem a noite de vocês aí, boa semana, tamo junto, com Deus, valeu!