Initial commit: barebone app with antd and babel-plugin-import

.babelrc

@@ -0,0 +1,17 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react"],
+  "plugins": [
+    [
+      // babel-plugin-import for antd components
+      // This plugin modifies the imports done in this way
+      // import { Select } from 'antd'
+      // To only import the relevant component and styles, not the whole library
+      "import",
+      {
+        "libraryName": "antd",
+        "libraryDirectory": "es",
+        "style": "css"
+      }
+    ]
+  ]
+}

.gitignore

@@ -0,0 +1,64 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# next.js build output
+.next
+
+# distribution files
+dist/*

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 FerJSsilva
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,7 @@
+# Ant design theming examples
+
+The simplest examples of actual implementation of theming in ant-design, in a real (in barebone) app.
+
+## License
+
+This project is licensed under the MIT Licensed - see the [LICENSE](LICENSE) file for details

config/webpack.common.js

@@ -0,0 +1,36 @@
+const path = require('path');
+const HtmlWebPackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+  entry: {
+    main: path.resolve(__dirname, '../src', 'index.js')
+  },
+  output: {
+    filename: '[name].[hash].js',
+    path: path.resolve(__dirname, '../dist'),
+    publicPath: '/'
+  },
+  devServer: {
+    port: 3042,
+    historyApiFallback: true,
+    overlay: true,
+    open: true
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        exclude: [/node_modules/],
+        use: [{ loader: 'babel-loader' }]
+      }
+    ]
+  },
+  plugins: [
+    new HtmlWebPackPlugin({
+      template: path.resolve(__dirname, '../public', 'index.html')
+    })
+  ],
+  resolve: {
+    extensions: ['.js', '.jsx']
+  }
+};

config/webpack.dev.js

@@ -0,0 +1,28 @@
+const merge = require("webpack-merge");
+const common = require("./webpack.common.js");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+
+const mapStyle = process.env.MAP_STYLE === "true";
+
+// Merge webpack.common config with webpack.dev
+module.exports = merge(common, {
+  mode: "development",
+  devtool: "inline-source-map",
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [
+          { loader: "style-loader" },
+          { loader: mapStyle ? "css-loader?sourceMap" : "css-loader" }
+        ]
+      }
+    ]
+  },
+  plugins: [
+    // Extracts CSS into separate files
+    new MiniCssExtractPlugin({
+      filename: "[name].css"
+    })
+  ]
+});

config/webpack.prod.js

@@ -0,0 +1,42 @@
+const merge = require("webpack-merge");
+const common = require("./webpack.common.js");
+const path = require("path");
+const CleanWebpackPlugin = require("clean-webpack-plugin");
+const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+
+// Merge webpack.common config with webpack.dev
+module.exports = merge(common, {
+  mode: "production",
+  devtool: "source-map",
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [{ loader: MiniCssExtractPlugin.loader }, { loader: "css-loader" }]
+      }
+    ]
+  },
+  optimization: {
+    splitChunks: {
+      chunks: "all"
+    },
+    runtimeChunk: false
+  },
+  plugins: [
+    // Remove all files inside webpack's dist directory,
+    // as well as all unused webpack assets after every successful rebuild.
+    new CleanWebpackPlugin([path.resolve(__dirname, "../dist")], {
+      root: process.cwd(),
+      verbose: true,
+      dry: false
+    }),
+    // Search for CSS assets during the Webpack build and will optimize/minimize the CSS.
+    new OptimizeCssAssetsPlugin(),
+    // Extracts CSS into separate files
+    new MiniCssExtractPlugin({
+      filename: "[name].[hash:8].css",
+      chunkFilename: "[id].[hash:8].css"
+    })
+  ]
+});

package.json

@@ -0,0 +1,36 @@
+{
+  "name": "antd-theming-examples",
+  "version": "1.0.0",
+  "description": "Actual examples of how to implement theming in antd",
+  "main": "index.js",
+  "repository": "https://github.com/mathieu-anderson/antd-theming-examples",
+  "author": "Your Name <your@email.com>",
+  "license": "MIT",
+  "scripts": {
+    "start": "webpack-dev-server --config=config/webpack.dev.js --hot",
+    "start:reload": "webpack-dev-server --config=config/webpack.dev.js",
+    "build": "webpack --config=config/webpack.prod.js"
+  },
+  "dependencies": {
+    "antd": "^4.0.3",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.9.0",
+    "@babel/preset-env": "^7.9.0",
+    "@babel/preset-react": "^7.9.1",
+    "babel-loader": "^8.1.0",
+    "babel-plugin-import": "^1.13.0",
+    "clean-webpack-plugin": "^3.0.0",
+    "css-loader": "^3.4.2",
+    "file-loader": "^6.0.0",
+    "html-webpack-plugin": "^3.2.0",
+    "mini-css-extract-plugin": "^0.9.0",
+    "style-loader": "^1.1.3",
+    "webpack": "^4.42.0",
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.10.3",
+    "webpack-merge": "^4.2.2"
+  }
+}

public/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>Odds Reactor</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

src/App.css

@@ -0,0 +1,8 @@
+.App {
+  text-align: center;
+  margin: 0 30%;
+}
+
+p {
+  margin-bottom: 3em;
+}

src/App.jsx

@@ -0,0 +1,51 @@
+import React, { Component } from "react";
+import { Select, Radio, Slider } from "antd";
+
+import "./App.css";
+
+class App extends Component {
+  render() {
+    return (
+      <div className="App">
+        <header className="App-header">
+          <h1 className="App-title">Ant design theming examples</h1>
+        </header>
+        <p className="App-intro">
+          Trying out what{" "}
+          <a href="https://ant.design/docs/react/customize-theme">the docs</a>{" "}
+          tell us.
+        </p>
+        <p>
+          <Select
+            defaultValue="lucy"
+            size="large"
+            onChange={value => console.log(value)}
+          >
+            <Option value="jack">Jack</Option>
+
+            <Option value="lucy">Lucy</Option>
+            <Option value="disabled" disabled>
+              Disabled
+            </Option>
+            <Option value="Yiminghe">yiminghe</Option>
+          </Select>
+        </p>
+        <p>
+          <Radio.Group defaultValue="a" buttonStyle="solid">
+            <Radio.Button value="a">Hangzhou</Radio.Button>
+            <Radio.Button value="b" disabled>
+              Shanghai
+            </Radio.Button>
+            <Radio.Button value="c">Beijing</Radio.Button>
+            <Radio.Button value="d">Chengdu</Radio.Button>
+          </Radio.Group>
+        </p>
+        <p>
+          <Slider defaultValue={30} />
+        </p>
+      </div>
+    );
+  }
+}
+
+export default App;

src/index.js

@@ -0,0 +1,11 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
+
+ReactDOM.render(React.createElement(App), document.getElementById("root"));
+
+// Check if hot reloading is enable. If it is, changes won't reload the page.
+// This is related to webpack-dev-server and works on development only.
+if (module.hot) {
+  module.hot.accept();
+}