feat: upgrade UIKit to the latest version

packages/uikit-workshop/.gitignore

@@ -3,4 +3,7 @@ src/bower_components/*
 .sass-cache/*
 .DS_Store
 /.eslintignore
-dist/*
+dist
+public
+www
+dependencyGraph.json

packages/uikit-workshop/.npmrc

@@ -1,2 +1,2 @@
 package-lock=false 
-save-exact=true
+save-exact=true 

packages/uikit-workshop/.patternlabrc.example.js

@@ -2,4 +2,4 @@
 
 module.exports = {
   // buildDir: __dirname + '/www/pattern-lab',
-}
+};

packages/uikit-workshop/README.md

@@ -27,3 +27,24 @@ In order to modify these assets you need to install the following:
 ## Development Set-up
 
 Read the [contribution guidelines](https://github.com/pattern-lab/patternlab-node/blob/master/packages/uikit-workshop/.github/CONTRIBUTING.md)
+
+
+## Working on Pattern Lab's UI Locally
+
+### Step 1: Install Dependencies
+Run the following in the root of the Pattern Lab repo:
+
+```
+yarn run setup
+```
+
+### Step 2 (Optional)
+If you want to build using a fuller set of examples than what comes with the default Handlebars demo, run `yarn run preview:hbs`. Otherwise skip to step 3.
+
+### Step 3
+Finally, go into the `packages/development-edition-engine-handlebars` or `packages/edition-twig` folder and start up the local dev server which watches UIKit and the local Pattern Lab instance for changes, live reloads, etc by running `yarn dev`
+
+```
+cd packages/development-edition-engine-handlebars
+yarn dev
+```

packages/uikit-workshop/build-tools.js

@@ -0,0 +1,17 @@
+const webpackServer = require('@bolt/uikit-workshop/build/webpack-server.js');
+const path = require('path');
+const configFilePath = path.join(process.cwd(), './patternlab-config.json');
+const config = require(configFilePath);
+const patternlab = require('@pattern-lab/core')(config);
+
+// build + start watch mode
+patternlab.build({
+  watch: true,
+  cleanPublic: true,
+});
+
+webpackServer.serve(
+  patternlab,
+  configFilePath,
+  path.resolve(process.cwd(), config.paths.public.root)
+);

packages/uikit-workshop/build/webpack-dev-server-waitpage/index.js

@@ -0,0 +1,88 @@
+const fs = require('fs');
+const path = require('path');
+const ejs = require('ejs');
+const webpack = require('webpack');
+
+const data = {
+  webpackVersion: webpack.version,
+  webpackDevServerVersion: '2.4.1',
+  progress: [[0]],
+};
+
+/**
+ * @typedef {object} WebpackDevServerWaitpageOptions
+ * @property title {string}
+ * @property theme {string}
+ * @property template {string}
+ * @property disableWhenValid {boolean}
+ */
+
+/** @type {WebpackDevServerWaitpageOptions} */
+const defaultOptions = {
+  title: 'Development Server',
+  theme: 'pl-loading',
+  disableWhenValid: true,
+};
+
+/**
+ * webpack-dev-server-waitpage middleware factory
+ * @param server {Server} The server argument passed to webpack-dev-server's 'before' function
+ * @param [options] {WebpackDevServerWaitpageOptions} An optional object of options (see Readme for more information)
+ * @returns {Function} Koa compatible middleware
+ */
+const webpackDevServerWaitpage = (server, options) => {
+  if (!server)
+    throw new Error(
+      `webpack-dev-server's compilers argument must be supplied as first parameter.`
+    );
+
+  /** @type {WebpackDevServerWaitpageOptions} */
+  options = Object.assign({}, defaultOptions, options);
+
+  const compilers = server.compilers;
+  //  || [server.middleware.context.compiler];
+  for (let i = 0; i < compilers.length; i++) {
+    new webpack.ProgressPlugin(function() {
+      data.progress[i] = arguments;
+    }).apply(compilers[i]);
+  }
+
+  let template = options.template;
+  if (!template) {
+    if (
+      fs
+        .readdirSync(__dirname)
+        .filter(x => x.endsWith('.ejs'))
+        .map(x => x.slice(0, -4))
+        .indexOf(options.theme) < 0
+    )
+      throw new Error(`Unknown theme provided: ${options.theme}`);
+    template = fs.readFileSync(
+      path.resolve(__dirname, options.theme + '.ejs'),
+      'utf8'
+    );
+  }
+
+  // eslint-disable-next-line no-return-assign
+  Object.keys(options).forEach(key => (data[key] = options[key])); // expend data with options
+
+  let wasValid = false;
+
+  return async (req, res, next) => {
+    const valid = data.progress.every(p => p[0] === 1);
+    wasValid = wasValid || valid;
+
+    if (
+      valid || // already valid
+      (options.disableWhenValid && wasValid) || // if after valid state should be disabled
+      req.method !== 'GET'
+    ) {
+      return await next();
+    } else {
+      res.setHeader('Content-Type', 'text/html');
+      res.end(ejs.render(template, data));
+    }
+  };
+};
+
+module.exports = webpackDevServerWaitpage;

packages/uikit-workshop/build/webpack-dev-server-waitpage/pl-loading.ejs

