feat: Added open in Stackblitz to stories

packages/react/previewer/codePreviewer.tsx

@@ -53,12 +53,12 @@ export const stackblitzPrefillConfig = (
     return iconNames.filter((iconName) => {
       // Grab the component to convert in "<Component" and "{Component}"
       const regexComponent = new RegExp(`<${iconName}\\b`, 'g');
-      const regexCurlBraces = new RegExp(`{${iconName}}\\s\\b`, 'g');
+      const regexCurlBraces = new RegExp(`{\\s*${iconName}\\s*}`, 'g');
 
       // Check if the component exists in the `storyCode`
       if (
         (regexComponent.test(storyCode) || regexCurlBraces.test(storyCode)) &&
-        !componentNames.indexOf(iconName)
+        !componentNames.includes(iconName)
       ) {
         return iconName;
       }

packages/react/src/components/Accordion/Accordion.mdx

@@ -1,6 +1,7 @@
 import Accordion, { AccordionItem, AccordionSkeleton } from '../Accordion';
 import { ArgTypes, Canvas, Meta } from '@storybook/blocks';
 import * as AccordionStories from './Accordion.stories';
+import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
 
 <Meta isTemplate />
 
@@ -36,15 +37,31 @@ You can configure the accordion item's heading using the `title` prop.
 Everything you pass in as a child of `AccordionItem` will be rendered in the
 accordion's panel.
 
-<Canvas of={AccordionStories.Default} />
+<Canvas
+  of={AccordionStories.Default}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(AccordionStories.Default),
+    },
+  ]}
+/>
 
 ## Skeleton state
 
 You can use the `AccordionSkeleton` component to render a skeleton variant of an
 accordion. This is useful to display while content in your accordion is being
 fetched from an external resource like an API.
 
-<Canvas of={AccordionStories.Skeleton} />
+<Canvas
+  of={AccordionStories.Skeleton}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(AccordionStories.Skeleton),
+    },
+  ]}
+/>
 
 ## Component API
 

packages/react/src/components/AspectRatio/AspectRatio.stories.js

@@ -29,25 +29,23 @@ export default {
   },
 };
 
-export const Default = {
-  render: ({ ratio, ...args }) => {
-    return (
-      <Grid {...args}>
-        <Column sm={1} md={2} lg={4}>
-          <AspectRatio ratio={ratio}>Content</AspectRatio>
-        </Column>
-        <Column sm={1} md={2} lg={4}>
-          <AspectRatio ratio={ratio}>Content</AspectRatio>
-        </Column>
-        <Column sm={1} md={2} lg={4}>
-          <AspectRatio ratio={ratio}>Content</AspectRatio>
-        </Column>
-        <Column sm={1} md={2} lg={4}>
-          <AspectRatio ratio={ratio}>Content</AspectRatio>
-        </Column>
-      </Grid>
-    );
-  },
+export const Default = (args) => {
+  return (
+    <Grid {...args}>
+      <Column sm={1} md={2} lg={4}>
+        <AspectRatio {...args}>Content</AspectRatio>
+      </Column>
+      <Column sm={1} md={2} lg={4}>
+        <AspectRatio {...args}>Content</AspectRatio>
+      </Column>
+      <Column sm={1} md={2} lg={4}>
+        <AspectRatio {...args}>Content</AspectRatio>
+      </Column>
+      <Column sm={1} md={2} lg={4}>
+        <AspectRatio {...args}>Content</AspectRatio>
+      </Column>
+    </Grid>
+  );
 };
 
 Default.argTypes = {
@@ -65,5 +63,8 @@ Default.argTypes = {
       type: 'select',
     },
     options: ['16x9', '9x16', '2x1', '1x2', '4x3', '3x4', '1x1'],
+    table: {
+      category: 'AspectRatio',
+    },
   },
 };

packages/react/src/components/Breadcrumb/Breadcrumb.mdx

@@ -1,6 +1,7 @@
 import { Story, Canvas, ArgTypes, Meta } from '@storybook/blocks';
 import { Breadcrumb, BreadcrumbItem, BreadcrumbSkeleton } from '../Breadcrumb';
 import * as BreadcrumbStories from './Breadcrumb.stories';
