Skip to content

Commit 9bda204

Browse files
wuweiweiwufritz-c
wuweiweiwu
authored and
fritz-c
committed
docs: add sandbox links to storybook examples. Resolves #200
* updated scss for sandbox nav. Got base getting code ready * updating package.json. Getting parameter * working redirect to sandbox * moving everything to sandbox-util.js * updating some names and filenames * updating snapshot * moving codesandbox to devDependencies * making the sandbox single file. index.js. Cleaning up scss and class names * updating snapshot * naming components in storybooks that needs to be wrapped 'UnwrappedApp'. To preserve the 'export default App' convention
1 parent e2b4642 commit 9bda204

9 files changed

+1307
-10
lines changed

‎examples/storybooks/__snapshots__/storyshots.test.js.snap

+221
Original file line numberDiff line numberDiff line change
@@ -216,6 +216,23 @@ exports[`Storyshots Advanced Drag from external source 1`] = `
216216
← drag this
217217
</div>
218218
<br />
219+
<form
220+
action="https://codesandbox.io/api/v1/sandboxes/define"
221+
id="codesandbox-form"
222+
method="POST"
223+
>
224+
<input
225+
id="codesandbox-parameters"
226+
name="parameters"
227+
type="hidden"
228+
/>
229+
</form>
230+
<button
231+
className="sandboxButton"
232+
onClick={[Function]}
233+
>
234+
PLAY WITH THIS CODE →
235+
</button>
219236
<a
220237
className="sourceLink"
221238
href="https://github.com/fritz-c/react-sortable-tree/blob/master/examples/storybooks/external-node.js"
@@ -679,6 +696,23 @@ exports[`Storyshots Advanced Drag out to remove 1`] = `
679696
</div>
680697
</div>
681698
<br />
699+
<form
700+
action="https://codesandbox.io/api/v1/sandboxes/define"
701+
id="codesandbox-form"
702+
method="POST"
703+
>
704+
<input
705+
id="codesandbox-parameters"
706+
name="parameters"
707+
type="hidden"
708+
/>
709+
</form>
710+
<button
711+
className="sandboxButton"
712+
onClick={[Function]}
713+
>
714+
PLAY WITH THIS CODE →
715+
</button>
682716
<a
683717
className="sourceLink"
684718
href="https://github.com/fritz-c/react-sortable-tree/blob/master/examples/storybooks/drag-out-to-remove.js"
@@ -985,6 +1019,23 @@ exports[`Storyshots Advanced Playing with generateNodeProps 1`] = `
9851019
</div>
9861020
</div>
9871021
<br />
1022+
<form
1023+
action="https://codesandbox.io/api/v1/sandboxes/define"
1024+
id="codesandbox-form"
1025+
method="POST"
1026+
>
1027+
<input
1028+
id="codesandbox-parameters"
1029+
name="parameters"
1030+
type="hidden"
1031+
/>
1032+
</form>
1033+
<button
1034+
className="sandboxButton"
1035+
onClick={[Function]}
1036+
>
1037+
PLAY WITH THIS CODE →
1038+
</button>
9881039
<a
9891040
className="sourceLink"
9901041
href="https://github.com/fritz-c/react-sortable-tree/blob/master/examples/storybooks/generate-node-props.js"
@@ -1233,6 +1284,23 @@ exports[`Storyshots Advanced Touch support (Experimental) 1`] = `
12331284
</div>
12341285
</div>
12351286
<br />
1287+
<form
1288+
action="https://codesandbox.io/api/v1/sandboxes/define"
1289+
id="codesandbox-form"
1290+
method="POST"
1291+
>
1292+
<input
1293+
id="codesandbox-parameters"
1294+
name="parameters"
1295+
type="hidden"
1296+
/>
1297+
</form>
1298+
<button
1299+
className="sandboxButton"
1300+
onClick={[Function]}
1301+
>
1302+
PLAY WITH THIS CODE →
1303+
</button>
12361304
<a
12371305
className="sourceLink"
12381306
href="https://github.com/fritz-c/react-sortable-tree/blob/master/examples/storybooks/touch-support.js"
@@ -1693,6 +1761,23 @@ exports[`Storyshots Advanced Tree-to-tree dragging 1`] = `
16931761
</div>
16941762
</div>
16951763
<br />
1764+
<form
1765+
action="https://codesandbox.io/api/v1/sandboxes/define"
1766+
id="codesandbox-form"
1767+
method="POST"
1768+
>
1769+
<input
1770+
id="codesandbox-parameters"
1771+
name="parameters"
1772+
type="hidden"
1773+
/>
1774+
</form>
1775+
<button
1776+
className="sandboxButton"
1777+
onClick={[Function]}
1778+
>
1779+
PLAY WITH THIS CODE →
1780+
</button>
16961781
<a
16971782
className="sourceLink"
16981783
href="https://github.com/fritz-c/react-sortable-tree/blob/master/examples/storybooks/tree-to-tree.js"
@@ -1950,6 +2035,23 @@ exports[`Storyshots Basics Add and remove nodes programmatically 1`] = `
19502035
</button>
19512036
</div>
19522037
<br />
2038+
<form
2039+
action="https://codesandbox.io/api/v1/sandboxes/define"
2040+
id="codesandbox-form"
2041+
method="POST"
2042+
>
2043+
<input
2044+
id="codesandbox-parameters"
2045+
name="parameters"
2046+
type="hidden"
2047+
/>
2048+
</form>
2049+
<button
2050+
className="sandboxButton"
2051+
onClick={[Function]}
2052+
>
2053+
PLAY WITH THIS CODE →
2054+
</button>
19532055
<a
19542056
className="sourceLink"
19552057
href="https://github.com/fritz-c/react-sortable-tree/blob/master/examples/storybooks/add-remove.js"
@@ -2264,6 +2366,23 @@ exports[`Storyshots Basics Callbacks 1`] = `
22642366
</div>
22652367
</div>
22662368
<br />
2369+
<form
2370+
action="https://codesandbox.io/api/v1/sandboxes/define"
2371+
id="codesandbox-form"
2372+
method="POST"
2373+
>
2374+
<input
2375+
id="codesandbox-parameters"
2376+
name="parameters"
2377+
type="hidden"
2378+
/>
2379+
</form>
2380+
<button
2381+
className="sandboxButton"
2382+
onClick={[Function]}
2383+
>
2384+
PLAY WITH THIS CODE →
2385+
</button>
22672386
<a
22682387
className="sourceLink"
22692388
href="https://github.com/fritz-c/react-sortable-tree/blob/master/examples/storybooks/callbacks.js"
@@ -2505,6 +2624,23 @@ exports[`Storyshots Basics Minimal implementation 1`] = `
25052624
</div>
25062625
</div>
25072626
<br />
2627+
<form
2628+
action="https://codesandbox.io/api/v1/sandboxes/define"
2629+
id="codesandbox-form"
2630+
method="POST"
2631+
>
2632+
<input
2633+
id="codesandbox-parameters"
2634+
name="parameters"
2635+
type="hidden"
2636+
/>
2637+
</form>
2638+
<button
2639+
className="sandboxButton"
2640+
onClick={[Function]}
2641+
>
2642+
PLAY WITH THIS CODE →
2643+
</button>
25082644
<a
25092645
className="sourceLink"
25102646
href="https://github.com/fritz-c/react-sortable-tree/blob/master/examples/storybooks/barebones.js"
@@ -2842,6 +2978,23 @@ exports[`Storyshots Basics Modify nodes 1`] = `
28422978
</div>
28432979
</div>
28442980
<br />
2981+
<form
2982+
action="https://codesandbox.io/api/v1/sandboxes/define"
2983+
id="codesandbox-form"
2984+
method="POST"
2985+
>
2986+
<input
2987+
id="codesandbox-parameters"
2988+
name="parameters"
2989+
type="hidden"
2990+
/>
2991+
</form>
2992+
<button
2993+
className="sandboxButton"
2994+
onClick={[Function]}
2995+
>
2996+
PLAY WITH THIS CODE →
2997+
</button>
28452998
<a
28462999
className="sourceLink"
28473000
href="https://github.com/fritz-c/react-sortable-tree/blob/master/examples/storybooks/modify-nodes.js"
@@ -3412,6 +3565,23 @@ exports[`Storyshots Basics Prevent drop 1`] = `
34123565
</div>
34133566
</div>
34143567
<br />
3568+
<form
3569+
action="https://codesandbox.io/api/v1/sandboxes/define"
3570+
id="codesandbox-form"
3571+
method="POST"
3572+
>
3573+
<input
3574+
id="codesandbox-parameters"
3575+
name="parameters"
3576+
type="hidden"
3577+
/>
3578+
</form>
3579+
<button
3580+
className="sandboxButton"
3581+
onClick={[Function]}
3582+
>
3583+
PLAY WITH THIS CODE →
3584+
</button>
34153585
<a
34163586
className="sourceLink"
34173587
href="https://github.com/fritz-c/react-sortable-tree/blob/master/examples/storybooks/can-drop.js"
@@ -3613,6 +3783,23 @@ exports[`Storyshots Basics Search 1`] = `
36133783
</div>
36143784
</div>
36153785
<br />
3786+
<form
3787+
action="https://codesandbox.io/api/v1/sandboxes/define"
3788+
id="codesandbox-form"
3789+
method="POST"
3790+
>
3791+
<input
3792+
id="codesandbox-parameters"
3793+
name="parameters"
3794+
type="hidden"
3795+
/>
3796+
</form>
3797+
<button
3798+
className="sandboxButton"
3799+
onClick={[Function]}
3800+
>
3801+
PLAY WITH THIS CODE →
3802+
</button>
36163803
<a
36173804
className="sourceLink"
36183805
href="https://github.com/fritz-c/react-sortable-tree/blob/master/examples/storybooks/search.js"
@@ -4090,6 +4277,23 @@ exports[`Storyshots Basics Themes 1`] = `
40904277
</div>
40914278
</div>
40924279
<br />
4280+
<form
4281+
action="https://codesandbox.io/api/v1/sandboxes/define"
4282+
id="codesandbox-form"
4283+
method="POST"
4284+
>
4285+
<input
4286+
id="codesandbox-parameters"
4287+
name="parameters"
4288+
type="hidden"
4289+
/>
4290+
</form>
4291+
<button
4292+
className="sandboxButton"
4293+
onClick={[Function]}
4294+
>
4295+
PLAY WITH THIS CODE →
4296+
</button>
40934297
<a
40944298
className="sourceLink"
40954299
href="https://github.com/fritz-c/react-sortable-tree/blob/master/examples/storybooks/themes.js"
@@ -4354,6 +4558,23 @@ exports[`Storyshots Basics treeData import/export 1`] = `
43544558
</ul>
43554559
</div>
43564560
<br />
4561+
<form
4562+
action="https://codesandbox.io/api/v1/sandboxes/define"
4563+
id="codesandbox-form"
4564+
method="POST"
4565+
>
4566+
<input
4567+
id="codesandbox-parameters"
4568+
name="parameters"
4569+
type="hidden"
4570+
/>
4571+
</form>
4572+
<button
4573+
className="sandboxButton"
4574+
onClick={[Function]}
4575+
>
4576+
PLAY WITH THIS CODE →
4577+
</button>
43574578
<a
43584579
className="sourceLink"
43594580
href="https://github.com/fritz-c/react-sortable-tree/blob/master/examples/storybooks/tree-data-io.js"

‎examples/storybooks/drag-out-to-remove.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ const TrashAreaComponent = DropTarget(
5252
trashAreaCollect
5353
)(trashAreaBaseComponent);
5454

55-
class App extends Component {
55+
class UnwrappedApp extends Component {
5656
constructor(props) {
5757
super(props);
5858

@@ -83,4 +83,5 @@ class App extends Component {
8383
}
8484
}
8585

86-
export default DragDropContext(HTML5Backend)(App);
86+
const App = DragDropContext(HTML5Backend)(UnwrappedApp);
87+
export default App;

‎examples/storybooks/external-node.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ const YourExternalNodeComponent = DragSource(
5353
externalNodeCollect
5454
)(externalNodeBaseComponent);
5555

56-
class App extends Component {
56+
class UnwrappedApp extends Component {
5757
constructor(props) {
5858
super(props);
5959

@@ -79,4 +79,5 @@ class App extends Component {
7979
}
8080
}
8181

82-
export default DragDropContext(HTML5Backend)(App);
82+
const App = DragDropContext(HTML5Backend)(UnwrappedApp);
83+
export default App;

‎examples/storybooks/generic.scss

+17-3
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,31 @@
1-
.sourceLink {
1+
.sourceLink,
2+
.sandboxButton {
23
position: fixed;
34
top: 0;
45
right: 0;
56
padding: 130px 50px 5px 50px;
67
font: 10px helvetica, sans-serif;
78
display: inline-block;
8-
background: rgba(12, 35, 194, 0.7);
9+
background: rgb(12, 35, 194);
910
color: #fff;
1011
text-decoration: none;
1112
transform: translate(50%, -50%) rotateZ(45deg);
1213
transition: background 100ms;
1314

1415
&:hover:not(:active) {
15-
background: rgba(102, 135, 244, 0.9);
16+
background: rgb(102, 135, 244);
17+
}
18+
}
19+
20+
.sandboxButton {
21+
top: 30px;
22+
right: 30px;
23+
background: rgb(12, 194, 68);
24+
padding: 130px 100px 5px 100px;
25+
border: none;
26+
cursor: pointer;
27+
outline: none;
28+
&:hover:not(:active) {
29+
background: rgb(128, 242, 137);
1630
}
1731
}

‎examples/storybooks/index.js

+8
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,19 @@ import TreeDataIOExample from './tree-data-io';
1818
import TreeToTreeExample from './tree-to-tree';
1919
import styles from './generic.scss';
2020

21+
import { handleClick, SANDBOX_URL } from './sandbox-utils';
22+
2123
const wrapWithSource = (node, src) => (
2224
<div>
2325
{node}
2426

2527
<br />
28+
<form id="codesandbox-form" action={SANDBOX_URL} method="POST">
29+
<input id="codesandbox-parameters" type="hidden" name="parameters" />
30+
</form>
31+
<button className={styles.sandboxButton} onClick={handleClick(src)}>
32+
PLAY WITH THIS CODE →
33+
</button>
2634
<a
2735
href={`https://github.com/fritz-c/react-sortable-tree/blob/master/examples/storybooks/${src}`}
2836
target="_top"

0 commit comments

Comments
 (0)