Scheduler: Add form customization stories

[aleksei-semikozov]

No description provided.

[Copilot]

Pull Request Overview

This PR adds new Storybook stories for demonstrating Scheduler form customization capabilities in the React Storybook application.

• Introduces four new stories showcasing different form customization scenarios for the Scheduler component
• Adds CSS styling for custom icon buttons used in form customization examples
• Demonstrates various form manipulation techniques including filtering items, reordering, adding custom fields, and customizing existing fields

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.

File	Description
apps/react-storybook/stories/scheduler/SchedulerFormCustomization.stories.tsx	Adds comprehensive Storybook stories for Scheduler form customization, including default form, item visibility controls, reordering, custom items, and field customization
apps/react-storybook/stories/scheduler/form-customization.css	Provides custom CSS styling for icon buttons used in the form customization examples

[Copilot]

Using explicit any type reduces type safety. Consider defining a proper type for the render function arguments, similar to how StepperRenderArgs is defined in Stepper.stories.tsx. For example:

type ShowItemsRenderArgs = typeof baseConfig & {
  showSubjectGroup: boolean;
  showDateGroup: boolean;
  showRecurrenceGroup: boolean;
  showDescriptionGroup: boolean;
  showResourcesGroup: boolean;
  resources: typeof resources;
};

Then use: render: (args: ShowItemsRenderArgs) => {

Alternatively, allow TypeScript to infer the type by omitting the annotation entirely: render: (args) => {

[Copilot]

Using explicit any type reduces type safety. Consider defining a proper type for the render function arguments. For example:

type ReorderItemsRenderArgs = typeof baseConfig & {
  subjectGroupPosition: number;
  dateGroupPosition: number;
  descriptionGroupPosition: number;
  resourcesGroupPosition: number;
  recurrenceGroupPosition: number;
  resources: typeof resources;
};

Then use: render: (args: ReorderItemsRenderArgs) => {

Alternatively, allow TypeScript to infer the type by omitting the annotation entirely: render: (args) => {

[Copilot]

[nitpick] The use of !important can make styles harder to maintain and override. Consider whether the CSS specificity can be increased through more specific selectors instead, or if there's a way to modify the component structure to avoid needing !important. If !important is necessary due to overriding DevExtreme's default styles, consider adding a comment explaining why it's required.

Suggested change

	height: 18px;
	height: 18px;
	/* !important is required to override DevExtreme's default border styles */

[Copilot]

[nitpick] The use of !important can make styles harder to maintain and override. Consider whether the CSS specificity can be increased through more specific selectors instead, or if there's a way to modify the component structure to avoid needing !important. If !important is necessary due to overriding DevExtreme's default styles, consider adding a comment explaining why it's required.

Suggested change

	/*
	* The use of !important here is required to override DevExtreme's default styles,
	* which apply padding to icon elements with high specificity and/or inline styles.
	* Attempts to increase selector specificity were insufficient.
	*/

[Tucchhaa]

question: why do we need these styles?

I ask because I had experience with storybook that styles in different stories affected other stories (because selectors where too broad) which was a problem during the design review.

can you please check this style doesn't affect other stories? Maybe the problem was solved, otherwise we need a more specific selector here

[aleksei-semikozov]

Styles are necessary for customizeItem Story. I add a specific id and a more specific class to avoid the behavior you described before 😊

[Copilot]

Pull Request Overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

[Copilot]

Using an ID selector in CSS can cause maintainability issues in component-based architectures. Since this is a Storybook story where the component might be rendered multiple times on the same page, consider using only the class selector .scheduler-form-custom-icon-button or making the ID selector more specific with a namespace prefix.

Suggested change

	#customize-subjectIcon,
	.scheduler-form-custom-icon-button {
	width: 18px;
	height: 18px;
	border: 0 !important;
	}
	#customize-subjectIcon *,
	.scheduler-form-custom-icon-button {
	width: 18px;
	height: 18px;
	border: 0 !important;
	}

[Copilot]

[nitpick] Missing trailing comma after height: 100. The codebase should maintain consistent comma usage in object literals for better git diffs and easier maintenance.

Suggested change

	height: 100
	height: 100,