Rapid UI component scaffolding

[willhowat]

Is your enhancement related to a problem? Please describe.

One of the common repeatable tasks we face during theme development is the setup of UI components and the creation of supporting assets... partials, CSS, JS etc. Often this takes the form of copy/paste a previous similar example, strip it down and re-factor to our needs.

I believe it would be helpful to include a method to rapidly scaffold out these common assets in order to:

• Shave off the time this takes, whether from scratch or copy/paste/re-factor
• Avoid incremental deviations from intended patterns and copy/paste errors
• Provide a source of truth for intended patterns in the context of the longer term project lifecycle

In addition there is currently a drive to embrace the use of style guides as part of the engineering workflow. One common barrier to adoption seems to simply be time necessary to put these examples in-place, often seen as overhead. I believe we can extend an approach to rapid UI scaffolding to incorporate setup of the necessary style guide assets and examples.

On a recent project I've had success with this using PlopJS.
@brentvr and @joesnellpdx have expressed an interest in seeing how this could be integrated in the scaffold.
@rdimascio and @ian-pvd have also I believe been looking at similar approaches and expressed an interest.
To that end I've setup a PR (currently draft) #89 for review and further discussion.

This is not currently intended to include rapid scaffolding of blocks however, I would be keen to see how we could extend this perhaps as a subsequent issue.

Note: #79 could potentially benefit from the availability of this enhancement.

Designs

N/A

Describe alternatives you've considered

I have looked at alternatives to PlopJS however, I've not as yet found one that is as simple and easy to adopt at all experience levels.

One strong contender was Hygen however, Plop does provide a super useful menu to select a generator allowing for a single npm script and contextual menu, whereas Hygen relies on directly running individual generators.

Code of Conduct

• I agree to follow this project's Code of Conduct

[fabiankaegy]

@dinhtungdu I know you've also recently looked at code generation tools for your work on the cypress test utils library. Curious whether you have anything to share here also :)

[willhowat]

Thanks @fabiankaegy ...

@dinhtungdu I'd be really interested to hear your thoughts.