Added select component (#42)

* Improved external module test

Author: emortlock

rollup.config.js

@@ -7,17 +7,30 @@ const { MODULE_FORMAT } = process.env
 
 const suffix = MODULE_FORMAT === 'cjs' ? '.cjs' : ''
 
+const externalDeps = [
+  ...Object.keys(dependencies),
+  ...Object.keys(peerDependencies),
+]
+
 const createConfig = (input, outputFile) => ({
   input,
   output: {
     file: outputFile,
     format: MODULE_FORMAT,
   },
-  external: [
-    ...Object.keys(dependencies),
-    ...Object.keys(peerDependencies),
-    'react-dom/server',
-  ],
+  external: module => {
+    let isExternal = /node_module/.test(module)
+
+    if (!isExternal) {
+      externalDeps.forEach(dep => {
+        if (new RegExp(`^${dep}`).test(module)) {
+          isExternal = true
+        }
+      })
+    }
+
+    return isExternal
+  },
   plugins: [
     resolve({
       extensions: ['.js', '.jsx'],

src/components/form/Select.jsx

@@ -0,0 +1,136 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+import { withTheme } from '../theme'
+import { BaseComponent } from '../tailwind'
+
+// https://material.io/tools/icons/?style=baseline
+const ExpandMore = props => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" />
+    <path d="M0 0h24v24H0z" fill="none" />
+  </svg>
+)
+
+const TextInput = ({
+  theme,
+  is,
+  field,
+  children,
+  className,
+  id,
+  name,
+  type,
+  disabled,
+  readOnly,
+  invalid,
+  placeholder,
+  options,
+  icon,
+  ...rest
+}) => {
+  const describedBy = [field.errorId, field.helpId].filter(by => by)
+  const isInvalid = field.invalid || invalid
+
+  const ChevronDown = icon
+
+  return (
+    <div className={`relative mb-${theme.spacing.sm}`}>
+      <BaseComponent
+        is={is}
+        className={classnames(
+          'appearance-none',
+          disabled && 'pointer-events-none',
+          className,
+        )}
+        bg="white"
+        rounded={theme.radius}
+        text={theme.textColors.body}
+        p={{ l: theme.spacing.md, r: theme.spacing.lg, y: theme.spacing.sm }}
+        border={!isInvalid ? true : [true, theme.brandColors.danger]}
+        w="full"
+        leading="tight"
+        opacity={disabled ? 50 : undefined}
+        id={field.inputId || id || name}
+        name={name}
+        type={type}
+        disabled={field.disabled || disabled}
+        readOnly={readOnly}
+        aria-invalid={isInvalid || undefined}
+        aria-describedby={
+          describedBy.length ? describedBy.join(' ') : undefined
+        }
+        {...rest}
+      >
+        {!!placeholder && <option value="">{placeholder}</option>}
+        {options.map(option => (
+          <option key={`${name}-${option.value}`} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </BaseComponent>
+      <div
+        className={classnames(
+          'pointer-events-none',
+          'absolute',
+          'pin-y pin-r',
+          'flex items-center',
+          `px-${theme.spacing.sm}`,
+        )}
+      >
+        <ChevronDown className="h-6	w-6" />
+      </div>
+    </div>
+  )
+}
+
+TextInput.propTypes = {
+  theme: PropTypes.shape({}).isRequired,
+  is: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]),
+  field: PropTypes.shape({
+    inputId: PropTypes.string,
+    invalid: PropTypes.bool,
+    disabled: PropTypes.bool,
+  }),
+  children: PropTypes.node,
+  className: PropTypes.string,
+  id: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  type: PropTypes.string,
+  disabled: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  invalid: PropTypes.bool,
+  placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  icon: PropTypes.node,
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string,
+      value: PropTypes.string,
+    }),
+  ),
+}
+
+TextInput.defaultProps = {
+  is: 'select',
+  field: {},
+  children: undefined,
+  className: undefined,
+  id: undefined,
+  type: 'text',
+  disabled: false,
+  readOnly: false,
+  invalid: false,
+  placeholder: 'Please select',
+  icon: ExpandMore,
+  options: [],
+}
+
+export { TextInput as component }
+export default withTheme(TextInput)

src/components/form/TextInput.jsx

@@ -30,6 +30,7 @@ const TextInput = ({
         disabled && 'pointer-events-none',
         className,
       )}
+      bg="white"
       rounded={theme.radius}
       text={theme.textColors.body}
       p={{ x: theme.spacing.md, y: theme.spacing.sm }}

src/components/form/__tests__/Select.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+
+import { component as TextInput } from '../TextInput'
+import { defaultTheme } from '../../theme'
+
+const setup = (testProps = {}) => {
+  const props = Object.assign(
+    {
+      theme: defaultTheme,
+      name: 'username',
+      options: [
+        { value: 'one', label: 'single' },
+        { value: 'two', label: 'double' },
+      ],
+    },
+    testProps,
+  )
+
+  const wrapper = shallow(<TextInput {...props} />)
+
+  return {
+    props,
+    wrapper,
+  }
+}
+
+describe('TextInput', () => {
+  it('renders matching snapshot', () => {
+    const { wrapper } = setup()
+
+    expect(wrapper).toMatchSnapshot()
+  })
+})

src/components/form/__tests__/__snapshots__/Select.jsx.snap

@@ -0,0 +1,42 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TextInput renders matching snapshot 1`] = `
+<BaseComponent
+  bg="white"
+  border={true}
+  className="appearance-none"
+  disabled={false}
+  id="username"
+  is="input"
+  leading="tight"
+  m={
+    Object {
+      "b": 2,
+    }
+  }
+  name="username"
+  options={
+    Array [
+      Object {
+        "label": "single",
+        "value": "one",
+      },
+      Object {
+        "label": "double",
+        "value": "two",
+      },
+    ]
+  }
+  p={
+    Object {
+      "x": 4,
+      "y": 2,
+    }
+  }
+  readOnly={false}
+  rounded="rounded"
+  text="grey-darkest"
+  type="text"
+  w="full"
+/>
+`;

src/components/form/__tests__/__snapshots__/TextInput.jsx.snap

@@ -2,6 +2,7 @@
 
 exports[`TextInput renders matching snapshot 1`] = `
 <BaseComponent
+  bg="white"
   border={true}
   className="appearance-none"
   disabled={false}

src/components/form/index.js

@@ -2,4 +2,5 @@ export { default as ErrorText } from './ErrorText'
 export { default as Field } from './Field'
 export { default as HelpText } from './HelpText'
 export { default as Label } from './Label'
+export { default as Select } from './Select'
 export { default as TextInput } from './TextInput'

src/components/form/readme.md

@@ -1,7 +1,5 @@
 ### Text Inputs
 
-Example:
-
 ```jsx
 <Field hasHelp>
   <Label>Password</Label>
@@ -31,3 +29,20 @@ Validation error example:
   <ErrorText>Please enter a valid username</ErrorText>
 </Field>
 ```
+
+### Select
+
+```jsx
+<Field>
+  <Label>Favourite Ninja Turtle</Label>
+  <Select
+    name="select"
+    options={[
+      { value: 'leo', label: 'Leonardo' },
+      { value: 'mike', label: 'Michelangelo' },
+      { value: 'don', label: 'Donatello' },
+      { value: 'raph', label: 'Raphael' },
+    ]}
+  />
+</Field>
+```