chore(web): Multi layer Select (#757)

Co-authored-by: KaWaite <[email protected]>

server/pkg/builtin/manifest.yml

@@ -2485,6 +2485,7 @@ extensions:
         - id: default
           title: Link Button
           list: true
+          representativeField: title
           fields:
             - id: title
               type: string

server/pkg/builtin/manifest_ja.yml

@@ -1091,4 +1091,62 @@ extensions:
         title: 動画
         fields:
           text:
-            title: コンテンツ
+            title: コンテンツ
+  cameraButtonStoryBlock:
+    name: カメラボタン
+    description: ストーリーテリングのカメラ移動出来るボタンブロック
+    propertySchema:
+      panel:
+        title: パネル設定
+        fields:
+          padding:
+            title: 余白
+      default:
+        title: カメラボタン
+        fields:
+          title: 
+            title: タイトル
+          color:
+            title: 色
+          bgColor:
+            title: 背景色
+          cameraPosition:
+            title: カメラ位置
+          cameraDuration:
+            title: カメラ移動時間
+  timelineStoryBlock:
+    name: タイムライン
+    description: ストーリーテリングの時間変更できるブロック
+    propertySchema:
+      panel:
+        title: パネル設定
+        fields:
+          padding:
+            title: 余白
+      default:
+        title: タイムライン設定
+        fields:
+          timelineSetting: 
+            title: タイムライン設定
+          playMode:
+            title: プレイモード
+  showLayersStoryBlock:
+    name: レイヤーボタン
+    description: ストーリーテリングのレイヤー変更出来るボタンブロック
+    propertySchema:
+      panel:
+        title: パネル設定
+        fields:
+          padding:
+            title: 余白
+      default:
+        title: レイヤーボタン
+        fields:
+          title: 
+            title: タイトル
+          color:
+            title: 色
+          bgColor:
+            title: 背景色
+          showLayers:
+            title: 見えるレイヤー

web/src/beta/components/Icon/icons.ts

@@ -43,6 +43,7 @@ import ZoomToLayer from "./Icons/zoomToLayer.svg";
 import LayerStyleIcon from "./Icons/layerStyle.svg";
 import AddLayerStyleButtonIcon from "./Icons/addLayerStyleButton.svg";
 import LayerInspector from "./Icons/layerInspector.svg";
+import LayerIcon from "./Icons/layer.svg";
 import Clock from "./Icons/Clock.svg";
 
 // MSIC
@@ -90,6 +91,7 @@ import VideoStoryBlock from "./Icons/videoStoryBlock.svg";
 import ImageStoryBlock from "./Icons/imageStoryBlock.svg";
 import MdTextStoryBlock from "./Icons/mdTextStoryBlock.svg";
 import CameraButtonStoryBlock from "./Icons/cameraButtonStoryBlock.svg";
+import ShowLayersStoryBlock from "./Icons/showLayersStoryBlock.svg";
 import TimelineStoryBlock from "./Icons/timelineStoryBlock.svg";
 
 // Widget tab
@@ -119,6 +121,7 @@ import PublicGitHubRepo from "./Icons/publicGitHubRepo.svg";
 import Marketplace from "./Icons/marketplace.svg";
 
 export default {
+  layer: LayerIcon,
   addLayerStyle: AddLayerStyleButtonIcon,
   layerStyle: LayerStyleIcon,
   layerInspector: LayerInspector,
@@ -187,6 +190,7 @@ export default {
   imageStoryBlock: ImageStoryBlock,
   mdTextStoryBlock: MdTextStoryBlock,
   cameraButtonStoryBlock: CameraButtonStoryBlock,
+  showLayersStoryBlock: ShowLayersStoryBlock,
   timelineStoryBlock: TimelineStoryBlock,
   widget: Widgets,
   widgets: Widgets,

web/src/beta/components/fields/SelectField/index.stories.tsx

@@ -4,7 +4,7 @@ import { useCallback } from "react";
 
 import { styled } from "@reearth/services/theme";
 
-import SelectField, { Props } from ".";
+import SelectField, { SingleSelectProps, MultiSelectProps } from ".";
 
 const meta: Meta<typeof SelectField> = {
   component: SelectField,
@@ -14,10 +14,15 @@ export default meta;
 
 type Story = StoryObj<typeof SelectField>;
 
-export const Default: Story = (args: Props) => {
+export const Default: Story = (args: SingleSelectProps) => {
   const [_, updateArgs] = useArgs();
 
-  const handleChange = useCallback((value: string) => updateArgs({ value: value }), [updateArgs]);
+  const handleChange = useCallback(
+    (value: string) => {
+      updateArgs({ value: value });
+    },
+    [updateArgs],
+  );
 
   return (
     <Wrapper>
@@ -29,18 +34,51 @@ export const Default: Story = (args: Props) => {
           {...args}
           name="Disabled"
           description="Props are controlled by the field above"
-          placeholder="This is a disabled field"
           disabled={true}
           onChange={handleChange}
         />
       </div>
       <div>
         <SelectField
           {...args}
-          name="Empty"
-          value={undefined}
-          description="Even if you try, you won't be able to select the value"
+          name="Multi Select"
+          description="You can select multiple options"
+          onChange={handleChange}
+        />
+      </div>
+    </Wrapper>
+  );
+};
+
+export const MultiSelect: Story = (args: MultiSelectProps) => {
+  const [_, updateArgs] = useArgs();
+
+  const handleChange = useCallback(
+    (value: string[] | undefined) => {
+      updateArgs({ value: value });
+    },
+    [updateArgs],
+  );
+
+  return (
+    <Wrapper>
+      <div>
+        <SelectField
+          {...args}
+          name="Multi Select"
+          description="You can select multiple options"
+          onChange={handleChange}
+          multiSelect
+        />
+      </div>
+      <div>
+        <SelectField
+          {...args}
+          name="Disabled"
+          description="Props are controlled by the field above"
+          disabled={true}
           onChange={handleChange}
+          multiSelect
         />
       </div>
     </Wrapper>
@@ -72,3 +110,24 @@ Default.args = {
   ],
   onChange: () => console.log("clicked"),
 };
+
+MultiSelect.args = {
+  name: "Select Field",
+  description: "Select from the options ",
+  disabled: false,
+  value: undefined,
+  options: [
+    {
+      label: "item 1",
+      key: "item_1",
+    },
+    { label: "item 2", key: "item_2" },
+    { label: "item 3", key: "item_3" },
+    { label: "item 4", key: "item_4" },
+    { label: "item 5", key: "item_5" },
+    { label: "item 6", key: "item_6" },
+    { label: "item 7", key: "item_7" },
+  ],
+  multiSelect: true,
+  onChange: () => console.log("clicked"),
+};