@ui5/create-webcomponents-package 0.0.0-037d08c67

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/cypress.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  component: {
+    devServer: {
+      framework: "@ui5/cypress-ct-ui5-webc" as any,
+      bundler: "vite",
+    },
+  },
+});

package/template/env

@@ -0,0 +1 @@
+VITE_BUNDLE_PATH="../../dist/bundle.esm.js"

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/gitignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+src/generated
+.dev-server-port

package/template/npmignore

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

package/template/npmrc

@@ -0,0 +1,2 @@
+# Auto detect the chromedriver version
+detect_chromedriver_version=true

package/template/npsrc.json

@@ -0,0 +1,3 @@
+{
+	"config": "./package-scripts.cjs"
+}

package/template/package-scripts.cjs

@@ -0,0 +1,11 @@
+const getScripts = require("@ui5/webcomponents-tools/components-package/nps.js"); //eslint-disable-line
+
+const options = {
+	port: 8080,
+};
+
+const scripts = getScripts(options);
+
+module.exports = {
+	scripts,
+};

package/template/package.json

@@ -0,0 +1,35 @@
+{
+    "name": "{{INIT_PACKAGE_VAR_NAME}}",
+    "version": "0.0.1",
+    "ui5": {
+        "webComponentsPackage": true
+    },
+    "type": "module",
+    "scripts": {
+        "clean": "wc-dev clean",
+        "lint": "wc-dev lint",
+        "start": "wc-dev start",
+        "watch": "wc-dev watch",
+        "build": "wc-dev build",
+        {{INIT_PACKAGE_CYPRESS_TEST_COMMANDS}}
+        "create-ui5-element": "wc-create-ui5-element",
+        "prepublishOnly": "npm run build"
+    },
+    "exports": {
+        "./src/*": "./src/*",
+        "./dist/*": "./dist/*",
+        "./package.json": "./package.json",
+        "./bundle.js": "./bundle.js",
+        "./*": "./dist/*"
+    },
+    "dependencies": {
+        "@ui5/webcomponents-base": "{{INIT_PACKAGE_VERSION}}",
+        "@ui5/webcomponents-theming": "{{INIT_PACKAGE_VERSION}}"
+    },
+    "devDependencies": {
+        {{INIT_PACKAGE_CYPRESS_DEV_DEPS}}
+        "@ui5/webcomponents-tools": "{{INIT_PACKAGE_VERSION}}",
+        "chromedriver": "*",
+        "typescript": "^5.6.2"
+    }
+}

package/template/src/Assets.ts

@@ -0,0 +1,5 @@
+import "@ui5/webcomponents-theming/dist/Assets.js"; // Theming
+
+// own {{INIT_PACKAGE_VAR_NAME}} package assets
+import "./generated/json-imports/Themes.js";
+import "./generated/json-imports/i18n.js";

package/template/src/MyFirstComponent.ts

@@ -0,0 +1,56 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+
+// Template
+import {{INIT_PACKAGE_VAR_CLASS_NAME}}Template from "./{{INIT_PACKAGE_VAR_CLASS_NAME}}Template.js";
+
+// Styles
+import {{INIT_PACKAGE_VAR_CLASS_NAME}}Css from "./generated/themes/{{INIT_PACKAGE_VAR_CLASS_NAME}}.css.js";
+
+import { COUNT } from "./generated/i18n/i18n-defaults.js";
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * The <code>{{INIT_PACKAGE_VAR_TAG}}</code> component is a demo component that displays some text.
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+@customElement({
+	tag: "{{INIT_PACKAGE_VAR_TAG}}",
+	renderer: jsxRenderer,
+	styles: {{INIT_PACKAGE_VAR_CLASS_NAME}}Css,
+	template: {{INIT_PACKAGE_VAR_CLASS_NAME}}Template,
+})
+class {{INIT_PACKAGE_VAR_CLASS_NAME}} extends UI5Element {
+	@i18n("{{INIT_PACKAGE_VAR_NAME}}")
+	static i18nBundle: I18nBundle;
+
+	/**
+	 * Defines the component count.
+	 * @default 0
+	 * @public
+	 */
+	@property({ type: Number })
+	count = 0;
+
+	onClick() {
+		this.count++;
+	}
+
+	get counterText() {
+		return {{INIT_PACKAGE_VAR_CLASS_NAME}}.i18nBundle.getText(COUNT);
+	}
+}
+
+{{INIT_PACKAGE_VAR_CLASS_NAME}}.define();
+
+export default {{INIT_PACKAGE_VAR_CLASS_NAME}};

