Skip to content

Commit a156a8f

Browse files
rcdextarcdexta
committed
Fix the storyshot plugin absolute path error
1 parent 097fa4b commit a156a8f

17 files changed

Lines changed: 21774 additions & 46336 deletions

‎stories/AsyncLoad.story.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React, {Component} from 'react'
2-
import {withInfo} from '@storybook/addon-info'
32
import {storiesOf} from '@storybook/react'
43

54
import Board from '../src'

‎stories/Base.story.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import React from 'react'
2-
import {withInfo} from '@storybook/addon-info'
32
import {storiesOf} from '@storybook/react'
43

54
import Board from '../src'
65

76
const data = require('./data/base.json')
87

9-
storiesOf('Basic Functions', module).add('Full Board example', () => <Board data={data} />, 'A complete Trello board with multiple lanes fed as json data')
8+
storiesOf('Basic Functions', module).add('Full Board example', () => <Board data={data} />, {
9+
info: 'A complete Trello board with multiple lanes fed as json data'
10+
})

‎stories/CustomCardStyling.story.js‎

Lines changed: 19 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
import React from 'react'
2-
import {withInfo} from '@storybook/addon-info'
32
import {storiesOf} from '@storybook/react'
43

5-
import Board from '../src'
6-
import {Tag} from '../src'
4+
import Board, {Tag} from '../src'
75

86
const CustomCard = props => {
97
return (
@@ -17,28 +15,17 @@ const CustomCard = props => {
1715
flexDirection: 'row',
1816
justifyContent: 'space-between',
1917
color: props.cardColor
20-
}}
21-
>
22-
<div style={{fontSize: 14, fontWeight: 'bold'}}>
23-
{props.name}
24-
</div>
25-
<div style={{fontSize: 11}}>
26-
{props.dueOn}
27-
</div>
18+
}}>
19+
<div style={{fontSize: 14, fontWeight: 'bold'}}>{props.name}</div>
20+
<div style={{fontSize: 11}}>{props.dueOn}</div>
2821
</header>
2922
<div style={{fontSize: 12, color: '#BD3B36'}}>
30-
<div style={{color: '#4C4C4C', fontWeight: 'bold'}}>
31-
{props.subTitle}
32-
</div>
23+
<div style={{color: '#4C4C4C', fontWeight: 'bold'}}>{props.subTitle}</div>
3324
<div style={{padding: '5px 0px'}}>
34-
<i>
35-
{props.body}
36-
</i>
37-
</div>
38-
<div style={{marginTop: 10, textAlign: 'center', color: props.cardColor, fontSize: 15, fontWeight: 'bold'}}>
39-
{props.escalationText}
25+
<i>{props.body}</i>
4026
</div>
41-
{props.tags &&
27+
<div style={{marginTop: 10, textAlign: 'center', color: props.cardColor, fontSize: 15, fontWeight: 'bold'}}>{props.escalationText}</div>
28+
{props.tags && (
4229
<div
4330
style={{
4431
borderTop: '1px solid #eee',
@@ -47,18 +34,20 @@ const CustomCard = props => {
4734
justifyContent: 'flex-end',
4835
flexDirection: 'row',
4936
flexWrap: 'wrap'
50-
}}
51-
>
52-
{props.tags.map(tag => <Tag key={tag.title} {...tag} tagStyle={props.tagStyle} />)}
53-
</div>}
37+
}}>
38+
{props.tags.map(tag => (
39+
<Tag key={tag.title} {...tag} tagStyle={props.tagStyle} />
40+
))}
41+
</div>
42+
)}
5443
</div>
5544
</div>
5645
)
5746
}
5847

