docs(playground): enhance editing of custom type properties (#7774)

* docs(playground): enhance editing of custom typeproperties

Related to: #7284

Problem:
Some components have properties of custom types that extend
sap.ui.webc.base.types.DataType. Storybook allows editing
the values of those properies in the Controls addon, but by
default storybook allows to edit them via controls of type
object. However, in most cases, the more suitable control for
editing those values would be of type text or number.

Solution:
Further customized the story settings to specify the expected
control type. To handle the issue globally, added that logic to
the existing script that sets control types based on property type.

* docs(playground): utilize native Array.prototype.includes function

packages/playground/build-scripts-storybook/samples-prepare.js

@@ -2,6 +2,8 @@ const fs = require('fs/promises');
 const path = require('path');
 
 const STORIES_ROOT_FOLDER_NAME = '../_stories';
+const NUMERIC_TYPES = ["sap.ui.webc.base.types.Integer", "sap.ui.webc.base.types.Float"];
+const STRING_TYPES = ["sap.ui.webc.base.types.CSSColor", "sap.ui.webc.base.types.DOMReference"];
 
 // run the script to generate the argTypes for the stories available in the _stories folder
 const main = async () => {
@@ -73,6 +75,18 @@ export type StoryArgsSlots = {
 						control: "select",
 						options: typeEnum.properties.map(a => a.type),
 					};
+				} else if (NUMERIC_TYPES.includes(typeEnum?.name)) {
+					args[prop.name] = {
+						control: {
+							type: "number"
+						},
+					};
+				} else if (STRING_TYPES.includes(typeEnum?.name)) {
+					args[prop.name] = {
+						control: {
+							type: "text"
+						},
+					};
 				}
 			}
 		});