Extracting some fixes to the types from #482

packages/toolpad-app/next.config.js

@@ -7,6 +7,11 @@ const buildEnvVars = {
 module.exports = {
  reactStrictMode: true,
 
+ eslint: {
+ // We're running this as part of the monorepo eslint
+ ignoreDuringBuilds: true,
+ },
+
  // build-time env vars
  env: buildEnvVars,
 

packages/toolpad-app/src/components/AppEditor/CodeComponentEditor/index.tsx

@@ -68,7 +68,7 @@ function CodeComponentEditorContent({ theme, codeComponentNode }: CodeComponentE
 
  usePageTitle(`${codeComponentNode.name} | Toolpad editor`);
 
- const updateInputExtern = React.useCallback((newInput) => {
+ const updateInputExtern = React.useCallback((newInput: string) => {
  const editor = editorRef.current;
  if (!editor) {
  return;

packages/toolpad-app/src/components/AppEditor/ConnectionEditor/index.tsx

@@ -46,18 +46,13 @@ function ConnectionEditorContent<P>({
  const domApi = useDomApi();
 
  const handleConnectionChange = React.useCallback(
- (connectionParams) => {
- (Object.keys(connectionParams) as (keyof P)[]).forEach((propName) => {
- if (typeof propName !== 'string' || !connectionParams[propName]) {
- return;
- }
- domApi.setNodeNamespacedProp(
- connectionNode,
- 'attributes',
- 'params',
- appDom.createSecret(connectionParams),
- );
- });
+ (connectionParams: P | null) => {
+ domApi.setNodeNamespacedProp(
+ connectionNode,
+ 'attributes',
+ 'params',
+ appDom.createSecret(connectionParams),
+ );
  },
  [connectionNode, domApi],
  );

packages/toolpad-app/src/components/AppEditor/PageEditor/QueryEditor.tsx

@@ -166,11 +166,11 @@ function QueryNodeEditorDialog<Q, P>({
  const dataSourceId = input.attributes.dataSource?.value;
  const dataSource = (dataSourceId && dataSources[dataSourceId]) || null;
 
- const handleConnectionChange = React.useCallback((newConnectionId) => {
+ const handleConnectionChange = React.useCallback((newConnectionId: NodeId | null) => {
  setInput((existing) =>
  update(existing, {
  attributes: update(existing.attributes, {
- connectionId: appDom.createConst(newConnectionId),
+ connectionId: newConnectionId ? appDom.createConst(newConnectionId) : undefined,
  }),
  }),
  );
@@ -446,7 +446,7 @@ export default function QueryEditor() {
  }, []);
 
  const handleCreated = React.useCallback(
- (node) => {
+ (node: appDom.QueryNode) => {
  domApi.addNode(node, page, 'queries');
  setDialogState({ nodeId: node.id });
  },

packages/toolpad-app/src/components/Link.tsx

@@ -10,7 +10,7 @@ const Anchor = styled('a')({});
 
 interface NextLinkComposedProps
  extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>,
- Omit<NextLinkProps, 'href' | 'as'> {
+ Omit<NextLinkProps, 'href' | 'as' | 'onClick' | 'onMouseEnter'> {
  to: NextLinkProps['href'];
  linkAs?: NextLinkProps['as'];
  href?: NextLinkProps['href'];

packages/toolpad-app/src/toolpadDataSources/googleSheets/client.tsx

@@ -65,7 +65,7 @@ function QueryEditor({
  );
 
  const handleSpreadsheetChange = React.useCallback(
- (event, newValue: GoogleDriveFile | null) => {
+ (event: React.SyntheticEvent<Element, Event>, newValue: GoogleDriveFile | null) => {
  const query: GoogleSheetsApiQuery = {
  ...value.query,
  sheetName: null,
@@ -77,7 +77,7 @@ function QueryEditor({
  );
 
  const handleSheetChange = React.useCallback(
- (event, newValue: GoogleSheet | null) => {
+ (event: React.SyntheticEvent<Element, Event>, newValue: GoogleSheet | null) => {
  const query: GoogleSheetsApiQuery = {
  ...value.query,
  sheetName: newValue?.properties?.title ?? null,

packages/toolpad-components/src/DataGrid.tsx

@@ -11,6 +11,7 @@ import {
  gridColumnsTotalWidthSelector,
  gridColumnPositionsSelector,
  gridDensityRowHeightSelector,
+ GridSelectionModel,
 } from '@mui/x-data-grid-pro';
 import * as React from 'react';
 import { useNode, createComponent } from '@mui/toolpad-core';
@@ -241,7 +242,7 @@ const DataGridComponent = React.forwardRef(function DataGridComponent(
  );
 
  const onSelectionModelChange = React.useCallback(
- (ids) => {
+ (ids: GridSelectionModel) => {
  onSelectionChange(ids.length > 0 ? rows.find((row) => row.id === ids[0]) : null);
  },
  [rows, onSelectionChange],

packages/toolpad-core/src/runtime.tsx

@@ -65,13 +65,13 @@ function PlaceholderWrapper(props: PlaceholderWrapperProps) {
 export interface NodeRuntimeWrapperProps {
  children: React.ReactElement;
  nodeId: string;
- componentConfig: ComponentConfig<unknown>;
+ componentConfig: ComponentConfig<any>;
 }
 
 export interface NodeFiberHostProps {
  children: React.ReactElement;
  [RUNTIME_PROP_NODE_ID]: string;
- componentConfig: ComponentConfig<unknown>;
+ componentConfig: ComponentConfig<any>;
  nodeError?: RuntimeError | null;
 }
 

packages/toolpad-core/src/types.ts

@@ -39,7 +39,7 @@ export type BindableAttrValue<V> =
 export type ConstantAttrValues<P> = { [K in keyof P]: ConstantAttrValue<P[K]> };
 
 export type BindableAttrValues<P> = {
- readonly [K in keyof P]?: BindableAttrValue<P[K]>;
+ readonly [K in keyof P & string]?: BindableAttrValue<P[K]>;
 };
 
 export type SlotType = 'single' | 'multiple';