package/template/src/MyFirstComponentTemplate.tsx

@@ -0,0 +1,9 @@
+import type {{INIT_PACKAGE_VAR_CLASS_NAME}} from "./{{INIT_PACKAGE_VAR_CLASS_NAME}}.js";
+
+export default function {{INIT_PACKAGE_VAR_CLASS_NAME}}Template(this: {{INIT_PACKAGE_VAR_CLASS_NAME}}) {
+	return (
+		<div class="root" onClick={this.onClick}>
+			{this.counterText} :: {this.count}
+		</div>
+	);
+}

package/template/src/bundle.esm.ts

@@ -0,0 +1,30 @@
+// used in test pages
+import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
+
+import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
+import { getLanguage } from "@ui5/webcomponents-base/dist/config/Language.js";
+import { getCalendarType } from "@ui5/webcomponents-base/dist/config/CalendarType.js";
+import { getTheme, setTheme } from "@ui5/webcomponents-base/dist/config/Theme.js";
+import { getNoConflict, setNoConflict } from "@ui5/webcomponents-base/dist/config/NoConflict.js";
+import { getFirstDayOfWeek } from "@ui5/webcomponents-base/dist/config/FormatSettings.js";
+
+// Enable additional themes and i18n texts
+import "./Assets.js";
+
+// Import your web components here from the src/ directory
+import "./{{INIT_PACKAGE_VAR_CLASS_NAME}}.js";
+
+// @ts-expect-error
+window["sap-ui-webcomponents-bundle"] = {
+	renderFinished,
+	configuration: {
+		getAnimationMode,
+		getLanguage,
+		getTheme,
+		setTheme,
+		getNoConflict,
+		setNoConflict,
+		getCalendarType,
+		getFirstDayOfWeek,
+	},
+};

package/template/src/i18n/messagebundle.properties

@@ -0,0 +1,3 @@
+# the "counter" text for the sample component
+COUNT=Count
+

package/template/src/i18n/messagebundle_de.properties

@@ -0,0 +1 @@
+COUNT=Zählung

package/template/src/i18n/messagebundle_en.properties

@@ -0,0 +1 @@
+COUNT=Count

package/template/src/i18n/messagebundle_es.properties

@@ -0,0 +1 @@
+COUNT=Cuenta

package/template/src/i18n/messagebundle_fr.properties

@@ -0,0 +1 @@
+COUNT=Comte

package/template/src/themes/MyFirstComponent.css

@@ -0,0 +1,17 @@
+.root {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+	padding: 0 2rem;
+	color: var(--sapAvatar_6_TextColor);
+	background-color: var(--sapAvatar_6_Background);
+	border: 2px solid var(--my-component-border-color);
+	border-radius: 0.5rem;
+	box-shadow: var(--sapContent_Shadow0);
+	text-align: center;
+	line-height: 3rem;
+	font-size: 1.25rem;
+	user-select: none;
+	cursor: pointer;
+}

package/template/src/themes/sap_horizon/parameters-bundle.css

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

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

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

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

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

package/template/src/themes/sap_horizon_hcw/parameters-bundle.css

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

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>

package/template/tsconfig.template.json

@@ -0,0 +1,14 @@
+{
+	"extends": "@ui5/webcomponents-tools/tsconfig.json",
+	"include": [
+		"src/**/*",
+		"global.d.ts"
+	],
+	"compilerOptions": {
+		{{INIT_PACKAGE_CYPRESS_ROOT_TSCONFIG}}
+		"outDir": "dist",
+		"experimentalDecorators": true,
+		"module": "NodeNext",
+		"moduleResolution": "NodeNext"
+	},
+}

package/template/vite.config.js

@@ -0,0 +1,14 @@
+import viteConfig from "@ui5/webcomponents-tools/components-package/vite.config.js"; //eslint-disable-line
+
+// Modifying the default Vite configuration provided by the @ui5/webcomponents-tools package.
+// You can directly access and update the properties you need to change.
+// Ensure that the property exists before modifying it to avoid unintended errors.
+// For available configuration options, refer to: https://vite.dev/config/#configuring-vite
+//
+// Ensure the plugins array exists
+// viteConfig.plugins = viteConfig.plugins || [];
+//
+// Push a new fake plugin
+// viteConfig.plugins.push({ name: 'my-custom-plugin' });
+
+export default viteConfig;