Skip to content

Commit bf9054f

Browse files
devongovettdevongovett
committed
Update docs
1 parent 540c871 commit bf9054f

18 files changed

+257
-984
lines changed

‎.storybook-s2/preview.tsx

+8-17
Original file line numberDiff line numberDiff line change
@@ -32,23 +32,14 @@ const preview = {
3232
},
3333
source: {
3434
// code: null, // Will disable code button, and show "No code available"
35-
transform: (code: string) => {
36-
// Replace any <_ with <
37-
code = code.replace(/<\s?_/g, '<');
38-
// Replace any </_ with </
39-
code = code.replace(/<\/\s?_/g, '</');
40-
// Remove any className prop
41-
code = code.replace(/\s+className=".*"/g, '');
42-
// Remove any styles prop
43-
code = code.replace(/\s+styles=".*"/g, '');
44-
// Remove any on* prop
45-
code = code.replace(/\s+on[A-Z].*={.*}/g, '');
46-
// Replace components like <{one letter} /> with <Icon />
47-
code = code.replace(/<([a-z])\s?\/>/g, '<Icon />');
48-
// Replace <No Display Name /> with <Cloud />
49-
code = code.replace(/<No\sDisplay\sName\s\/>/g, '<Cloud />');
50-
// Move any lines with just a > to the previous line
51-
code = code.replace(/\n\s*>/g, '>');
35+
transform: (code: string, ctx) => {
36+
code = ctx.parameters.docs?.source?.originalSource ?? code;
37+
code = code.replace(/ \{\.\.\.args\}/g, '');
38+
if (/^(.*?) =>/.test(code)) {
39+
code = code.replace(/^(.*?) => /, '');
40+
code = code.replace(/^\s{2}(\s+)/gm, '$1');
41+
code = code.replace(/\n\s{2}(.*)$/, '\n$1');
42+
}
5243
return code;
5344
}
5445
}

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@
8888
"@octokit/rest": "*",
8989
"@parcel/bundler-library": "^2.12.1",
9090
"@parcel/config-default": "^2.13.1",
91-
"@parcel/config-storybook": "^0.0.0",
91+
"@parcel/config-storybook": "^0.0.1",
9292
"@parcel/core": "^2.13.1",
9393
"@parcel/optimizer-data-url": "^2.13.1",
9494
"@parcel/optimizer-terser": "^2.13.1",

‎packages/@react-spectrum/s2/chromatic/TextField.stories.tsx

-33
Original file line numberDiff line numberDiff line change
@@ -73,39 +73,6 @@ ContextualHelpExample.args = {
7373
)
7474
};
7575

