Scheduler - Appointment Form Redesign - Improve storybook (#31543)

Author: Tucchhaa

apps/react-storybook/stories/scheduler/SchedulerAppointmentForm.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import dxScheduler from "devextreme/ui/scheduler";
 import { wrapDxWithReact } from "../utils";
-import { data, resources } from "./data";
+import { data, resources, resourcesWithIcons } from "./data";
 
 const Scheduler = wrapDxWithReact(dxScheduler);
 
@@ -25,12 +25,13 @@ export const Overview: Story = {
     'editing.allowDragging': true,
     'editing.allowResizing': true,
     'editing.allowTimeZoneEditing': false,
+    'editing.form.iconsShowMode': 'main',
     resources,
     height: 600,
     views: ['day', 'week', 'workWeek', 'month'],
     currentView: 'workWeek',
     currentDate: new Date(2021, 3, 29),
-    dataSource: data
+    dataSource: data,
   },
   argTypes: {
     'editing.allowAdding': { 
@@ -42,12 +43,24 @@ export const Overview: Story = {
     'editing.allowTimeZoneEditing': { 
       control: 'boolean',
     },
+    'editing.form.iconsShowMode': {
+      control: 'radio',
+      options: ['both', 'main', 'recurrence', 'never'],
+    },
     'showResources': {
       control: 'boolean',
     },
     'resources': {
-      control: 'boolean',
-      mapping: { true: resources, false: [] },
+      control: 'radio',
+      options: ['enabled', 'enabledWithIcons', 'disabled'],
+      additionalProps: {
+        default: 'enabled'
+      },
+      mapping: {
+        enabled: resources,
+        enabledWithIcons: resourcesWithIcons,
+        disabled: [],
+      }
     }
   },
 }

apps/react-storybook/stories/scheduler/data.ts

@@ -63,6 +63,27 @@ export const resources = [
   }
 ];
 
+export const resourcesWithIcons = [
+  {
+    fieldExpr: 'roomId',
+    dataSource: rooms,
+    label: 'Room',
+    icon: 'conferenceroomoutline'
+  }, {
+    fieldExpr: 'priorityId',
+    dataSource: priorities,
+    label: 'Priority',
+    icon: 'tags',
+    useColorAsDefault: true,
+  }, {
+    fieldExpr: 'assigneeId',
+    allowMultiple: true,
+    dataSource: assignees,
+    label: 'Assignee',
+    icon: 'user'
+  }
+];
+
 export const data = [
   {
     text: 'Watercolor Landscape',