GPL-3.0 License
This is a sample repository that shows you my latest thinking in how to setup a component library including a documentation site
I have added a couple simple components just to hit some of the most common raised questions.
I chose emotion for our CSS-in-JS lib to make sure our styles are not leaking into the global scope.
I have kept the code to simple JavaScript instead of Typescript. I would recommend you use Typescript in production systems since a component library is all about public APIs and Typescript is a great tool to document those APIs easily.
SSRTheme
component and a DarkModeBtn
to make working with the theme easier. The tokens are being distributed via CSS custom properties aka CSS variables
.To make working with many different, individually versioned components easier this repository is a mono-repo powered by yarn workspaces.
This enables us to deal with dependency management and allows us to use a component as if it was installed via npm.
Working inside a mono-repo comes with a bunch of challenges including:
and many more.
That what we use manypgk for. This tool lints our mono-repo and even comes with a fixing command.
We use preconstruct to make working inside a mono-repo easier. It allows us to:
?> Note that this tool is not installed yet in this repo.
Lastly we use changesets to manage changelogs and publishing of versions. It gives us a workflow to make sure we track all changes, thank the contributors and publish our packages automatically.
The docs site has been built with NextJs and uses the README.md
files of each package folder for the documentation.
Those README.md
files are being parsed as mdx
and digested by next-mdx-remote
so we can use them in our Next site.