基本情報

Boilerplate repoでお気づきかもしれませんが、MergeはJSXプリセットをすべてのコンポーネントのプリセットサブディレクトリに保存する必要があります。 プリセットはすべてのコンポーネントのデフォルト設定でレンダリングするために使用されます。Mergeは、デフォルトでレンダリングするプロパティの設定（子も含む）を知る必要があります。

この設定は、ユーザーまたはチームの誰かがUXPinエディタのキャンバスにコンポーネントをドラッグ＆ドロップしたときにレンダリングされます。

一般的なプリセットは以下の通りです。

import React from 'react';
import Button from '../Button';

export default (
    <Button
        uxpId="button1"
        icon={<Icon icon='TickerSvg' size='s' />}
        mode="filled"
        size="s"
        stretched
        type="error"
    >
        Merge!
    </Button>
);

ファイルの最初にはReactライブラリとプリセットで表現したい全てのコンポーネントをインポートする必要があります。プリセットの export default() 部分に、コンポーネントの希望するデフォルト構成を表すJSXコードを配置します。すべてのコンポーネントのJSX表現には、一般のプロパティ設定とは別に、UXPin ID属性uxpId. uxpIddが必要になります。これにより、Merge はすべてのコンポーネントを適切にレンダリングし、コンポーネントのオーバーライドを記録します。（万が一発生した場合）

ID とネストされたコンポーネント

Mergeの JSX プリセットは、コンポーネントの複雑なネスト構造で表現されます。すべての uxpId プロパティが一意の値を維持する必要があります。 特定のプリセットでは、2つのコンポーネントが同じ uxpId を持つことはできません。 それ以外にも、ネスト構造のプリセットを作成することは、React.jsのコンポーネントでJSXコードを構成するのと同じように機能します。全てのコンポーネントをインポートして export default() ディレクティブで全体の構造を作る必要があります。

import React from 'react';
import SelectItem from '../../SelectItem/SelectItem';
import Select from '../Select';

export default (
  <Select uxpId="select1">
    <SelectItem uxpId="select.item.1">Option1</SelectItem>
    <SelectItem uxpId="select.item.2">Option2</SelectItem>
    <SelectItem uxpId="select.item.3">Option3</SelectItem>
  </Select>
);

コンポーネントの uxpId の名前を決める時、コンポーネントの持つ役割を考慮して決めてください。今後、ネストされたコンポーネントを別のコンポーネントに自動的に置き換えたい場合、同じuxpIdwillを維持することで、Mergeはすべてのデザインを新しいコンポーネントに自動的に更新することができます。

例：Buttonを使用しなくなり、新しい ButtonNewに置き換える場合

オーバーライド（上書き）

プリセットのコードの変更は、UXPin エディターの UXPin デザインシステム ライブラリに自動的に反映されます。UXPin エディターでユーザーがコンポーネントのプロパティを変更しない限り、Mergeはすべてのプロパティを変更します。この変更は、オーバーライドとして扱われ、そのまま残ります。以下の例を見てみましょう。

https://uxpincommunity.cdn.prismic.io/uxpincommunity%2F5e8714e6-881b-4e02-b89a-eac64f19519b_merge_button_comparison.mp4

最初はボタンのデフォルトのプリセットは次のようになります。

import React from 'react';
import Button from '../Button';

export default (
  <Button
    uxpId="action1"
    size="small"
    variant="contained"
    color="primary"
    fullWidth
  >
    Click me
  </Button>
);

ユーザーがこの要素をUXPinキャンバスにドラッグし、UXPinのインターフェースでプロパティの size をlargeに変更し、色をsecondaryに変更しました。 その後、デザインシステムチームの決定により、Buttonのデフォルトプリセットが次のように変更されたとします。

import React from 'react';
import Button from '../Select';

export default (
  <Button
    uxpId="action1"
    size="medium"
    variant="contained"
    color="primary"
    fullWidth
  >
    Click me
  </Button>
);

このReact.jsボタンを使用してUXPinエディタで作ったデザインは何も変更されません。 変更されたプロパティは、以前にユーザーによって上書きされてました。