From 83bedaa2d52790546910d1ff54d846db9d4e5435 Mon Sep 17 00:00:00 2001 From: Andi Date: Sun, 28 Nov 2021 17:07:01 +0100 Subject: [PATCH] Initial commit --- .editorconfig | 12 ++++++ .gitignore | 1 + .npmrc | 0 LICENSE | 21 +++++++++ README.md | 114 +++++++++++++++++++++++++++++++++++++++++++++++++ config.json | 3 ++ helpers.js | 51 ++++++++++++++++++++++ index.js | 71 ++++++++++++++++++++++++++++++ package.json | 19 +++++++++ postinstall.js | 4 ++ 10 files changed, 296 insertions(+) create mode 100644 .editorconfig create mode 100644 .gitignore create mode 100644 .npmrc create mode 100644 LICENSE create mode 100644 README.md create mode 100644 config.json create mode 100644 helpers.js create mode 100644 index.js create mode 100644 package.json create mode 100644 postinstall.js diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..afb5f8c --- /dev/null +++ b/.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 diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..485dee6 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.idea diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..e69de29 diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..d690f43 --- /dev/null +++ b/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. diff --git a/README.md b/README.md new file mode 100644 index 0000000..c2093df --- /dev/null +++ b/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 `
` 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 `
` 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 `
` 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_ + +``` +
+``` diff --git a/config.json b/config.json new file mode 100644 index 0000000..4b32a02 --- /dev/null +++ b/config.json @@ -0,0 +1,3 @@ +{ + "wrapClassKey": [""] +} diff --git a/helpers.js b/helpers.js new file mode 100644 index 0000000..1ff0e47 --- /dev/null +++ b/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, +}; diff --git a/index.js b/index.js new file mode 100644 index 0000000..854b000 --- /dev/null +++ b/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 = `
${pattern.patternPartialCode}
`; + } +} + +/** + * 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; diff --git a/package.json b/package.json new file mode 100644 index 0000000..38687ed --- /dev/null +++ b/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" +} diff --git a/postinstall.js b/postinstall.js new file mode 100644 index 0000000..890c02c --- /dev/null +++ b/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. +`);