Merge pull request #151 from skilld-labs/kaizen-updates

kaizen updates

Author: iberdinsky-skilld

packages/kaizen-breakpoints/README.md

@@ -13,9 +13,9 @@
 
 ## Usage
 
-1. This package is added as a dependency for [@skilld/kaizen-tg](https://www.npmjs.com/package/@skilld/kaizen-tg) package, so normally once theme is install - you have `kaizen-breakpoints` already under the hood installed.
+1. This package is added as a dependency for [@skilld/kaizen-tg](https://www.npmjs.com/package/@skilld/kaizen-tg) package, so normally once theme is installed - you have `kaizen-breakpoints` already under the hood.
 2. To see the list of all available breakpoints and its names which you can use in your css and js files - you can run storybook and find it here `/?path=/story/globals-variables--breakpoints` (It is Globals / Variables / Breakpoints) path in storybook
-3. Syntax of usage in css files:
+3. Syntax of usage in css files (`@db` btw means `drupal breakpoint`):
    - `@db l {}` <-- it is analogue of old `@drupal-breakpoint l_1x {}` we had in Kaizen v1
    - `@db l_1x {}`
    - `@db l_2x {}` <-- this is 2x multiplier for retina screens. We don't use usually it in css files, but this breakpoint needed for Drupal's responsive image groups, for 2x increased image styles.

packages/kaizen-breakpoints/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skilld/kaizen-breakpoints",
-  "version": "2.0.0-alpha.1",
+  "version": "2.0.0-alpha.2",
   "description": "Breakpoints YML to css and js",
   "repository": {
     "type": "git",

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

@@ -30,7 +30,9 @@ export const basic = (args = {}) => {
       if (attrName === 'class') {
         attributes.addClass(attrValue);
       }
-      attributes.setAttribute(attrName, attrValue);
+      else {
+        attributes.setAttribute(attrName, attrValue);
+      }
     }
   }
   data.attributes = attributes;

packages/kaizen-cg/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skilld/kaizen-cg",
-  "version": "2.0.0-alpha.1",
+  "version": "2.0.0-alpha.2",
   "description": "Kaizen component generator",
   "bin": "index.js",
   "main": "index.js",

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

@@ -25,6 +25,10 @@ options.cssFiles = {
   ignore: `${options.theme.css}**/_*.css`,
 };
 
+options.jsFiles = {
+  components: `${options.theme.js}**/*.js`,
+};
+
 options.buildAssets = `${options.rootPath.project}scripts/assets/`;
 
 options.postCssConfigDirectory = `${options.rootPath.project}`;

packages/kaizen-tg/_templates/drupal-9-theme/new/kaizen.libraries.yml

@@ -8,7 +8,7 @@ base:
     base:
       dist/css/styles.css: {}
   js:
-    dist/js/app.js: {}
+    dist/js/init.js: {}
   dependencies:
     - core/drupal
     - core/once

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

@@ -9,7 +9,7 @@ to: <%= h.src() %>/<%= h.changeCase.lower(name) %>/package.json
   "author": "Skilld",
   "license": "MIT",
   "devDependencies": {
-    "@skilld/kaizen-cg": "^2.0.0-alpha.1",
+    "@skilld/kaizen-cg": "^2.0.0-alpha.2",
     "@storybook/addon-essentials": "^6.4.19",
     "@storybook/addon-postcss": "^2.0.0",
     "@storybook/builder-webpack5": "^6.4.19",
@@ -25,7 +25,7 @@ to: <%= h.src() %>/<%= h.changeCase.lower(name) %>/package.json
   },
   "dependencies": {
     "@<%= h.changeCase.lower(name) %>/components": "^1.0.0",
-    "@skilld/kaizen-breakpoints": "^2.0.0-alpha.1",
+    "@skilld/kaizen-breakpoints": "^2.0.0-alpha.2",
     "@skilld/kaizen-core": "^2.0.0-alpha.1",
     "autoprefixer": "^10.4.4",
     "cross-env": "^7.0.3",
@@ -39,6 +39,7 @@ to: <%= h.src() %>/<%= h.changeCase.lower(name) %>/package.json
     "extract-loader": "^5.1.0",
     "file-loader": "^6.2.0",
     "glob": "^7.2.0",
+    "mini-css-extract-plugin": "^2.6.0",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.12",
     "postcss-cli": "^9.1.0",

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

@@ -9,25 +9,23 @@ const glob = require('glob');
 const path = require('path');
 const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');
 const TerserPlugin = require('terser-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const options = require('./<%= h.changeCase.lower(name) %>-options');
 
-const mapFilenamesToEntries = (pattern, globOptions) =>
+const mapJSFilenamesToEntries = (pattern, globOptions) =>
   glob.sync(pattern, globOptions).reduce((entries, filename) => {
-    const [, name] = filename.match(/([^/]+)\.css$/);
+    const [, name] = filename.match(/([^/]+)\.js$/);
     return {
       ...entries,
       [name]: filename,
     };
   }, {});
 
 module.exports = {
-  context: options.theme.js,
   entry: {
-    app: './init.js',
-    ...mapFilenamesToEntries(options.cssFiles.components, {
-      ignore: options.cssFiles.ignore,
-    }),
     sprite: glob.sync(path.resolve(__dirname, 'images/svg/**/*.svg')),
+    styles: glob.sync(options.cssFiles.components, options.cssFiles.ignore),
+    ...mapJSFilenamesToEntries(options.jsFiles.components, {}),
   },
   output: {
     path: options.rootPath.dist,
@@ -89,21 +87,15 @@ module.exports = {
           },
         ],
       },
-      // Uncomment if you have theme-stored fonts.
-      // {
-      //   test: /\.(woff|woff2)$/,
-      //   loader: 'file-loader',
-      //   options: {
-      //     outputPath: 'fonts',
-      //     publicPath: '../fonts',
-      //   },
-      // },
     ],
   },
   plugins: [
     new SpriteLoaderPlugin({
       plainSprite: true,
     }),
+    new MiniCssExtractPlugin({
+      filename: './dist/css/[name].css',
+    }),
   ],
   optimization: {
     minimize: true,

packages/kaizen-tg/package.json

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