@ui5/create-webcomponents-package 2.15.0-rc.0 → 2.15.0-rc.3

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.15.0-rc.3](https://github.com/UI5/webcomponents/compare/v2.15.0-rc.2...v2.15.0-rc.3) (2025-10-02)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [2.15.0-rc.2](https://github.com/UI5/webcomponents/compare/v2.15.0-rc.1...v2.15.0-rc.2) (2025-09-25)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [2.15.0-rc.1](https://github.com/UI5/webcomponents/compare/v2.15.0-rc.0...v2.15.0-rc.1) (2025-09-25)
+
+
+### Bug Fixes
+
+* **create-new-package:** missing files ([#12327](https://github.com/UI5/webcomponents/issues/12327)) ([c80c4e9](https://github.com/UI5/webcomponents/commit/c80c4e96d853657e4618328c3b0fb0d1cb457e80))
+
+
+
+
+
 # [2.15.0-rc.0](https://github.com/UI5/webcomponents/compare/v2.14.0...v2.15.0-rc.0) (2025-09-11)
 
 **Note:** Version bump only for package @ui5/create-webcomponents-package

package/create-package.js

@@ -23,10 +23,11 @@ const DEST_DIR = process.cwd();
 const FILES_TO_RENAME = {
 	[path.normalize("eslintignore")]: path.normalize(".eslintignore"),
 	[path.normalize("eslintrc.cjs")]: path.normalize(".eslintrc.cjs"),
+	[path.normalize("gitignore")]: path.normalize(".gitignore"),
+	[path.normalize("npmignore")]: path.normalize(".npmignore"),
 	[path.normalize("npsrc.json")]: path.normalize(".npsrc.json"),
 	[path.normalize("npmrc")]: path.normalize(".npmrc"),
 	[path.normalize("env")]: path.normalize(".env"),
-	[path.normalize("gitignore")]: path.normalize(".gitignore"),
 	[path.normalize("tsconfig.template.json")]: path.normalize("tsconfig.json"),
 	[path.normalize("cypress/tsconfig.template.json")]: path.normalize("cypress/tsconfig.json")
 };

package/package.json

@@ -1,30 +1,28 @@
 {
   "name": "@ui5/create-webcomponents-package",
-  "version": "2.15.0-rc.0",
+  "version": "2.15.0-rc.3",
   "description": "UI5 Web Components: create package",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
   "type": "module",
-  "private": false,
   "keywords": [
     "openui5",
     "sapui5",
     "ui5"
   ],
-  "bin": {
-    "create-webcomponents-package": "create-package.js"
-  },
+  "bin": "create-package.js",
   "repository": {
     "type": "git",
     "url": "https://github.com/UI5/webcomponents.git",
     "directory": "packages/create-package"
   },
   "dependencies": {
+    "chokidar-cli": "^3.0.0",
     "mkdirp": "^1.0.4",
     "npm-config-user-agent-parser": "^1.0.0",
     "prettier": "^3.5.3",
     "prompts": "^2.4.1",
     "yargs": "^17.5.1"
   },
-  "gitHead": "033a6d621ee56640dda7dc853bfd29ac88c4ca25"
+  "gitHead": "be8dc39a71bc2df6b14528e50a243ce48c9015c5"
 }

package/template/cypress/component/MyFirstComponent.cy.tsx

@@ -0,0 +1,13 @@
+import {{INIT_PACKAGE_VAR_CLASS_NAME}} from "../../src/{{INIT_PACKAGE_VAR_CLASS_NAME}}.js";
+
+describe('{{INIT_PACKAGE_VAR_CLASS_NAME}}.cy.tsx', () => {
+  it('playground', () => {
+    cy.mount(<{{INIT_PACKAGE_VAR_CLASS_NAME}} />)
+
+    cy.get("[{{INIT_PACKAGE_VAR_TAG}}]")
+      .click();
+
+    cy.get("[{{INIT_PACKAGE_VAR_TAG}}]")
+      .should("have.prop", "count", 1)
+  })
+})

package/template/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

package/template/cypress/support/commands.ts

@@ -0,0 +1,37 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }

package/template/cypress/support/component-index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>

package/template/cypress/support/component.ts

@@ -0,0 +1,36 @@
+// ***********************************************************
+// This example support/component.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+import { mount } from '@ui5/cypress-ct-ui5-webc'
+
+// Augment the Cypress namespace to include type definitions for
+// your custom command.
+// Alternatively, can be defined in cypress/support/component.d.ts
+// with a <reference path="./component" /> at the top of your spec.
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      mount: typeof mount
+    }
+  }
+}
+
+Cypress.Commands.add('mount', mount)
+
+// Example use:
+// cy.mount(MyComponent)

package/template/cypress/tsconfig.template.json

@@ -0,0 +1,19 @@
+{
+    "include": [
+        "./**/*"
+    ],
+    "compilerOptions": {
+        "module": "NodeNext",
+        "moduleResolution": "nodenext",
+        "jsx": "react-jsx",
+        "jsxImportSource": "@ui5/webcomponents-base",
+        "types": [
+            "cypress"
+        ]
+    },
+    "references": [
+        {
+            "path": "../"
+        }
+    ]
+}

