coder · BrunoQuaresma · Sep 7, 2023 · Sep 6, 2023 · Sep 6, 2023 · Sep 6, 2023
diff --git a/site/src/components/Alert/Alert.stories.tsx b/site/src/components/Alert/Alert.stories.tsx
@@ -1,6 +1,5 @@
 import { Alert } from "./Alert";
 import Button from "@mui/material/Button";
-import Link from "@mui/material/Link";
 import type { Meta, StoryObj } from "@storybook/react";
 
 const meta: Meta<typeof Alert> = {
@@ -21,7 +20,6 @@ export const Success: Story = {
   args: {
     children: "You're doing great!",
     severity: "success",
-    onRetry: undefined,
   },
 };
 
@@ -56,14 +54,3 @@ export const WarningWithActionAndDismiss: Story = {
     severity: "warning",
   },
 };
-
-export const WithChildren: Story = {
-  args: {
-    severity: "warning",
-    children: (
-      <div>
-        This is a message with a <Link href="#">link</Link>
-      </div>
-    ),
-  },
-};
diff --git a/site/src/components/Alert/Alert.tsx b/site/src/components/Alert/Alert.tsx
@@ -8,14 +8,12 @@ import Box from "@mui/material/Box";
 export type AlertProps = MuiAlertProps & {
   actions?: ReactNode;
   dismissible?: boolean;
-  onRetry?: () => void;
   onDismiss?: () => void;
 };
 
 export const Alert: FC<AlertProps> = ({
   children,
   actions,
-  onRetry,
   dismissible,
   severity,
   onDismiss,
@@ -34,13 +32,6 @@ export const Alert: FC<AlertProps> = ({
             {/* CTAs passed in by the consumer */}
             {actions}
 
-            {/* retry CTA */}
-            {onRetry && (
-              <Button variant="text" size="small" onClick={onRetry}>
-                Retry
-              </Button>
-            )}
-
             {/* close CTA */}
             {dismissible && (
               <Button

diff --git a/site/src/components/Alert/ErrorAlert.stories.tsx b/site/src/components/Alert/ErrorAlert.stories.tsx
@@ -1,7 +1,6 @@
 import Button from "@mui/material/Button";
 import { mockApiError } from "testHelpers/entities";
 import type { Meta, StoryObj } from "@storybook/react";
-import { action } from "@storybook/addon-actions";
 import { ErrorAlert } from "./ErrorAlert";
 
 const mockError = mockApiError({
@@ -15,7 +14,6 @@ const meta: Meta<typeof ErrorAlert> = {
   args: {
     error: mockError,
     dismissible: false,
-    onRetry: undefined,
   },
 };
 
@@ -55,21 +53,6 @@ export const WithActionAndDismiss: Story = {
   },
 };
 
-export const WithRetry: Story = {
-  args: {
-    onRetry: action("retry"),
-    dismissible: true,
-  },
-};
-
-export const WithActionRetryAndDismiss: Story = {
-  args: {
-    actions: [ExampleAction],
-    onRetry: action("retry"),
-    dismissible: true,
-  },
-};
-
 export const WithNonApiError: Story = {
   args: {
     error: new Error("Non API error here"),

diff --git a/site/src/components/Avatar/Avatar.stories.tsx b/site/src/components/Avatar/Avatar.stories.tsx
@@ -1,63 +1,71 @@
-import { Story } from "@storybook/react";
-import { Avatar, AvatarIcon, AvatarProps } from "./Avatar";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Avatar, AvatarIcon } from "./Avatar";
 import PauseIcon from "@mui/icons-material/PauseOutlined";
 
-export default {
+const meta: Meta<typeof Avatar> = {
   title: "components/Avatar",
   component: Avatar,
 };
 
-const Template: Story<AvatarProps> = (args: AvatarProps) => (
-  <Avatar {...args} />
-);
+export default meta;
+type Story = StoryObj<typeof Avatar>;
 
-export const Letter = Template.bind({});
-Letter.args = {
-  children: "Coder",
+export const Letter: Story = {
+  args: {
+    children: "Coder",
+  },
 };
 
-export const LetterXL = Template.bind({});
-LetterXL.args = {
-  children: "Coder",
-  size: "xl",
+export const LetterXL = {
+  args: {
+    children: "Coder",
+    size: "xl",
+  },
 };
 
-export const LetterDarken = Template.bind({});
-LetterDarken.args = {
-  children: "Coder",
-  colorScheme: "darken",
+export const LetterDarken = {
+  args: {
+    children: "Coder",
+    colorScheme: "darken",
+  },
 };
 
-export const Image = Template.bind({});
-Image.args = {
-  src: "https://avatars.githubusercontent.com/u/95932066?s=200&v=4",
+export const Image = {
+  args: {
+    src: "https://avatars.githubusercontent.com/u/95932066?s=200&v=4",
+  },
 };
 
-export const ImageXL = Template.bind({});
-ImageXL.args = {
-  src: "https://avatars.githubusercontent.com/u/95932066?s=200&v=4",
-  size: "xl",
+export const ImageXL = {
+  args: {
+    src: "https://avatars.githubusercontent.com/u/95932066?s=200&v=4",
+    size: "xl",
+  },
 };
 
-export const MuiIcon = Template.bind({});
-MuiIcon.args = {
-  children: <PauseIcon />,
+export const MuiIcon = {
+  args: {
+    children: <PauseIcon />,
+  },
 };
 
-export const MuiIconDarken = Template.bind({});
-MuiIconDarken.args = {
-  children: <PauseIcon />,
-  colorScheme: "darken",
+export const MuiIconDarken = {
+  args: {
+    children: <PauseIcon />,
+    colorScheme: "darken",
+  },
 };
 
-export const MuiIconXL = Template.bind({});
-MuiIconXL.args = {
-  children: <PauseIcon />,
-  size: "xl",
+export const MuiIconXL = {
+  args: {
+    children: <PauseIcon />,
+    size: "xl",
+  },
 };
 
-export const AvatarIconDarken = Template.bind({});
-AvatarIconDarken.args = {
-  children: <AvatarIcon src="/icon/database.svg" />,
-  colorScheme: "darken",
+export const AvatarIconDarken = {
+  args: {
+    children: <AvatarIcon src="/icon/database.svg" />,
+    colorScheme: "darken",
+  },
 };
diff --git a/site/src/components/Avatar/Avatar.tsx b/site/src/components/Avatar/Avatar.tsx
@@ -4,7 +4,6 @@ import MuiAvatar, { AvatarProps as MuiAvatarProps } from "@mui/material/Avatar";
 import { makeStyles } from "@mui/styles";
 import { FC } from "react";
 import { combineClasses } from "utils/combineClasses";
-import { firstLetter } from "./firstLetter";
 
 export type AvatarProps = MuiAvatarProps & {
   size?: "sm" | "md" | "xl";
@@ -32,7 +31,6 @@ export const Avatar: FC<AvatarProps> = ({
         fitImage && styles.fitImage,
       ])}
     >
-      {/* If the children is a string, we always want to render the first letter */}
       {typeof children === "string" ? firstLetter(children) : children}
     </MuiAvatar>
   );
@@ -46,6 +44,14 @@ export const AvatarIcon: FC<{ src: string }> = ({ src }) => {
   return <img src={src} alt="" className={styles.avatarIcon} />;
 };
 
+const firstLetter = (str: string): string => {
+  if (str.length > 0) {
+    return str[0].toLocaleUpperCase();
+  }
+
+  return "";
+};
+
 const useStyles = makeStyles((theme) => ({
   // Size styles
   sm: {

diff --git a/site/src/components/Avatar/firstLetter.test.ts b/site/src/components/Avatar/firstLetter.test.ts
diff --git a/site/src/components/Avatar/firstLetter.ts b/site/src/components/Avatar/firstLetter.ts
diff --git a/site/src/components/AvatarData/AvatarData.stories.tsx b/site/src/components/AvatarData/AvatarData.stories.tsx
@@ -1,24 +1,22 @@
-import { Story } from "@storybook/react";
-import { AvatarData, AvatarDataProps } from "./AvatarData";
+import type { Meta, StoryObj } from "@storybook/react";
+import { AvatarData } from "./AvatarData";
 
-export default {
+const meta: Meta<typeof AvatarData> = {
   title: "components/AvatarData",
   component: AvatarData,
+  args: {
+    title: "coder",
+    subtitle: "coder@coder.com",
+  },
 };
 
-const Template: Story<AvatarDataProps> = (args: AvatarDataProps) => (
-  <AvatarData {...args} />
-);
+export default meta;
+type Story = StoryObj<typeof AvatarData>;
 
-export const Example = Template.bind({});
-Example.args = {
-  title: "coder",
-  subtitle: "coder@coder.com",
-};
+export const WithTitleAndSubtitle: Story = {};
 
-export const WithImage = Template.bind({});
-WithImage.args = {
-  title: "coder",
-  subtitle: "coder@coder.com",
-  src: "https://avatars.githubusercontent.com/u/95932066?s=200&v=4",
+export const WithImage: Story = {
+  args: {
+    src: "https://avatars.githubusercontent.com/u/95932066?s=200&v=4",
+  },
 };
diff --git a/site/src/components/AvatarData/AvatarData.tsx b/site/src/components/AvatarData/AvatarData.tsx
@@ -1,5 +1,5 @@
 import { Avatar } from "components/Avatar/Avatar";
-import { FC, PropsWithChildren } from "react";
+import { FC } from "react";
 import { Stack } from "components/Stack/Stack";
 import { makeStyles } from "@mui/styles";
 
@@ -10,7 +10,7 @@ export interface AvatarDataProps {
   avatar?: React.ReactNode;
 }
 
-export const AvatarData: FC<PropsWithChildren<AvatarDataProps>> = ({
+export const AvatarData: FC<AvatarDataProps> = ({
   title,
   subtitle,
   src,

diff --git a/site/src/components/CodeExample/CodeExample.stories.tsx b/site/src/components/CodeExample/CodeExample.stories.tsx
@@ -1,26 +1,27 @@
-import { Story } from "@storybook/react";
-import { CodeExample, CodeExampleProps } from "./CodeExample";
+import type { Meta, StoryObj } from "@storybook/react";
+import { CodeExample } from "./CodeExample";
 
 const sampleCode = `echo "Hello, world"`;
 
-export default {
+const meta: Meta<typeof CodeExample> = {
   title: "components/CodeExample",
   component: CodeExample,
   argTypes: {
     code: { control: "string", defaultValue: sampleCode },
   },
 };
 
-const Template: Story<CodeExampleProps> = (args: CodeExampleProps) => (
-  <CodeExample {...args} />
-);
+export default meta;
+type Story = StoryObj<typeof CodeExample>;
 
-export const Example = Template.bind({});
-Example.args = {
-  code: sampleCode,
+export const Example: Story = {
+  args: {
+    code: sampleCode,
+  },
 };
 
-export const LongCode = Template.bind({});
-LongCode.args = {
-  code: "ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAICnKzATuWwmmt5+CKTPuRGN0R1PBemA+6/SStpLiyX+L",
+export const LongCode: Story = {
+  args: {
+    code: "ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAICnKzATuWwmmt5+CKTPuRGN0R1PBemA+6/SStpLiyX+L",
+  },
 };
diff --git a/site/src/components/CodeExample/CodeExample.test.tsx b/site/src/components/CodeExample/CodeExample.test.tsx