refactor: updated storybook to version 7 (#2093)

* refactor: migrated to new Storybook major version * refactor: did further migrations * refactor: differentiated indexes * refactor: changed comment format * docs: updated packages list * docs: added another suggested VS Code extension * chore: simple addition * docs: migrated content * fix: these are conflicting with Storybooks stories names * refactor: regenerated package lock file * refactor: regenerated package lock files * refactor: regenerated package lock files * refactor: regenerated package lock files * Update main.ts * refactor: regenerated package lock files * refactor: regenerated some README files * fix: the value is actually supposed to be a string compare to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value * Revert "fix: the value is actually supposed to be a string" This reverts commit aea1f3f. * refactor: regenerated package lock files * refactor: regenerated package lock files * refactor: regenerated package lock file * Update main.ts * Update package.json * refactor: regenerated package lock file * refactor: regenerated package lock file * chore: update storybook * chore: update package-lock.json * chore: cleanup monorepo * chore: update from main * fix: issue with out folder directory * chore: increase snapshot threshold * chore: increase snapshot threshold * chore: update snapshots * chore: update snapshots --------- Co-authored-by: NicolasMerget <Nicolas.Merget@deutschebahn.com>
db-ui · Feb 8, 2024 · 0bc4ad7 · 0bc4ad7
1 parent ac265d7
commit 0bc4ad7
Show file tree

Hide file tree

Showing 167 changed files with 52,396 additions and 78,596 deletions.
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
@@ -79,6 +79,9 @@ updates:
       babel:
         patterns:
           - '@babel*'
+      react:
+        patterns:
+          - 'react*'
       typescript-eslint:
         patterns:
           - '@typescript-eslint*'
@@ -146,54 +149,3 @@ updates:
         update-types: ['version-update:semver-minor']
     pull-request-branch-name:
       separator: '-'
-  - package-ecosystem: 'npm'
-    directory: '/showcase/playground-showcase'
-    open-pull-requests-limit: 10
-    schedule:
-      interval: 'daily'
-      time: '04:00'
-      timezone: 'Europe/Berlin'
-    ignore:
-      - dependency-name: 'react'
-        update-types: ['version-update:semver-major']
-      - dependency-name: 'react-dom'
-        update-types: ['version-update:semver-major']
-    pull-request-branch-name:
-      separator: '-'
-  - package-ecosystem: 'npm'
-    directory: '/showcase/react-showcase'
-    open-pull-requests-limit: 10
-    schedule:
-      interval: 'daily'
-      time: '04:00'
-      timezone: 'Europe/Berlin'
-    ignore:
-      - dependency-name: 'react'
-        update-types: ['version-update:semver-major']
-      - dependency-name: 'react-dom'
-        update-types: ['version-update:semver-major']
-    pull-request-branch-name:
-      separator: '-'
-  - package-ecosystem: 'npm'
-    directory: '/showcase/reactwind-showcase'
-    open-pull-requests-limit: 10
-    schedule:
-      interval: 'daily'
-      time: '04:00'
-      timezone: 'Europe/Berlin'
-    ignore:
-      - dependency-name: 'react'
-        update-types: ['version-update:semver-major']
-      - dependency-name: 'react-dom'
-        update-types: ['version-update:semver-major']
-    pull-request-branch-name:
-      separator: '-'
-  - package-ecosystem: 'npm'
-    directory: '/showcase/vue-showcase'
-    open-pull-requests-limit: 10
-    schedule:
-      interval: 'daily'
-      time: '04:00'
-      timezone: 'Europe/Berlin'
-    pull-request-branch-name:
-      separator: '-'
diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -5,6 +5,7 @@
     "streetsidesoftware.code-spell-checker",
     "html-validate.vscode-html-validate",
     "deque-systems.vscode-axe-linter",
-    "esbenp.prettier-vscode"
+    "esbenp.prettier-vscode",
+    "unifiedjs.vscode-mdx"
   ]
 }
