feat: pos-value element to render any predicate value

docs/elements/components/pos-value/readme.md

@@ -0,0 +1,24 @@
+# pos-value
+
+Render a value for a given predicate
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property    | Attribute   | Description                                | Type     | Default     |
+| ----------- | ----------- | ------------------------------------------ | -------- | ----------- |
+| `predicate` | `predicate` | URI of the predicate to get the value from | `string` | `undefined` |
+
+
+## Events
+
+| Event             | Description | Type               |
+| ----------------- | ----------- | ------------------ |
+| `pod-os:resource` |             | `CustomEvent<any>` |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

elements/CHANGELOG.md

@@ -13,6 +13,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ### Added
 
 - New event `pod-os:resource-loaded` is fired after `pos-resource`, `pos-image` or `pos-document` finished loading the requested resource.
+- [pos-value](../docs/elements/components/pos-value): A component to render a value for a given predicate
 
 ## 0.10.0
 
@@ -38,7 +39,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - [pos-app-pdf-viewer](../docs/elements/apps/pos-app-pdf-viewer): A viewer for pdf document resources
 - [pos-pdf](../docs/elements/components/pos-pdf): A component to render a PDF document
-- 
+
 ### Changed
 
 - [pos-type-router](../docs/elements/components/pos-type-router): Route to pos-app-pdf-viewer for pdf resources

elements/src/components.d.ts

@@ -65,6 +65,12 @@ export namespace Components {
     }
     interface PosTypeRouter {
     }
+    interface PosValue {
+        /**
+          * URI of the predicate to get the value from
+         */
+        "predicate": string;
+    }
 }
 export interface PosAppDocumentViewerCustomEvent<T> extends CustomEvent<T> {
     detail: T;
@@ -142,6 +148,10 @@ export interface PosTypeRouterCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLPosTypeRouterElement;
 }
