From 621fedda8773ed817002cb46c9d44f6c64fee7ed Mon Sep 17 00:00:00 2001 From: iberdinsky-skilld Date: Sun, 8 May 2022 13:19:16 +0200 Subject: [PATCH] Added smart component --- packages/kaizen-scg/README.md | 39 +++++++++++ .../component/new/component-config.yml | 56 +++++++++++++++ .../component/new/component-script.js | 26 +++++++ .../component/new/component-source.css | 6 ++ .../new/component-template.html.twig | 8 +++ .../component/new/component.stories.js | 68 +++++++++++++++++++ .../_templates/component/new/prompt.js | 25 +++++++ packages/kaizen-scg/index.js | 20 ++++++ packages/kaizen-scg/package.json | 21 ++++++ .../drupal-9-theme/new/.storybook/main.js | 10 ++- .../drupal-9-theme/new/.storybook/preview.js | 28 ++++++++ .../drupal-9-theme/new/package.json.t | 5 +- .../drupal-9-theme/new/webpack.config.js | 2 +- packages/kaizen-tg/package.json | 2 +- 14 files changed, 312 insertions(+), 4 deletions(-) create mode 100644 packages/kaizen-scg/README.md create mode 100644 packages/kaizen-scg/_templates/component/new/component-config.yml create mode 100644 packages/kaizen-scg/_templates/component/new/component-script.js create mode 100644 packages/kaizen-scg/_templates/component/new/component-source.css create mode 100644 packages/kaizen-scg/_templates/component/new/component-template.html.twig create mode 100644 packages/kaizen-scg/_templates/component/new/component.stories.js create mode 100644 packages/kaizen-scg/_templates/component/new/prompt.js create mode 100644 packages/kaizen-scg/index.js create mode 100644 packages/kaizen-scg/package.json diff --git a/packages/kaizen-scg/README.md b/packages/kaizen-scg/README.md new file mode 100644 index 0000000..e680b64 --- /dev/null +++ b/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. diff --git a/packages/kaizen-scg/_templates/component/new/component-config.yml b/packages/kaizen-scg/_templates/component/new/component-config.yml new file mode 100644 index 0000000..ff68f89 --- /dev/null +++ b/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' \ No newline at end of file diff --git a/packages/kaizen-scg/_templates/component/new/component-script.js b/packages/kaizen-scg/_templates/component/new/component-script.js new file mode 100644 index 0000000..73bb535 --- /dev/null +++ b/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); \ No newline at end of file diff --git a/packages/kaizen-scg/_templates/component/new/component-source.css b/packages/kaizen-scg/_templates/component/new/component-source.css new file mode 100644 index 0000000..926afdd --- /dev/null +++ b/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; +} diff --git a/packages/kaizen-scg/_templates/component/new/component-template.html.twig b/packages/kaizen-scg/_templates/component/new/component-template.html.twig new file mode 100644 index 0000000..1a6b76d --- /dev/null +++ b/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 +--- +
+ {#
#} + {{- content.content -}} + {#
#} +
diff --git a/packages/kaizen-scg/_templates/component/new/component.stories.js b/packages/kaizen-scg/_templates/component/new/component.stories.js new file mode 100644 index 0000000..6560261 --- /dev/null +++ b/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], +}; + diff --git a/packages/kaizen-scg/_templates/component/new/prompt.js b/packages/kaizen-scg/_templates/component/new/prompt.js new file mode 100644 index 0000000..628f36a --- /dev/null +++ b/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" + } +] diff --git a/packages/kaizen-scg/index.js b/packages/kaizen-scg/index.js new file mode 100644 index 0000000..c05b88e --- /dev/null +++ b/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); diff --git a/packages/kaizen-scg/package.json b/packages/kaizen-scg/package.json new file mode 100644 index 0000000..46956ea --- /dev/null +++ b/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" + } +} diff --git a/packages/kaizen-tg/_templates/drupal-9-theme/new/.storybook/main.js b/packages/kaizen-tg/_templates/drupal-9-theme/new/.storybook/main.js index 6aa109f..30609ab 100644 --- a/packages/kaizen-tg/_templates/drupal-9-theme/new/.storybook/main.js +++ b/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', diff --git a/packages/kaizen-tg/_templates/drupal-9-theme/new/.storybook/preview.js b/packages/kaizen-tg/_templates/drupal-9-theme/new/.storybook/preview.js index 1ca6b11..911f7ce 100644 --- a/packages/kaizen-tg/_templates/drupal-9-theme/new/.storybook/preview.js +++ b/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); \ No newline at end of file diff --git a/packages/kaizen-tg/_templates/drupal-9-theme/new/package.json.t b/packages/kaizen-tg/_templates/drupal-9-theme/new/package.json.t index cc03f79..07b3491 100644 --- a/packages/kaizen-tg/_templates/drupal-9-theme/new/package.json.t +++ b/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" }, diff --git a/packages/kaizen-tg/_templates/drupal-9-theme/new/webpack.config.js b/packages/kaizen-tg/_templates/drupal-9-theme/new/webpack.config.js index a853c66..414e65a 100644 --- a/packages/kaizen-tg/_templates/drupal-9-theme/new/webpack.config.js +++ b/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', diff --git a/packages/kaizen-tg/package.json b/packages/kaizen-tg/package.json index 2eb99d0..6affb2e 100644 --- a/packages/kaizen-tg/package.json +++ b/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",