Merge branch 'main' into poc/package-modules-v2

src/Umbraco.Web.UI.Client/.github/workflows/azure-static-web-apps-ambitious-stone-0033b3603.yml

@@ -4,17 +4,23 @@ on:
   push:
     branches:
       - main
-  # pull_request:
-  #   types: [opened, synchronize, reopened, closed]
-  #   branches:
-  #     - main
+  pull_request:
+    types: [opened, synchronize, reopened, closed]
+    branches:
+      - main
+  workflow_dispatch:
+    inputs:
+      issue_number:
+        type: number
+        description: 'Issue/PR Number to comment on'
+        required: false
 
 env:
   NODE_OPTIONS: --max_old_space_size=16384
 
 jobs:
   build_and_deploy_job:
-    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
+    if: github.event_name != 'pull_request' || (github.event_name == 'pull_request' && github.event.action != 'closed' && contains(github.event.pull_request.labels.*.name, 'storybook'))
     runs-on: ubuntu-latest
     name: Build and Deploy Job
     steps:
@@ -27,17 +33,39 @@ jobs:
         with:
           azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_AMBITIOUS_STONE_0033B3603 }}
           repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
-          action: "upload"
+          action: 'upload'
           ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
           # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
-          app_location: "/" # App source code path
-          app_build_command: "npm run build-storybook"
-          api_location: "" # Api source code path - optional
-          output_location: "/storybook-static" # Built app content directory - optional
+          app_location: '/' # App source code path
+          app_build_command: 'npm run build-storybook'
+          api_location: '' # Api source code path - optional
+          output_location: '/storybook-static' # Built app content directory - optional
           ###### End of Repository/Build Configurations ######
+      - name: Comment on PR
+        # azure/static-web-apps-deploy doesn't support workflow_dispatch, so we need to manually comment on the PR
+        if: github.event_name == 'workflow_dispatch' && inputs.issue_number != null
+        uses: actions/github-script@v6
+        env:
+          ISSUE_NUMBER: ${{ inputs.issue_number }}
+          SITE_URL: ${{ steps.builddeploy.outputs.static_web_app_url }}
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            github.rest.issues.addLabels({
+              issue_number: process.env.ISSUE_NUMBER,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              labels: ['storybook']
+            })
+            github.rest.issues.createComment({
+              issue_number: process.env.ISSUE_NUMBER,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              body: `Storybook is available at: ${process.env.SITE_URL}`
+            })
 
   close_pull_request_job:
-    if: github.event_name == 'pull_request' && github.event.action == 'closed'
+    if: github.event_name == 'pull_request' && github.event.action == 'closed' && contains(github.event.pull_request.labels.*.name, 'storybook')
     runs-on: ubuntu-latest
     name: Close Pull Request Job
     steps:
@@ -45,5 +73,6 @@ jobs:
         id: closepullrequest
         uses: Azure/static-web-apps-deploy@v1
         with:
+          app_location: '/'
           azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_AMBITIOUS_STONE_0033B3603 }}
-          action: "close"
+          action: 'close'

src/Umbraco.Web.UI.Client/.github/workflows/azure-static-web-apps-ashy-bay-09f36a803.yml

@@ -27,12 +27,12 @@ jobs:
         with:
           azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_ASHY_BAY_09F36A803 }}
           repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
-          action: "upload"
+          action: 'upload'
           ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
           # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
-          app_location: "/" # App source code path
-          api_location: "api" # Api source code path - optional
-          output_location: "dist" # Built app content directory - optional
+          app_location: '/' # App source code path
+          api_location: 'api' # Api source code path - optional
+          output_location: 'dist' # Built app content directory - optional
           ###### End of Repository/Build Configurations ######
 
   close_pull_request_job:
@@ -44,5 +44,6 @@ jobs:
         id: closepullrequest
         uses: Azure/static-web-apps-deploy@v1
         with:
+          app_location: '/'
           azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_ASHY_BAY_09F36A803 }}
-          action: "close"
+          action: 'close'

src/Umbraco.Web.UI.Client/.storybook/main.ts

@@ -1,8 +1,23 @@
 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'],
