Config File

Merge config file is the main config file for UXPin Merge. The purpose of the file is to direct Merge to directories of those components that will be imported to UXPin and to collect the basic information about the library.
You can also store there the path to your Webpack and Wrapper (optionally) configuration.

Naming and Directory

UXPin Merge config file has to be a Javascript file named uxpin.config.js and stored at the root directory of your project.

Example:

./uxpin.config.js

Structure and Default Config

The uxpin.config.js file has to consist of a module.exports declaration that exports a Javascript object with the following structure:

module.exports = {
    components: {
        categories: [
            {
                name: "First Category",
                include: [
                    "src/components/FirstComponent/FirstComponent.js",
                    "src/components/SecondComponent/SecondComponent.js"
                ]
            }
        ],
        wrapper: 'src/Wrapper/UXPinWrapper.js',
        webpackConfig: 'webpack.config.js',
    },
    name: "Name of your Library"
}

The name of the library will show up in the UXPin Editor once you're going to upload your components library to UXPin.

The name of the categories for imported components will appear in the list of components in the UXPin Editor. If you're planning to import multiple components, create multiple categories to make navigation in UXPin easier.

If you won't define uxpin.config.js or the config file will not be placed in the root directory, Merge will load the default config. The default config looks like this:

module.exports = {
    components: {
        categories: [
            {
                name: 'Uncategorized',
                include: [
                'src/components/*/*.{js,jsx,ts,tsx}',
                'src/*/*.{js,jsx,ts,tsx}',
              ],
            },
        ],
        wrapper: 'src/Wrapper/UXPinWrapper.js',
        webpackConfig: 'webpack.config.js',
    },
    name: 'Library from Code',
}

Basic Config Example

The typical config consists of arrays of multiple categories and paths to components. Here's an example from the UXPin Merge integration with IBM Carbon.

module.exports = {
  components: {
    categories: [
      {
        name: "General",
        include: [
          "src/Icon/Icon.js",
          "src/Button/Button.js",
          "src/Link/Link.js",
          "src/FileUploader/FileUploader.js",
          "src/CopyButton/CopyButton.js",
        ]
      },
      {
        name: "Navigation",
        include: [
          "src/Breadcrumb/Breadcrumb.js",
          "src/BreadcrumbItem/BreadcrumbItem.js",
          "src/Tab/Tab.js",
          "src/Tabs/Tabs.js",
          "src/TabContent/TabContent.js",
          "src/ContentSwitcher/ContentSwitcher.js",
          "src/Switch/Switch.js",
          "src/Search/Search.js",
          "src/SearchFilterButton/SearchFilterButton.js",
          "src/SearchLayoutButton/SearchLayoutButton.js",
        ]
      },
      {
        name: "Toolbar",
        include: [
          "src/Toolbar/Toolbar.js",
          "src/ToolbarItem/ToolbarItem.js",
          "src/ToolbarTitle/ToolbarTitle.js",
          "src/ToolbarOption/ToolbarOption.js",
          "src/ToolbarDivider/ToolbarDivider.js",
          "src/OverflowMenu/OverflowMenu.js",
          "src/OverflowMenuItem/OverflowMenuItem.js",
        ]
      },
      {
        name: "Form",
        include: [
          "src/TextInput/TextInput.js",
          "src/TextArea/TextArea.js",
          "src/NumberInput/NumberInput.js",
          "src/Checkbox/Checkbox.js",
          "src/RadioButton/RadioButton.js",
          "src/RadioButtonGroup/RadioButtonGroup.js",
          "src/Toggle/Toggle.js",
          "src/ToggleSmall/ToggleSmall.js",
          "src/ListItem/ListItem.js",
          "src/SelectItem/SelectItem.js",
          "src/SelectItemGroup/SelectItemGroup.js",
          "src/RadioTile/RadioTile.js",
          "src/TileGroup/TileGroup.js",
          "src/Slider/Slider.js",
          "src/TimePicker/TimePicker.js",
          "src/TimePickerSelect/TimePickerSelect.js"
        ]
      },
      {
        name: "Selects and Dropdowns",
        include: [
          "src/ComboBox/ComboBox.js",
          "src/Dropdown/Dropdown.js",
          "src/DropdownItem/DropdownItem.js",
          "src/Select/Select.js",
          "src/MultiSelect/MultiSelect.js",
 
        ]
      },
      {
        name: "Content",
        include: [
          "src/Accordion/Accordion.js",
          "src/AccordionItem/AccordionItem.js",
          "src/Notification/Notification.js",
          "src/OrderedList/OrderedList.js",
          "src/UnorderedList/UnorderedList.js",
          "src/CodeSnippet/CodeSnippet.js",
          "src/Pagination/Pagination.js",
          "src/ProgressIndicator/ProgressIndicator.js",
          "src/ProgressStep/ProgressStep.js",
          "src/InlineLoading/InlineLoading.js",
          "src/Tooltip/Tooltip.js",
          "src/Tag/Tag.js",
        ]
      },
      {
        name: "Table",
        include: [
          "src/Table/Table.js",
          "src/TableRow/TableRow.js",
          "src/TableHead/TableHead.js",
          "src/TableHeader/TableHeader.js",
          "src/TableBody/TableBody.js",
          "src/TableData/TableData.js",
        ]
      },
      {
        name: "Header",
        include: [
          "src/Header/Header/Header.js",
          "src/Header/HeaderGlobalAction/HeaderGlobalAction.js",
          "src/Header/HeaderGlobalBar/HeaderGlobalBar.js",
          "src/Header/HeaderMenu/HeaderMenu.js",
          "src/Header/HeaderMenuButton/HeaderMenuButton.js",
          "src/Header/HeaderMenuItem/HeaderMenuItem.js",
          "src/Header/HeaderName/HeaderName.js",
          "src/Header/HeaderNavigation/HeaderNavigation.js",
        ]
      }
    ],
    wrapper: 'src/Wrapper/UXPinWrapper.js',
    webpackConfig: 'webpack.config.js',
  },
  name: "IBM Carbon"
};

