{"data":{"prismicDocsCategory":{"data":{"pages":[{"page":{"uid":"what-is-uxpin-merge","document":[{"data":{"title":{"text":"What is UXPin Merge?"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"using-react.js-components","document":[{"data":{"title":{"text":"Using React.js Components"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"creating-a-library","document":[{"data":{"title":{"text":"Creating a Library"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"ai-assisted-merge-integration","document":[{"data":{"title":{"text":"AI-Assisted Merge Integration"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"start-with-a-boilerplate-repo","document":[{"data":{"title":{"text":"Start with a Boilerplate Repo"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"integrating-your-own-components","document":[{"data":{"title":{"text":"Integrating Your Own Components"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"config-file","document":[{"data":{"title":{"text":"Config File"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"webpack-configuration","document":[{"data":{"title":{"text":"Webpack Configuration"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"wrapper-component","document":[{"data":{"title":{"text":"Wrapper Component"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"adjusting-components","document":[{"data":{"title":{"text":"Adjusting Components"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"configuring-the-properties-panel","document":[{"data":{"title":{"text":"Configuring the Properties Panel"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"authoring-and-managing-jsx-presets","document":[{"data":{"title":{"text":"Authoring and Managing JSX Presets"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"cli-tool","document":[{"data":{"title":{"text":"CLI Tool"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"ci-servers","document":[{"data":{"title":{"text":"Connecting code to UXPin (CI & push)"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"version-control","document":[{"data":{"title":{"text":"Version Control"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"patterns","document":[{"data":{"title":{"text":"Patterns"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"tailwind-css-integration","document":[{"data":{"title":{"text":"Tailwind CSS Integration"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"merge-design-system-documentation","document":[{"data":{"title":{"text":"Merge Design System Documentation"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"merge-component-manager","document":[{"data":{"title":{"text":"Merge Component Manager"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"storybook-integration","document":[{"data":{"title":{"text":"Storybook integration"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"merge-faq","document":[{"data":{"title":{"text":"Frequently Asked Questions"},"visible_in_table_of_content":"true"}}]}}]}},"prismicDocsPage":{"data":{"title":{"text":"Config File"},"isVisibleForRobots":"true","body":[{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"<p>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. <br />You can also store there the path to your Webpack and Wrapper (optionally) configuration.</p><h3>Naming and Directory</h3><p>UXPin Merge config file has to be a `Javascript` file named `uxpin.config.js` and stored at the root directory of your project.</p><p><strong>Example:</strong></p>"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"./uxpin.config.js"}]},"language":"JavaScript"}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"<h3>Structure and Default Config</h3><p>The `uxpin.config.js` file has to consist of a module.exports declaration that exports a Javascript object with the following structure:</p>"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"module.exports = {\n    components: {\n        categories: [\n            {\n                name: \"First Category\",\n                include: [\n                    \"src/components/FirstComponent/FirstComponent.js\",\n                    \"src/components/SecondComponent/SecondComponent.js\"\n                ]\n            }\n        ],\n        wrapper: 'src/Wrapper/UXPinWrapper.js',\n        webpackConfig: 'webpack.config.js',\n    },\n    name: \"Name of your Library\"\n}"}]},"language":"JavaScript"}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"<p>The name of the library will show up in the UXPin Editor once you&#39;re going to upload your components library to UXPin.</p>"}}},{"__typename":"PrismicDocsPageBodyImageWithCaption","slice_type":"image_with_caption","primary":{"image":{"url":"https://images.prismic.io/uxpincommunity/0bcf1b01-e587-4b8d-84bf-feea3ac5ac90_Config+file.png?auto=compress,format&rect=0,0,1504,1000&w=752&h=500","Retina__2x_":{"url":"https://images.prismic.io/uxpincommunity/0bcf1b01-e587-4b8d-84bf-feea3ac5ac90_Config+file.png?auto=compress,format&rect=0,0,1504,1000&w=1504&h=1000"}},"image_description":{"text":null}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"<p>The name of the categories for imported components will appear in the list of components in the UXPin Editor. If you&#39;re planning to import multiple components, create multiple categories to make navigation in UXPin easier.</p><p>If you won&#39;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:</p>"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"module.exports = {\n    components: {\n        categories: [\n            {\n                name: 'Uncategorized',\n                include: [\n                'src/components/*/*.{js,jsx,ts,tsx}',\n                'src/*/*.{js,jsx,ts,tsx}',\n              ],\n            },\n        ],\n        wrapper: 'src/Wrapper/UXPinWrapper.js',\n        webpackConfig: 'webpack.config.js',\n    },\n    name: 'Library from Code',\n}"}]},"language":"JavaScript"}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"<h3>Basic Config Example</h3><p>The typical config consists of arrays of multiple categories and paths to components. Here&#39;s an example from the UXPin Merge integration with <strong>IBM Carbon</strong>.</p>"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"module.exports = {\n  components: {\n    categories: [\n      {\n        name: \"General\",\n        include: [\n          \"src/Icon/Icon.js\",\n          \"src/Button/Button.js\",\n          \"src/Link/Link.js\",\n          \"src/FileUploader/FileUploader.js\",\n          \"src/CopyButton/CopyButton.js\",\n        ]\n      },\n      {\n        name: \"Navigation\",\n        include: [\n          \"src/Breadcrumb/Breadcrumb.js\",\n          \"src/BreadcrumbItem/BreadcrumbItem.js\",\n          \"src/Tab/Tab.js\",\n          \"src/Tabs/Tabs.js\",\n          \"src/TabContent/TabContent.js\",\n          \"src/ContentSwitcher/ContentSwitcher.js\",\n          \"src/Switch/Switch.js\",\n          \"src/Search/Search.js\",\n          \"src/SearchFilterButton/SearchFilterButton.js\",\n          \"src/SearchLayoutButton/SearchLayoutButton.js\",\n        ]\n      },\n      {\n        name: \"Toolbar\",\n        include: [\n          \"src/Toolbar/Toolbar.js\",\n          \"src/ToolbarItem/ToolbarItem.js\",\n          \"src/ToolbarTitle/ToolbarTitle.js\",\n          \"src/ToolbarOption/ToolbarOption.js\",\n          \"src/ToolbarDivider/ToolbarDivider.js\",\n          \"src/OverflowMenu/OverflowMenu.js\",\n          \"src/OverflowMenuItem/OverflowMenuItem.js\",\n        ]\n      },\n      {\n        name: \"Form\",\n        include: [\n          \"src/TextInput/TextInput.js\",\n          \"src/TextArea/TextArea.js\",\n          \"src/NumberInput/NumberInput.js\",\n          \"src/Checkbox/Checkbox.js\",\n          \"src/RadioButton/RadioButton.js\",\n          \"src/RadioButtonGroup/RadioButtonGroup.js\",\n          \"src/Toggle/Toggle.js\",\n          \"src/ToggleSmall/ToggleSmall.js\",\n          \"src/ListItem/ListItem.js\",\n          \"src/SelectItem/SelectItem.js\",\n          \"src/SelectItemGroup/SelectItemGroup.js\",\n          \"src/RadioTile/RadioTile.js\",\n          \"src/TileGroup/TileGroup.js\",\n          \"src/Slider/Slider.js\",\n          \"src/TimePicker/TimePicker.js\",\n          \"src/TimePickerSelect/TimePickerSelect.js\"\n        ]\n      },\n      {\n        name: \"Selects and Dropdowns\",\n        include: [\n          \"src/ComboBox/ComboBox.js\",\n          \"src/Dropdown/Dropdown.js\",\n          \"src/DropdownItem/DropdownItem.js\",\n          \"src/Select/Select.js\",\n          \"src/MultiSelect/MultiSelect.js\",\n \n        ]\n      },\n      {\n        name: \"Content\",\n        include: [\n          \"src/Accordion/Accordion.js\",\n          \"src/AccordionItem/AccordionItem.js\",\n          \"src/Notification/Notification.js\",\n          \"src/OrderedList/OrderedList.js\",\n          \"src/UnorderedList/UnorderedList.js\",\n          \"src/CodeSnippet/CodeSnippet.js\",\n          \"src/Pagination/Pagination.js\",\n          \"src/ProgressIndicator/ProgressIndicator.js\",\n          \"src/ProgressStep/ProgressStep.js\",\n          \"src/InlineLoading/InlineLoading.js\",\n          \"src/Tooltip/Tooltip.js\",\n          \"src/Tag/Tag.js\",\n        ]\n      },\n      {\n        name: \"Table\",\n        include: [\n          \"src/Table/Table.js\",\n          \"src/TableRow/TableRow.js\",\n          \"src/TableHead/TableHead.js\",\n          \"src/TableHeader/TableHeader.js\",\n          \"src/TableBody/TableBody.js\",\n          \"src/TableData/TableData.js\",\n        ]\n      },\n      {\n        name: \"Header\",\n        include: [\n          \"src/Header/Header/Header.js\",\n          \"src/Header/HeaderGlobalAction/HeaderGlobalAction.js\",\n          \"src/Header/HeaderGlobalBar/HeaderGlobalBar.js\",\n          \"src/Header/HeaderMenu/HeaderMenu.js\",\n          \"src/Header/HeaderMenuButton/HeaderMenuButton.js\",\n          \"src/Header/HeaderMenuItem/HeaderMenuItem.js\",\n          \"src/Header/HeaderName/HeaderName.js\",\n          \"src/Header/HeaderNavigation/HeaderNavigation.js\",\n        ]\n      }\n    ],\n    wrapper: 'src/Wrapper/UXPinWrapper.js',\n    webpackConfig: 'webpack.config.js',\n  },\n  name: \"IBM Carbon\"\n};"}]},"language":"JavaScript"}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"<p>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:</p>"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"..\n{\n    name: \"Category\",\n    include: 'src/components/YourComponent/YourComponent.js'\n}\n.."}]},"language":"JavaScript"}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"<h3>Advanced Config Example (Glob Patterns)</h3><p>UXPin Merge Config can also accept `glob patterns`. Here&#39;s an example of a config using `glob patterns`:</p>"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"module.exports = {\n  components: {\n    categories: [\n      {\n        name: 'General',\n        include: [\n          'src/library/Avatar/Avatar.js',\n          'src/library/Button/Button.js',\n          'src/library/ButtonGroup/ButtonGroup.js',\n          'src/library/Checkbox/!(__tests__)/*.js',\n          'src/library/Dropdown/Dropdown.js',\n          'src/library/Form/!(__tests__)/*.js',\n          'src/library/Link/Link.js',\n          'src/library/Menu/!(__tests__)/*.js',\n          'src/library/Popover/Popover.js',\n          'src/library/Radio/!(__tests__)/*.js',\n          'src/library/Pagination/Pagination.js',\n          'src/library/Select/Select.js',\n          'src/library/Text/Text.js',\n          'src/library/Table/Table.js',\n          'src/library/Tabs/Tabs/Tabs.js',\n          'src/library/Tabs/Tab/Tab.js',\n          'src/library/TextArea/TextArea.js',\n          'src/library/TextInput/TextInput.js',\n          'src/library/Tooltip/Tooltip.js'\n        ]\n      },\n      {\n        name: 'Card',\n        include: 'src/library/Card/!(__tests__)/*.js'\n      },\n      {\n        name: 'Icons',\n        include: 'src/library/Icon/!(index).js'\n      },\n      {\n        name: 'Layout',\n        include: [\n          'src/library/Box/Box.js',\n          'src/library/Flex/!(__tests__)/*.js',\n          'src/library/Grid/!(__tests__)/*.js',\n          'src/library/StartEnd/StartEnd.js'\n        ]\n      }\n    ],\n    wrapper: 'src/Wrapper/UXPinWrapper.js',\n    webpackConfig: 'webpack.config.js',\n  }\n};"}]},"language":"JavaScript"}}]}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"categoryUid":"merge","pageUid":"config-file","meta_description":"UXPin's merge Docs, config file for new and advanced users","meta_image":"https://images.prismic.io/uxpincommunity/fa3875f8df8606e6405ba46165becc1ea6ed3d34.png?auto=compress,format","meta_title":"Config File | Merge","page_title":"Config File | Merge"}}