Skip to content

Commit efb4228

Browse files
angelo-vangelo-v
authored
Merge pull request SolidOS#338 from solid/storybook
migrate some more examples from examples/buttons to storybook
2 parents ce840ac + 75fb23a commit efb4228

7 files changed

Lines changed: 372 additions & 0 deletions

‎src/stories/DateTime.stories.mdx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import * as UI from '../../lib'
2+
3+
import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks'
4+
5+
<Meta title="Date & Time"/>
6+
7+
## formatDateTime
8+
9+
[API documentation](https://solid.github.io/solid-ui/Documentation/api/modules/_apiwidgets_buttons_.html#formatdatetime)
10+
11+
<Canvas withSource="open">
12+
<Story name="formatDateTime">
13+
{
14+
UI.widgets.formatDateTime(
15+
new Date(),
16+
'{FullYear}-{Month}-{Date}T{Hours}:{Minutes}:{Seconds}.{Milliseconds}'
17+
)
18+
}
19+
</Story>
20+
</Canvas>
21+
22+
<Canvas withSource="open">
23+
<Story name="formatDateTime date">
24+
{
25+
UI.widgets.formatDateTime(
26+
new Date(),
27+
'{Date}.{Month}.{Year}'
28+
)
29+
}
30+
</Story>
31+
</Canvas>
32+
33+
<Canvas withSource="open">
34+
<Story name="formatDateTime time">
35+
{
36+
UI.widgets.formatDateTime(
37+
new Date(),
38+
'{Hours}:{Minutes}:{Seconds}'
39+
)
40+
}
41+
</Story>
42+
</Canvas>
43+

‎src/stories/Display.stories.mdx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import * as UI from '../../lib'
2+
3+
import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks'
4+
5+
<Meta title="Display"/>
6+
7+
## complain
8+
9+
[API documentation](https://solid.github.io/solid-ui/Documentation/api/modules/_widgets_buttons_.html#complain)
10+
11+
<Canvas>
12+
<Story name="complain">
13+
{
14+
() => {
15+
const div = document.createElement("div");
16+
UI.widgets.complain({ div, dom: document }, 'not good!')
17+
return div
18+
}
19+
}
20+
</Story>
21+
</Canvas>

‎src/stories/DomManipulation.stories.mdx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import * as UI from '../../lib'
2+
3+
import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks'
4+
5+
<Meta title="DOM manipulation" />
6+
7+
## addStyleSheet
8+
9+
Stick a stylesheet link the document if not already there
10+
11+
[API Documentation](https://solid.github.io/solid-ui/Documentation/api/modules/_widgets_buttons_.html#addstylesheet)
12+
13+
<Canvas withSource="open">
14+
<Story name="addStyleSheet" withSource="open" decorators={[ (Story) => {
15+
Story()
16+
const html = (document.querySelector('link').outerHTML)
17+
const pre = document.createElement('pre')
18+
const text = document.createTextNode(html)
19+
pre.appendChild(text)
20+
return pre
21+
}]}>
22+
{() => {
23+
UI.widgets.addStyleSheet(document, 'https://linkeddata.github.io/tabulator-firefox/content/tabbedtab.css')
24+
}}
25+
</Story>
26+
</Canvas>
27+
28+
## clearElement
29+
30+
Remove all the children of an HTML element
31+
32+
[API Documentation](https://solid.github.io/solid-ui/Documentation/api/modules/_widgets_buttons_.html#clearelement)
33+
34+
<Canvas withSource="open">
35+
<Story name="clearElement">
36+
{ () => {
37+
let counter = 0
38+
const div = document.createElement('p')
39+
setInterval(() => {
40+
if (counter++ % 2 === 0) {
41+
const text = document.createTextNode('Now you see me')
42+
div.appendChild(text)
43+
} else {
44+
UI.widgets.clearElement(div)
45+
}
46+
}, 1000)
47+
return div
48+
}
49+
}
50+
</Story>
51+
</Canvas>
52+

‎src/stories/Interactive.stories.mdx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import * as UI from '../../lib'
2+
3+
import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks'
4+
5+
<Meta title="Interactive"/>
6+
7+
## Ask name
8+
9+
[API documentation](https://solid.github.io/solid-ui/Documentation/api/modules/_widgets_buttons_.html#askname)
10+
11+
<Canvas>
12+
<Story name="Ask name">
13+
{() => {
14+
const div = document.createElement("div");
15+
UI.widgets.askName(document, UI.store, div)
16+
.then(name => window.alert(`You picked "${name}"`))
17+
return div
18+
}
19+
}
20+
</Story>
21+
</Canvas>
22+
23+
## Attachment list
24+
25+
[API documentation](https://solid.github.io/solid-ui/Documentation/api/modules/_widgets_buttons_.html#attachmentlist)
26+
27+
<Canvas>
28+
<Story name="Attachment llist">
29+
{() => {
30+
const div = document.createElement("div");
31+
UI.store.add(
32+
UI.rdf.namedNode('https://example-user.inrupt.net/public/some-message.ttl#this'),
33+
UI.ns.wf('attachment'),
34+
UI.rdf.namedNode('http://example.com/#some-attachment')
35+
)
36+
UI.widgets.attachmentList(document, UI.rdf.namedNode('https://example-user.inrupt.net/public/some-message.ttl' +
37+
'#this'), div)
38+
return div
39+
}
40+
}
41+
</Story>
42+
</Canvas>

‎src/stories/RdfUtils.stories.mdx‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import * as UI from '../../lib'
2+
3+
import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks'
4+
5+
<Meta title="RDF utilities" />
6+
7+
## allClassUris
8+
9+
Retrieve all RDF class URIs from solid-ui's RDF store
10+
11+
[API Documentation](https://solid.github.io/solid-ui/Documentation/api/modules/_widgets_buttons_.html#allclassuris)
12+
13+
<Canvas withSource="open">
14+
<Story name="allClassUris" decorators={[ (Story) => {
15+
return `<pre>${JSON.stringify(Story(), null, 2)}</pre>`
16+
}]}>
17+
{ () => {
18+
UI.store.add(
19+
UI.rdf.namedNode('http://example.com/#some-thing'),
20+
UI.rdf.namedNode('http://www.w3.org/1999/02/22-rdf-syntax-ns#type'),
21+
UI.rdf.namedNode('http://example.com/#some-class')
22+
);
23+
UI.store.add(
24+
UI.rdf.namedNode('http://example.com/#some-other-thing'),
25+
UI.rdf.namedNode('http://www.w3.org/1999/02/22-rdf-syntax-ns#type'),
26+
UI.rdf.namedNode('http://example.com/#some-other-class')
27+
)
28+
return UI.widgets.allClassURIs()
29+
}
30+
}
31+
</Story>
32+
</Canvas>
33+
34+
## defaultAnnotationStore
35+
36+
Make a URI in the Tabulator.org annotation store out of the URI of the thing to be annotated.
37+
38+
[API Documentation](https://solid.github.io/solid-ui/Documentation/api/modules/_widgets_buttons_.html#defaultannotationstore)
39+
40+
<Canvas withSource="open">
41+
<Story name="defaultAnnotationStore" decorators={[ (Story) => {
42+
return `<pre>${JSON.stringify(Story(), null, 2)}</pre>`
43+
}]}>
44+
{ () => {
45+
const url = 'http://example.com/a/b.html'
46+
return UI.widgets.defaultAnnotationStore(UI.rdf.namedNode(url))
47+
}
48+
}
49+
</Story>
50+
</Canvas>
51+
52+
## extractLogURI
53+
54+
To figure out the log URI from the full URI used to invoke the reasoner
55+
56+
[API Documentation](https://solid.github.io/solid-ui/Documentation/api/modules/_widgets_buttons_.html#extractloguri)
57+
58+
<Canvas withSource="open">
59+
<Story name="extractLogURI" decorators={[ (Story) => {
60+
return `<pre>${Story()}</pre>`
61+
}]}>
62+
{ () => {
63+
const url = 'https://example.com/logFile=http%3A%2F%2Fexample.org%2Flogs.ttl&rulesFile=ttp%3A%2F%2Fexample.org%2Frules.ttl'
64+
return decodeURIComponent(UI.widgets.extractLogURI(url))
65+
}
66+
}
67+
</Story>
68+
</Canvas>

‎src/stories/findImage.stories.mdx‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
import * as UI from '../../lib'
2+
3+
import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks'
4+
5+
export const imageDecorator = (Story) => {
6+
const result = Story()
7+
return `
8+
<div>Returns:</div>
9+
<pre>${result}</pre>
10+
<p>Preview:</p>
11+
<img src="${result}" width="80" />
12+
`
13+
}
14+
15+
<Meta title="Find images"/>
16+
17+
# findImage
18+
19+
Find something we have as explicit image data for the thing
20+
21+
[API Documentation](https://solid.github.io/solid-ui/Documentation/api/modules/_widgets_buttons_.html#findimage)
22+
23+
## for foaf:Agent
24+
25+
<Canvas withSource="open">
26+
<Story name="for foaf:Agent" decorators={[imageDecorator]}>
27+
{
28+
UI.widgets.findImage(UI.ns.foaf('Agent'))
29+
}
30+
</Story>
31+
</Canvas>
32+
33+
## for rdf:Resource
34+
35+
<Canvas withSource="open">
36+
<Story name="for rdf:Resource" decorators={[imageDecorator]}>
37+
{
38+
UI.widgets.findImage(UI.ns.rdf('Resource'))
39+
}
40+
</Story>
41+
</Canvas>
42+
43+
## with vcard:hasPhoto
44+
45+
<Canvas withSource="open">
46+
<Story name="with vcard:hasPhoto" decorators={[imageDecorator]}>
47+
{() => {
48+
const person = UI.rdf.namedNode('https://person.example/1#me')
49+
const photo = UI.rdf.namedNode('https://michielbdejong.com/img/me.jpg')
50+
UI.store.add(person, UI.ns.vcard('hasPhoto'), photo)
51+
return UI.widgets.findImage(person)
52+
}}
53+
</Story>
54+
</Canvas>
55+
56+
## with foaf:img
57+
58+
<Canvas withSource="open">
59+
<Story name="with foaf:img" decorators={[imageDecorator]}>
60+
{() => {
61+
const person = UI.rdf.namedNode('https://person.example/2#me')
62+
const photo = UI.rdf.namedNode('https://michielbdejong.com/img/me.jpg')
63+
UI.store.add(person, UI.ns.foaf('img'), photo)
64+
return UI.widgets.findImage(person)
65+
}}
66+
</Story>
67+
</Canvas>
68+
69+
# findImageFromURI
70+
71+
Find an image for this thing as a class
72+
73+
[API Documentation](https://solid.github.io/solid-ui/Documentation/api/modules/_widgets_buttons_.html#findimagefromuri)
74+
75+
## without favicon
76+
77+
<Canvas withSource="open">
78+
<Story name="without favicon" decorators={[imageDecorator]}>
79+
{
80+
UI.widgets.findImageFromURI(UI.rdf.namedNode('https://example.com/'))
81+
}
82+
</Story>
83+
</Canvas>
84+
85+
## favicon
86+
87+
<Canvas withSource="open">
88+
<Story name="favicon" decorators={[imageDecorator]}>
89+
{
90+
UI.widgets.findImageFromURI(UI.rdf.namedNode('https://solidproject.org/some/file.html'))
91+
}
92+
</Story>
93+
</Canvas>
94+
95+
## Message-ID (mid:)
96+
97+
<Canvas withSource="open">
98+
<Story name="Message-ID" decorators={[imageDecorator]}>
99+
{
100+
UI.widgets.findImageFromURI(UI.rdf.namedNode('mid:example'))
101+
}
102+
</Story>
103+
</Canvas>
104+
105+
## E-Mail (mailto:)
106+
107+
<Canvas withSource="open">
108+
<Story name="E-Mail" decorators={[imageDecorator]}>
109+
{
110+
UI.widgets.findImageFromURI(UI.rdf.namedNode('mailto:user@mail.example'))
111+
}
112+
</Story>
113+
</Canvas>

‎src/stories/iconForClass.stories.mdx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import * as UI from '../../lib'
2+
3+
import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks'
4+
5+
export const iconDecorator = (Story) => {
6+
const items = Story()
7+
const lines = items.map(({className, icon}) => `<tr><td>${className}</td><td>${icon}</td><td><img src="${UI.icons.iconBase}${icon}" style="width:20px; height:20px;" /></td></tr>`)
8+
return `<table><th>className</th><th>icon</th><th>Preview</th>
9+
${lines.join('')}
10+
</table>`
11+
}
12+
13+
<Meta title="iconForClass"/>
14+
15+
# iconForClass
16+
17+
Best logo or avatar or photo etc to represent someone or some group etc
18+
19+
[API Documentation](https://solid.github.io/solid-ui/Documentation/api/modules/_widgets_buttons_.html#iconforclass)
20+
21+
## for solid:AppProviderClass
22+
23+
24+
<Canvas withSource="open">
25+
<Story name="for solid:AppProviderClass" decorators={[iconDecorator]}>
26+
{() =>
27+
Object.keys(UI.widgets.iconForClass).map((className) => {
28+
const icon = UI.widgets.iconForClass[className]
29+
return {className, icon}
30+
})
31+
}
32+
</Story>
33+
</Canvas>

0 commit comments

Comments
 (0)