Updated types.

src/app/(main)/settings/websites/WebsiteAddForm.tsx

@@ -11,22 +11,22 @@ import useApi from 'components/hooks/useApi';
 import { DOMAIN_REGEX } from 'lib/constants';
 import useMessages from 'components/hooks/useMessages';
 
-export function WebsiteAddForm({ onSave, onClose }) {
+export function WebsiteAddForm({ onSave, onClose }: { onSave?: () => void; onClose?: () => void }) {
   const { formatMessage, labels, messages } = useMessages();
   const { post, useMutation } = useApi();
   const { mutate, error, isLoading } = useMutation(data => post('/websites', data));
 
-  const handleSubmit = async data => {
+  const handleSubmit = async (data: any) => {
     mutate(data, {
       onSuccess: async () => {
-        onSave();
-        onClose();
+        onSave?.();
+        onClose?.();
       },
     });
   };
 
   return (
-    <Form onSubmit={handleSubmit} error={error}>
+    <Form onSubmit={handleSubmit} error={error as string}>
       <FormRow label={formatMessage(labels.name)}>
         <FormInput name="name" rules={{ required: formatMessage(labels.required) }}>
           <TextField autoComplete="off" />
@@ -47,9 +47,11 @@ export function WebsiteAddForm({ onSave, onClose }) {
         <SubmitButton variant="primary" disabled={false}>
           {formatMessage(labels.save)}
         </SubmitButton>
-        <Button disabled={isLoading} onClick={onClose}>
-          {formatMessage(labels.cancel)}
-        </Button>
+        {onClose && (
+          <Button disabled={isLoading} onClick={onClose}>
+            {formatMessage(labels.cancel)}
+          </Button>
+        )}
       </FormButtons>
     </Form>
   );

src/components/common/ConfirmDeleteForm.tsx

@@ -2,7 +2,13 @@ import { useState } from 'react';
 import { Button, LoadingButton, Form, FormButtons } from 'react-basics';
 import useMessages from 'components/hooks/useMessages';
 
-export function ConfirmDeleteForm({ name, onConfirm, onClose }) {
+export interface ConfirmDeleteFormProps {
+  name: string;
+  onConfirm?: () => void;
+  onClose?: () => void;
+}
+
+export function ConfirmDeleteForm({ name, onConfirm, onClose }: ConfirmDeleteFormProps) {
   const [loading, setLoading] = useState(false);
   const { formatMessage, labels, messages, FormattedMessage } = useMessages();
 

src/components/common/Empty.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
-import styles from './Empty.module.css';
 import useMessages from 'components/hooks/useMessages';
+import styles from './Empty.module.css';
 
 export interface EmptyProps {
   message?: string;

src/components/common/EmptyPlaceholder.tsx

@@ -1,6 +1,12 @@
+import { ReactNode } from 'react';
 import { Icon, Text, Flexbox } from 'react-basics';
 import Logo from 'assets/logo.svg';
 
+export interface EmptyPlaceholderProps {
+  message: string;
+  children?: ReactNode;
+}
+
 export function EmptyPlaceholder({ message, children }) {
   return (
     <Flexbox direction="column" alignItems="center" justifyContent="center" gap={60} height={600}>

src/components/common/ErrorBoundary.tsx

@@ -1,14 +1,19 @@
 /* eslint-disable no-console */
+import { ErrorInfo, ReactNode } from 'react';
 import { ErrorBoundary as Boundary } from 'react-error-boundary';
 import { Button } from 'react-basics';
 import useMessages from 'components/hooks/useMessages';
 import styles from './ErrorBoundry.module.css';
 
-const logError = (error, info) => {
+const logError = (error: Error, info: ErrorInfo) => {
   console.error(error, info.componentStack);
 };
 
-export function ErrorBoundary({ children }) {
+export interface ErrorBoundaryProps {
+  children: ReactNode;
+}
+
+export function ErrorBoundary({ children }: ErrorBoundaryProps) {
   const { formatMessage, messages } = useMessages();
 
   const fallbackRender = ({ error, resetErrorBoundary }) => {

src/components/common/Favicon.tsx

@@ -1,6 +1,6 @@
 import styles from './Favicon.module.css';
 
-function getHostName(url) {
+function getHostName(url: string) {
   const match = url.match(/^(?:https?:\/\/)?(?:[^@\n]+@)?(?:www\.)?([^:/\n?=]+)/im);
   return match && match.length > 1 ? match[1] : null;
 }

src/components/common/FilterButtons.js

@@ -1,13 +0,0 @@
-import { ButtonGroup, Button, Flexbox } from 'react-basics';
-
-export function FilterButtons({ items, selectedKey, onSelect }) {
-  return (
-    <Flexbox justifyContent="center">
-      <ButtonGroup items={items} selectedKey={selectedKey} onSelect={onSelect}>
-        {({ key, label }) => <Button key={key}>{label}</Button>}
-      </ButtonGroup>
-    </Flexbox>
-  );
-}
-
-export default FilterButtons;

src/components/common/FilterButtons.tsx

@@ -0,0 +1,20 @@
+import { Key } from 'react';
+import { ButtonGroup, Button, Flexbox } from 'react-basics';
+
+export interface FilterButtonsProps {
+  items: any[];
+  selectedKey?: Key;
+  onSelect: () => void;
+}
+
+export function FilterButtons({ items, selectedKey, onSelect }: FilterButtonsProps) {
+  return (
+    <Flexbox justifyContent="center">
+      <ButtonGroup items={items} selectedKey={selectedKey as any} onSelect={onSelect}>
+        {({ key, label }) => <Button key={key}>{label}</Button>}
+      </ButtonGroup>
+    </Flexbox>
+  );
+}
+
+export default FilterButtons;

src/components/common/FilterLink.tsx

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { Icon, Icons } from 'react-basics';
 import classNames from 'classnames';
 import Link from 'next/link';
@@ -6,7 +7,23 @@ import useNavigation from 'components/hooks/useNavigation';
 import useMessages from 'components/hooks/useMessages';
 import styles from './FilterLink.module.css';
 
-export function FilterLink({ id, value, label, externalUrl, children, className }) {
+export interface FilterLinkProps {
+  id: string;
+  value: string;
+  label: string;
+  externalUrl: string;
+  className: string;
+  children: ReactNode;
+}
+
+export function FilterLink({
+  id,
+  value,
+  label,
+  externalUrl,
+  children,
+  className,
+}: FilterLinkProps) {
   const { formatMessage, labels } = useMessages();
   const { makeUrl, query } = useNavigation();
   const active = query[id] !== undefined;

src/components/common/LinkButton.tsx

@@ -2,8 +2,17 @@ import classNames from 'classnames';
 import Link from 'next/link';
 import { useLocale } from 'components/hooks';
 import styles from './LinkButton.module.css';
+import { ReactNode } from 'react';
 
-export function LinkButton({ href, className, variant, scroll = true, children }) {
+export interface LinkButtonProps {
+  href: string;
+  className: string;
+  variant?: string;
+  scroll?: boolean;
+  children?: ReactNode;
+}
+
+export function LinkButton({ href, className, variant, scroll = true, children }: LinkButtonProps) {
   const { dir } = useLocale();
 
   return (