Merge Component Manager – NPM
Merge Component Manager (MCM) is a graphical user interface (GUI) alternative to UXPin’s Git integration. MCM allows you to add components to a library in your UXPin account with an NPM package. The great thing about the MCM integration method is that it allows users without development experience to use Merge.
All from the comfort of a GUI, you can:
- Add/Modify a category
- Add/Modify a component
- Add/Modify props of a component
- Change JSDoc values for props. Supported JSDoc tags are:
- @uxpinpropname - changing prop name in the editor
- @uxpincontroltype - input form type in the editor
- @uxpinignoreprop - hide a prop in the editor
- @uxpindescription - description of a prop in the editor
STEP 1: Create a Library Using MCM
This can be done like adding any other library while in Editor mode or the Merge Tab in your UXPin dashboard. An example of a complete form for creating a Library using Ant Design is shown below.
Name Your Library
This is how it will be shown in the Libraries list in UXPin, not the name of the NPM package you want to import.
Component Library NPM Packages
Simply provide the NPM package name of the component library and the Version you wish to use. For example:
- @mui/material: Version 5.1.0
- antd: Latest
Additional Support Packages or Assets
If the component library requires additional packages or assets for Fonts, Icons, etc… Then for Packages, simple click the
add more dependency package and enter information exactly as shown above for the main NPM package name
For Assets, enter the URL or css file path in the existing Assets input field. We support both URL and file path for the Assets.
STEP 2: Adding a Component and Category
This step can be done in the MCM library you just created.
Specify the component you want to add in the import statement and optionally create a category or place it into an existing one.
Example import statement: import Button from 'antd'
The import statement is usually really easy to find and probably in the documentation of your chosen library. For example, this is the documentation for MUI’s Button component, where you can view the code and see the import statement is import Button from ‘@mui/material/Button;’.
Before being able to edit or add props to the component you just added, you need to publish the component first using the ‘Publish Library Changes’ button in the top right corner. This is explained in the next step.
STEP 3: Publish Newly Added Component
Now you have created your component and want to add props, before you do that you need to publish your new changes or component additions. This can be done by clicking the 'Publish Library Changes' button in the top right of page.
After clicking the publish button you’ll be shown the status of your published library. Once the status % of your library reaches 100 and shows ‘Update Success’ you will need to refresh your browser to see the changes. Now you’re ready to add props to your component.
STEP 4: Adding Props to the Component
To add a property to a component, select the component you want to add to and click the ‘Add new property’ button. For each property, add the necessary information for example from the MUI Button API you can see a list of its props, type and description. Simply add as many as you want. For example, the label for a Button component shown below.