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

packages/kaizen-breakpoints/README.md

@@ -7,9 +7,9 @@
     _/    _/     _/_/_/      _/     _/_/_/_/       _/_/_/     _/    _/
 
 
-## What is this?
+## What is it?
 
-- This package contains some script which parses breakpoints from Drupal's themename/themename.breakpoints.yml and adds them into css and javascript.
+- The goal of this package is to re-use `themename.breakpoints.yml` for providing same breakpoints into css and js
 
 ## Usage
 

packages/kaizen-cg/README.md

@@ -7,7 +7,7 @@
     _/    _/     _/_/_/      _/     _/_/_/_/       _/_/_/     _/    _/
 
 
-## What is this?
+## What is it?
 
 - This is a component generator for [kaizen-tg](https://www.npmjs.com/package/@skilld/kaizen-tg)
 
@@ -17,6 +17,16 @@ Once [kaizen-tg](https://www.npmjs.com/package/@skilld/kaizen-tg) is installed,
 1. `cd [themename_dir]`
 2. `yarn cc` and follow instructions
 
+## Structure
+1. `*.js` to store javascript code related to the component
+2. `*.json` to store modifiers of the component, such as default content for example
+3. `*.css` to store css code related to the component
+4. `*.html.twig` for templating
+5. `*.stories.js` for storybook initiation
+
+## 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-data.json

@@ -1,8 +1,8 @@
 ---
-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)) %>.json
+to: <%= h.src() %>/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)) %>.json
 ---
 {
-  "content": {
+  "defaultContent": {
     "content": "Lorem Ipsum"
   }
 }

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

@@ -1,18 +1,60 @@
 ---
-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)) %>.js
+to: <%= h.src() %>/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)) %>.js
 ---
 /**
  * @file
  * This is component script template.
  */
-
-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);
-  });
-};
+(({ 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)) %> = {<% } %>
+    defaultEntry: () => {
+      return {
+        className: '<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>',
+        processingName: 'storybook-<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>',
+      };
+    },
+    customEntry: () => {
+      // If you need a custom entry (in case if for example in drupal
+      // you have other classnames than in components - you can create
+      // a new .js file in src/js folder, and put into it the following
+      // construction:
+      //     (({ 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)) %>.customEntry = () => {<% } else { %>behaviors.<%= h.changeCase.snakeCase(h.themeName) %>_storybook_<%= h.changeCase.lower(component_type).charAt(0) %>_<%= h.changeCase.snakeCase(h.inflection.dasherize(name)) %>.customEntry = () => {<% } %>
+      //         return [
+      //           {
+      //             ...your configuration,
+      //           },
+      //           ...etc
+      //         ];
+      //       };
+      //     })(Drupal);
+      //
+      // Then, you have to attach compiled version of your newly created
+      // js file to drupal. Be sure you have attached it before original
+      // component's js file -> because only in this case component's
+      // js can catch your custom entry.
+    },
+    entries: () => {
+      let entries = [<% if (typeof themeName != 'undefined') { %>behaviors.<%= h.changeCase.snakeCase(themeName) %>_storybook_<%= h.changeCase.lower(component_type).charAt(0) %>_<%= h.changeCase.snakeCase(h.inflection.dasherize(name)) %>.defaultEntry()<% } else { %>behaviors.<%= h.changeCase.snakeCase(h.themeName) %>_storybook_<%= h.changeCase.lower(component_type).charAt(0) %>_<%= h.changeCase.snakeCase(h.inflection.dasherize(name)) %>.defaultEntry()<% } %>];
+      if (<% if (typeof themeName != 'undefined') { %>behaviors.<%= h.changeCase.snakeCase(themeName) %>_storybook_<%= h.changeCase.lower(component_type).charAt(0) %>_<%= h.changeCase.snakeCase(h.inflection.dasherize(name)) %>.customEntry()<% } else { %>behaviors.<%= h.changeCase.snakeCase(h.themeName) %>_storybook_<%= h.changeCase.lower(component_type).charAt(0) %>_<%= h.changeCase.snakeCase(h.inflection.dasherize(name)) %>.customEntry()<% } %>) {
+        entries.push(...<% if (typeof themeName != 'undefined') { %>behaviors.<%= h.changeCase.snakeCase(themeName) %>_storybook_<%= h.changeCase.lower(component_type).charAt(0) %>_<%= h.changeCase.snakeCase(h.inflection.dasherize(name)) %>.customEntry()<% } else { %>behaviors.<%= h.changeCase.snakeCase(h.themeName) %>_storybook_<%= h.changeCase.lower(component_type).charAt(0) %>_<%= h.changeCase.snakeCase(h.inflection.dasherize(name)) %>.customEntry()<% } %>);
+      }
+      return entries;
+    },
+    attach: (context) => {
+      <% if (typeof themeName != 'undefined') { %>behaviors.<%= h.changeCase.snakeCase(themeName) %>_storybook_<%= h.changeCase.lower(component_type).charAt(0) %>_<%= h.changeCase.snakeCase(h.inflection.dasherize(name)) %>.entries().forEach((entry) => {<% } else { %>behaviors.<%= h.changeCase.snakeCase(h.themeName) %>_storybook_<%= h.changeCase.lower(component_type).charAt(0) %>_<%= h.changeCase.snakeCase(h.inflection.dasherize(name)) %>.entries().forEach((entry) => {<% } %>
+        once(
+          entry.processingName,
+          `.${entry.className}`,
+          context,
+        ).forEach((el) => {
+          <% if (typeof themeName != 'undefined') { %>behaviors.<%= h.changeCase.snakeCase(themeName) %>_storybook_<%= h.changeCase.lower(component_type).charAt(0) %>_<%= h.changeCase.snakeCase(h.inflection.dasherize(name)) %>.handler({ el, entry });<% } else { %>behaviors.<%= h.changeCase.snakeCase(h.themeName) %>_storybook_<%= h.changeCase.lower(component_type).charAt(0) %>_<%= h.changeCase.snakeCase(h.inflection.dasherize(name)) %>.handler({ el, entry });<% } %>
+        });
+      });
+    },
+    handler: (obj) => {
+      // eslint-disable-next-line no-console
+      console.log(obj.el);
+    },
+  };
+})(Drupal);