5948
storiesOf('Custom Templates', module).add(
6049
'Custom Card Template',
61-
withInfo('Style your own card appearance. Watch out for usage of tags in custom styling as well!')(() => {
50+
() => {
6251
const data = {
6352
lanes: [
6453
{
@@ -107,10 +96,7 @@ storiesOf('Custom Templates', module).add(
10796
cardColor: '#BD3B36',
10897
cardStyle: {borderRadius: 6, boxShadow: '0 0 6px 1px #BD3B36', marginBottom: 15},
10998
metadata: {id: 'Card1'},
110-
tags: [
111-
{title: 'Critical', color: 'white', bgcolor: 'red'},
112-
{title: '2d ETA', color: 'white', bgcolor: '#0079BF'}
113-
]
99+
tags: [{title: 'Critical', color: 'white', bgcolor: 'red'}, {title: '2d ETA', color: 'white', bgcolor: '#0079BF'}]
114100
}
115101
]
116102
}
@@ -123,10 +109,10 @@ storiesOf('Custom Templates', module).add(
123109
data={data}
124110
draggable
125111
customCardLayout
126-
onCardClick={(cardId, metadata) => alert(`Card with id:${cardId} clicked. Has metadata.id: ${metadata.id}`)}
127-
>
112+
onCardClick={(cardId, metadata) => alert(`Card with id:${cardId} clicked. Has metadata.id: ${metadata.id}`)}>
128113
<CustomCard />
129114
</Board>
130115
)
131-
})
116+
},
117+
{info: 'Style your own card appearance. Watch out for usage of tags in custom styling as well!'}
132118
)

‎stories/CustomCardWithDrag.story.js‎

Lines changed: 72 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,117 +1,108 @@
11
import React, {Component} from 'react'
2-
import {withInfo} from '@storybook/addon-info'
32
import {storiesOf} from '@storybook/react'
43
import update from 'immutability-helper'
54

65
import Board from '../src'
76

87
const CustomCard = props => {
98
return (
10-
<div
11-
style={{backgroundColor: props.cardColor, padding: 6}}>
9+
<div style={{backgroundColor: props.cardColor, padding: 6}}>
1210
<header
1311
style={{
14-
borderBottom: '1px solid #eee',
15-
paddingBottom: 6,
16-
marginBottom: 10,
17-
display: 'flex',
18-
flexDirection: 'row',
19-
justifyContent: 'space-between'
20-
}}
21-
>
22-
<div style={{fontSize: 14, fontWeight: 'bold'}}>
23-
{props.name}
24-
</div>
12+
borderBottom: '1px solid #eee',
13+
paddingBottom: 6,
14+
marginBottom: 10,
15+
display: 'flex',
16+
flexDirection: 'row',
17+
justifyContent: 'space-between'
18+
}}>
19+
<div style={{fontSize: 14, fontWeight: 'bold'}}>{props.name}</div>
2520
</header>
2621
<div style={{fontSize: 12, color: '#BD3B36'}}>
27-
<div style={{color: '#4C4C4C', fontWeight: 'bold'}}>
28-
{props.subTitle}
29-
</div>
22+
<div style={{color: '#4C4C4C', fontWeight: 'bold'}}>{props.subTitle}</div>
3023
<div style={{padding: '5px 0px'}}>
31-
<i>
32-
{props.body}
33-
</i>
24+
<i>{props.body}</i>
3425
</div>
3526
</div>
3627
</div>
3728
)
3829
}
3930

4031
const customCardData = {
41-
lanes: [
32+
lanes: [
4233
{
43-
id: 'lane1',
44-
title: 'Planned',
45-
cards: [
46-
{
47-
id: 'Card1',
48-
name: 'John Smith',
49-
subTitle: 'SMS received at 12:13pm today',
50-
body: 'Thanks. Please schedule me for an estimate on Monday.',
51-
metadata: {id: 'Card1'}
52-
},
53-
{
54-
id: 'Card2',
55-
name: 'Card Weathers',
56-
subTitle: 'Email received at 1:14pm',
57-
body: 'Is the estimate free, and can someone call me soon?',
58-
metadata: {id: 'Card1'}
59-
}
60-
]
34+
id: 'lane1',
35+
title: 'Planned',
36+
cards: [
37+
{
38+
id: 'Card1',
39+
name: 'John Smith',
40+
subTitle: 'SMS received at 12:13pm today',
41+
body: 'Thanks. Please schedule me for an estimate on Monday.',
42+
metadata: {id: 'Card1'}
6143
},
6244
{
63-
id: 'lane2',
64-
title: 'Work In Progress',
65-
cards: [
66-
{
67-
id: 'Card3',
68-
name: 'Michael Caine',
69-
subTitle: 'Email received at 4:23pm today',
70-
body: 'You are welcome. Interested in doing business with you again',
71-
metadata: {id: 'Card1'},
72-
}
73-
]
45+
id: 'Card2',
46+
name: 'Card Weathers',
47+
subTitle: 'Email received at 1:14pm',
48+
body: 'Is the estimate free, and can someone call me soon?',
49+
metadata: {id: 'Card1'}
50+
}
51+
]
52+
},
53+
{
54+
id: 'lane2',
55+
title: 'Work In Progress',
56+
cards: [
57+
{
58+
id: 'Card3',
59+
name: 'Michael Caine',
60+
subTitle: 'Email received at 4:23pm today',
61+
body: 'You are welcome. Interested in doing business with you again',
62+
metadata: {id: 'Card1'}
7463
}
75-
]
64+
]
65+
}
66+
]
7667
}
7768

