hr-design-system-handlebars 1.52.11 → 1.52.12

package/.storybook/preview.js

@@ -1,6 +1,9 @@
 import '!style-loader!css-loader!postcss-loader!tailwind'
 import 'tailwind'
 import { withThemeByDataAttribute } from '@storybook/addon-styling'
+import '@storybook/addon-console'
+import { setConsoleOptions } from '@storybook/addon-console';
+import { configureActions } from '@storybook/addon-actions';
 
 import hrDesignsystemDark from './HRDesignsystemDark'
 import hrDesignsystemLight from './HRDesignsystemLight'
@@ -11,6 +14,38 @@ import loadFeature from '../build/webpack/feature-loader/initializer/loader'
 import '../src/assets/js/alpine.js'
 import '../src/assets/tailwind.css'
 
+import { CheckCSS } from 'checkcss';
+
+configureActions({
+    clearOnStoryChange: true, 
+  });
+  
+// Create CheckCSS instance
+const checkcss = new CheckCSS();
+
+checkcss.onClassnameDetected = function (classname, element) {
+    // Return `false` to disable checks for `classname`.
+    // For example, to ignore classnames starting with
+    // "license-" or "maintainer-"...
+    var storybookRoot = document.getElementById('storybook-root');
+    var prefixes = /^js-|^cy-|^sb-/.test(classname) ? false : true
+    return storybookRoot.contains(element) && prefixes
+}
+checkcss.onUndefinedClassname = function (classname) {
+    console.log(
+        `checkcss: No CSS rule for .${classname}`,
+      );
+  };
+
+checkcss.scan().watch();
+
+const panelInclude = setConsoleOptions({}).panelInclude;
+
+setConsoleOptions({
+    panelInclude: [...panelInclude, /checkcss/],
+}); 
+
+
 function loadDelayedImages() {
     setTimeout(function () {
         var t,
@@ -173,11 +208,12 @@ export const parameters = {
                 [
                     'Entwicklung',
                     [
-                        'Installation und Update von Dependencies im Entwicklungs Projekt',
-                        'Installation der Design-System Komponenten im Delivery Projekt',
+                        'Installation und Update von Dependencies',
+                        'Design System im Delivery Projekt installieren',
+                        'Konventionen und Datenstrukturen',
+                        'Testdatenbereitstellung',
+                        'Konsolenausgaben'
                     ],
-                    'Konventionen und Datenstrukturen',
-                    'Testdatenbereitstellung',
                     '*',
                 ],
                 'Komponenten',

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v1.52.12 (Wed Jan 24 2024)
+
+#### 🐛 Bug Fix
+
+- Add console to storybook [#811](https://github.com/mumprod/hr-design-system-handlebars/pull/811) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v1.52.11 (Wed Jan 24 2024)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -3249,7 +3249,7 @@ article.indexText ul {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1706086838048;
+  counter-reset: cnt1706100388787;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3551,7 +3551,7 @@ article.indexText ul {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1706086838048 1;
+  counter-increment: cnt1706100388787 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3567,7 +3567,7 @@ article.indexText ul {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1706086838048);
+  content: counter(cnt1706100388787);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */

package/package.json

@@ -6,7 +6,7 @@
     "license": "MIT",
     "main": "dist/index.js",
     "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-    "version": "1.52.11",
+    "version": "1.52.12",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "storybook": "storybook dev -p 6006 public",
@@ -43,8 +43,9 @@
         "@babel/core": "^7.12.10",
         "@babel/preset-env": "^7.21.4",
         "@storybook/addon-a11y": "^7.2.1",
-        "@storybook/addon-actions": "^7.2.1",
-        "@storybook/addon-essentials": "^7.2.1",
+        "@storybook/addon-actions": "7.5.3",
+        "@storybook/addon-console": "^2.0.0",
+        "@storybook/addon-essentials": "7.5.3",
         "@storybook/addon-links": "^7.2.1",
         "@storybook/addon-styling": "^1.3.5",
         "@storybook/addons": "^7.2.1",
@@ -112,6 +113,7 @@
         "a11y-dialog": "^8.0.4",
         "alpinejs": "^3.8.1",
         "async-alpine": "^1.0.0",
+        "checkcss": "^2.0.9",
         "dialog-polyfill": "^0.5.6",
         "tailwindcss-counter": "^1.1.3"
     },

package/src/stories/ConsoleLog.mdx

@@ -0,0 +1,38 @@
+import { Meta, Story, Canvas } from '@storybook/addon-docs'
+
+<Meta title="Grundlegendes/Entwicklung/Konsolenausgaben" />
+
+# Konsolenausgaben im Action Tab
+-   [Allgemein](#allgemein)
+-   [Festlegen welche Logs angezeigt werden sollen](#festlegen-welche-logs-angezeigt-werden-sollen)
+
+
+## Allgemein
+
+Es ist möglich console.log() ausgaben im "Action Tab" einer Story anzuzeigen. Dafür wird das Plugin "@storybook/addon-console" verwendet. Auf grund eines Bugs benötigt addon-console die Storybook Plugins @storybook/addon-actions und @storybook/addon-essentials jeweils in der version 7.5.3
+Aus diesem Grund dürfen diese nicht Upgedatet werden bis der Bug in addon-console behoben wurde. 
+
+Zur Zeit aktualisiert der Tab sich leider nicht automatisch beim wechsel in eine andere Story weshalb um die Korrekten Logs angezeigt zu bekommen ein reload(F5) der Seite durchgefürt werden muss.
+
+## Festlegen welche Logs angezeigt werden sollen
+
+standardmäßig würden alle console.log() im Action Tab angezeigt. Um nur für uns relevante Meldungen anzuzeigen werden über einen Filter nicht "relevante" logs ausgefiltert.
+
+Dies kann in der function setConsoleOptions() in der preview.js über eine REGEX konfiguriert werden.
+```javascript
+
+setConsoleOptions({
+    panelInclude: [...panelInclude, /checkcss/],
+});
+
+```
+Die REGEX sorgt dafür das ausschließlich LOGs angezeigt werden, in denen der String "checkcss" vorkommt. Bei zukünftigen Ausgaben ist es somit notwendig diese mit einem vorangestellten Prefix zu kennzeichnen. z.b. "testausgabe:" . Die angepasste REGEX um die testausgaben auch anzuzeigen würde dann so aussehen:
+
+```javascript
+
+setConsoleOptions({
+    panelInclude: [...panelInclude, /checkcss|testausgabe/],
+});
+
+```
+

package/src/stories/Fixtures.mdx

@@ -1,6 +1,6 @@
 import { Meta, Story, Canvas } from '@storybook/addon-docs'
 
-<Meta title="Grundlegendes/Testdatenbereitstellung" />
+<Meta title="Grundlegendes/Entwicklung/Testdatenbereitstellung" />
 
 # Bereitstellung von Testdaten für Stories
 

package/src/stories/conventions-and-datastructure.mdx

@@ -1,6 +1,6 @@
 import { Meta, Canvas } from '@storybook/addon-docs'
 
-<Meta title="Grundlegendes/Konventionen und Datenstrukturen" />
+<Meta title="Grundlegendes/Entwicklung/Konventionen und Datenstrukturen" />
 
 # Konventionen und Datenstrukturen