Improve Design Token Story Files

Aperta
  • Qualcosa non va?
#1,143 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
65/100
Tipo di issue
Refactoring
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
javascript, react, storybook
Ambito
design, frontend, tooling

Direzione di ricerca

Inizia confrontando il codice ripetuto per la generazione delle tabelle all’inizio di src/tokens/*.stories.mdx, quindi esamina il componente ColorPalette come possibile modello di estrazione basato su React. Il lavoro è completato quando il codice duplicato è stato spostato in un’implementazione condivisa e i file Story dei design token continuano a generare le relative tabelle; la generazione con Style Dictionary è facoltativa e vale come extra.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

: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.

Lingua principale
SCSS
Stelle
26
Fork
4
Merge medio
16h 7m
PR unite (30g)
88

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di cloudfour/cloudfour.com-patterns

Tutte le issue di cloudfour/cloudfour.com-patterns

Issue simili

Altre issue su Design

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.