refactor(overmind-devtools): refactor devtools to react

christianalfoni · christianalfoni · commit b2802d7f0b83 · 2018-12-10T23:40:33.000+01:00
diff --git a/packages/node_modules/overmind-devtools/package.json b/packages/node_modules/overmind-devtools/package.json
@@ -27,7 +27,9 @@
 		"color-hash": "^1.0.3",
 		"electron": "^2.0.4",
 		"electron-json-storage": "^4.1.0",
-    "overmind-components": "next",
+    "overmind-react": "next",
+    "react": "16.7.0-alpha.2",
+    "react-dom": "16.7.0-alpha.2",
     "overmind-themes": "next",
     "emotion": "^9.2.12",
 		"ws": "^5.2.1"
diff --git a/packages/node_modules/overmind-devtools/src/app/actions.ts b/packages/node_modules/overmind-devtools/src/app/actions.ts
@@ -145,6 +145,7 @@ export const toggleGroupedComponent: Action<string> = ({
   state,
 }) => {
   const index = state.expandedComponents.indexOf(name)
+
   if (index === -1) {
     state.expandedComponents.push(name)
   } else {
diff --git a/packages/node_modules/overmind-devtools/src/app/index.ts b/packages/node_modules/overmind-devtools/src/app/index.ts
@@ -1,4 +1,5 @@
 import { Overmind, TConfig } from 'overmind'
+import { createHook } from 'overmind-react'
 
 import * as actions from './actions'
 import * as effects from './effects'
@@ -15,6 +16,8 @@ declare module 'overmind' {
   interface IConfig extends TConfig<typeof config> {}
 }
 
-export default new Overmind(config, {
+export const app = new Overmind(config, {
   devtools: false,
 })
+
+export const useOvermind = createHook(app)
diff --git a/packages/node_modules/overmind-devtools/src/components/Action/index.tsx b/packages/node_modules/overmind-devtools/src/components/Action/index.tsx
@@ -1,11 +1,12 @@
-import { h, Component, useOvermind } from 'overmind-components'
+import { createElement, SFC } from 'react'
+import { useOvermind } from '../../app'
 import * as styles from './styles'
 import ActionOperator from '../ActionOperator'
 import Flush from '../ActionFlush'
 import { getActionId, getOperatorId } from '../../app/utils'
 import { css } from 'emotion'
 
-const Action: Component = () => {
+const Action: SFC = () => {
   const { state, actions } = useOvermind()
   const flushReference =
     state.currentApp.flushByActionId[getActionId(state.currentAction)]
@@ -34,9 +35,8 @@ const Action: Component = () => {
 
         if (flush) {
           return (
-            <div>
+            <div key={operator.actionId + '_' + operator.operatorId}>
               <ActionOperator
-                key={operator.actionId + '_' + operator.operatorId}
                 prevOperator={prevOperator}
                 operator={operator}
                 value={value}
diff --git a/packages/node_modules/overmind-devtools/src/components/ActionFlush/index.tsx b/packages/node_modules/overmind-devtools/src/components/ActionFlush/index.tsx
@@ -1,4 +1,5 @@
-import { h, Component, useOvermind } from 'overmind-components'
+import { createElement, SFC } from 'react'
+import { useOvermind } from '../../app'
 import { Flush as FlushType } from '../../app/types'
 import * as actionStyles from '../Action/styles'
 import * as styles from './styles'
@@ -10,7 +11,7 @@ type Props = {
   flush: FlushType
 }
 
-const ActionFlush: Component<Props> = ({ flush }) => {
+const ActionFlush: SFC<Props> = ({ flush }) => {
   const { state, actions } = useOvermind()
   const isExpanded = state.expandAllActionDetails || !flush.isCollapsed
 
diff --git a/packages/node_modules/overmind-devtools/src/components/ActionOperator/index.tsx b/packages/node_modules/overmind-devtools/src/components/ActionOperator/index.tsx
@@ -1,4 +1,5 @@
-import { h, Component, useOvermind } from 'overmind-components'
+import { createElement, SFC } from 'react'
+import { useOvermind } from '../../app'
 import { Operator as OperatorType } from '../../app/types'
 import ValueInspector from '../ValueInspector'
 import Icon from '../common/Icon'
@@ -15,7 +16,7 @@ type Props = {
   operatorIndex: number
 }
 
-const ActionOperator: Component<Props> = ({
+const ActionOperator: SFC<Props> = ({
   prevOperator,
   operator,
   value,
@@ -108,23 +109,32 @@ const ActionOperator: Component<Props> = ({
                       textStyles.monospace
                     )}
                   >
-                    {effect.name + '.' + effect.method}
+                    {effect.name
+                      ? effect.name + '.' + effect.method
+                      : effect.method}
                   </span>
-                  <ValueInspector
-                    small
-                    value={
-                      effect.args.length > 1 ? effect.args : effect.args[0]
-                    }
-                  />
-                  <span
-                    className={css(
-                      textStyles.description,
-                      textStyles.monospace
-                    )}
-                  >
-                    =>
-                  </span>
-                  <ValueInspector small value={effect.result} />
+                  {effect.args.length === 1 &&
+                  effect.args[0] === undefined ? null : (
+                    <ValueInspector
+                      small
+                      value={
+                        effect.args.length > 1 ? effect.args : effect.args[0]
+                      }
+                    />
+                  )}
+                  {effect.result === undefined ? null : (
+                    <span
+                      className={css(
+                        textStyles.description,
+                        textStyles.monospace
+                      )}
+                    >
+                      =>
+                    </span>
+                  )}
+                  {effect.result === undefined ? null : (
+                    <ValueInspector small value={effect.result} />
+                  )}
                 </div>
               ))}
               {operator.mutations.map((mutation, index) => (
diff --git a/packages/node_modules/overmind-devtools/src/components/ActionPath/index.tsx b/packages/node_modules/overmind-devtools/src/components/ActionPath/index.tsx
@@ -1,16 +1,12 @@
-import { h, Component } from 'overmind-components'
+import { createElement, SFC } from 'react'
 import * as styles from './styles'
 
 type Props = {
   visible?: boolean
   showPathTag?: boolean
 }
 
-const ActionPath: Component<Props> = ({
-  showPathTag = true,
-  visible,
-  children,
-}) => (
+const ActionPath: SFC<Props> = ({ showPathTag = true, visible, children }) => (
   <div className={styles.path(visible)}>
     <div className={styles.pathLine} />
     {children ? (
diff --git a/packages/node_modules/overmind-devtools/src/components/Actions/index.tsx b/packages/node_modules/overmind-devtools/src/components/Actions/index.tsx
@@ -1,10 +1,11 @@
-import { h, Component, useOvermind } from 'overmind-components'
+import { createElement, SFC } from 'react'
+import { useOvermind } from '../../app'
 import ActionsList from '../ActionsList'
 import Action from '../Action'
 import * as styles from './styles'
 import * as textStyles from '../../styles/text'
 
-const Actions: Component = () => {
+const Actions: SFC = () => {
   const { state } = useOvermind()
 
   if (!state.currentAction) {
diff --git a/packages/node_modules/overmind-devtools/src/components/ActionsList/index.tsx b/packages/node_modules/overmind-devtools/src/components/ActionsList/index.tsx
@@ -1,10 +1,11 @@
-import { h, Component, useOvermind } from 'overmind-components'
+import { createElement, SFC } from 'react'
+import { useOvermind } from '../../app'
 import { ActionsListItemType } from '../../app/types'
 import { nameToColor } from '../../app/utils'
 import * as textStyles from '../../styles/text'
 import * as styles from './styles'
 
-const ActionsList: Component = () => {
+const ActionsList: SFC = () => {
   const { state, actions } = useOvermind()
 
   return (
diff --git a/packages/node_modules/overmind-devtools/src/components/Apps/index.tsx b/packages/node_modules/overmind-devtools/src/components/Apps/index.tsx
@@ -1,9 +1,10 @@
-import { h, Component, useOvermind } from 'overmind-components'
+import { createElement, SFC } from 'react'
+import { useOvermind } from '../../app'
 import { getAppShortName, nameToColor } from '../../app/utils'
 import * as styles from './styles'
 import { css } from 'emotion'
 
-const Apps: Component = () => {
+const Apps: SFC = () => {
   const { state, actions } = useOvermind()
   return (
     <div className={styles.wrapper}>
diff --git a/packages/node_modules/overmind-devtools/src/components/Components/index.tsx b/packages/node_modules/overmind-devtools/src/components/Components/index.tsx
@@ -1,12 +1,13 @@
-import { h, Component, useOvermind } from 'overmind-components'
+import { createElement, SFC } from 'react'
+import { useOvermind } from '../../app'
 import Table, { Row, Cell } from '../common/Table'
 import * as styles from './styles'
 import * as textStyles from '../../styles/text'
 import { GroupedComponent } from '../../app/types'
 import Icon from '../common/Icon'
 import { css } from 'emotion'
 
-const Components: Component = () => {
+const Components: SFC = () => {
   const { state, actions } = useOvermind()
 
   function renderComponentsGroupExpanded(groupedComponent: GroupedComponent) {
diff --git a/packages/node_modules/overmind-devtools/src/components/Components/styles.ts b/packages/node_modules/overmind-devtools/src/components/Components/styles.ts
@@ -26,7 +26,7 @@ export const componentContainer = (canExpand: boolean) => css`
   display: flex;
   align-items: center;
   cursor: pointer;
-  background-color: ${canExpand ? 'var(--color-white-1)' : 'transparent'};
+  background-color: ${canExpand ? 'var(--color-dark-3)' : 'transparent'};
   > div {
     flex: 1;
   }
diff --git a/packages/node_modules/overmind-devtools/src/components/Console/index.tsx b/packages/node_modules/overmind-devtools/src/components/Console/index.tsx
@@ -1,8 +1,9 @@
-import { h, Component, useOvermind } from 'overmind-components'
+import { createElement, SFC } from 'react'
+import { useOvermind } from '../../app'
 import ConsoleRow from '../ConsoleRow'
 import * as styles from './styles'
 
-const Console: Component = () => {
+const Console: SFC = () => {
   const { state } = useOvermind()
 
   return (
diff --git a/packages/node_modules/overmind-devtools/src/components/ConsoleRow/index.tsx b/packages/node_modules/overmind-devtools/src/components/ConsoleRow/index.tsx
@@ -1,4 +1,4 @@
-import { h, Component, useState } from 'overmind-components'
+import { createElement, SFC, useState } from 'react'
 import Inspector from '../Inspector'
 import * as styles from './styles'
 import { AppMessage } from '../../app/types'
@@ -7,7 +7,7 @@ type Props = {
   message: AppMessage<any>
 }
 
-const ConsoleRow: Component<Props> = ({ message }) => {
+const ConsoleRow: SFC<Props> = ({ message }) => {
   const [expandedPaths, setExpandedPaths] = useState<string[]>([])
 
   function onToggleExpand(pathArray: string[]) {
diff --git a/packages/node_modules/overmind-devtools/src/components/Devtools/index.tsx b/packages/node_modules/overmind-devtools/src/components/Devtools/index.tsx
@@ -1,15 +1,16 @@
-import { h, Component, FormEvent, useOvermind } from 'overmind-components'
+import { createElement, SFC } from 'react'
+import { useOvermind } from '../../app'
 import * as styles from './styles'
 import * as text from '../../styles/text'
 import Input from '../common/Input'
 import Button from '../common/Button'
 import Workspace from '../Workspace'
 import { css } from 'emotion'
 
-const Devtools: Component = () => {
+const Devtools: SFC = () => {
   const { state, actions } = useOvermind()
 
-  function onPortSubmit(event: FormEvent<HTMLFormElement>) {
+  function onPortSubmit(event: React.ChangeEvent<HTMLFormElement>) {
     event.preventDefault()
     actions.addConnection()
   }
diff --git a/packages/node_modules/overmind-devtools/src/components/Flushes/index.tsx b/packages/node_modules/overmind-devtools/src/components/Flushes/index.tsx
@@ -1,10 +1,11 @@
-import { h, Component, useOvermind } from 'overmind-components'
+import { createElement, SFC } from 'react'
+import { useOvermind } from '../../app'
 import * as textStyles from '../../styles/text'
 import ValueInspector from '../ValueInspector'
 import * as styles from './styles'
 import { css } from 'emotion'
 
-const Flushes: Component = () => {
+const Flushes: SFC = () => {
   const { state } = useOvermind()
 
   return (
diff --git a/packages/node_modules/overmind-devtools/src/components/Inspector/index.tsx b/packages/node_modules/overmind-devtools/src/components/Inspector/index.tsx
@@ -1,4 +1,4 @@
-import { h, Component } from 'overmind-components'
+import { createElement, SFC } from 'react'
 import { isObject, isArray } from './utils'
 import * as styles from './styles'
 import { css } from 'emotion'
@@ -14,7 +14,7 @@ type NestedProps = {
   onToggleExpand: (path: string[]) => void
 }
 
-const Nested: Component<NestedProps> = ({
+const Nested: SFC<NestedProps> = ({
   keys,
   expandedPaths,
   path,
@@ -69,7 +69,7 @@ type ValueComponentProps = {
   path: string[]
 }
 
-const ValueComponent: Component<ValueComponentProps> = ({ value, path }) => {
+const ValueComponent: SFC<ValueComponentProps> = ({ value, path }) => {
   if (typeof value === 'string') {
     return (
       <div className={styles.stringValue}>
@@ -102,7 +102,7 @@ type InspectorProps = {
   renderPaths?: RenderPaths
 }
 
-const Inspector: Component<InspectorProps> = ({
+const Inspector: SFC<InspectorProps> = ({
   value,
   expandedPaths,
   small,
diff --git a/packages/node_modules/overmind-devtools/src/components/State/index.tsx b/packages/node_modules/overmind-devtools/src/components/State/index.tsx
@@ -1,10 +1,11 @@
-import { h, Component, useOvermind } from 'overmind-components'
+import { createElement, SFC } from 'react'
+import { useOvermind } from '../../app'
 import * as styles from './styles'
 import * as textStyles from '../../styles/text'
 import Inspector, { RenderPaths } from '../Inspector'
 import { css } from 'emotion'
 
-const DerivedWrapper: Component = ({ children }) => (
+const DerivedWrapper: SFC = ({ children }) => (
   <div className={styles.label}>
     <div className={styles.labelWrapper}>
       <div className={styles.derivedLabel}>
@@ -17,7 +18,7 @@ const DerivedWrapper: Component = ({ children }) => (
   </div>
 )
 
-const State: Component = () => {
+const State: SFC = () => {
   const { state, actions } = useOvermind()
 
   return (
diff --git a/packages/node_modules/overmind-devtools/src/components/Tabs/index.tsx b/packages/node_modules/overmind-devtools/src/components/Tabs/index.tsx
@@ -1,12 +1,13 @@
-import { h, Component, useOvermind } from 'overmind-components'
+import { createElement, SFC } from 'react'
+import { useOvermind } from '../../app'
 import Apps from '../Apps'
 import * as styles from './styles'
 import Icon from '../common/Icon'
 import { Tab } from '../../app/types'
 import Tooltip from '../common/Tooltip'
 import { css } from 'emotion'
 
-const Tabs: Component = () => {
+const Tabs: SFC = () => {
   const { state, actions } = useOvermind()
 
   return (
diff --git a/packages/node_modules/overmind-devtools/src/components/ValueInspector/index.tsx b/packages/node_modules/overmind-devtools/src/components/ValueInspector/index.tsx
@@ -1,12 +1,12 @@
-import { h, Component, useState } from 'overmind-components'
+import { createElement, SFC, useState } from 'react'
 import Inspector from '../Inspector'
 
 type Props = {
   value: any
   small?: boolean
 }
 
-const ValueInspector: Component<Props> = ({ value, small }) => {
+const ValueInspector: SFC<Props> = ({ value, small }) => {
   const [expandedPaths, setExpandedPaths] = useState([])
 
   function onToggleExpand(path: string[]) {
diff --git a/packages/node_modules/overmind-devtools/src/components/Workspace/index.tsx b/packages/node_modules/overmind-devtools/src/components/Workspace/index.tsx
@@ -1,4 +1,5 @@
-import { h, Component, useOvermind } from 'overmind-components'
+import { createElement, SFC } from 'react'
+import { useOvermind } from '../../app'
 import { Tab } from '../../app/types'
 import * as styles from './styles'
 import Tabs from '../Tabs'
@@ -9,7 +10,7 @@ import State from '../State'
 import Components from '../Components'
 import Flushes from '../Flushes'
 
-const pages: { [key in Tab]: Component } = {
+const pages: { [key in Tab]: SFC } = {
   [Tab.Actions]: Actions,
   [Tab.Console]: Console,
   [Tab.State]: State,
@@ -18,7 +19,7 @@ const pages: { [key in Tab]: Component } = {
   [Tab.Remove]: () => null,
 }
 
-const Workspace: Component = () => {
+const Workspace: SFC = () => {
   const { state } = useOvermind()
   const Page = pages[state.currentTab]
 
diff --git a/packages/node_modules/overmind-devtools/src/components/common/Button/index.tsx b/packages/node_modules/overmind-devtools/src/components/common/Button/index.tsx
diff --git a/packages/node_modules/overmind-devtools/src/components/common/Icon/index.tsx b/packages/node_modules/overmind-devtools/src/components/common/Icon/index.tsx
diff --git a/packages/node_modules/overmind-devtools/src/components/common/Input/index.tsx b/packages/node_modules/overmind-devtools/src/components/common/Input/index.tsx
diff --git a/packages/node_modules/overmind-devtools/src/components/common/Table/index.tsx b/packages/node_modules/overmind-devtools/src/components/common/Table/index.tsx
diff --git a/packages/node_modules/overmind-devtools/src/components/common/Tooltip/index.tsx b/packages/node_modules/overmind-devtools/src/components/common/Tooltip/index.tsx
diff --git a/packages/node_modules/overmind-devtools/src/index.tsx b/packages/node_modules/overmind-devtools/src/index.tsx
diff --git a/packages/node_modules/overmind-devtools/tsconfig.json b/packages/node_modules/overmind-devtools/tsconfig.json
