Merge branch 'master' of https://github.com/Semantic-Org/Semantic-UI-…

…React into styte/search
Semantic-Org · Jan 13, 2017 · 8f862ad · 8f862ad
2 parents a7e183f + b7ffa6a
commit 8f862ad
Show file tree

Hide file tree

Showing 17 changed files with 249 additions and 282 deletions.
diff --git a/.babelrc b/.babelrc
@@ -5,7 +5,15 @@
     "stage-1"
   ],
   "plugins": [
-    "lodash"
+    "lodash",
+    "transform-react-handled-props",
+    ["transform-react-remove-prop-types", {
+      "mode": "wrap"
+    }],
+    ["transform-runtime", {
+      "polyfill": false,
+      "regenerator": false
+    }]
   ],
   "env": {
     "test": {

diff --git a/.github/CONTRIBUTING.md b/.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
 

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,23 @@
 # Change Log
 
+## [v0.64.0](https://github.com/Semantic-Org/Semantic-UI-React/tree/v0.64.0) (2017-01-13)
+[Full Changelog](https://github.com/Semantic-Org/Semantic-UI-React/compare/v0.63.6...v0.64.0)
+
+**Implemented enhancements:**
+
+- perf\(props\): Remove propTypes from production build [\#731](https://github.com/Semantic-Org/Semantic-UI-React/pull/731) ([layershifter](https://github.com/layershifter))
+
+**Fixed bugs:**
+
+- Typings: Modal [\#1152](https://github.com/Semantic-Org/Semantic-UI-React/issues/1152)
+- fix\(Table\): Cannot convert a Symbol value to a string [\#1057](https://github.com/Semantic-Org/Semantic-UI-React/issues/1057)
+
+**Merged pull requests:**
+
+- fix\(typings\): fix Modal mountnode -\> mountNode [\#1153](https://github.com/Semantic-Org/Semantic-UI-React/pull/1153) ([levithomason](https://github.com/levithomason))
+- feat\(typings\): add closeOnBlur and openOnFocus [\#1151](https://github.com/Semantic-Org/Semantic-UI-React/pull/1151) ([levithomason](https://github.com/levithomason))
+- breaking\(shorthand\): only generate keys from strings and numbers [\#1062](https://github.com/Semantic-Org/Semantic-UI-React/pull/1062) ([levithomason](https://github.com/levithomason))
+
 ## [v0.63.6](https://github.com/Semantic-Org/Semantic-UI-React/tree/v0.63.6) (2017-01-11)
 [Full Changelog](https://github.com/Semantic-Org/Semantic-UI-React/compare/v0.63.5...v0.63.6)
 

diff --git a/docs/app/Components/ComponentDoc/ComponentProps.js b/docs/app/Components/ComponentDoc/ComponentProps.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,52 +40,6 @@ export default class ComponentProps extends Component {
     )
   }
 
-  renderEnums = (item) => {
-    const { showEnumsFor } = this.state
-    const { meta } = this.props
-
-    if (item.type.indexOf('enum') === -1) return null
-
-    const values = meta.props[item.name]
-    const truncateAt = 30
-
-    if (!values) return null
-
-    // show all if there are few
-    if (values.length < truncateAt) {
-      return (
-        <p style={descriptionExtraStyle}>
-          <strong>Enums: </strong>
-          {values.join(', ')}
-        </p>
-      )
-    }
-
-    // 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>
-    )
-  }
-
   render() {
     const { props: propsDefinition } = this.props
     const content = _.sortBy(_.map(propsDefinition, (config, name) => {
@@ -129,6 +61,7 @@ export default class ComponentProps extends Component {
         description: description && description.split('\n').map(l => ([l, <br key={l} />])),
       }
     }), 'name')
+
     return (
       <Table data={content} className='very basic compact'>
         <Table.Header>
@@ -145,14 +78,9 @@ 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)}
-              </Table.Cell>
+              <Table.Cell>{item.description && <p>{item.description}</p>}</Table.Cell>
             </Table.Row>
           ))}
         </Table.Body>

diff --git a/docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbExampleProps.js b/docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbExampleProps.js
@@ -2,9 +2,9 @@ import React from 'react'
 import { Breadcrumb } from 'semantic-ui-react'
 
 const sections = [
-  { content: 'Home', link: true },
-  { content: 'Store', link: true },
-  { content: 'T-Shirt', active: true },
+  { key: 'Home', content: 'Home', link: true },
+  { key: 'Store', content: 'Store', link: true },
+  { key: 'Shirt', content: 'T-Shirt', active: true },
 ]
 
 const BreadcrumbExampleProps = () => (

diff --git a/docs/app/Examples/collections/Menu/Types/MenuExampleProps.js b/docs/app/Examples/collections/Menu/Types/MenuExampleProps.js
@@ -1,16 +1,14 @@
-import React, { Component } from 'react'
+import React from 'react'
 import { Menu } from 'semantic-ui-react'
 
-export default class MenuExampleProps extends Component {
-  state = {}
+const items = [
+  { key: 'editorials', active: true, name: 'Editorials' },
+  { key: 'review', name: 'Reviews' },
+  { key: 'events', name: 'Upcoming Events' },
+]
 
-  render() {
-    const items = [
-      { active: true, name: 'Editorials' },
-      { name: 'Reviews' },
-      { name: 'Upcoming Events' },
-    ]
+const MenuExampleProps = () => (
+  <Menu items={items} />
+)
 
-    return <Menu items={items} />
-  }
-}
+export default MenuExampleProps
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "semantic-ui-react",
-  "version": "0.63.6",
+  "version": "0.64.0",
   "description": "The official Semantic-UI-React integration.",
   "main": "dist/commonjs/index.js",
   "files": [
@@ -59,6 +59,11 @@
     "babel-loader": "^6.2.8",
     "babel-plugin-__coverage__": "^11.0.0",
     "babel-plugin-lodash": "^3.2.10",
+    "babel-plugin-react-transform": "^2.0.2",
+    "babel-plugin-transform-react-constant-elements": "^6.9.1",
+    "babel-plugin-transform-react-handled-props": "^0.2.1",
+    "babel-plugin-transform-react-remove-prop-types": "^0.2.10",
+    "babel-plugin-transform-runtime": "^6.15.0",
     "babel-preset-es2015": "^6.18.0",
     "babel-preset-react": "^6.5.0",
     "babel-preset-stage-1": "^6.5.0",

diff --git a/src/elements/Rail/Rail.js b/src/elements/Rail/Rail.js
@@ -47,11 +47,6 @@ function Rail(props) {
 Rail._meta = {
   name: 'Rail',
   type: META.TYPES.ELEMENT,
-  props: {
-    close: ['very'],
-    position: SUI.FLOATS,
-    size: _.without(SUI.SIZES, 'medium'),
-  },
 }
 
 Rail.propTypes = {
@@ -70,7 +65,7 @@ Rail.propTypes = {
   /** A rail can appear closer to the main viewport. */
   close: PropTypes.oneOfType([
     PropTypes.bool,
-    PropTypes.oneOf(Rail._meta.props.close),
+    PropTypes.oneOf(['very']),
   ]),
 
   /** A rail can create a division between itself and a container. */
@@ -80,10 +75,10 @@ Rail.propTypes = {
   internal: PropTypes.bool,
 
   /** A rail can be presented on the left or right side of a container. */
-  position: PropTypes.oneOf(Rail._meta.props.position).isRequired,
+  position: PropTypes.oneOf(SUI.FLOATS).isRequired,
 
   /** A rail can have different sizes. */
-  size: PropTypes.oneOf(Rail._meta.props.size),
+  size: PropTypes.oneOf(_.without(SUI.SIZES, 'medium')),
 }
 
 export default Rail