Preply React UI library

Usage

You can normally import needed components to your app like import { Button } from '@preply/ui'

But ideally (and required if u want to use MUI based components like Avatar) you should firstly wrap your react app with Provider (exported from @preply/ui), which consist of:

• reset css
• some global styles and font
• Theme provider for MUI components (see required note below)

If u use MUI-based components (like Avatar) - make sure u have next line on the top of your element): <noscript id="jss-insertion-point"></noscript> - it will escape u the need of having redundant &&& in styles of styled-components when adjusting those components. And don't worry, MUI's styles are scoped with hashes - similar like SC does.

Contributing

Run dev env (Storybook)

Run npm start

Components

1. Add your component in client/@preply/ui/src
2. Create a {COMPONENTNAME}.stories.tsx to make it visible in storybook
3. Make it exportable in client/@preply/ui/src/index.js

Icons

1. To add your custom icon (one colored), add it to client/@preply/ui/src/SvgIcons Make sure your svg icon doesn't have fill or any color attribute and it is possible to set it color via css e.g. fill: red
2. Make it exportable in client/@preply/ui/src/SvgIcons/index.js
3. You can access this icon in your project via importing Icon from UI and use it Icon.SomeIconName

Publishing

We have CD flow on Jenkins for our npm libs So whenever you need to publish lib: 1) Increment version in @preply/ui/package.json guide what version numbers mean 2) 2.1) client-<service_name>-<version> for example: client-ui-1.2.3 or client-chat-1.2.3 or client-video-1.2.3 for LATEST tag 2.2) client-<service_name>-<version>-beta for example: client-ui-1.2.3-beta for BETA tag 3) schedule tag build in jenkins: https://jenkins.preply.com/job/apollo/view/tags/ Please publish LATEST tag from master only, or at least merge PR in master just after you published tag, to avoid situation that LATEST tag code not presented in master

Find the most recent (time-wise, not semver-wise) storybook here: storybook.preply.org.