chore(devenv): move to Handlebars

carbon-design-system · Feb 22, 2018 · ab4938c · ab4938c
1 parent d0711d5
commit ab4938c
Show file tree

Hide file tree

Showing 147 changed files with 4,477 additions and 4,288 deletions.
diff --git a/demo/js/components/RootPage.js b/demo/js/components/RootPage.js
@@ -30,23 +30,28 @@ const load = (componentItems, selectedNavItemId) => {
       })
       .then(responseContent => {
         if (Object(responseContent) === responseContent) {
-          return componentItems.map(
-            item =>
-              item.id !== selectedNavItemId
-                ? item
-                : {
-                    ...item,
-                    items: item.items.map(
-                      subItem =>
-                        !responseContent[subItem.handle]
-                          ? subItem
-                          : {
-                              ...subItem,
-                              renderedContent: responseContent[subItem.handle],
-                            }
-                    ),
-                  }
-          );
+          return componentItems.map(item => {
+            if (item.id !== selectedNavItemId) {
+              return item;
+            }
+            return !item.items
+              ? {
+                  ...item,
+                  renderedContent: responseContent[`${item.handle}--default`],
+                }
+              : {
+                  ...item,
+                  items: item.items.map(
+                    subItem =>
+                      !responseContent[subItem.handle]
+                        ? subItem
+                        : {
+                            ...subItem,
+                            renderedContent: responseContent[subItem.handle],
+                          }
+                  ),
+                };
+          });
         }
         return componentItems.map(
           item =>

diff --git a/demo/views/_layout.dust b/demo/views/_layout.dust
diff --git a/demo/views/_preview-empty.dust b/demo/views/_preview-empty.dust
diff --git a/demo/views/demo-live.dust b/demo/views/demo-live.dust
diff --git a/demo/views/demo-nav-data.hbs b/demo/views/demo-nav-data.hbs
@@ -0,0 +1,4 @@
+<script>
+  var componentItems = {{{JSONstringify componentItems}}};
+  var docItems = {{{JSONstringify docItems}}};
+</script>
diff --git a/demo/views/demo-nav.dust → demo/views/layouts/demo-nav.hbs b/demo/views/demo-nav.dust → demo/views/layouts/demo-nav.hbs
@@ -20,10 +20,7 @@
   <body>
     <div data-renderroot></div>
     <input aria-label="inpute-text-offleft" type="text" class="offleft" />
-    <script>
-      var componentItems = {componentItems|js|s};
-      var docItems = {docItems|js|s};
-    </script>
+    {{{body}}}
     <script src="/demo/demo.js"></script>
   </body>
 </html>
diff --git a/demo/views/_preview-default.dust → demo/views/layouts/preview.hbs b/demo/views/_preview-default.dust → demo/views/layouts/preview.hbs
@@ -19,9 +19,8 @@
   </head>
 
   <body class="bx--body demo--container" data-floating-menu-container>
-    <div class="demo--container__panel" data-card-list data-demo-name="{name}">
-      {+content}
-      {/content}
+    <div class="demo--container__panel" data-card-list>
+      {{{body}}}
     </div>
 
     <!-- Pseudo element to demonstrate focus-wrap behavior (focus trap) -->

diff --git a/gulpfile.js b/gulpfile.js
@@ -70,8 +70,8 @@ gulp.task('browser-sync', ['sass:dev'], cb => {
   let started;
   const options = {
     script: './server.js',
-    ext: 'dust js',
-    watch: ['demo/**/*.dust', 'src/**/*.dust', 'src/**/*.config.js', 'server.js'],
+    ext: 'hbs js',
+    watch: ['demo/**/*.hbs', 'src/**/*.hbs', 'src/**/*.config.js', 'server.js'],
     env: {
       PORT: cloptions.serverport,
     },
@@ -264,7 +264,7 @@ gulp.task('sass:source', () => {
 });
 
 gulp.task('html:source', () =>
-  templates.render({ preview: '_preview-empty' }).then(renderedItems => {
+  templates.render({ preview: 'NONE' }).then(renderedItems => {
     const promises = [];
     renderedItems.forEach((rendered, item) => {
       const dirname = path.dirname(path.resolve(__dirname, 'html', item.relViewPath));

diff --git a/package.json b/package.json
@@ -66,8 +66,6 @@
     "cz-conventional-changelog": "^1.2.0",
     "del": "~2.0.2",
     "diff": "^3.4.0",
-    "dustjs-helpers": "^1.7.0",
-    "dustjs-linkedin": "^2.7.0",
     "eslint": "^3.0.0",
     "eslint-config-airbnb": "^11.0.0",
     "eslint-config-airbnb-base": "^11.0.0",
@@ -80,6 +78,7 @@
     "eslint-plugin-prettier": "^2.3.1",
     "eslint-plugin-react": "^7.5.0",
     "express": "4.16.2",
+    "express-handlebars": "^3.0.0",
     "globby": "4.0.0",
     "gulp": "~3.9.0",
     "gulp-autoprefixer": "~3.0.1",
@@ -93,6 +92,7 @@
     "gulp-sourcemaps": "~1.6.0",
     "gulp-uglify": "^2.1.2",
     "gulp-util": "~3.0.7",
+    "handlebars-helpers": "^0.10.0",
     "html-loader": "^0.5.0",
     "husky": "^0.12.0",
     "jasmine-core": "^2.9.0",

diff --git a/server.js b/server.js
@@ -1,35 +1,26 @@
 'use strict';
 
-const globby = require('globby'); // eslint-disable-line
-const { promisify } = require('bluebird'); // eslint-disable-line
+/* eslint import/no-extraneous-dependencies: [2, {"devDependencies": true}] */
+
 const path = require('path');
-const express = require('express'); // eslint-disable-line
-const Fractal = require('@frctl/fractal'); // eslint-disable-line
+const express = require('express');
 
-const webpack = require('webpack'); // eslint-disable-line
-const webpackDevMiddleware = require('webpack-dev-middleware'); // eslint-disable-line
-const webpackHotMiddleware = require('webpack-hot-middleware'); // eslint-disable-line
+const webpack = require('webpack');
+const webpackDevMiddleware = require('webpack-dev-middleware');
+const webpackHotMiddleware = require('webpack-hot-middleware');
 
 const templates = require('./tools/templates');
 
 const app = express();
-const adaro = require('adaro'); // eslint-disable-line
-
 const port = process.env.PORT || 8080;
-
 const config = require('./tools/webpack.dev.config');
 
 const compiler = webpack(config);
 app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath }));
 app.use(webpackHotMiddleware(compiler));
 
-const fractal = Fractal.create();
-fractal.components.set('path', path.join(__dirname, 'src/components'));
-fractal.components.set('ext', '.dust');
-fractal.docs.set('path', path.join(__dirname, 'docs'));
-
-app.engine('dust', adaro.dust());
-app.set('view engine', 'dust');
+app.engine('hbs', templates.handlebars.engine);
+app.set('view engine', 'hbs');
 app.set('views', path.resolve(__dirname, 'demo/views'));
 app.use('/demo', express.static('demo'));
 app.use(express.static('src'));
@@ -84,7 +75,7 @@ const promiseNavItems = templates.promiseCache
     } else {
       promiseNavItems
         .then(({ componentItems, docItems }) => {
-          res.render('demo-nav', {
+          res.render('demo-nav-data', {
             componentItems,
             docItems,
           });
@@ -104,8 +95,12 @@ app.get('/component/:component', (req, res) => {
     res.status(404).end();
   } else {
     templates
-      .render({ defaultPreview: '_preview-default', concat: true }, name)
+      .render({ defaultPreview: 'preview', concat: true }, name)
       .then(rendered => {
+        // eslint-disable-next-line eqeqeq
+        if (rendered == null) {
+          res.status(404).end();
+        }
         res.send(rendered);
       })
       .catch(error => {
@@ -122,7 +117,7 @@ app.get('/code/:component', (req, res) => {
     res.status(404).end();
   } else {
     templates
-      .render({ preview: '_preview-empty' }, name)
+      .render({ preview: 'NONE' }, name)
       .then(renderedItems => {
         const o = {};
         renderedItems.forEach((rendered, item) => {

diff --git a/src/components/accordion/accordion--legacy.dust b/src/components/accordion/accordion--legacy.dust
diff --git a/src/components/accordion/accordion--legacy.hbs b/src/components/accordion/accordion--legacy.hbs
@@ -0,0 +1,50 @@
+<ul data-accordion class="bx--accordion">
+  <li tabindex="0" data-accordion-item class="bx--accordion__item">
+    <div class="bx--accordion__heading">
+      <svg class="bx--accordion__arrow" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
+        <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
+      </svg>
+      <p class="bx--accordion__title">Label</p>
+    </div>
+    <div class="bx--accordion__content">
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+    </div>
+  </li>
+  <li tabindex="0" data-accordion-item class="bx--accordion__item">
+    <div class="bx--accordion__heading">
+      <svg class="bx--accordion__arrow" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
+        <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
+      </svg>
+      <p class="bx--accordion__title">Label with multiple words</p>
+    </div>
+    <div class="bx--accordion__content">
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+    </div>
+  </li>
+  <li tabindex="0" data-accordion-item class="bx--accordion__item">
+    <div class="bx--accordion__heading">
+      <svg class="bx--accordion__arrow" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
+        <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
+      </svg>
+      <p class="bx--accordion__title">Label</p>
+    </div>
+    <div class="bx--accordion__content">
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+    </div>
+  </li>
+  <li tabindex="0" data-accordion-item class="bx--accordion__item">
+    <div class="bx--accordion__heading">
+      <svg class="bx--accordion__arrow" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
+        <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
+      </svg>
+      <p class="bx--accordion__title">Label</p>
+    </div>
+    <div class="bx--accordion__content">
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+    </div>
+  </li>
+</ul>