cloudfour / cloudfour/cloudfour.com-patterns

Improve Design Token Story Files

Open
#1,143 1 comment 0 reactions 0 assignees View on GitHub
:construction_worker: dev 👷 environment
Dominant language
SCSS
Stars
26
Forks
3
Avg merge
19h 32m
Merged PRs (30d)
81

Description

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.

- [Old Theo Story Template](https://github.com/cloudfour/cloudfour.com-patterns/blob/2e00bb2893e22df5e105b1c7da58eb221bdfdea1/.theo/formats/stories.mdx.js)
- [Style Dictionary: Using a template to create a format](https://amzn.github.io/style-dictionary/#/formats?id=using-a-template-templating-engine-to-create-a-format)
- [Style Dictionary example of custom formats using templates](https://github.com/amzn/style-dictionary/tree/master/examples/advanced/custom-formats-with-templates)

Contributor guide

Open the contributing guide

Research direction

Start by comparing the repeated table-generation code at the top of src/tokens/*.stories.mdx, then review the ColorPalette component as a possible React-based extraction pattern. Done means the duplicated code is moved into a shared implementation and the design token Story files continue to generate their tables; Style Dictionary generation is optional extra credit.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react, storybook
Domain
design, frontend, tooling
Issue type
Refactor
Difficulty
3/5
Estimated time
1-2 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
65/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.