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

…React into next # Conflicts: # docs/app/Views/Theming.js # yarn.lock
Semantic-Org · Apr 30, 2018 · 9d0e2dd · 9d0e2dd
2 parents b3d8eda + cc7d9ee
commit 9d0e2dd
Show file tree

Hide file tree

Showing 36 changed files with 1,917 additions and 772 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,16 @@
+.github/
+
+# editor configs
+.idea/
+.vscode/
+
+
+coverage/
+
+dist/
+dll/
+docs/app/docgenInfo.json
+docs/app/menuInfo.jso
+docs/build/
+
+package.json
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "http://json.schemastore.org/prettierrc",
+  "printWidth": 120,
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "overrides": [
+    {
+      "files": ".prettierrc",
+      "options": {
+        "parser": "json"
+      }
+    },
+    {
+      "files": "*.{ts,tsx}",
+      "options": {
+        "semi": true
+      }
+    }
+  ]
+}
diff --git a/README.md b/README.md
@@ -46,6 +46,7 @@ See the [Documentation][2] for an introduction, usage information, and extensive
 
 <img align="left" height="50" src="https://github.com/Semantic-Org/Semantic-UI-React/raw/master/docs/app/amazon-logo.png" />
 <img align="left" height="50" src="https://github.com/Semantic-Org/Semantic-UI-React/raw/master/docs/app/netflix-logo.png" />
+<img align="left" height="50" src="https://github.com/Semantic-Org/Semantic-UI-React/raw/master/docs/app/microsoft-logo.png" />
 <a href="https://github.com/Semantic-Org/Semantic-UI-React/edit/master/README.md">
   <img height="50" src="https://github.com/Semantic-Org/Semantic-UI-React/raw/master/docs/app/add-yours.png" />
 </a>
