Our great sponsors
-
-
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
storybook
Storybook is a frontend workshop for building UI components and pages in isolation. Made for UI development, testing, and documentation.
-
-
-
-
-
InfluxDB
Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
-
There will be more about this shortly, but we do not build our components from scratch. Rather, we customize existing open source components and map our APIs to theirs. This abstracts the implementation details of the component from our development teams. For example, we use react-datepicker as the basis for our own DatePicker, but if we decide to swap it out for a different one, our consumers will be none the wiser.
First is eslint-plugin-jsx-a11y. We use this eslint plugin to automate verification of the accessibility of our component library. It checks the JSX of our components for obvious violations. This is as far as we can go with automation, but we complement eslint-plugin-jsx-a11y with manual auditing in Storybook I will discuss shortly.
Finally, while Storybook has been invaluable for us and I recommend it strongly, I would be remiss if I didn't mention some gotchas. Storybook uses a lot of the same libraries we all use for theming, Markdown, and other things. When there are library conflicts between your version and theirs, bad things happen. For example, we got hit with the same conflict on Emotion as this issue on GitHub. To its credit, the Storybook team releases frequently. If nothing else, make sure you use identical versions of Storybook and all its addons and that you upgrade as soon as possible when updates are available.
We run our builds with Vite. That may seem counterintuitive since Vite is the build tool for Vue while our library is built with React, but Vite is actually agnostic. In fact, it amazed me how little configuration we needed. It basically just worked. Our Vite config is almost identical to the example in the documentation. Just like the example, our build produces two bundle formats--es and umd--and it works fast.
We run our builds with Vite. That may seem counterintuitive since Vite is the build tool for Vue while our library is built with React, but Vite is actually agnostic. In fact, it amazed me how little configuration we needed. It basically just worked. Our Vite config is almost identical to the example in the documentation. Just like the example, our build produces two bundle formats--es and umd--and it works fast.
Our production build, versioned with Semantic Versioning, includes declaration files for each component and an index.d.ts file enumerating all components. These improve DX by enabling developers' IDEs to perform fast code completion. We also provide the theme file we use for our own components so that developers can apply the same theme to theirs. Our CI/CD pipeline publishes the library to a private NPM registry, which allows appropriately configured npm installations on developer machines to fetch the library with a conventional npm install. The package.json file accompanying the library contains all the peer dependencies they will need to use the library so npm can grab them, and for convenience it also contains the version of the design system it is built with for developers to track.
The last kind of component is a little complicated--form components. Our developers use React Hook Form, and like every other form library I've used, it uses refs to maintain form state. This means our components need to provide a way to accept a ref and delegate it to their children.
Meanwhile, transpiling your TypeScript source code to JavaScript is faster than type checking, but so is reading Tolstoy. Transpiling with tsc or Babel is still not fast. However, the transpiler esbuild is written in Go, a language built for speed, and Vite uses it under the hood. Because we are transpiling constantly to see what's happening in Storybook, it's crucial that the process be fast. Thanks to esbuild, Vite does exactly what we need.
I mentioned earlier that our components are built on open source components, and most of them are built on Chakra UI. There are many other open source component libraries out there, but Chakra UI is my favorite by far. The primary reasons are its first-class commitment to accessibility and the intuitive APIs of its components built with TypeScript. As you can probably infer, Chakra UI is an inspiration to me when building our own component library on top of it.