build: add Chakra CLI

[TylerAPfledderer]

Description

This PR adds back in the Chakra CLI to generate typing based on the custom theme configuration. This is helpful for IDE auto-completion to be able to recognize the correct tokens.

• Adds scripts to both run the command once, and to have a watcher to update changes on the go.
• Runs the postinstall script to generate the theme typing once yarn install has run
• Applied the concurrently command remotely to run next dev and yarn theme:watch at the same time.

Related Issue

N/A

[TylerAPfledderer]

A couple of thoughts...

[TylerAPfledderer]

This is very much a personal preference. concurrently is not added to the project as a dev dependency, but run remotely. The only requirement that would be prompted in the console is for the user to install it to their local machine. (This package is used in Chakra projects)

This command ensures that the dev environment and the Chakra CLI run in parallel without the user needing to remember an extra step.

Can certainly revert this if this is too much.

[TylerAPfledderer]

The strict-token-types and strict-component-types flags are used to constrain the typing, so that a combination of the string and {} primitives are not part of the type unions.

At the moment, this can aid in auto-completion. When talking with a member of the Chakra team, we recognized two issues (one kinda related):

• If we have a component that is taking is props that are typed with a shape from Chakra (i.e. StackProps) and you spread them into a component (i.e. Stack), you lose typing if you also directly add props to the component

<Stack
  color="blue.500" // Typing lost here
  {...props}
/>

• I would expect that with strict typing of the themes that TypeScript would throw an error if a typo or invalid token exists. This unfortunately does not seem to be the case.

[TylerAPfledderer]

Otherwise an error throws with es5:
Transforming object literal extensions to the configured target environment ("es5") is not supported yet