chore(many): replace any types and add tech debt tickets (#26293)

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>

packages/react-router/src/ReactRouter/StackManager.tsx

@@ -12,6 +12,8 @@ import { matchPath } from 'react-router-dom';
 
 import { clonePageElement } from './clonePageElement';
 
+// TODO(FW-2959): types
+
 interface StackManagerProps {
   routeInfo: RouteInfo;
 }

packages/react/src/components/CreateAnimation.tsx

@@ -9,6 +9,8 @@ import {
 } from '@ionic/core/components';
 import React, { PropsWithChildren } from 'react';
 
+// TODO(FW-2959): types
+
 interface PartialPropertyValue {
   property: string;
   value: any;

packages/react/src/components/IonActionSheet.tsx

@@ -21,6 +21,7 @@ export interface ActionSheetOptions extends Omit<ActionSheetOptionsCore, 'button
 }
 
 const actionSheetController = {
+  // TODO(FW-2959): type
   create: (options: ActionSheetOptions) => actionSheetControllerCore.create(options as any),
   dismiss: (data?: any, role?: string | undefined, id?: string | undefined) =>
     actionSheetControllerCore.dismiss(data, role, id),

packages/react/src/components/IonApp.tsx

@@ -15,7 +15,7 @@ type Props = LocalJSX.IonApp &
 
 export const IonApp = /*@__PURE__*/ (() =>
   class extends React.Component<Props> {
-    addOverlayCallback?: (id: string, overlay: any, containerElement: HTMLDivElement) => void;
+    addOverlayCallback?: (id: string, overlay: ReactComponentOrElement, containerElement: HTMLDivElement) => void;
     removeOverlayCallback?: (id: string) => void;
 
     constructor(props: Props) {

packages/react/src/components/IonOverlayManager.tsx

@@ -27,7 +27,7 @@ export const IonOverlayManager: React.FC<IonOverlayManagerProps> = ({
 }) => {
   type OverlaysList = {
     [key: string]: {
-      component: any;
+      component: any; // TODO(FW-2959): type
       containerElement: HTMLDivElement;
     };
   };

packages/react/src/components/IonRoute.tsx

@@ -6,7 +6,7 @@ export interface IonRouteProps {
   path?: string;
   exact?: boolean;
   show?: boolean;
-  render: (props?: any) => JSX.Element;
+  render: (props?: any) => JSX.Element; // TODO(FW-2959): type
   disableIonPageManagement?: boolean;
 }
 

packages/react/src/components/IonRouterContext.tsx

@@ -19,7 +19,7 @@ export interface IonRouterContextState {
 }
 
 export const IonRouterContext = React.createContext<IonRouterContextState>({
-  routeInfo: undefined as any,
+  routeInfo: undefined as any, // TODO(FW-2959): type
   push: () => {
     throw new Error('An Ionic Router is required for IonRouterContext');
   },

packages/react/src/components/createInlineOverlayComponent.tsx

@@ -10,6 +10,8 @@ import {
 } from './react-component-lib/utils';
 import { createForwardRef } from './utils';
 
+// TODO(FW-2959): types
+
 type InlineOverlayState = {
   isOpen: boolean;
 };

packages/react/src/components/createRoutingComponent.tsx

@@ -15,6 +15,8 @@ import {
 } from './react-component-lib/utils';
 import { createForwardRef } from './utils';
 
+// TODO(FW-2959): types
+
 interface IonicReactInternalProps<ElementType> extends React.HTMLAttributes<ElementType> {
   forwardedRef?: React.ForwardedRef<ElementType>;
   href?: string;

packages/react/src/components/navigation/IonTabBar.tsx

@@ -35,6 +35,8 @@ interface IonTabBarState {
   tabs: { [key: string]: TabUrls };
 }
 
+// TODO(FW-2959): types
+
 class IonTabBarUnwrapped extends React.PureComponent<InternalProps, IonTabBarState> {
   context!: React.ContextType<typeof NavContext>;
 

packages/react/src/components/navigation/IonTabButton.tsx

@@ -9,7 +9,7 @@ type Props = LocalJSX.IonTabButton &
   IonicReactProps & {
     routerOptions?: RouterOptions;
     ref?: React.Ref<HTMLIonTabButtonElement>;
-    onClick?: (e: any) => void;
+    onClick?: (e: Event) => void;
   };
 
 export const IonTabButton = /*@__PURE__*/ (() =>

packages/react/src/components/navigation/IonTabs.tsx

@@ -15,6 +15,8 @@ class IonTabsElement extends HTMLElementSSR {
   }
 }
 
+// TODO(FW-2959): types
+
 if (typeof (window as any) !== 'undefined' && window.customElements) {
   const element = window.customElements.get('ion-tabs');
   if (!element) {

packages/react/src/components/utils/index.tsx

@@ -13,7 +13,7 @@ export type IonicReactExternalProps<PropType, ElementType> = PropType &
   IonicReactProps;
 
 export const createForwardRef = <PropType, ElementType>(
-  ReactComponent: any,
+  ReactComponent: any, // TODO(FW-2959): type
   displayName: string
 ) => {
   const forwardRef = (

packages/react/src/contexts/NavContext.ts

@@ -3,6 +3,8 @@ import React from 'react';
 
 import { RouteInfo } from '../models';
 
+// TODO(FW-2959): types
+
 export interface NavContextState {
   getIonRoute: () => any;
   getIonRedirect: () => any;

packages/react/src/framework-delegate.tsx

@@ -1,6 +1,8 @@
 import { FrameworkDelegate } from '@ionic/core/components';
 import { createPortal } from 'react-dom';
 
+// TODO(FW-2959): types
+
 type ReactComponent = (props?: any) => JSX.Element;
 
 export const ReactDelegate = (

packages/react/src/hooks/useIonModal.ts

@@ -7,6 +7,8 @@ import { ReactComponentOrElement } from '../models/ReactComponentOrElement';
 import { HookOverlayOptions } from './HookOverlayOptions';
 import { useOverlay } from './useOverlay';
 
+// TODO(FW-2959): types
+
 /**
  * A hook for presenting/dismissing an IonModal component
  * @param component The component that the modal will show. Can be a React Component, a functional component, or a JSX Element

packages/react/src/hooks/useIonPopover.ts

@@ -7,6 +7,8 @@ import { ReactComponentOrElement } from '../models/ReactComponentOrElement';
 import { HookOverlayOptions } from './HookOverlayOptions';
 import { useOverlay } from './useOverlay';
 
+// TODO(FW-2959): types
+
 /**
  * A hook for presenting/dismissing an IonPicker component
  * @param component The component that the popover will show. Can be a React Component, a functional component, or a JSX Element

packages/react/src/hooks/useOverlay.ts

@@ -8,6 +8,8 @@ import { generateId } from '../utils/generateId';
 
 import { HookOverlayOptions } from './HookOverlayOptions';
 
+// TODO(FW-2959): types
+
 interface OverlayBase extends HTMLElement {
   present: () => Promise<void>;
   dismiss: (data?: any, role?: string | undefined) => Promise<boolean>;

packages/react/src/lifecycle/IonLifeCycleHOC.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 
 import { IonLifeCycleContext } from '../contexts/IonLifeCycleContext';
 
+// TODO(FW-2959): types
+
 export const withIonLifeCycle = (WrappedComponent: React.ComponentType<any>) => {
   return class IonLifeCycle extends React.Component<any, any> {
     context!: React.ContextType<typeof IonLifeCycleContext>;

packages/react/src/routing/NavManager.tsx

@@ -11,6 +11,8 @@ import { RouterOptions } from '../models/RouterOptions';
 import { LocationHistory } from './LocationHistory';
 import PageManager from './PageManager';
 
+// TODO(FW-2959): types
+
 interface NavManagerProps {
   routeInfo: RouteInfo;
   onNativeBack: () => void;

packages/react/src/routing/OutletPageManager.tsx

@@ -11,7 +11,7 @@ interface OutletPageManagerProps {
   className?: string;
   forwardedRef?: React.ForwardedRef<HTMLIonRouterOutletElement>;
   routeInfo?: RouteInfo;
-  StackManager: any;
+  StackManager: any; // TODO(FW-2959): type
 }
 
 export class OutletPageManager extends React.Component<OutletPageManagerProps> {

packages/react/src/routing/RouteManagerContext.ts

@@ -27,6 +27,7 @@ export interface RouteManagerContextState {
   unMountViewItem: (viewItem: ViewItem) => void;
 }
 
+// TODO(FW-2959): types
 export const RouteManagerContext = /*@__PURE__*/ React.createContext<RouteManagerContextState>({
   addViewItem: () => undefined,
   canGoBack: () => undefined as any,

packages/vue-router/src/router.ts

@@ -18,6 +18,8 @@ import {
 } from './types';
 import { AnimationBuilder } from '@ionic/vue';
 
+// TODO(FW-2969): types
+
 export const createIonRouter = (opts: IonicVueRouterOptions, router: Router) => {
   let currentNavigationInfo: NavigationInformation = { direction: undefined, action: undefined, delta: undefined };
 

packages/vue-router/src/types.ts

@@ -2,6 +2,8 @@ import { AnimationBuilder } from '@ionic/vue';
 import { RouteLocationMatched, RouterOptions } from 'vue-router';
 import { Ref } from 'vue';
 
+// TODO(FW-2969): types
+
 export interface VueComponentData {
   /**
    * The cached result of the props

packages/vue-router/src/viewStacks.ts

@@ -113,6 +113,7 @@ export const createViewStacks = (router: Router) => {
     return undefined;
   }
 
+  // TODO(FW-2969): type
   const createViewItem = (outletId: number, vueComponent: any, matchedRoute: RouteLocationMatched, routeInfo: RouteInfo, ionPage?: HTMLElement): ViewItem => {
     return {
       id: generateId('viewItem'),

packages/vue/src/components/IonBackButton.ts

@@ -4,6 +4,7 @@ import { defineCustomElement } from '@ionic/core/components/ion-back-button.js';
 export const IonBackButton = /*@__PURE__*/ defineComponent((_, { attrs, slots }) => {
   defineCustomElement();
 
+  // TODO(FW-2969): type
   const ionRouter: any = inject('navManager');
 
   const onClick = () => {

packages/vue/src/components/IonRouterOutlet.ts

@@ -16,6 +16,8 @@ import { defineCustomElement } from '@ionic/core/components/ion-router-outlet.js
 import { matchedRouteKey, routeLocationKey, useRoute } from 'vue-router';
 import { fireLifecycle, generateId, getConfig } from '../utils';
 
+// TODO(FW-2969): types
+
 const isViewVisible = (enteringEl: HTMLElement) => {
   return !enteringEl.classList.contains('ion-page-hidden') && !enteringEl.classList.contains('ion-page-invisible');
 }

packages/vue/src/components/IonTabBar.ts

@@ -1,6 +1,8 @@
 import { h, defineComponent, getCurrentInstance, inject, VNode } from 'vue';
 import { defineCustomElement } from '@ionic/core/components/ion-tab-bar.js';
 
+// TODO(FW-2969): types
+
 interface TabState {
   activeTab?: string;
   tabs: { [k: string]: Tab };

packages/vue/src/components/IonTabButton.ts

@@ -17,6 +17,7 @@ export const IonTabButton = /*@__PURE__*/ defineComponent({
   setup(props, { slots }) {
     defineCustomElement();
 
+    // TODO(FW-2969): type
     const ionRouter: any = inject('navManager');
     const onClick = (ev: Event) => {
       if (ev.cancelable) {

packages/vue/src/components/IonTabs.ts

@@ -3,6 +3,8 @@ import { h, defineComponent, VNode } from 'vue';
 const WILL_CHANGE = 'ionTabsWillChange';
 const DID_CHANGE = 'ionTabsDidChange';
 
+// TODO(FW-2969): types
+
 export const IonTabs = /*@__PURE__*/ defineComponent({
   name: 'IonTabs',
   emits: [WILL_CHANGE, DID_CHANGE],

packages/vue/src/controllers.ts

@@ -18,6 +18,8 @@ import { defineCustomElement as defineIonToastCustomElement } from '@ionic/core/
 import { defineCustomElement as defineIonModalCustomElement } from '@ionic/core/components/ion-modal.js'
 import { defineCustomElement as defineIonPopoverCustomElement } from '@ionic/core/components/ion-popover.js'
 
+// TODO(FW-2969): types
+
 /**
  * Wrap the controllers export from @ionic/core
  * register the underlying Web Component and

packages/vue/src/framework-delegate.ts

@@ -5,6 +5,7 @@ import { addTeleportedUserComponent, removeTeleportedUserComponent } from './com
 
 export const VueDelegate = (addFn = addTeleportedUserComponent, removeFn = removeTeleportedUserComponent): FrameworkDelegate => {
   let Component: VNode | undefined;
+  // TODO(FW-2969): types
   const attachViewToDom = (parentElement: HTMLElement, component: any, componentProps: any = {}, classes?: string[]) => {
     /**
      * Ionic Framework passes in modal and popover element

packages/vue/src/ionic-vue.ts

@@ -1,6 +1,8 @@
 import { App, Plugin } from 'vue';
 import { IonicConfig, initialize } from '@ionic/core/components';
 
+// TODO(FW-2969): types
+
 /**
 * We need to make sure that the web component fires an event
 * that will not conflict with the user's @ionChange binding,

packages/vue/src/utils.ts

@@ -3,6 +3,8 @@ import { Config as CoreConfig, LIFECYCLE_DID_ENTER, LIFECYCLE_DID_LEAVE, LIFECYC
 
 type LIFECYCLE_EVENTS = typeof LIFECYCLE_WILL_ENTER | typeof LIFECYCLE_DID_ENTER | typeof LIFECYCLE_WILL_LEAVE | typeof LIFECYCLE_DID_LEAVE;
 
+// TODO(FW-2969): types
+
 export enum LifecycleHooks {
   WillEnter = 'onIonViewWillEnter',
   DidEnter = 'onIonViewDidEnter',

packages/vue/src/vue-component-lib/overlays.ts

@@ -1,5 +1,7 @@
 import { defineComponent, h, ref, VNode, onMounted } from 'vue';
 
+// TODO(FW-2969): types
+
 export interface OverlayProps {
   isOpen?: boolean;
 }