Skip to content

Commit 7542158

Browse files
guidariguidari
authored
feat: Added open in Stackblitz to stories (#18309)
* feat: added opne in stackblitz to the rest of Canvas * fix: fixed aspectratio and datatable
1 parent 05e4725 commit 7542158

File tree

65 files changed

+3054
-1321
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

65 files changed

+3054
-1321
lines changed

‎packages/react/previewer/codePreviewer.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,12 +53,12 @@ export const stackblitzPrefillConfig = (
5353
return iconNames.filter((iconName) => {
5454
// Grab the component to convert in "<Component" and "{Component}"
5555
const regexComponent = new RegExp(`<${iconName}\\b`, 'g');
56-
const regexCurlBraces = new RegExp(`{${iconName}}\\s\\b`, 'g');
56+
const regexCurlBraces = new RegExp(`{\\s*${iconName}\\s*}`, 'g');
5757

5858
// Check if the component exists in the `storyCode`
5959
if (
6060
(regexComponent.test(storyCode) || regexCurlBraces.test(storyCode)) &&
61-
!componentNames.indexOf(iconName)
61+
!componentNames.includes(iconName)
6262
) {
6363
return iconName;
6464
}

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

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import Accordion, { AccordionItem, AccordionSkeleton } from '../Accordion';
22
import { ArgTypes, Canvas, Meta } from '@storybook/blocks';
33
import * as AccordionStories from './Accordion.stories';
4+
import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
45

56
<Meta isTemplate />
67

@@ -36,15 +37,31 @@ You can configure the accordion item's heading using the `title` prop.
3637
Everything you pass in as a child of `AccordionItem` will be rendered in the
3738
accordion's panel.
3839

39-
<Canvas of={AccordionStories.Default} />
40+
<Canvas
41+
of={AccordionStories.Default}
42+
additionalActions={[
43+
{
44+
title: 'Open in Stackblitz',
45+
onClick: () => stackblitzPrefillConfig(AccordionStories.Default),
46+
},
47+
]}
48+
/>
4049

4150
## Skeleton state
4251

4352
You can use the `AccordionSkeleton` component to render a skeleton variant of an
4453
accordion. This is useful to display while content in your accordion is being
4554
fetched from an external resource like an API.
4655

47-
<Canvas of={AccordionStories.Skeleton} />
56+
<Canvas
57+
of={AccordionStories.Skeleton}
58+
additionalActions={[
59+
{
60+
title: 'Open in Stackblitz',
61+
onClick: () => stackblitzPrefillConfig(AccordionStories.Skeleton),
62+
},
63+
]}
64+
/>
4865

4966
## Component API
5067

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

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -29,25 +29,23 @@ export default {
2929
},
3030
};
3131

32-
export const Default = {
33-
render: ({ ratio, ...args }) => {
34-
return (
35-
<Grid {...args}>
36-
<Column sm={1} md={2} lg={4}>
37-
<AspectRatio ratio={ratio}>Content</AspectRatio>
38-
</Column>
39-
<Column sm={1} md={2} lg={4}>
40-
<AspectRatio ratio={ratio}>Content</AspectRatio>
41-
</Column>
42-
<Column sm={1} md={2} lg={4}>
43-
<AspectRatio ratio={ratio}>Content</AspectRatio>
44-
</Column>
45-
<Column sm={1} md={2} lg={4}>
46-
<AspectRatio ratio={ratio}>Content</AspectRatio>
47-
</Column>
48-
</Grid>
49-
);
50-
},
32+
export const Default = (args) => {
33+
return (
34+
<Grid {...args}>
35+
<Column sm={1} md={2} lg={4}>
36+
<AspectRatio {...args}>Content</AspectRatio>
37+
</Column>
38+
<Column sm={1} md={2} lg={4}>
39+
<AspectRatio {...args}>Content</AspectRatio>
40+
</Column>
41+
<Column sm={1} md={2} lg={4}>
42+
<AspectRatio {...args}>Content</AspectRatio>
43+
</Column>
44+
<Column sm={1} md={2} lg={4}>
45+
<AspectRatio {...args}>Content</AspectRatio>
46+
</Column>
47+
</Grid>
48+
);
5149
};
5250

5351
Default.argTypes = {
@@ -65,5 +63,8 @@ Default.argTypes = {
6563
type: 'select',
6664
},
6765
options: ['16x9', '9x16', '2x1', '1x2', '4x3', '3x4', '1x1'],
66+
table: {
67+
category: 'AspectRatio',
68+
},
6869
},
6970
};

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

Lines changed: 29 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Story, Canvas, ArgTypes, Meta } from '@storybook/blocks';
22
import { Breadcrumb, BreadcrumbItem, BreadcrumbSkeleton } from '../Breadcrumb';
33
import * as BreadcrumbStories from './Breadcrumb.stories';
4+
import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
45

56
<Meta isTemplate />
67

@@ -27,7 +28,15 @@ You can build a breadcrumb using a combination of the `Breadcrumb` and
2728
`BreadcrumbItem` components as `children` and each `BreadcrumbItem` is
2829
responsible for displaying the page links in the hierarchy.
2930

30-
<Canvas of={BreadcrumbStories.Default} />
31+
<Canvas
32+
of={BreadcrumbStories.Default}
33+
additionalActions={[
34+
{
35+
title: 'Open in Stackblitz',
36+
onClick: () => stackblitzPrefillConfig(BreadcrumbStories.Default),
37+
},
38+
]}
39+
/>
3140

3241
## Breadcrumb with `OverflowMenu`
3342

@@ -36,15 +45,32 @@ The first and last two page links should be shown, but the remaining breadcrumbs
3645
in between are condensed into an overflow menu. Breadcrumbs should never wrap
3746
onto a second line.
3847

39-
<Canvas of={BreadcrumbStories.BreadcrumbWithOverflowMenu} />
48+
<Canvas
49+
of={BreadcrumbStories.BreadcrumbWithOverflowMenu}
50+
additionalActions={[
51+
{
52+
title: 'Open in Stackblitz',
53+
onClick: () =>
54+
stackblitzPrefillConfig(BreadcrumbStories.BreadcrumbWithOverflowMenu),
55+
},
56+
]}
57+
/>
4058

4159
## Skeleton state
4260

4361
You can use the `BreadcrumbSkeleton` component to render a skeleton variant of a
4462
breadcrumb. This is useful to display while content in your breadcrumb is being
4563
fetched from an external resource like an API.
4664

47-
<Canvas of={BreadcrumbStories.Skeleton} />
65+
<Canvas
66+
of={BreadcrumbStories.Skeleton}
67+
additionalActions={[
68+
{
69+
title: 'Open in Stackblitz',
70+
onClick: () => stackblitzPrefillConfig(BreadcrumbStories.Skeleton),
71+
},
72+
]}
73+
/>
4874

4975
## Component API
5076

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,4 +71,6 @@ BreadcrumbWithOverflowMenu.argTypes = {
7171
...sharedArgTypes,
7272
};
7373

74-
export const Skeleton = () => <BreadcrumbSkeleton />;
74+
export const Skeleton = () => {
75+
return <BreadcrumbSkeleton />;
76+
};

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

Lines changed: 72 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -49,10 +49,42 @@ communicate calls to action to the user and allow users to interact with pages
4949
in a variety of ways. `Button` labels express what action will occur when the
5050
user interacts with it.
5151

52-
<Canvas of={ButtonStories.Default} />
53-
<Canvas of={ButtonStories.Secondary} />
54-
<Canvas of={ButtonStories.Tertiary} />
55-
<Canvas of={ButtonStories.Ghost} />
52+
<Canvas
53+
of={ButtonStories.Default}
54+
additionalActions={[
55+
{
56+
title: 'Open in Stackblitz',
57+
onClick: () => stackblitzPrefillConfig(ButtonStories.Default),
58+
},
59+
]}
60+
/>
61+
<Canvas
62+
of={ButtonStories.Secondary}
63+
additionalActions={[
64+
{
65+
title: 'Open in Stackblitz',
66+
onClick: () => stackblitzPrefillConfig(ButtonStories.Secondary),
67+
},
68+
]}
69+
/>
70+
<Canvas
71+
of={ButtonStories.Tertiary}
72+
additionalActions={[
73+
{
74+
title: 'Open in Stackblitz',
75+
onClick: () => stackblitzPrefillConfig(ButtonStories.Tertiary),
76+
},
77+
]}
78+
/>
79+
<Canvas
80+
of={ButtonStories.Ghost}
81+
additionalActions={[
82+
{
83+
title: 'Open in Stackblitz',
84+
onClick: () => stackblitzPrefillConfig(ButtonStories.Ghost),
85+
},
86+
]}
87+
/>
5688

5789
## Danger Buttons
5890

@@ -64,7 +96,15 @@ danger button style. However, if a destructive action is just one of several
6496
actions a user could choose from, then a lower emphasis style like the tertiary
6597
danger button or the ghost danger button may be more appropriate.
6698

67-
<Canvas of={ButtonStories.Danger} />
99+
<Canvas
100+
of={ButtonStories.Danger}
101+
additionalActions={[
102+
{
103+
title: 'Open in Stackblitz',
104+
onClick: () => stackblitzPrefillConfig(ButtonStories.Danger),
105+
},
106+
]}
107+
/>
68108

69109
## Icon-only Buttons
70110

@@ -73,7 +113,15 @@ Icon buttons can take the form of Primary, Secondary, Tertiary, and Ghost but
73113
most commonly will be styled as primary or ghost buttons. Icon only buttons do
74114
not support Danger, Danger tertiary, or Danger ghost.
75115

76-
<Canvas of={ButtonStories.IconButton} />
116+
<Canvas
117+
of={ButtonStories.IconButton}
118+
additionalActions={[
119+
{
120+
title: 'Open in Stackblitz',
121+
onClick: () => stackblitzPrefillConfig(ButtonStories.IconButton),
122+
},
123+
]}
124+
/>
77125

78126
## Set of Buttons
79127

@@ -84,15 +132,31 @@ Negative action buttons will be on the left. Positive action buttons should be
84132
on the right. When these two types buttons are paired in the correct order, they
85133
will automatically space themselves apart.
86134

87-
<Canvas of={ButtonStories.SetOfButtons} />
135+
<Canvas
136+
of={ButtonStories.SetOfButtons}
137+
additionalActions={[
138+
{
139+
title: 'Open in Stackblitz',
140+
onClick: () => stackblitzPrefillConfig(ButtonStories.SetOfButtons),
141+
},
142+
]}
143+
/>
88144

89145
## Skeleton state
90146

91147
You can use the `ButtonSkeleton` component to render a skeleton variant of a
92148
button. This is useful to display on initial page load to indicate to users that
93149
content is being loaded.
94150

95-
<Canvas of={ButtonStories.Skeleton} />
151+
<Canvas
152+
of={ButtonStories.Skeleton}
153+
additionalActions={[
154+
{
155+
title: 'Open in Stackblitz',
156+
onClick: () => stackblitzPrefillConfig(ButtonStories.Skeleton),
157+
},
158+
]}
159+
/>
96160

97161
## Component API
98162

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

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -130,10 +130,12 @@ export const SetOfButtons = (args) => {
130130
);
131131
};
132132

133-
export const Skeleton = () => (
134-
<div>
135-
<ButtonSkeleton />
136-
&nbsp;
137-
<ButtonSkeleton size="sm" />
138-
</div>
139-
);
133+
export const Skeleton = () => {
134+
return (
135+
<div>
136+
<ButtonSkeleton />
137+
&nbsp;
138+
<ButtonSkeleton size="sm" />
139+
</div>
140+
);
141+
};

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

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Story, Canvas, ArgTypes, Meta } from '@storybook/blocks';
22
import Checkbox, { CheckboxSkeleton } from '../Checkbox';
33
import * as CheckboxStories from './Checkbox.stories';
4+
import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
45