76-
ContextualHelpExample.parameters = {
77-
docs: {
78-
source: {
79-
transform: () => {
80-
return `
81-
<TextField
82-
contextualHelp={
83-
<ContextualHelp>
84-
<Heading>
85-
What is a segment?
86-
</Heading>
87-
<Content>
88-
<Text>
89-
Segments identify who your visitors are, what devices and services they use, where they navigated from, and much more.
90-
</Text>
91-
</Content>
92-
<Footer>
93-
<Link
94-
href="https://experienceleague.adobe.com/en/docs/experience-manager-65/content/sites/administering/personalization/campaign-segmentation"
95-
isStandalone
96-
target="_blank">
97-
Learn more about segments
98-
</Link>
99-
</Footer>
100-
</ContextualHelp>
101-
}
102-
label="Segment"
103-
/>`;
104-
}
105-
}
106-
}
107-
};
108-
10976
export const TextAreaExample = (args: any) => <TextArea {...args} />;
11077
TextAreaExample.args = {
11178
label: 'Comment'

‎packages/@react-spectrum/s2/stories/CheckboxGroup.stories.tsx

+18-34
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,24 @@ export const Example: Story = {
5454
};
5555

5656
export const ContextualHelpExample = (args: any) => (
57-
<CheckboxGroup {...args}>
57+
<CheckboxGroup
58+
{...args}
59+
contextualHelp={
60+
<ContextualHelp>
61+
<Heading>Sports</Heading>
62+
<Content>
63+
<Text>
64+
Social games we paly to have fun and stay healthy.
65+
</Text>
66+
</Content>
67+
<Footer>
68+
<Link
69+
isStandalone
70+
href="https://en.wikipedia.org/wiki/Sport"
71+
target="_blank">Learn more about sports</Link>
72+
</Footer>
73+
</ContextualHelp>
74+
}>
5875
<Checkbox isEmphasized value="soccer">Soccer</Checkbox>
5976
<Checkbox value="baseball">Baseball</Checkbox>
6077
<Checkbox value="basketball">Basketball</Checkbox>
@@ -80,36 +97,3 @@ ContextualHelpExample.args = {
8097
</ContextualHelp>
8198
)
8299
};
83-
84-
ContextualHelpExample.parameters = {
85-
docs: {
86-
source: {
87-
transform: () => {
88-
return `
89-
<CheckboxGroup
90-
contextualHelp={
91-
<ContextualHelp>
92-
<Heading>Sports</Heading>
93-
<Content>
94-
<Text>
95-
Social games we paly to have fun and stay healthy.
96-
</Text>
97-
</Content>
98-
<Footer>
99-
<Link
100-
isStandalone
101-
href="https://en.wikipedia.org/wiki/Sport"
102-
target="_blank">Learn more about sports</Link>
103-
</Footer>
104-
</ContextualHelp>
105-
}
106-
label="Segment"
107-
/>
108-
<Checkbox isEmphasized value="soccer">Soccer</Checkbox>
109-
<Checkbox value="baseball">Baseball</Checkbox>
110-
<Checkbox value="basketball">Basketball</Checkbox>
111-
</CheckboxGroup>`;
112-
}
113-
}
114-
}
115-
};

‎packages/@react-spectrum/s2/stories/ColorField.stories.tsx

+19-47
Original file line numberDiff line numberDiff line change
@@ -42,54 +42,26 @@ Example.args = {
4242
};
4343

4444
export const ContextualHelpExample = (args: any) => (
45-
<ColorField {...args} />
45+
<ColorField
46+
{...args}
47+
contextualHelp={
48+
<ContextualHelp>
49+
<Heading>Color</Heading>
50+
<Content>
51+
<Text>
52+
Pick your favorite color.
53+
</Text>
54+
</Content>
55+
<Footer>
56+
<Link
57+
isStandalone
58+
href="https://en.wikipedia.org/wiki/Color"
59+
target="_blank">Learn more about color</Link>
60+
</Footer>
61+
</ContextualHelp>
62+
} />
4663
);
4764

4865
ContextualHelpExample.args = {
49-
label: 'Color',
50-
contextualHelp: (
51-
<ContextualHelp>
52-
<Heading>Color</Heading>
53-
<Content>
54-
<Text>
55-
Pick your favorite color.
56-
</Text>
57-
</Content>
58-
<Footer>
59-
<Link
60-
isStandalone
61-
href="https://en.wikipedia.org/wiki/Color"
62-
target="_blank">Learn more about color</Link>
63-
</Footer>
64-
</ContextualHelp>
65-
)
66-
};
67-
68-
ContextualHelpExample.parameters = {
69-
docs: {
70-
source: {
71-
transform: () => {
72-
return `
73-
<ColorField
74-
contextualHelp={
75-
<ContextualHelp>
76-
<Heading>Color</Heading>
77-
<Content>
78-
<Text>
79-
Pick your favorite color.
80-
</Text>
81-
</Content>
82-
<Footer>
83-
<Link
84-
isStandalone
85-
href="https://en.wikipedia.org/wiki/Color"
86-
target="_blank">Learn more about color</Link>
87-
</Footer>
88-
</ContextualHelp>
89-
}
90-
label="Color"
91-
/>`;
92-
}
93-
}
94-
}
66+
label: 'Color'
9567
};

‎packages/@react-spectrum/s2/stories/ComboBox.stories.tsx

+21-68
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,26 @@ Validation.args = {
134134

135135
export const ContextualHelpExample: Story = {
136136
render: (args) => (
137-
<ComboBox {...args}>
137+
<ComboBox
138+
{...args}
139+
contextualHelp={
140+
<ContextualHelp>
141+
<Heading>What is a ice cream?</Heading>
142+
<Content>
143+
<Text>
144+
A combination of sugar, eggs, milk, and cream is cooked to make
145+
a custard base. Then, flavorings are added, and this flavored
146+
mixture is carefully churned and frozen to make ice cream.
147+
</Text>
148+
</Content>
149+
<Footer>
150+
<Link
151+
isStandalone
152+
href="https://en.wikipedia.org/wiki/Ice_cream"
153+
target="_blank">Learn more about ice cream</Link>
154+
</Footer>
155+
</ContextualHelp>
156+
}>
138157
<ComboBoxItem>Chocolate</ComboBoxItem>
139158
<ComboBoxItem>Mint</ComboBoxItem>
140159
<ComboBoxItem>Strawberry</ComboBoxItem>
@@ -143,73 +162,7 @@ export const ContextualHelpExample: Story = {
143162
</ComboBox>
144163
),
145164
args: {
146-
label: 'Ice cream flavor',
147-
contextualHelp: (
148-
<ContextualHelp>
149-
<Heading>What is a ice cream?</Heading>
150-
<Content>
151-
<Text>
152-
A combination of sugar, eggs, milk, and cream is cooked to make
153-
a custard base. Then, flavorings are added, and this flavored
154-
mixture is carefully churned and frozen to make ice cream.
155-
</Text>
156-
</Content>
157-
<Footer>
158-
<Link
159-
isStandalone
160-
href="https://en.wikipedia.org/wiki/Ice_cream"
161-
target="_blank">Learn more about ice cream</Link>
162-
</Footer>
163-
</ContextualHelp>
164-
)
165-
}
166-
};
167-
168-
ContextualHelpExample.parameters = {
169-
docs: {
170-
source: {
171-
transform: () => {
172-
return `
173-
<ComboBox
174-
contextualHelp={
175-
<ContextualHelp>
176-
<Heading>
177-
What is a ice cream?
178-
</Heading>
179-
<Content>
180-
<Text>
181-
A combination of sugar, eggs, milk, and cream is cooked to make a custard base. Then, flavorings are added, and this flavored mixture is carefully churned and frozen to make ice cream.
182-
</Text>
183-
</Content>
184-
<Footer>
185-
<Link
186-
href="https://en.wikipedia.org/wiki/Ice_cream"
187-
isStandalone
188-
target="_blank">
189-
Learn more about ice cream
190-
</Link>
191-
</Footer>
192-
</ContextualHelp>
193-
}
194-
label="Ice cream flavor">
195-
<ComboBoxItem>
196-
Chocolate
197-
</ComboBoxItem>
198-
<ComboBoxItem>
199-
Mint
200-
</ComboBoxItem>
201-
<ComboBoxItem>
202-
Strawberry
203-
</ComboBoxItem>
204-
<ComboBoxItem>
205-
Vanilla
206-
</ComboBoxItem>
207-
<ComboBoxItem>
208-
Chocolate Chip Cookie Dough
209-
</ComboBoxItem>
210-
</ComboBox>`;
211-
}
212-
}
165+
label: 'Ice cream flavor'
213166
}
214167
};
215168

‎packages/@react-spectrum/s2/stories/Dialog.stories.tsx

-61
Original file line numberDiff line numberDiff line change
@@ -54,35 +54,6 @@ export const Example = (args: any) => (
5454
</DialogTrigger>
5555
);
5656

57-
Example.parameters = {
58-
docs: {
59-
source: {
60-
transform: () => {
61-
return `<DialogTrigger>
62-
<Button variant="primary">Open dialog</Button>
63-
<Dialog>
64-
{({close}) => (
65-
<>
66-
<Image slot="hero" src="https://i.imgur.com/Z7AzH2c.png" alt="Sky over roof" />
67-
<Heading slot="title">Dialog title</Heading>
68-
<Header>Header</Header>
69-
<Content>
70-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in</p>
71-
</Content>
72-
<Footer><Checkbox>Don't show this again</Checkbox></Footer>
73-
<ButtonGroup>
74-
<Button onPress={close} variant="secondary">Cancel</Button>
75-
<Button onPress={close} variant="accent">Save</Button>
76-
</ButtonGroup>
77-
</>
78-
)}
79-
</Dialog>
80-
</DialogTrigger>`;
81-
}
82-
}
83-
}
84-
};
85-
8657
export const DialogTriggerExample = (args: any) => (
8758
<DialogTrigger {...args}>
8859
<Button variant="primary">Open dialog</Button>
@@ -148,38 +119,6 @@ export function DialogContainerExample(props: any) {
148119
}
149120

150121
DialogContainerExample.args = DialogTriggerExample.args;
151-
DialogContainerExample.parameters = {
152-
docs: {
153-
source: {
154-
transform: () => {
155-
return `<>
156-
<Button variant="accent" onPress={() => setOpen(true)}>Open dialog</Button>
157-
<DialogContainer onDismiss={() => setOpen(false)}>
158-
{isOpen &&
159-
<Dialog>
160-
{({close}) => (
161-
<>
162-
<Image slot="hero" src="https://i.imgur.com/Z7AzH2c.png" alt="Sky over roof" />
163-
<Heading slot="title">Dialog title</Heading>
164-
<Header>Header</Header>
165-
<Content>
166-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in</p>
167-
</Content>
168-
<Footer><Checkbox>Don't show this again</Checkbox></Footer>
169-
<ButtonGroup>
170-
<Button onPress={close} variant="secondary">Cancel</Button>
171-
<Button onPress={close} variant="accent">Save</Button>
172-
</ButtonGroup>
173-
</>
174-
)}
175-
</Dialog>
176-
}
177-
</DialogContainer>
178-
</>`;
179-
}
180-
}
181-
}
182-
};
183122

184123
export const ColorScheme = (args: any) => (
185124
<Provider colorScheme="dark" background="base" styles={style({padding: 48})}>

0 commit comments

Comments
 (0)