Initial commit

.editorconfig

@@ -0,0 +1,12 @@
+root=true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+trim_trailing_whitespace = true
+insert_final_newline = true
+max_line_length = 100
+
+[*.md]
+trim_trailing_whitespace = false

.gitignore

@@ -0,0 +1 @@
+.idea

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Andi
+
+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,114 @@
+# Pattern Wrapper Plugin for Pattern Lab Node
+
+This plugin allows users to add a wrapper div with css class(es) around a pattern when shown in the
+single preview.   
+If it gets included in another pattern, the wrapper is not added.
+
+This comes in handy if you, for example, use theming classes to visualize different backgrounds, colors etc.
+
+## Configuration
+
+After the installation, you will see the config in your `patternlab-config.json`:
+
+```
+"plugins": {
+  "patternlab-plugin-pattern-wrap": {
+    "enabled": true,
+    "initialized": false,
+    "options": {
+      "wrapClassKey": [""]
+    }
+  }
+}
+```
+
+If you don't see this config object, add the plugin via the command:
+
+``` 
+patternlab install --plugins patternlab-plugin-pattern-wrap 
+```
+
+In the `wrapClassKey` array you can add the data keys which should be used to get the class names.
+
+## How does it work?
+
+The plugin will look for any "data key" added to the `wrapClassKey` array and then will add that
+entry to the wrapper element.
+
+Data key can be set inside the Markdown or JSON file of any pattern.
+
+**Example Config**
+
+```
+"wrapClassKey": ["theme-class"]
+```
+
+### Markdown
+
+Usage https://patternlab.io/docs/documenting-patterns/
+
+_my-pattern.md_
+
+``` 
+---
+theme-class: my-theme-class
+---
+```
+
+Will create `<div class="pl-pattern-wrapper-element my-theme-class"></div>` around the rendered
+pattern.
+
+### JSON
+
+Usage https://patternlab.io/docs/creating-pattern-specific-values/
+
+_my-pattern.json_
+
+``` 
+{
+  "theme-class": "my-other-theme-class"
+}
+```
+
+Will create `<div class="pl-pattern-wrapper-element my-other-theme-class"></div>` around the
+rendered pattern.
+
+#### Pseudo-Patterns
+
+This will work with pseudo-patterns too (Usage https://patternlab.io/docs/using-pseudo-patterns/)
+
+_my-pattern~variant.json_
+
+``` 
+{
+  "theme-class": "my-variant-theme-class"
+}
+```
+
+Will create `<div class="pl-pattern-wrapper-element my-variant-theme-class"></div>` around the
+rendered pattern.
+
+### Multiple entries in "wrapClassKey"
+
+Will result in multiple classes in the wrapper div.
+
+**Example Config**
+
+```
+"wrapClassKey": ["theme-class", "other-class"]
+```
+
+_my-pattern.json_
+
+``` 
+{
+  "theme-class": "theme-class",
+  "other-class": "some-other-class"
+}
+```
+
+_Result_
+
+```
+<div class="pl-pattern-wrapper-element theme-class some-other-class"></div>
+```

config.json

@@ -0,0 +1,3 @@
+{
+  "wrapClassKey": [""]
+}

helpers.js

@@ -0,0 +1,51 @@
+/**
+ * the plugin name
+ * @return {string}
+ */
+function getPluginName() {
+  return 'patternlab-plugin-pattern-wrap';
+}
+
+/**
+ * get plugin options from patternlab-config
+ * @param patternlab
+ * @return {*}
+ */
+function getPluginOptions(patternlab) {
+  return patternlab.config.plugins[getPluginName()].options;
+}
+
+/**
+ * get the classes from pattern markdown or json configured by the plugin options
+ * @param patternlab
+ * @param pattern
+ * @return {string}
+ */
+function getWrapClasses(patternlab, pattern) {
+  const config = getPluginOptions(patternlab);
+  const { wrapClassKey } = config;
+  if (!wrapClassKey || wrapClassKey.length === 0) {
+    return '';
+  }
+
+  const classes = [];
+  wrapClassKey.forEach((key) => {
+    const { allMarkdown, jsonFileData } = pattern;
+
+    if (allMarkdown && allMarkdown[key]) {
+      classes.push(allMarkdown[key]);
+    }
+
+    if (jsonFileData && jsonFileData[key]) {
+      classes.push(jsonFileData[key]);
+    }
+  });
+
+  return classes.join(' ');
+}
+
+
+module.exports = {
+  getPluginName,
+  getWrapClasses,
+};

index.js

@@ -0,0 +1,71 @@
+const { getPluginName, getWrapClasses } = require('./helpers');
+
+const pluginName = getPluginName();
+
+/**
+ * PL event handler
+ * @param patternlab
+ * @param pattern
+ */
+function onPatternIterate([patternlab, pattern]) {
+  const classes = getWrapClasses(patternlab, pattern);
+  if (classes.length !== 0) {
+    pattern.patternPartialCode = `<div class="pl-pattern-wrapper-element ${classes}">${pattern.patternPartialCode}</div>`;
+  }
+}
+
+/**
+ * Define what hooks you wish to invoke to here
+ * For a full list of hooks - check out https://github.com/pattern-lab/patternlab-node/blob/master/packages/core/docs/events.md
+ * @param patternlab - global data store which has the handle to hooks
+ */
+function registerEvents(patternlab) {
+  patternlab.events.on('patternlab-pattern-write-begin', onPatternIterate);
+}
+
+/**
+ * A single place to define the frontend configuration
+ * This configuration is outputted to the frontend explicitly as well as included in the plugins object.
+ */
+function getPluginFrontendConfig() {
+  return {
+    name: pluginName,
+    templates: [],
+    stylesheets: [],
+    javascripts: [],
+    onready: '',
+    callback: '',
+  };
+}
+
+/**
+ * The entry point for the plugin. You should not have to alter this code much under many circumstances.
+ * Instead, alter getPluginFrontendConfig() and registerEvents() methods
+ */
+function pluginInit(patternlab) {
+
+  if (!patternlab) {
+    console.error('patternlab object not provided to plugin-init');
+    process.exit(1);
+  }
+
+  //setup listeners if not already active. we also enable and set the plugin as initialized
+  if (!patternlab.config.plugins) {
+    patternlab.config.plugins = {};
+  }
+
+  //attempt to only register events once
+  if (patternlab.config.plugins[pluginName] !== undefined &&
+    patternlab.config.plugins[pluginName].enabled &&
+    !patternlab.config.plugins[pluginName].initialized) {
+
+    //register hooks
+    registerEvents(patternlab);
+
+    //set the plugin initialized flag to true to indicate it is installed and ready
+    patternlab.config.plugins[pluginName].initialized = true;
+  }
+
+}
+
+module.exports = pluginInit;

package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@hadl/patternlab-plugin-pattern-wrap",
+  "version": "1.0.0",
+  "description": "Pattern Wrapper Plugin for Pattern Lab Node",
+  "main": "index.js",
+  "scripts": {
+    "postinstall": "node ./postinstall.js"
+  },
+  "author": "Andreas Bibow",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hadl/patternlab-plugin-pattern-wrap.git"
+  },
+  "bugs": {
+    "url": "https://github.com/hadl/patternlab-plugin-pattern-wrap/issues"
+  },
+  "homepage": "https://github.com/hadl/patternlab-plugin-pattern-wrap#readme"
+}

postinstall.js

@@ -0,0 +1,4 @@
+console.log(`Pattern Lab Node Plugin - "patternlab-plugin-pattern-wrap" installed.
+Use the CLI to install this: patternlab install --plugins patternlab-plugin-pattern-wrap
+Configure or disable this plugin inside your patternlab-config.json file.
+`);