The general structure that I'd recommend for Paperclip content is:
Writing previews may seem a bit redundant since they'll reflect your React components - there's some duplicate code, but they are import to define for a few reasons:
- Previews double up as visual regression tests if you're using the Percy integration.
- Previews act as documentation for seeing every visual state of a component.
- Previews allow you to design your app without needing to spin up a development server.
To keep your previews more DRY, you can combine them into one master preview component. For example:
This way, you keep all of your visual states in one spot which makes it easier to maintain, and preview different states of your app for visual development and visual regression coverage.
Be sure not to include preview components into your React code - previews are just used for development and testing purposes.
My recommendation is to keep
PC files alonside the React components that are using them. For example:
Another good pattern is to have a master
components.pc file that contains all of your design system elements. For example:
This is our current WIP design system at Capital
The benefit of having this is that you can see everything in one spot. Here's what your folder structure might look like:
Then, in each of your components, just include what's needed from