add README

src/Umbraco.Web.UI.Client/libs/README.md

@@ -0,0 +1,167 @@
+# @umbraco-cms/backoffice
+
+This package contains the types for the libraries for Umbraco 13.
+
+## Installation
+
+```bash
+npm install -D @umbraco-cms/backoffice
+```
+
+## Usage
+
+### Vanilla JavaScript
+
+Create an umbraco-package.json file in the root of your package.
+
+```json
+{
+	"name": "My.Package",
+	"version": "0.1.0",
+	"extensions": [
+		{
+			"type": "dashboard",
+			"alias": "my.custom.dashboard",
+			"name": "My Dashboard",
+			"js": "/App_Plugins/MyPackage/dashboard.js",
+			"weight": -1,
+			"meta": {
+				"label": "My Dashboard",
+				"pathname": "my-dashboard"
+			},
+			"conditions": {
+				"sections": ["Umb.Section.Content"]
+			}
+		}
+	]
+}
+```
+
+Then create a dashboard.js file the same folder.
+
+```javascript
+import { UmbElementMixin } from '@umbraco-cms/backoffice/element';
+import { UMB_NOTIFICATION_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/notification';
+
+const template = document.createElement('template');
+template.innerHTML = `
+  <style>
+    :host {
+      padding: 20px;
+      display: block;
+      box-sizing: border-box;
+    }
+  </style>
+
+  <uui-box>
+    <h1>Welcome to my dashboard</h1>
+    <p>Example of vanilla JS code</p>
+
+    <uui-button label="Click me" id="clickMe" look="secondary"></uui-button>
+  </uui-box>
+`;
+
+export default class MyDashboardElement extends UmbElementMixin(HTMLElement) {
+	/** @type {import('@umbraco-cms/backoffice/notification').UmbNotificationContext} */
+	#notificationContext;
+
+	constructor() {
+		super();
+		this.attachShadow({ mode: 'open' });
+		this.shadowRoot.appendChild(template.content.cloneNode(true));
+
+		this.shadowRoot.getElementById('clickMe').addEventListener('click', this.onClick.bind(this));
+
+		this.consumeContext(UMB_NOTIFICATION_CONTEXT_TOKEN, (_instance) => {
+			this.#notificationContext = _instance;
+		});
+	}
+
+	onClick = () => {
+		this.#notificationContext?.peek('positive', { data: { headline: 'Hello' } });
+	};
+}
+
+customElements.define('my-custom-dashboard', MyDashboardElement);
+```
+
+### TypeScript with Lit
+
+First install Lit and Vite. This command will create a new folder called "my-package". Choose "lit" and "typescript" when prompted.
+
+```bash
+npm create vite@latest my-package
+```
+
+Go to the new folder and install the backoffice package.
+
+```bash
+cd my-package
+npm install -D @umbraco-cms/backoffice
+```
+
+Then go to the element located in `src/my-element.ts` and add the following code.
+
+```typescript
+// src/my-element.ts
+import { LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { UmbElementMixin } from '@umbraco-cms/backoffice/element';
+import { UmbNotificationContext, UMB_NOTIFICATION_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/notification';
+
+@customElement('my-element')
+export default class MyElement extends UmbElementMixin(LitElement) {
+	#notificationContext?: UmbNotificationContext;
+
+	constructor() {
+		super();
+		this.consumeContext(UMB_NOTIFICATION_CONTEXT_TOKEN, (_instance) => {
+			this.#notificationContext = _instance;
+		});
+	}
+
+	onClick() {
+		this.#notificationContext?.peek('positive', { data: { message: '#h5yr' } });
+	}
+
+	render() {
+		return html`
+			<uui-box headline="Welcome">
+				<p>TS dashboard</p>
+				<uui-button look="primary" label="Click me" @click=${() => this.onClick()}></uui-button>
+			</uui-box>
+		`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'my-element': MyElement;
+	}
+}
+```
+
+Finally add an umbraco-package.json file in the root of your package.
+
+```json
+{
+	"name": "My.Package",
+	"version": "0.1.0",
+	"extensions": [
+		{
+			"type": "dashboard",
+			"alias": "my.custom.dashboard",
+			"name": "My Dashboard",
+			"js": "/App_Plugins/MyPackage/dist/my-package.js",
+			"weight": -1,
+			"meta": {
+				"label": "My Dashboard",
+				"pathname": "my-dashboard"
+			},
+			"conditions": {
+				"sections": ["Umb.Section.Content"]
+			}
+		}
+	]
+}
+```

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

@@ -2,6 +2,10 @@
 	"name": "@umbraco-cms/backoffice",
 	"version": "13.0.0-alpha.0",
 	"license": "MIT",
+	"keywords": [
+		"umbraco",
+		"backoffice"
+	],
 	"repository": {
 		"url": "https://github.com/umbraco/Umbraco.CMS.Backoffice",
 		"type": "git"
@@ -15,6 +19,9 @@
 		"url": "https://umbraco.com"
 	},
 	"type": "module",
+	"files": [
+		"*.d.ts"
+	],
 	"peerDependencies": {
 		"@types/uuid": "^9.0.1",
 		"@umbraco-ui/uui": "^1.2.0-rc.0",

src/Umbraco.Web.UI.Client/utils/move-libs.js

@@ -10,21 +10,24 @@
 // Note: This script is not used in the build process, it is only used to transform the d.ts files
 //       when the d.ts files are copied to the dist folder
 
-import { readdirSync, readFileSync, writeFileSync, cpSync, mkdirSync, lstatSync } from 'fs';
+import { readdirSync, readFileSync, writeFileSync, cpSync, mkdirSync } from 'fs';
 
 const srcDir = './libs';
 const inputDir = './dist/libs';
 const outputDir = '../Umbraco.Cms.StaticAssets/wwwroot/umbraco/backoffice/libs';
 
-// Copy package.json
+// Copy package files
 cpSync(`${srcDir}/package.json`, `${inputDir}/package.json`, { recursive: true });
+cpSync(`${srcDir}/README.md`, `${inputDir}/README.md`, { recursive: true });
 
 const libs = readdirSync(inputDir);
 
 // Create output folder
 try {
-	mkdirSync(outputDir, {recursive: true});
-} catch {}
+	mkdirSync(outputDir, { recursive: true });
+} catch {
+	// Ignore
+}
 
 // Transform all .d.ts files and copy all other files to the output folder
 libs.forEach(lib => {