integrate primer using webpack

cbef9127 · julienmege · 7ab239ca · cbef9127 · cbef9127 · cbef9127
Commit cbef9127 authored Feb 22, 2018 by julienmege
--- a/buildSrc/src/main/groovy/BonitaPagePluginExtension.groovy
+++ b/buildSrc/src/main/groovy/BonitaPagePluginExtension.groovy
@@ -2,4 +2,5 @@ class BonitaPagePluginExtension {
    String nodeVersion
    String npmVersion
    String frontendBuildDir
+    List<String> sourceDirectories
 }
\ No newline at end of file
--- a/page-hello-world-react/build.gradle
+++ b/page-hello-world-react/build.gradle
@@ -2,6 +2,7 @@ apply plugin: BonitaPagePlugin

 bonitaPage {
    frontendBuildDir = 'build'
+    sourceDirectories = ['public']
 }

 // Workaround to manage React-CLI non conventional build directory

--- a/page-hello-world/build.gradle
+++ b/page-hello-world/build.gradle
+apply plugin: BonitaPagePlugin
--- a/page-hello-world/src/index.html
+++ b/page-hello-world/src/index.html
@@ -3,7 +3,6 @@
 <head>
    <meta charset="UTF-8">
    <title>Title</title>
-
    <link rel="stylesheet" href="../theme/theme.css">
 </head>
 <body>
@@ -13,7 +12,10 @@
        <h1>Hello, world!</h1>
        <p>...</p>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
+        <button class="btn btn-primary" type="button">Button button</button>
    </div>
 </div>
+
+<script src="bundle.js"></script>
 </body>
 </html>
\ No newline at end of file
--- a/page-hello-world/package-lock.json
+++ b/page-hello-world/package-lock.json
--- a/page-hello-world/package.json
+++ b/page-hello-world/package.json
@@ -4,10 +4,23 @@
  "private": true,
  "description": "",
  "scripts": {
-    "build": "mkdirp dist && ncp ./src/index.html ./dist/index.html"
+    "build": "webpack",
+    "build-css": "node-sass --include-path src src/main.scss   public/css/main.css"
  },
  "devDependencies": {
+    "clean-webpack-plugin": "^0.1.18",
+    "css-loader": "^0.28.9",
+    "html-webpack-plugin": "^2.30.1",
    "mkdirp": "^0.5.1",
-    "ncp": "^2.0.0"
+    "ncp": "^2.0.0",
+    "node-sass": "^4.7.2",
+    "sass-loader": "^6.0.6",
+    "style-loader": "^0.20.2",
+    "webpack": "^3.11.0"
+  },
+  "dependencies": {
+    "lodash": "^4.17.5",
+    "primer": "^10.3.0",
+    "primer-buttons": "^2.5.3"
  }
 }
--- a/page-hello-world/src/index.js
+++ b/page-hello-world/src/index.js
+import _ from 'lodash';
+import './index.scss';
+
+function component() {
+    var element = document.createElement('div');
+
+    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
+
+    return element;
+}
+
+var element = document.createElement('button');
+element.className = 'btn btn-primary';
+element.innerText = 'Button';
+document.body.appendChild(element);
+document.body.appendChild(component());
--- a/page-hello-world/src/index.scss
+++ b/page-hello-world/src/index.scss
+@import "primer-buttons/index.scss";
\ No newline at end of file
--- a/page-hello-world/webpack.config.js
+++ b/page-hello-world/webpack.config.js
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CleanWebpackPlugin = require('clean-webpack-plugin');
+
+module.exports = {
+    entry: './src/index.js',
+    plugins: [
+        new CleanWebpackPlugin(['dist']),
+        new HtmlWebpackPlugin({
+            title: 'Output Management'
+        })
+    ],
+    output: {
+        filename: 'bundle.js',
+        path: path.resolve(__dirname, 'dist')
+    },
+    module: {
+        rules: [
+            {
+                test: /\.scss$/,
+                use: [{
+                    loader: "style-loader" // creates style nodes from JS strings
+                }, {
+                    loader: "css-loader" // translates CSS into CommonJS
+                }, {
+                    loader: "sass-loader", // compiles Sass to CSS
+                    options: {
+                        includePaths: ['node_modules'],
+                    },
+                }],
+            }
+        ]
+    }
+};
\ No newline at end of file
--- a/settings.gradle
+++ b/settings.gradle
 pluginManagement {
    repositories {
        mavenLocal()
-        maven { url 'http://repositories.rd.lan/maven/releases/' }
+        maven { url 'http://repositories.rd.lan/maven/releases/'}
        gradlePluginPortal()
    }
 }