Feature Request: Interactive Scaffolding

[dbanksdesign]

Customer Problem

Getting set up on Style Dictionary takes time and is not always very straightforward. To lower the barrier of entry we can make an interactive scaffolding CLI that sets up a Style Dictionary package suited to the needs of the user (at least getting them started). Just like when you run npm init it asks you questions about your project, we could do the same.

Some ideas for configuration

• Platforms to target/types of output
• Structure of design tokens/design token files
• Themes?
• Starting point (bootstrap, foundation, material, scratch, import from css, etc.)

[vvscode]

@dbanksdesign could you provide examples for mentioned options? I mean I'm ready to take tool development, but who will provide structures ?

[bolora]

Perhaps this kind CLI interaction?

> style-dictionary create acme-corp > Where would you like to begin?

• Start from scratch
• From existing css
• Bootstrap
• Foundation
• Semantic UI
• Material

[bolora]

@vvscode For example, in Bootstrap it is a matter of expressing a SD json file structure that delivers this file: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss

Foundation is not so straight forward.

[chazzmoney]

I think that it makes sense to ask the user if they are starting from scratch or an existing project first. If they are starting from scratch there is a semi-straightforward method (as per @bolora).

If they are starting from an existing project, we probably need them to point us to platform output one by one. The first time we probably have to understand the structure they want to use for the SD, but after that each platform is similar: detect platform output type, add platform info to SD config, find existing styles in platform output and replace with SD variables, import styles into SD. May also need a tool to help dedupe styles (or near styles, like similar colors or sizes)).

There is a lot to parse here for sure, and the existing project being the more complicated but also probably more useful.

[dbanksdesign]

Found this js library we could potentially use for the CLI interaction: https://github.com/enquirer/enquirer

[chazzmoney]

I feel like this addresses a superset of the specific import functionality mentioned in #25, #26, #27, #28. Wanted to make sure we connected the issues.

[chazzmoney]

structures

@vvscode Do you mean like what is the CLI prompt tree?

[vvscode]

@chazzmoney I mean examples of results, which should be generated after asking all the questions from cli

[didoo]

@dbanksdesign I strongly suggest https://github.com/SBoudrias/Inquirer.js to build a CLI prompt: I have used it for a long time and is perfect.

[chazzmoney]

@vvscode Ahhhh, got it! Thanks. :-)

Not sure we are there yet... Maybe for the starting from scratch?

[davixyz]

If we haven't got into this; We could also look into: https://plopjs.com/

Basically adds inquirer but also copies files and makes projects based on a template. It might be a nice tool to create starter projects from the Style Dictionary CLI