Skip to content

Commit 879bef4

Browse files
iberdinsky-skilldiberdinsky-skilld
committed
Added smart component
1 parent 4fa7b14 commit 879bef4

File tree

14 files changed

+297
-4
lines changed

14 files changed

+297
-4
lines changed

‎packages/kaizen-scg/README.md‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
# kaizen-cg
2+
3+
_/ _/
4+
_/ _/ _/_/_/ _/_/_/_/ _/_/ _/_/_/
5+
_/_/ _/ _/ _/ _/ _/_/_/_/ _/ _/
6+
_/ _/ _/ _/ _/ _/ _/ _/ _/
7+
_/ _/ _/_/_/ _/ _/_/_/_/ _/_/_/ _/ _/
8+
9+
10+
## What is this?
11+
12+
- This is a component generator for [kaizen-tg](https://www.npmjs.com/package/@skilld/kaizen-tg)
13+
14+
## Usage
15+
16+
Once [kaizen-tg](https://www.npmjs.com/package/@skilld/kaizen-tg) is installed, use:
17+
1. `cd [themename_dir]`
18+
2. `yarn cc` and follow instructions
19+
20+
## Recommendations
21+
22+
1. Please follow BEM methodology when you are creating component. More about BEM's namings [here](http://getbem.com/naming/)
23+
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
24+
3. Don't worry now about IE11 browser - [kaizen-tg](https://www.npmjs.com/package/@skilld/kaizen-tg) doesn't support it
25+
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
26+
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.
27+
28+
## Other kaizen's packages
29+
1. [kaizen-tg](https://www.npmjs.com/package/@skilld/kaizen-tg)
30+
2. [kaizen-core](https://www.npmjs.com/package/@skilld/kaizen-core)
31+
3. [kaizen-breakpoints](https://www.npmjs.com/package/@skilld/kaizen-breakpoints)
32+
33+
# License
34+
35+
This project is licensed under the MIT open source license.

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

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
---
2+
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
3+
---
4+
title: 'Kaizen <%= h.inflection.capitalize(component_type) %> <%= h.inflection.capitalize(name) %>'
5+
library:
6+
css:
7+
base:
8+
COMPONENT/<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>.css: {}
9+
js:
10+
# https://unpkg.com/cowsay@1.5.0/build/cowsay.umd.js: { type: external, minified: true }
11+
COMPONENT/<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>.js: {}
12+
dependencies:
13+
- core/drupal
14+
variables:
15+
attributes:
16+
class: '<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>'
17+
data-test: 'test'
18+
modifiers:
19+
- <%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>--one
20+
- <%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>--two
21+
template_settings:
22+
tag:
23+
label: 'Custom Tag'
24+
description: 'Select html Tag'
25+
modifiers:
26+
- h1
27+
- h2
28+
- h3
29+
plugins:
30+
# formatter:
31+
# template: <%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>
32+
# field_types:
33+
# - string
34+
# - string_long
35+
# - text
36+
# - text_long
37+
# - text_with_summary
38+
# layout:
39+
# template: <%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>
40+
# category: 'Kaizen Components'
41+
# default_region: content
42+
# icon_map:
43+
# - [content]
44+
# regions:
45+
# content:
46+
# label: Content
47+
default_content:
48+
content:
49+
content: 'Lorem Ipsum'

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
---
2+
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
3+
---
4+
/**
5+
* @file
6+
* This is component script template.
7+
*/
8+
9+
const <%= h.changeCase.lower(component_type).charAt(0) %><%= h.inflection.camelize(name.replace(/ /g, '').replace(/-/g, '_')) %> = ({
10+
className = '<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>',
11+
processingName = className,
12+
context = document,
13+
} = {}) => {
14+
once(processingName, `.${className}`, context).forEach((el) => {
15+
// eslint-disable-next-line no-console
16+
console.log(el);
17+
});
18+
};
19+
20+
(({ behaviors }) => {
21+
behaviors.kaizen<%= h.inflection.capitalize(component_type) %><%= h.inflection.capitalize(name) %>Behaviour = {
22+
attach(context, settings) {
23+
<%= h.changeCase.lower(component_type).charAt(0) %><%= h.inflection.camelize(name.replace(/ /g, '').replace(/-/g, '_')) %>({ context, settings });
24+
},
25+
};
26+
})(Drupal);

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
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
3+
---
4+
.<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %> {
5+
display: inherit;
6+
}

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
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
3+
---
4+
<div {{ attributes }}>
5+
{{- content.content -}}
6+
</div>

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

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
---
2+
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
3+
---
4+
import './<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>.css';
5+
import './<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>.js';
6+
import data from './<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>.kaizen_component.yml'
7+
import drupalAttribute from 'drupal-attribute';
8+
import { useEffect } from '@storybook/client-api';
9+
10+
const template = require('./<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>.html.twig');
11+
12+
export default {
13+
title: '<%= h.changeCase.lower(h.inflection.pluralize(component_type)) %>/<%= h.changeCase.lower(h.inflection.dasherize(name)) %>',
14+
parameters: {
15+
// Uncomment next line if you need fullscreen mode
16+
// layout: 'fullscreen',
17+
},
18+
argTypes: {
19+
content: { control: "text" },
20+
modifier: {
21+
options: data.variables.modifiers,
22+
control: { type: "check" },
23+
},
24+
tag: {
25+
options: data.variables.template_settings.tag.modifiers,
26+
control: { type: "radio" },
27+
},
28+
},
29+
};
30+
31+
data.svgSpritePath = window.svgSpritePath;
32+
33+
export const basic = (args = {}) => {
34+
const attributes = new drupalAttribute();
35+
if (args.attributes) {
36+
for (const [attrName, attrValue] of Object.entries(args.attributes)) {
37+
if (attrName === 'class') {
38+
attributes.addClass(attrValue);
39+
}
40+
else {
41+
attributes.setAttribute(attrName, attrValue);
42+
}
43+
}
44+
45+
}
46+
useEffect(() => {
47+
window.drupalSettings.<%= h.changeCase.lower(component_type).charAt(0) %>_<%= h.changeCase.lower(h.inflection.dasherize(name)) %> = {
48+
foo: 'bar',
49+
};
50+
window.Drupal.attachBehaviors();
51+
}, [args]);
52+
return template({
53+
attributes: attributes
54+
.removeClass(data.variables.modifiers)
55+
.addClass(args.modifier),
56+
content: {
57+
content: args.content,
58+
},
59+
});
60+
};
61+
62+
basic.args = {
63+
attributes: data.variables.attributes,
64+
content: data.default_content.content.content,
65+
modifier: data.variables.modifiers[0],
66+
tag: data.variables.template_settings.tag.modifiers[0],
67+
};
68+

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
2+
// see types of prompts:
3+
// https://github.com/enquirer/enquirer/tree/master/examples
4+
//
5+
6+
module.exports = [
7+
{
8+
type: 'input',
9+
name: 'name',
10+
message: "What's your component name?",
11+
required: true
12+
},
13+
{
14+
type: 'select',
15+
name: 'component_type',
16+
message: 'What type of component?',
17+
choices: ['Atom', 'Molecule', 'Organism', 'Template', 'Helper'],
18+
},
19+
{
20+
type: 'input',
21+
name: 'description',
22+
message: "What's your component description?",
23+
initial: "Component description placeholder"
24+
}
25+
]

‎packages/kaizen-scg/index.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
#! /usr/bin/env node
2+
const hygen = require("hygen");
3+
const path = require("path");
4+
5+
const config = {
6+
templates: `${__dirname}/_templates`,
7+
cwd: __dirname,
8+
exec: (action, body) => {
9+
const opts = body && body.length > 0 ? { input: body } : {};
10+
return require("execa").shell(action, opts);
11+
},
12+
logger: { ...console, ok: (text) => console.log(text) },
13+
createPrompter: () => require("enquirer"),
14+
helpers: {
15+
relative: (from, to) => path.relative(from, to),
16+
src: () => process.cwd(),
17+
},
18+
};
19+
20+
hygen.runner("component new", config);

‎packages/kaizen-scg/package.json‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "@skilld/kaizen-scg",
3+
"version": "2.0.0-alpha.1",
4+
"description": "Kaizen smart component generator",
5+
"bin": "index.js",
6+
"main": "index.js",
7+
"repository": {
8+
"type": "git",
9+
"url": "https://github.com/skilld-labs/kaizen.git",
10+
"directory": "packages/kaizen-scg"
11+
},
12+
"author": "Skilld",
13+
"license": "MIT",
14+
"bugs": {
15+
"url": "https://github.com/skilld-labs/kaizen/issues"
16+
},
17+
"homepage": "https://github.com/skilld-labs/kaizen#readme",
18+
"dependencies": {
19+
"hygen": "^6.0.4"
20+
}
21+
}

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

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,21 @@ module.exports = {
2525
// Make whatever fine-grained changes you need
2626
config.module.rules.push(
2727
{
28-
test: /\.yml$/,
28+
test: /\.breakpoints.yml$/,
2929
use: [
3030
{
3131
loader: '@skilld/kaizen-breakpoints/loader',
3232
},
3333
],
3434
},
35+
{
36+
test: /\.kaizen_component.yml$/,
37+
use: [
38+
{
39+
loader: 'yaml-loader',
40+
},
41+
],
42+
},
3543
{
3644
test: /\.twig$/,
3745
loader: 'twig-loader',

0 commit comments

Comments
 (0)