absolutely massive typescript porting time

packages/roleypoly-ui/components/role/__test__/Role.test.tsx

@@ -1,3 +1,6 @@
+/**
+ *  @jest-environment jsdom
+ */
 /* eslint-env jest */
 
 import * as React from 'react'
@@ -36,7 +39,7 @@ describe('<Role />', () => {
   })
 
   it('fixes colors when they are not set', () => {
-    const role = shallow(<Role role={{ name: 'Test Role', color: 0 }} />)
+    const role = shallow(<Role role={{ name: 'Test Role', color: '0' }} />)
     expect(role.props().style['--role-color-base']).toEqual('hsl(0, 0%, 93.7%)')
   })
 
@@ -47,12 +50,14 @@ describe('<Role />', () => {
 
   describe('when disabled,', () => {
     it('handles touch hover events', () => {
-      const role = shallow(<Role role={{ name: 'unsafe role', color: '#ffffff' }} disabled />)
+      const el = <Role role={{ name: 'unsafe role', color: '#ffffff' }} disabled={true} />
+      const role = shallow<typeof el>(el)
 
       role.simulate('touchstart')
       expect(role.state().hovering).toEqual(true)
+
       expect(role).toMatchSnapshot() // expecting tooltip
-      expect(role.exists('tooltip')).toEqual(true)
+      expect(role.text().endsWith('This role has unsafe permissions.')).toBe(true)
 
       role.simulate('touchend')
       expect(role.state().hovering).toEqual(false)

packages/roleypoly-ui/components/role/__test__/__snapshots__/Role.test.tsx.snap

@@ -1,10 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Role /> renders correctly 1`] = `
-<rolestyled
+<styled.div
   onClick={[Function]}
-  onTouchEnd={null}
-  onTouchStart={null}
   style={
     Object {
       "--role-color-active": "hsl(0, 0%, 100%)",
@@ -13,17 +11,15 @@ exports[`<Role /> renders correctly 1`] = `
       "--role-color-outline-alt": "hsla(0, 0%, 100%, 0.4)",
     }
   }
-  title={null}
 >
   Test Role
-</rolestyled>
+</styled.div>
 `;
 
 exports[`<Role /> when disabled, does not trigger onToggle on click 1`] = `
-<rolestyled
+<styled.div
   active={false}
   disabled={true}
-  onClick={null}
   onTouchEnd={[Function]}
   onTouchStart={[Function]}
   style={
@@ -37,13 +33,12 @@ exports[`<Role /> when disabled, does not trigger onToggle on click 1`] = `
   title="This role has unsafe permissions."
 >
   Test Role
-</rolestyled>
+</styled.div>
 `;
 
 exports[`<Role /> when disabled, handles touch hover events 1`] = `
-<rolestyled
+<styled.div
   disabled={true}
-  onClick={null}
   onTouchEnd={[Function]}
   onTouchStart={[Function]}
   style={
@@ -57,8 +52,8 @@ exports[`<Role /> when disabled, handles touch hover events 1`] = `
   title="This role has unsafe permissions."
 >
   unsafe role
-  <tooltip>
+  <styled.div>
     This role has unsafe permissions.
-  </tooltip>
-</rolestyled>
+  </styled.div>
+</styled.div>
 `;

packages/roleypoly-ui/components/role/__test__/demo.test.tsx

@@ -1,3 +1,6 @@
+/**
+ *  @jest-environment jsdom
+ */
 /* eslint-env jest */
 import * as React from 'react'
 import { shallow } from 'enzyme'
@@ -11,7 +14,8 @@ describe('<RoleDemo />', () => {
   })
 
   it('changes state when clicked', () => {
-    const demo = shallow(<RoleDemo role={{ name: 'test demo role', color: '#ffffff' }} />)
+    const el = <RoleDemo role={{ name: 'test demo role', color: '#ffffff' }} />
+    const demo = shallow<typeof el>(el)
     expect(demo.state().active).toEqual(false)
     demo.dive().simulate('click')
     expect(demo.state().active).toEqual(true)

packages/roleypoly-ui/components/role/demo.tsx

@@ -1,6 +1,5 @@
-// @flow
 import * as React from 'react'
-import Role, { type RoleData } from './index'
+import Role, { RoleData } from './index'
 
 export type DemoRoleProps = {
   role: RoleData

packages/roleypoly-ui/components/role/index.tsx

@@ -1,19 +1,30 @@
 // @flow
 import * as React from 'react'
 import { colors } from '../global-colors'
-import Color from 'color'
+// import Color from 'color'
+import * as cc from '@roleypoly/design/lib/helpers/colors'
 import RoleStyled from './role.styled'
 import Tooltip from '../tooltip'
 // import logger from '../../../logger'
 // const log = logger(__filename)
 
-const fromColors = (colors) => Object.entries(colors).reduce(
-  (acc, [v, val]) => ({ ...acc, [`--role-color-${v}`]: val })
-  , {})
+type RoleColors = {
+  'outline': string
+  'outline-alt': string
+  'active': string
+  'base': string
+}
+
+function fromColors (c: RoleColors) {
+  return Object.entries(c).reduce((acc, [v, val]) => ({
+    ...acc,
+    [`--role-color-${v}` as any]: val
+  }), {})
+}
 
 export type RoleData = {
   color: string,
-  name: string,
+  name: string
 }
 
 export type RoleProps = {
@@ -23,18 +34,39 @@ export type RoleProps = {
   role: RoleData,
   isDragging?: boolean,
   onToggle?: (nextState: boolean, lastState: boolean) => void,
-  connectDragSource?: (component: React.Node) => void
+  connectDragSource?: (component: React.ReactNode) => void
 }
 
 // const tooltip = ({ show = true, text, ...rest }) => <div {...rest}>{text}</div>
 
 type RoleState = {
   hovering: boolean
+  roleColors: RoleColors
 }
 
 export default class Role extends React.Component<RoleProps, RoleState> {
   state = {
-    hovering: false
+    hovering: false,
+    roleColors: {
+      'outline': '#fff',
+      'outline-alt': '#fff',
+      'active': '#fff',
+      'base': '#fff'
+    }
+  }
+
+  static getDerivedStateFromProps (props: RoleProps, prevState: RoleState): RoleState {
+    const c = (props.role.color === '0') ? colors.white : props.role.color
+    const CC = cc.color(c)
+    return {
+      ...prevState,
+      roleColors: {
+        'outline': CC.alpha(0.7).hsl().string(),
+        'outline-alt': CC.alpha(0.4).hsl().string(),
+        'active': CC.lighten(0.1).hsl().string(),
+        'base': CC.hsl().string()
+      }
+    }
   }
 
   onToggle = () => {
@@ -58,31 +90,21 @@ export default class Role extends React.Component<RoleProps, RoleState> {
   }
 
   render () {
-    let color = Color(this.props.role.color)
-    if (this.props.role.color === 0) {
-      color = colors.white
-    }
-
-    const roleColors = {
-      'outline': Color(color).alpha(0.7).hsl().string(),
-      'outline-alt': Color(color).alpha(0.4).hsl().string(),
-      'active': Color(color).lighten(0.1).hsl().string(),
-      'base': Color(color).hsl().string()
-    }
-
     const name = (this.props.role.name !== '') ? this.props.role.name : ' '
 
     return <RoleStyled
       active={this.props.active}
       disabled={this.props.disabled}
-      onClick={(this.props.disabled) ? null : this.onToggle}
-      onTouchStart={(this.props.disabled) ? this.onMouseOver : null}
-      onTouchEnd={(this.props.disabled) ? this.onMouseOut : null}
-      style={fromColors(roleColors)}
-      title={(this.props.disabled) ? 'This role has unsafe permissions.' : null}
-    >
-      {name}
-      { (this.props.disabled && this.state.hovering) && <Tooltip>This role has unsafe permissions.</Tooltip> }
+      onClick={(this.props.disabled) ? undefined : this.onToggle}
+      onTouchStart={(this.props.disabled) ? this.onMouseOver : undefined}
+      onTouchEnd={(this.props.disabled) ? this.onMouseOut : undefined}
+      style={fromColors(this.state.roleColors)}
+      title={(this.props.disabled) ? 'This role has unsafe permissions.' : undefined}
+      >
+        {name}
+        {
+          (this.props.disabled && this.state.hovering) && <Tooltip>This role has unsafe permissions.</Tooltip>
+        }
     </RoleStyled>
   }
 }

packages/roleypoly-ui/components/role/role.styled.tsx

@@ -1,7 +1,12 @@
 import styled from 'styled-components'
 import { md } from '../../kit/media'
 
-export default styled.div`
+export type SBProps = {
+  active?: boolean
+  disabled?: boolean
+}
+
+export default styled.div<SBProps>`
   border: solid 1px var(--role-color-outline);
   border-radius: 1.2em;
   box-sizing: border-box;