Feature Request: Improve the development workflow

[roushou]

Describe the solution you'd like

Currently, the way to develop components is to use the documentation website #674 (comment) 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:

• Need to check manually
• Need to write JSX inside Markdown
  • No LSP so need to double check the API
  • Need to remember to update the documentation because there's no typechecking and build check
• No a11y checks
• No visual regression checks

It's cumbersome and we end up gluing things together i.e.

onchainkit/site/docs/pages/token/token-select-dropdown.mdx

Line 1 in d638dc9

{/* import { TokenSelectDropdown } from '../../../../src/token'; */}

A big part of this can be automated and I think that tools like Storybook #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.

Sub-issues:

• Feature Request: add Storybook #758
• Feature Request: Integrate with Chromatic #759
• Feature Request: Migrate to Vitest #760

[Zizzamia]

Alright, we got 2 out of 3. Let me research more on the Chromatic story.