MergeのコンフィグファイルはUXPin Mergeの基本的な設定ファイルです。 このファイルの目的は、UXPinにインポートされたコンポーネントのディレクトリにMergeを誘導し、ライブラリの基本情報を収集することです。 また、WebpackやWrapper（任意）の設定へのパスを保存することもできます。

ネーミングとディレクトリ

UXPin Mergeコンフィグファイルは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エディタに表示されます。

0bcf1b01-e587-4b8d-84bf-feea3ac5ac90_Config+file.avif

インポートしたコンポーネントのカテゴリ名は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',
}

基本的なコンフィグの例

一般的なコンフィグは、複数のカテゴリとコンポーネントのパス配列で構成されます。以下は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"
};

カテゴリーでコンポーネント１つだけをインポートしたい場合は、文字列を直接includeキーに直接指定することができます。以下は例です。

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

高度な設定例 (Glob Patterns)