Angular e Storybook: crie componentes compostos em um Design System

Componente Typography - Apresentação

Boas-vindas ao curso de Angular com Nx e Storybook! Meu nome é Antônio Evaldo, sou instrutor na Alura, e irei te acompanhar ao longo desta jornada.

Audiodescrição: Antônio se descreve como um homem branco, de cabelos pretos cacheados e volumosos na altura dos ombros, e olhos castanho-escuros. Ele usa óculos de armação arredondada preta, veste uma camisa azul-escura com o logotipo branco da Alura, e está sentado em frente a uma parede clara com alguns quadros, iluminada em gradiente azul e rosa.

O que vamos aprender?

Neste curso, vamos aprender muitas coisas interessantes. Para começar a explicá-las, podemos apresentar o projeto em funcionamento no navegador.

No Storybook, temos o projeto dos cursos anteriores aberto em um dos componentes que vamos criar e desenvolver juntos: o componente de typography.

Além de explorar diversas questões novas com esse componente, desenvolveremos outro componente mais complexo: o modal. Ele está bem elaborado, vindo do Figma da Alfabit, empresa fictícia que abordaremos neste curso.

Falaremos sobre aspectos interessantes, incluindo a publicação de componentes, que podemos mostrar no npm. Por exemplo: o componente de botão (@alfabit-alura/button) depende do componente @alfabit-alura/typography, então também vamos explorar questões de dependência.

Ao final do curso, em uma aplicação externa ("AppExterno"), vamos conferir como podemos integrar todos esses componentes que criamos.

Nessa aplicação, temos o botão "Abrir modal". Ao fazer isso, o componente modal aparece no centro da tela indicando que deu certo. Internamente, ele utiliza o componente typography. Além disso, lidamos com os eventos de fechar o modal, tanto pelo botão "X" quanto pelo "Fechar modal".

Repassando os conceitos que serão abordados, aprenderemos a criar componentes compostos, componentes dinâmicos com a diretiva ngComponentOutlet, e a lidar com dependências no npm ao publicar componentes. Por fim, vamos realizar algumas melhorias no Storybook, como a questão de add-ons, de complementos, de args personalizados, e muito mais.

Ao final deste curso, seremos capazes de avançar significativamente no design system da Alfabit, de modo a criar componentes mais complexos.

Quais são os requisitos?

Para melhor acompanhamento do conteúdo do curso, é importante ter familiaridade com Angular, Nx e Storybook, pois utilizaremos vários conceitos básicos dessas ferramentas.

Conclusão

Tudo preparado para nos acompanhar? Esperamos você no próximo vídeo!

Componente Typography - Criando a biblioteca e o story do componente de tipografia

Já temos uma versão do Storybook da Alfabit e dois componentes desenvolvidos no design system. Começaremos com o Storybook aberto no navegador, para dar início aos processos.

Criando a biblioteca e o story do componente de tipografia

No VS Code, temos o projeto do design system da Alfabit, e executamos no terminal o comando para abrir o Storybook, que pode ser feito tanto pelo terminal diretamente, quanto pelo Nx Console.

Detalhamos essas informações na atividade Preparando o ambiente.

No navegador, temos o botão (button) e o input (input) desenvolvidos com seus vários stories, etapas realizadas nos cursos anteriores. Entretanto, no Figma do design system, ainda há muitos componentes a serem desenvolvidos, como checkboxes, modais e notices.

Não teremos tempo para fazer tudo isso ao longo da formação, mas podemos criar um componente importante da aba "Pages > Átomos" no menu lateral esquerdo.

Conferimos que, seguindo o design atômico, temos os átomos que compõem as moléculas. Inclusive, registramos no Storybook as cores que o design system usa.

No entanto, ainda não demos muita atenção à tipografia. Nessa parte, temos uma padronização para tamanhos, alturas de linhas, e peso das fontes que podemos utilizar em todo o design system, inclusive em outros componentes. Isso é um átomo, já que um botão, um modal ou uma notice são feitos por tipografias em tamanhos específicos e padronizados.

Pensando nisso, podemos criar um componente chamado typography, que irá encapsular toda a lógica referente às estilizações de fontes.

Criando uma nova biblioteca

Para começar, criaremos a biblioteca para esse componente. No VS Code, podemos interromper o servidor do Storybook. Feito isso, executaremos o seguinte comando:

nx g @nx/angular:library --name=libs/ui/typography --publishable=true --importPath=@alfabit-alura/typography --prefix=ab --projectNameAndRootFormat=as-provided

Primeiro, usamos o comando nx g @nx/angular:library para criar a biblioteca. Depois, especificamos o nome dela com o diretório em --name, colocando typography em libs/ui.

Por fim, utilizamos as configurações habituais, indicando que é publicável (--publishable=true) no caminho (--importPath) @alfabit-alura/typography, usando a sintaxe de escopo do npm.

Após a execução, a biblioteca será gerada. Finalizado esse processo, podemos abrir o explorador de arquivos à esquerda, onde teremos uma nova pasta chamada "typography" dentro de "libs > ui".

Gerando o arquivo de stories

Com o terminal aberto novamente, nosso próximo passo será gerar o arquivo de stories para a biblioteca criada. Para isso, executaremos o comando abaixo:

nx g @nx/angular:stories --name=typography --interactionTests=false

Agora, executamos o comando nx g @nx/angular:stories para o projeto typography, sem gerar os testes de interação (--interactionTests=false).

Após a execução, o terminal indica que o arquivo de stories foi criado em "typography". No explorador à esquerda, na pasta "libs > ui > typography > src > lib > typography", encontramos o arquivo typography.component.stories.ts.

typography.component.stories.ts:

