feat: added opne in stackblitz to the rest of Canvas

carbon-design-system · Jan 8, 2025 · d5fee4f · d5fee4f
1 parent 96b5a47
commit d5fee4f
Show file tree

Hide file tree

Showing 65 changed files with 3,046 additions and 1,303 deletions.
diff --git a/packages/react/previewer/codePreviewer.tsx b/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;
       }

diff --git a/packages/react/src/components/Accordion/Accordion.mdx b/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
 

diff --git a/packages/react/src/components/Breadcrumb/Breadcrumb.mdx b/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
 

diff --git a/packages/react/src/components/Breadcrumb/Breadcrumb.stories.js b/packages/react/src/components/Breadcrumb/Breadcrumb.stories.js
@@ -71,4 +71,6 @@ BreadcrumbWithOverflowMenu.argTypes = {
   ...sharedArgTypes,
 };
 
-export const Skeleton = () => <BreadcrumbSkeleton />;
+export const Skeleton = () => {
+  return <BreadcrumbSkeleton />;
+};
diff --git a/packages/react/src/components/Button/Button.mdx b/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
 

diff --git a/packages/react/src/components/Button/Button.stories.js b/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>
+  );
+};
diff --git a/packages/react/src/components/Checkbox/Checkbox.mdx b/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
 

diff --git a/packages/react/src/components/Checkbox/Checkbox.stories.js b/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}>