Improve Design Token Story Files

Aberta
  • Algo errado?
#1,143 1 comentário 0 reações 0 responsáveis Ver no GitHub

Mantenedores costumam responder em até 1 dia

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
3/5
Tempo estimado
1-2 dias
Facilidade para iniciantes
65/100
Tipo de issue
Refatoração
Clareza
Razoavelmente clara
Status de atividade
Ativa
Stack de tecnologia
javascript, react, storybook
Domínio
design, frontend, tooling

Direção de pesquisa

Comece comparando o código repetido de geração de tabelas no início de src/tokens/*.stories.mdx e, em seguida, analise o componente ColorPalette como um possível padrão de extração baseado em React. Considera-se concluído quando o código duplicado tiver sido movido para uma implementação compartilhada e os arquivos Story dos design tokens continuarem gerando suas tabelas; a geração com Style Dictionary é opcional e vale como crédito extra.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

:construction_worker: dev 👷 environment

Previously, we were using Theo to dynamically generate the Story files for the design tokens. When we switched to Style Dictionary, these files became manually maintained. This wouldn't be bad necessarily, except that there's a lot of code duplication between these files for generating the tables.

Note there is one bit of code that I'd like to DRY up — at the top of most of the design token story files (see src/tokens/*.stories.mdx) there's a repeated bit of code to generate a table of properties. This should ideally be pulled out into a separate file. Unfortunately, when I did so, I got errors about JSX that I wasn't able to quickly resolve. I talked to @calebeby for help, and while we couldn't fix it in the time we had, he mentioned another possibility was converting it to a React component (like ColorPalette)

Minimum acceptance criteria for this ticket is to DRY that code up.

Extra credit would be using Style Dictionary to generate those Story files, as we were doing in Theo. That should be possible, but may be time consuming.

Linguagem predominante
SCSS
Estrelas
26
Forks
4
Merge médio
16h 7min
PRs com merge (30d)
88

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de cloudfour/cloudfour.com-patterns

Todas as issues de cloudfour/cloudfour.com-patterns

Issues semelhantes

Mais issues de Design

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.