Read on Twitter
On stack overflow, reddit, and twitter, I keep seeing devs commenting that they don't know where to start when they're researching how to build a component library.
I decided to make a short list that will hopefully make the in-depth research a bit easier.
#componentlibrary
I decided to make a short list that will hopefully make the in-depth research a bit easier.
#componentlibrary
1. Read atomic design by Brad Frost.
A hard part about talking about component libraries with different stakeholders is finding a shared language that everyone understands. You can skip a lot of that struggle if everyone starts from the same place. https://bradfrost.com/blog/post/atomic-web-design/
A hard part about talking about component libraries with different stakeholders is finding a shared language that everyone understands. You can skip a lot of that struggle if everyone starts from the same place. https://bradfrost.com/blog/post/atomic-web-design/
2. Decide if you're going to use a multi-repo or a monorepo
2a. If you use a monorepo, configure Lerna and yarn workspaces
2a. If you use a monorepo, configure Lerna and yarn workspaces
3. Decide how you'll version/publish your components
3a. Pick a registry provider. If public, use npm. If private, pick a private provider like JFrog.
Keywords: npm, lerna, conventional commits, semantic-release, JFrog
3a. Pick a registry provider. If public, use npm. If private, pick a private provider like JFrog.
Keywords: npm, lerna, conventional commits, semantic-release, JFrog
4. Decide if you're going to use TypeScript
4a. Configure TypeScript
Keywords: tsconfig.json, @types, .d.ts
4a. Configure TypeScript
Keywords: tsconfig.json, @types, .d.ts
5. Choose a bundler (might not be necessary if you're using TypeScript)
Keywords: Rollup, webpack
Keywords: Rollup, webpack
6. Pick a JavaScript testing library and configure it
Keywords: Jest, Enzyme, react-testing-library
Keywords: Jest, Enzyme, react-testing-library
7. Pick a CI/CD platform and configure it
Keywords: CircleCI, Jenkins
hint: this is the step where you'll want to run the commands you found to build, version, and publish your components
Keywords: CircleCI, Jenkins
hint: this is the step where you'll want to run the commands you found to build, version, and publish your components
8. Set up nice-to-haves like linting and prettier.
8. Build, version, and publish an arbitrary library (call it x). If you can do all of those steps, you've set up the bare-bones of the necessary infrastructure you need for a production-ready component library.
Let me know if I missed anything or if this is helpful! I came up with this in like 10 minutes so I might be missing a crucial step!
I definitely missed something huge and I'm very sorry about it.
Step 0: Research accessibility. If you don't know enough about it or aren't willing to invest in learning, build on top of an open-source library like @reakitjs.
Step 0: Research accessibility. If you don't know enough about it or aren't willing to invest in learning, build on top of an open-source library like @reakitjs.
Shoutout to @mattrothenberg for teaching me about this library. Your component library should help _all_ users use your products more easily.
One other note, I've heard great things about TSDX, which kind of makes these decisions for you. Also, a really valid approach if you don't want to deal with all of this... https://github.com/formium/tsdx
