Added smart component

packages/kaizen-scg/README.md

@@ -0,0 +1,39 @@
+# kaizen-csg
+
+        _/                       _/
+       _/  _/       _/_/_/             _/_/_/_/       _/_/       _/_/_/
+      _/_/       _/    _/      _/         _/       _/_/_/_/     _/    _/
+     _/  _/     _/    _/      _/       _/         _/           _/    _/
+    _/    _/     _/_/_/      _/     _/_/_/_/       _/_/_/     _/    _/
+
+
+## What is this?
+
+- This is a smart component generator for [kaizen-tg](https://www.npmjs.com/package/@skilld/kaizen-tg)
+
+## Requirements
+
+- Drupal module for search components in themes and modules https://github.com/iberdinsky-skilld/kaizen (will be changed after release)
+
+## Usage
+
+Once [kaizen-tg](https://www.npmjs.com/package/@skilld/kaizen-tg) is installed, use:
+1. `cd [themename_dir]`
+2. `yarn csc` and follow instructions
+
+## Recommendations
+
+1. Please follow BEM methodology when you are creating component. More about BEM's namings [here](http://getbem.com/naming/)
+2. Avoid jQuery inside of component as much as possible. Try to not use external libraries with jQuery dependency. Here is a useful [link](https://github.com/nefe/You-Dont-Need-jQuery) how to make one or another thing without jQuery on vanilla javascript
+3. Don't worry now about IE11 browser - [kaizen-tg](https://www.npmjs.com/package/@skilld/kaizen-tg) doesn't support it
+4. Use [argTypes](https://storybook.js.org/docs/react/api/argtypes) as much as possible if your component is not static and have different modifiers, try to avoid a lot of component's variations if it's possible to replace them by argTypes
+5. Don't hardcode content in `component-name.twig` or `component-name.stories.js` of the component, you should build re-usable components. All default content should be stored into `component-name.json` file, and then this content can be modified using `args` from any other component.
+
+## Other kaizen's packages
+1. [kaizen-tg](https://www.npmjs.com/package/@skilld/kaizen-tg)
+2. [kaizen-core](https://www.npmjs.com/package/@skilld/kaizen-core)
+3. [kaizen-breakpoints](https://www.npmjs.com/package/@skilld/kaizen-breakpoints)
+
+# License
+
+This project is licensed under the MIT open source license.

packages/kaizen-scg/_templates/component/new/component-config.yml

@@ -0,0 +1,56 @@
+---
+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)) %>.kaizen_component.yml
+---
+title: 'Kaizen <%= h.inflection.capitalize(component_type) %> <%= h.inflection.capitalize(name) %>'
+library:
+  css:
+    base:
+      COMPONENT/<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>.css: {}
+  js:
+    # https://unpkg.com/cowsay@1.5.0/build/cowsay.umd.js: { type: external, minified: true }
+    COMPONENT/<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>.js: {}
+  dependencies:
+    - core/drupal
+variables:
+  attributes:
+    class: '<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>'
+  modifiers:
+    - <%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>--one
+    - <%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>--two
+  # region_attributes:
+  #   content:
+  #     attributes:
+  #       class:
+  #         - <%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>__content
+  #     modifiers:
+  #       - <%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>__content--one
+  #       - <%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>__content--two
+  template_settings:
+    tag:
+      label: 'Custom Tag'
+      description: 'Select html Tag'
+      modifiers:
+        - h1
+        - h2
+        - h3
+# plugins:
+#   formatter:
+#     template: <%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>
+#     field_types:
+#       - string
+#       - string_long
+#       - text
+#       - text_long
+#       - text_with_summary
+#   layout:
+#     template: <%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>
+#     category: 'Kaizen Components'
+#     default_region: content
+#     icon_map:
+#       - [content]
+#     regions:
+#       content:
+#         label: Content
+default_content:
+  content:
+    content: 'Lorem Ipsum'

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

@@ -0,0 +1,26 @@
+---
+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
+---
+/**
+ * @file
+ * This is component script template.
+ */
+
+const <%= h.changeCase.lower(component_type).charAt(0) %><%= h.inflection.camelize(name.replace(/ /g, '').replace(/-/g, '_')) %> = ({
+  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 }) => {
+  behaviors.kaizen<%= h.inflection.capitalize(component_type) %><%= h.inflection.capitalize(name) %>Behaviour = {
+    attach(context, settings) {
+      <%= h.changeCase.lower(component_type).charAt(0) %><%= h.inflection.camelize(name.replace(/ /g, '').replace(/-/g, '_')) %>({ context, settings });
+    },
+  };
+})(Drupal);

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

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

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

@@ -0,0 +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)) %>.html.twig
+---
+<div {{ attributes }}>
+  {# <div {{ region_attributes.content.addClass('layout__region', 'layout__region--content') }}> #}
+  {{- content.content -}}
+  {# </div> #}
+</div>

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

@@ -0,0 +1,68 @@
+---
+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.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>.js';
+import data from './<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>.kaizen_component.yml'
+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');
+
+export default {
+  title: '<%= h.changeCase.lower(h.inflection.pluralize(component_type)) %>/<%= h.changeCase.lower(h.inflection.dasherize(name)) %>',
+  parameters: {
+    // Uncomment next line if you need fullscreen mode
+    // layout: 'fullscreen',
+  },
+  argTypes: {
+    content: { control: "text" },
+    modifier: {
+      options: data.variables.modifiers,
+      control: { type: "check" },
+    },
+    tag: {
+      options: data.variables.template_settings.tag.modifiers,
+      control: { type: "radio" },
+    },
+  },
+};
+
+data.svgSpritePath = window.svgSpritePath;
+
+export const basic = (args = {}) => {
+  const attributes = new drupalAttribute();
+  if (args.attributes) {
+    for (const [attrName, attrValue] of Object.entries(args.attributes)) {
+      if (attrName === 'class') {
+        attributes.addClass(attrValue);
+      }
+      else {
+        attributes.setAttribute(attrName, attrValue);
+      }
+    }
+
+  }
+  useEffect(() => {
+    window.drupalSettings.<%= h.changeCase.lower(component_type).charAt(0) %>_<%= h.changeCase.lower(h.inflection.dasherize(name)) %> = {
+      foo: 'bar',
+    };
+    window.Drupal.attachBehaviors();
+  }, [args]);
+  return template({
+    attributes: attributes
+      .removeClass(data.variables.modifiers)
+      .addClass(args.modifier),
+    content: {
+      content: args.content,
+    },
+  });
+};
+
+basic.args = {
+  attributes: data.variables.attributes,
+  content: data.default_content.content.content,
+  modifier: data.variables.modifiers[0],
+  tag: data.variables.template_settings.tag.modifiers[0],
+};
+

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

@@ -0,0 +1,25 @@
+
+// see types of prompts:
+// https://github.com/enquirer/enquirer/tree/master/examples
+//
+
+module.exports = [
+  {
+    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"
+  }
+]

packages/kaizen-scg/index.js

@@ -0,0 +1,20 @@
+#! /usr/bin/env node
+const hygen = require("hygen");
+const path = require("path");
+
+const config = {
+  templates: `${__dirname}/_templates`,
+  cwd: __dirname,
+  exec: (action, body) => {
+    const opts = body && body.length > 0 ? { input: body } : {};
+    return require("execa").shell(action, opts);
+  },
+  logger: { ...console, ok: (text) => console.log(text) },
+  createPrompter: () => require("enquirer"),
+  helpers: {
+    relative: (from, to) => path.relative(from, to),
+    src: () => process.cwd(),
+  },
+};
+
+hygen.runner("component new", config);

packages/kaizen-scg/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@skilld/kaizen-scg",
+  "version": "2.0.0-alpha.1",
+  "description": "Kaizen smart component generator",
+  "bin": "index.js",
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/skilld-labs/kaizen.git",
+    "directory": "packages/kaizen-scg"
+  },
+  "author": "Skilld",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/skilld-labs/kaizen/issues"
+  },
+  "homepage": "https://github.com/skilld-labs/kaizen#readme",
+  "dependencies": {
+    "hygen": "^6.0.4"
+  }
+}

packages/kaizen-tg/_templates/drupal-9-theme/new/.storybook/main.js

@@ -25,13 +25,21 @@ module.exports = {
     // Make whatever fine-grained changes you need
     config.module.rules.push(
       {
-        test: /\.yml$/,
+        test: /\.breakpoints.yml$/,
         use: [
           {
             loader: '@skilld/kaizen-breakpoints/loader',
           },
         ],
       },
+      {
+        test: /\.kaizen_component.yml$/,
+        use: [
+          {
+            loader: 'yaml-loader',
+          },
+        ],
+      },
       {
         test: /\.twig$/,
         loader: 'twig-loader',

packages/kaizen-tg/_templates/drupal-9-theme/new/.storybook/preview.js

@@ -15,3 +15,31 @@ window.svgSpritePath = svgSpritePath;
 import Twig from 'twig';
 import twigDrupalFilters from 'twig-drupal-filters';
 twigDrupalFilters(Twig);
+
+window.Drupal = { behaviors: {} };
+window.drupalSettings = {};
+
+((Drupal, drupalSettings) => {
+  Drupal.throwError = function (error) {
+    setTimeout(function () {
+      throw error;
+    }, 0);
+  };
+
+  Drupal.attachBehaviors = function (context, settings) {
+    context = context || document;
+    settings = settings || drupalSettings;
+    const behaviors = Drupal.behaviors;
+    // Execute all of them.
+    Object.keys(behaviors || {}).forEach((i) => {
+      if (typeof behaviors[i].attach === 'function') {
+        // Don't stop the execution of behaviors in case of an error.
+        try {
+          behaviors[i].attach(context, settings);
+        } catch (e) {
+          Drupal.throwError(e);
+        }
+      }
+    });
+  };
+})(Drupal, window.drupalSettings);

packages/kaizen-tg/_templates/drupal-9-theme/new/package.json.t

@@ -10,6 +10,7 @@ to: <%= h.src() %>/<%= h.changeCase.lower(name) %>/package.json
   "license": "MIT",
   "devDependencies": {
     "@skilld/kaizen-cg": "^2.0.0-alpha.3",
+    "@skilld/kaizen-scg": "^2.0.0-alpha.1",
     "@storybook/addon-essentials": "^6.4.19",
     "@storybook/addon-postcss": "^2.0.0",
     "@storybook/builder-webpack5": "^6.4.19",
@@ -57,7 +58,8 @@ to: <%= h.src() %>/<%= h.changeCase.lower(name) %>/package.json
     "svg-sprite-loader": "^6.0.11",
     "terser-webpack-plugin": "^5.3.1",
     "webpack": "^5.70.0",
-    "webpack-cli": "^4.9.2"
+    "webpack-cli": "^4.9.2",
+    "yaml-loader": "^0.8.0"
   },
   "scripts": {
     "build": "cross-env ./node_modules/.bin/webpack",
@@ -70,6 +72,7 @@ to: <%= h.src() %>/<%= h.changeCase.lower(name) %>/package.json
     "watch": "cross-env ./node_modules/.bin/webpack -w",
     "watch:bs": "cross-env NODE_ENV=development ./node_modules/.bin/run-p browsersync watch",
     "cc": "npx @skilld/kaizen-cg",
+    "csc": "npx @skilld/kaizen-scg",
     "storybook": "start-storybook",
     "build-storybook": "build-storybook -c .storybook -o dist/storybook"
   },

packages/kaizen-tg/_templates/drupal-9-theme/new/webpack.config.js

@@ -35,7 +35,7 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.yml$/,
+        test: /\.breakpoints.yml$/,
         use: [
           {
             loader: '@skilld/kaizen-breakpoints/loader',

packages/kaizen-tg/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skilld/kaizen-tg",
-  "version": "2.0.0-alpha.5",
+  "version": "2.0.0-alpha.6",
   "description": "Kaizen drupal theme generator",
   "bin": "index.js",
   "main": "index.js",