package/template/eslintignore

@@ -0,0 +1,7 @@
+# Note: Changes to this file also must be applied to the top level .eslintignore file.
+dist
+test
+src/generated
+.eslintrc.cjs
+
+{{INIT_PACKAGE_CYPRESS_ESLINT_IGNORES}}

package/template/eslintrc.cjs

@@ -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;

package/template/npmignore

@@ -0,0 +1,6 @@
+src/generated
+node_modules/
+test/
+cypress/
+.eslintrc.cjs
+.eslintignore

package/template/test/pages/css/index.css

@@ -0,0 +1,89 @@
+body {
+	color: var(--sapTextColor);
+	background-color: var(--sapBackgroundColor);
+	font-size: var(--sapFontSize);
+	font-family: var(--sapFontFamily);
+	padding: 2rem;
+}
+
+h1 {
+	font-size: var(--sapFontHeader2Size);
+	margin-bottom: 0.5rem;
+}
+
+h2 {
+	font-size: var(--sapFontHeader4Size);
+}
+
+a {
+	margin: 0.25rem;
+	padding: 0.5rem;
+}
+
+a.link {
+	color: var(--sapLinkColor);
+}
+
+a.theme-link {
+	color: var(--sapButton_Emphasized_TextColor);
+	background-color: var(--sapButton_Emphasized_Background);
+	text-decoration: none;
+	border-radius: 0.25rem;
+}
+
+a.lang-link {
+	color: var(--sapButton_Attention_TextColor);
+	background-color: var(--sapButton_Attention_Background);
+	text-decoration: none;
+	border-radius: 0.25rem;
+}
+
+.app {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.app-nav {
+	display: flex;
+	width: 100%;
+	flex-direction: row;
+	justify-content: flex-end;
+}
+
+.app-logo {
+	height: 5rem;
+	width: 5rem;
+}
+
+.app-header {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+}
+
+.app-main {
+	display: flex;
+	flex-direction: row;
+	align-items: flex-start;
+	padding-top: 2rem;
+}
+
+.app-main-demo {
+	padding: 2rem;
+	border-radius: 0.5rem;
+	box-sizing: border-box;
+	background-color: var(--sapTile_Background);
+}
+
+.app-main-settings  {
+	display: flex;
+	flex-direction: column;
+	padding: 0 2rem;
+}
+
+@media (max-width: 768px) {
+	.app-main {
+		flex-direction: column;
+	}
+}

package/template/test/pages/index.html

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<title>UI5 Web Components</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<meta charset="utf-8">
+	<link rel="stylesheet" type="text/css" href="./css/index.css">
+	<script src="%VITE_BUNDLE_PATH%" type="module"></script>
+</head>
+
+<body>
+	<div class="app">
+		<nav class="app-nav">
+			<a class="link" href="https://ui5.github.io/webcomponents/">Website</a>
+			<a class="link" href="https://ui5.github.io/webcomponents/components/">Components</a>
+			<a class="link" href="https://ui5.github.io/webcomponents/docs/development/package/">Development</a>
+		</nav>
+
+		<header class="app-header">
+			<a href="https://ui5.github.io/webcomponents/" target="_blank"><img src="./img/logo.png" class="app-logo" alt="logo"/></a>
+			<h1>UI5 Web Components</h1>
+		</header>
+		
+		<main class="app-main">
+			<div class="app-main-demo">
+				<h2>Congrats! It's your First Web Component 🎉</h2>
+				<div> <pre>&lt;{{INIT_PACKAGE_VAR_TAG}}>&lt;/{{INIT_PACKAGE_VAR_TAG}}> </pre></div>
+				<{{INIT_PACKAGE_VAR_TAG}} id="myFirstComponent"></{{INIT_PACKAGE_VAR_TAG}}>
+			</div>
+
+			<div class="app-main-settings">
+				<h3>Switch theme</h3>
+				<div style="display: grid; grid-template-columns: 1fr 1fr;">
+					<a class="link theme-link" href="?sap-ui-theme=sap_horizon">Horizon Morning</a>
+					<a class="link theme-link" href="?sap-ui-theme=sap_horizon_dark">Horizon Evening</a>
+					<a class="link theme-link" href="?sap-ui-theme=sap_horizon_hcb">High Contrast Black</a>
+					<a class="link theme-link" href="?sap-ui-theme=sap_horizon_hcw">High Contrast White</a>
+				</div>
+			
+				<h3>Switch language</h3>
+				<div style="display: grid; grid-template-columns: 1fr 1fr;">
+					<a class="link lang-link" href="?sap-ui-language=en">English</a>
+					<a class="link lang-link" href="?sap-ui-language=de">German</a>
+					<a class="link lang-link" href="?sap-ui-language=es">Spanish</a>
+					<a class="link lang-link" href="?sap-ui-language=fr">French</a>
+				</div>
+			</div>
+		</main>
+	</div>
+</body>
+</html>