In situations where in a given category you want to import only one component, you can assign the string directly to the include key. Example:

..
{
    name: "Category",
    include: 'src/components/YourComponent/YourComponent.js'
}
..

Advanced Config Example (Glob Patterns)

UXPin Merge Config can also accept glob patterns. Here's an example of a config using glob patterns:

module.exports = {
  components: {
    categories: [
      {
        name: 'General',
        include: [
          'src/library/Avatar/Avatar.js',
          'src/library/Button/Button.js',
          'src/library/ButtonGroup/ButtonGroup.js',
          'src/library/Checkbox/!(__tests__)/*.js',
          'src/library/Dropdown/Dropdown.js',
          'src/library/Form/!(__tests__)/*.js',
          'src/library/Link/Link.js',
          'src/library/Menu/!(__tests__)/*.js',
          'src/library/Popover/Popover.js',
          'src/library/Radio/!(__tests__)/*.js',
          'src/library/Pagination/Pagination.js',
          'src/library/Select/Select.js',
          'src/library/Text/Text.js',
          'src/library/Table/Table.js',
          'src/library/Tabs/Tabs/Tabs.js',
          'src/library/Tabs/Tab/Tab.js',
          'src/library/TextArea/TextArea.js',
          'src/library/TextInput/TextInput.js',
          'src/library/Tooltip/Tooltip.js'
        ]
      },
      {
        name: 'Card',
        include: 'src/library/Card/!(__tests__)/*.js'
      },
      {
        name: 'Icons',
        include: 'src/library/Icon/!(index).js'
      },
      {
        name: 'Layout',
        include: [
          'src/library/Box/Box.js',
          'src/library/Flex/!(__tests__)/*.js',
          'src/library/Grid/!(__tests__)/*.js',
          'src/library/StartEnd/StartEnd.js'
        ]
      }
    ],
    wrapper: 'src/Wrapper/UXPinWrapper.js',
    webpackConfig: 'webpack.config.js',
  }
};