Merge branch 'main' into temp/16668

.storybook/main.ts

@@ -1,12 +1,13 @@
+import { dirname, join } from 'path';
 import { StorybookConfig } from '@storybook/web-components-vite';
 import remarkGfm from 'remark-gfm';
 
 const config: StorybookConfig = {
 	stories: ['../@(src|libs|apps|storybook)/**/*.mdx', '../@(src|libs|apps|storybook)/**/*.stories.@(js|jsx|ts|tsx)'],
 	addons: [
-		'@storybook/addon-links',
-		'@storybook/addon-essentials',
-		'@storybook/addon-a11y',
+		getAbsolutePath('@storybook/addon-links'),
+		getAbsolutePath('@storybook/addon-essentials'),
+		getAbsolutePath('@storybook/addon-a11y'),
 		{
 			name: '@storybook/addon-docs',
 			options: {
@@ -19,12 +20,13 @@ const config: StorybookConfig = {
 		},
 	],
 	framework: {
-		name: '@storybook/web-components-vite',
+		name: getAbsolutePath('@storybook/web-components-vite'),
 		options: {},
 	},
 	staticDirs: [
 		'../public-assets',
 		'../public',
+		'../src/assets',
 		{
 			from: '../src/packages/core/icon-registry/icons',
 			to: 'assets/icons',
@@ -33,9 +35,7 @@ const config: StorybookConfig = {
 	typescript: {
 		check: true,
 	},
-	docs: {
-		autodocs: true,
-	},
+	docs: {},
 	managerHead(head, { configType }) {
 		const base = process.env.VITE_BASE_PATH || '/';
 		const injections = [
@@ -51,3 +51,7 @@ const config: StorybookConfig = {
 	},
 };
 export default config;
+
+function getAbsolutePath(value: string): any {
+	return dirname(require.resolve(join(value, 'package.json')));
+}

.storybook/manager.ts

@@ -1,4 +1,4 @@
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/manager-api';
 
 addons.setConfig({
 	enableShortcuts: false,

.storybook/preview.js

@@ -88,6 +88,12 @@ const documentTreeStoreProvider = (story) => html`
 export const decorators = [documentStoreProvider, documentTreeStoreProvider, dataTypeStoreProvider, storybookProvider];
 
 export const parameters = {
+	docs: {
+		source: {
+			excludeDecorators: true,
+			format: 'html', // see storybook docs for more info on this format https://storybook.js.org/docs/api/doc-blocks/doc-block-source#format
+		},
+	},
 	options: {
 		storySort: {
 			method: 'alphabetical',
@@ -116,7 +122,6 @@ export const parameters = {
 			],
 		},
 	},
-	actions: { argTypesRegex: '^on.*' },
 	controls: {
 		expanded: true,
 		matchers: {
@@ -140,3 +145,4 @@ export const parameters = {
 };
 
 setCustomElements(customElementManifests);
+export const tags = ['autodocs'];

.vscode/lit.code-snippets

@@ -1,30 +1,30 @@
 {
-	"Create Lit Component": {
-		"prefix": "lit new",
+	"UmbNewLitElement": {
+		"prefix": "new umb element",
 		"scope": "typescript",
 		"body": [
-			"import { UmbTextStyles } from '@umbraco-ui/backoffice/style';",
-			"import { css, html } from 'lit';",
-			"import { customElement } from 'lit/decorators.js';",
+			"import { css, customElement, html } from '@umbraco-cms/backoffice/external/lit';",
 			"import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';",
+			"import { UmbTextStyles } from '@umbraco-cms/backoffice/style';",
 			"",
 			"@customElement('umb-${TM_FILENAME_BASE/(.*)\\..+$/$1/}')",
-			"export class Umb${TM_FILENAME_BASE/(.*)\\..+$/${1:/pascalcase}/}Element extends UmbLitElement {",
-			"\trender() {",
-			"\t\treturn html`${0:umb-${TM_FILENAME_BASE/(.*)\\..+$/$1/}}`;",
+			"export class Umb${TM_FILENAME_BASE/(.*)$/${1:/pascalcase}/}Element extends UmbLitElement {",
+			"\toverride render() {",
+			"\t\treturn html`$0`;",
 			"\t}",
 			"",
-			"\tstatic styles = [UmbTextStyles, css``];",
+			"\tstatic override readonly styles = [UmbTextStyles, css``];",
 			"}",
 			"",
-			"export default Umb${TM_FILENAME_BASE/(.*)\\..+$/${1:/pascalcase}/}Element",
+			"export { Umb${TM_FILENAME_BASE/(.*)$/${1:/pascalcase}/}Element as element };",
 			"",
 			"declare global {",
 			"\tinterface HTMLElementTagNameMap {",
-			"\t\t'umb-${TM_FILENAME_BASE/(.*)\\..+$/$1/}': Umb${TM_FILENAME_BASE/(.*)\\..+$/${1:/pascalcase}/}Element;",
+			"\t\t'umb-${TM_FILENAME_BASE/(.*)\\..+$/$1/}': Umb${TM_FILENAME_BASE/(.*)$/${1:/pascalcase}/}Element;",
 			"\t}",
-			"}"
+			"}",
+			"",
 		],
-		"description": "Create a new Lit Component"
-	}
+		"description": "Create a new Umbraco Lit element",
+	},
 }

devops/build/global-types.js

@@ -0,0 +1,25 @@
+import { createImportMap } from '../importmap/index.js';
+import { writeFileWithDir } from '../utils/index.js';
+
+const tsPath = './dist-cms/packages/extension-types/index.d.ts';
+
+const importmap = createImportMap({
+	rootDir: './src',
+	replaceModuleExtensions: true,
+});
+
+const paths = Object.keys(importmap.imports);
+
+const content = `
+${paths.map((path) => `import '${path}';`).join('\n')}
+`;
+
+writeFileWithDir(tsPath, content, (err) => {
+	if (err) {
+		// eslint-disable-next-line no-undef
+		console.log(err);
+	}
+
+	// eslint-disable-next-line no-undef
+	console.log(`global-types file generated`);
+});

devops/importmap/index.js

@@ -8,14 +8,14 @@ export const createImportMap = (args) => {
 	// Iterate over the exports in package.json
 	for (const [key, value] of Object.entries(packageJsonExports || {})) {
 		// remove leading ./
-		if (value) {
+		if (value && value.endsWith('.js')) {
 			const moduleName = key.replace(/^\.\//, '');
 
 			// replace ./dist-cms with src and remove /index.js
 			let modulePath = value;
 			if (typeof args.rootDir !== 'undefined') modulePath = modulePath.replace(/^\.\/dist-cms/, args.rootDir);
 			if (args.replaceModuleExtensions) modulePath = modulePath.replace('.js', '.ts');
-			console.log('replacing', value, 'with', modulePath)
+			console.log('replacing', value, 'with', modulePath);
 			const importAlias = `${packageJsonName}/${moduleName}`;
 
 			imports[importAlias] = modulePath;

devops/utils/index.js

@@ -0,0 +1,13 @@
+import { writeFile, mkdir } from 'fs';
+import * as pathModule from 'path';
+
+const path = pathModule.default;
+const getDirName = path.dirname;
+
+export const writeFileWithDir = (path, contents, cb) => {
+	mkdir(getDirName(path), { recursive: true }, function (err) {
+		if (err) return cb(err);
+
+		writeFile(path, contents, cb);
+	});
+};

examples/manifest-picker/manifest-picker-dashboard.ts

@@ -1,11 +1,13 @@
 import { css, html, customElement, state, when, nothing } from '@umbraco-cms/backoffice/external/lit';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
-import { UmbInputManifestElement } from '@umbraco-cms/backoffice/components';
+import type { UmbInputManifestElement } from '@umbraco-cms/backoffice/components';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import { UUISelectEvent } from '@umbraco-cms/backoffice/external/uui';
+import type { UUISelectEvent } from '@umbraco-cms/backoffice/external/uui';
 
+// eslint-disable-next-line local-rules/enforce-umb-prefix-on-element-name
 @customElement('example-manifest-picker-dashboard')
+// eslint-disable-next-line local-rules/enforce-element-suffix-on-element-class-name, local-rules/umb-class-prefix
 export class ExampleManifestPickerDashboard extends UmbLitElement {
 	#options: Array<Option> = [];
 

examples/workspace-context-counter/index.ts

@@ -1,3 +1,5 @@
+import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace';
+
 export const manifests: Array<UmbExtensionManifest> = [
 	{
 		type: 'workspaceContext',
@@ -6,7 +8,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		api: () => import('./counter-workspace-context.js'),
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: 'Umb.Workspace.Document',
 			},
 		],
@@ -25,7 +27,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: 'Umb.Workspace.Document',
 			},
 		],
@@ -43,7 +45,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: 'Umb.Workspace.Document',
 			},
 		],