Adding drupal behaviors to storybook and possibility to load storybook's js and css directly from libraries.yml

Author: koskinpark

packages/kaizen-cg/README.md

@@ -17,6 +17,9 @@ Once [kaizen-tg](https://www.npmjs.com/package/@skilld/kaizen-tg) is installed,
 1. `cd [themename_dir]`
 2. `yarn cc` and follow instructions
 
+## Should know
+1. Every component's js uses Drupal.behaviors structure and it works in storybook same way as in Drupal.
+
 ## Recommendations
 
 1. Please follow BEM methodology when you are creating component. More about BEM's namings [here](http://getbem.com/naming/)

packages/kaizen-cg/_templates/component/new/component-script.js

@@ -5,14 +5,36 @@ to: <%= h.src() %>/packages/components/<%= h.changeCase.lower(h.inflection.plura
  * @file
  * This is component script template.
  */
+(({ behaviors }) => {
+  <% if (typeof themeName != 'undefined') { %>behaviors.<%= h.changeCase.snakeCase(themeName) %>_storybook_<%= h.changeCase.lower(component_type).charAt(0) %>_<%= h.changeCase.snakeCase(h.inflection.dasherize(name)) %> = {<% } else { %>behaviors.<%= h.changeCase.snakeCase(h.themeName) %>_storybook_<%= h.changeCase.lower(component_type).charAt(0) %>_<%= h.changeCase.snakeCase(h.inflection.dasherize(name)) %> = {<% } %>
+    attach: (context, settings) => {
+      const customConfig =
+        settings &&
+        settings.behaviors &&
+        <% if (typeof themeName != 'undefined') { %>settings.behaviors.<%= h.changeCase.snakeCase(themeName) %>_storybook_<%= h.changeCase.lower(component_type).charAt(0) %>_<%= h.changeCase.snakeCase(h.inflection.dasherize(name)) %> &&
+        settings.behaviors.<%= h.changeCase.snakeCase(themeName) %>_storybook_<%= h.changeCase.lower(component_type).charAt(0) %>_<%= h.changeCase.snakeCase(h.inflection.dasherize(name)) %>.entries
+          ? settings.behaviors.<%= h.changeCase.snakeCase(themeName) %>_storybook_<%= h.changeCase.lower(component_type).charAt(0) %>_<%= h.changeCase.snakeCase(h.inflection.dasherize(name)) %>.entries
+          : '';
+        <% } else { %>settings.behaviors.<%= h.changeCase.snakeCase(h.themeName) %>_storybook_<%= h.changeCase.lower(component_type).charAt(0) %>_<%= h.changeCase.snakeCase(h.inflection.dasherize(name)) %> &&
+        settings.behaviors.<%= h.changeCase.snakeCase(h.themeName) %>_storybook_<%= h.changeCase.lower(component_type).charAt(0) %>_<%= h.changeCase.snakeCase(h.inflection.dasherize(name)) %>.entries
+          ? settings.behaviors.<%= h.changeCase.snakeCase(h.themeName) %>_storybook_<%= h.changeCase.lower(component_type).charAt(0) %>_<%= h.changeCase.snakeCase(h.inflection.dasherize(name)) %>.entries
+          : '';<% } %>
+      const config = {
+        entries: [
+          {
+            className: '<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>',
+          },
+          ...customConfig,
+        ],
+        processingName: '<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>',
+      };
 
-export default ({
-  className = '<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>',
-  processingName = className,
-  context = document,
-} = {}) => {
-  once(processingName, `.${className}`, context).forEach((el) => {
-    // eslint-disable-next-line no-console
-    console.log(el);
-  });
-};
+      config.entries.forEach((entry) => {
+        once(config.processingName, entry.className, context).forEach((el) => {
+          // eslint-disable-next-line no-console
+          console.log(el);
+        });
+      })
+    },
+  };
+})(Drupal);

packages/kaizen-cg/_templates/component/new/component.stories.js

@@ -2,7 +2,7 @@
 to: <%= h.src() %>/packages/components/<%= h.changeCase.lower(h.inflection.pluralize(component_type)) %>/<%= h.changeCase.lower(h.inflection.dasherize(name)) %>/<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>.stories.js
 ---
 import './<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>.css';
-import <%= h.inflection.camelize(name.replace(/ /g, '').replace(/-/g, '_'), true) %> from './<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>.js';
+import './<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>.js';
 import drupalAttribute from 'drupal-attribute';
 import { useEffect } from '@storybook/client-api';
 
@@ -19,9 +19,11 @@ export default {
   // uncomment next line if you want to define it.
   // argTypes: {},
 };
-
-data.svgSpritePath = window.svgSpritePath;
-
+<% if (typeof themeName != 'undefined') { %>
+data.<%= h.changeCase.snakeCase(themeName) %>SvgSpritePath = window.<%= h.changeCase.snakeCase(themeName) %>SvgSpritePath;
+<% } else { %>
+data.<%= h.changeCase.snakeCase(h.themeName) %>SvgSpritePath = window.<%= h.changeCase.snakeCase(h.themeName) %>SvgSpritePath;
+<% } %>
 export const basic = (args = {}) => {
   const attributes = new drupalAttribute();
   attributes.addClass(['<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>']);
@@ -39,7 +41,8 @@ export const basic = (args = {}) => {
   }
   data.attributes = attributes;
   useEffect(() => {
-    <%= h.inflection.camelize(name.replace(/ /g, '').replace(/-/g, '_'), true) %>();
+    // Uncomment next line if you need javascript in your component.
+    <% if (typeof themeName != 'undefined') { %>// Drupal.behaviors.<%= h.changeCase.snakeCase(themeName) %>_storybook_<%= h.changeCase.lower(component_type).charAt(0) %>_<%= h.changeCase.snakeCase(h.inflection.dasherize(name)) %>.attach();<% } else { %>// Drupal.behaviors.<%= h.changeCase.snakeCase(h.themeName) %>_storybook_<%= h.changeCase.lower(component_type).charAt(0) %>_<%= h.changeCase.snakeCase(h.inflection.dasherize(name)) %>.attach();<% } %>
   }, [args]);
   return template({
     ...data,

packages/kaizen-cg/_templates/component/new/index.js

@@ -0,0 +1,40 @@
+
+// see types of prompts:
+// https://github.com/enquirer/enquirer/tree/master/examples
+//
+const cliArgs = process.argv.slice(2);
+const themeName = cliArgs ? cliArgs.join(',').split('--theme_name=').pop().split(',')[0] : '';
+
+module.exports = {
+  prompt: ({ inquirer, args }) => {
+    const askForThemeName = themeName ? '' : {
+      type: 'input',
+      name: 'themeName',
+      message: "What's your theme name?",
+      required: true
+    };
+    const questions = [
+      askForThemeName,
+      {
+        type: 'input',
+        name: 'name',
+        message: "What's your component name?",
+        required: true
+      },
+      {
+        type: 'select',
+        name: 'component_type',
+        message: 'What type of component?',
+        choices: ['Atom', 'Molecule', 'Organism', 'Template', 'Helper'],
+      },
+      {
+        type: 'input',
+        name: 'description',
+        message: "What's your component description?",
+        initial: "Component description placeholder"
+      }
+    ];
+
+    return inquirer.prompt(questions)
+  },
+}

packages/kaizen-cg/_templates/component/new/prompt.js

@@ -2,6 +2,9 @@
 const hygen = require("hygen");
 const path = require("path");
 
+const cliArgs = process.argv.slice(2);
+const themeName = cliArgs ? cliArgs.join(',').split('--theme_name=').pop().split(',')[0] : '';
+
 const config = {
   templates: `${__dirname}/_templates`,
   cwd: __dirname,
@@ -14,6 +17,7 @@ const config = {
   helpers: {
     relative: (from, to) => path.relative(from, to),
     src: () => process.cwd(),
+    themeName,
   },
 };
 

packages/kaizen-cg/index.js

@@ -1,6 +1,6 @@
 {
   "name": "@skilld/kaizen-cg",
-  "version": "2.0.0-alpha.3",
+  "version": "2.0.0-alpha.4",
   "description": "Kaizen component generator",
   "bin": "index.js",
   "main": "index.js",

packages/kaizen-cg/package.json

@@ -18,10 +18,11 @@ This component helps you to easily simulate link to some wrapper, based on link
 Example of usage:
 ```
 <div class="m-teaser" data-h-entity-fake-link-container>
+  <div class="m-teaser__content">... Some content ... </div>
   <a class="m-teaser__link" href="#" data-h-entity-fake-link-target>Lorem ipsum</a>
 </div>
 ```
-Note that you can even skip this attribute `data-h-entity-fake-link-target` if your clickable-container contains only one link inside. The script has a fallback in that case and it will take first link in the tree if target data attribute wasn't added for the link.
+Note that you can even skip this attribute `data-h-entity-fake-link-target` for your link if your clickable-container contains only one link inside. The script has a fallback in that case and it will take first link in the tree if target data attribute wasn't added for the link.
 
 In storybook you have to call this script for your story like this:
 ```

packages/kaizen-core/README.md

@@ -20,7 +20,9 @@ const fakeLinkProcessed = (el, link) => {
   el.setAttribute('data-href', link.getAttribute('href'));
   el.setAttribute(
     'aria-label',
-    link.hasAttribute('title') ? link.getAttribute('title') : link.textContent.replace(/\s+/g, ' ').trim(),
+    link.hasAttribute('title')
+      ? link.getAttribute('title')
+      : link.textContent.replace(/\s+/g, ' ').trim(),
   );
   el.setAttribute(
     'data-target',
@@ -39,23 +41,43 @@ const fakeLinkProcessed = (el, link) => {
   });
 };
 
-export default ({
-  wrapperData = '[data-h-entity-fake-link-container]',
-  targetData = '[data-h-entity-fake-link-target]',
-  processingName = 'h-entity-fake-link',
-  context = document,
-} = {}) => {
-  once(processingName, wrapperData, context).forEach((el) => {
-    // Multiple links inside of element you want to wrap is not expected
-    // with this script. So it searches only the first matched.
-    let link = el.querySelector(`a${targetData}[href]`);
-    if (!link) {
-      // Fallback search. If targetData is not defined, then let's try
-      // to catch just first matched link.
-      link = el.querySelector('a[href]');
-    }
-    if (link) {
-      fakeLinkProcessed(el, link);
-    }
-  });
-};
+(({ behaviors }) => {
+  behaviors.kaizen_core_h_entity_fake_link = {
+    attach: (context, settings) => {
+      const customConfig =
+        settings &&
+        settings.behaviors &&
+        settings.behaviors.kaizen_core_h_entity_fake_link &&
+        settings.behaviors.kaizen_core_h_entity_fake_link.entries
+          ? settings.behaviors.kaizen_core_h_entity_fake_link.entries
+          : '';
+      const config = {
+        entries: [
+          {
+            wrapperData: '[data-h-entity-fake-link-container]',
+            targetData: '[data-h-entity-fake-link-target]',
+          },
+          ...customConfig,
+        ],
+        processingName: 'h-entity-fake-link',
+      };
+      config.entries.forEach((entry) => {
+        once(config.processingName, entry.wrapperData, context).forEach(
+          (el) => {
+            // Multiple links inside of element you want to wrap is not expected
+            // with this script. So it searches only the first matched.
+            let link = el.querySelector(`a${entry.targetData}[href]`);
+            if (!link) {
+              // Fallback search. If targetData is not defined, then let's try
+              // to catch just first matched link.
+              link = el.querySelector('a[href]');
+            }
+            if (link) {
+              fakeLinkProcessed(el, link);
+            }
+          },
+        );
+      });
+    },
+  };
+})(Drupal);

packages/kaizen-core/helpers/entity-fake-link/h-entity-fake-link.js

@@ -1,3 +1,3 @@
 # Helper / Entity-fake-link
 
-This component helps to simulate link around element, which contains original link.
+This component helps to simulate link around element, based on some original link.