Allow uikit plugins to be used in multiple uikit definitions in patternlab-config.json.

packages/core/src/lib/loaduikits.js

@@ -37,36 +37,42 @@ const readModuleFile = (kit, subPath) => {
 /**
  * Loads uikits, connecting configuration and installed modules
  * [1] Looks in node_modules for uikits.
- * [2] Filter out our uikit-polyfills package.
- * [3] Only continue if uikit is enabled in patternlab-config.json
- * [4] Reads files from uikit that apply to every template
+ * [2] Map them to enabled uikit's in patternlab-config.json
+ * [3] Reads files from uikit that apply to every template
  * @param {object} patternlab
  */
 module.exports = patternlab => {
   const paths = patternlab.config.paths;
 
-  const uikits = findModules(nodeModulesPath, isUIKitModule) // [1]
-    .filter(kit => kit.name !== 'polyfills'); // [2]
-  uikits.forEach(kit => {
-    const configEntry = _.find(_.filter(patternlab.config.uikits, 'enabled'), {
-      name: `uikit-${kit.name}`,
-    }); // [3]
+  const uikitModules = findModules(nodeModulesPath, isUIKitModule); // [1]
 
-    if (!configEntry) {
+  _.filter(patternlab.config.uikits, 'enabled').forEach(uikit => {
+    const kit = _.find(uikitModules, {
+      name: uikit.name.replace('uikit-', ''),
+    }); // [2]
+
+    if (!kit) {
       logger.warning(
-        `Could not find uikit with name uikit-${kit.name} defined within patternlab-config.json, or it is not enabled.`
+        `Could not find uikit plugin with name uikit-${kit.name} defined within patternlab-config.json.`
       );
       return;
     }
 
+    if (!uikit.id) {
+      logger.warning(
+        `ID for ${uikit.name} is missing, ${uikit.name} will be used instead. Caution, this can cause uikit's using the same package to malfunction.`
+      );
+      uikit.id = uikit.name;
+    }
+
     try {
-      patternlab.uikits[`uikit-${kit.name}`] = {
-        name: `uikit-${kit.name}`,
+      patternlab.uikits[uikit.id] = {
+        name: uikit.name,
         modulePath: kit.modulePath,
         enabled: true,
-        outputDir: configEntry.outputDir,
-        excludedPatternStates: configEntry.excludedPatternStates,
-        excludedTags: configEntry.excludedTags,
+        outputDir: uikit.outputDir,
+        excludedPatternStates: uikit.excludedPatternStates,
+        excludedTags: uikit.excludedTags,
         header: readModuleFile(
           kit,
           paths.source.patternlabFiles['general-header']

packages/core/test/loaduitkits_tests.js

@@ -78,6 +78,7 @@ tap.test('loaduikits - maps fields correctly', function(test) {
 
   const uikitFoo = {
     name: 'uikit-foo',
+    id: 'foo',
     enabled: true,
     outputDir: 'foo',
     excludedPatternStates: ['legacy'],
@@ -148,3 +149,39 @@ tap.test('loaduikits - only adds files for enabled uikits', function(test) {
     test.end();
   });
 });
+
+tap.test('loaduikits - reuse uikit-plugin for diffrent ui kits', function(
+  test
+) {
+  //arrange
+  const patternlab = {
+    config: testConfig,
+    uikits: [],
+  };
+
+  patternlab.config.uikits = [
+    {
+      name: 'uikit-foo',
+      enabled: true,
+      outputDir: 'foo',
+      excludedPatternStates: ['legacy'],
+      excludedTags: ['baz'],
+    },
+    {
+      name: 'uikit-foo',
+      id: 'alternative-foo',
+      enabled: true,
+      outputDir: 'bar',
+      excludedPatternStates: ['development'],
+      excludedTags: ['baz', 'foo'],
+    },
+  ];
+
+  //act
+  loaduikits(patternlab).then(() => {
+    //assert
+    test.ok(patternlab.uikits['uikit-foo']);
+    test.ok(patternlab.uikits['alternative-foo']);
+    test.end();
+  });
+});

packages/docs/php-docs/viewing-patterns.html

@@ -4,14 +4,9 @@
   - docs
 ---
 
-
-
-Pattern Lab utilizes PHP's [built-in web server](http://php.net/manual/en/features.commandline.webserver.php) to let you browse your generated patterns. To start the server do the following:
-
-1. In a terminal window navigate to the root of your project
-2. Type `php core/console --server`
-
-Your local Pattern Lab install should now be available for browsing at [http://localhost:8080](http://localhost:8080).
-
-
-
+Pattern Lab utilizes PHP's [built-in web
+server](http://php.net/manual/en/features.commandline.webserver.php) to let you browse
+your generated patterns. To start the server do the following: 1. In a terminal window
+navigate to the root of your project 2. Type `php core/console --server` Your local
+Pattern Lab install should now be available for browsing at
+[http://localhost:8080](http://localhost:8080).

packages/docs/rollup.config.js

@@ -4,16 +4,11 @@ const nodeResolve = require('rollup-plugin-node-resolve');
 const json = require('rollup-plugin-json');
 
 export default {
-  input: 'src/admin/util',
-  output: {
-    file: 'dist/admin/util.js',
-    format: 'iife',
-    name: 'previewUtil',
-  },
-  plugins: [
-    builtins(),
-    nodeResolve(),
-    commonjs(),
-    json(),
-  ]
+	input: 'src/admin/util',
+	output: {
+		file: 'dist/admin/util.js',
+		format: 'iife',
+		name: 'previewUtil'
+	},
+	plugins: [builtins(), nodeResolve(), commonjs(), json()]
 };

packages/docs/src/_data/global.js

@@ -1,9 +1,9 @@
 module.exports = {
-  random() {
-    const segment = () => {
-      return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
-    };
-    return `${segment()}-${segment()}-${segment()}`;
-  },
-  now: Date.now()
+	random() {
+		const segment = () => {
+			return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
+		};
+		return `${segment()}-${segment()}-${segment()}`;
+	},
+	now: Date.now()
 };

packages/docs/src/_data/helpers.js

@@ -1,10 +1,10 @@
 module.exports = {
-  getNextHeadingLevel(currentLevel) {
-    return parseInt(currentLevel, 10) + 1;
-  },
-  getReadingTime(text) {
-    const wordsPerMinute = 200;
-    const numberOfWords = text.split(/\s/g).length;
-    return Math.ceil(numberOfWords / wordsPerMinute);
-  }
+	getNextHeadingLevel(currentLevel) {
+		return parseInt(currentLevel, 10) + 1;
+	},
+	getReadingTime(text) {
+		const wordsPerMinute = 200;
+		const numberOfWords = text.split(/\s/g).length;
+		return Math.ceil(numberOfWords / wordsPerMinute);
+	}
 };

packages/docs/src/_data/styleguide.js

@@ -1,28 +1,28 @@
 const tokens = require('./tokens.json');
 
 module.exports = {
-  colors() {
-    let response = [];
+	colors() {
+		let response = [];
 
-    Object.keys(tokens.colors).forEach(key => {
-      response.push({
-        value: tokens.colors[key],
-        key
-      });
-    });
+		Object.keys(tokens.colors).forEach(key => {
+			response.push({
+				value: tokens.colors[key],
+				key
+			});
+		});
 
-    return response;
-  },
-  sizes() {
-    let response = [];
+		return response;
+	},
+	sizes() {
+		let response = [];
 
-    Object.keys(tokens['size-scale']).forEach(key => {
-      response.push({
-        value: tokens['size-scale'][key],
-        key
-      });
-    });
+		Object.keys(tokens['size-scale']).forEach(key => {
+			response.push({
+				value: tokens['size-scale'][key],
+				key
+			});
+		});
 
-    return response;
-  }
+		return response;
+	}
 };

packages/docs/src/admin/previews.js

@@ -7,82 +7,82 @@ env.addFilter('markdownFilter', markdownFilter);
 env.addFilter('dateFilter', dateFilter);
 
 const Preview = ({entry, path, context}) => {
-  const data = context(entry.get('data').toJS());
-  const html = env.render(path, {...data, helpers});
-  return <div dangerouslySetInnerHTML={{__html: html}} />;
+	const data = context(entry.get('data').toJS());
+	const html = env.render(path, {...data, helpers});
+	return <div dangerouslySetInnerHTML={{__html: html}} />;
 };
 
 const Home = ({entry}) => (
-  <Preview
-    entry={entry}
-    path="layouts/home.njk"
-    context={({title, body, postsHeading, archiveButtonText}) => ({
-      title,
-      content: markdownFilter(body),
-      postsHeading,
-      archiveButtonText,
-      collections: {
-        postFeed: [
-          {
-            url: 'javascript:void(0)',
-            date: new Date(),
-            data: {
-              title: 'Sample Post'
-            }
-          }
-        ]
-      }
-    })}
-  />
+	<Preview
+		entry={entry}
+		path="layouts/home.njk"
+		context={({title, body, postsHeading, archiveButtonText}) => ({
+			title,
+			content: markdownFilter(body),
+			postsHeading,
+			archiveButtonText,
+			collections: {
+				postFeed: [
+					{
+						url: 'javascript:void(0)',
+						date: new Date(),
+						data: {
+							title: 'Sample Post'
+						}
+					}
+				]
+			}
+		})}
+	/>
 );
 
 const Post = ({entry}) => (
-  <Preview
-    entry={entry}
-    path="layouts/post.njk"
-    context={({title, date, body}) => ({
-      title,
-      date,
-      content: markdownFilter(body || '')
-    })}
-  />
+	<Preview
+		entry={entry}
+		path="layouts/post.njk"
+		context={({title, date, body}) => ({
+			title,
+			date,
+			content: markdownFilter(body || '')
+		})}
+	/>
 );
 
 const Page = ({entry}) => (
-  <Preview
-    entry={entry}
-    path="layouts/page.njk"
-    context={({title, body}) => ({
-      title,
-      content: markdownFilter(body || '')
-    })}
-  />
+	<Preview
+		entry={entry}
+		path="layouts/page.njk"
+		context={({title, body}) => ({
+			title,
+			content: markdownFilter(body || '')
+		})}
+	/>
 );
 
 const SiteData = ({entry}) => (
-  <Preview
-    entry={entry}
-    path="layouts/base.njk"
-    context={({name, shortDesc, showThemeCredit}) => ({
-      site: {
-        name,
-        shortDesc,
-        showThemeCredit
-      }
-    })}
-  />
+	<Preview
+		entry={entry}
+		path="layouts/base.njk"
+		context={({name, shortDesc, showThemeCredit}) => ({
+			site: {
+				name,
+				shortDesc,
+				showThemeCredit
+			}
+		})}
+	/>
 );
 
 const Nav = ({entry}) => (
-  <Preview
-    entry={entry}
-    path="layouts/base.njk"
-    context={({items}) => ({
-      navigation: {
-        items
-      }
-    })}
-  />
+	<Preview
+		entry={entry}
+		path="layouts/base.njk"
+		context={({items}) => ({
+			navigation: {
+				items
+			}
+		})}
+	/>
 );
 
 CMS.registerPreviewTemplate('home', Home);

packages/docs/src/admin/util.js

@@ -3,9 +3,4 @@ import dateFilter from '../filters/date-filter';
 import markdownFilter from '../filters/markdown-filter';
 import w3DateFilter from '../filters/w3-date-filter';
 
-export {
-  helpers,
-  dateFilter,
-  markdownFilter,
-  w3DateFilter,
-};
+export {helpers, dateFilter, markdownFilter, w3DateFilter};