Updates

Author: koskinpark

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,13 @@ 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.
 

packages/kaizen-cg/_templates/component/new/component-data.json

@@ -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)) %>.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
 ---
 {
   "defaultContent": {

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

@@ -1,34 +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.
  */
 (({ 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: () => {
-      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)) %>',
-        },
-      ];
+      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') { %>Drupal.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) => {<% } %>
+      <% 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') { %>Drupal.behaviors.<%= h.changeCase.snakeCase(themeName) %>_storybook_<%= h.changeCase.lower(component_type).charAt(0) %>_<%= h.changeCase.snakeCase(h.inflection.dasherize(name)) %>.handler(el, entry);<% } else { %>Drupal.behaviors.<%= h.changeCase.snakeCase(h.themeName) %>_storybook_<%= h.changeCase.lower(component_type).charAt(0) %>_<%= h.changeCase.snakeCase(h.inflection.dasherize(name)) %>.handler(el, entry);<% } %>
+          <% 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: (el, entry) => {
+    handler: (obj) => {
       // eslint-disable-next-line no-console
-      console.log(el, entry);
+      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 }}>
+<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.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',
@@ -24,9 +23,8 @@ data.<%= h.changeCase.snakeCase(themeName) %>SvgSpritePath = window.<%= h.change
 <% } else { %>
 data.<%= h.changeCase.snakeCase(h.themeName) %>SvgSpritePath = window.<%= h.changeCase.snakeCase(h.themeName) %>SvgSpritePath;
 <% } %>
-export const basic = (args = {}) => {
+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') {
@@ -46,3 +44,7 @@ export const basic = (args = {}) => {
   }, [args]);
   return template(data)
 };
+
+export const basic = (args = {}) => {
+  return basicRender(args);
+};

packages/kaizen-core/README.md

@@ -7,10 +7,10 @@
     _/    _/     _/_/_/      _/     _/_/_/_/       _/_/_/     _/    _/
 
 
-## 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.
@@ -26,23 +26,19 @@ Note that you can even skip this attribute `data-h-entity-fake-link-target` for
 
 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;
 }