Adding drupal behaviors to storybook and possibility to load storybook's js and css directly from libraries.yml

[koskinpark]

LATEST UPDATE INFO 25.10.2022

This PR is almost ready to be merged to master branch.

What's done?

1. README files updated of all 4 packages
2. Added drupal's behaviors into component's js files.
3. Added automatical compilation of storybook's css & js files into dist folder.

css of storybook now will be compiled to dist/css/storybook/component-name.css
js of storybook now will be compiled to dist/js/storybook/component-name.js
css of drupal now will be compiled to dist/css/drupal/component-name.css
js of storybook now will be compiled to dist/js/drupal/component-name.js

4. svg sprite now compiled into dist/assets/sprite.svg
5. fonts now compiled into dist/assets/fonts/** folder
6. images now automatically converted to data format if you have called it with background-image url() for example.
7. added yarn build-dev for development mode compilation
8. removed minifying of js completely from webpack config
9. removed packages/components folder and replaced it just by components folder. So now structure of the theme is looking like this:

10. Created assets directory where fonts & images can be stored
11. Removed Makefile since not used & outdated
12. Working with latest node 18 (still working with node 16)
13. some other related fixes.

A bit more info
Why do we need all these?

1. I want to simplify processes for frontend team & accelerate development. That's why automatical compilation of storybook's css & js was introduced.

Now let me explain more detailed.
Previously we had let's say 50 storybook's components on the big project. So 50 css files + 50 js files. Why 50 js files? They are all have been used? Well, the answer is - no, they not. We have a command yarn cc which is calling our kaizen-cg package (a component generator package). This package creating a base construction every component should have. There is twig file inside, css, js + some other files. All these files created by default so frontender can quickly start to build components. Which means - if we are continue talking about our "case" with 50 components -> probably all 50 css files will be used in drupal, but not all the 50 js files -> because js files are automatically generated using yarn cc. OK!

Now what did we do next?
We needed somehow to attach / include storybook's js and css to drupal. For this - usually we had two options:
a) We could import all storybook's css into one styles.css, and call this styles.css in drupal. Same for js. We could import all of the required js into init.js and call only this file in drupal (hello SG Solargard). Of course it's a bad way, because on the real pages we will have a lot of unused css & js, and resulting files (styles.css + init.js) will be so huge. And of course it's not a drupal way - where we need to load only what required.
b) We could create 50 css files in src/css folder (this folder was supposed to be for drupal usage only). And inside of every those file we could call an import of original storybook's css file. Then from themename.libraries.yml we could attach those files.

What it means?
Of course we have to forget about point "A". But what "B" means? It means that we have 50 css files in storybook, 50 js files in storybook. Then we need to create one more 50 css files in src/css folder just to be able to import original storybook's css code. Same for several js files in src/js. For js we need to import original storybook's js and wrap js code in drupal behaviors.

And that's a mess!!!!

This is what my PR is solving. We can kick this "step-in-the-middle" where we declaring a lot of files in src/css and src/js folders just to call storybook's code.

So how it's working now with my PR?

a) first things first - now every storybook's js already wrapped in drupal's behaviors. Storybook can understand what it is and can use normally. Same way how it's working in drupal -> it's working in storybook.
b) automatical compilation of storybook's css & js files into dist folder - why???
Because on the all latest projects we have equal markup in drupal & storybook. We providing equal markup pretty quickly already by using custom layouts / custom formatters / some overrides of twig templates + a little bit (a little bit!!!) hooks. That means - we can just load original storybook's css and js right in drupal without any change!
So how now to use it?
a) You creating a component
b) yarn build to compile component's js and css into dist
c) modify your themename.libraries.yml to create a new library of your component where you will attach directly storybook's css & js from dist folder. Or you can add this to some existing library (like to base library for example)
d) attach your drupal library where required
e) check drupal - it's working and nothing more required!!!
f) src/css and src/js folder will be almost empty folders in the end of project!! Only drupal specific changes can be put into these folder (like managing toolbar styles for example, or system tabs, or whatever else).

Now a little bit more technical details.
What if my drupal's render is different than in storybook? (for example different classnames or a bit different structure) - cool! What i can say is that you better make it equal to storybook, because it's easy! But even if impossible - my short answer will be -> change storybook accordingly to drupal's needs. THE GOAL of storybook is to be always on the latest state. If something goes wrong -> first you need to update storybook and then apply changes to drupal, otherwise storybook is just useless & impossible to support in future.

OK! What if i still don't want to update storybook based on render of drupal, i just want to quickly style something, which other options i have?
You have regular options. You can style a whole web-site in src/css/styles.css if you want. It's still working. You can create any css file in any place, add your styles to there, call this file in drupal -> done.

Ok. My component has js attached, but in drupal i have different classnames so storybook's js doesn't work for drupal, what should i do?
Let me quickly explain what my PR can answer on this question -> every component's js file is built by default like this: you have some default entry (entry - i call it entry, it's a configuration of your component, like wrapper classname, processed name, classnames of inner elements which are required by js and so on). And also we have a custom entry, which is empty in storybook. What can you do - is to read

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

Line 17 in 820f1ea

// If you need a custom entry (in case if for example in drupal

Now about complexity of doing frontend in skilld.
a) From my point of view it's still easy to do any thing by any person. Of course better if you have storybook experience.. but even if you don't have it - you can do whatever you want. With trash ways & with experienced ways. You can totally skip storybook on your project if your project for example is a just one landing page -> and open styles.css and add all of the styles in one file. You can have multiple files, you can use storybook & re-use its power in drupal. And so on.
b) we are still following drupal way even with all these new techniques.
c) we can have absolutely perfectly done styleguide (storybook) and correctly applied it to drupal. And I already have a project when it's all nicely done (it's weblite project on saint gobain).

In the end i would like to say that kaizen is a sandbox. You can do whatever you want, with any experience you have.

A bit more info after "the end" section
This PR is solving also some other bugs we had (not related to the description above). For example production web-sites previously required not only dist/ folder for example with compiled css/js, but also it required original sources of fonts/images. Now all assets are compiling into dist folder automatically. Which means in production build you now only have to put:

1. dist folder
2. templates folder
3. drupal specific files, like logo, favicon, screenshot, *.libraries.yml, *.theme and so on
4. twig templates of storybook's components.

That's all

How to test?

cd web/themes/custom
npx clear-npx-cache
yarn cache clean
npx https://gitpkg.now.sh/skilld-labs/kaizen/packages/kaizen-tg?kaizen-updates
Then open package.json in your newly created theme and replace two strings out there with:

"@skilld/kaizen-cg": "https://gitpkg.now.sh/skilld-labs/kaizen/packages/kaizen-cg?kaizen-updates",
and
"@skilld/kaizen-core": "https://gitpkg.now.sh/skilld-labs/kaizen/packages/kaizen-core?kaizen-updates",

That's all -> test theme normally.

Now what to test?

1. Try to create several new components
2. Try to add some fonts
3. Add some images into assets/images
4. Try to compile things & test in storybook
5. Test everything in drupal
6. Read README files everywhere

[iberdinsky-skilld]

should be also throw error
like in https://github.com/emulsify-ds/emulsify-drupal/blob/master/.storybook/_drupal.js

[koskinpark]

added

[iberdinsky-skilld]

node modules cleared after build

[koskinpark]

reworked without calling node_modules

[iberdinsky-skilld]

i prefer CamelCase

[koskinpark]

for now let's use snake_case

[iberdinsky-skilld]

Added PR with themeName param in cc
#159

[iberdinsky-skilld]

$ cross-env ./node_modules/.bin/webpack
[webpack-cli] Failed to load '/Users/ivan/Sites/kaizen/packages/kaizen-tg/testtheme/webpack.config.js' config
[webpack-cli] Error: Cannot find module 'mini-css-extract-plugin'

[iberdinsky-skilld]

To do local test

cd packages/kaizen-tg
yarn
node . (and etc...)
cd newtheme

change package json to

more info https://docs.npmjs.com/cli/v8/configuring-npm/package-json#local-paths

For both local and gitlab should work this:

"@skilld/kaizen-cg": "https://gitpkg.now.sh/skilld-labs/kaizen/packages/kaizen-cg?kaizen-updates",

more info here
https://gitpkg.vercel.app/

[artreaktor-niks]

Tested this component.
By default css weight should be "theme", not "component"

#entity-fake-link:
#  css:
#    component:

If we rewrite some module - it should be "component".
Correct?

I think would be great to add some comment in
packages/kaizen-tg/_templates/drupal-9-theme/new/kaizen.libraries.yml

To notice that if we add custom config.entries - we need to have specific order.
And.
Naming of the custom behaviours.
Lets make some default naming.

For example
If storybook behavior called
"themename_storybook_componentName"
so extra behaviour should have name
"themename_drupal_componentName"

[koskinpark]

Tested this component. By default css weight should be "theme", not "component"

#entity-fake-link:
#  css:
#    component:

If we rewrite some module - it should be "component". Correct?

I think would be great to add some comment in packages/kaizen-tg/_templates/drupal-9-theme/new/kaizen.libraries.yml

To notice that if we add custom config.entries - we need to have specific order. And. Naming of the custom behaviours. Lets make some default naming.

For example If storybook behavior called "themename_storybook_componentName" so extra behaviour should have name "themename_drupal_componentName"

https://www.drupal.org/docs/develop/standards/css/css-file-organization-for-drupal-9#file-structure

[iberdinsky-skilld]

maybe rewrite this with https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator