add plop to generate property editor ui files

src/Umbraco.Web.UI.Client/devops/plop/plop.mjs

@@ -0,0 +1,64 @@
+import lodash from 'lodash';
+const { kebabCase, camelCase, startCase } = lodash;
+const pascalCase = (str) => startCase(str).replace(/ /g, '');
+
+const tagNamePrefix = 'umb-';
+const classNamePrefix = 'Umb';
+
+const extensions = [
+	{
+		type: 'propertyEditorUI',
+		path: '../../src/backoffice/property-editor-uis',
+		templatePath: './templates/property-editor-ui',
+	},
+];
+
+export default function (plop) {
+	plop.setHelper('className', (type, name) => classNamePrefix + pascalCase(type) + pascalCase(name) + 'Element');
+	plop.setHelper('displayName', (name) => startCase(camelCase(name)));
+	plop.setHelper('extensionPath', (type, name) => extensions.find((e) => e.type === type).path + '/' + name);
+	plop.setHelper('extensionTemplatePath', (type) => extensions.find((e) => e.type === type).templatePath);
+	plop.setHelper('extensionFilename', (type, name) => kebabCase(type) + '-' + kebabCase(name));
+	plop.setHelper('extensionTagName', (type, name) => tagNamePrefix + kebabCase(type) + '-' + kebabCase(name));
+
+	plop.setGenerator('component', {
+		description: 'application controller logic',
+		prompts: [
+			{
+				type: 'list',
+				name: 'extensionType',
+				message: 'Select extension type',
+				choices: extensions.map((e) => e.type),
+			},
+			{
+				type: 'input',
+				name: 'name',
+				message: 'Enter extension name (i.e. color-picker)',
+				validate: (answer) => {
+					if (answer.length < 1) {
+						return 'Please enter a name for the extension';
+					} else return true;
+				},
+				// Convert the input into kebab case if not provided as such and strip prefix
+				filter: (response) => kebabCase(response.replace(/^umb-/, '')),
+			},
+		],
+		actions: [
+			{
+				type: 'add',
+				path: '{{ extensionPath extensionType name }}/{{extensionFilename extensionType name }}.element.ts',
+				templateFile: '{{extensionTemplatePath extensionType}}/element.ts.hbs',
+			},
+			{
+				type: 'add',
+				path: '{{ extensionPath extensionType name }}/{{ extensionFilename extensionType name }}.test.ts',
+				templateFile: '{{extensionTemplatePath extensionType}}/test.ts.hbs',
+			},
+			{
+				type: 'add',
+				path: '{{ extensionPath extensionType name }}/{{ extensionFilename extensionType name }}.stories.ts',
+				templateFile: '{{extensionTemplatePath extensionType}}/stories.ts.hbs',
+			},
+		],
+	});
+}

src/Umbraco.Web.UI.Client/devops/plop/templates/property-editor-ui/element.ts.hbs

@@ -0,0 +1,29 @@
+import { html, LitElement } from 'lit';
+import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { customElement, property } from 'lit/decorators.js';
+
+/**
+ * @element {{ extensionTagName extensionType name }}
+ */
+@customElement('{{ extensionTagName extensionType name }}')
+export class {{className extensionType name }} extends LitElement {
+	static styles = [UUITextStyles];
+
+	@property()
+	value = '';
+
+	@property({ type: Array, attribute: false })
+	public config = [];
+
+	render() {
+		return html`<div>{{ extensionTagName extensionType name }}</div>`;
+	}
+}
+
+export default {{className extensionType name}};
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'{{extensionTagName extensionType name }}': {{className extensionType name}};
+	}
+}

src/Umbraco.Web.UI.Client/devops/plop/templates/property-editor-ui/stories.ts.hbs

@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/web-components';
+import { html } from 'lit-html';
+
+import type { {{className extensionType name}} } from './{{ extensionFilename extensionType name }}.element';
+import './{{ extensionFilename extensionType name }}.element';
+
+export default {
+	title: 'Property Editor UIs/{{ displayName name }}',
+	component: '{{ extensionTagName extensionType name }}',
+	id: '{{extensionTagName extensionType name }}',
+} as Meta;
+
+export const AAAOverview: Story<{{className extensionType name}}> = () =>
+	html`<{{ extensionTagName extensionType name }}></{{ extensionTagName extensionType name }}>`;
+AAAOverview.storyName = 'Overview';

src/Umbraco.Web.UI.Client/devops/plop/templates/property-editor-ui/test.ts.hbs

@@ -0,0 +1,21 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import { defaultA11yConfig } from '../../../core/helpers/chai';
+import { {{ className extensionType name }} } from './{{ extensionTagName extensionType name }}.element';
+
+describe('{{className extensionType name}}', () => {
+  let element: {{className extensionType name}};
+
+  beforeEach(async () => {
+    element = await fixture(
+      html` <{{ extensionTagName extensionType name }}></{{ extensionTagName extensionType name }}> `
+    );
+  });
+
+  it('is defined with its own instance', () => {
+    expect(element).to.be.instanceOf({{ className extensionType name }});
+  });
+
+  it('passes the a11y audit', async () => {
+    await expect(element).shadowDom.to.be.accessible(defaultA11yConfig);
+  });
+});