chore(uds): convert all items to typescript

.vscode/settings.json

@@ -1,6 +1,7 @@
 {
   "cSpell.words": [
     "arcgis",
+    "autodocs",
     "baselayer",
     "basemap",
     "Centerlines",

packages/utah-design-system/src/components/AlertDialog.stories.tsx

@@ -1,32 +1,35 @@
 import type { Meta } from '@storybook/react';
 import { DialogTrigger } from 'react-aria-components';
-import { AlertDialog } from './AlertDialog';
+import { AlertDialog as Component } from './AlertDialog';
 import { Button } from './Button';
 import { Modal } from './Modal';
 
-const meta: Meta<typeof AlertDialog> = {
-  component: AlertDialog,
+const meta: Meta<typeof Component> = {
+  component: Component,
   parameters: {
     layout: 'centered',
   },
   tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <DialogTrigger>
+        <Button variant="destructive">Delete…</Button>
+        <Modal>
+          <Story />
+        </Modal>
+      </DialogTrigger>
+    ),
+  ],
+  argTypes: {},
+  args: {
+    title: 'Delete folder',
+    children:
+      'Are you sure you want to delete "Documents"? All contents will be permanently destroyed.',
+    variant: 'destructive',
+    actionLabel: 'Delete',
+  },
 };
 
 export default meta;
 
-export const Example = (args: any) => (
-  <DialogTrigger>
-    <Button variant="destructive">Delete…</Button>
-    <Modal>
-      <AlertDialog {...args} />
-    </Modal>
-  </DialogTrigger>
-);
-
-Example.args = {
-  title: 'Delete folder',
-  children:
-    'Are you sure you want to delete "Documents"? All contents will be permanently destroyed.',
-  variant: 'destructive',
-  actionLabel: 'Delete',
-};
+export const Example = {};

packages/utah-design-system/src/components/Avatar.stories.tsx

@@ -1,20 +1,44 @@
-import { Avatar } from './Avatar';
+import { Meta } from '@storybook/react';
+import { Avatar as Component } from './Avatar';
 
-export default {
-  component: Avatar,
+const meta: Meta<typeof Component> = {
+  component: Component,
   parameters: {
     layout: 'centered',
   },
+  tags: ['autodocs'],
+  argTypes: {},
+  args: {
+    user: {
+      email: 'ugrc-developers@utah.gov',
+      displayName: 'UGRC Developers',
+      emailVerified: true,
+      isAnonymous: false,
+      metadata: {},
+      providerData: [],
+      refreshToken: '',
+      tenantId: '',
+      getIdToken: () => Promise.resolve(''),
+      getIdTokenResult: () => Promise.resolve({} as any),
+      reload: () => Promise.resolve(),
+      toJSON: () => ({}),
+      delete: () => Promise.resolve(),
+      phoneNumber: null,
+      photoURL: null,
+      providerId: '',
+      uid: '',
+    },
+  },
 };
 
-export const Example = (args: any) => <Avatar {...args} />;
-Example.args = {
-  user: { email: 'ugrc-developers@utah.gov', displayName: 'UGRC Developers' },
-};
-
-export const Anonymous = (args: any) => <Avatar {...args} />;
+export default meta;
 
-export const NoGravatar = (args: any) => <Avatar {...args} />;
+export const Example = {};
+export const Anonymous = (args: any) => <Component {...args} />;
+Anonymous.args = {
+  user: undefined,
+};
+export const NoGravatar = (args: any) => <Component {...args} />;
 NoGravatar.args = {
   user: { email: 'test@test.com', displayName: 'Test User' },
 };

packages/utah-design-system/src/components/Banner.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta } from '@storybook/react';
+import { Banner as Component } from './Banner.tsx';
+
+const meta: Meta<typeof Component> = {
+  component: Component,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+  args: {
+    children: 'Something went wrong',
+  },
+};
+
+export default meta;
+
+export const Example = {};

packages/utah-design-system/src/components/Banner.jsx → packages/utah-design-system/src/components/Banner.tsx

@@ -1,8 +1,7 @@
 import { TriangleAlertIcon } from 'lucide-react';
+import { ReactNode } from 'react';
 
-import PropTypes from 'prop-types';
-
-export const Banner = ({ children }) => {
+export const Banner = ({ children }: { children: ReactNode }) => {
   return (
     <div className="m-6 mx-auto flex min-h-[75px] max-w-lg flex-row gap-2 rounded border border-rose-500 bg-rose-50 dark:bg-rose-900/10">
       <div className="inline-flex min-w-[75px] items-center justify-center rounded-l bg-rose-200 text-rose-500/70 dark:bg-rose-800/50">
@@ -14,6 +13,3 @@ export const Banner = ({ children }) => {
     </div>
   );
 };
-Banner.propTypes = {
-  children: PropTypes.node,
-};

packages/utah-design-system/src/components/Button.stories.tsx

@@ -1,11 +1,12 @@
 import { Meta } from '@storybook/react';
-import { Button } from './Button';
+import { Button as Component } from './Button';
 
-const meta: Meta<typeof Button> = {
-  component: Button,
+const meta: Meta<typeof Component> = {
+  component: Component,
   parameters: {
     layout: 'centered',
   },
+  tags: ['autodocs'],
   argTypes: {
     variant: {
       control: 'select',

packages/utah-design-system/src/components/Checkbox.stories.tsx

@@ -1,17 +1,19 @@
-import { Checkbox } from './Checkbox';
+import { Meta } from '@storybook/react';
+import { Checkbox as Component } from './Checkbox';
 
-export default {
-  component: Checkbox,
+const meta: Meta<typeof Component> = {
+  component: Component,
   parameters: {
     layout: 'centered',
   },
+  tags: ['autodocs'],
   argTypes: {},
   args: {
     isDisabled: false,
     children: 'Checkbox',
   },
 };
 
-export const Default = {
-  args: {},
-};
+export default meta;
+
+export const Example = {};

packages/utah-design-system/src/components/Footer.stories.tsx

@@ -10,8 +10,9 @@ import type { FooterProps } from './Footer.tsx';
 const meta: Meta<typeof Component> = {
   component: Component,
   parameters: {
-    layout: 'centered',
+    layout: 'fullscreen',
   },
+  tags: ['autodocs'],
   argTypes: {},
   args: {},
 };

packages/utah-design-system/src/components/FormErrors.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta } from '@storybook/react';
+import { FormErrors as Component } from './FormErrors.tsx';
+
+const meta: Meta<typeof Component> = {
+  component: Component,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+  args: {
+    errors: {
+      email: new Error('Email is required'),
+      password: new Error('Password is required'),
+    },
+  },
+};
+
+export default meta;
+
+export const Example = {};

packages/utah-design-system/src/components/Form.jsx → packages/utah-design-system/src/components/FormErrors.tsx

@@ -1,7 +1,6 @@
-import PropTypes from 'prop-types';
-import { Banner } from './Banner';
+import { Banner } from './Banner.tsx';
 
-export const FormErrors = ({ errors }) => {
+export const FormErrors = ({ errors }: { errors: Record<string, Error> }) => {
   const entries = Object.entries(errors);
 
   if (entries.length === 0) {
@@ -27,12 +26,9 @@ export const FormErrors = ({ errors }) => {
     </Banner>
   );
 };
-FormErrors.propTypes = {
-  errors: PropTypes.object.isRequired,
-};
 
-export const FormError = ({ children }) => {
-  if (children?.length === 0) {
+export const FormError = ({ children }: { children: React.ReactNode }) => {
+  if (!children) {
     return null;
   }
 
@@ -42,6 +38,3 @@ export const FormError = ({ children }) => {
     </Banner>
   );
 };
-FormError.propTypes = {
-  children: PropTypes.node,
-};

packages/utah-design-system/src/components/Geocode.stories.tsx

@@ -1,12 +1,14 @@
-import { Geocode } from './Geocode.js';
+import { Meta } from '@storybook/react';
+import { Geocode as Component } from './Geocode.js';
 import { fn, waitFor, userEvent, within, expect } from '@storybook/test';
 import { http, HttpResponse } from 'msw';
 
-export default {
-  component: Geocode,
+const meta: Meta<typeof Component> = {
+  component: Component,
   parameters: {
     layout: 'centered',
   },
+  tags: ['autodocs'],
   argTypes: {
     format: {
       control: {
@@ -31,9 +33,9 @@ export default {
   },
 };
 
-export const Default = {
-  args: {},
-};
+export default meta;
+
+export const Example = {};
 
 export const Milepost = {
   args: { type: 'route-milepost' },

packages/utah-design-system/src/components/Header.stories.jsx → packages/utah-design-system/src/components/Header.stories.tsx

@@ -1,4 +1,4 @@
-import { Header as Component } from './Header.tsx';
+import { Header as Component, HeaderProps } from './Header.tsx';
 import {
   FirebaseAppProvider,
   FirebaseAuthProvider,
@@ -7,11 +7,16 @@ import {
 import { OAuthProvider } from 'firebase/auth';
 import { UtahIdLogin } from './UtahIdLogin.tsx';
 import { firebaseConfig } from '../../firebase.ts';
+import { Meta } from '@storybook/react';
 
 const provider = new OAuthProvider('oidc.utahid');
 
-export default {
+const meta: Meta<typeof Component> = {
   component: Component,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['autodocs'],
   decorators: [
     (Story) => (
       <FirebaseAppProvider config={firebaseConfig}>
@@ -26,8 +31,12 @@ export default {
       </FirebaseAppProvider>
     ),
   ],
+  argTypes: {},
+  args: {},
 };
 
+export default meta;
+
 const Logo = () => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
@@ -83,16 +92,12 @@ const Logo = () => (
   </svg>
 );
 
-export const Default = {
-  render: (args) => <Component {...args} />,
-};
+export const Example = {};
 
 export const HasLogo = {
-  render: (args) => (
-    <Component {...args}>
-      <Logo />
-    </Component>
-  ),
+  args: {
+    children: <Logo />,
+  },
 };
 
 const links = [
@@ -101,11 +106,13 @@ const links = [
 ];
 
 export const HasMenu = {
-  render: (args) => <Component {...args} links={links} />,
+  args: {
+    links: links,
+  },
 };
 
 export const HasAll = {
-  render: (args) => {
+  render: (args: HeaderProps) => {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const { currentUser, logout } = useFirebaseAuth();