Skip to content

Commit 0adc9ca

Browse files
angelo-vangelo-v
authored
Merge pull request SolidOS#343 from solid/storybook
Move Error and Drag & Drop examples to storybook
2 parents 1c60f3a + 26531c2 commit 0adc9ca

4 files changed

Lines changed: 93 additions & 90 deletions

File tree

‎examples/draganddrop/index.html‎

Lines changed: 6 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,12 @@
1-
<!DOCTYPE html>
2-
<html>
1+
<!DOCTYPE HTML>
2+
<html lang="en">
33
<head>
44
<meta charset='UTF-8'>
55
<title>solid-ui UI.widgets.draganddrop examples page</title>
6-
<script type="text/javascript" src="../../lib/webpack-bundle.js"></script>
7-
<script>
8-
const $ = document.querySelector.bind(document)
9-
function showSource(widgetName) {
10-
$(`#viewSource-${widgetName}`).innerHTML = $(`#script-${widgetName}`).innerText
11-
.replace(/&/g, "&amp;")
12-
.replace(/</g, "&lt;")
13-
.replace(/>/g, "&gt;")
14-
.replace(/"/g, "&quot;")
15-
.replace(/'/g, "&#039;")
16-
}
17-
</script>
6+
<meta http-equiv="refresh" content="0; url=https://solid.github.io/solid-ui/examples/storybook/?path=/docs/drag-drop--draggable" />
187
</head>
198
<body>
20-
<h2 id="makeDropTarget"><a href="#makeDropTarget">DragAndDrop</a></h2>
21-
<p><strong>DragAndDrop</strong> has three functions that can be used to handle dragging and dropping of uris, files, and
22-
images.</p>
23-
24-
<p><strong>makeDraggable</strong> is used to make an element Draggable. Along with the
25-
HTML Element, it is also necessary to pass an object with a uri. This is used to set the data on the
26-
EventListener for 'dragstart'. </p>
27-
28-
<p><strong>makeDropTarget</strong> is used to make an element enabled as a drop target. Along with the HTML Element, it is also
29-
necessary to pass in two callback functions; one to handle draggable uris and the other to handle draggable
30-
files and images.</p>
31-
32-
<p><strong>uploadFiles</strong> is used to process the files that a user is uploading.</p>
33-
34-
35-
<p id="drag" draggable="true"><strong>Drag me to the target! </strong> </p>
36-
37-
<div id="target">
38-
<p>Drag the message above or drag any file or image and drop it on this target to see it work. </p>
39-
<img src="../../src/icons/noun_748003.svg" width="200" height="200">
40-
</div>
41-
42-
<script id="script-makeDropTarget">
43-
const droppedURIHandler = function() {
44-
return alert('URI was dropped')
45-
}
46-
const droppedFileHandler = function () {
47-
return alert('File was dropped')
48-
/* Example from meeting panes for using uploadFiles in the droppedFileHandler function
49-
which is passed to the makeDropTarget function.
50-
***************
51-
function (files) {
52-
UI.widgets.uploadFiles(kb.fetcher, files, meeting.dir().uri + 'Files', meeting.dir().uri + 'Pictures',
53-
function (theFile, _destURI) {
54-
if (theFile.type.startsWith('image/')) {
55-
makePicturesFolder('Files') // if necessary
56-
} else {
57-
makeMaterialsFolder('Pictures')
58-
}
59-
}) */
60-
}
61-
const target = document.querySelector('#target')
62-
const dragElement = document.querySelector('#drag')
63-
const uri = new UI.rdf.NamedNode('https://exampleuser.inrupt.net')
64-
UI.widgets.makeDropTarget(target, droppedURIHandler, droppedFileHandler)
65-
UI.widgets.makeDraggable(dragElement,uri)
66-
</script>
67-
<pre id="viewSource-makeDropTarget"></pre>
68-
<script>
69-
showSource('makeDropTarget')
70-
</script>
9+
<h1>These examples have moved to storybook</h1>
10+
<a href="https://solid.github.io/solid-ui/examples/storybook/?path=/docs/drag-drop--draggable">https://solid.github.io/solid-ui/examples/storybook/?path=/docs/drag-drop--draggable</a>
7111
</body>
72-
</html>
12+
</html>

‎examples/error/index.html‎

Lines changed: 6 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,12 @@
11
<!DOCTYPE HTML>
22
<html lang="en">
3-
<head>
3+
<head>
44
<meta charset='UTF-8'>
55
<title>solid-ui UI.widgets.error examples page</title>
6-
<script type="text/javascript" src="../../lib/webpack-bundle.js"></script>
7-
<script>
8-
function showSource(widgetName) {
9-
const scriptText = document.getElementById(`script-${widgetName}`).innerText
10-
.replace(/&/g, "&amp;")
11-
.replace(/</g, "&lt;")
12-
.replace(/>/g, "&gt;")
13-
.replace(/"/g, "&quot;")
14-
.replace(/'/g, "&#039;")
15-
document.getElementById(`viewSource-${widgetName}`).innerHTML = scriptText
16-
}
17-
</script>
18-
</head>
6+
<meta http-equiv="refresh" content="0; url=https://solid.github.io/solid-ui/examples/storybook/?path=/docs/display--error-message-block" />
7+
</head>
198
<body>
20-
<h2 id="errorMessageBlock"><a href="#errorMessageBlock">errorMessageBlock</a></h2>
21-
<script id="script-errorMessageBlock">
22-
window.addEventListener('DOMContentLoaded', (event) => {
23-
const result = UI.widgets.errorMessageBlock(document, 'my error message', '#f0f')
24-
document.getElementById('div-errorMessageBlock').appendChild(result)
25-
})
26-
</script>
27-
<pre id="viewSource-errorMessageBlock"></pre><script>showSource('errorMessageBlock')</script>
28-
<div id="div-errorMessageBlock"></div>
9+
<h1>These examples have moved to storybook</h1>
10+
<a href="https://solid.github.io/solid-ui/examples/storybook/?path=/docs/display--error-message-block">https://solid.github.io/solid-ui/examples/storybook/?path=/docs/display--error-message-block</a>
2911
</body>
30-
</html>
12+
</html>

‎src/stories/Display.stories.mdx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,21 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks'
2020
</Story>
2121
</Canvas>
2222

23+
24+
## errorMessageBlock
25+
26+
[API documentation](https://solid.github.io/solid-ui/Documentation/api/modules/_widgets_error_.html#errormessageblock)
27+
28+
<Canvas>
29+
<Story name="errorMessageBlock">
30+
{
31+
() => {
32+
return UI.widgets.errorMessageBlock(document, 'my error message', '#f0f')
33+
}
34+
}
35+
</Story>
36+
</Canvas>
37+
2338
## setName
2439

2540
Sets the best name we have and looks up a better one

‎src/stories/DragAndDrop.stories.mdx‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import * as UI from '../../lib'
2+
3+
import { Canvas, Meta, Story, Props } from '@storybook/addon-docs/blocks';
4+
import { action } from '@storybook/addon-actions'
5+
6+
<Meta title="Drag & Drop"/>
7+
8+
## Drag & Drop
9+
10+
DragAndDrop has three functions that can be used to handle dragging and dropping of uris, files, and images.
11+
12+
`makeDraggable` is used to make an element Draggable. Along with the HTML Element, it is also necessary to pass an
13+
object with a uri. This is used to set the data on the EventListener for 'dragstart'.
14+
15+
`makeDropTarget` is used to make an element enabled as a drop target. Along with the HTML Element, it is also
16+
necessary to pass in two callback functions; one to handle draggable uris and the other to handle draggable files and images.
17+
18+
`uploadFiles` is used to process the files that a user is uploading.
19+
20+
Drag the message from the "Draggable" story or drag any file or image and drop it on the element in the "Drop Target" story to see it
21+
work.
22+
23+
<Canvas>
24+
<Story name="Draggable">
25+
{() => {
26+
const dragElement = document.createElement("div")
27+
dragElement.appendChild(document.createTextNode("Drag me to the target!"))
28+
const uri = new UI.rdf.NamedNode('https://exampleuser.inrupt.net')
29+
UI.widgets.makeDraggable(dragElement, uri)
30+
return dragElement
31+
}}
32+
</Story>
33+
</Canvas>
34+
35+
<Canvas>
36+
<Story name="Drop Target">
37+
{() => {
38+
const target = document.createElement("div")
39+
target.style = "padding: 1em; text-align:center; border: 1px solid black; width: 100px; height: 100px"
40+
target.appendChild(document.createTextNode("Drop things (URIs, files, ...) here"))
41+
UI.widgets.makeDropTarget(target, action('dropped uri'), action('dropped file'))
42+
return target
43+
}}
44+
</Story>
45+
</Canvas>
46+
47+
## uploadFiles
48+
49+
The function `uploadFiles` could for example be used in the droppedFileHandler function which is passed to the
50+
makeDropTarget function.
51+
52+
<Canvas>
53+
<Story name="Upload Files" args={{ fileBase: "https://pod.example/Files", pictureBase: "https://pod.example/Pictures"}}>
54+
{({ fileBase, pictureBase }) => {
55+
const target = document.createElement("div")
56+
target.style = "padding: 1em; text-align:center; border: 1px solid black; width: 100px; height: 100px"
57+
target.appendChild(document.createTextNode("Drop a file (document, picture, ...) here"))
58+
UI.widgets.makeDropTarget(target, action('dropped uri'), (files) => {
59+
UI.widgets.uploadFiles(UI.store.fetcher, files, fileBase, pictureBase, action('file uploaded successfully'))
60+
})
61+
return target
62+
}}
63+
</Story>
64+
</Canvas>
65+
66+
<Props story="Upload Files" />

0 commit comments

Comments
 (0)