+	addons: [
+		'@storybook/addon-links',
+		'@storybook/addon-essentials',
+		'@storybook/addon-a11y',
+		{
+			name: '@storybook/addon-docs',
+			options: {
+				mdxPluginOptions: {
+					mdxCompileOptions: {
+						remarkPlugins: [remarkGfm],
+					},
+				},
+			},
+		},
+	],
 	framework: {
 		name: '@storybook/web-components-vite',
 		options: {},

src/Umbraco.Web.UI.Client/devops/icons/index.js

@@ -6,7 +6,7 @@ const path = pathModule.default;
 const getDirName = path.dirname;
 const glob = globModule.default;
 
-const moduleDirectory = 'libs/store/icon/';
+const moduleDirectory = 'src/core/icon-registry/';
 const iconsSVGDirectory = `${moduleDirectory}svgs/`;
 const iconsOutputDirectory = `public-assets/icons/`;
 

src/Umbraco.Web.UI.Client/package.json

@@ -63,8 +63,8 @@
 	},
 	"dependencies": {
 		"@openid/appauth": "^1.3.1",
-		"@umbraco-ui/uui": "^1.2.1",
-		"@umbraco-ui/uui-css": "^1.2.1",
+		"@umbraco-ui/uui": "1.3.0-rc.0",
+		"@umbraco-ui/uui-css": "1.3.0-rc.0",
 		"element-internals-polyfill": "^1.1.19",
 		"lit": "^2.7.0",
 		"lodash-es": "4.17.21",
@@ -80,13 +80,13 @@
 		"@playwright/test": "^1.30.0",
 		"@rollup/plugin-json": "^6.0.0",
 		"@rollup/plugin-node-resolve": "^15.0.1",
-		"@storybook/addon-a11y": "^7.0.2",
-		"@storybook/addon-actions": "^7.0.2",
-		"@storybook/addon-essentials": "^7.0.2",
-		"@storybook/addon-links": "^7.0.2",
-		"@storybook/mdx2-csf": "^1.0.0",
-		"@storybook/web-components": "^7.0.2",
-		"@storybook/web-components-vite": "^7.0.2",
+		"@storybook/addon-a11y": "^7.0.11",
+		"@storybook/addon-actions": "^7.0.11",
+		"@storybook/addon-essentials": "^7.0.11",
+		"@storybook/addon-links": "^7.0.11",
+		"@storybook/mdx2-csf": "^1.1.0",
+		"@storybook/web-components": "^7.0.11",
+		"@storybook/web-components-vite": "^7.0.11",
 		"@types/chai": "^4.3.4",
 		"@types/lodash-es": "^4.17.6",
 		"@types/mocha": "^10.0.0",
@@ -106,7 +106,7 @@
 		"eslint-plugin-lit": "^1.8.2",
 		"eslint-plugin-lit-a11y": "^2.3.0",
 		"eslint-plugin-local-rules": "^1.3.2",
-		"eslint-plugin-storybook": "^0.6.11",
+		"eslint-plugin-storybook": "^0.6.12",
 		"eslint-plugin-wc": "^1.4.0",
 		"msw": "^1.1.0",
 		"msw-storybook-addon": "^1.8.0",
@@ -116,11 +116,12 @@
 		"prettier": "2.8.4",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
+		"remark-gfm": "^3.0.1",
 		"rollup": "^3.21.2",
 		"rollup-plugin-dts": "^5.2.0",
 		"rollup-plugin-esbuild": "^5.0.0",
 		"rollup-plugin-url": "^3.0.1",
-		"storybook": "^7.0.2",
+		"storybook": "^7.0.11",
 		"tiny-glob": "^0.2.9",
 		"typescript": "^5.0.3",
 		"typescript-json-schema": "^0.55.0",

src/Umbraco.Web.UI.Client/src/app/app.element.ts

@@ -8,7 +8,7 @@ import { UUIIconRegistryEssential } from '@umbraco-ui/uui';
 import { css, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import { UmbIconStore } from '../core/stores/icon/icon.store';
+import { UmbIconRegistry } from '../core/icon-registry/icon.registry';
 import type { UmbAppErrorElement } from './app-error.element';
 import { UmbAuthFlow } from './auth/auth-flow';
 import { UMB_APP, UmbAppContext } from './app.context';
@@ -65,7 +65,7 @@ export class UmbAppElement extends UmbLitElement {
 	];
 
 	#authFlow?: UmbAuthFlow;
-	#umbIconRegistry = new UmbIconStore();
+	#umbIconRegistry = new UmbIconRegistry();
 	#uuiIconRegistry = new UUIIconRegistryEssential();
 	#runtimeLevel = RuntimeLevelModel.UNKNOWN;
 

src/Umbraco.Web.UI.Client/src/backoffice/core/components/input-upload-field/input-upload-field-file.element.ts

@@ -0,0 +1,61 @@
+import { css, html, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { until } from 'lit/directives/until.js';
+import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+
+type FileItem = {
+	name: string;
+	src: string;
+};
+
+@customElement('umb-input-upload-field-file')
+export class UmbInputUploadFieldFileElement extends UmbLitElement {
+	/**
+	 * @description The file to be rendered.
+	 * @type {File}
+	 * @required
+	 */
+	@property({ type: File, attribute: false })
+	set file(value: File) {
+		this.#fileItem = new Promise((resolve) => {
+			/**
+			 * If the mimetype of the file is an image, we want to render a thumbnail of the image.
+			 */
+			if (value.type && /image\/.*/.test(value.type)) {
+				const reader = new FileReader();
+
+				reader.readAsDataURL(value);
+
+				reader.onload = (event) => {
+					resolve({
+						name: value.name,
+						src: event.target?.result as string,
+					});
+				};
+			} else {
+				resolve({
+					name: value.name,
+					src: '',
+				});
+			}
+		});
+	}
+
+	#fileItem!: Promise<FileItem>;
+
+	render = () => until(this.#renderFileItem(), html`<uui-loader></uui-loader>`);
+
+	async #renderFileItem() {
+		const fileItem = await this.#fileItem;
+		return html`<uui-symbol-file-thumbnail
+			src=${fileItem.src}
+			title=${fileItem.name}
+			alt=${fileItem.name}></uui-symbol-file-thumbnail>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-input-upload-field-file': UmbInputUploadFieldFileElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/backoffice/core/components/input-upload-field/input-upload-field.element.ts

@@ -3,14 +3,14 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { UUIFileDropzoneElement } from '@umbraco-ui/uui';
+import { map } from 'lit/directives/map.js';
+import type { UUIFileDropzoneElement, UUIFileDropzoneEvent } from '@umbraco-ui/uui';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
-import { UmbNotificationContext, UMB_NOTIFICATION_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/notification';
+
+import './input-upload-field-file.element';
 
 @customElement('umb-input-upload-field')
 export class UmbInputUploadFieldElement extends FormControlMixin(UmbLitElement) {
-	
-
 	private _keys: Array<string> = [];
 	/**
 	 * @description Keys to the files that belong to this upload field.
@@ -46,28 +46,16 @@ export class UmbInputUploadFieldElement extends FormControlMixin(UmbLitElement)
 	@state()
 	_currentFiles: File[] = [];
 
-	@state()
-	_currentFilesTemp?: File[];
-
 	@state()
 	extensions?: string[];
 
 	@query('#dropzone')
 	private _dropzone?: UUIFileDropzoneElement;
 
-	private _notificationContext?: UmbNotificationContext;
-
 	protected getFormElement() {
 		return undefined;
 	}
 
-	constructor() {
-		super();
-		this.consumeContext(UMB_NOTIFICATION_CONTEXT_TOKEN, (instance) => {
-			this._notificationContext = instance;
-		});
-	}
-
 	connectedCallback(): void {
 		super.connectedCallback();
 		this.#setExtensions();
@@ -81,40 +69,22 @@ export class UmbInputUploadFieldElement extends FormControlMixin(UmbLitElement)
 		});
 	}
 
-	#onUpload(e: CustomEvent) {
-		// UUIFileDropzoneEvent doesnt exist?
+	#onUpload(e: UUIFileDropzoneEvent) {
+		const files: File[] = e.detail.files;
 
-		this._currentFilesTemp = e.detail.files;
+		if (!files?.length) return;
 
-		if (!this.fileExtensions?.length && this._currentFilesTemp?.length) {
-			this.#setFiles(this._currentFilesTemp);
-			return;
-		}
-		const validated = this.#validateExtensions();
-		this.#setFiles(validated);
+		// TODO: Should we validate the mimetype some how?
+		this.#setFiles(files);
 	}
 
-	#validateExtensions(): File[] {
-		// TODO: Should property editor be able to handle allowed extensions like image/* ?
-
-		const filesValidated: File[] = [];
-		this._currentFilesTemp?.forEach((temp) => {
-			const type = temp.type.slice(temp.type.lastIndexOf('/') + 1);
-			if (this.fileExtensions?.find((x) => x === type)) filesValidated.push(temp);
-			else
-				this._notificationContext?.peek('danger', {
-					data: { headline: 'File upload', message: `Chosen file type "${type}" is not allowed` },
-				});
-		});
-
-		return filesValidated;
-	}
 	#setFiles(files: File[]) {
 		this._currentFiles = [...this._currentFiles, ...files];
 
 		//TODO: set keys when possible, not names
 		this.keys = this._currentFiles.map((file) => file.name);
-		this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
+		this.dispatchEvent(new CustomEvent('change', { bubbles: true }));
+		this.value = this.keys.join(',');
 	}
 
 	#handleBrowse() {
@@ -132,7 +102,7 @@ export class UmbInputUploadFieldElement extends FormControlMixin(UmbLitElement)
 			<uui-file-dropzone
 				id="dropzone"
 				label="dropzone"
-				@file-change="${this.#onUpload}"
+				@change="${this.#onUpload}"
 				accept="${ifDefined(this.extensions?.join(', '))}"
 				?multiple="${this.multiple}">
 				<uui-button label="upload" @click="${this.#handleBrowse}">Upload file here</uui-button>
@@ -141,14 +111,13 @@ export class UmbInputUploadFieldElement extends FormControlMixin(UmbLitElement)
 	}
 
 	#renderFiles() {
-		if (!this._currentFiles?.length) return nothing;
+		if (!this._currentFiles.length) return nothing;
 		return html` <div id="wrapper">
-				${this._currentFiles.map((file) => {
-					return html` <uui-symbol-file-thumbnail src="${ifDefined(file.name)}" alt="${ifDefined(file.name)}">
-					</uui-symbol-file-thumbnail>`;
+				${map(this._currentFiles, (file) => {
+					return html`<umb-input-upload-field-file .file=${file}></umb-input-upload-field-file>`;
 				})}
 			</div>
-			<uui-button compact @click="${this.#handleRemove}" label="Remove files">
+			<uui-button compact @click=${this.#handleRemove} label="Remove files">
 				<uui-icon name="umb:trash"></uui-icon> Remove file(s)
 			</uui-button>`;
 	}
@@ -157,7 +126,7 @@ export class UmbInputUploadFieldElement extends FormControlMixin(UmbLitElement)
 		// Remove via endpoint?
 		this._currentFiles = [];
 	}
-	
+
 	static styles = [
 		UUITextStyles,
 		css`
@@ -166,16 +135,21 @@ export class UmbInputUploadFieldElement extends FormControlMixin(UmbLitElement)
 				margin-right: var(--uui-size-space-4);
 			}
 
-			uui-symbol-file-thumbnail {
+			umb-input-upload-field-file {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				width: 200px;
+				height: 200px;
 				box-sizing: border-box;
-				min-height: 150px;
 				padding: var(--uui-size-space-4);
 				border: 1px solid var(--uui-color-border);
 			}
 
 			#wrapper {
 				display: grid;
-				grid-template-columns: repeat(auto-fit, minmax(300px, auto));
+				grid-template-columns: repeat(auto-fit, 200px);
+				gap: var(--uui-size-space-4);
 			}
 		`,
 	];

src/Umbraco.Web.UI.Client/src/core/icon-registry/icon.registry.ts

@@ -1,5 +1,5 @@
 import { UUIIconRegistry } from '@umbraco-ui/uui-icon-registry';
-import icons from '../../../../public-assets/icons/icons.json';
+import icons from '../../../public-assets/icons/icons.json';
 
 interface UmbIconDescriptor {
 	name: string;
@@ -8,11 +8,11 @@ interface UmbIconDescriptor {
 
 /**
  * @export
- * @class UmbIconStore
+ * @class UmbIconRegistry
  * @extends {UUIIconRegistry}
- * @description - Icon Store. Provides icons from the icon manifest. Icons are loaded on demand. All icons are prefixed with 'umb:'
+ * @description - Icon Registry. Provides icons from the icon manifest. Icons are loaded on demand. All icons are prefixed with 'umb:'
  */
-export class UmbIconStore extends UUIIconRegistry {
+export class UmbIconRegistry extends UUIIconRegistry {
 	/**
 	 * @param {string} iconName
 	 * @return {*}  {boolean}

src/Umbraco.Web.UI.Client/src/core/icon-registry/icon.stories.ts

@@ -1,7 +1,7 @@
 import { Meta, Story } from '@storybook/web-components';
 import { html } from 'lit';
 import { repeat } from 'lit/directives/repeat.js';
-import icons from '../../../../public-assets/icons/icons.json';
+import icons from '../../../public-assets/icons/icons.json';
 
 export default {
 	title: 'API/Icons',