Skip to content

Commit c0d8e9a

Browse files
koskinparkkoskinpark
authored
Merge pull request #158 from skilld-labs/kaizen-updates
Adding drupal behaviors to storybook and possibility to load storybook's js and css directly from libraries.yml
2 parents ace3ef1 + 820f1ea commit c0d8e9a

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

51 files changed

+511
-245
lines changed

‎packages/kaizen-breakpoints/README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@
77
_/ _/ _/_/_/ _/ _/_/_/_/ _/_/_/ _/ _/
88

99

10-
## What is this?
10+
## What is it?
1111

12-
- This package contains some script which parses breakpoints from Drupal's themename/themename.breakpoints.yml and adds them into css and javascript.
12+
- The goal of this package is to re-use `themename.breakpoints.yml` for providing same breakpoints into css and js
1313

1414
## Usage
1515

‎packages/kaizen-cg/README.md‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
_/ _/ _/_/_/ _/ _/_/_/_/ _/_/_/ _/ _/
88

99

10-
## What is this?
10+
## What is it?
1111

1212
- This is a component generator for [kaizen-tg](https://www.npmjs.com/package/@skilld/kaizen-tg)
1313

@@ -17,6 +17,16 @@ Once [kaizen-tg](https://www.npmjs.com/package/@skilld/kaizen-tg) is installed,
1717
1. `cd [themename_dir]`
1818
2. `yarn cc` and follow instructions
1919

20+
## Structure
21+
1. `*.js` to store javascript code related to the component
22+
2. `*.json` to store modifiers of the component, such as default content for example
23+
3. `*.css` to store css code related to the component
24+
4. `*.html.twig` for templating
25+
5. `*.stories.js` for storybook initiation
26+
27+
## Should know
28+
1. Every component's js uses Drupal.behaviors structure and it works in storybook same way as in Drupal.
29+
2030
## Recommendations
2131

2232
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‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
---
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)) %>.json
2+
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
33
---
44
{
5-
"content": {
5+
"defaultContent": {
66
"content": "Lorem Ipsum"
77
}
88
}

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

Lines changed: 54 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,60 @@
11
---
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
2+
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
33
---
44
/**
55
* @file
66
* This is component script template.
77
*/
8-
9-
export default ({
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-
};
8+
(({ behaviors }) => {
9+
<% 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)) %> = {<% } %>
10+
defaultEntry: () => {
11+
return {
12+
className: '<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>',
13+
processingName: 'storybook-<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>',
14+
};
15+
},
16+
customEntry: () => {
17+
// If you need a custom entry (in case if for example in drupal
18+
// you have other classnames than in components - you can create
19+
// a new .js file in src/js folder, and put into it the following
20+
// construction:
21+
// (({ behaviors }) => {
22+
// <% 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 = () => {<% } %>
23+
// return [
24+
// {
25+
// ...your configuration,
26+
// },
27+
// ...etc
28+
// ];
29+
// };
30+
// })(Drupal);
31+
//
32+
// Then, you have to attach compiled version of your newly created
33+
// js file to drupal. Be sure you have attached it before original
34+
// component's js file -> because only in this case component's
35+
// js can catch your custom entry.
36+
},
37+
entries: () => {
38+
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()<% } %>];
39+
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()<% } %>) {
40+
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()<% } %>);
41+
}
42+
return entries;
43+
},
44+
attach: (context) => {
45+
<% 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) => {<% } %>
46+
once(
47+
entry.processingName,
48+
`.${entry.className}`,
49+
context,
50+
).forEach((el) => {
51+
<% 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 });<% } %>
52+
});
53+
});
54+
},
55+
handler: (obj) => {
56+
// eslint-disable-next-line no-console
57+
console.log(obj.el);
58+
},
59+
};
60+
})(Drupal);

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
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
2+
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
33
---
44
.<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %> {
55
display: inherit;

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
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
2+
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
33
---
4-
<div {{ attributes }}>
5-
{{- content.content -}}
4+
<div {{ attributes.addClass('<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>') }}>
5+
{{- defaultContent.content -}}
66
</div>

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

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
11
---
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
2+
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
33
---
44
import './<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>.css';
5-
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';
5+
import './<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>.js';
66
import drupalAttribute from 'drupal-attribute';
77
import { useEffect } from '@storybook/client-api';
8-
98
const template = require('./<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>.html.twig');
109
const data = require('./<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>.json');
1110

1211
export default {
13-
title: '<%= h.changeCase.lower(h.inflection.pluralize(component_type)) %>/<%= h.changeCase.lower(h.inflection.dasherize(name)) %>',
12+
title: '<%= h.changeCase.lower(h.inflection.pluralize(component_type)) %>/<%= h.changeCase.sentenceCase(name) %>',
1413
parameters: {
1514
// Uncomment next line if you need fullscreen mode
1615
// layout: 'fullscreen',
@@ -19,12 +18,13 @@ export default {
1918
// uncomment next line if you want to define it.
2019
// argTypes: {},
2120
};
22-
23-
data.svgSpritePath = window.svgSpritePath;
24-
25-
export const basic = (args = {}) => {
21+
<% if (typeof themeName != 'undefined') { %>
22+
data.<%= h.changeCase.snakeCase(themeName) %>SvgSpritePath = window.<%= h.changeCase.snakeCase(themeName) %>SvgSpritePath;
23+
<% } else { %>
24+
data.<%= h.changeCase.snakeCase(h.themeName) %>SvgSpritePath = window.<%= h.changeCase.snakeCase(h.themeName) %>SvgSpritePath;
25+
<% } %>
26+
const basicRender = (args) => {
2627
const attributes = new drupalAttribute();
27-
attributes.addClass(['<%= h.changeCase.lower(component_type).charAt(0) %>-<%= h.changeCase.lower(h.inflection.dasherize(name)) %>']);
2828
if (args.attributes) {
2929
for (const [attrName, attrValue] of Object.entries(args.attributes)) {
3030
if (attrName === 'class') {
@@ -39,10 +39,12 @@ export const basic = (args = {}) => {
3939
}
4040
data.attributes = attributes;
4141
useEffect(() => {
42-
<%= h.inflection.camelize(name.replace(/ /g, '').replace(/-/g, '_'), true) %>();
42+
// Uncomment next line if you need javascript in your component.
43+
<% 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();<% } %>
4344
}, [args]);
44-
return template({
45-
...data,
46-
...args,
47-
})
45+
return template(data)
46+
};
47+
48+
export const basic = (args = {}) => {
49+
return basicRender(args);
4850
};

‎packages/kaizen-cg/_templates/component/new/index.js‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
2+
// see types of prompts:
3+
// https://github.com/enquirer/enquirer/tree/master/examples
4+
//
5+
const cliArgs = process.argv.slice(2);
6+
const themeName = cliArgs ? cliArgs.join(',').split('--theme_name=').pop().split(',')[0] : '';
7+
8+
module.exports = {
9+
prompt: ({ inquirer, args }) => {
10+
const askForThemeName = themeName ? '' : {
11+
type: 'input',
12+
name: 'themeName',
13+
message: "What's your theme name?",
14+
required: true
15+
};
16+
const questions = [
17+
askForThemeName,
18+
{
19+
type: 'input',
20+
name: 'name',
21+
message: "What's your component name?",
22+
required: true
23+
},
24+
{
25+
type: 'select',
26+
name: 'component_type',
27+
message: 'What type of component?',
28+
choices: ['Atom', 'Molecule', 'Organism', 'Template', 'Helper'],
29+
},
30+
{
31+
type: 'input',
32+
name: 'description',
33+
message: "What's your component description?",
34+
initial: "Component description placeholder"
35+
}
36+
];
37+
38+
return inquirer.prompt(questions)
39+
},
40+
}

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

Lines changed: 0 additions & 25 deletions
This file was deleted.

‎packages/kaizen-cg/index.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@
22
const hygen = require("hygen");
33
const path = require("path");
44

5+
const cliArgs = process.argv.slice(2);
6+
const themeName = cliArgs ? cliArgs.join(',').split('--theme_name=').pop().split(',')[0] : '';
7+
58
const config = {
69
templates: `${__dirname}/_templates`,
710
cwd: __dirname,
@@ -14,6 +17,7 @@ const config = {
1417
helpers: {
1518
relative: (from, to) => path.relative(from, to),
1619
src: () => process.cwd(),
20+
themeName,
1721
},
1822
};
1923

0 commit comments

Comments
 (0)