56
<Meta isTemplate />
67

@@ -24,7 +25,15 @@ import * as CheckboxStories from './Checkbox.stories';
2425
You can build a checkbox using the `Checkbox` in combination with a `<fieldset>`
2526
element to group controls and `<legend>` element for the label.
2627

27-
<Canvas of={CheckboxStories.Default} />
28+
<Canvas
29+
of={CheckboxStories.Default}
30+
additionalActions={[
31+
{
32+
title: 'Open in Stackblitz',
33+
onClick: () => stackblitzPrefillConfig(CheckboxStories.Default),
34+
},
35+
]}
36+
/>
2837

2938
### Controlled example
3039

@@ -50,7 +59,15 @@ You can use the `CheckboxSkeleton` component to render a skeleton variant of a
5059
checkbox. This is useful to display while content in your checkbox is being
5160
fetched from an external resource like an API.
5261

53-
<Canvas of={CheckboxStories.Skeleton} />
62+
<Canvas
63+
of={CheckboxStories.Skeleton}
64+
additionalActions={[
65+
{
66+
title: 'Open in Stackblitz',
67+
onClick: () => stackblitzPrefillConfig(CheckboxStories.Skeleton),
68+
},
69+
]}
70+
/>
5471

5572
## Component API
5673

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

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,6 @@ const checkboxEvents = {
2020
labelText: 'Checkbox label',
2121
};
2222