packages/kaizen-cg/_templates/component/new/component-source.css

@@ -1,5 +1,5 @@
 ---
-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)) %>.css
+to: <%= h.src() %>/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)) %>.css
 ---
 .<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %> {
   display: inherit;

packages/kaizen-cg/_templates/component/new/component-template.html.twig

@@ -1,6 +1,6 @@
 ---
-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)) %>.html.twig
+to: <%= h.src() %>/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)) %>.html.twig
 ---
-<div {{ attributes }}>
-  {{- content.content -}}
+<div {{ attributes.addClass('<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>') }}>
+  {{- defaultContent.content -}}
 </div>

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

@@ -1,16 +1,15 @@
 ---
-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
+to: <%= h.src() %>/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';
-
 const template = require('./<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>.html.twig');
 const data = require('./<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>.json');
 
 export default {
-  title: '<%= h.changeCase.lower(h.inflection.pluralize(component_type)) %>/<%= h.changeCase.lower(h.inflection.dasherize(name)) %>',
+  title: '<%= h.changeCase.lower(h.inflection.pluralize(component_type)) %>/<%= h.changeCase.sentenceCase(name) %>',
   parameters: {
     // Uncomment next line if you need fullscreen mode
     // layout: 'fullscreen',
@@ -19,12 +18,13 @@ export default {
   // uncomment next line if you want to define it.
   // argTypes: {},
 };
-
-data.svgSpritePath = window.svgSpritePath;
-
-export const basic = (args = {}) => {
+<% 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;
+<% } %>
+const basicRender = (args) => {
   const attributes = new drupalAttribute();
-  attributes.addClass(['<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>']);
   if (args.attributes) {
     for (const [attrName, attrValue] of Object.entries(args.attributes)) {
       if (attrName === 'class') {
@@ -39,10 +39,12 @@ 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,
-    ...args,
-  })
+  return template(data)
+};
+
+export const basic = (args = {}) => {
+  return basicRender(args);
 };

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/index.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/package.json

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

packages/kaizen-core/README.md

@@ -7,41 +7,38 @@
     _/    _/     _/_/_/      _/     _/_/_/_/       _/_/_/     _/    _/
 
 
-## What is this?
+## What is it?
 
 - This package contains several helper's components which we are using on every project usually. And also it contains several css files which attached globally to storybook and drupal by default. 
-
+- This package can not be used as standalone. It's only working as a part of [kaizen-tg](https://www.npmjs.com/package/@skilld/kaizen-tg) package.
 ### Entity fake link helper
 
 This component helps you to easily simulate link to some wrapper, based on link inside of this wrapper. For example sometimes you need a whole teaser clickable based on its title's link-field. This script requires two data attributes added to the wrapper and to the link itself.
 
 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:
 ```
-import entityFakeLink from '@skilld/kaizen-core/helpers/entity-fake-link/h-entity-fake-link';
-
-export const basic = (args = {}) => {
-  ...
-  useEffect(() => {
-    entityFakeLink();
-  }, [args]);
-  ...
-};
+useEffect(() => {
+  Drupal.behaviors.kaizen_core_h_entity_fake_link.attach();
+}, [args]);
 ```
 Styles for this helper called globally for storybook, so you don't need to import them manually (but actually the styles of this component contains only `cursor: pointer;` for the wrapper)
 
-In Drupal this helper is not added by default, so if you need it - you have to manually import this component in `src/` folder and call its js/css globally or using drupal's libraries.
+If you need to use this helper in drupal - just uncomment drupal's library `h-entity-fake-link` in themename.libraries.yml and it will automatically work.
+
+If you need to specify your custom configuration for drupal's usage, please see how it can be done from `themename/src/js/components/h-entity-fake-link.js`.
 
 ### Focus visible helper
 
-This script improves focus experience for the people who don't need a visual accessibility. For example a native browser's behavior when you clicking on the button - is to add a focus rings automatically around button, but what if user doesn't have a problems with health? Browser's native focus rings creates sometimes a lot of unnecessary noise and worsens perception of the site actually. So this helper component helps to show focus ring only to the people who really needs it (for example with that helper focus ring can be shown by pressing TAB key, but it will be hidden if interactive element was focused by using mouse's buttons) 
+This script improves focus experience for the people who don't need a visual accessibility. For example a native browser's behavior when you clicking on the button - is to add a focus rings automatically around button, but what if user doesn't have disabilities? Browser's native focus rings creates sometimes a lot of unnecessary noise and worsens perception of the site actually. So this helper component helps to show focus ring only to the people who really needs it (for example with that helper focus ring can be shown by pressing TAB key, but it will be hidden if interactive element was focused by using mouse's buttons) 
 
 This helper component is included globally already in storybook, when you installing [@skilld/kaizen-tg](https://www.npmjs.com/package/@skilld/kaizen-tg) theme. And also this script is included globally in `src/` folder (so Drupal have this script loaded by default too). You don't need to do anything manually with it.
 

packages/kaizen-core/_border-box.css

@@ -1,10 +1,7 @@
 /* https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
-html {
-  box-sizing: border-box;
-}
-
+html,
 *,
 *::before,
 *::after {
-  box-sizing: inherit;
+  box-sizing: border-box;
 }