@@ -0,0 +1,195 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="x-ua-compatible" content="IE=Edge,chrome=1"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1"/>
+  <meta http-equiv="refresh" content="1.4" />
+
+  <title><%= title %></title>
+  <style>
+    html, body {
+      padding: 0;
+      margin: 0;
+      min-height: 100vh;
+    }
+
+    body {
+      display: flex;
+      justify-content: center;
+      flex-direction: column;
+      padding: 0 1rem;
+      align-items: center;
+      background-color: #222;
+      color: white;
+      font-family: Open Sans, Helvetica Neue, sans-serif;
+    }
+
+    .c-pl-card {
+      padding: 1rem;
+    }
+
+    .is-compiling {
+      font-weight: semibold;
+      color: white;
+      margin-bottom: 1rem;
+    }
+
+    .c-pl-progress-indicators {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+    }
+
+    .c-pl-progress-indicator {
+      display: inline-block;
+    }
+
+    .c-pl-progress-indicators > *:not(:last-child){
+      margin-right: 1rem;
+    }
+
+<% for (var i = 0 ; i < progress.length ; i++) { %>
+    .c-pl-progress__circle {
+      margin-top: 20px;
+      position: relative;
+      left: 37%;
+    }
+
+    .c-pl-progress__circle {
+      fill: transparent;
+      stroke-width: 5px;
+      stroke-dasharray: 250;
+      stroke-dashoffset: 1000;
+    }
+
+    .c-pl-progress__loader--<%= i %> .c-pl-progress__progress {
+      stroke: #67ccff;
+      stroke-dashoffset: -<%= 250 + Math.round(250 * progress[i][0]) %>;
+      animation: dash 2s linear forwards infinite;
+      transform: rotate(-90deg);
+      transform-origin: center;
+    }
+
+    .c-pl-progress__bar {
+      stroke: #EEEEEE; /* Grey 200 */
+    }
+
+    .c-pl-progress__text {
+      text-align: center;
+      font-size: 20px;
+      font-weight: bold;
+      font-family: "Oswald", "Impact", sans-serif;
+      fill: white;
+      color: white;
+    }
+<% } %>
+    .message {
+      word-break: break-all;
+      text-align: center;
+      padding: 0 0 10px;
+    }
+
+    progress-indicator {
+      display: flex;
+      justify-content: center;
+    }
+
+    @keyframes blink {
+      0% {
+        opacity: .2;
+      }
+      20% {
+        opacity: 1;
+      }
+      100% {
+        opacity: .2;
+      }
+    }
+
+    .c-pl-progress__animated-text {
+      animation-name: blink;
+      animation-duration: 1.4s;
+      animation-iteration-count: infinite;
+      animation-fill-mode: both;
+    }
+
+    .c-pl-progress__animated-text:nth-of-type(2) {
+      animation-delay: .2s;
+    }
+
+    .c-pl-progress__animated-text:nth-of-type(3) {
+      animation-delay: .4s;
+    }
+
+    .c-pl-logo {
+      opacity: 1;
+      position: relative;
+      overflow: visible;
+      margin: 0 auto;
+    }
+  </style>
+</head>
+<body>
+
+<div class="c-pl-logo">
+  <div class="c-pl-logo__inner">
+    <svg style="max-width: 100px;" width="100%" viewBox="0 0 187 185" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+            <g id="Group-6">
+                <g id="Group-5">
+                    <g id="Group-3">
+                        <g id="Group-2">
+                            <circle id="Oval" stroke="#FFFFFF" stroke-width="15" cx="91.7" cy="92.5" r="84.1"></circle>
+                            <circle id="Oval" fill="#ABABAB" cx="91.7" cy="92.5" r="52.8"></circle>
+                            <path d="M186.3,35.7 C186.3,48.1 176.3,58.1 163.9,58.1 C151.5,58.1 141.5,48.1 141.5,35.7 C141.5,23.3 151.5,13.3 163.9,13.3 C176.2,13.3 186.3,23.3 186.3,35.7 Z" id="Path" fill="#ABABAB"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </svg>
+  </div>
+</div>
+
+
+<div class="c-pl-card">
+  <div class="is-compiling">Pattern Lab is compiling for the first time.</div>
+
+  <div class="c-pl-progress-indicators">
+    <% for (var i = 0 ; i < progress.length ; i++) { %>
+      <div class="c-pl-progress-indicator">
+        <progress-indicator>
+          <svg class="c-pl-progress__loader c-pl-progress__loader--<%= i %>" height="100" width="100">
+            <circle class="c-pl-progress__circle c-pl-progress__bar" cx="50" cy="50" r="40"></circle>
+            <circle class="c-pl-progress__circle c-pl-progress__progress" cx="50" cy="50" r="40"></circle>
+            <text x="53" y="55" text-anchor="middle" class="c-pl-progress__text"><%= Math.round(100 * progress[i][0]) %>%</text>
+          </svg>
+        </progress-indicator>
+
+        <%
+          const capitalize = (str) => {
+            if (typeof str !== 'string') return '';
+            return str.replace(/(?:^|\s)\S/g, function(a) { return a.toUpperCase(); });
+          }
+
+          const message = progress[i][1] || '';
+          const result = message.includes('building') || message.includes('compiling')
+            ? 'Compiling'
+            : message.includes('optimization')
+            ? 'Optimizing'
+            : message.includes('emitting') || message.includes('seal')
+            ? 'Wrapping up'
+            : progress[i][1];
+        %>
+        <div class="message"><strong><%= capitalize(result) %><span class="c-pl-progress__animated-text">.</span><span class="c-pl-progress__animated-text">.</span><span class="c-pl-progress__animated-text">.</span></strong></div>
+      </div>
+
+    <% }  %>
+  </div>
+
+
+</div>
+</body>
+</html>