+import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
 
 <Meta isTemplate />
 
@@ -27,7 +28,15 @@ You can build a breadcrumb using a combination of the `Breadcrumb` and
 `BreadcrumbItem` components as `children` and each `BreadcrumbItem` is
 responsible for displaying the page links in the hierarchy.
 
-<Canvas of={BreadcrumbStories.Default} />
+<Canvas
+  of={BreadcrumbStories.Default}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(BreadcrumbStories.Default),
+    },
+  ]}
+/>
 
 ## Breadcrumb with `OverflowMenu`
 
@@ -36,15 +45,32 @@ The first and last two page links should be shown, but the remaining breadcrumbs
 in between are condensed into an overflow menu. Breadcrumbs should never wrap
 onto a second line.
 
-<Canvas of={BreadcrumbStories.BreadcrumbWithOverflowMenu} />
+<Canvas
+  of={BreadcrumbStories.BreadcrumbWithOverflowMenu}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () =>
+        stackblitzPrefillConfig(BreadcrumbStories.BreadcrumbWithOverflowMenu),
+    },
+  ]}
+/>
 
 ## Skeleton state
 
 You can use the `BreadcrumbSkeleton` component to render a skeleton variant of a
 breadcrumb. This is useful to display while content in your breadcrumb is being
 fetched from an external resource like an API.
 
-<Canvas of={BreadcrumbStories.Skeleton} />
+<Canvas
+  of={BreadcrumbStories.Skeleton}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(BreadcrumbStories.Skeleton),
+    },
+  ]}
+/>
 
 ## Component API
 

packages/react/src/components/Breadcrumb/Breadcrumb.stories.js

@@ -71,4 +71,6 @@ BreadcrumbWithOverflowMenu.argTypes = {
   ...sharedArgTypes,
 };
 
-export const Skeleton = () => <BreadcrumbSkeleton />;
+export const Skeleton = () => {
+  return <BreadcrumbSkeleton />;
+};

packages/react/src/components/Button/Button.mdx

@@ -49,10 +49,42 @@ communicate calls to action to the user and allow users to interact with pages
 in a variety of ways. `Button` labels express what action will occur when the
 user interacts with it.
 
-<Canvas of={ButtonStories.Default} />
-<Canvas of={ButtonStories.Secondary} />
-<Canvas of={ButtonStories.Tertiary} />
-<Canvas of={ButtonStories.Ghost} />
+<Canvas
+  of={ButtonStories.Default}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(ButtonStories.Default),
+    },
+  ]}
+/>
+<Canvas
+  of={ButtonStories.Secondary}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(ButtonStories.Secondary),
+    },
+  ]}
+/>
+<Canvas
+  of={ButtonStories.Tertiary}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(ButtonStories.Tertiary),
+    },
+  ]}
+/>
+<Canvas
+  of={ButtonStories.Ghost}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(ButtonStories.Ghost),
+    },
+  ]}
+/>
 
 ## Danger Buttons
 
@@ -64,7 +96,15 @@ danger button style. However, if a destructive action is just one of several
 actions a user could choose from, then a lower emphasis style like the tertiary
 danger button or the ghost danger button may be more appropriate.
 
-<Canvas of={ButtonStories.Danger} />
+<Canvas
+  of={ButtonStories.Danger}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(ButtonStories.Danger),
+    },
+  ]}
+/>
 
 ## Icon-only Buttons
 
@@ -73,7 +113,15 @@ Icon buttons can take the form of Primary, Secondary, Tertiary, and Ghost but
 most commonly will be styled as primary or ghost buttons. Icon only buttons do
 not support Danger, Danger tertiary, or Danger ghost.
 
-<Canvas of={ButtonStories.IconButton} />
+<Canvas
+  of={ButtonStories.IconButton}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(ButtonStories.IconButton),
+    },
+  ]}
+/>
 
 ## Set of Buttons
 
