Improve Design Token Story Files

Ouverte
  • Quelque chose ne va pas ?
#1,143 1 commentaire 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

Personne n'a encore pris cette issue.

Évaluation

Difficulté
3/5
Temps estimé
1-2 jours
Accessibilité débutants
65/100
Type d'issue
Refactorisation
Clarté
Plutôt claire
Activité
Active
Stack technique
javascript, react, storybook
Domaine
design, frontend, tooling

Piste de recherche

Commencez par comparer le code répété de génération des tableaux au début de src/tokens/*.stories.mdx, puis examinez le composant ColorPalette comme modèle possible d’extraction basé sur React. Le travail est considéré comme terminé lorsque le code dupliqué a été déplacé vers une implémentation partagée et que les fichiers Story des design tokens continuent à générer leurs tableaux ; la génération avec Style Dictionary est facultative et constitue un bonus.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

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

Langage dominant
SCSS
Étoiles
26
Forks
4
Merge moyen
16 h 7 min
PR mergées (30 j)
88

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de cloudfour/cloudfour.com-patterns

Toutes les issues de cloudfour/cloudfour.com-patterns

Issues similaires

Plus d'issues Design

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.