Storybook Playground and Stackblitz (#18250)

* feat: converted all stories from Playground to Default * feat: added @stackblitz/sdk * fix: removed unsed stuff * feat: added new replace and new prop to codePreview * feat: added final stack/sdk code * fix: fixed Tooltip storybook * fix: fixed stackblitz/sdk package * test: fixed avt tests * fix: changed last playground stories
carbon-design-system · Jan 2, 2025 · eab657f · eab657f
1 parent 97fc2e6
commit eab657f
Show file tree

Hide file tree

Showing 117 changed files with 2,940 additions and 4,232 deletions.
diff --git a/.yarn/cache/@stackblitz-sdk-npm-1.11.0-a3cab8fa5d-351647b818.zip b/.yarn/cache/@stackblitz-sdk-npm-1.11.0-a3cab8fa5d-351647b818.zip
diff --git a/e2e/components/Accordion/Accordion-test.avt.e2e.js b/e2e/components/Accordion/Accordion-test.avt.e2e.js
@@ -128,7 +128,7 @@ test.describe('@avt Accordion', () => {
   test('@avt-advanced-states disabled', async ({ page }) => {
     await visitStory(page, {
       component: 'Accordion',
-      id: 'components-accordion--playground',
+      id: 'components-accordion--default',
       globals: {
         theme: 'white',
       },

diff --git a/e2e/components/ContainedList/ContainedList-test.e2e.js b/e2e/components/ContainedList/ContainedList-test.e2e.js
@@ -78,14 +78,6 @@ test.describe('ContainedList', () => {
         });
       });
 
-      test('playground @vrt', async ({ page }) => {
-        await snapshotStory(page, {
-          component: 'ContainedList',
-          id: 'components-containedlist--playground',
-          theme,
-        });
-      });
-
       test('with-expandable-search @vrt', async ({ page }) => {
         await snapshotStory(page, {
           component: 'ContainedList',

diff --git a/e2e/components/DataTable/DataTable-test.avt.e2e.js b/e2e/components/DataTable/DataTable-test.avt.e2e.js
@@ -276,21 +276,6 @@ test.describe('@avt DataTable', () => {
         'components-datatable-selection--default'
       );
     });
-    test.skip('@avt-advanced-states with-radio-expansion', async ({ page }) => {
-      await visitStory(page, {
-        component: 'DataTable',
-        id: 'components-datatable-dynamic--playground',
-        globals: {
-          theme: 'white',
-        },
-        args: {
-          radio: true,
-        },
-      });
-      await expect(page).toHaveNoACViolations(
-        'components-datatable-with-radio-expansion'
-      );
-    });
     test('@avt-advanced-states with-selection-and-sorting', async ({
       page,
     }) => {

diff --git a/e2e/components/DatePicker/DatePicker-test.avt.e2e.js b/e2e/components/DatePicker/DatePicker-test.avt.e2e.js
@@ -36,7 +36,7 @@ test.describe('@avt DatePicker', () => {
   test('@avt-advanced-states disabled', async ({ page }) => {
     await visitStory(page, {
       component: 'DatePicker',
-      id: 'components-datepicker--playground',
+      id: 'components-datepicker--default',
       globals: {
         theme: 'white',
       },
@@ -65,7 +65,7 @@ test.describe('@avt DatePicker', () => {
   test.skip('@avt-advanced-states open', async ({ page }) => {
     await visitStory(page, {
       component: 'DatePicker',
-      id: 'components-datepicker--playground',
+      id: 'components-datepicker--default',
       globals: {
         theme: 'white',
       },

diff --git a/e2e/components/FileUploader/FileUploader-test.avt.e2e.js b/e2e/components/FileUploader/FileUploader-test.avt.e2e.js
@@ -25,7 +25,7 @@ test.describe('@avt FileUploader', () => {
   test('@avt-advanced-states with upload', async ({ page }) => {
     await visitStory(page, {
       component: 'FileUploader',
-      id: 'components-fileuploader--playground',
+      id: 'components-fileuploader--default',
       globals: {
         theme: 'white',
       },

diff --git a/e2e/components/Menu/Menu-test.avt.e2e.js b/e2e/components/Menu/Menu-test.avt.e2e.js
@@ -14,7 +14,7 @@ test.describe('@avt Menu', () => {
   test('@avt-default-state', async ({ page }) => {
     await visitStory(page, {
       component: 'Menu',
-      id: 'components-menu--playground',
+      id: 'components-menu--default',
       globals: {
         theme: 'white',
       },
@@ -25,7 +25,7 @@ test.describe('@avt Menu', () => {
   test.fixme('@avt-keyboard-nav Menu', async ({ page }) => {
     await visitStory(page, {
       component: 'Menu',
-      id: 'components-menu--playground',
+      id: 'components-menu--default',
       globals: {
         theme: 'white',
       },

diff --git a/e2e/components/Menu/Menu-test.e2e.js b/e2e/components/Menu/Menu-test.e2e.js
@@ -17,7 +17,7 @@ test.describe('Menu', () => {
       test('menu @vrt', async ({ page }) => {
         await snapshotStory(page, {
           component: 'Menu',
-          id: 'components-menu--playground',
+          id: 'components-menu--default',
           theme,
         });
       });

diff --git a/e2e/components/Notifications/Notifications-test.avt.e2e.js b/e2e/components/Notifications/Notifications-test.avt.e2e.js
@@ -70,7 +70,7 @@ test.describe('@avt Notifications', () => {
   test('@avt-advanced-states actionable info', async ({ page }) => {
     await visitStory(page, {
       component: 'Notifications',
-      id: 'components-notifications-actionable--playground',
+      id: 'components-notifications-actionable--default',
       globals: {
         theme: 'white',
         args: {
@@ -84,7 +84,7 @@ test.describe('@avt Notifications', () => {
   test('@avt-advanced-states actionable info-square', async ({ page }) => {
     await visitStory(page, {
       component: 'Notifications',
-      id: 'components-notifications-actionable--playground',
+      id: 'components-notifications-actionable--default',
       globals: {
         theme: 'white',
         args: {
@@ -100,7 +100,7 @@ test.describe('@avt Notifications', () => {
   test('@avt-advanced-states actionable success', async ({ page }) => {
     await visitStory(page, {
       component: 'Notifications',
-      id: 'components-notifications-actionable--playground',
+      id: 'components-notifications-actionable--default',
       globals: {
         theme: 'white',
         args: {
@@ -114,7 +114,7 @@ test.describe('@avt Notifications', () => {
   test('@avt-advanced-states actionable warning', async ({ page }) => {
     await visitStory(page, {
       component: 'Notifications',
-      id: 'components-notifications-actionable--playground',
+      id: 'components-notifications-actionable--default',
       globals: {
         theme: 'white',
         args: {
@@ -128,7 +128,7 @@ test.describe('@avt Notifications', () => {
   test('@avt-advanced-states actionable warning-alt', async ({ page }) => {
     await visitStory(page, {
       component: 'Notifications',
-      id: 'components-notifications-actionable--playground',
+      id: 'components-notifications-actionable--default',
       globals: {
         theme: 'white',
         args: {
@@ -146,7 +146,7 @@ test.describe('@avt Notifications', () => {
   }) => {
     await visitStory(page, {
       component: 'Notifications',
-      id: 'components-notifications-actionable--playground',
+      id: 'components-notifications-actionable--default',
       globals: {
         theme: 'white',
         args: {
@@ -165,7 +165,7 @@ test.describe('@avt Notifications', () => {
   }) => {
     await visitStory(page, {
       component: 'Notifications',
-      id: 'components-notifications-actionable--playground',
+      id: 'components-notifications-actionable--default',
       globals: {
         theme: 'white',
         args: {
@@ -184,7 +184,7 @@ test.describe('@avt Notifications', () => {
   }) => {
     await visitStory(page, {
       component: 'Notifications',
-      id: 'components-notifications-actionable--playground',
+      id: 'components-notifications-actionable--default',
       globals: {
         theme: 'white',
         args: {
@@ -203,7 +203,7 @@ test.describe('@avt Notifications', () => {
   }) => {
     await visitStory(page, {
       component: 'Notifications',
-      id: 'components-notifications-actionable--playground',
+      id: 'components-notifications-actionable--default',
       globals: {
         theme: 'white',
         args: {
@@ -222,7 +222,7 @@ test.describe('@avt Notifications', () => {
   }) => {
     await visitStory(page, {
       component: 'Notifications',
-      id: 'components-notifications-actionable--playground',
+      id: 'components-notifications-actionable--default',
       globals: {
         theme: 'white',
         args: {

diff --git a/e2e/components/Popover/Popover-test.e2e.js b/e2e/components/Popover/Popover-test.e2e.js
@@ -18,7 +18,7 @@ test.describe('Popover', () => {
       test('Popover @vrt', async ({ page }) => {
         await snapshotStory(page, {
           component: 'Popover',
-          id: 'components-popover--playground',
+          id: 'components-popover--default',
           theme,
         });
       });

diff --git a/e2e/components/RadioButton/RadioButton-test.avt.e2e.js b/e2e/components/RadioButton/RadioButton-test.avt.e2e.js
@@ -62,7 +62,7 @@ test.describe('@avt RadioButton', () => {
   test('@avt-advanced-states - invalid state', async ({ page }) => {
     await visitStory(page, {
       component: 'RadioButton',
-      id: 'components-radiobutton--playground',
+      id: 'components-radiobutton--default',
       globals: {
         theme: 'white',
       },
@@ -79,7 +79,7 @@ test.describe('@avt RadioButton', () => {
   test('@avt-advanced-states - warn state', async ({ page }) => {
     await visitStory(page, {
       component: 'RadioButton',
-      id: 'components-radiobutton--playground',
+      id: 'components-radiobutton--default',
       globals: {
         theme: 'white',
       },
@@ -96,7 +96,7 @@ test.describe('@avt RadioButton', () => {
   test('@avt-advanced-states - disabled state', async ({ page }) => {
     await visitStory(page, {
       component: 'RadioButton',
-      id: 'components-radiobutton--playground',
+      id: 'components-radiobutton--default',
       globals: {
         theme: 'white',
       },
@@ -112,7 +112,7 @@ test.describe('@avt RadioButton', () => {
   test('@avt-advanced-states - read only state', async ({ page }) => {
     await visitStory(page, {
       component: 'RadioButton',
-      id: 'components-radiobutton--playground',
+      id: 'components-radiobutton--default',
       globals: {
         theme: 'white',
       },

diff --git a/e2e/components/TextArea/TextArea-test.avt.e2e.js b/e2e/components/TextArea/TextArea-test.avt.e2e.js
@@ -25,7 +25,7 @@ test.describe('@avt TextArea', () => {
   test('@avt-advanced-states invalid', async ({ page }) => {
     await visitStory(page, {
       component: 'TextArea',
-      id: 'components-textarea--playground',
+      id: 'components-textarea--default',
       globals: {
         theme: 'white',
       },
@@ -39,7 +39,7 @@ test.describe('@avt TextArea', () => {
   test('@avt-advanced-states warn', async ({ page }) => {
     await visitStory(page, {
       component: 'TextArea',
-      id: 'components-textarea--playground',
+      id: 'components-textarea--default',
       globals: {
         theme: 'white',
       },
@@ -64,7 +64,7 @@ test.describe('@avt TextArea', () => {
   test('@avt-keyboard-nav TextArea keyboard counter', async ({ page }) => {
     await visitStory(page, {
       component: 'TextArea',
-      id: 'components-textarea--playground',
+      id: 'components-textarea--default',
       globals: {
         theme: 'white',
       },

diff --git a/e2e/components/TextInput/TextInput-test.avt.e2e.js b/e2e/components/TextInput/TextInput-test.avt.e2e.js
@@ -25,7 +25,7 @@ test.describe('@avt TextInput', () => {
   test('@avt-advanced-states - disabled', async ({ page }) => {
     await visitStory(page, {
       component: 'TextInput',
-      id: 'components-textinput--playground',
+      id: 'components-textinput--default',
       globals: {
         theme: 'white',
       },

diff --git a/e2e/components/Toggletip/Toggletip-test.avt.e2e.js b/e2e/components/Toggletip/Toggletip-test.avt.e2e.js
@@ -31,9 +31,6 @@ test.describe('@avt Toggletip', () => {
       },
     });
 
-    // Checking if the defaultOpen is working
-    await expect(page.locator('.cds--popover--open')).toBeVisible();
-
     // Checking first Toggletip interaction
     await page.keyboard.press('Tab');
     await expect(page.getByLabel('Show information').first()).toBeFocused();
@@ -46,12 +43,5 @@ test.describe('@avt Toggletip', () => {
     await expect(page.getByRole('button', { name: 'Button' })).toBeFocused();
     await page.keyboard.press('Tab');
     await expect(page.locator('.cds--popover--open')).toBeHidden();
-
-    // Checking second Toggletip interaction and close on Escape key
-    await expect(page.getByLabel('Show information').last()).toBeFocused();
-    await page.keyboard.press('Enter');
-    await expect(page.locator('.cds--popover--open')).toBeVisible();
-    await page.keyboard.press('Escape');
-    await expect(page.locator('.cds--popover--open')).toBeHidden();
   });
 });
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -84,6 +84,7 @@
     "@rollup/plugin-commonjs": "^28.0.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
     "@rollup/plugin-typescript": "^11.0.0",
+    "@stackblitz/sdk": "^1.11.0",
     "@storybook/addon-a11y": "^8.4.5",
     "@storybook/addon-actions": "^8.4.5",
     "@storybook/addon-docs": "^8.4.5",