docs(webpack): add webpack3 boilerplate with theming

.eslintignore

@@ -1,4 +1,5 @@
 coverage/*
 dist/*
 docs/build/*
+examples/webpack3/scripts/*
 dll/*

README.md

@@ -75,11 +75,8 @@ These great products are built on Semantic UI React. Add yours [here][22].
 
 This is a listing of example projects and guides that will help you integrate Semantic UI React into your new or existing projects.
 
-### [webpack1][28]
-Our example project right [here][28] in this repo.
-
-### [webpack2][29]
-Our example project right [here][29] in this repo.
+### [webpack][28]
+Our example project right [here][28] in this repo. Includes theming examples.
 
 ### [SUIcrux][102]
 Advanced universal starter with Semantic-UI-React. React/Redux/Lazy-loading/SSR/PWA.
@@ -199,12 +196,11 @@ Big thanks to our [contributors][20], especially:
 [21]: /~https://github.com/Semantic-Org/Semantic-UI-React/labels/good%20first%20issue
 [22]: /~https://github.com/Semantic-Org/Semantic-UI-React/edit/master/README.md
 [23]: https://react.semantic-ui.com/usage#css
-[24]: https://github.com/Semantic-Org/Semantic-UI-React/issues/802#issuecomment-258990274
+[24]: https://medium.com/webmonkeys/webpack-2-semantic-ui-theming-a216ddf60daf
 [25]: http://learnsemantic.com/themes/creating.html
 [26]: /~https://github.com/levithomason
 [27]: /~https://github.com/layershifter
-[28]: /~https://github.com/Semantic-Org/Semantic-UI-React/tree/master/examples/webpack1
-[29]: /~https://github.com/Semantic-Org/Semantic-UI-React/tree/master/examples/webpack2
+[28]: /~https://github.com/Semantic-Org/Semantic-UI-React/tree/master/examples/webpack3
 [30]: /~https://github.com/Semantic-Org/Semantic-UI-Meteor
 
 <!-- Examples -->

docs/app/Components/Sidebar/Sidebar.js

@@ -197,6 +197,9 @@ class Sidebar extends Component {
             <Menu.Item as={NavLink} to='/usage' activeClassName='active'>
               Usage
             </Menu.Item>
+            <Menu.Item as={NavLink} to='/theming' activeClassName='active'>
+              Theming
+            </Menu.Item>
             <Menu.Item as={NavLink} to='/layouts' activeClassName='active'>
               Layouts
             </Menu.Item>

docs/app/Views/Theming.js

@@ -0,0 +1,84 @@
+import React from 'react'
+import { Button, Container, Header, Segment } from 'semantic-ui-react'
+
+const LayoutsExample = () => (
+  <Container>
+    <Segment basic padded>
+      <Header
+        as='h1'
+        content='Theming'
+        subheader='An introduction to theming'
+      />
+    </Segment>
+
+    <Segment basic padded>
+      <Header as='h2' content='Preface' dividing />
+      <p>
+        Semantic UI React does not have own styling system and fully relies on the theming of Semantic UI. It's really
+        powerful, you don't need to know LESS or CSS you can simply update values of variables or use styles from
+        predefined themes.
+      </p>
+      <p>
+        In fact, all you know about theming and styling of Semantic UI is fully applicable to Semantic UI React.
+      </p>
+      <Button
+        content='Learn more about theming'
+        labelPosition='right'
+        href='https://semantic-ui.com/usage/theming.html'
+        icon='external link'
+        target='_blank'
+      />
+      <Button
+        content='Creating themes'
+        labelPosition='right'
+        href='http://learnsemantic.com/themes/creating.html'
+        icon='external link'
+        target='_blank'
+      />
+
+      <Header as='h2' content='Quick start' dividing />
+      <p>
+        Semantic UI offers its own build system that uses Gulp and produces prepared CSS files. It makes sense to use it
+        with Create React App as it does not support LESS loader.
+      </p>
+      <p>
+        In all other cases we recommend to use the LESS package and tune it into your build system with Webpack. The
+        LESS package also does not depend on Gulp and other cruft things. However, this package is not friendly for
+        Webpack and requires additional configuration.
+      </p>
+      <Button
+        content='Semantic UI LESS'
+        labelPosition='right'
+        href='/~https://github.com/Semantic-Org/Semantic-UI-LESS'
+        icon='github'
+        target='_blank'
+      />
+      <Button
+        content='Configuring Webpack'
+        labelPosition='right'
+        href='https://medium.com/webmonkeys/webpack-2-semantic-ui-theming-a216ddf60daf'
+        icon='medium'
+        target='_blank'
+      />
+
+      <Header as='h2' content='Boilerplate' dividing />
+      <p>
+        The boilerplate we prepared is powered by the latest Webpack and includes the all required things for quick
+        start like preconfigured theming and hot module reload.
+      </p>
+      <p>
+        The boilerplate is optimized for usage with Semantic UI React and Semantic UI LESS, it also contains examples
+        of theming usage and custom components.
+      </p>
+      <Button
+        content='Boilerplate'
+        labelPosition='right'
+        href='/~https://github.com/Semantic-Org/Semantic-UI-React/tree/master/examples/webpack3'
+        icon='github'
+        target='_blank'
+      />
+    </Segment>
+  </Container>
+)
+
+export default LayoutsExample

docs/app/Views/Usage.js

@@ -151,33 +151,9 @@ const Usage = () => (
         of them. You can use them as start point for your projects.
       </p>
 
-      <Header as='h3'>Webpack 1</Header>
+      <Header as='h3'>Webpack 3</Header>
       <p>
-        Webpack 1 fully supports Semantic UI React, however we don't recommend to use it because it's deprecated.
-        Please ensure that you build your app in production mode before release, it will strip <code>propTypes</code>
-        from your build.
-      </p>
-      <p>
-        Because Webpack 1 doesn't support tree shaking we recommend to use <code>babel-plugin-lodash</code> in your
-        builds. You can find example configuration in <code>examples</code> directory of Semantic UI React.
-      </p>
-
-      <Button
-        content='Example configuration'
-        href='/~https://github.com/Semantic-Org/Semantic-UI-React/tree/master/examples/webpack1'
-        icon='github'
-        labelPosition='left'
-      />
-      <Button
-        content='babel-plugin-lodash'
-        href='/~https://github.com/lodash/babel-plugin-lodash'
-        icon='github'
-        labelPosition='left'
-      />
-
-      <Header as='h3'>Webpack 2</Header>
-      <p>
-        Webpack 2 fully supports Semantic UI React, it also supports tree shaking. Please ensure that you build your app
+        Webpack 3 fully supports Semantic UI React, it also supports Tree Shaking. Please ensure that you build your app
         in production mode before release, it will strip <code>propTypes</code> from your build.
       </p>
 
@@ -237,20 +213,27 @@ const Usage = () => (
           />
         </List>
         <p>
-          Semantic UI React imports will be not optimized, so we recommend to use <code>babel-plugin-lodash</code> in
-          your builds. You can find example configuration in <code>examples</code> directory.
+          Semantic UI React imports will be not optimized, so we recommend to use
+          <code>babel-plugin-direct-import</code> in your builds. You can find example configuration in
+          <code>examples/webpack3</code> directory.
         </p>
       </Message>
 
       <Button
-        content='Example configuration'
-        href='/~https://github.com/Semantic-Org/Semantic-UI-React/tree/master/examples/webpack2'
+        content='Webpack boilerplate'
+        href='/~https://github.com/Semantic-Org/Semantic-UI-React/tree/master/examples/webpack3'
+        icon='github'
+        labelPosition='left'
+      />
+      <Button
+        content='Example configuration of plugin'
+        href='/~https://github.com/Semantic-Org/Semantic-UI-React/tree/master/examples/webpack3/.babelrc'
         icon='github'
         labelPosition='left'
       />
       <Button
-        content='babel-plugin-lodash'
-        href='/~https://github.com/lodash/babel-plugin-lodash'
+        content='babel-plugin-direct-import'
+        href='/~https://github.com/umidbekkarimov/babel-plugin-direct-import'
         icon='github'
         labelPosition='left'
       />

docs/app/routes.js

@@ -15,6 +15,7 @@ import LayoutsRoot from './Components/LayoutsRoot'
 import Introduction from './Views/Introduction'
 import Layouts from './Views/Layouts'
 import PageNotFound from './Views/PageNotFound'
+import Theming from './Views/Theming'
 import Usage from './Views/Usage'
 
 const RedirectToIntro = () => <Redirect to='/introduction' />
@@ -28,6 +29,7 @@ const Router = () => (
         <DocsLayout exact path='/introduction' component={Introduction} />
         <DocsLayout exact path='/layouts' component={Layouts} />
         <LayoutsLayout exact path='/layouts/:name' component={LayoutsRoot} sidebar />
+        <DocsLayout exact path='/theming' component={Theming} />
         <DocsLayout exact path='/usage' component={Usage} />
         <DocsLayout exact path='/:type/:name' component={DocsRoot} sidebar />
         <DocsLayout exact path='/*' component={PageNotFound} />

examples/webpack1/README.md

@@ -0,0 +1,3 @@
+# Deprecated
+
+See [our boilerplate](../webpack3) for Webpack 3

examples/webpack2/README.md

@@ -0,0 +1,3 @@
+# Deprecated
+
+See [our boilerplate](../webpack3) for Webpack 3

examples/webpack3/.babelrc

@@ -0,0 +1,38 @@
+{
+  "presets": [
+    ["@babel/preset-env", {
+      "modules": false,
+      "targets": {
+        "browsers": [
+          "last 2 versions",
+          "ie >= 11",
+          "safari >= 10"
+        ]
+      }
+    }],
+    "@babel/react"
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-export-default-from",
+    ["direct-import", { "modules": [
+      "semantic-ui-react", {
+        "name": "semantic-ui-react",
+        "indexFile": "semantic-ui-react/dist/es/index.js"
+      }
+    ]}],
+    "lodash"
+  ],
+  "env": {
+    "development": {
+      "plugins": [
+        "react-hot-loader/babel"
+      ]
+    },
+    "production": {
+      "plugins": [
+        "transform-react-remove-prop-types"
+      ]
+    }
+  }
+}

examples/webpack3/.gitignore

@@ -0,0 +1,14 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# production
+/build
+
+# misc
+.DS_Store
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

examples/webpack3/config/env.js

@@ -0,0 +1,55 @@
+const fs = require('fs')
+const path = require('path')
+
+const NODE_ENV = process.env.NODE_ENV
+
+if (!NODE_ENV) {
+  throw new Error('The NODE_ENV environment variable is required but was not specified.')
+}
+
+// We support resolving modules according to `NODE_PATH`.
+// This lets you use absolute paths in imports inside large monorepos:
+// /~https://github.com/facebookincubator/create-react-app/issues/253.
+// It works similar to `NODE_PATH` in Node itself:
+// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
+// Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
+// Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
+// /~https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421
+// We also resolve them to make sure all tools using them work consistently.
+const appDirectory = fs.realpathSync(process.cwd())
+process.env.NODE_PATH = (process.env.NODE_PATH || '')
+  .split(path.delimiter)
+  .filter(folder => folder && !path.isAbsolute(folder))
+  .map(folder => path.resolve(appDirectory, folder))
+  .join(path.delimiter)
+
+function getClientEnvironment(publicUrl) {
+  const raw = Object.keys(process.env)
+    .reduce(
+      (env, key) => {
+        env[key] = process.env[key] // eslint-disable-line no-param-reassign
+        return env
+      },
+      {
+        // Useful for determining whether we’re running in production mode.
+        // Most importantly, it switches React into the correct mode.
+        NODE_ENV: process.env.NODE_ENV || 'development',
+        // Useful for resolving the correct path to static assets in `public`.
+        // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
+        // This should only be used as an escape hatch. Normally you would put
+        // images into the `src` and `import` them in code to get their paths.
+        PUBLIC_URL: publicUrl,
+      }
+    )
+  // Stringify all values so we can feed into Webpack DefinePlugin
+  const stringified = {
+    'process.env': Object.keys(raw).reduce((env, key) => {
+      env[key] = JSON.stringify(raw[key]) // eslint-disable-line no-param-reassign
+      return env
+    }, {}),
+  }
+
+  return { raw, stringified }
+}
+
+module.exports = getClientEnvironment

examples/webpack3/config/paths.js

@@ -0,0 +1,49 @@
+const path = require('path')
+const fs = require('fs')
+const url = require('url')
+
+// Make sure any symlinks in the project folder are resolved:
+// /~https://github.com/facebookincubator/create-react-app/issues/637
+const appDirectory = fs.realpathSync(process.cwd())
+const resolveApp = relativePath => path.resolve(appDirectory, relativePath)
+
+const envPublicUrl = process.env.PUBLIC_URL
+
+function ensureSlash(needlePath, needsSlash) {
+  const hasSlash = needlePath.endsWith('/')
+  if (hasSlash && !needsSlash) {
+    return needlePath.substr(needlePath, needlePath.length - 1)
+  } else if (!hasSlash && needsSlash) {
+    return `${needlePath}/`
+  }
+  return needlePath
+}
+
+const getPublicUrl = appPackageJson =>
+  envPublicUrl || require(appPackageJson).homepage
+
+// We use `PUBLIC_URL` environment variable or "homepage" field to infer
+// "public path" at which the app is served.
+// Webpack needs to know it to put the right <script> hrefs into HTML even in
+// single-page apps that may serve index.html for nested URLs like /todos/42.
+// We can't use a relative path in HTML because we don't want to load something
+// like /todos/42/static/js/bundle.7289d.js. We have to know the root.
+function getServedPath(appPackageJson) {
+  const publicUrl = getPublicUrl(appPackageJson)
+  const servedUrl =
+    envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/')
+  return ensureSlash(servedUrl, true)
+}
+
+module.exports = {
+  appBuild: resolveApp('build'),
+  appNodeModules: resolveApp('node_modules'),
+  appHtml: resolveApp('public/index.html'),
+  appIndexJs: resolveApp('src/index.js'),
+  appPackageJson: resolveApp('package.json'),
+  appPublic: resolveApp('public'),
+  appSrc: resolveApp('src'),
+  publicUrl: getPublicUrl(resolveApp('package.json')),
+  servedPath: getServedPath(resolveApp('package.json')),
+  yarnLockFile: resolveApp('yarn.lock'),
+}