refactor: Convert UI files to TS (#3475)

.storybook/preview.tsx

@@ -1,5 +1,6 @@
 import { Preview } from '@storybook/react'
 import { themes } from '@storybook/theming'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import React from 'react'
 
 import Layout from './Layout'
@@ -8,6 +9,8 @@ export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
 }
 
+const queryClient = new QueryClient()
+
 const localStorageResetDecorator = (Story) => {
   window.localStorage.clear()
   return <Story />
@@ -16,9 +19,11 @@ const localStorageResetDecorator = (Story) => {
 export const decorators = [
   localStorageResetDecorator,
   (Story) => (
-    <Layout>
-      <Story />
-    </Layout>
+    <QueryClientProvider client={queryClient}>
+      <Layout>
+        <Story />
+      </Layout>
+    </QueryClientProvider>
   ),
 ]
 

src/pages/AccountSettings/tabs/Admin/ManageAdminCard/AdminTable/AdminTable.tsx

@@ -124,7 +124,6 @@ export default function AdminTable() {
             email: user.email,
             revoke: (
               <>
-                {/* @ts-expect-error */}
                 <Button
                   hook="toggle admin status"
                   disabled={isUpdatingUser}

src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/EmailAddress/EmailAddress.tsx

@@ -86,7 +86,6 @@ function EmailAddress() {
             </p>
           )}
           <div className="flex gap-1">
-            {/* @ts-expect-error */}
             <Button
               hook="update-email"
               type="submit"
@@ -95,7 +94,6 @@ function EmailAddress() {
             >
               Update
             </Button>
-            {/* @ts-expect-error */}
             <Button
               type="button"
               hook="cancel-email"

src/pages/RepoPage/CoverageTab/ComponentsTab/BackfillBanners/TriggerSyncBanner/TriggerSyncBanner.tsx

@@ -38,7 +38,7 @@ function TriggerSyncBanner() {
           to={undefined}
           hook="backfill-task"
           variant="primary"
-          onClick={mutate}
+          onClick={() => mutate()}
           disabled={false}
         >
           Enable component analytics

src/pages/RepoPage/CoverageTab/FlagsTab/BackfillBanners/TriggerSyncBanner/TriggerSyncBanner.tsx

@@ -45,7 +45,7 @@ function TriggerSyncBanner() {
                 to={undefined}
                 hook="backfill-task"
                 variant="primary"
-                onClick={mutate}
+                onClick={() => mutate()}
                 disabled={false}
               >
                 Enable flag analytics

src/shared/AppLink/AppLink.jsx

@@ -97,6 +97,7 @@ AppLink.propTypes = {
   // You can find the page name in this file
   // https://github.com/codecov/gazebo/blob/main/src/services/navigation/useNavLinks.js
   pageName: PropTypes.string.isRequired,
+  exact: PropTypes.bool,
   text: PropTypes.string,
   options: PropTypes.object,
   activeClassName: PropTypes.string,

src/shared/GlobalBanners/SelfHostedLicenseExpiration/LicenseExpirationModal/LicenseExpirationModal.tsx

@@ -78,7 +78,6 @@ const LicenseExpirationModal: React.FC<LicenseExpirationModalArgs> = ({
       }
       footer={
         <div className="flex gap-2">
-          {/* @ts-expect-error */}
           <Button
             to={{ pageName: 'generateSelfHostedLicense' }}
             showExternalIcon={false}

src/shared/ListRepo/ReposTableTeam/ReposTableTeam.tsx

@@ -266,7 +266,7 @@ const ReposTableTeam = ({ searchValue }: ReposTableTeamProps) => {
           <Button
             hook="load-more"
             isLoading={isFetchingNextPage}
-            onClick={fetchNextPage}
+            onClick={() => fetchNextPage()}
             to={undefined}
             disabled={false}
           >

src/ui/Avatar/Avatar.jsx

@@ -37,7 +37,7 @@ function Avatar({ user, border = 'none', ariaLabel, className = '' }) {
 
 Avatar.propTypes = {
   user: PropTypes.shape({
-    username: PropTypes.string.isRequired,
+    username: PropTypes.string,
     avatarUrl: PropTypes.string,
   }),
   border: PropTypes.oneOf(['light', 'dark', 'none']),

src/ui/Button/Button.stories.tsx

@@ -0,0 +1,117 @@
+import { type Meta, type StoryObj } from '@storybook/react'
+
+import Button from './Button'
+
+import Icon from '../Icon'
+
+const meta: Meta<typeof Button> = {
+  title: 'Components/Button',
+  component: Button,
+  argTypes: { onClick: { action: 'clicked' } },
+}
+
+export default meta
+
+type Story = StoryObj<typeof Button>
+
+export const NormalButton: Story = {
+  args: {
+    children: 'Normal button',
+    variant: 'default',
+    disabled: false,
+  },
+  render: (args) => <Button {...args} />,
+}
+
+export const PrimaryButton: Story = {
+  args: {
+    children: 'Primary button',
+    variant: 'primary',
+    disabled: false,
+  },
+  render: (args) => <Button {...args} />,
+}
+
+export const DangerButton: Story = {
+  args: {
+    children: 'Danger button',
+    variant: 'danger',
+    disabled: false,
+  },
+  render: (args) => <Button {...args} />,
+}
+
+export const DisabledButton: Story = {
+  args: {
+    children: 'Disabled button',
+    disabled: true,
+  },
+  render: (args) => <Button {...args} />,
+}
+
+export const SecondaryButton: Story = {
+  args: {
+    children: 'Secondary button',
+    variant: 'secondary',
+    disabled: false,
+  },
+  render: (args) => <Button {...args} />,
+}
+
+export const PlainButton: Story = {
+  args: {
+    children: 'Plain button',
+    variant: 'plain',
+  },
+  render: (args) => <Button {...args} />,
+}
+
+export const ListboxButton: Story = {
+  args: {
+    children: 'Listbox button',
+    variant: 'listbox',
+  },
+  render: (args) => <Button {...args} />,
+}
+
+export const GitHubButton: Story = {
+  args: {
+    children: 'GitHub Button',
+    variant: 'github',
+  },
+  render: (args) => <Button {...args} />,
+}
+
+export const GitLabButton: Story = {
+  args: {
+    children: 'GitLab Button',
+    variant: 'gitlab',
+  },
+  render: (args) => <Button {...args} />,
+}
+
+export const BitbucketButton: Story = {
+  args: {
+    children: 'Bitbucket Button',
+    variant: 'bitbucket',
+  },
+  render: (args) => <Button {...args} />,
+}
+export const OktaButton: Story = {
+  args: {
+    children: 'Okta Button',
+    variant: 'okta',
+  },
+  render: (args) => <Button {...args} />,
+}
+
+export const MixedButton: Story = {
+  args: {
+    children: (
+      <>
+        Mixed content <Icon name="search" size="sm" />
+      </>
+    ),
+  },
+  render: (args) => <Button {...args} />,
+}

src/ui/Button/Button.test.jsx → src/ui/Button/Button.test.tsx

@@ -33,25 +33,6 @@ describe('Button', () => {
     })
   })
 
-  describe('when rendered without `to` prop', () => {
-    let mockError
-
-    beforeEach(() => {
-      mockError = vi.fn()
-      const spy = vi.spyOn(console, 'error')
-      spy.mockImplementation(mockError)
-    })
-
-    afterEach(() => {
-      vi.clearAllMocks()
-    })
-
-    it('PropTypes warning is thrown that developers need to provide a hook prop if not using to', () => {
-      render(<Button>hola</Button>, { wrapper: MemoryRouter })
-      expect(mockError).toHaveBeenCalledTimes(1)
-    })
-  })
-
   describe('when isLoading', () => {
     it('disables the button', () => {
       render(