lerna: split up bulk of packages

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

@@ -0,0 +1,78 @@
+/* eslint-env jest */
+
+import * as React from 'react'
+// import renderer from 'react-test-renderer'
+import { shallow } from 'enzyme'
+import Role from '../index'
+import 'jest-styled-components'
+
+describe('<Role />', () => {
+  it('renders correctly', () => {
+    const role = shallow(<Role role={{ name: 'Test Role', color: '#ffffff' }} />)
+    expect(role).toMatchSnapshot()
+  })
+
+  it('triggers onToggle with new state', () => {
+    let changed = false
+    const role = shallow(
+      <Role
+        role={{ name: 'Test Role', color: '#ffffff' }}
+        onToggle={(next) => { changed = next }}
+        active={false}
+      />
+    )
+    role.simulate('click')
+    expect(changed).toBe(true)
+
+    const role2 = shallow(
+      <Role
+        role={{ name: 'Test Role', color: '#ffffff' }}
+        onToggle={(next) => { changed = next }}
+        active
+      />
+    )
+    role2.simulate('click')
+    expect(changed).toBe(false)
+  })
+
+  it('fixes colors when they are not set', () => {
+    const role = shallow(<Role role={{ name: 'Test Role', color: 0 }} />)
+    expect(role.props().style['--role-color-base']).toEqual('hsl(0, 0%, 93.7%)')
+  })
+
+  it('has a single space for a name when empty', () => {
+    const role = shallow(<Role role={{ name: '', color: '#ffffff' }} />)
+    expect(role.text()).toEqual(' ')
+  })
+
+  describe('when disabled,', () => {
+    it('handles touch hover events', () => {
+      const role = shallow(<Role role={{ name: 'unsafe role', color: '#ffffff' }} disabled />)
+
+      role.simulate('touchstart')
+      expect(role.state().hovering).toEqual(true)
+      expect(role).toMatchSnapshot() // expecting tooltip
+      expect(role.exists('tooltip')).toEqual(true)
+
+      role.simulate('touchend')
+      expect(role.state().hovering).toEqual(false)
+    })
+
+    it('does not trigger onToggle on click', () => {
+      let changed = false
+      const role = shallow(
+        <Role
+          role={{ name: 'Test Role', color: '#ffffff' }}
+          onToggle={() => { changed = true }}
+          active={changed}
+          disabled
+        />
+      )
+      expect(role).toMatchSnapshot()
+      role.simulate('click')
+
+      expect(role.html()).toBe(role.html())
+      expect(changed).toBe(false)
+    })
+  })
+})

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

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

packages/roleypoly-ui/components/role/__test__/__snapshots__/demo.test.js.snap

