Merge config file은 UXPin Merge의 기본 구성 파일입니다. 이 파일의 목적은 UXPin으로 가져온 컴포넌트의 디렉토리로 Merge를 안내하고 라이브러리에 대한 기본 정보를 수집하는 것입니다. 또한 Webpack 및 Wrapper (선택 사항) 구성에 대한 경로를 저장할 수 있습니다.

명명법 및 디렉토리

UXPin Merge config file은 uxpin.config.js라는 Javascript이며 프로젝트의 루트 디렉토리에 저장되어야 합니다.

예:

./uxpin.config.js

구조 및 기본 설정

uxpin.config.js 파일은 다음과 같은 구조를 가진 Javascript 오브젝트를 내보내는 module.exports 선언으로 구성되어야 합니다.

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"
}

컴포넌트 라이브러리를 UXPin에 업로드하면 라이브러리 이름이 UXPin 에디터에 표시됩니다.

가져온 컴포넌트의 카테고리 이름은 UXPin 에디터의 컴포넌트 목록에 표시됩니다. 여러 컴포넌트를 가져오는 경우 UXPin에서 탐색을 용이하게 하기 위해 여러 카테고리를 작성하는게 좋습니다.

uxpin.config.js를 정의하지 않거나 config file이 루트 디렉토리에 배치되지 않으면 Merge는 default config을 읽습니다. Default config은 다음과 같습니다.

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',
}

기본적인 config의 예

일반적인 config는 여러 카테고리와 컴포넌트에 대한 경로 배열로 구성됩니다. 다음은 IBM Carbon 디자인시스템의 UXPin Merge 통합 예입니다.

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"
};