Merge remote-tracking branch 'Semantic-Org/master'

* Semantic-Org/master: (111 commits)
  fix(docs): fix usage of arrow function (Semantic-Org#1228)
  fix(Icon): Incorrect definition in typings (Semantic-Org#1225)
  fix(Button): fix `tabIndex` in typings (Semantic-Org#1224)
  fix(typings): add item prop to the DropdownProps (Semantic-Org#1223)
  docs(examples): add missing `key` props (Semantic-Org#1220)
  docs(changelog): update changelog [ci skip]
  0.64.4
  feat(Form): add `inverted` prop (Semantic-Org#1218)
  fix(ComponentExample): use explicit babel presets (Semantic-Org#1219)
  style(Button): update typings and propTypes usage (Semantic-Org#1216)
  style(Embed): update typings and propTypes usage (Semantic-Org#1217)
  chore(package): support for jsnext:main (Semantic-Org#1210)
  style(Step): update typings, tests and propTypes usage (Semantic-Org#1203)
  fix(Portal): do not take focus after first render (Semantic-Org#1215)
  style(Table|mixed): update typings, tests and propTypes usage (Semantic-Org#1200)
  fix(Dropdown): use `item` instead of `as={Menu.Item}` (Semantic-Org#659)
  fix(Dropdown): respect `closeOnBlur={false}` (Semantic-Org#1148)
  style(Breadcrumb): update typings and propTypes usage (Semantic-Org#1209)
  style(Dimmer): update typings (Semantic-Org#1208)
  fix(Divider|FormInput): fix the broken typings (Semantic-Org#1179)
  ...

Author: DomiR

.babelrc

@@ -1,11 +1,19 @@
 {
   "presets": [
-    "es2015",
+    "./build/preset-es2015",
     "react",
     "stage-1"
   ],
   "plugins": [
-    "lodash"
+    "lodash",
+    "transform-react-handled-props",
+    ["transform-react-remove-prop-types", {
+      "mode": "wrap"
+    }],
+    ["transform-runtime", {
+      "polyfill": false,
+      "regenerator": false
+    }]
   ],
   "env": {
     "test": {

.eslintrc

@@ -37,6 +37,7 @@
     "jsx-a11y/tabindex-no-positive": 1,
     "react/jsx-curly-spacing": 0,
     "react/sort-comp": 0,
+    "semi": [2, "never"],
     "padded-blocks": [2, {
       "blocks": "never",
       "switches": "never",

.github/CONTRIBUTING.md

@@ -12,6 +12,7 @@ CONTRIBUTING
 - [Workflow](#workflow)
   - [Create a Component](#create-a-component)
   - [Define _meta](#define-_meta)
+  - [Using propTypes](#using-proptypes)
   - [Conformance Test](#conformance-test)
   - [Open A PR](#open-a-pr)
   - [Spec out the API](#spec-out-the-api)
@@ -126,7 +127,7 @@ class Dropdown extends Component {
 
 ### Define _meta
 
-Every component has a static property called `_meta`.  This object defines the component.  The values here are used in `propTypes`, generated documentation, generated test cases, and some utilities.
+Every component has a static property called `_meta`. This object defines the component. The values here are used for generated documentation, generated test cases and some utilities.
 
 Here's an example `_meta` object:
 
@@ -136,9 +137,6 @@ import { META } from '../../lib'
 const _meta = {
   name: 'MyComponent',
   type: META.TYPES.MODULE,
-  props: {
-    pointing: ['bottom left', 'bottom right'],
-  },
 }
 ```
 
@@ -162,6 +160,23 @@ class MyComponent {
 }
 ```
 
+### Using propTypes
+
+Every component must have fully described `propTypes`.
+ 
+ ```js
+ import React, { PropTypes } from 'react'
+ 
+ function MyComponent(props) {
+   return <div className={props.position}>{props.children}</div>
+ }
+ 
+ MyComponent.propTypes = {
+   children: PropTypes.node,
+   position: PropTypes.oneOf(['left', 'right']),
+ }
+ ```
+
 ### Conformance Test
 
 Review [common tests](#common-tests) below.  You should now add the [`isConformant()`](#isconformant-required) common test and get it to pass.  This will validate the `_meta` and help you get your component off the ground.
@@ -176,7 +191,7 @@ This will also help with getting early feedback and smaller faster iterations on
 
 Review the SUI documentation for the component. Spec out the component's proposed API. The spec should demonstrate how your component's API will support all the native SUI features. You can reference this [API proposal][7] for the Input.
 
-Once we have solidified the component spec, it's time to write some code.  The following sections cover everything you'll need to spec and build your awesome component.
+Once we have solidified the component spec, it's time to write some code. The following sections cover everything you'll need to spec and build your awesome component.
 
 ## API
 

CHANGELOG.md

@@ -1,6 +1,6 @@
 <p align="center">
   <a href="http://semantic-org.github.io/Semantic-UI-React">
-    <img height="128" width="128" src="https://cloud.githubusercontent.com/assets/5067638/17415622/7ac62496-5a3f-11e6-864e-217ad1d9e021.png">
+    <img height="128" width="128" src="https://github.com/Semantic-Org/Semantic-UI-React/raw/master/docs/app/logo.png">
   </a>
   <p align="center">
     The official <a href="http://semantic-ui.com">Semantic UI</a>
@@ -77,7 +77,7 @@ Issues labeled [`good first contribution`][21] are a great way to ease into deve
 
 ### [Missing Components][17]
 
-We're seeking component parity with Semantic UI, plus some addons.  There is an issue for every missing component, labeled [`enhancement` `help wanted`][17].  Just comment on the issue you'd like to take.
+We're seeking component parity with Semantic UI, plus some addons.  There is an issue for every missing component, labeled [`new component`][17].  Just comment on the issue you'd like to take.
 
 ### [Help Wanted Label][4]
 
@@ -115,7 +115,6 @@ Any other issue labeled [`help wanted`][4] is ready for a PR.
 | ✓ Reveal        |                 |                 |   Sticky        |                    |
 | ✓ Segment       |                 |                 |   Tab           |                    |
 | ✓ Step          |                 |                 |   Transition    |                    |
-|                 |                 |                 |                 |                    |
 
 ## Releasing
 
@@ -153,7 +152,7 @@ Big thanks to our [contributors][20], especially:
 [14]: https://github.com/Semantic-Org/Semantic-UI-React/issues
 [15]: #
 [16]: http://technologyadvice.com/careers
-[17]: https://github.com/Semantic-Org/Semantic-UI-React/issues?q=is%3Aopen+label%3A%22help+wanted%22+label%3Aenhancement
+[17]: https://github.com/Semantic-Org/Semantic-UI-React/issues?q=is%3Aissue+is%3Aopen+label%3A%22new+component%22
 [18]: https://github.com/Semantic-Org/Semantic-UI-React/blob/master/CHANGELOG.md
 [19]: https://github.com/Semantic-Org/Semantic-UI-React/issues?q=is%3Aopen+RFC+label%3ARFC
 [20]: https://github.com/Semantic-Org/Semantic-UI-React/graphs/contributors

README.md

@@ -0,0 +1,7 @@
+const options = process.env.BABEL_ENV === 'es' ? { modules: false } : {}
+
+module.exports = {
+  presets: [
+    ['es2015', options],
+  ],
+}

build/preset-es2015.js

@@ -10,5 +10,6 @@ machine:
 test:
   pre:
     - npm run lint
+    - npm run tsd:lint
   post:
     - bash <(curl -s https://codecov.io/bash)

circle.yml

@@ -8,10 +8,9 @@ import copyToClipboard from 'copy-to-clipboard'
 import { exampleContext, repoURL } from 'docs/app/utils'
 import { Divider, Grid, Icon, Header, Menu } from 'src'
 import Editor from 'docs/app/Components/Editor/Editor'
-import babelrc from '.babelrc'
 
 const babelConfig = {
-  presets: [...babelrc.presets],
+  presets: ['es2015', 'react', 'stage-1'],
 }
 
 const showCodeStyle = {
@@ -118,6 +117,7 @@ export default class ComponentExample extends Component {
   }
 
   renderSourceCode = _.debounce(() => {
+    const { examplePath } = this.props
     const { sourceCode } = this.state
     // Heads Up!
     //
@@ -129,27 +129,39 @@ export default class ComponentExample extends Component {
     const LODASH = require('lodash')
     const REACT = require('react')
     const SEMANTIC_UI_REACT = require('semantic-ui-react')
+    let COMMON
     /* eslint-enable no-unused-vars */
 
     // Should use an AST transform here... oh well :/
     // Rewrite the example file into an IIFE that returns a component
     // which can be rendered in this ComponentExample's render() method
 
     // rewrite imports to const statements against the UPPERCASE module names
-    const imports = _.get(/(import[\s\S]*from[\s\S]*['"]\n)/.exec(sourceCode), '[1]', '')
+    const imports = _.get(/(^import[\s\S]*from[\s\S]*['"]\n)/.exec(sourceCode), '[1]', '')
       .replace(/[\s\n]+/g, ' ')         // normalize spaces and make one line
       .replace(/ import/g, '\nimport')  // one import per line
       .split('\n')                      // split lines
-      .filter(l => l.trim() !== '')     // remove empty lines
-      .map(l => {
-        const defaultImport = _.get(/import\s+(\w+)/.exec(l), '[1]')
-        const destructuredImports = _.get(/import.*({[\s\w,}]+)\s+from/.exec(l), '[1]')
-        const module = _.snakeCase(_.get(/import.*from\s+['"]([\w\-_]+)/.exec(l), '[1]', '')).toUpperCase()
-
-        return _.compact([
-          defaultImport && `const ${defaultImport} = ${module}`,
-          destructuredImports && `const ${destructuredImports} = ${module}`,
-        ]).join('\n')
+      .filter(Boolean)                  // remove empty lines
+      .map(l => {                       // rewrite imports to const statements
+        const [
+          defaultImport,
+          destructuredImports,
+          _module,
+        ] = _.tail(/import\s+([\w]+)?(?:\s*,\s*)?({[\s\w,]+})?\s+from\s+['"](?:.*\/)?([\w\-_]+)['"]/.exec(l))
+
+        const module = _.snakeCase(_module).toUpperCase()
+
+        if (module === 'COMMON') {
+          const componentPath = examplePath.split(__PATH_SEP__).splice(0, 2).join(__PATH_SEP__)
+          COMMON = require(`docs/app/Examples/${componentPath}/common`)
+        }
+
+        const constStatements = []
+        if (defaultImport) constStatements.push(`const ${defaultImport} = ${module}`)
+        if (destructuredImports) constStatements.push(`const ${destructuredImports} = ${module}`)
+        constStatements.push('\n')
+
+        return constStatements.join('\n')
       })
       .join('\n')
 
@@ -233,29 +245,29 @@ export default class ComponentExample extends Component {
       <Divider horizontal>
         <Menu text>
           <Menu.Item
-            active={copied || error} // to show the color
+            active={copied || !!error} // to show the color
             color={copied ? 'green' : color}
             onClick={this.copyJSX}
             icon={!copied && 'copy'}
             content={copied ? 'Copied!' : 'Copy'}
           />
           <Menu.Item
-            active={error} // to show the color
+            active={!!error} // to show the color
             color={color}
             icon='refresh'
             content='Reset'
             onClick={this.resetJSX}
           />
           <Menu.Item
-            active={error} // to show the color
+            active={!!error} // to show the color
             color={color}
             icon='github'
             content='Edit'
             href={ghEditHref}
             target='_blank'
           />
           <Menu.Item
-            active={error} // to show the color
+            active={!!error} // to show the color
             color={color}
             icon='bug'
             content='Issue'

docs/app/Components/ComponentDoc/ComponentExample.js

@@ -3,11 +3,6 @@ import React, { Component, PropTypes } from 'react'
 
 import { Label, Table } from 'src'
 
-const descriptionExtraStyle = {
-  fontSize: '0.95em',
-  color: '#777',
-}
-
 /**
  * Displays a table of a Component's PropTypes.
  */
@@ -25,26 +20,9 @@ export default class ComponentProps extends Component {
     meta: PropTypes.object,
   }
 
-  state = {
-    showEnumsFor: {},
-  }
-
-  toggleEnumsFor = (prop) => () => {
-    this.setState({
-      showEnumsFor: {
-        ...this.state.showEnumsFor,
-        [prop]: !this.state.showEnumsFor[prop],
-      },
-    })
-  }
+  renderName = item => <code>{item.name}</code>
 
-  renderName = (item) => <code>{item.name}</code>
-
-  requiredRenderer = (item) => {
-    if (!item.required) return null
-
-    return <Label size='mini' color='red' circular>required</Label>
-  }
+  requiredRenderer = item => item.required && <Label size='mini' color='red' circular>required</Label>
 
   renderDefaultValue = (item) => {
     let defaultValue = _.get(item, 'defaultValue.value')
@@ -62,49 +40,28 @@ export default class ComponentProps extends Component {
     )
   }
 
-  renderEnums = (item) => {
-    const { showEnumsFor } = this.state
-    const { meta } = this.props
-
-    if (item.type.indexOf('enum') === -1) return null
+  renderFunctionSignature = (item) => {
+    if (item.type !== '{func}') return
 
-    const values = meta.props[item.name]
-    const truncateAt = 30
+    const params = _.filter(item.tags, { title: 'param' })
+    const paramSignature = params
+      .map(param => `${param.name}: ${param.type.name}`)
+      .join(', ')
 
-    if (!values) return null
+    const paramDescriptions = params.map(param => (
+      <div style={{ color: '#888' }} key={param.name}>
+        <strong>{param.name}</strong> - {param.description}
+      </div>
+    ))
 
-    // show all if there are few
-    if (values.length < truncateAt) {
-      return (
-        <p style={descriptionExtraStyle}>
-          <strong>Enums: </strong>
-          {values.join(', ')}
-        </p>
-      )
-    }
+    const signature = <pre><code>{item.name}({paramSignature})</code></pre>
 
-    // add button to show more when there are many values and it is not toggled
-    if (!showEnumsFor[item.name]) {
-      return (
-        <p style={descriptionExtraStyle}>
-          <strong>Enums: </strong>
-          <a style={{ cursor: 'pointer' }} onClick={this.toggleEnumsFor(item.name)}>
-            Show all {values.length}
-          </a>
-          <div>{values.slice(0, truncateAt - 1).join(', ')}...</div>
-        </p>
-      )
-    }
-
-    // add "show more" button when there are many
     return (
-      <p style={descriptionExtraStyle}>
-        <strong>Enums: </strong>
-        <a style={{ cursor: 'pointer' }} onClick={this.toggleEnumsFor(item.name)}>
-          Show less
-        </a>
-        <div>{values.join(', ')}</div>
-      </p>
+      <div>
+        <strong>Signature:</strong>
+        {signature}
+        {paramDescriptions}
+      </div>
     )
   }
 
@@ -124,11 +81,13 @@ export default class ComponentProps extends Component {
         name,
         type,
         value,
+        tags: _.get(config, 'docBlock.tags'),
         required: config.required,
         defaultValue: config.defaultValue,
         description: description && description.split('\n').map(l => ([l, <br key={l} />])),
       }
     }), 'name')
+
     return (
       <Table data={content} className='very basic compact'>
         <Table.Header>
@@ -145,13 +104,11 @@ export default class ComponentProps extends Component {
             <Table.Row key={item.name}>
               <Table.Cell>{this.renderName(item)}</Table.Cell>
               <Table.Cell>{this.requiredRenderer(item)}</Table.Cell>
-              <Table.Cell>
-                {item.type}
-              </Table.Cell>
+              <Table.Cell>{item.type}</Table.Cell>
               <Table.Cell>{this.renderDefaultValue(item.defaultValue)}</Table.Cell>
               <Table.Cell>
                 {item.description && <p>{item.description}</p>}
-                {this.renderEnums(item)}
+                {this.renderFunctionSignature(item)}
               </Table.Cell>
             </Table.Row>
           ))}

docs/app/Components/ComponentDoc/ComponentProps.js

@@ -75,7 +75,7 @@ export default class IconSearch extends Component {
   renderIconColumn = (name) => (
     <Popup
       key={name}
-      mouseOverDelay={500}
+      mouseEnterDelay={500}
       inverted
       hoverable={false}
       size='mini'

docs/app/Components/IconSearch/IconSearch.js

@@ -2,7 +2,7 @@ import React from 'react'
 import { Select } from 'semantic-ui-react'
 
 import { countryOptions } from '../common'
-// [{ value: 'af', flag: 'af', text: 'Afghanistan' }, ...{}]
+// [{ key: 'af', value: 'af', flag: 'af', text: 'Afghanistan' }, ...{}]
 
 const SelectExample = () => (
   <Select placeholder='Select your country' options={countryOptions} />