feat: add ContextMenu2SortableItem

[yomotsu]

この PR は、 ContextMenu2 の追加パーツとなる、「並べ替えができるリスト」のコンポーネントを追加する PR です

Screen.Recording.2025-01-28.at.14.13.42.mp4

hover 起動を選択した場合（state で open 状態を自分で制御していない場合）、ContextMenu2 はマウスアウトすると自動で閉じますが、並べ替えドラッグ中はマウスアウトしても閉じないようにしています。
※ 実際には、open 状態は hover に任せるのではなく、自分で制御して利用することになるかとは思います

大まかな利用例

• ContextMenu2 の中で利用します
• 並べ替えの範囲の単位で ContextMenu2SortableGroup で括ります
• ContextMenu2SortableItem には ID を指定します
• ContextMenu2SortableItem の中には、既存の ContextMenu2***Item を 1 つ入れて使います（以下の例では ContextMenu2SwitchItem を入れています）

const [order, setOrder] = useState<(string | number)[]>(["3", "2", "1"]);

<ContextMenu2Container>
  <ContextMenu2 trigger={<button type="button">trigger</button>}>

    <ContextMenu2SortableGroup order={order} onOrderChange={setOrder}>

      <ContextMenu2SortableItem id="1">
        <ContextMenu2SwitchItem
          checked={checkedIndex.includes(1)}
          onChange={() => handleCheck(1)}
        >
          スイッチ 1
        </ContextMenu2SwitchItem>
      </ContextMenu2SortableItem>

      <ContextMenu2SortableItem id="2">
        <ContextMenu2SwitchItem
          checked={checkedIndex.includes(2)}
          onChange={() => handleCheck(2)}
        >
          スイッチ 2
        </ContextMenu2SwitchItem>
      </ContextMenu2SortableItem>

      <ContextMenu2SortableItem id="3">
        <ContextMenu2SwitchItem
          checked={checkedIndex.includes(3)}
          onChange={() => handleCheck(3)}
        >
          スイッチ 3
        </ContextMenu2SwitchItem>
      </ContextMenu2SortableItem>

    </ContextMenu2SortableGroup>

  </ContextMenu2>
</ContextMenu2Container>

並べ替えの対象にしたくない場合（順番固定にしたい場合）は、ContextMenu2SortableGroup の外に配置します
（以下の場合、1は場所固定、2,3 は入れ替え可能）

const [order, setOrder] = useState<(string | number)[]>(["3", "2"]);

<ContextMenu2Container>
  <ContextMenu2 trigger={<button type="button">trigger</button>}>

    <ContextMenu2SortableItem id="1">
      <ContextMenu2SwitchItem
        checked={checkedIndex.includes(1)}
        onChange={() => handleCheck(1)}
      >
        スイッチ 1
      </ContextMenu2SwitchItem>
    </ContextMenu2SortableItem>

    <ContextMenu2SortableGroup order={order} onOrderChange={setOrder}>
      <ContextMenu2SortableItem id="2">
        <ContextMenu2SwitchItem
          checked={checkedIndex.includes(2)}
          onChange={() => handleCheck(2)}
        >
          スイッチ 2
        </ContextMenu2SwitchItem>
      </ContextMenu2SortableItem>

      <ContextMenu2SortableItem id="3">
        <ContextMenu2SwitchItem
          checked={checkedIndex.includes(3)}
          onChange={() => handleCheck(3)}
        >
          スイッチ 3
        </ContextMenu2SwitchItem>
      </ContextMenu2SortableItem>

    </ContextMenu2SortableGroup>

  </ContextMenu2>
</ContextMenu2Container>

Check List (If️ you added new component in this PR)

• Export the component in src/components/index.ts
• Add example to .storybook/documents/Information/Samples/Samples.stories.tsx
• Localize added component

[changeset-bot]

🦋 Changeset detected

Latest commit: 1fbb559

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
ingred-ui	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify]

✅ Deploy Preview for ingred-ui ready!

Name	Link
🔨 Latest commit	1fbb559
🔍 Latest deploy log	https://app.netlify.com/sites/ingred-ui/deploys/67989af994caa00008820eee
😎 Deploy Preview	https://deploy-preview-1703--ingred-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[yomotsu]

ドラッグ & ドロップの入れ替えを実現するために dnd-kit を追加しました

[yomotsu]

「入れ替え不可」の項目について、確認したいことがあり Figma の状態を再現できていません。

左: Figma、 右: Storybook

確認したいこと:

• 「入れ替え不可」の項目は、スイッチ（青色）自体の切り替えはできていいでしょうか？もしくは、スイッチも disabled になるべきでしょうか？

[noronaoki]

@yomotsu
すみません、説明不足でしたので補足させてください。

（そもそもドラッグとスイッチの役割が別なので実装として疎結合にした方が良いということであればそうしていただいて構いません）
Toggleスイッチに関しては「テーブル上の列の表示/非表示を変更できる」ものとして扱いたいと思っています。
組み合わせのパターンがいくつか考えられますが、これらはアプリ側での実装時に制御した方が良いでしょうか？

（画像に間違いがあったので修正しています）

[yomotsu]

@noronaoki

補足ありがとうございます。
Figmaの内容で実装問題ないです。

• スイッチ切り替え可
• スイッチ切り替え不可（onのまま表示）

があるということで理解しました。

もうすこしクリアにしたいところがありまして、同じ Figma 内の以下の UI は、スイッチの並びで、「disable らしき項目は、スイッチも表示されていない」となっていますが、上記とこれの「disabled のスイッチとしての見た目の違い」はどう判断したらいいでしょう？

[noronaoki]

@yomotsu
ありがとうございます！

こちらは列の並び替え、表示制御とは別でフィルタが適用されている列の情報を示しているものです。
フィルタが適用されているものはONになっていてOFFにすることができます。
逆にOFFのものをONにすることはできません。このスイッチだけではフィルタの詳細内容が決定できないためです。

スマホで閲覧している時や表に横スクロールが発生している時に列が隠れてしまい、フィルタ項目が不明になるのを補助する目的があります。同時に、フィルタ条件を解除することができます。
OFFにした項目は、再度ここを開くとスイッチが無くっているイメージです。

ただ、OFFにできてもONにできないのでユーザーは最初戸惑うかもしれませんが、慣れれば利便性は高いと考えております。

[yomotsu]

なるほどありがとうございます。
解説いただいた内容で整理できました！
実装を進めますね

[yomotsu]

on のまま変更不可項目について、Figma のデザインと同じになりました

[noronaoki]

良さそうです！

[yomotsu]

@deatiger
コンポーネント追加の PR を作りました。内容お目通しお願いできますでしょうか？
（並行して実装できる別機能があるので、急ぎでなくて大丈夫です）

[deatiger]

LGTM!

[deatiger]

@yomotsu @noronaoki
問題なさそうだったのでマージとリリースをします。