Skip to content

Commit 2a63d72

Browse files
christianalfonichristianalfoni
committed
feat(overmind-devtools): refactor UI and add action execution
1 parent 1252211 commit 2a63d72

File tree

56 files changed

+1596
-1208
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

56 files changed

+1596
-1208
lines changed

‎packages/node_modules/overmind-devtools/backend/ConnectionManager.js‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,6 @@ class ConnectionManager {
2020
this.mainWindow.webContents.send('message', parsedMessage)
2121
}
2222
onDevtoolsMessage(_, payload) {
23-
if (!this.clients[payload.port] || !this.clients[payload.port].ws) {
24-
return
25-
}
26-
2723
this.ws.send(JSON.stringify(payload))
2824
}
2925
connect(_, port) {

‎packages/node_modules/overmind-devtools/package.json‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
"start": "concurrently \"electron ./backend/main\" \"webpack-dev-server --port 3000\"",
1313
"build": "webpack",
1414
"typecheck": "tsc --noEmit",
15-
"test": "jest --runInBand",
15+
"test": "jest --runInBand",
1616
"test:watch": "jest --watch --updateSnapshot --coverage false",
1717
"prepare": "npm run build",
1818
"posttest": "npm run typecheck"
@@ -27,11 +27,14 @@
2727
"color-hash": "^1.0.3",
2828
"electron": "^2.0.8",
2929
"electron-json-storage": "^4.1.0",
30-
"overmind-react": "next",
31-
"react": "16.8.1",
32-
"react-dom": "16.8.1",
33-
"overmind-themes": "next",
34-
"emotion": "^9.2.12",
30+
"overmind-react": "next",
31+
"react": "16.8.1",
32+
"react-dom": "16.8.1",
33+
"overmind-themes": "next",
34+
"emotion": "^9.2.12",
3535
"ws": "^5.2.1"
36+
},
37+
"devDependencies": {
38+
"@babel/plugin-proposal-class-properties": "^7.3.4"
3639
}
3740
}

‎packages/node_modules/overmind-devtools/src/components/Action/index.tsx‎

Lines changed: 15 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -4,29 +4,19 @@ import * as styles from './styles'
44
import ActionOperator from '../ActionOperator'
55
import Flush from '../ActionFlush'
66
import { getActionId, getOperatorId } from '../../overmind/utils'
7-
import { css } from 'emotion'
87