7869
class BoardWithCustomCard extends Component {
70+
state = {boardData: customCardData, draggedData: undefined}
7971

80-
state = {boardData: customCardData, draggedData: undefined}
81-
82-
updateBoard = (newData) => {
83-
console.log('calling updateBoard')
84-
this.setState({draggedData: newData})
85-
}
86-
87-
onDragEnd = (cardId, sourceLandId, targetLaneId) => {
88-
console.log('Calling onDragENd')
89-
const {draggedData} = this.state
90-
const laneIndex = draggedData.lanes.findIndex((lane) => lane.id === targetLaneId)
91-
const cardIndex = draggedData.lanes[laneIndex].cards.findIndex((card) => card.id === cardId)
92-
const updatedData = update(draggedData, {lanes: {[laneIndex]: {cards: {[cardIndex]: {cardColor: {$set: '#d0fdd2'}}}}}})
93-
this.setState({boardData: updatedData})
94-
}
72+
updateBoard = newData => {
73+
console.log('calling updateBoard')
74+
this.setState({draggedData: newData})
75+
}
9576

96-
render() {
97-
return <Board
98-
tagStyle={{fontSize: '80%'}}
99-
data={this.state.boardData}
100-
draggable
101-
customCardLayout
102-
onDataChange={this.updateBoard}
103-
handleDragEnd={this.onDragEnd}
104-
onCardClick={(cardId, metadata) => alert(`Card with id:${cardId} clicked. Has metadata.id: ${metadata.id}`)}
105-
>
106-
<CustomCard />
107-
</Board>
108-
}
77+
onDragEnd = (cardId, sourceLandId, targetLaneId) => {
78+
console.log('Calling onDragENd')
79+
const {draggedData} = this.state
80+
const laneIndex = draggedData.lanes.findIndex(lane => lane.id === targetLaneId)
81+
const cardIndex = draggedData.lanes[laneIndex].cards.findIndex(card => card.id === cardId)
82+
const updatedData = update(draggedData, {lanes: {[laneIndex]: {cards: {[cardIndex]: {cardColor: {$set: '#d0fdd2'}}}}}})
83+
this.setState({boardData: updatedData})
84+
}
10985

86+
render() {
87+
return (
88+
<Board
89+
tagStyle={{fontSize: '80%'}}
90+
data={this.state.boardData}
91+
draggable
92+
customCardLayout
93+
onDataChange={this.updateBoard}
94+
handleDragEnd={this.onDragEnd}
95+
onCardClick={(cardId, metadata) => alert(`Card with id:${cardId} clicked. Has metadata.id: ${metadata.id}`)}>
96+
<CustomCard />
97+
</Board>
98+
)
99+
}
110100
}
111101

112102
storiesOf('Custom Templates', module).add(
113103
'Drag-n-Drop Styling',
114-
withInfo('Change card color on drag-n-drop')(() => {
104+
() => {
115105
return <BoardWithCustomCard />
116-
})
106+
},
107+
{info: 'Change card color on drag-n-drop'}
117108
)

‎stories/CustomLaneTemplates.story.js‎

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React from 'react'
2-
import {withInfo} from '@storybook/addon-info'
32
import {storiesOf} from '@storybook/react'
43

54
import Board from '../src'
@@ -18,25 +17,23 @@ const CustomLaneHeader = props => {
1817
display: 'flex',
1918
flexDirection: 'row',
2019
justifyContent: 'space-between'
21-
}}
22-
>
23-
<div style={{fontSize: 14, fontWeight: 'bold'}}>
24-
{props.title}
25-
</div>
26-
{props.label &&
20+
}}>
21+
<div style={{fontSize: 14, fontWeight: 'bold'}}>{props.title}</div>
22+
{props.label && (
2723
<div style={{width: '30%', textAlign: 'right', fontSize: 13}}>
2824
<button onClick={buttonHandler} style={{cursor: 'pointer'}}>
2925
?
3026
</button>
31-
</div>}
27+
</div>
28+
)}
3229
</header>
3330
</div>
3431
)
3532
}
3633

3734
storiesOf('Custom Templates', module).add(
3835
'Custom Lane Template',
39-
withInfo('Style your lane header appearance')(() => {
36+
() => {
4037
const data = {
4138
lanes: [
4239
{
@@ -65,16 +62,14 @@ storiesOf('Custom Templates', module).add(
6562
id: 'Card3',
6663
title: 'Michael Caine',
6764
description: 'You are welcome. Interested in doing business with you' + ' again',
68-
tags: [
69-
{title: 'Critical', color: 'white', bgcolor: 'red'},
70-
{title: '2d ETA', color: 'white', bgcolor: '#0079BF'}
71-
]
65+
tags: [{title: 'Critical', color: 'white', bgcolor: 'red'}, {title: '2d ETA', color: 'white', bgcolor: '#0079BF'}]
7266
}
7367
]
7468
}
7569
]
7670
}
7771

7872
return <Board data={data} customLaneHeader={<CustomLaneHeader />} />
79-
})
73+
},
74+
{info: 'Style your lane header appearance'}
8075
)

0 commit comments

Comments
 (0)