diff --git a/src/Umbraco.Web.UI.Client/src/core/context/context.stories.mdx b/src/Umbraco.Web.UI.Client/src/core/context/context.stories.mdx deleted file mode 100644 index 67e876a0c8..0000000000 --- a/src/Umbraco.Web.UI.Client/src/core/context/context.stories.mdx +++ /dev/null @@ -1,131 +0,0 @@ - -# Context API - -In order to provide contextual shared logic or data we have established a system called Context API. - -This system is based on the **Provider Pattern**, This is an event-based protocol that components can use to retrieve data from any location in the DOM. - -This consists of a provider and a requester: - -**Context Consumer** -* A component requsting an API fires a ```umb:context-request``` event. -* The event carries a context value that denotes the data requested and a callback which will receive the data. -* Providers can attach event listeners for ```umb:context-request``` events to handle them and provide the requested data. -* Once a provider satisfies a request it calls stopPropagation() on the event. - -**Context Provider** -* New providers fires a ```umb:context-provide``` event. -* Components can attach event listerners for ```umb:context-provide``` events to handle them and request a new context. -* If the new provider is within the components dom tree a context request will be handled as above. - -## Usage - -### Provide context - -For other components to consume a context we need to provide it from a parent component. The ContextProviderMixin is a helper to provide context from an element. - -```ts -import { html, LitElement } from 'lit'; -import { UmbContextProviderMixin } from './context'; -import { UmbNotificationService } from './notification'; - -class UmbAppElement extends UmbContextProviderMixin(LitElement) { - constructor () { - super(); - this.provideContext('umbNotificationService', new UmbNotificationService()); - } -} -``` - -### Request context - -Contexts shared through the Context API are async. To request a new context send a context request using the ```consumeContext``` method from the ```UMBContextConsumerMixin```. -When a context is resolved the callback given to the method is called with the context. -Until a requested context is resolved you should make sure to disable or query any functionality using that context. - -```ts -import { html, LitElement } from 'lit'; -import { UmbContextConsumerMixin } from './context'; -import type { UmbNotificationService } from './notification'; - -class MyElement extends UmbContextConsumerMixin(LitElement) { - - private _notificationService: UmbNotificationService; - - constructor () { - super(); - this.consumeContext('umbNotificationService', (api) => { - this._notificationService = api; - }); - } - - private _handleClick () { - const data: UmbNotificationDefaultData = { message: 'Notification message' }; - this._notificationService?.peek('positive', { data }); - } - - render() { - return html``; - } -} -``` - -## Using the context classes directly - -The following examples shows how to use the Context classes directly. - -### ContextProvider class - -This example shows how to use the ContextProvider class directly. - -```ts -import { html, LitElement } from 'lit'; -import { UmbContextProvider } from './context'; -import { UmbNotificationService } from './notification'; - -class UmbAppElement extends LitElement { - - private _notificationProvider = new UmbContextProvider(this, 'umbNotificationService', new UMBNotificationService()); - - connectedCallback(): void { - super.connectedCallback(); - this._notificationProvider.attach(); - } - - disconnectedCallback(): void { - super.disconnectedCallback(); - this._notificationProvider.detach(); - } -} -``` - -### ContextRequester class - -This example shows how to use the ContextRequester class directly. - -```ts -import { html, LitElement } from 'lit'; -import { UmbNotificationService } from './notification'; -import { UmbContextConsumer } from './context'; - -class MyElement extends LitElement { - - private _notificationService: UmbNotificationService; - - connectedCallback(): void { - super.connectedCallback(); - - new UmbContextConsumer(this, 'umbNotificationService', (_instance: UmbNotificationService) => { - this._notificationService = _instance; - }); - } - - private _handleClick () { - this._notificationService?.positive({ title: 'Notification title' }); - } - - render() { - return html``; - } -} -``` \ No newline at end of file