feat(RedwoodUI) Add setup command for RedwoodUI

[arimendelow]

Overview

Demo GIF

This demo reflects the following conditions:

• Generated a RedwoodJS test project
• Ran Storybook setup command
• Tarsynced to this branch

What is this?

This setup command adds RedwoodUI to your project. At a high level, this means:

• Modifying your TailwindCSS config (and setting up TailwindCSS if it isn't already).
• Modifying your Storybook config (if you're using it).
• Adding selected components to your project.

Additionally, the CLI will attempt to only install required packages, and to not downgrade any packages you've already got installed.

Also, this CLI is designed to work with various states of projects — while components and their stories are simply copied directly into your project, all config changes are designed to work alongside various states of existing configuration.

All information required for setting up RedwoodUI is pulled directly from the RedwoodUI repo via the GitHub REST API.

Testing Steps

1. Pull down this branch.
2. Generate a (TS) test project if you don't have a project handy (yarn run build:test-project ../test-redwood-ui).
3. In your project, run tarsync to get this CLI available for your use (yarn rwfw project:tarsync).
4. Run the setup command added in this PR — yarn rw setup ui redwoodui.
   4a. The best way to play around with components is in Storybook. We suggest setting that up before installing components, but it's optional — to do that, run yarn rw storybook.
   4b. Currently, this command makes many individual requests to the GitHub API, which means if you don't already have a GitHub token in your local environment, you'll likely hit the unauthenticated limit of 60 requests per hour. I'm exploring temporarily downloading the entire RWUI repo so that we only need to make one request, but for now, the best way around this is to just authenticate with a Personal Access Token (PAT) with the public_repo property — create a PAT and store it under the environment variable GH_TOKEN. You can find instructions on how to do that here.
5. Follow the prompts. Note that a few components are reliant on others — we don't yet auto-install any components based on this, but it's in the works :)
   5a. To view available components before you install them, check out the RedwoodUI Storybook.

Any issues specific to components should be opened on the RedwoodUI repo. This is just the setup command.

Some notes

• If you create a sample project, and when you run tarsync, you'll end up with 19.x RC versions of React dependencies, both in your root package.json's resolutions and in your web/package.json's dependencies. This breaks Storybook, even with the react-dom-shim, which seems to only support React 17 and 18. Please therefore switch all versions of React dependencies to be the latest used by Redwood stable, which as of this writing is 18.3.1.

Known Issues

• On a reinstall of RWUI, if you've previously installed any form components, if you attempt to add any again, when it tries to write the shared form dependencies, it's supposed to confirm that you want to overwrite them. Currently, there's something wrong with the prompting, so it'll just show an error. The workaround is that if you want to overwrite them, just delete them.

TODO

• Figure out best way to version RedwoodUI such that we can ship updates in sync with RedwoodJS releases (aka, tying the fetch from GitHub to a specific branch, etc.)
• There are some inline TODOs that are worth checking out
• JS project support
• Testing
• Of course, there are many TODOs on the component library side, but this is just the setup command :)

[Tobbe]

When you're getting ready to start writing tests for all of this, I think this will be useful to you: packages/cli/src/__tests__/Listr2Mock.ts