opencare-crown v1.0.4
Opencare Crown
Base
This library outputs all of antd v4.6.6. You can read their documentation to learn more about their components. Additionally, this library outputs all antd icons, plus the compatible package to make migrating from antd v3 easier.
All antd components can be imported from this library under the base opencare-crown
like so:
import { Button, StarOutlined, Icon } from 'opencare-crown';
Styleguide
This library outputs our brand styleguide. Currently it includes our Digital Colors which can be imported like so:
import { colors } from 'opencare-crown/lib/styleguide';
Custom Components
Last but not least, this library supports the addition of custom components as we continue to grow our component library. Custom components can be imported into your app like so:
import { ComponentName } from 'opencare-crown/lib/custom';
Migrating your app to use this library
- This library requires your app be using the following versions of prop-types, react, and react-dom:
"prop-types": "^15.7.2",
"react": "^16.13.1",
"react-dom": "^16.13.1"
- Furthermore, this app has
antd@4.6.6
as a dependency, so you'll need to remove antd completely from your app. Unfortunately it is not possible to maintain two versions of antd within your app. Thankfully, this library exports everything from antd, including the@ant-design/compatible
package to make migration easier. Simply search for all instances of'antd'
in your app, and replace with'opencare-crown'
(Replace all imports basically). - If your package also uses
@ant-design/icons
or@ant-design/compatible
you will need to remove those (and replace with this library). - Make sure you remove all instances of
antd.less
as it will no longer be needed. - Validating styling is what will take the most time in this migration (as it will need to be done manually). This library updated the hex values for various things like the
primary-color
, so you'll need to go through each page/flow and catch anything that might have broken. Also many of our apps layer custom styles on top of antd components - you will need to validate that these still work correctly.