import * as UI from '../../src/index'
import { Canvas, Meta, Story } from "@storybook/addon-docs";
import { action } from "@storybook/addon-actions";
{() => { const div = document.createElement("div"); UI.widgets .askName(document, SolidLogic.store, div) .then((name) => window.alert(`You picked "${name}"`)); return div; }}Component that displays a list of resources, for instance the attachments of a message, or the various documents related to a meeting. Accepts dropping URLs onto it to add attachments to it.
{() => { const div = document.createElement("div"); SolidLogic.store.add( $rdf.namedNode("https://example-user.inrupt.net/public/some-message.ttl#this"), UI.ns.wf("attachment"), $rdf.namedNode("http://example.com/#some-attachment") ); UI.widgets.attachmentList( document, $rdf.namedNode("https://example-user.inrupt.net/public/some-message.ttl" + "#this"), div ); return div; }}A TR to represent a draggable person, etc in a list
{() => { const michiel = $rdf.namedNode("https://michielbdejong.inrupt.net/profile/card#me"); return UI.widgets.personTR(document, null, michiel); }}A Div to represent a draggable person, etc in a list
{() => { const michiel = $rdf.namedNode("https://michielbdejong.inrupt.net/profile/card#me"); const options = { wrapInATR: true, }; return UI.widgets.renderAsDiv(document, michiel, options); }} {() => { const kb = $rdf.graph(); const type = $rdf.namedNode("http://example.com/#type"); const predicate = $rdf.namedNode("http://example.com/#pred"); const inverse = false; const possible = [ $rdf.namedNode("http://example.com/#blue"), $rdf.namedNode("http://example.com/#green"), $rdf.namedNode("http://example.com/#yellow"), ]; const options = {}; return UI.widgets.selectorPanel( document, kb, type, predicate, inverse, possible, options, action("selection"), action("link clicked") ); }} {() => { const list = document.createElement("div"); const kb = $rdf.graph(); const type = $rdf.namedNode("http://example.com/#type"); const predicate = $rdf.namedNode("http://example.com/#pred"); const inverse = false; const possible = [ $rdf.namedNode("http://example.com/#blue"), $rdf.namedNode("http://example.com/#green"), $rdf.namedNode("http://example.com/#yellow"), ]; const options = {}; return UI.widgets.selectorPanelRefresh( list, document, kb, type, predicate, inverse, possible, options, action("selection"), action("link clicked") ); }}