Skip to content

Commit 869d040

Browse files
BrunoQuaresmaBrunoQuaresma
authored
chore(site): refactor stories and tests from components directory (#9578)
* Refactor Alert * Refactor Avatar and its stories * Refactor AvatarData and its stories * Refactor CodeExample and its tests * Refactor ServiceBanner stories * Refactor Navbar and its tests * Refactor ServiceBanner stories * Refactor LicenseBannerView stories * Refactor DeploymentBannerView stories * Extract optionValue into a module * Refactor DeleteDialog stories * Refactor ConfirmDialog tests * Refactor EmptyState tests * Flat ErrorBoundaryState and refactor stories * Refactor Expander stories * Refactor FormFooter stories * Refactor FullPageForm stories * Refactor EnterpriseSnackbar stories * Refactor GroupAvatar stories * Refactor HelpTooltip stories and remove index * Remove unecessary types module from IconField * Refactor LoadingButton stories * Refactor Margins stories * Refactor Markdown stories * Refactor PageHeader stories * Refactor PageButton tests * Refactor Pill stories * Refactor Resources stories * Refactor RichParameterInput stories and flat MultiTextField * Remove unecessary Stack story * Refactor TableRowMenu stories * Refactor TemplateLayout stories * Refactor Typography props * Refactor UserAutocomplete * Refactor WorkspaceBuildLogs components and tests * Refactor WorkspaceStatusBadge stories * Fix wrong imports * Remove Example.args pattern * Fix wrong import * Refactor EmptyState stories * Refactor HelpTooltip stories * Remove not valid ErrorAlert story * Fix AvatarData story * Add border back to CodeExample * Fix Navbar story * Fix AgentRow proxy in the stories
1 parent 4f142fa commit 869d040

File tree

85 files changed

+1348
-1802
lines changed

Some content is hidden

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

85 files changed

+1348
-1802
lines changed

‎site/src/components/Alert/Alert.stories.tsx

-13
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { Alert } from "./Alert";
22
import Button from "@mui/material/Button";
3-
import Link from "@mui/material/Link";
43
import type { Meta, StoryObj } from "@storybook/react";
54

65
const meta: Meta<typeof Alert> = {
@@ -21,7 +20,6 @@ export const Success: Story = {
2120
args: {
2221
children: "You're doing great!",
2322
severity: "success",
24-
onRetry: undefined,
2523
},
2624
};
2725

@@ -56,14 +54,3 @@ export const WarningWithActionAndDismiss: Story = {
5654
severity: "warning",
5755
},
5856
};
59-
60-
export const WithChildren: Story = {
61-
args: {
62-
severity: "warning",
63-
children: (
64-
<div>
65-
This is a message with a <Link href="#">link</Link>
66-
</div>
67-
),
68-
},
69-
};

‎site/src/components/Alert/Alert.tsx

-9
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,12 @@ import Box from "@mui/material/Box";
88
export type AlertProps = MuiAlertProps & {
99
actions?: ReactNode;
1010
dismissible?: boolean;
11-
onRetry?: () => void;
1211
onDismiss?: () => void;
1312
};
1413

1514
export const Alert: FC<AlertProps> = ({
1615
children,
1716
actions,
18-
onRetry,
1917
dismissible,
2018
severity,
2119
onDismiss,
@@ -34,13 +32,6 @@ export const Alert: FC<AlertProps> = ({
3432
{/* CTAs passed in by the consumer */}
3533
{actions}
3634

37-
{/* retry CTA */}
38-
{onRetry && (
39-
<Button variant="text" size="small" onClick={onRetry}>
40-
Retry
41-
</Button>
42-
)}
43-
4435
{/* close CTA */}
4536
{dismissible && (
4637
<Button

‎site/src/components/Alert/ErrorAlert.stories.tsx

-17
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import Button from "@mui/material/Button";
22
import { mockApiError } from "testHelpers/entities";
33
import type { Meta, StoryObj } from "@storybook/react";
4-
import { action } from "@storybook/addon-actions";
54
import { ErrorAlert } from "./ErrorAlert";
65

76
const mockError = mockApiError({
@@ -15,7 +14,6 @@ const meta: Meta<typeof ErrorAlert> = {
1514
args: {
1615
error: mockError,
1716
dismissible: false,
18-
onRetry: undefined,
1917
},
2018
};
2119

@@ -55,21 +53,6 @@ export const WithActionAndDismiss: Story = {
5553
},
5654
};
5755

58-
export const WithRetry: Story = {
59-
args: {
60-
onRetry: action("retry"),
61-
dismissible: true,
62-
},
63-
};
64-
65-
export const WithActionRetryAndDismiss: Story = {
66-
args: {
67-
actions: [ExampleAction],
68-
onRetry: action("retry"),
69-
dismissible: true,
70-
},
71-
};
72-
7356
export const WithNonApiError: Story = {
7457
args: {
7558
error: new Error("Non API error here"),

‎site/src/components/Avatar/Avatar.stories.tsx

+47-39
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,71 @@
1-
import { Story } from "@storybook/react";
2-
import { Avatar, AvatarIcon, AvatarProps } from "./Avatar";
1+
import type { Meta, StoryObj } from "@storybook/react";
2+
import { Avatar, AvatarIcon } from "./Avatar";
33
import PauseIcon from "@mui/icons-material/PauseOutlined";
44

5-
export default {
5+
const meta: Meta<typeof Avatar> = {
66
title: "components/Avatar",
77
component: Avatar,
88
};
99

10-
const Template: Story<AvatarProps> = (args: AvatarProps) => (
11-
<Avatar {...args} />
12-
);
10+
export default meta;
11+
type Story = StoryObj<typeof Avatar>;
1312

14-
export const Letter = Template.bind({});
15-
Letter.args = {
16-
children: "Coder",
13+
export const Letter: Story = {
14+
args: {
15+
children: "Coder",
16+
},
1717
};
1818

19-
export const LetterXL = Template.bind({});
20-
LetterXL.args = {
21-
children: "Coder",
22-
size: "xl",
19+
export const LetterXL = {
20+
args: {
21+
children: "Coder",
22+
size: "xl",
23+
},
2324
};
2425

25-
export const LetterDarken = Template.bind({});
26-
LetterDarken.args = {
27-
children: "Coder",
28-
colorScheme: "darken",
26+
export const LetterDarken = {
27+
args: {
28+
children: "Coder",
29+
colorScheme: "darken",
30+
},
2931
};
3032

31-
export const Image = Template.bind({});
32-
Image.args = {
33-
src: "https://avatars.githubusercontent.com/u/95932066?s=200&v=4",
33+
export const Image = {
34+
args: {
35+
src: "https://avatars.githubusercontent.com/u/95932066?s=200&v=4",
36+
},
3437
};
3538

36-
export const ImageXL = Template.bind({});
37-
ImageXL.args = {
38-
src: "https://avatars.githubusercontent.com/u/95932066?s=200&v=4",
39-
size: "xl",
39+
export const ImageXL = {
40+
args: {
41+
src: "https://avatars.githubusercontent.com/u/95932066?s=200&v=4",
42+
size: "xl",
43+
},
4044
};
4145

42-
export const MuiIcon = Template.bind({});
43-
MuiIcon.args = {
44-
children: <PauseIcon />,
46+
export const MuiIcon = {
47+
args: {
48+
children: <PauseIcon />,
49+
},
4550
};
4651

47-
export const MuiIconDarken = Template.bind({});
48-
MuiIconDarken.args = {
49-
children: <PauseIcon />,
50-
colorScheme: "darken",
52+
export const MuiIconDarken = {
53+
args: {
54+
children: <PauseIcon />,
55+
colorScheme: "darken",
56+
},
5157
};
5258

53-
export const MuiIconXL = Template.bind({});
54-
MuiIconXL.args = {
55-
children: <PauseIcon />,
56-
size: "xl",
59+
export const MuiIconXL = {
60+
args: {
61+
children: <PauseIcon />,
62+
size: "xl",
63+
},
5764
};
5865

59-
export const AvatarIconDarken = Template.bind({});
60-
AvatarIconDarken.args = {
61-
children: <AvatarIcon src="/icon/database.svg" />,
62-
colorScheme: "darken",
66+
export const AvatarIconDarken = {
67+
args: {
68+
children: <AvatarIcon src="/icon/database.svg" />,
69+
colorScheme: "darken",
70+
},
6371
};

‎site/src/components/Avatar/Avatar.tsx

+8-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import MuiAvatar, { AvatarProps as MuiAvatarProps } from "@mui/material/Avatar";
44
import { makeStyles } from "@mui/styles";
55
import { FC } from "react";
66
import { combineClasses } from "utils/combineClasses";
7-
import { firstLetter } from "./firstLetter";
87

98
export type AvatarProps = MuiAvatarProps & {
109
size?: "sm" | "md" | "xl";
@@ -32,7 +31,6 @@ export const Avatar: FC<AvatarProps> = ({
3231
fitImage && styles.fitImage,
3332
])}
3433
>
35-
{/* If the children is a string, we always want to render the first letter */}
3634
{typeof children === "string" ? firstLetter(children) : children}
3735
</MuiAvatar>
3836
);
@@ -46,6 +44,14 @@ export const AvatarIcon: FC<{ src: string }> = ({ src }) => {
4644
return <img src={src} alt="" className={styles.avatarIcon} />;
4745
};
4846

47+
const firstLetter = (str: string): string => {
48+
if (str.length > 0) {
49+
return str[0].toLocaleUpperCase();
50+
}
51+
52+
return "";
53+
};
54+
4955
const useStyles = makeStyles((theme) => ({
5056
// Size styles
5157
sm: {

‎site/src/components/Avatar/firstLetter.test.ts

-11
This file was deleted.

‎site/src/components/Avatar/firstLetter.ts

-10
This file was deleted.

‎site/src/components/AvatarData/AvatarData.stories.tsx

+14-16
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,22 @@
1-
import { Story } from "@storybook/react";
2-
import { AvatarData, AvatarDataProps } from "./AvatarData";
1+
import type { Meta, StoryObj } from "@storybook/react";
2+
import { AvatarData } from "./AvatarData";
33

4-
export default {
4+
const meta: Meta<typeof AvatarData> = {
55
title: "components/AvatarData",
66
component: AvatarData,
7+
args: {
8+
title: "coder",
9+
subtitle: "coder@coder.com",
10+
},
711
};
812

9-
const Template: Story<AvatarDataProps> = (args: AvatarDataProps) => (
10-
<AvatarData {...args} />
11-
);
13+
export default meta;
14+
type Story = StoryObj<typeof AvatarData>;
1215

13-
export const Example = Template.bind({});
14-
Example.args = {
15-
title: "coder",
16-
subtitle: "coder@coder.com",
17-
};
16+
export const WithTitleAndSubtitle: Story = {};
1817

19-
export const WithImage = Template.bind({});
20-
WithImage.args = {
21-
title: "coder",
22-
subtitle: "coder@coder.com",
23-
src: "https://avatars.githubusercontent.com/u/95932066?s=200&v=4",
18+
export const WithImage: Story = {
19+
args: {
20+
src: "https://avatars.githubusercontent.com/u/95932066?s=200&v=4",
21+
},
2422
};

‎site/src/components/AvatarData/AvatarData.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Avatar } from "components/Avatar/Avatar";
2-
import { FC, PropsWithChildren } from "react";
2+
import { FC } from "react";
33
import { Stack } from "components/Stack/Stack";
44
import { makeStyles } from "@mui/styles";
55

@@ -10,7 +10,7 @@ export interface AvatarDataProps {
1010
avatar?: React.ReactNode;
1111
}
1212

13-
export const AvatarData: FC<PropsWithChildren<AvatarDataProps>> = ({
13+
export const AvatarData: FC<AvatarDataProps> = ({
1414
title,
1515
subtitle,
1616
src,

‎site/src/components/CodeExample/CodeExample.stories.tsx

+13-12
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,27 @@
1-
import { Story } from "@storybook/react";
2-
import { CodeExample, CodeExampleProps } from "./CodeExample";
1+
import type { Meta, StoryObj } from "@storybook/react";
2+
import { CodeExample } from "./CodeExample";
33

44
const sampleCode = `echo "Hello, world"`;
55

6-
export default {
6+
const meta: Meta<typeof CodeExample> = {
77
title: "components/CodeExample",
88
component: CodeExample,
99
argTypes: {
1010
code: { control: "string", defaultValue: sampleCode },
1111
},
1212
};
1313

14-
const Template: Story<CodeExampleProps> = (args: CodeExampleProps) => (
15-
<CodeExample {...args} />
16-
);
14+
export default meta;
15+
type Story = StoryObj<typeof CodeExample>;
1716

18-
export const Example = Template.bind({});
19-
Example.args = {
20-
code: sampleCode,
17+
export const Example: Story = {
18+
args: {
19+
code: sampleCode,
20+
},
2121
};
2222

23-
export const LongCode = Template.bind({});
24-
LongCode.args = {
25-
code: "ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAICnKzATuWwmmt5+CKTPuRGN0R1PBemA+6/SStpLiyX+L",
23+
export const LongCode: Story = {
24+
args: {
25+
code: "ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAICnKzATuWwmmt5+CKTPuRGN0R1PBemA+6/SStpLiyX+L",
26+
},
2627
};

‎site/src/components/CodeExample/CodeExample.test.tsx

-14
This file was deleted.

0 commit comments

Comments
 (0)