coinbase / coinbase/onchainkit
Feature Request: Improve the development workflow
- Dominant language
- TypeScript
- Stars
- 1k
- Forks
- 520
- Avg merge
- 32m
- Merged PRs (30d)
- 2
Description
### 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:
- 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. 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](https://www.chromatic.com/) 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](https://vitest.dev/) which is Jest but better.
Sub-issues:
- [x] https://github.com/coinbase/onchainkit/issues/758
- [ ] https://github.com/coinbase/onchainkit/issues/759
- [x] https://github.com/coinbase/onchainkit/issues/760
Contributor guide
No contributing guide indexed for this repository
Research direction
Start with the existing MDX example at site/docs/pages/token/token-select-dropdown.mdx and review sub-issues 758, 759, and 760. Compare the proposed Storybook, Vitest, accessibility, visual regression, and browser-testing workflow, then clarify the scope and acceptance criteria for a maintainable development setup.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- cypress, playwright, react, storybook, typescript
- Domain
- developer-experience, testing, tooling
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100