Improve Design Token Story Files

Abierto
  • ¿Algo no está bien?
#1,143 1 comentario 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
65/100
Tipo de issue
Refactorización
Claridad
Bastante claro
Estado de actividad
Activo
Stack tecnológico
javascript, react, storybook
Área
design, frontend, tooling

Línea de trabajo

Comienza comparando el código repetido de generación de tablas al principio de src/tokens/*.stories.mdx y, después, revisa el componente ColorPalette como posible patrón de extracción basado en React. Se considera terminado cuando el código duplicado se haya trasladado a una implementación compartida y los archivos Story de los tokens de diseño sigan generando sus tablas; la generación con Style Dictionary es opcional y aporta un extra.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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

Lenguaje dominante
SCSS
Estrellas
26
Forks
4
Merge medio
16 h 7 min
PR fusionados (30 d)
88

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de cloudfour/cloudfour.com-patterns

Todos los issues de cloudfour/cloudfour.com-patterns

Issues similares

Más issues de Design

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.