docs(examples): Updated Chakra UI examples #36333
Conversation
nikolovlazar
requested review from
timneutkens,
ijjk,
shuding,
leerob,
steven-tey and
balazsorban44
as code owners
There was a problem hiding this comment.
Thanks! I added a few comments.
I wonder if we should remove with-chakra-ui-typescript (only leave the README with a link) and rewrite with-chakra-ui in TypeScript, so it's less to maintain.
We recommend TS for examples, as it helps eliminate a class of bugs, while also providing better DX, even for newcomers.
|
@balazsorban44 sounds good! We can remove one of the examples. Question though, since we're going to leave the typescript one with just a README, how can we prevent users from using it through the CLI, or provide some kind of a fallback mechanism? Also, what do you think we should write in the README file? |
|
See an example here: https://github.com/vercel/next.js/tree/canary/examples/custom-server For the CLI, I don't think we do anything special. |
|
@balazsorban44 done! Ready to be reviewed again. |
examples/with-chakra-ui/README.md
Outdated
| npx create-next-app --example with-chakra-ui with-chakra-ui-app | ||
| npx create-next-app --example with-chakra-ui-typescript with-chakra-ui-typescript-app | ||
| # or | ||
| yarn create next-app --example with-chakra-ui with-chakra-ui-app | ||
| yarn create next-app --example with-chakra-ui-typescript with-chakra-ui-typescript-app | ||
| # or | ||
| pnpm create next-app -- --example with-chakra-ui with-chakra-ui-app | ||
| pnpm create next-app -- --example with-chakra-ui-typescript with-chakra-ui-typescript-app |
There was a problem hiding this comment.
I don't think this is necessary, at the least --example with-chakra-ui-typescript would fail as the other example was deprecated. It should be the same as the folder name, i.e: --example with-chakra-ui
There was a problem hiding this comment.
@balazsorban44 right! I've pushed the changes.
Overview
This PR updates both Chakra UI examples by updating the Chakra UI packages to the latest versions, and added better examples for Semantic Tokens (new feature in Chakra UI), and pseudo props.
Documentation / Examples
yarn lint