+export interface PosValueCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLPosValueElement;
+}
 declare global {
     interface HTMLPosAppElement extends Components.PosApp, HTMLStencilElement {
     }
@@ -293,6 +303,12 @@ declare global {
         prototype: HTMLPosTypeRouterElement;
         new (): HTMLPosTypeRouterElement;
     };
+    interface HTMLPosValueElement extends Components.PosValue, HTMLStencilElement {
+    }
+    var HTMLPosValueElement: {
+        prototype: HTMLPosValueElement;
+        new (): HTMLPosValueElement;
+    };
     interface HTMLElementTagNameMap {
         "pos-app": HTMLPosAppElement;
         "pos-app-browser": HTMLPosAppBrowserElement;
@@ -319,6 +335,7 @@ declare global {
         "pos-subjects": HTMLPosSubjectsElement;
         "pos-type-badges": HTMLPosTypeBadgesElement;
         "pos-type-router": HTMLPosTypeRouterElement;
+        "pos-value": HTMLPosValueElement;
     }
 }
 declare namespace LocalJSX {
@@ -412,6 +429,13 @@ declare namespace LocalJSX {
     interface PosTypeRouter {
         "onPod-os:resource"?: (event: PosTypeRouterCustomEvent<any>) => void;
     }
+    interface PosValue {
+        "onPod-os:resource"?: (event: PosValueCustomEvent<any>) => void;
+        /**
+          * URI of the predicate to get the value from
+         */
+        "predicate"?: string;
+    }
     interface IntrinsicElements {
         "pos-app": PosApp;
         "pos-app-browser": PosAppBrowser;
@@ -438,6 +462,7 @@ declare namespace LocalJSX {
         "pos-subjects": PosSubjects;
         "pos-type-badges": PosTypeBadges;
         "pos-type-router": PosTypeRouter;
+        "pos-value": PosValue;
     }
 }
 export { LocalJSX as JSX };
@@ -469,6 +494,7 @@ declare module "@stencil/core" {
             "pos-subjects": LocalJSX.PosSubjects & JSXBase.HTMLAttributes<HTMLPosSubjectsElement>;
             "pos-type-badges": LocalJSX.PosTypeBadges & JSXBase.HTMLAttributes<HTMLPosTypeBadgesElement>;
             "pos-type-router": LocalJSX.PosTypeRouter & JSXBase.HTMLAttributes<HTMLPosTypeRouterElement>;
+            "pos-value": LocalJSX.PosValue & JSXBase.HTMLAttributes<HTMLPosValueElement>;
         }
     }
 }

elements/src/components/pos-value/pos-value.spec.tsx

@@ -0,0 +1,32 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { PosValue } from './pos-value';
+
+describe('pos-value', () => {
+  it('is empty initially', async () => {
+    const page = await newSpecPage({
+      components: [PosValue],
+      html: `<pos-value predicate="https://vocab.example/#term" />`,
+    });
+    expect(page.root).toEqualHtml(`
+      <pos-value predicate="https://vocab.example/#term" />
+        <mock:shadow-root></mock:shadow-root>
+      </pos-value>
+  `);
+  });
+
+  it('renders property value from resource', async () => {
+    const page = await newSpecPage({
+      components: [PosValue],
+      html: `<pos-value predicate="https://vocab.example/#term" />`,
+    });
+    await page.rootInstance.receiveResource({
+      anyValue: uri => `value of ${uri}`,
+    });
+    await page.waitForChanges();
+    expect(page.root).toEqualHtml(`
+      <pos-value predicate="https://vocab.example/#term" />
+        <mock:shadow-root>value of https://vocab.example/#term</mock:shadow-root>
+      </>
+  `);
+  });
+});

elements/src/components/pos-value/pos-value.tsx

@@ -0,0 +1,30 @@
+import { Thing } from '@pod-os/core';
+import { Component, Event, Prop, State } from '@stencil/core';
+import { ResourceAware, ResourceEventEmitter, subscribeResource } from '../events/ResourceAware';
+
+@Component({
+  tag: 'pos-value',
+  shadow: true,
+})
+export class PosValue implements ResourceAware {
+  /**
+   * URI of the predicate to get the value from
+   */
+  @Prop() predicate: string;
+  @State() resource: Thing;
+
+  @Event({ eventName: 'pod-os:resource' })
+  subscribeResource: ResourceEventEmitter;
+
+  componentWillLoad() {
+    subscribeResource(this);
+  }
+
+  receiveResource = (resource: Thing) => {
+    this.resource = resource;
+  };
+
+  render() {
+    return this.resource ? this.resource.anyValue(this.predicate) : null;
+  }
+}

storybook/stories/values/1_pos-value.stories.mdx

@@ -0,0 +1,30 @@
+import {html} from "lit-html";
+
+import {
+  Canvas,
+  Meta,
+  Story
+} from '@storybook/addon-docs/blocks';
+
+<Meta
+  title="Values"
+  args={{subject: "https://solidproject.solidcommunity.net/profile/card#me", predicate: "http://www.w3.org/2006/vcard/ns#role"}}
+/>
+
+
+## pos-value
+
+Renders any value for the given predicate of the resource.
+
+<Canvas
+  withSource="open">
+  <Story
+    name="pos-value"
+  >
+    {({subject, predicate}) => html`
+<pos-resource uri=${subject}>
+   <pos-value predicate=${predicate}/>
+</pos-resource>
+    `}
+  </Story>
+</Canvas>

storybook/stories/2_pos-label.stories.mdx → storybook/stories/values/2_pos-label.stories.mdx

@@ -7,7 +7,7 @@ import {
 } from '@storybook/addon-docs/blocks';
 
 <Meta
-  title="Basics"
+  title="Values"
   args={{uri: "https://solidproject.solidcommunity.net/profile/card#me"}}
 />
 

storybook/stories/3_pos-description.stories.mdx → storybook/stories/values/3_pos-description.stories.mdx

@@ -7,7 +7,7 @@ import {
 } from '@storybook/addon-docs/blocks';
 
 <Meta
-  title="Basics"
+  title="Values"
   args={{ uri: "https://solidproject.solidcommunity.net/profile/card#me" }}
 />