coinbase / onchainkit

React components and TypeScript utilities to help you build top-tier onchain apps.
https://onchainkit.xyz
MIT License
424 stars 78 forks source link

Feature Request: Improve the development workflow #745

Open roushou opened 6 days ago

roushou commented 6 days ago

Describe the solution you'd like

Currently, the way to develop components is to use the documentation website https://github.com/coinbase/onchainkit/pull/674#issuecomment-2182289321 by writing JSX inside markdown files. That's convenient when the library is small but it quickly becomes difficult as things grow.

Some hard limitations:

It's cumbersome and we end up gluing things together i.e. https://github.com/coinbase/onchainkit/blob/d638dc91c95e7169de7888b9aaae2c5cb545c721/site/docs/pages/token/token-select-dropdown.mdx?plain=1#L1

A big part of this can be automated and I think that tools like Storybook https://github.com/coinbase/onchainkit/pull/674 should be considered. Tests are written in the same language so we can benefit from our LSP and typechecking. And beyond developing in isolation, it makes communication with non-tech people easier and there's a whole a11y toolkit available to catch directly in CI.

Storybook can also be coupled with tools Chromatic for visual testing which can also be integrated in CI.

It would be great to also use tools like Playwright or Cypress for cross browsers testing and to test complex scenarios. It may be a bit too much for the current state but it would be very close to what end-users would have.

Also, my machine goes OOM when running tests with Jest. I'm taking that as a personal attack so I suggest to move to Vitest which is Jest but better.

Describe alternatives you've considered.

No response