Desenvolvimento genérico de componentes de interface do usuário

Em algum ponto do desenvolvimento de nosso aplicativo, uma decisão é tomada. Para criar uma biblioteca de componentes. Esta decisão é aceita por todos e o desenvolvimento começa.
Começamos com os requisitos fornecidos pelo produto/design e criamos o que achamos que naquele momento é o componente inteiro. Mas com o tempo os requisitos do componente crescem e, como resultado, a complexidade aumenta e a capacidade de manutenção diminui.
A maioria dos designers/produtos não conhece/se preocupa com o processo de desenvolvimento e vê cada elemento como uma instância única e, portanto, se sente à vontade para fazer requisitos malucos.

Usarei um componente Button para o exemplo em andamento. Eu uso Angular neste exemplo, mas esse padrão pode ser feito com todos os frameworks.

@Component({
  selector: 'demo-button',
  template: `
        <button (click)="onClick.emit($event)">
          {{text}}
        </button>
  `,
})
export class ButtonComponent {
  @Input() text: string
  @Output() onClick: EventEmitter<any> = new EventEmitter<any>();
}

@Component({
  selector: 'demo-button',
  template: `
        <button (click)="onClick.emit($event)">
          {{loading ? 'loading...' : text}}
        </button>
  `,
})
export class ButtonComponent {
  @Input() text: string
  @Output() onClick: EventEmitter<any> = new EventEmitter<any>();
  @Input() loading: boolean
}

@Component({
  selector: 'demo-button',
  template: `
   <button (click)="onClick.emit()">
     <ng-content></ng-content> <--- will put what ever i want inside
   </button>
  `,
})
export class ButtonComponent {
  @Output() onClick: EventEmitter<any> = new EventEmitter<any>();
}


// consumer component
// just text
<demo-button>
   {{loading ? 'loading' : text}}
</demo-button>
// example of passing on a different component
<demo-button>
    <demo-other-component></demo-other-component
</demo-button>

A próxima pergunta é… “por que precisamos de um componente compartilhado se passamos todo o trabalho duro?”
Boa pergunta, O componente compartilhado tem 2 agendas principais.
1. Forçar um design e comportamento sistemáticos
2. Ter um único trabalho que seja tratado internamente, que em algum momento atualizará o consumidor com informações.

O componente terá elementos wrapper que criarão um layout acordado. (veja o código abaixo) Independentemente do conteúdo, meu botão sempre terá preenchimento de 5px e fundo vermelho. qualquer conteúdo adicional será afetado por este design forçado pelo componente. Podemos definir diferentes tamanhos e layouts responsivos para manter nosso design aceito.

@Component({
  selector: 'demo-button',
  template: `
        <button (click)="onClick.emit($event)" style="padding: 5px; background: red">
            <ng-content></ng-content>
        </button>
  `,
})
export class ButtonComponent {
  @Output() onClick: EventEmitter<any> = new EventEmitter<any>();
}

Tudo o que nosso componente de botão precisa fazer é dizer ao consumidor que ele foi clicado (muito simples em nosso exemplo), nada mais é importante, nada mais importa. O que podemos fazer é passar para os auxiliares do componente de botão que modificam esse único trabalho (modificadores). Por exemplo: Desativado

@Component({
  selector: 'demo-button',
  template: `
        <button
         (click)="!disabled ?? oClick.emit() : void"
          style="padding: 5px; background: red"
         [ngClass]="size">
            <ng-content></ng-content>
        </button>
  `,
})
export class ButtonComponent {
  @Input() disabled: boolean; <--- helper
  @Input() size: ButtonSize = ButtonSize.Default <--- ButtonsSizes
  @Output() onClick: EventEmitter<any> = new EventEmitter<any>();
}

Os componentes são construídos para serem usados. Pregamos a reutilização, mas na realidade desenvolvemos para um caso de uso específico que, como resultado, não é reutilizável.
O botão é um exemplo simples, mas os componentes podem ser elementos complexos com partes móveis (ainda com um trabalho), mas as ideias permanecem as mesmas.
Gostaria de reiterar o segundo ponto anterior.

Um Componente Compartilhado deve ter um único trabalho que seja tratado internamente, que em algum momento atualizará o consumidor com informações.

Se entendermos o que é esse único trabalho, podemos separar os requisitos do trabalho e todo o resto.
Qualquer coisa que não esteja ligada a esse único trabalho, não deve ser de responsabilidade do componente (ou seja, o texto em nosso exemplo) e deve ser tratado um nível acima.
Só então podemos fazer componentes verdadeiramente reutilizáveis ​​que são fáceis de usar, ler e manter.