diff --git a/config.js b/config.js index aaa3583ed7..f5b81ddd85 100644 --- a/config.js +++ b/config.js @@ -8,7 +8,6 @@ const __DEV__ = env === 'development' const __STAGING__ = env === 'staging' const __TEST__ = env === 'test' const __PROD__ = env === 'production' -const __BASE__ = '/' let config = { env, @@ -63,7 +62,7 @@ config = Object.assign({}, config, { compiler_lint: argv.lint !== false, compiler_quiet: false, compiler_output_path: paths.base(config.dir_docs_dist), - compiler_public_path: __PROD__ ? '//cdn.rawgit.com/Semantic-Org/Semantic-UI-React/gh-pages/' : __BASE__, + compiler_public_path: __PROD__ ? '//cdn.rawgit.com/Semantic-Org/Semantic-UI-React/gh-pages/' : '/', compiler_vendor: [ 'babel-standalone', 'brace', @@ -102,7 +101,6 @@ config = Object.assign({}, config, { NODE_ENV: JSON.stringify(env), }, }, - __BASE__: JSON.stringify(__BASE__), __DEV__, __DEBUG__: !!argv.debug, __STAGING__, diff --git a/docs/.eslintrc b/docs/.eslintrc index 898e121242..8af532ecd5 100644 --- a/docs/.eslintrc +++ b/docs/.eslintrc @@ -1,6 +1,5 @@ { "globals": { - "__BASE__": false, "__DEV__": false, "__DEBUG__": false, "__STAGING__": false, diff --git a/docs/app/App.js b/docs/app/App.js deleted file mode 100644 index 834506f1a0..0000000000 --- a/docs/app/App.js +++ /dev/null @@ -1,17 +0,0 @@ -import React, { Component } from 'react' -import { Router, useRouterHistory } from 'react-router' -import { createHistory } from 'history' - -import routes from './routes' - -const history = useRouterHistory(createHistory)({ - basename: __BASE__, -}) - -export default class App extends Component { - render() { - return ( - - ) - } -} diff --git a/docs/app/Components/ComponentDoc/ComponentDoc.js b/docs/app/Components/ComponentDoc/ComponentDoc.js index 56e045dc24..0201043867 100644 --- a/docs/app/Components/ComponentDoc/ComponentDoc.js +++ b/docs/app/Components/ComponentDoc/ComponentDoc.js @@ -2,7 +2,7 @@ import cx from 'classnames' import _ from 'lodash' import React, { Component, PropTypes } from 'react' import DocumentTitle from 'react-document-title' -import { Link } from 'react-router' +import { Link } from 'react-router-dom' import ComponentExamples from './ComponentExamples' import ComponentProps from './ComponentProps' diff --git a/docs/app/Components/Layout.js b/docs/app/Components/Layout.js index dd135c2310..839fe2b016 100644 --- a/docs/app/Components/Layout.js +++ b/docs/app/Components/Layout.js @@ -32,10 +32,9 @@ export default class Layout extends Component { scrollTo(0, 0) - anchors - .add('h2, h3, h4, h5, h6') - .remove([1, 2, 3, 4, 5, 6].map(n => `.rendered-example h${n}`).join(', ')) - .remove('.no-anchor') + anchors.add('h2, h3, h4, h5, h6') + anchors.remove([1, 2, 3, 4, 5, 6].map(n => `.rendered-example h${n}`).join(', ')) + anchors.remove('.no-anchor') this.scrollStartTimeout = setTimeout(this.scrollToAnchor, 500) } diff --git a/docs/app/Components/Logo/Logo.js b/docs/app/Components/Logo/Logo.js index c07ac6144a..b9ff73f244 100644 --- a/docs/app/Components/Logo/Logo.js +++ b/docs/app/Components/Logo/Logo.js @@ -2,7 +2,7 @@ import React from 'react' import { Image } from 'src' -const Logo = (props) => +const Logo = (props) => Logo.propTypes = Image.propTypes diff --git a/docs/app/Components/Root.js b/docs/app/Components/Root.js index 6222a89efa..87781608a5 100644 --- a/docs/app/Components/Root.js +++ b/docs/app/Components/Root.js @@ -10,13 +10,15 @@ import * as semanticUIReact from 'src' export default class Root extends Component { static propTypes = { children: PropTypes.node, - params: PropTypes.shape({ - name: PropTypes.string.isRequired, + match: PropTypes.shape({ + params: PropTypes.shape({ + name: PropTypes.string.isRequired, + }), }), } render() { - const { name } = this.props.params + const { name } = this.props.match.params const componentName = _.startCase(name).replace(/ /g, '') const component = semanticUIReact[componentName] if (!component || !component._meta || !META.isParent(component)) { diff --git a/docs/app/Components/Sidebar/Sidebar.js b/docs/app/Components/Sidebar/Sidebar.js index 5517437a9b..16a02f1781 100644 --- a/docs/app/Components/Sidebar/Sidebar.js +++ b/docs/app/Components/Sidebar/Sidebar.js @@ -1,7 +1,8 @@ import _ from 'lodash/fp' import React, { Component, PropTypes } from 'react' import { findDOMNode } from 'react-dom' -import { Link, routerShape } from 'react-router' +import { NavLink } from 'react-router-dom' +import { withRouter } from 'react-router' import pkg from 'package.json' import { typeOrder, parentComponents, repoURL } from 'docs/app/utils' @@ -16,9 +17,9 @@ import { const getRoute = (_meta) => `/${_meta.type}s/${_.kebabCase(_meta.name)}` const MenuItem = ({ meta, children, ...rest }) => ( - + {children || meta.name} - + ) MenuItem.propTypes = { activeClassName: PropTypes.string, @@ -33,11 +34,11 @@ MenuItem.defaultProps = { } const selectedItemLabel = Press Enter -export default class Sidebar extends Component { - static contextTypes = { - router: routerShape, - } +class Sidebar extends Component { static propTypes = { + match: PropTypes.object.isRequired, + location: PropTypes.object.isRequired, + history: PropTypes.object.isRequired, style: PropTypes.object, } state = { query: '' } @@ -82,13 +83,13 @@ export default class Sidebar extends Component { }) handleSearchKeyDown = e => { - const { router } = this.context + const { history } = this.props const { selectedItemIndex } = this.state const code = keyboardKey.getCode(e) if (code === keyboardKey.Enter && this.selectedRoute) { e.preventDefault() - router.push(this.selectedRoute) + history.push(this.selectedRoute) this.selectedRoute = null this._searchInput.blur() this.setState({ query: '' }) @@ -117,7 +118,7 @@ export default class Sidebar extends Component { key={_meta.name} name={_meta.name} onClick={this.handleItemClick} - as={Link} + as={NavLink} to={getRoute(_meta)} activeClassName='active' /> @@ -161,7 +162,7 @@ export default class Sidebar extends Component { name={_meta.name} onClick={this.handleItemClick} active={isSelected} - as={Link} + as={NavLink} to={getRoute(_meta)} > {_meta.name} @@ -188,10 +189,10 @@ export default class Sidebar extends Component { Getting Started - + Introduction - + Usage @@ -217,3 +218,5 @@ export default class Sidebar extends Component { ) } } + +export default withRouter(Sidebar) diff --git a/docs/app/Components/TAAttribution/TAAttribution.js b/docs/app/Components/TAAttribution/TAAttribution.js index f39ce662a3..8f53d393e8 100644 --- a/docs/app/Components/TAAttribution/TAAttribution.js +++ b/docs/app/Components/TAAttribution/TAAttribution.js @@ -68,7 +68,7 @@ class TAAttribution extends Component { inline verticalAlign='middle' style={imageStyle} - src={`${__BASE__}assets/technologyadvice-logo-dark.png`} + src='/assets/technologyadvice-logo-dark.png' /> ) diff --git a/docs/app/Views/Introduction.js b/docs/app/Views/Introduction.js index 4ffb2ed971..0723a7abcb 100644 --- a/docs/app/Views/Introduction.js +++ b/docs/app/Views/Introduction.js @@ -1,5 +1,5 @@ import React, { PropTypes } from 'react' -import { Link } from 'react-router' +import { Link } from 'react-router-dom' import Editor from 'docs/app/Components/Editor/Editor' import pkg from 'package.json' import { @@ -100,7 +100,7 @@ const HeaderAugmentationJSX = `
const HeaderAugmentationHTML = `

Learn More

` -const MenuItemLinkAugmentationJSX = `import { Link } from 'react-router' +const MenuItemLinkAugmentationJSX = `import { Link } from 'react-router-dom' diff --git a/docs/app/index.ejs b/docs/app/index.ejs index 4087e4eda9..25169289b2 100644 --- a/docs/app/index.ejs +++ b/docs/app/index.ejs @@ -2,7 +2,7 @@ - /> + Semantic UI React diff --git a/docs/app/index.js b/docs/app/index.js index 034d5e2332..11364ca297 100644 --- a/docs/app/index.js +++ b/docs/app/index.js @@ -1,6 +1,6 @@ import React from 'react' import ReactDOM from 'react-dom' -import App from './App' +import Router from './routes' // ---------------------------------------- // Rendering @@ -18,13 +18,13 @@ const render = (NewApp) => ReactDOM.render(, mountNode) if (__DEV__) { // When the application source code changes, re-render the whole thing. if (module.hot) { - module.hot.accept('./App', () => { + module.hot.accept('./routes', () => { // restore scroll const { scrollLeft, scrollTop } = document.scrollingElement ReactDOM.unmountComponentAtNode(mountNode) try { - render(require('./App').default) + render(require('./routes').default) document.scrollingElement.scrollTop = scrollTop document.scrollingElement.scrollLeft = scrollLeft } catch (e) { @@ -38,4 +38,4 @@ if (__DEV__) { // Start the app // ---------------------------------------- -render(App) +render(Router) diff --git a/docs/app/routes.js b/docs/app/routes.js index 9e471b1b0c..0887c99cdf 100644 --- a/docs/app/routes.js +++ b/docs/app/routes.js @@ -1,21 +1,27 @@ import React from 'react' -import { Route, IndexRedirect } from 'react-router' - +import { + BrowserRouter, + Route, + Redirect, +} from 'react-router-dom' import Root from './Components/Root' import Layout from './Components/Layout' import Introduction from './Views/Introduction' import Usage from './Views/Usage' import PageNotFound from './Views/PageNotFound' -const routes = ( - - +const RedirectToIntro = () => - - - - - +const Router = () => ( + + + + + + + + + ) -export default routes +export default Router diff --git a/package.json b/package.json index 3ee94200c2..d6e1d4956c 100644 --- a/package.json +++ b/package.json @@ -120,7 +120,8 @@ "react-docgen": "^2.13.0", "react-document-title": "^2.0.2", "react-dom": "15.4.2", - "react-router": "^3.0.2", + "react-router": "^4.0.0", + "react-router-dom": "^4.0.0", "require-dir": "^0.3.0", "rimraf": "^2.5.2", "sass-loader": "^4.0.2",