import type { Meta, StoryObj } from '@storybook/angular';
import { TypographyComponent } from './typography.component';

const meta: Meta<TypographyComponent> = {
  component: TypographyComponent,
  title: 'TypographyComponent',
};
export default meta;
type Story = StoryObj<TypographyComponent>;

export const Primary: Story = {
  args: {},
};

Movendo o arquivo de stories

Para seguir a estrutura do monorepo, vamos mover o arquivo typography.component.stories.ts para "storybook-host > src > lib > Atoms".

Feito isso, precisaremos atualizar a importação de TypographyComponent no arquivo para from '@alfabit-alura/typography', conforme o padrão do monorepo.

import type { Meta, StoryObj } from '@storybook/angular';
import { TypographyComponent } from '@alfabit-alura/typography';

const meta: Meta<TypographyComponent> = {
  component: TypographyComponent,
  title: 'TypographyComponent',
};

export default meta;

type Story = StoryObj<TypographyComponent>;

export const Primary: Story = {
  args: {},
};

Executando o servidor do Storybook

Uma vez salvas as alterações no arquivo, vamos abrir o terminal novamente e executar o servidor do Storybook utilizando o seguinte comando:

nx storybook storybook-host

Após a execução, verificamos no navegador que o TypographyComponent aparece no Storybook. No entanto, ele não apareceu dentro da categoria "ATOMS".

O motivo é que o arquivo de stories foi gerado automaticamente com a propriedade title, que sobrescreve o comportamento padrão e aparece na estrutura definida no VS Code.

Removendo essa propriedade e ajustando a indentação, o typography será movido para a categoria de átomos, conforme esperado.

typography.component.stories.ts:

import type { Meta, StoryObj } from '@storybook/angular';
import { TypographyComponent } from './typography.component';

const meta: Meta<TypographyComponent> = {
  component: TypographyComponent,
};

export default meta;

type Story = StoryObj<TypographyComponent>;

export const Primary: Story = {
  args: {},
};

Conclusão

Na sequência, começaremos a desenvolver o código desse componente!

Componente Typography - Deixando o componente com conteúdo dinâmico por meio da função render

Já criamos a biblioteca typography, que está sendo exibida corretamente no Storybook. No entanto, o componente Angular sempre é criado com um simples parágrafo.

Neste vídeo, começaremos a desenvolver o código de acordo com o Figma.

Trabalhando com conteúdo dinâmico por meio da função render

No Figma, há uma seção de tipografia. A partir dela, focaremos na parte de "Desktop", que é a tipografia para tamanhos de telas de computadores. Teremos os tamanhos H1, H2, H3, Subtitle1 e Subtitle2, com cada nível diminuindo um pouco o tamanho da fonte e a altura da linha.

Além disso, há uma seção para textos ("Text") de outros propósitos, que não são necessariamente títulos. Existem textos dos seguintes tamanhos:

• L (Large - Grande);
• M (Medium - Médio);
• S (Small - Pequeno);
• E XS (Extra Small - Extra Pequeno).

Vamos implementar tudo isso aos poucos.

Refatorando o código de typography.component.html

Primeiramente, vamos transformar o HTML do componente em um simples H1. Para isso, precisamos localizar o arquivo typography.component.html com "Ctrl + P".

No arquivo, vamos substituir o parágrafo p pela tag h1 e salvar.

typography.component.html:

<h1>
  typography works!
</h1>

Ao salvar e voltar ao navegador, temos um título maior do que um parágrafo.

Além disso, queremos permitir que o componente typography receba conteúdo dinâmico. Em vez de "typography works!", podemos usar ng-content para torná-lo mais flexível, permitindo passar HTML, ícones, entre outros elementos.

<h1>
  <ng-content />
</h1>

Uma vez salvo o arquivo, quando retornamos ao navegador, o conteúdo desaparece, pois precisamos entender como tratar o ng-content no Storybook.

Utilizando a função render

De volta ao VS Code, vamos acessar o arquivo typography.component.stories.ts. O story Primary é exibido no Storybook e, por enquanto, tem apenas o args.

typography.component.stories.ts:

// código omitido

export const Primary: Story = {
  args: {},
};

Como não criamos um novo input, não conseguimos controlar a exibição do ng-content pelos args. Por isso, utilizaremos a função render.

Podemos utilizar a função render diretamente no Primary, mas vamos colocá-la no nível da constante meta, de modo a especificar a função para todos os stories do arquivo. Logo após o component de meta, vamos escrever render.

Feito isso, vamos declarar a propriedade render como uma arrow function que retorna um objeto. Nesse objeto, iremos declarar uma propriedade chamada template e usar uma template string.

Dentro da template string, colocaremos o seletor do typography, que é ab-typography. Após fechar a tag, podemos passar o conteúdo, como "Text".

// código omitido

const meta: Meta<TypographyComponent> = {
  component: TypographyComponent,
  render: () => ({
    template: `
      <ab-typography>
        Text
      </ab-typography>
    `,
  }),
};

// código omitido

Ao salvar o arquivo e retornar ao navegador, o texto aparece normalmente.

Conclusão

A função render nos dá um controle maior sobre como o componente será renderizado, especialmente em situações onde não temos apenas inputs, mas também um ng-content.

A seguir, vamos trabalhar nos inputs do componente!

Sobre o curso Angular e Storybook: crie componentes compostos em um Design System

O curso Angular e Storybook: crie componentes compostos em um Design System possui 159 minutos de vídeos, em um total de 64 atividades. Gostou? Conheça nossos outros cursos de Angular em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Componente Typography
• Componente dinâmico
• Control, parâmetros e args
• Componentes compostos e dependências
• Componente de Modal
• Acabamento e consumo do modal