23-
const fieldsetCheckboxProps = () => ({
24-
className: 'some-class',
25-
legendText: 'Group label',
26-
});
27-
2823
export default {
2924
title: 'Components/Checkbox',
3025
component: Checkbox,
@@ -146,7 +141,7 @@ const sharedArgTypes = {
146141
};
147142

148143
export const Default = (args) => (
149-
<CheckboxGroup {...fieldsetCheckboxProps()} {...args}>
144+
<CheckboxGroup className="some-class" legendText="Group label" {...args}>
150145
<Checkbox labelText={`Checkbox label`} id="checkbox-label-1" />
151146
<Checkbox labelText={`Checkbox label`} id="checkbox-label-2" />
152147
</CheckboxGroup>
@@ -162,7 +157,8 @@ export const Horizontal = (args) => {
162157
return (
163158
<CheckboxGroup
164159
orientation="horizontal"
165-
{...fieldsetCheckboxProps()}
160+
className="some-class"
161+
legendText="Group label"
166162
helperText="Helper text goes here"
167163
{...args}>
168164
<Checkbox labelText={`Checkbox label`} id="checkbox-label-1" />
@@ -204,7 +200,9 @@ export const Single = () => {
204200
);
205201
};
206202

207-
export const Skeleton = () => <CheckboxSkeleton />;
203+
export const Skeleton = () => {
204+
return <CheckboxSkeleton />;
205+
};
208206

209207
const AILabelFunc = (kind) => (
210208
<AILabel className="ai-label-container" kind={kind}>

0 commit comments

Comments
 (0)