@quintype/em

em - emphasis

Em is a style system / UI library for React.

It is focused on developer experience, productivity for building internal Quintype applications. You can focus on what you want to build instead of on how to build it.

The design token are exported as a CSS variables so you will need to import them into your root component to use them

import '@quintype/em/global.css'

The library exports Components and Icons.

You can import the required components from /components or /icons as

import TextField  from '@quintype/em/components/text-field';
import  Close  from '@quintype/em/icons/close';

Development

To run the documentation locally, run npm run docs:dev. This will start a local server on https://localhost:5000.

Testing

We use Jest and Enzyme for testing, you can run tests with npm test. It runs jest in watchmode, so you can write test cases and see them pass or fail.

CSS

For CSS, we are using CSS Modules and along with classnames package. Make sure you use the design tokens(CSS Variables in global.css) as much as possible when building components.

Adding a new component

• Create a new folder under src/components with the component name.
• Create a file for component, a file for test and a file for css and a mdx file for documentation.
• Make sure you annotate your Props interface with jsdoc explaing what the prop does, these annotations are used in documentation.
• You might get an error on import of css in the component, saying Missing types for CSS declarations. Run npm run gen-css-declarations to generate a CSS declaration file for the newly added file.
• Write unit tests.
• Create a mdx file and use Playground and Props to show the different versions of the component and the properties of the component.