Add standalone components bundles (#528)

* Add SkillsSelector component (#514)

* Add SkillsSelector component

* Fix package-lock conflict

* Adjust SkillsSelector behaviour

* Group external exports together

* Update SkillsSelector

* Update SkillsSelector

* Update SkillsSelector

* Reorder import statements

* Update SkillsSelector

* Build app

* Update SkillsSelector

* Update SkillsSelector

Co-authored-by: Nick Plekhanov <[email protected]>

* Move CustomSelect from XP-Reg to XP-UI (#523)

* move CustomSelector and rename SkillsSelectorOption to SelectorOption

* fix lint

* fix flow

* add more props

* clean props

* rebuild

* update stories

* Add lazyload.js output

* Make independent bundles for each client-side-only components

* Add error message in the SignupScreen.InputGroup

* Add disabled props for Timeframe and SkillsSelector

* Replace Select with CustomSelector in SkillsSelector

* Update CustomSelector

* Build app

* Rebuild the app

Co-authored-by: Nick Plekhanov <[email protected]>
Co-authored-by: Carlos Almeida <[email protected]>

Author: 3 people

Diff for: package-lock.json

@@ -26,15 +26,15 @@ const cx = {
       & .Select-control {
         display: flex
         border: 1px solid ${theme.lineSilver2}
-        height: auto
+        height: 60px
         padding: 14px 16px
         border-radius: 0
         cursor: pointer
       }
 
       &.is-focused .Select-control {
-        border: 1px solid ${theme.lineRed} !important
-        box-shadow: 0 0 3px ${theme.lineRed} !important
+        border: 1px solid ${theme.lineSilver6} !important
+        box-shadow: 0 0 3px ${theme.lineSilver6} !important
       }
 
       &.is-disabled:hover {
@@ -102,31 +102,13 @@ type Option = {
   label: string
 }
 
-type Props = {
-  placeholder?: string,
-  options?: Array<Option> | null,
-  disabled?: boolean,
-  clearable?: boolean,
-  searchable?: boolean,
-  value?: any,
-  onChange?: any
-}
+type Props = {}
 
 type State = {
   selectedOption: Option | null
 }
 
 class CustomSelector extends PureComponent<Props, State> {
-  static defaultProps = {
-    placeholder: '',
-    options: null,
-    disabled: false,
-    clearable: false,
-    searchable: false,
-    value: null,
-    onChange: null
-  }
-
   state: State = {
     selectedOption: null
   }
@@ -136,25 +118,21 @@ class CustomSelector extends PureComponent<Props, State> {
   }
 
   render () {
-    const { placeholder, options, disabled, clearable, searchable, value, onChange } = this.props
     const { selectedOption } = this.state
 
     return (
-      <div>
-        <Select
-          {...this.props}
-          name={'customSelector'}
-          className={cx.select.toString()}
-          optionRenderer={SelectorOption}
-          placeholder={placeholder || 'Select...'}
-          options={options}
-          disabled={disabled}
-          clearable={clearable}
-          searchable={searchable}
-          value={value || selectedOption}
-          onChange={onChange || this.handleSelection}
-        />
-      </div>
+      <Select
+        name='CustomSelector'
+        placeholder='Select...'
+        optionRenderer={SelectorOption}
+        onChange={this.handleSelection}
+        value={selectedOption}
+        disabled={false}
+        clearable={false}
+        searchable={false}
+        {...this.props}
+        className={cx.select.toString()}
+      />
     )
   }
 }

Diff for: src/components/ui/CustomSelector.js

@@ -6,7 +6,8 @@ import React from 'react'
 import Footer from './Footer'
 import Text from './Text'
 
-import { breakpoints } from '../../styles/theme'
+import theme, { breakpoints } from '../../styles/theme'
+import typo from '../../styles/typo'
 
 const cmz = require('cmz')
 
@@ -68,11 +69,21 @@ const cx = {
 
   element: cmz(`
     margin: 0 0 16px
-  `)
+  `),
+
+  errorMessage: cmz(
+    typo.baseText,
+    `
+      color: ${theme.typoSubheading}
+      font-size: 16px
+      margin: -16px 0 0
+    `
+  )
 }
 
 type InputGroupProps = {
-  children?: React$Node
+  children?: React$Node,
+  errorMessage?: string
 }
 
 type LayoutProps = {
@@ -104,11 +115,14 @@ const Layout = ({ heading, subheading, children }: LayoutProps) => (
   </div>
 )
 
-const InputGroup = ({ children }: InputGroupProps) => children ? (
+const InputGroup = ({ children, errorMessage }: InputGroupProps) => children ? (
   <div className={cx.group}>
     {React.Children.map(children, (child) => (
       <div className={cx.element}>{child}</div>
     ))}
+    {errorMessage && (
+      <div className={cx.errorMessage}>{errorMessage}</div>
+    )}
   </div>
 ) : null
 

Diff for: src/components/ui/SignupScreen.js

@@ -67,6 +67,24 @@ storiesOf('Screens and Layouts|SignupScreen/Debug', module)
       </SignupScreen.Layout>
     </Body>
   ))
+  .add('with error message', () => (
+    <Body>
+      <SignupScreen.Layout>
+        <SignupScreen.InputGroup
+          errorMessage='This has an error'
+        >
+          <SampleLabel />
+          <InputField placeholder='Input field' />
+        </SignupScreen.InputGroup>
+        <SignupScreen.InputGroup
+          errorMessage='This has an error'
+        >
+          <SampleLabel />
+          <InputField placeholder='Input field' />
+        </SignupScreen.InputGroup>
+      </SignupScreen.Layout>
+    </Body>
+  ))
   .add('missing props for Layout', () => (
     <SignupScreen.Layout />
   ))

Diff for: src/components/ui/SignupScreen.stories.js

@@ -2,99 +2,19 @@
 
 import React, { Component } from 'react'
 import differenceBy from 'lodash.differenceby'
-import Select from 'react-select'
 
 import SvgIcon from './SvgIcon'
-import SelectorOption from './SelectorOption'
-
-import '../../assets/react-select.css'
+import CustomSelector from './CustomSelector'
 
 import theme from '../../styles/theme'
-import typo, { typeface } from '../../styles/typo'
+import { typeface } from '../../styles/typo'
 
 const cmz = require('cmz')
 
 const cx = {
   select: cmz(
-    typo.baseText,
     `
-      & {
-        font-size: 18px
-        text-rendering: optimizeLegibility
-        -webkit-font-smoothing: antialiased
-        color: ${theme.typoParagraph}
-        border: 1px solid transparent
-      }
-
-      & .Select-control {
-        display: flex
-        border: 1px solid ${theme.lineSilver2}
-        height: auto
-        padding: 21px 16px
-      }
-
-      &:hover,
-      &.is-focused .Select-control,
-      &.is-focused:not(.is-open) > .Select-control {
-        border: 1px solid ${theme.lineRed}
-        box-shadow: 0 0 4px ${theme.lineRed}
-      }
-
-      & .Select-multi-value-wrapper {
-        white-space: nowrap
-        flex: 1
-        overflow-x: auto
-        overflow-y: hidden
-        display: flex
-        align-items: center
-        height: 18px
-      }
-
-      & .Select-placeholder::after {
-        content: '' !important
-      }
-
-      & .Select-placeholder {
-        padding: 21px 16px
-        line-height: 1
-        white-space: nowrap
-        overflow: hidden
-        text-overflow: ellipsis
-      }
-
-      & .Select-input {
-        margin: 0 !important
-        display: flex !important
-        align-items: center
-        padding: 0
-      }
-
-      & .Select-input > input {
-        border: none
-        margin: 0
-        font-weight: 300
-      }
-
-      & .Select-control > *:last-child {
-        padding: 0
-      }
-
-      & .Select-menu-outer {
-        top: calc(100% + 5px)
-        max-height: 270px
-        background: ${theme.baseBrighter}
-        border: 1px solid rgba(0, 0, 0, 0.15)
-        box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15)
-        border-radius: 0
-      }
-
-      & .Select-menu {
-        max-height: 270px
-      }
-
-      & .Select-option {
-        padding: 0
-      }
+
     `
   ),
 
@@ -144,6 +64,7 @@ type Option = {
 type Props = {
   options?: Array<Option>,
   applicantSkills?: Array<Option>,
+  disabled?: boolean,
   onChange?: (selectedSkills: Array<Option>) => void
 }
 
@@ -173,39 +94,41 @@ class SkillsSelector extends Component<Props, State> {
   }
 
   renderTag = (skill: Option) => {
+    const { disabled = false } = this.props
     return (
       <div key={skill.value} className={cx.tag}>
         {skill.label}
-        <SvgIcon
-          icon='x'
-          color='grayscale'
-          hover='default'
-          className={cx.removeTag}
-          onClick={() => this.handleSkillRemove(skill)}
-        />
+        {!disabled && (
+          <SvgIcon
+            icon='x'
+            color='grayscale'
+            hover='default'
+            className={cx.removeTag}
+            onClick={() => this.handleSkillRemove(skill)}
+          />
+        )}
       </div>
     )
   }
 
   render () {
-    const { options = [] } = this.props
+    const { options = [], disabled = false } = this.props
     const { selectedSkills = [] } = this.state
     const placeholder = selectedSkills.length > 0
       ? 'Add more...'
       : 'HTML, React, JavaScript, Postgres, SQL, ...'
     const availableOptions = differenceBy(options, selectedSkills, 'value')
     return (
       <div>
-        <Select
+        <CustomSelector
           name='skillsSelector'
           placeholder={placeholder}
-          className={cx.select.toString()}
           options={availableOptions}
           removeSelected
           clearable={false}
           arrowRenderer={null}
           onChange={this.handleSkillSelection}
-          optionRenderer={SelectorOption}
+          disabled={disabled}
         />
         <div className={cx.tags}>
           {selectedSkills.map(this.renderTag)}

Diff for: src/components/ui/SkillsSelector.js

@@ -45,6 +45,15 @@ storiesOf('Core Components|Form Components/SkillsSelector', module)
   ))
 
 storiesOf('Core Components|Form Components/SkillsSelector/Debug', module)
+  .add('disabled state', () => (
+    <Body>
+      <SkillsSelector
+        options={skills}
+        applicantSkills={applicantSkills}
+        disabled
+      />
+    </Body>
+  ))
   .add('missing props', () => (
     <SkillsSelector />
   ))