fix(create-webcomponents-package): fix package creation issues with test and lint (#6976)

The change addresses few issues when generating a web component project with our tools:
### Command `@ui5/webcomponents-package` updated
- added new parameter `componentName` and derive the tag name from it
- added new (private) parameter `skipSubFolder` to generate all files in the execution context, not in a new folder (defined by the packageName parameter) as by default
### Command `create-web-component` updated
- remove the "typescript" parameter and just check for the existence of `tsconfig.json` to generate TS or JS component.
- update "componentName" validation to allow only letters, starting with capital one - Foo, FooBar, FooBarBar
- remove "tag" parameter, the tag is now produced based on the component name - "foo-tag", "foo-bar", "foo-bar-bar"
### The `test` command
- fixes failing `yarn test` command due to a bug in `test-runner.js`
### Themes updated
- no longer showcase "belize", "horizon" is now used in the test page instead
### Eslint improved
- added eslint config file pointing to the default config in `@ui5/webcomponents-tools`

Fixes: #6980

Author: ilhan007

packages/create-package/README.md

@@ -18,7 +18,8 @@ Usage:
 
 Options:
     --name <string>     - defines the package name
-    --tag <string>      - defines the tag name of the sample web component that will be created in your new package
+    --componentName <string>      - defines the component class name that will be created in your new package
+    --tag <string>      - defines the tag name of the sample web component that will be created in your new package. The tag will be derived from the component name if not provided. 
     --enable-typescript - enables TypeScript support for the package
     --skip              - skips configuration and generates package with a default value for each parameter that wasn't passed
 ```

packages/create-package/create-package.js

@@ -37,9 +37,22 @@ const isNPMRC = sourcePath => {
 };
 
 // Validation of user input
-const isNameValid = name => typeof name === "string" && name.match(/^[a-zA-Z0-9\-_]+$/);
+const ComponentNamePattern = /^[A-Z][A-Za-z0-9]+$/;
+const isNameValid = name => typeof name === "string" && name.match(/^[a-zA-Z][a-zA-Z0-9\-_]+$/);
+const isComponentNameValid = name => typeof name === "string" && ComponentNamePattern.test(name);
 const isTagValid = tag => typeof tag === "string" && tag.match(/^[a-z0-9]+?-[a-zA-Z0-9\-_]+?[a-z0-9]$/);
 
+/**
+ * Hyphanates the given PascalCase string, f.e.:
+ * Foo -> "my-foo" (adds preffix)
+ * FooBar -> "foo-bar"
+ */
+const hyphaneteComponentName = (componentName) => {
+	const result = componentName.replace(/([a-z])([A-Z])/g, '$1-$2' ).toLowerCase();
+
+	return result.includes("-") ? result : `my-${result}`;
+};
+
 // Utils for building the file structure
 const replaceVarsInFileContent = (vars, content) => {
 	for (let key in vars) {
@@ -92,14 +105,14 @@ const copyFiles = (vars, sourcePath, destPath) => {
 	}
 };
 
-const generateFilesContent = (name, tag, typescript) => {
-	const className = capitalizeFirst(kebabToCamelCase(tag));
+const generateFilesContent = (name, componentName, typescript, skipSubfolder) => {
+	const tagName = argv.tag || hyphaneteComponentName(componentName);
 
 	// All variables that will be replaced in the content of the resources/
 	const vars = {
 		INIT_PACKAGE_VAR_NAME: name,
-		INIT_PACKAGE_VAR_TAG: tag,
-		INIT_PACKAGE_VAR_CLASS_NAME: className,
+		INIT_PACKAGE_VAR_TAG: tagName,
+		INIT_PACKAGE_VAR_CLASS_NAME: componentName,
 		INIT_PACKAGE_VAR_TYPESCRIPT: typescript,
 	};
 
@@ -141,7 +154,7 @@ const generateFilesContent = (name, tag, typescript) => {
 	}
 
 	// Update package.json
-	const destDir = path.join(`./`, name);
+	const destDir = skipSubfolder ? path.join("./") : path.join("./", name);
 	mkdirp.sync(destDir);
 	fs.writeFileSync(path.join(destDir, "package.json"), JSON.stringify(packageContent, null, 2));
 	// Copy files
@@ -170,27 +183,32 @@ const generateFilesContent = (name, tag, typescript) => {
 const createWebcomponentsPackage = async () => {
 	let response;
 	if (argv.name && !isNameValid(argv.name)) {
-		throw new Error("The package name should be a string (a-z, A-Z, 0-9).");
+		throw new Error("The package name should be a string, starting with letter and containing the following symbols [a-z, A-Z, 0-9].");
+	}
+
+	if (argv.componentName && !isComponentNameValid(argv.componentName)) {
+		throw new Error("The component name should be a string, starting with a capital letter [A-Z][a-z], for example: Button, MyButton, etc.");
 	}
 
 	if (argv.tag && !isTagValid(argv.tag) ) {
-		throw new Error("The tag should be in kebab-case (my-first-component f.e) and it can't be a single word.");
+		throw new Error("The tag should be in kebab-case (f.e my-component) and it can't be a single word.");
 	}
 
 	let name = argv.name || "my-package";
-	let tag = argv.tag || "my-first-component";
+	let componentName = argv.componentName || "MyComponent";
 	let typescriptSupport = !!argv.enableTypescript;
+	const skipSubfolder = !!argv.skipSubfolder;
 
 	if (argv.skip) {
-		return generateFilesContent(name, tag, typescriptSupport);
+		return generateFilesContent(name, componentName, typescriptSupport, skipSubfolder);
 	}
 
 	if (!argv.name) {
 		response = await prompts({
 			type: "text",
 			name: "name",
 			message: "Package name:",
-			validate: isNameValid,
+			validate: (value) => isNameValid(value) ? true : "Package name should be a string, starting with a letter and containing the following symbols [a-z, A-Z ,0-9, _, -].",
 		});
 		name = response.name;
 	}
@@ -214,18 +232,18 @@ const createWebcomponentsPackage = async () => {
 		typescriptSupport = response.language;
 	}
 
-	if (!argv.tag) {
+	if (!argv.componentName) {
 		response = await prompts({
 			type: "text",
-			name: "tag",
+			name: "componentName",
 			message: "Component name:",
-			initial: "my-first-component",
-			validate: isTagValid,
+			initial: "MyComponent",
+			validate: (value) => isComponentNameValid(value) ? true : "Component name should follow PascalCase naming convention (f.e. Button, MyButton, etc.).",
 		});
-		tag = response.tag;
+		componentName = response.componentName;
 	}
 
-	return generateFilesContent(name, tag, typescriptSupport);
+	return generateFilesContent(name, componentName, typescriptSupport, skipSubfolder);
 };
 
 createWebcomponentsPackage();

packages/create-package/template/.eslintignore

@@ -2,4 +2,5 @@
 dist
 test
 src/generated
-jsdoc-dist
+jsdoc-dist
+.eslintrc.js

packages/create-package/template/.eslintrc.js

@@ -0,0 +1,5 @@
+const config = require("@ui5/webcomponents-tools/components-package/eslint.js");
+
+// This eslint config is defined @ui5/webcomponents-tools,
+// Feel free to override part of the configuration or provide entirely new config to fit your dev requirements.
+module.exports = config;

packages/create-package/template/src/themes/sap_belize_hcw/parameters-bundle.css

@@ -0,0 +1,3 @@
+:root {
+    --my-component-border-color: blue;
+}

packages/create-package/template/src/themes/sap_belize/parameters-bundle.css packages/create-package/template/src/themes/sap_horizon/parameters-bundle.css

@@ -0,0 +1,3 @@
+:root {
+    --my-component-border-color: white;
+}

packages/create-package/template/src/themes/sap_horizon_dark/parameters-bundle.css

@@ -28,13 +28,14 @@
 		<li><a href="?sap-ui-theme=sap_fiori_3_dark">Fiori 3 Dark</a></li>
 		<li><a href="?sap-ui-theme=sap_fiori_3_hcb">Fiori 3 High Contrast Black</a></li>
 		<li><a href="?sap-ui-theme=sap_fiori_3_hcw">Fiori 3 High Contrast White</a></li>
-		<li><a href="?sap-ui-theme=sap_belize">Belize</a></li>
-		<li><a href="?sap-ui-theme=sap_belize_hcb">Belize High Contrast Black</a></li>
-		<li><a href="?sap-ui-theme=sap_belize_hcw">Belize High Contrast White</a></li>
+		<li><a href="?sap-ui-theme=sap_horizon">Horizon</a></li>
+		<li><a href="?sap-ui-theme=sap_horizon_dark">Horizon Dark</a></li>
+		<li><a href="?sap-ui-theme=sap_horizon_hcb">Horizon High Contrast Black</a></li>
+		<li><a href="?sap-ui-theme=sap_horizon_hcw">Horizon High Contrast White</a></li>
 	</ul>
     <br>
     <span>or in the browser console, for example:</span>
-    <code>window['sap-ui-webcomponents-bundle'].configuration.setTheme("sap_belize_hcb")</code>
+    <code>window['sap-ui-webcomponents-bundle'].configuration.setTheme("sap_horizon_hcb")</code>
 
     <br><br>
 

packages/create-package/template/src/themes/sap_horizon_hcb/parameters-bundle.css

@@ -218,6 +218,8 @@
   "--sapCriticalTextColor",
   "--sapElement_BorderCornerRadius",
   "--sapElement_BorderWidth",
+  "--sapElement_Compact_Height",
+  "--sapElement_Height",
   "--sapErrorBackground",
   "--sapErrorBorderColor",
   "--sapField_Active_BorderColor",
@@ -231,29 +233,39 @@
   "--sapField_Hover_Background",
   "--sapField_Hover_BackgroundStyle",
   "--sapField_Hover_BorderColor",
+  "--sapField_Hover_InformationShadow",
+  "--sapField_Hover_InvalidShadow",
+  "--sapField_Hover_Shadow",
+  "--sapField_Hover_SuccessShadow",
+  "--sapField_Hover_WarningShadow",
   "--sapField_HoverBorderColor",
   "--sapField_InformationBackground",
   "--sapField_InformationBackgroundStyle",
   "--sapField_InformationBorderWidth",
   "--sapField_InformationColor",
+  "--sapField_InformationShadow",
   "--sapField_InvalidBackground",
   "--sapField_InvalidBackgroundStyle",
   "--sapField_InvalidBorderWidth",
   "--sapField_InvalidColor",
+  "--sapField_InvalidShadow",
   "--sapField_PlaceholderTextColor",
   "--sapField_ReadOnly_Background",
   "--sapField_ReadOnly_BackgroundStyle",
   "--sapField_ReadOnly_BorderColor",
   "--sapField_RequiredColor",
+  "--sapField_Shadow",
   "--sapField_SuccessBackground",
   "--sapField_SuccessBackgroundStyle",
   "--sapField_SuccessBorderWidth",
   "--sapField_SuccessColor",
+  "--sapField_SuccessShadow",
   "--sapField_TextColor",
   "--sapField_WarningBackground",
   "--sapField_WarningBackgroundStyle",
   "--sapField_WarningBorderWidth",
   "--sapField_WarningColor",
+  "--sapField_WarningShadow",
   "--sapFontBoldFamily",
   "--sapFontFamily",
   "--sapFontHeader1Size",

packages/create-package/template/src/themes/sap_belize_hcb/parameters-bundle.css packages/create-package/template/src/themes/sap_horizon_hcw/parameters-bundle.css

@@ -1,8 +1,31 @@
 const fs = require("fs");
+const path = require("path");
 const prompts = require("prompts");
 const jsFileContentTemplate = require("./jsFileContentTemplate.js");
 const tsFileContentTemplate = require("./tsFileContentTemplate.js");
 
+/**
+ * Hyphanates the given PascalCase string, f.e.:
+ * Foo -> "my-foo" (adds preffix)
+ * FooBar -> "foo-bar"
+ */
+const hyphaneteComponentName = (componentName) => {
+	const result = componentName.replace(/([a-z])([A-Z])/g, '$1-$2' ).toLowerCase();
+
+	return result.includes("-") ? result : `my-${result}`;
+};
+
+/**
+ * Capitalizes first letter of string.
+ */
+const capitalizeFirstLetter = string => string.charAt(0).toUpperCase() + string.slice(1);
+
+/**
+ * Validates component name, enforcing PascalCase pattern - Button, MyButton.
+ */
+const PascalCasePattern = /^[A-Z][A-Za-z0-9]+$/;
+const isNameValid = name => typeof name === "string" && PascalCasePattern.test(name);
+
 const getPackageName = () => {
 	if (!fs.existsSync("./package.json")) {
 		throw("The current directory doesn't contain package.json file.");
@@ -35,13 +58,6 @@ const getLibraryName = packageName => {
 	return packageName.substr("webcomponents-".length);
 };
 
-// String manipulation
-const capitalizeFirstLetter = string => string.charAt(0).toUpperCase() + string.slice(1);
-
-// Validation of user input
-const isNameValid = name => typeof name === "string" && name.match(/^[a-zA-Z][a-zA-Z0-9_-]*$/);
-const isTagNameValid = tagName => tagName.match(/^([a-z][a-z0-9]*-)([a-z0-9]+(-[a-z0-9]+)*)$/);
-
 const generateFiles = (componentName, tagName, library, packageName, isTypeScript) => {
 	componentName = capitalizeFirstLetter(componentName);
 	const filePaths = {
@@ -77,29 +93,17 @@ const createWebComponent = async () => {
 
 	const consoleArguments = process.argv.slice(2);
 	let componentName = consoleArguments[0];
-	let tagName = consoleArguments[1];
-	let language = consoleArguments[2];
-	let isTypeScript;
-
 
 	if (componentName && !isNameValid(componentName)) {
-		throw new Error("Invalid component name. Please use only letters, numbers, dashes and underscores. The first character must be a letter.");
-	}
-
-	if (tagName && !isTagNameValid(tagName)) {
-		throw new Error("Invalid tag name. The tag name should only contain lowercase letters, numbers, dashes, and underscores. The first character must be a letter, and it should follow the pattern 'tag-name'.");
-	}
-
-	if (language && language !== "typescript" && language !== "ts" && language !== "javascript" && language !== "js") {
-		throw new Error("Invalid language. Please use 'typescript','javascript' or their respective 'ts','js'.");
+		throw new Error(`${componentName} is invalid component name. Use only letters (at least two) and start with capital one:  Button, MyButton, etc.`);
 	}
 
 	if (!componentName) {
 		const response = await prompts({
 			type: "text",
 			name: "componentName",
 			message: "Please enter a component name:",
-			validate: (value) => isNameValid(value),
+			validate: (value) => isNameValid(value) ? true : "Component name should follow PascalCase naming convention (f.e. Button, MyButton, etc.).",
 		});
 		componentName = response.componentName;
 
@@ -108,42 +112,8 @@ const createWebComponent = async () => {
 		}
 	}
 
-	if (!tagName) {
-		const response = await prompts({
-			type: "text",
-			name: "tagName",
-			message: "Please enter a tag name:",
-			validate: (value) => isTagNameValid(value),
-		});
-		tagName = response.tagName;
-
-		if (!tagName) {
-			process.exit();
-		}
-	}
-
-	if (!language) {
-		const response = await prompts({
-			type: "select",
-			name: "isTypeScript",
-			message: "Please select a language:",
-			choices: [
-				{
-					title: "TypeScript (recommended)",
-					value: true,
-				},
-				{
-					title: "JavaScript",
-					value: false,
-				},
-			],
-		});
-		isTypeScript = response.isTypeScript;
-	} else if (language === "typescript" || language === "ts") {
-		isTypeScript = true;
-	} else {
-		isTypeScript = false;
-	}
+	const isTypeScript = fs.existsSync(path.join(process.cwd(), "tsconfig.json"));
+	const tagName = hyphaneteComponentName(componentName);
 
 	generateFiles(componentName, tagName, library, packageName, isTypeScript);
 };

packages/create-package/template/test/pages/index.html

@@ -62,10 +62,6 @@ class ${componentName} extends UI5Element {
 	static get dependencies() {
 		return [];
 	}
-
-	static async onDefine() {
-
-	}
 }
 
 ${componentName}.define();

packages/theming/css-vars-usage.json

@@ -69,10 +69,6 @@ class ${componentName} extends UI5Element {
 	 */
 	@slot({ type: Node, "default": true })
 	text!: Array<Node>;
-
-	static async onDefine() {
-
-	}
 }
 
 ${componentName}.define();

packages/tools/lib/create-new-component/index.js

@@ -61,8 +61,8 @@ if (process.argv.length > 3) {
 let wdioConfig = "";
 if (fs.existsSync("config/wdio.conf.cjs")) {
     wdioConfig = "config/wdio.conf.cjs";
-} else {
-    fs.existsSync("config/wdio.conf.js")
+} else if (fs.existsSync("config/wdio.conf.js")) {
+    wdioConfig = "config/wdio.conf.js";
 }
 
 // run wdio with calculated parameters

packages/tools/lib/create-new-component/jsFileContentTemplate.js

@@ -57,6 +57,7 @@
     "postcss-cli": "^9.1.0",
     "postcss-import": "^14.0.2",
     "postcss-selector-parser": "^6.0.10",
+    "prompts": "^2.4.2",
     "properties-reader": "^2.2.0",
     "recursive-readdir": "^2.2.2",
     "resolve": "^1.20.0",

packages/tools/lib/create-new-component/tsFileContentTemplate.js

@@ -11878,7 +11878,7 @@ promise-retry@^2.0.1:
     err-code "^2.0.2"
     retry "^0.12.0"
 
-prompts@^2.4.0, prompts@^2.4.1:
+prompts@^2.4.0, prompts@^2.4.1, prompts@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.4.2.tgz#7b57e73b3a48029ad10ebd44f74b01722a4cb069"
   integrity sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==