@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<RoleDemo /> renders 1`] = `
+<Role
+  active={false}
+  onToggle={[Function]}
+  role={
+    Object {
+      "color": "#ffffff",
+      "name": "test demo role",
+    }
+  }
+/>
+`;

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

@@ -0,0 +1,19 @@
+/* eslint-env jest */
+import * as React from 'react'
+import { shallow } from 'enzyme'
+import RoleDemo from '../demo'
+import 'jest-styled-components'
+
+describe('<RoleDemo />', () => {
+  it('renders', () => {
+    const demo = shallow(<RoleDemo role={{ name: 'test demo role', color: '#ffffff' }} />)
+    expect(demo).toMatchSnapshot()
+  })
+
+  it('changes state when clicked', () => {
+    const demo = shallow(<RoleDemo role={{ name: 'test demo role', color: '#ffffff' }} />)
+    expect(demo.state().active).toEqual(false)
+    demo.dive().simulate('click')
+    expect(demo.state().active).toEqual(true)
+  })
+})

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

@@ -0,0 +1,25 @@
+// @flow
+import * as React from 'react'
+import Role, { type RoleData } from './index'
+
+export type DemoRoleProps = {
+  role: RoleData
+}
+
+type DemoRoleState = {
+  active: boolean
+}
+
+export default class RoleDemo extends React.Component<DemoRoleProps, DemoRoleState> {
+  state = {
+    active: false
+  }
+
+  onToggle = (n: boolean) => {
+    this.setState({ active: n })
+  }
+
+  render () {
+    return <Role role={this.props.role} onToggle={this.onToggle} active={this.state.active} />
+  }
+}

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

@@ -0,0 +1,88 @@
+// @flow
+import * as React from 'react'
+import { colors } from '../global-colors'
+import Color from 'color'
+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 })
+  , {})
+
+export type RoleData = {
+  color: string,
+  name: string,
+}
+
+export type RoleProps = {
+  active?: boolean, // is lit up as if it's in use
+  disabled?: boolean, // is interaction-disabled
+  type?: 'drag' | 'button',
+  role: RoleData,
+  isDragging?: boolean,
+  onToggle?: (nextState: boolean, lastState: boolean) => void,
+  connectDragSource?: (component: React.Node) => void
+}
+
+// const tooltip = ({ show = true, text, ...rest }) => <div {...rest}>{text}</div>
+
+type RoleState = {
+  hovering: boolean
+}
+
+export default class Role extends React.Component<RoleProps, RoleState> {
+  state = {
+    hovering: false
+  }
+
+  onToggle = () => {
+    if (!this.props.disabled && this.props.onToggle) {
+      const { active = false } = this.props
+      this.props.onToggle(!active, active)
+    }
+  }
+
+  onMouseOver = () => {
+    // log.debug('caught hovering')
+    if (this.props.disabled && this.state.hovering === false) {
+      // log.debug('set hovering')
+      this.setState({ hovering: true })
+    }
+  }
+
+  onMouseOut = () => {
+    // log.debug('out hovering')
+    this.setState({ hovering: false })
+  }
+
+  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> }
+    </RoleStyled>
+  }
+}

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

@@ -0,0 +1,124 @@
+import styled from 'styled-components'
+import MediaQuery from '../../kit/media'
+
+export default styled.div`
+  border: solid 1px var(--role-color-outline);
+  border-radius: 1.2em;
+
+  box-sizing: border-box;
+  cursor: pointer;
+
+  position: relative;
+  display: flex;
+  overflow: hidden;
+  align-items: center;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  flex-direction: column;
+
+  font-size: 1.2em;
+  line-height: 20px;
+
+  margin: 0.3em;
+  padding: 4px 0.5em;
+
+  min-height: 32px;
+  max-width: 90vw;
+
+  transition: box-shadow 0.3s ease-in-out;
+
+  text-shadow: 1px 1px 1px rgba(0,0,0,0.45);
+  text-overflow: ellipsis;
+  user-select: none;
+  white-space: nowrap;
+  transform: rotateZ(0);
+
+  ${(props: any) => (props.active) ? `
+    box-shadow: inset 0 0 0 3em var(--role-color-outline-alt);
+  ` : `
+  `}
+
+  .wf-active & {
+    /* padding-top: 4px; */
+  }
+
+  &[disabled]:hover {
+    overflow: visible;
+  }
+
+  &:hover::after {
+    transform: translateY(-1px) rotateZ(0);
+    box-shadow: 0 0 1px rgba(0,0,0,0.75);
+    border-color: var(--role-color-active);
+    clip-path: border-box circle(50.2% at 49.6% 50%); /* firefox fix */
+  }
+
+  &:active::after {
+    transform: none;
+  }
+
+  &::after {
+    content: '';
+    display: none;
+    box-sizing: border-box;
+
+    position: absolute;
+    left: 4px;
+    bottom: 2px;
+    top: 4px;
+
+    width: 22px;
+    height: 22px;
+
+    border: 1px solid var(--role-color-base);
+    border-radius: 100%;
+
+    clip-path: border-box circle(50.2% at 50% 50%); /* this is just for you, firefox. */
+
+    transform: rotateZ(0);
+    ${(props: any) => (props.active) ? `
+      transition: border 0.3s ease-in-out, transform 0.1s ease-in-out, background-color 1ms ease-in-out 0.29s;
+      border-left-width: 21px;
+    ` : `
+      transition: border 0.3s ease-in-out, transform 0.1s ease-in-out, background-color 0.3s ease-in-out;
+    `}
+  }
+
+  ${(props: any) => MediaQuery({
+    md: `
+      font-size: 1em;
+      text-shadow: none;
+      padding-left: 32px;
+      ${(props.active) ? `box-shadow: none;` : ''}
+      &::after {
+        ${(props.active) ? `background-color: var(--role-color-base);` : ''}
+        display: block;
+      }
+
+      &:hover::after {
+        ${(props.active) ? `background-color: var(--role-color-active);` : ''}
+      }
+    `
+  })}
+
+  &[disabled] {
+    border-color: hsl(0,0%,40%);
+    color: hsla(0,0%,40%,0.7);
+    cursor: default;
+    box-shadow: none;
+    ${(props: any) => (props.active) ? `
+      box-shadow: inset 0 0 0 3em hsla(0,0%,40%,0.1);
+      background-color: hsl(0,0%,40%);`
+    : ``};
+
+    &::after {
+      border-color: hsl(0,0%,40%);
+    }
+
+    &:hover::after {
+      border-color: hsl(0,0%,40%);
+      transform: none;
+      box-shadow: none;
+    }
+  }
+`