add missing types

.eslintrc.js

@@ -2,9 +2,9 @@ module.exports = {
   root: true,
   extends: [
     'eslint:recommended',
-    'prettier',
     'react-app',
     'plugin:react/recommended',
+    'prettier',
   ],
   plugins: ['@typescript-eslint'],
   parser: '@typescript-eslint/parser',
@@ -14,8 +14,6 @@ module.exports = {
   rules: {
     'prefer-const': 'warn',
     'no-console': 'warn',
-    '@typescript-eslint/no-extra-semi': 'off',
-    'semi-style': ['error', 'first'],
     'no-debugger': 'warn',
     'no-constant-condition': ['error', { checkLoops: false }],
     'require-await': 'off',

src/TableComponent.tsx

@@ -1,4 +1,9 @@
-import React, { useState, FunctionComponent, forwardRef } from 'react';
+import React, {
+  useState,
+  FunctionComponent,
+  forwardRef,
+  FormEvent,
+} from 'react';
 import { uuid } from '@sanity/uuid';
 import FormField from 'part:@sanity/components/formfields/default';
 import PatchEvent, { set, unset } from 'part:@sanity/form-builder/patch-event';
@@ -24,10 +29,10 @@ type Props = {
   value: {
     rows: TableRow[];
   };
-  onChange: (...any) => any;
+  onChange: (data: unknown) => unknown;
 };
 
-type TableRow = {
+export type TableRow = {
   _type: string;
   _key: string;
   cells: string[];
@@ -40,7 +45,7 @@ const TableComponent: FunctionComponent<Props> = props => {
     callback: () => any;
   } | null>(null);
 
-  const updateValue = value => {
+  const updateValue = (value: Props['value']) => {
     return onChange(PatchEvent.from(set(value)));
   };
 
@@ -63,7 +68,7 @@ const TableComponent: FunctionComponent<Props> = props => {
         },
       ],
     };
-    return updateValue({ ...(value || {}), ...newValue });
+    return updateValue({ ...(value ?? {}), ...newValue });
   };
 
   const confirmRemoveTable = () => {
@@ -142,7 +147,7 @@ const TableComponent: FunctionComponent<Props> = props => {
     return updateValue(newValue);
   };
 
-  const removeColumn = index => {
+  const removeColumn = (index: number) => {
     const newValue = deepClone(value);
     newValue.rows.forEach(row => {
       row.cells.splice(index, 1);
@@ -151,9 +156,15 @@ const TableComponent: FunctionComponent<Props> = props => {
     setDialog(null);
   };
 
-  const updateCell = (e, rowIndex, cellIndex) => {
+  const updateCell = (
+    e: FormEvent<HTMLInputElement>,
+    rowIndex: number,
+    cellIndex: number
+  ) => {
     const newValue = deepClone(value);
-    newValue.rows[rowIndex].cells[cellIndex] = e.target.value;
+    newValue.rows[rowIndex].cells[cellIndex] = (
+      e.target as HTMLInputElement
+    ).value;
     return updateValue(newValue);
   };
 
@@ -219,6 +230,4 @@ const TableComponent: FunctionComponent<Props> = props => {
   );
 };
 
-export default forwardRef((props: RootProps, ref) => (
-  <TableComponent {...props} />
-));
+export default forwardRef<never, Props>(props => <TableComponent {...props} />);

src/components/TableInput.tsx

@@ -1,6 +1,7 @@
 import React, { FunctionComponent } from 'react';
 import { Box, Button, TextInput } from '@sanity/ui';
 import { RemoveIcon } from '@sanity/icons';
+import type { TableRow } from '../TableComponent';
 import styles from './table.css';
 
 const TableInput: FunctionComponent<{
@@ -13,20 +14,19 @@ const TableInput: FunctionComponent<{
   removeRow: (index: number) => any;
   removeColumn: (index: number) => any;
 }> = props => {
-  const renderRowCell = rowIndex => (cell, cellIndex) => {
-    return (
+  const renderRowCell =
+    (rowIndex: number) => (cell: string, cellIndex: number) => {
       <td key={`cell-${rowIndex}-${cellIndex}`}>
         <TextInput
           fontSize={1}
           padding={3}
           value={cell}
           onChange={e => props.updateCell(e, rowIndex, cellIndex)}
         />
-      </td>
-    );
-  };
+      </td>;
+    };
 
-  const renderRow = (row, rowIndex) => {
+  const renderRow = (row: TableRow, rowIndex: number) => {
     const renderCell = renderRowCell(rowIndex);
     return (
       <tr key={`row-${rowIndex}`}>

src/components/TableMenu.tsx

@@ -1,4 +1,4 @@
-import React, { FunctionComponent, useState } from 'react';
+import React, { FormEventHandler, FunctionComponent, useState } from 'react';
 import {
   Box,
   Button,
@@ -28,7 +28,7 @@ const TableMenu: FunctionComponent<{
 
   const [count, setCount] = useState('');
 
-  const updateCount = e => {
+  const updateCount: FormEventHandler<HTMLInputElement> = e => {
     setCount(e.currentTarget.value);
   };
 

src/components/TablePreview.tsx

@@ -1,4 +1,5 @@
 import React, { FunctionComponent } from 'react';
+import type { TableRow } from '../TableComponent';
 import styles from './table.css';
 
 const TablePreview: FunctionComponent<{ rows: TableRow[] }> = props => {

src/schema/table.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import config from 'config:table';
-import { DatabaseIcon } from '@sanity/icons';
 import TableComponent from '../TableComponent';
 import TablePreview from '../components/TablePreview';
 
@@ -24,24 +23,22 @@ export default {
     select: {
       rows: 'rows',
     },
-    prepare({ rows }) {
-      return {
-        title: 'Table',
-        media: (
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="1em"
-            height="1em"
-            viewBox="0 0 25 25"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="1.2"
-          >
-            <path d="M3 3h18v18H3zM21 9H3M21 15H3M12 3v18" />
-          </svg>
-        ),
-        extendedPreview: <TablePreview rows={rows || []} />,
-      };
-    },
+    prepare: ({ rows }) => ({
+      title: 'Table',
+      media: (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="1em"
+          height="1em"
+          viewBox="0 0 25 25"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.2"
+        >
+          <path d="M3 3h18v18H3zM21 9H3M21 15H3M12 3v18" />
+        </svg>
+      ),
+      extendedPreview: <TablePreview rows={rows || []} />,
+    }),
   },
 };

tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "esModuleInterop": true,
     "jsx": "react",
-    "lib": ["ESNext"],
+    "lib": ["ESNext", "DOM"],
     "resolveJsonModule": true
   },
   "include": [