@@ -54,6 +55,7 @@ These great products are built on Semantic UI React. Add yours [here][22].
 
 - Netflix's Edge Developer Experience team's numerous [internal apps](https://github.com/Semantic-Org/Semantic-UI-React/issues/1604)
 - Amazon Publishing — the full-service publisher of Amazon — [APub.com](https://amazonpublishing.amazon.com)
+- Microsoft's [Teams](https://products.office.com/en-US/microsoft-teams/group-chat-software) prototyping
 - https://gitconnected.com - The community for developers and software engineers
 - http://stoplight.io
 - https://roadmap.space

diff --git a/docs/app/Components/CarbonAd/CarbonAd.js b/docs/app/Components/CarbonAd/CarbonAd.js
@@ -1,61 +1,35 @@
-import React, { Component } from 'react'
 import _ from 'lodash'
+import React, { Component } from 'react'
 
-const transitionTime = 200
+const style = { minHeight: 173 }
 
 class CarbonAd extends Component {
-  state = {
-    opacity: 1,
-  }
-
   componentDidMount() {
-    this.lastPath = location.pathname
+    this.lastHref = location.href
 
-    this.refresh()
-  }
+    const script = document.createElement('script')
+    script.async = true
+    script.id = '_carbonads_js'
+    script.type = 'text/javascript'
+    script.src = '//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=reactsemanticuicom'
 
-  componentDidUpdate() {
-    if (location.pathname !== this.lastPath) {
-      this.lastPath = location.pathname
-      this.refresh()
-    }
+    this.ifRef(ref => ref.appendChild(script))
   }
 
-  refresh = () => {
-    this.setState({ opacity: 0 })
-
-    setTimeout(() => {
+  componentWillUpdate() {
+    if (location.href !== this.lastHref) {
+      this.lastHref = location.href
       _.invoke(window._carbonads, 'refresh')
+    }
+  }
 
-      setTimeout(() => {
-        this.setState({ opacity: 1 })
-      }, transitionTime)
-    }, transitionTime)
+  ifRef = (cb) => {
+    const ref = document.querySelector('#docs-carbonads')
+    if (ref) cb(ref)
   }
 
   render() {
-    const { opacity } = this.state
-
-    const style = {
-      transition: `opacity ${transitionTime}ms`,
-      minHeight: 173,
-      opacity,
-    }
-
-    return (
-      <div style={style}>
-        {/*
-          Heads up!
-          This script is loaded in index.html. The script requires the markup here to match in order to work.
-        */}
-        <script
-          async
-          id='_carbonads_js'
-          type='text/javascript'
-          src='//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=reactsemanticuicom'
-        />
-      </div>
-    )
+    return <div id='docs-carbonads' style={style} />
   }
 }
 

diff --git a/docs/app/Components/ComponentDoc/ComponentExample/ComponentExample.js b/docs/app/Components/ComponentDoc/ComponentExample/ComponentExample.js
@@ -200,7 +200,7 @@ class ComponentExample extends 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(/(^[\s\S])*import[\s\S]*from[\s\S]*['"]\n/.exec(sourceCode), '[0]', '')
       .replace(/[\s\n]+/g, ' ')         // normalize spaces and make one line
       .replace(/ import/g, '\nimport')  // one import per line
       .split('\n')                      // split lines

diff --git a/docs/app/Components/Sidebar/Sidebar.js b/docs/app/Components/Sidebar/Sidebar.js
@@ -189,9 +189,6 @@ class Sidebar extends Component {
             <small><em>{pkg.version}</em></small>
           </strong>
         </Menu.Item>
-        <Menu.Item>
-          <CarbonAd />
-        </Menu.Item>
         <Menu.Item>
           <Menu.Header>Getting Started</Menu.Header>
           <Menu.Menu>
@@ -216,10 +213,13 @@ class Sidebar extends Component {
           </Menu.Menu>
         </Menu.Item>
         <Menu.Item>
+          <CarbonAd />
+        </Menu.Item>
+        <Menu.Item active>
           <Input
             className='transparent inverted icon'
             icon='search'
-            placeholder='Start typing...'
+            placeholder='Search components...'
             value={query}
             onChange={this.handleSearchChange}
             onKeyDown={this.handleSearchKeyDown}

diff --git a/...ctions/Table/Types/TableExampleStriped.js → .../Table/Types/TableExampleCelledStriped.js b/...ctions/Table/Types/TableExampleStriped.js → .../Table/Types/TableExampleCelledStriped.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Icon, Table } from 'semantic-ui-react'
 
-const TableExampleStriped = () => (
+const TableExampleCelledStriped = () => (
   <Table celled striped>
     <Table.Header>
       <Table.Row>
@@ -15,7 +15,9 @@ const TableExampleStriped = () => (
           <Icon name='folder' /> node_modules
         </Table.Cell>
         <Table.Cell>Initial commit</Table.Cell>
-        <Table.Cell collapsing textAlign='right'>10 hours ago</Table.Cell>
+        <Table.Cell collapsing textAlign='right'>
+          10 hours ago
+        </Table.Cell>
       </Table.Row>
       <Table.Row>
         <Table.Cell>
@@ -49,4 +51,4 @@ const TableExampleStriped = () => (
   </Table>
 )
 
-export default TableExampleStriped
+export default TableExampleCelledStriped
diff --git a/docs/app/Examples/collections/Table/Types/index.js b/docs/app/Examples/collections/Table/Types/index.js
@@ -12,7 +12,7 @@ const Types = () => (
     />
     <ComponentExample examplePath='collections/Table/Types/TableExamplePadded' />
     <ComponentExample examplePath='collections/Table/Types/TableExampleCollapsing' />
-    <ComponentExample examplePath='collections/Table/Types/TableExampleStriped' />
+    <ComponentExample examplePath='collections/Table/Types/TableExampleCelledStriped' />
 
     <ComponentExample
       title='Definition'

diff --git a/docs/app/Examples/elements/List/ContentVariations/index.js b/docs/app/Examples/elements/List/ContentVariations/index.js
@@ -13,7 +13,7 @@ const ListContentVariations = () => (
 
     <ComponentExample
       title='Floated'
-      description='An list, or an element inside a list can be floated left or right'
+      description='A list, or an element inside a list can be floated left or right'
       examplePath='elements/List/ContentVariations/ListExampleFloated'
     />
     <ComponentExample examplePath='elements/List/ContentVariations/ListExampleFloatedHorizontal' />

diff --git a/docs/app/Examples/elements/List/Variations/index.js b/docs/app/Examples/elements/List/Variations/index.js
@@ -5,7 +5,7 @@ import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
 
 const ListVariations = () => (
-  <ExampleSection title='Types'>
+  <ExampleSection title='Variations'>
     <ComponentExample
       title='Horizontal'
       description='A list can be formatted to have items appear horizontally'

diff --git a/docs/app/Layouts/GridLayout.js b/docs/app/Layouts/GridLayout.js
@@ -82,7 +82,7 @@ const GridLayout = () => (
       <Header as='h3'>Text Container</Header>
       <p>
         Sometimes you just need to put a single column of centered text on a page. A <code>text container</code> is
-        a special type of container optimized for a single flowing column of text, like this instructions on this page.
+        a special type of container optimized for a single flowing column of text, like these instructions on this page.
       </p>
       <p>Text containers <b>do not need to use grids</b> and help simplify basic page layouts.</p>
 
@@ -204,7 +204,7 @@ const GridLayout = () => (
 
       <Divider horizontal section>Vertically Divided Grid</Divider>
 
-      <Grid divided='verticallly'>
+      <Grid divided='vertically'>
         <Grid.Row>
           <Grid.Column width={4} />
           <Grid.Column width={4} />

diff --git a/docs/app/Views/Theming.js b/docs/app/Views/Theming.js
@@ -25,14 +25,14 @@ const LayoutsExample = () => (
         content='Learn more about theming'
         labelPosition='right'
         href='https://semantic-ui.com/usage/theming.html'
-        icon='external alternate'
+        icon='external'
         target='_blank'
       />
       <Button
         content='Creating themes'
         labelPosition='right'
         href='http://learnsemantic.com/themes/creating.html'
-        icon='external alternate'
+        icon='external'
         target='_blank'
       />
 

diff --git a/docs/app/Views/Usage.js b/docs/app/Views/Usage.js
@@ -74,7 +74,7 @@ const Usage = () => (
       <Header as='h3'>Content Delivery Network (CDN)</Header>
       <p>
         You can use the default Semantic UI stylesheet by including a Semantic UI CDN link in your
-        <em>index.html</em> file.
+        <em> index.html</em> file.
       </p>
       <p>
         This is the quickest way to get started with Semantic UI React. You won't be able to use

diff --git a/docs/app/amazon-logo.png b/docs/app/amazon-logo.png
diff --git a/docs/app/index.ejs b/docs/app/index.ejs
@@ -23,13 +23,6 @@
       }
     })()
   </script>
-  <!-- Heads up! -->
-  <!-- This script is loaded in CarbonAds.js.  The script requires the markup here to match in order to work. -->
-  <script
-    async
-    type='text/javascript'
-    src='//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=reactsemanticuicom'>
-  </script>
 </head>
 <body class="dimmed dimmable">
   <div id="docs-loading-dimmer" class="ui active page dimmer">

diff --git a/docs/app/microsoft-logo.png b/docs/app/microsoft-logo.png
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "semantic-ui-react",
-  "version": "0.79.0",
+  "version": "0.79.1",
   "description": "The official Semantic-UI-React integration.",
   "jsnext:main": "dist/es/index.js",
   "main": "dist/commonjs/index.js",
@@ -24,12 +24,13 @@
     "build:docs-toc": "doctoc ./.github/CONTRIBUTING.md --github --maxlevel 4",
     "build:docs-cname": "echo react.semantic-ui.com > docs/build/CNAME",
     "build:changelog": "github_changelog_generator --no-issues --no-unreleased --release-branch master --since-tag $(git describe --abbrev=0 --tags $(git rev-parse HEAD~400))",
-    "deploy:changelog": "git add CHANGELOG.md && git commit -m 'docs(changelog): update changelog [ci skip]' && git push",
     "predeploy:docs": "cross-env NODE_ENV=production yarn build:docs && yarn build:docs-cname",
     "deploy:docs": "gh-pages -d docs/build -m 'deploy docs [ci skip]'",
-    "postdeploy:docs": "yarn build:changelog && yarn deploy:changelog",
     "lint": "cross-env NODE_ENV=production eslint .",
     "lint:fix": "yarn lint --fix",
+    "prettier": "prettier --list-different \"**/*.{js,jsx,ts,tsx}\"",
+    "prettier:fix": "prettier --write \"**/*.{js,jsx,ts,tsx}\"",
+    "precommit": "lint-staged",
     "prerelease": "yarn lint && yarn tsd:lint && yarn tsd:test && yarn test && cross-env NODE_ENV=production yarn build",
     "postrelease": "yarn deploy:docs",
     "release:major": "yarn prerelease && ta-script npm/release major && yarn postrelease",
@@ -46,6 +47,18 @@
     "tsd:lint:fix": "yarn tsd:lint --fix",
     "tsd:test": "yarn tsd && tsc -p ./ && rm test/typings.js"
   },
+  "lint-staged": {
+    "**/*.{js,jsx}": [
+      "prettier --write",
+      "eslint --fix",
+      "git add"
+    ],
+    "**/*.{ts,tsx}": [
+      "prettier --write",
+      "tslint --fix",
+      "git add"
+    ]
+  },
   "repository": {
     "type": "git",
     "url": "git+ssh://github.com/Semantic-Org/Semantic-UI-React.git"
@@ -108,6 +121,7 @@
     "gulp-rename": "^1.2.2",
     "gulp-util": "^3.0.8",
     "html-webpack-plugin": "^2.30.1",
+    "husky": "^0.14.3",
     "imports-loader": "^0.7.1",
     "js-beautify": "^1.6.14",
     "json-loader": "^0.5.7",
@@ -119,8 +133,10 @@
     "karma-mocha-reporter": "^2.2.3",
     "karma-webpack-with-fast-source-maps": "^1.10.2",
     "leven": "^2.1.0",
+    "lint-staged": "^7.0.2",
     "mocha": "^3.5.0",
     "node-sass": "^4.5.3",
+    "prettier": "1.12.0",
     "puppeteer": "^0.10.1",
     "raw-loader": "^0.5.1",
     "react": "^16.0.0",

diff --git a/src/addons/Responsive/Responsive.d.ts b/src/addons/Responsive/Responsive.d.ts
@@ -12,6 +12,12 @@ export interface ResponsiveProps {
   /** Fires callbacks immediately after mount. */
   fireOnMount?: boolean;
 
+  /**
+   * Called to get width of screen. Defaults to using `window.innerWidth` when in a browser;
+   * otherwise, assumes a width of 0.
+   */
+  getWidth?: () => number;
+
   /** The maximum width at which content will be displayed. */
   maxWidth?: number | string;