ConvertKit Design

Welcome to ConvertKit's component library and documentation!

This repository holds components, tokens, and more engineering documentation.

Starting up the server

To start up the documentation server, run:

yarn start

You may also run yarn start:docs if you are used to that from previous flow. They do the same thing.

Releasing

To release a new version, bump the version in the package.json, and merge to main. If the version is bumped, the package will automatically release.

Working with components

To add a new component, navigate to src/components, add a folder for your component, and add a Readme.md. This Readme serves as the documentation of each component.

Usually, the default export from the component can be accessed in the README.md without any need to import. But all other exports will have to be imported to be used in the README.

All other source files can be placed in the src, adjacent to the components directory.

Writing component Readme - Conventions required by styleguidist

• React is available at the global scope so you don't need to import it but its other imports like useState aren't. It's easier to call React.useState.
• The code snippets in your Readme must end in semi-colon for the lines below them to be evaluated
• You can pass these options to code snippets: noeditor (shows demo without code), static (shows code without executing and showing demo) e.g:

Note the examples below use 2 backtics to prevent confusing markdown here but it should be 3 backtics

``jsx static
const myString = "Hello";
``

``jsx noeditor
<Button />
``

Read up on more ways to document with styleguidist

Adding documentation

For documentation that is not a component, we use something like a routes configuration within styleguidist which powers the documentation. You would have to go create in styleguide.config.js, then go to the docs/ directory and add/modify your documentation as needed.