cloudfour / cloudfour/cloudfour.com-patterns

Improve Design Token Story Files

未关闭
#1,143 1 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
:construction_worker: dev 👷 environment
主要语言
SCSS
星标
26
派生
3
平均合并
19 小时 32 分钟
30 天内合并 PR
81

描述

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)

贡献指南

打开贡献指南

调研方向

首先比较 src/tokens/*.stories.mdx 顶部重复的表格生成代码,然后研究 ColorPalette 组件,将其作为一种可能的基于 React 的提取模式。完成的标准是:将重复代码移入共享实现,并且 design token Story 文件继续生成各自的表格;使用 Style Dictionary 生成是可选的加分项。

由索引模型根据 Issue 内容生成。

评估

技术栈
javascript, react, storybook
领域
design, frontend, tooling
Issue 类型
重构
难度
3/5
预计耗时
1-2 天
活跃度
活跃
描述清晰度
基本清楚
新手友好度
65/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。