diff --git a/doc/howto-storybook.md b/doc/howto-storybook.md
@@ -1,7 +1,7 @@
 # Storybook composition
 
 When using an own Storybook within your project, you can make use of the [Storybook composition feature](https://storybook.js.org/docs/react/sharing/storybook-composition), to integrate it in your own Storybook.
-Therefore, you need to link the published `@db-ui/elements` Storybook in your own by adding a reference in your Storybook `main.js` file.
+Therefore, you need to link the published `@db-ui/elements` Storybook in your own by adding a reference in your Storybook `main.js`/`main.ts` file.
 
 ```js
 module.exports = {

diff --git a/e2e/cypress/e2e/00-0-intro/welcome-story.cy.js b/e2e/cypress/e2e/00-0-intro/welcome-story.cy.js
@@ -1,6 +1,6 @@
 context('welcome-page', () => {
   beforeEach(() => {
-    cy.visit('/iframe.html?id=00-intro-welcome--page&viewMode=story');
+    cy.gotoStory('00-intro', 'welcome', false);
   });
 
   const contain = (cardsIndex, index, item) => {

diff --git a/e2e/cypress/e2e/01-0-layout/db-card.cy.js b/e2e/cypress/e2e/01-0-layout/db-card.cy.js
@@ -1,6 +1,6 @@
 context('db-card', () => {
   beforeEach(() => {
-    cy.visit('/iframe.html?id=01-layout-card-intro--page&viewMode=story');
+    cy.gotoStory('01-layout', 'card');
   });
 
   it('db-card - snapshot', () => {

diff --git a/e2e/cypress/e2e/01-0-layout/db-cards.cy.js b/e2e/cypress/e2e/01-0-layout/db-cards.cy.js
@@ -1,6 +1,6 @@
 context('db-cards', () => {
   beforeEach(() => {
-    cy.visit('/iframe.html?id=01-layout-cards-intro--page&viewMode=story');
+    cy.gotoStory('01-layout', 'cards');
   });
 
   it('db-cards - snapshot', () => {

diff --git a/e2e/cypress/e2e/02-0-navigation/db-brand.cy.js b/e2e/cypress/e2e/02-0-navigation/db-brand.cy.js
@@ -1,6 +1,6 @@
 context('db-brand', () => {
   beforeEach(() => {
-    cy.visit('/iframe.html?id=02-navigation-brand-intro--page&viewMode=story');
+    cy.gotoStory('02-navigation', 'brand');
   });
 
   it('db-brand - snapshot', () => {

diff --git a/e2e/cypress/e2e/02-0-navigation/db-breadcrumb.cy.js b/e2e/cypress/e2e/02-0-navigation/db-breadcrumb.cy.js
@@ -1,8 +1,6 @@
 context('db-breadcrumb', () => {
   beforeEach(() => {
-    cy.visit(
-      '/iframe.html?id=02-navigation-breadcrumb-intro--page&viewMode=story'
-    );
+    cy.gotoStory('02-navigation', 'breadcrumb');
   });
 
   it('db-breadcrumb - snapshot', () => {

diff --git a/e2e/cypress/e2e/02-0-navigation/db-footer.cy.js b/e2e/cypress/e2e/02-0-navigation/db-footer.cy.js
@@ -1,10 +1,10 @@
 context('db-footer', () => {
   beforeEach(() => {
-    cy.visit('/iframe.html?id=02-navigation-footer-intro--page&viewMode=story');
+    cy.gotoStory('02-navigation', 'footer');
   });
 
   it('db-footer - snapshot', () => {
-    cy.snap('db-footer');
+    cy.snap('db-footer', 0.16);
   });
 
   const selector = 'db-footer > footer';

diff --git a/e2e/cypress/e2e/02-0-navigation/db-header.cy.js b/e2e/cypress/e2e/02-0-navigation/db-header.cy.js
@@ -1,6 +1,6 @@
 context('db-header', () => {
   beforeEach(() => {
-    cy.visit('/iframe.html?id=02-navigation-header-intro--page&viewMode=story');
+    cy.gotoStory('02-navigation', 'header');
   });
 
   it('db-header - snapshot', () => {

diff --git a/e2e/cypress/e2e/02-0-navigation/db-link.cy.js b/e2e/cypress/e2e/02-0-navigation/db-link.cy.js
@@ -1,6 +1,6 @@
 context('db-link', () => {
   beforeEach(() => {
-    cy.visit('/iframe.html?id=02-navigation-link-intro--page&viewMode=story');
+    cy.gotoStory('02-navigation', 'link');
   });
 
   it('db-link - snapshot', () => {
@@ -13,15 +13,13 @@ context('db-link', () => {
     cy.get('db-link')
       .eq(2)
       .find('a')
-      .contains('internal')
-      .invoke('attr', 'target')
-      .should('eq', '_self');
+      .should('have.attr', 'target', '_self')
+      .contains('internal');
 
     cy.get('db-link')
       .eq(3)
       .find('a')
-      .contains('external')
-      .invoke('attr', 'target')
-      .should('eq', '_blank');
+      .should('have.attr', 'target', '_blank')
+      .contains('external');
   });
 });
diff --git a/e2e/cypress/e2e/02-0-navigation/db-linklist.cy.js b/e2e/cypress/e2e/02-0-navigation/db-linklist.cy.js
@@ -1,8 +1,6 @@
 context('db-linklist', () => {
   beforeEach(() => {
-    cy.visit(
-      '/iframe.html?id=02-navigation-linklist-intro--page&viewMode=story'
-    );
+    cy.gotoStory('02-navigation', 'linklist');
   });
 
   it('db-linklist - snapshot', () => {

diff --git a/e2e/cypress/e2e/02-1-navigation/db-mainnavigation.cy.js b/e2e/cypress/e2e/02-1-navigation/db-mainnavigation.cy.js
@@ -1,8 +1,6 @@
 context('db-mainnavigation', () => {
   beforeEach(() => {
-    cy.visit(
-      '/iframe.html?id=02-navigation-main-navigation-intro--page&viewMode=story'
-    );
+    cy.gotoStory('02-navigation', 'main-navigation');
   });
 
   it('db-mainnavigation - snapshot', () => {

diff --git a/e2e/cypress/e2e/02-1-navigation/db-metanavigation.cy.js b/e2e/cypress/e2e/02-1-navigation/db-metanavigation.cy.js
@@ -1,8 +1,6 @@
 context('db-metanavigation', () => {
   beforeEach(() => {
-    cy.visit(
-      '/iframe.html?id=02-navigation-meta-navigation-intro--page&viewMode=story'
-    );
+    cy.gotoStory('02-navigation', 'meta-navigation');
   });
 
   it('db-metanavigation - snapshot', () => {

diff --git a/e2e/cypress/e2e/02-1-navigation/db-pagination.cy.js b/e2e/cypress/e2e/02-1-navigation/db-pagination.cy.js
@@ -1,8 +1,6 @@
 context('db-pagination', () => {
   beforeEach(() => {
-    cy.visit(
-      '/iframe.html?id=02-navigation-pagination-intro--page&viewMode=story'
-    );
+    cy.gotoStory('02-navigation', 'pagination');
   });
 
   it('db-pagination - snapshot', () => {

diff --git a/e2e/cypress/e2e/02-1-navigation/db-sidenavi.cy.js b/e2e/cypress/e2e/02-1-navigation/db-sidenavi.cy.js
@@ -1,12 +1,10 @@
 context('db-sidenavi', () => {
   beforeEach(() => {
-    cy.visit(
-      '/iframe.html?id=02-navigation-sidenavi-intro--page&viewMode=story'
-    );
+    cy.gotoStory('02-navigation', 'sidenavi');
   });
 
   it('db-sidenavi - snapshot', () => {
-    cy.snap('db-sidenavi', 0.1);
+    cy.snap('db-sidenavi', 0.24);
   });
 
   it('sidenavi contains links', function () {

diff --git a/e2e/cypress/e2e/02-1-navigation/db-tab-bar.cy.js b/e2e/cypress/e2e/02-1-navigation/db-tab-bar.cy.js
@@ -1,8 +1,6 @@
 context('db-tab-bar', () => {
   beforeEach(() => {
-    cy.visit(
-      '/iframe.html?id=02-navigation-tab-bar-intro--page&viewMode=story'
-    );
+    cy.gotoStory('02-navigation', 'tab-bar');
   });
 
   it('db-tab-bar - snapshot', () => {

diff --git a/e2e/cypress/e2e/03-0-action/db-button.cy.js b/e2e/cypress/e2e/03-0-action/db-button.cy.js
@@ -1,6 +1,6 @@
 context('db-button', () => {
   beforeEach(() => {
-    cy.visit('/iframe.html?id=03-action-button-intro--page&viewMode=story');
+    cy.gotoStory('03-action', 'button');
   });
 
   const selector = 'db-button > button';

diff --git a/e2e/cypress/e2e/03-0-action/db-toggle.cy.js b/e2e/cypress/e2e/03-0-action/db-toggle.cy.js
@@ -1,6 +1,6 @@
 context('db-toggle', () => {
   beforeEach(() => {
-    cy.visit('/iframe.html?id=03-action-toggle-intro--page&viewMode=story');
+    cy.gotoStory('03-action', 'toggle');
   });
 
   it('db-toggle - snapshot', () => {

diff --git a/e2e/cypress/e2e/04-0-data-display/db-accordion.cy.js b/e2e/cypress/e2e/04-0-data-display/db-accordion.cy.js
@@ -1,8 +1,6 @@
 context('db-accordion', () => {
   beforeEach(() => {
-    cy.visit(
-      '/iframe.html?id=04-data-display-accordion-intro--page&viewMode=story'
-    );
+    cy.gotoStory('04-data-display', 'accordion');
   });
   it('db-accordion - snapshot', () => {
     cy.snap('db-accordion');

diff --git a/e2e/cypress/e2e/04-0-data-display/db-chip.cy.js b/e2e/cypress/e2e/04-0-data-display/db-chip.cy.js
@@ -1,6 +1,6 @@
 context('db-chip', () => {
   beforeEach(() => {
-    cy.visit('/iframe.html?id=04-data-display-chip-intro--page&viewMode=story');
+    cy.gotoStory('04-data-display', 'chip');
   });
 
   it('filter chips', function () {

diff --git a/e2e/cypress/e2e/04-0-data-display/db-headline.cy.js b/e2e/cypress/e2e/04-0-data-display/db-headline.cy.js
@@ -1,8 +1,6 @@
 context('db-headline', () => {
   beforeEach(() => {
-    cy.visit(
-      '/iframe.html?id=04-data-display-headline-intro--page&viewMode=story'
-    );
+    cy.gotoStory('04-data-display', 'headline');
   });
   it('db-headline - snapshot', () => {
     cy.snap('db-headline');

diff --git a/e2e/cypress/e2e/04-0-data-display/db-icon.cy.js b/e2e/cypress/e2e/04-0-data-display/db-icon.cy.js
@@ -1,6 +1,6 @@
 context('db-icon', () => {
   beforeEach(() => {
-    cy.visit('/iframe.html?id=04-data-display-icon-intro--page&viewMode=story');
+    cy.gotoStory('04-data-display', 'icon');
   });
 
   it('db-icon - snapshot', () => {

diff --git a/e2e/cypress/e2e/04-1-data-display/db-image.cy.js b/e2e/cypress/e2e/04-1-data-display/db-image.cy.js
@@ -1,12 +1,10 @@
 context('db-image', () => {
   beforeEach(() => {
-    cy.visit(
-      '/iframe.html?id=04-data-display-image-intro--page&viewMode=story'
-    );
+    cy.gotoStory('04-data-display', 'image');
   });
 
   it('db-image - snapshot', () => {
-    cy.snap('db-image', 0.2);
+    cy.snap('db-image', 0.4);
   });
   it('images should have the right class and alt text', function () {
     const imagesclassic = [0, 1, 2];

diff --git a/e2e/cypress/e2e/04-1-data-display/db-logo.cy.js b/e2e/cypress/e2e/04-1-data-display/db-logo.cy.js
@@ -1,6 +1,6 @@
 context('db-logo', () => {
   beforeEach(() => {
-    cy.visit('/iframe.html?id=04-data-display-logo-intro--page&viewMode=story');
+    cy.gotoStory('04-data-display', 'logo');
   });
 
   it('db-logo - snapshot', () => {

diff --git a/e2e/cypress/e2e/04-1-data-display/db-table.cy.js b/e2e/cypress/e2e/04-1-data-display/db-table.cy.js
@@ -1,12 +1,10 @@
 context('db-table', () => {
   beforeEach(() => {
-    cy.visit(
-      '/iframe.html?id=04-data-display-table-intro--page&viewMode=story'
-    );
+    cy.gotoStory('04-data-display', 'table');
   });
 
   it('db-table - snapshot', () => {
-    cy.snap('db-table', 0.17);
+    cy.snap('db-table', 0.19);
   });
 
   it('Renders tables with column tabledata', function () {

diff --git a/e2e/cypress/e2e/04-1-data-display/db-tag.cy.js b/e2e/cypress/e2e/04-1-data-display/db-tag.cy.js
@@ -1,6 +1,6 @@
 context('db-tag', () => {
   beforeEach(() => {
-    cy.visit('/iframe.html?id=04-data-display-tag-intro--page&viewMode=story');
+    cy.gotoStory('04-data-display', 'tag');
   });
 
   it('db-tag - snapshot', () => {

diff --git a/e2e/cypress/e2e/05-0-data-input/db-checkbox.cy.js b/e2e/cypress/e2e/05-0-data-input/db-checkbox.cy.js
@@ -1,8 +1,6 @@
 context('db-checkbox', () => {
   beforeEach(() => {
-    cy.visit(
-      '/iframe.html?id=05-data-input-checkbox-intro--page&viewMode=story'
-    );
+    cy.gotoStory('05-data-input', 'checkbox');
   });
   it('db-checkbox - snapshot', () => {
     cy.snap('db-checkbox', 0.18);

diff --git a/e2e/cypress/e2e/05-0-data-input/db-input.cy.js b/e2e/cypress/e2e/05-0-data-input/db-input.cy.js
@@ -1,6 +1,6 @@
 context('db-input', () => {
   beforeEach(() => {
-    cy.visit('/iframe.html?id=05-data-input-input-intro--page&viewMode=story');
+    cy.gotoStory('05-data-input', 'input');
   });
 
   it('db-input - snapshot', () => {

diff --git a/e2e/cypress/e2e/05-0-data-input/db-radio.cy.js b/e2e/cypress/e2e/05-0-data-input/db-radio.cy.js
@@ -1,6 +1,6 @@
 context('db-radio', () => {
   beforeEach(() => {
-    cy.visit('/iframe.html?id=05-data-input-radio-intro--page&viewMode=story');
+    cy.gotoStory('05-data-input', 'radio');
   });
 
   it('db-radio - snapshot', () => {