fix(juno-core): eliminate any type inference in styled-components exports

- Fix withTooltip HOC to properly infer component types using ElementRef and ComponentPropsWithoutRef
- Fix styled-components.ts to export typed styled/css/keyframes instead of ThemedStyledComponentsModule
- Add @types/styled-components to devDependencies (was only in resolutions)
- Fix SubMenu TransitionProps optional typing

This ensures RcIconButton and other components export correct StyledComponent types
instead of any in the generated .d.ts files.

Author: kangschampagne

package.json

@@ -54,6 +54,7 @@
     "type-fest": "2.17.0"
   },
   "devDependencies": {
+    "@types/styled-components": "5.1.36",
     "@nrwl/cli": "^14.5.1",
     "@nrwl/workspace": "^14.5.1",
     "@percy/cli": "1.7.0",

packages/juno-core/src/components/Menu/SubMenu/SubMenu.tsx

@@ -358,7 +358,7 @@ const _RcSubMenu = forwardRef<any, RcSubMenuProps>(
           onKeyDown={handlePopperKeyDown}
           onMouseLeave={handlePopperMouseLeave}
         >
-          {({ TransitionProps }: { TransitionProps: object }) => (
+          {({ TransitionProps }: { TransitionProps?: object }) => (
             <StyledGrow {...TransitionProps} timeout="auto">
               <RcPaper>
                 <RcSubMenuContext.Provider value={ctxValue}>

packages/juno-core/src/components/Tooltip/withTooltip/withTooltip.tsx

@@ -1,4 +1,9 @@
-import React, { ComponentType, forwardRef } from 'react';
+import React, { forwardRef } from 'react';
+import type {
+  ComponentPropsWithoutRef,
+  ElementRef,
+  ComponentType,
+} from 'react';
 
 import { RcTooltip, RcTooltipProps } from '../Tooltip';
 
@@ -14,20 +19,36 @@ type WithTooltipProps<P extends {} = {}> = {
 /**
  * Make a component can be use with `RcTooltip` and Tooltip Props
  */
-function withTooltip<T extends object>(Component: ComponentType<T>) {
-  return forwardRef<any, WithTooltipProps<T>>((props, ref) => {
+function withTooltip<C extends ComponentType<unknown>>(Component: C) {
+  type ComponentProps = ComponentPropsWithoutRef<C>;
+  type SafeProps = ComponentProps extends object ? ComponentProps : {};
+  type Props = WithTooltipProps<SafeProps>;
+  type Ref = ElementRef<C>;
+
+  const WithTooltip = forwardRef<Ref, Props>((props, ref) => {
     const { title, useRcTooltip, TooltipProps, ...rest } = props;
+    const restProps = rest as SafeProps;
+    const ComponentWithRef = Component as unknown as React.ComponentType<
+      SafeProps & { ref?: React.Ref<Ref> }
+    >;
 
     if (title && useRcTooltip) {
       return (
         <RcTooltip title={title as RcTooltipProps['title']} {...TooltipProps}>
-          <Component {...(rest as any)} ref={ref} />
+          <ComponentWithRef {...restProps} ref={ref} />
         </RcTooltip>
       );
     }
 
-    return <Component title={title} {...(rest as any)} ref={ref} />;
+    return (
+      <ComponentWithRef {...({ ...restProps, title } as SafeProps)} ref={ref} />
+    );
   });
+
+  return WithTooltip as React.ForwardRefExoticComponent<
+    React.PropsWithoutRef<Props> & React.RefAttributes<Ref>
+  > &
+    React.ComponentType<Props>;
 }
 
 export { withTooltip };

packages/juno-core/src/foundation/styled-components.ts

@@ -1,16 +1,17 @@
-// @ts-ignore - styled-components 5.x bundled types
+import type { ComponentType, ReactNode } from 'react';
+
 import type {
   FlattenInterpolation,
   Interpolation,
   InterpolationValue,
   Keyframes,
+  ThemedCssFunction,
   ThemedStyledComponentsModule,
+  ThemedStyledInterface,
   ThemedStyledProps,
   ThemeProps as StyledThemeProps,
-  // @ts-ignore
 } from 'styled-components';
 /* eslint-disable import/no-duplicates */
-// @ts-ignore - styled-components 5.x type import workaround
 import * as styledComponents from 'styled-components';
 
 import { useTheme } from '@material-ui/core/styles';
@@ -19,20 +20,26 @@ import { RcTheme } from './theme/theme.type';
 
 type ThemeProps = StyledThemeProps<RcTheme>;
 
-const {
-  default: styled,
-  css,
-  keyframes,
-  createGlobalStyle,
-  withTheme,
-  // @ts-ignore
-  StyleSheetManager,
-  ThemeProvider,
-  ThemeConsumer,
-} = styledComponents as any as ThemedStyledComponentsModule<RcTheme>;
+const styledModule =
+  styledComponents as unknown as ThemedStyledComponentsModule<RcTheme>;
+const styled: ThemedStyledInterface<RcTheme> = styledModule.default;
+const css: ThemedCssFunction<RcTheme> = styledModule.css;
+const keyframes: typeof styledModule.keyframes = styledModule.keyframes;
+const createGlobalStyle: typeof styledModule.createGlobalStyle =
+  styledModule.createGlobalStyle;
+const withTheme: typeof styledModule.withTheme = styledModule.withTheme;
+const StyleSheetManager = (
+  styledComponents as typeof styledComponents & {
+    StyleSheetManager: ComponentType<{ children?: ReactNode }>;
+  }
+).StyleSheetManager;
+const ThemeProvider: typeof styledModule.ThemeProvider =
+  styledModule.ThemeProvider;
+const ThemeConsumer: typeof styledModule.ThemeConsumer =
+  styledModule.ThemeConsumer;
 
 type Dependencies = {
-  dependencies?: (React.ComponentType | ((props: any) => JSX.Element))[];
+  dependencies?: (ComponentType | ((props: unknown) => JSX.Element))[];
 };
 
 const RcUseTheme = <T = RcTheme>() => useTheme<T>();

sync-github.json

@@ -1,3 +1,3 @@
 {
-  "latestCommitSHA": "027f472e1541e6a9c04a57e3dd7cba06d03ee623"
+  "latestCommitSHA": "11323eba75a80e15f876eb4a27bbfbe7830a7048"
 }