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:
  1. @uxpinpropname - changing prop name in the editor 
  2. @uxpincontroltype - input form type in the editor
  3. @uxpinignoreprop - hide a prop in the editor
  4. @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.

Editor 'Add library' NPM integration modal

Merge tab 'Add library' NPM integration modal

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.

NPM library name

NPM library name

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
NPM package name and version

NPM package name and version

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

NPM package dependency

NPM package dependency

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.

file & url path assets

file & url path assets

STEP 2: Adding a Component and Category

This step can be done in the MCM library you just created.

Adding new button component

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;’.

Note

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.

The 'Publish Library Changes' button is in the top right of page

The 'Publish Library Changes' button is in the top right of page

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.

Component properties preview

Component properties preview