@@ -84,15 +132,31 @@ Negative action buttons will be on the left. Positive action buttons should be
 on the right. When these two types buttons are paired in the correct order, they
 will automatically space themselves apart.
 
-<Canvas of={ButtonStories.SetOfButtons} />
+<Canvas
+  of={ButtonStories.SetOfButtons}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(ButtonStories.SetOfButtons),
+    },
+  ]}
+/>
 
 ## Skeleton state
 
 You can use the `ButtonSkeleton` component to render a skeleton variant of a
 button. This is useful to display on initial page load to indicate to users that
 content is being loaded.
 
-<Canvas of={ButtonStories.Skeleton} />
+<Canvas
+  of={ButtonStories.Skeleton}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(ButtonStories.Skeleton),
+    },
+  ]}
+/>
 
 ## Component API
 

packages/react/src/components/Button/Button.stories.js

@@ -130,10 +130,12 @@ export const SetOfButtons = (args) => {
   );
 };
 
-export const Skeleton = () => (
-  <div>
-    <ButtonSkeleton />
-    &nbsp;
-    <ButtonSkeleton size="sm" />
-  </div>
-);
+export const Skeleton = () => {
+  return (
+    <div>
+      <ButtonSkeleton />
+      &nbsp;
+      <ButtonSkeleton size="sm" />
+    </div>
+  );
+};

packages/react/src/components/Checkbox/Checkbox.mdx

@@ -1,6 +1,7 @@
 import { Story, Canvas, ArgTypes, Meta } from '@storybook/blocks';
 import Checkbox, { CheckboxSkeleton } from '../Checkbox';
 import * as CheckboxStories from './Checkbox.stories';
+import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
 
 <Meta isTemplate />
 
@@ -24,7 +25,15 @@ import * as CheckboxStories from './Checkbox.stories';
 You can build a checkbox using the `Checkbox` in combination with a `<fieldset>`
 element to group controls and `<legend>` element for the label.
 
-<Canvas of={CheckboxStories.Default} />
+<Canvas
+  of={CheckboxStories.Default}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(CheckboxStories.Default),
+    },
+  ]}
+/>
 
 ### Controlled example
 
@@ -50,7 +59,15 @@ You can use the `CheckboxSkeleton` component to render a skeleton variant of a
 checkbox. This is useful to display while content in your checkbox is being
 fetched from an external resource like an API.
 
-<Canvas of={CheckboxStories.Skeleton} />
+<Canvas
+  of={CheckboxStories.Skeleton}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(CheckboxStories.Skeleton),
+    },
+  ]}
+/>
 
 ## Component API
 

packages/react/src/components/Checkbox/Checkbox.stories.js

@@ -20,11 +20,6 @@ const checkboxEvents = {
   labelText: 'Checkbox label',
 };
 
-const fieldsetCheckboxProps = () => ({
-  className: 'some-class',
-  legendText: 'Group label',
-});
-
 export default {
   title: 'Components/Checkbox',
   component: Checkbox,
@@ -146,7 +141,7 @@ const sharedArgTypes = {
 };
 
 export const Default = (args) => (
-  <CheckboxGroup {...fieldsetCheckboxProps()} {...args}>
+  <CheckboxGroup className="some-class" legendText="Group label" {...args}>
     <Checkbox labelText={`Checkbox label`} id="checkbox-label-1" />
     <Checkbox labelText={`Checkbox label`} id="checkbox-label-2" />
   </CheckboxGroup>
@@ -162,7 +157,8 @@ export const Horizontal = (args) => {
   return (
     <CheckboxGroup
       orientation="horizontal"
-      {...fieldsetCheckboxProps()}
+      className="some-class"
+      legendText="Group label"
       helperText="Helper text goes here"
       {...args}>
       <Checkbox labelText={`Checkbox label`} id="checkbox-label-1" />
@@ -204,7 +200,9 @@ export const Single = () => {
   );
 };
 
-export const Skeleton = () => <CheckboxSkeleton />;
+export const Skeleton = () => {
+  return <CheckboxSkeleton />;
+};
 
 const AILabelFunc = (kind) => (
   <AILabel className="ai-label-container" kind={kind}>