yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add stories for node editor

Browse Source
This commit is contained in:
Mads Rasmussen
2022-08-08 16:26:41 +02:00
parent 161626c1ee
commit c5d6426ab4
8 changed files with 122 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/Umbraco.Web.UI.Client/src/backoffice/editors/node/editor-node.element.ts
View File

@@ -13,8 +13,8 @@ import '../shared/editor-entity/editor-entity.element';
// Lazy load
// TODO: Make this dynamic, use load-extensions method to loop over extensions for this node.
import './views/editor-view-node-edit.element';
import './views/editor-view-node-info.element';
import './views/edit/editor-view-node-edit.element';
import './views/info/editor-view-node-info.element';
@customElement('umb-editor-node')
export class UmbEditorNodeElement extends UmbContextProviderMixin(UmbContextConsumerMixin(LitElement)) {

17
src/Umbraco.Web.UI.Client/src/backoffice/editors/node/editor-node.stories.ts Normal file
View File

@@ -0,0 +1,17 @@
import { Meta, Story } from '@storybook/web-components';
import { html } from 'lit-html';
import { UmbEditorNodeElement } from './editor-node.element';
import './editor-node.element';
import { data } from '../../../mocks/data/content.data';
export default {
title: 'Editors/Node',
component: 'umb-editor-node',
id: 'umb-editor-node',
} as Meta;
export const AAAOverview: Story<UmbEditorNodeElement> = () =>
html` <umb-editor-node id="${data[0].id}"></umb-editor-node>`;
AAAOverview.storyName = 'Overview';

15
src/Umbraco.Web.UI.Client/src/backoffice/editors/node/views/editor-view-node-edit.element.ts → src/Umbraco.Web.UI.Client/src/backoffice/editors/node/views/edit/editor-view-node-edit.element.ts
View File

@@ -1,13 +1,15 @@
import { css, html, LitElement } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, state } from 'lit/decorators.js';
import { NodeProperty, NodePropertyData } from '../../../../mocks/data/content.data';
import { UmbContextConsumerMixin } from '../../../../core/context';
import { UmbNodeContext } from '../node.context';
import { NodeProperty, NodePropertyData } from '../../../../../mocks/data/content.data';
import { UmbContextConsumerMixin } from '../../../../../core/context';
import { UmbNodeContext } from '../../node.context';
import { Subscription, distinctUntilChanged } from 'rxjs';
import '../../../../components/node-property.element';
@customElement('umb-editor-view-node-edit')
export class UmbEditorViewNodeEdit extends UmbContextConsumerMixin(LitElement) {
export class UmbEditorViewNodeEditElement extends UmbContextConsumerMixin(LitElement) {
static styles = [
UUITextStyles,
css`
@@ -32,6 +34,7 @@ export class UmbEditorViewNodeEdit extends UmbContextConsumerMixin(LitElement) {
this.consumeContext('umbNodeContext', (nodeContext) => {
this._nodeContext = nodeContext;
console.log('GOT CONTEXT', nodeContext);
this._useNode();
});
}
@@ -66,10 +69,10 @@ export class UmbEditorViewNodeEdit extends UmbContextConsumerMixin(LitElement) {
}
}
export default UmbEditorViewNodeEdit;
export default UmbEditorViewNodeEditElement;
declare global {
interface HTMLElementTagNameMap {
'umb-editor-view-node-edit': UmbEditorViewNodeEdit;
'umb-editor-view-node-edit': UmbEditorViewNodeEditElement;
}
}

23
src/Umbraco.Web.UI.Client/src/backoffice/editors/node/views/edit/editor-view-node-edit.stories.ts Normal file
View File

@@ -0,0 +1,23 @@
import { Meta, Story } from '@storybook/web-components';
import { html } from 'lit-html';
import { UmbNodeContext } from '../../node.context';
import { UmbEditorViewNodeEditElement } from './editor-view-node-edit.element';
import './editor-view-node-edit.element';
import { data } from '../../../../../mocks/data/content.data';
export default {
title: 'Editors/Node/Views/Edit',
component: 'umb-editor-view-node-edit',
id: 'umb-editor-view-node-edit',
decorators: [
(story) =>
html` <umb-context-provider key="umbNodeContext" .value=${new UmbNodeContext(data[0])}>
${story()}
</umb-context-provider>`,
],
} as Meta;
export const AAAOverview: Story<UmbEditorViewNodeEditElement> = () =>
html` <umb-editor-view-node-edit></umb-editor-view-node-edit>`;
AAAOverview.storyName = 'Overview';

23
src/Umbraco.Web.UI.Client/src/backoffice/editors/node/views/editor-view-node-info.element.ts
View File

@@ -1,23 +0,0 @@
import { css, html, LitElement } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, property } from 'lit/decorators.js';
@customElement('umb-editor-view-node-info')
export class UmbEditorViewNodeInfo extends LitElement {
static styles = [UUITextStyles, css``];
@property()
node: any;
render() {
return html`<div>Info Editor View</div>`;
}
}
export default UmbEditorViewNodeInfo;
declare global {
interface HTMLElementTagNameMap {
'umb-editor-view-node-info': UmbEditorViewNodeInfo;
}
}

46
src/Umbraco.Web.UI.Client/src/backoffice/editors/node/views/info/editor-view-node-info.element.ts Normal file
View File

@@ -0,0 +1,46 @@
import { css, html, LitElement } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, state } from 'lit/decorators.js';
import { UmbContextConsumerMixin } from '../../../../../core/context';
import { UmbNodeContext } from '../../node.context';
import { Subscription, distinctUntilChanged } from 'rxjs';
@customElement('umb-editor-view-node-info')
export class UmbEditorViewNodeInfoElement extends UmbContextConsumerMixin(LitElement) {
static styles = [UUITextStyles, css``];
private _nodeContext?: UmbNodeContext;
private _nodeContextSubscription?: Subscription;
@state()
private _nodeName = '';
constructor() {
super();
this.consumeContext('umbNodeContext', (nodeContext) => {
this._nodeContext = nodeContext;
this._useNode();
});
}
private _useNode() {
this._nodeContextSubscription?.unsubscribe();
this._nodeContextSubscription = this._nodeContext?.data.pipe(distinctUntilChanged()).subscribe((node) => {
this._nodeName = node.name;
});
}
render() {
return html`<div>Info Editor View for ${this._nodeName}</div>`;
}
}
export default UmbEditorViewNodeInfoElement;
declare global {
interface HTMLElementTagNameMap {
'umb-editor-view-node-info': UmbEditorViewNodeInfoElement;
}
}

23
src/Umbraco.Web.UI.Client/src/backoffice/editors/node/views/info/editor-view-node-info.stories.ts Normal file
View File

@@ -0,0 +1,23 @@
import { Meta, Story } from '@storybook/web-components';
import { html } from 'lit-html';
import { UmbNodeContext } from '../../node.context';
import { UmbEditorViewNodeInfoElement } from './editor-view-node-info.element';
import './editor-view-node-info.element';
import { data } from '../../../../../mocks/data/content.data';
export default {
title: 'Editors/Node/Views/Info',
component: 'umb-editor-view-node-info',
id: 'umb-editor-view-node-info',
decorators: [
(story) =>
html` <umb-context-provider key="umbNodeContext" .value=${new UmbNodeContext(data[0])}>
${story()}
</umb-context-provider>`,
],
} as Meta;
export const AAAOverview: Story<UmbEditorViewNodeInfoElement> = () =>
html` <umb-editor-view-node-info></umb-editor-view-node-info>`;
AAAOverview.storyName = 'Overview';

4
src/Umbraco.Web.UI.Client/src/temp-internal-manifests.ts
View File

@@ -95,7 +95,7 @@ export const internalManifests: Array<UmbExtensionManifestCore> = [
alias: 'Umb.EditorView.ContentEdit',
name: 'Content',
elementName: 'umb-editor-view-node-edit',
js: () => import('./backoffice/editors/node/views/editor-view-node-edit.element'),
js: () => import('./backoffice/editors/node/views/edit/editor-view-node-edit.element'),
meta: {
// TODO: how do we want to filter where editor views are shown? https://our.umbraco.com/documentation/extending/Content-Apps/#setting-up-the-plugin
// this is a temp solution
@@ -110,7 +110,7 @@ export const internalManifests: Array<UmbExtensionManifestCore> = [
alias: 'Umb.EditorView.ContentInfo',
name: 'Info',
elementName: 'umb-editor-view-node-info',
js: () => import('./backoffice/editors/node/views/editor-view-node-info.element'),
js: () => import('./backoffice/editors/node/views/info/editor-view-node-info.element'),
meta: {
// TODO: how do we want to filter where editor views are shown? https://our.umbraco.com/documentation/extending/Content-Apps/#setting-up-the-plugin
// this is a temp solution