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.
Run npm start
- Add your component in
client/@preply/ui/src - Create a
{COMPONENTNAME}.stories.tsxto make it visible in storybook - Make it exportable in
client/@preply/ui/src/index.js
- To add your custom icon (one colored), add it to
client/@preply/ui/src/SvgIconsMake sure your svg icon doesn't havefillor any color attribute and it is possible to set it color via css e.g.fill: red - Make it exportable in
client/@preply/ui/src/SvgIcons/index.js - You can access this icon in your project via importing
Iconfrom UI and use itIcon.SomeIconName
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.