98
const Action: SFC = () => {
10-
const { state, actions } = useOvermind()
9+
const { state } = useOvermind()
1110
const flushReference =
1211
state.currentApp.flushByActionId[getActionId(state.currentAction)]
1312
const flush =
1413
flushReference && state.currentApp.flushes[flushReference.flushId]
1514

1615
return (
1716
<div className={styles.wrapper}>
18-
<div
19-
className={css(
20-
styles.expandAll,
21-
state.expandAllActionDetails && styles.expandAllActive
22-
)}
23-
onClick={() => actions.toggleExpandAllActions()}
24-
>
25-
expand all
26-
</div>
2717
{Object.keys(state.currentAction.operators)
2818
.sort()
29-
.map((operatorId, index) => {
19+
.map((operatorId, index, keys) => {
3020
const operator = state.currentAction.operators[operatorId]
3121
const prevOperator = state.currentAction.operators[index - 1]
3222
const value =
@@ -36,28 +26,20 @@ const Action: SFC = () => {
3626
const flush =
3727
flushReference && state.currentApp.flushes[flushReference.flushId]
3828

39-
if (flush) {
40-
return (
41-
<div key={operator.actionId + '_' + operator.operatorId}>
42-
<ActionOperator
43-
prevOperator={prevOperator}
44-
operator={operator}
45-
value={value}
46-
operatorIndex={index}
47-
/>
48-
<Flush flush={flush} />
49-
</div>
50-
)
51-
}
52-
5329
return (
54-
<ActionOperator
55-
key={operator.actionId + '_' + operator.operatorId}
56-
prevOperator={prevOperator}
57-
operator={operator}
58-
value={value}
59-
operatorIndex={index}
60-
/>
30+
<div key={operator.actionId + '_' + operator.operatorId}>
31+
<ActionOperator
32+
prevOperator={prevOperator}
33+
operator={operator}
34+
value={value}
35+
operatorIndex={index}
36+
/>
37+
{index === keys.length - 1 &&
38+
state.currentAction.isIntercepted ? (
39+
<div className={styles.breakStyle}>break</div>
40+
) : null}
41+
{flush ? <Flush flush={flush} /> : null}
42+
</div>
6143
)
6244
})}
6345
{!state.currentAction.isRunning && flush ? <Flush flush={flush} /> : null}

‎packages/node_modules/overmind-devtools/src/components/Action/styles.ts‎

Lines changed: 18 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,22 @@
11
import { css } from 'emotion'
2+
import { colors } from '../../theme'
23

3-
export const wrapper = css`
4-
padding: var(--padding-4);
5-
background-color: var(--color-dark-1);
6-
overflow-y: scroll;
7-
`
4+
export const wrapper = css({
5+
marginLeft: '1rem',
6+
paddingTop: '0.5rem',
7+
})
88

9-
export const pipe = css`
10-
display: flex;
11-
align-items: center;
12-
margin: var(--padding-3) 0;
13-
`
9+
export const pipe = css({
10+
display: 'flex',
11+
alignItems: 'center',
12+
})
1413

15-
export const expandAll = css`
16-
display: flex;
17-
justify-content: flex-end;
18-
font-size: var(--font-size-2);
19-
cursor: pointer;
20-
color: var(--color-white-2);
21-
opacity: 0.5;
22-
:hover {
23-
opacity: 0.75;
24-
}
25-
`
26-
27-
export const expandAllActive = css`
28-
opacity: 1;
29-
:hover {
30-
opacity: 1;
31-
}
32-
`
14+
export const breakStyle = css({
15+
display: 'flex',
16+
alignItems: 'center',
17+
borderRadius: 3,
18+
color: colors.dark,
19+
backgroundColor: colors.purple,
20+
padding: '0 0.5rem',
21+
marginBottom: '1rem',
22+
})

‎packages/node_modules/overmind-devtools/src/components/ActionFlush/index.tsx‎

Lines changed: 25 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,47 @@
1-
import { createElement, SFC } from 'react'
1+
import { createElement, FunctionComponent } from 'react'
22
import { useOvermind } from '../../overmind'
33
import { Flush as FlushType } from '../../overmind/types'
44
import * as actionStyles from '../Action/styles'
55
import * as styles from './styles'
66
import * as textStyles from '../../styles/text'
77
import Path from '../ActionPath'
88
import Icon from '../common/Icon'
9+
import { css } from 'emotion'
910

1011
type Props = {
1112
flush: FlushType
1213
}
1314

14-
const ActionFlush: SFC<Props> = ({ flush }) => {
15+
const ActionFlush: FunctionComponent<Props> = ({ flush }) => {
1516
const { state, actions } = useOvermind()
16-
const isExpanded = state.expandAllActionDetails || !flush.isCollapsed
1717

1818
return (
1919
<div className={actionStyles.pipe}>
2020
<Path />
2121
<div className={styles.flush}>
22-
<div
23-
className={styles.flushHeader}
24-
onClick={() => actions.toggleCollapsedFlush(flush.flushId)}
25-
>
26-
<span className={textStyles.hint}>
27-
<Icon>code</Icon> {flush.components.length}
28-
</span>
29-
<span className={textStyles.hint}>
30-
<Icon>chain</Icon> {flush.derived.length}
31-
</span>
32-
{flush.components.length || flush.derived.length ? (
33-
<span className={textStyles.hint}>
34-
{isExpanded ? <Icon>chevron-down</Icon> : <Icon>chevron-up</Icon>}
35-
</span>
36-
) : (
37-
<span className={textStyles.hint} />
38-
)}
22+
<div className={styles.flushHeader}>flush</div>
23+
<div className={styles.flushBody}>
24+
{flush.components.map((componentId) => (
25+
<div key={componentId}>
26+
<span className={css(textStyles.description, styles.flushItem)}>
27+
<span className={styles.fadedOut}>
28+
<Icon>code</Icon>
29+
</span>{' '}
30+
{state.currentApp.components[componentId].name}
31+
</span>
32+
</div>
33+
))}
34+
{flush.derived.map((derivedPath, index) => (
35+
<div key={derivedPath + '_' + index}>
36+
<span className={css(textStyles.description, styles.flushItem)}>
37+
<span className={styles.fadedOut}>
38+
<Icon>chain</Icon>
39+
</span>{' '}
40+
{derivedPath}
41+
</span>
42+
</div>
43+
))}
3944
</div>
40-
{isExpanded ? (
41-
<div>
42-
{flush.components.map((componentId) => (
43-
<div key={componentId}>
44-
<span className={textStyles.hint}>
45-
<Icon>code</Icon>{' '}
46-
{state.currentApp.components[componentId].name}
47-
</span>
48-
</div>
49-
))}
50-
{flush.derived.map((derivedPath, index) => (
51-
<div key={derivedPath + '_' + index}>
52-
<span className={textStyles.hint}>
53-
<Icon>chain</Icon> {derivedPath}
54-
</span>
55-
</div>
56-
))}
57-
</div>
58-
) : null}
5945
</div>
6046
</div>
6147
)

‎packages/node_modules/overmind-devtools/src/components/ActionFlush/styles.ts‎

Lines changed: 36 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,39 @@
11
import { css } from 'emotion'
2+
import { colors } from '../../theme'
23

3-
export const flush = css`
4-
flex: 1;
5-
display: flex;
6-
flex-direction: column;
7-
padding: 0 var(--padding-4);
8-
cursor: pointer;
9-
border: 1px solid var(--color-dark-1);
10-
background-color: var(--color-dark-2);
11-
border-radius: var(--border-radius-1);
12-
`
4+
export const flush = css({
5+
flex: 1,
6+
display: 'flex',
7+
flexDirection: 'column',
8+
cursor: 'pointer',
9+
})
1310

14-
export const flushHeader = css`
15-
display: flex;
16-
align-items: center;
17-
> * {
18-
margin-right: 15px;
19-
}
20-
> *:last-child {
21-
margin-left: auto;
22-
margin-right: 0;
23-
color: var(--color-white-2);
24-
}
25-
`
11+
export const flushHeader = css({
12+
display: 'flex',
13+
alignItems: 'center',
14+
borderRadius: 3,
15+
color: colors.dark,
16+
backgroundColor: colors.yellow,
17+
padding: '0 0.5rem',
18+
})
19+
20+
export const flushBody = css({
21+
margin: '0.5rem',
22+
display: 'flex',
23+
flexWrap: 'wrap',
24+
'> *': {
25+
marginRight: 15,
26+
},
27+
})
28+
29+
export const flushItem = css({
30+
display: 'flex',
31+
alignItems: 'center',
32+
'> :first-child': {
33+
marginRight: 3,
34+
},
35+
})
36+
37+
export const fadedOut = css({
38+
opacity: 0.75,
39+
})

0 commit comments

Comments
 (0)