Merge pull request #862 from WTW-IM/fix-types-export

.github/CODEOWNERS

@@ -1,3 +1,3 @@
 # Each line is a file pattern followed by one or more owners.
 # A code owner will be requested for review on each PR.
-* @Darrken @WTW-IM/customization
+* @WTW-IM/customization

.github/workflows/ci.yml

@@ -49,7 +49,7 @@ jobs:
             --output-file eslint_report.json \
             --format json \
             --no-error-on-unmatched-pattern \
-            $(git diff --name-only --relative)
+            $(git diff ${{ github.base_ref }} --name-only --relative)
 
       - name: Annotate JS Linting Results
         if: ${{ github.event_name == 'pull_request_target' }}

package.json

@@ -62,6 +62,6 @@
     "prettier": "^2.8.1",
     "ts-jest": "^29.1.2",
     "ts-patch": "^3.0.2",
-    "typescript-transform-paths": "^3.4.6"
+    "typescript-transform-paths": "^3.5.2"
   }
 }

packages/es-components/package.json

@@ -134,7 +134,7 @@
     "ts-node": "^10.9.1",
     "ts-patch": "^3.0.2",
     "typescript": "^5.1.3",
-    "typescript-transform-paths": "^3.4.6",
+    "typescript-transform-paths": "^3.5.2",
     "wait-on": "^7.0.1",
     "webpack": "^5.88.2",
     "yargs": "^17.6.2"

packages/es-components/src/components/containers/drawer/DrawerItem.tsx

@@ -137,12 +137,6 @@ DrawerItem.propTypes = {
   panelKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 };
 
-DrawerItem.defaultProps = {
-  open: undefined,
-  id: undefined,
-  panelKey: undefined
-};
-
 export type DrawerItemBodyProps = Omit<
   AnimateHeightProps,
   'height' | 'duration' | 'id' | 'role'

packages/es-components/src/components/controls/answer-group/AnswerGroup.tsx

@@ -3,7 +3,6 @@ import styled, { css } from 'styled-components';
 
 import RadioGroup, {
   propTypes as radioGroupPropTypes,
-  defaultProps as radioGroupDefaultProps,
   RadioGroupProps
 } from '../radio-buttons/RadioGroup';
 import {
@@ -40,11 +39,33 @@ export type AnswerGroupProps = Override<
 >;
 
 const AnswerGroup = React.forwardRef<HTMLDivElement, AnswerGroupProps>(
-  function ForwardedAnswerGroup(props, ref) {
+  function ForwardedAnswerGroup(
+    {
+      styleType = 'default',
+      selectedType = 'success',
+      size = 'default' as ButtonSize,
+      itemWidth = '100px',
+      isOutline = false,
+      disableAllOptions = false,
+      ...props
+    },
+    ref
+  ) {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     return (
-      <AnswerSet isOutline={props.isOutline} ref={ref}>
-        <RadioGroup {...props} isAnswerGroup={true} />
+      <AnswerSet isOutline={isOutline} ref={ref}>
+        <RadioGroup
+          {...{
+            ...props,
+            styleType,
+            selectedType,
+            size,
+            itemWidth,
+            isOutline,
+            disableAllOptions
+          }}
+          isAnswerGroup={true}
+        />
       </AnswerSet>
     );
   }
@@ -71,15 +92,4 @@ AnswerGroup.propTypes = {
   selectedValue: radioGroupPropTypes.selectedValue
 };
 
-AnswerGroup.defaultProps = {
-  ...radioGroupDefaultProps,
-  styleType: 'default',
-  selectedType: 'success',
-  size: 'default' as ButtonSize,
-  itemWidth: '100px',
-  isOutline: false,
-  disableAllOptions: false,
-  selectedValue: undefined
-};
-
 export default AnswerGroup;

packages/es-components/src/components/controls/buttons/ActionButton.tsx

@@ -2,11 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { useTheme } from '../../util/useTheme';
-import Button, {
-  propTypes as buttonPropTypes,
-  defaultProps as buttonDefaultProps,
-  ButtonProps
-} from './Button';
+import Button, { propTypes as buttonPropTypes, ButtonProps } from './Button';
 import type {
   ButtonVariant,
   ButtonVariantStyleType
@@ -57,12 +53,6 @@ export const propTypes = {
   styleType: buttonPropTypes.styleType
 };
 
-export const defaultProps = {
-  ...buttonDefaultProps,
-  styleType: 'primary' as ButtonVariantStyleType
-};
-
 ActionButton.propTypes = propTypes;
-ActionButton.defaultProps = defaultProps;
 
 export default ActionButton;

packages/es-components/src/components/controls/buttons/Button.tsx

@@ -6,7 +6,6 @@ import { useTheme } from '../../util/useTheme';
 import { darken, getTextColor } from '../../util/colors';
 import ButtonBase, {
   propTypes as buttonBasePropTypes,
-  defaultProps as buttonBaseDefaultProps,
   ButtonBaseProps,
   UnstyledButton,
   esComponentsButtonClass
@@ -368,17 +367,6 @@ export const propTypes: PropTypesOf<ButtonProps> = {
   flatRightEdge: PropTypes.bool
 };
 
-export const defaultProps = {
-  ...buttonBaseDefaultProps,
-  styleType: 'default' as ButtonStyleType,
-  block: false,
-  mobileBlock: true,
-  size: 'default' as ButtonSize,
-  flatLeftEdge: false,
-  flatRightEdge: false
-};
-
 Button.propTypes = propTypes;
-Button.defaultProps = defaultProps;
 
 export default Button;

packages/es-components/src/components/controls/buttons/ButtonBase.tsx

@@ -1,10 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import {
-  htmlButtonPropTypes,
-  htmlButtonDefaultProps
-} from '../../util/htmlProps';
+import { htmlButtonPropTypes } from '../../util/htmlProps';
 import { useMonitoringCallback } from '../../../hooks/useMonitoringHooks';
 
 // Using this because React does not like many of our upstream props.
@@ -13,12 +10,9 @@ export const UnstyledButton = styled.button`
   // noop
 `;
 
-export type ButtonBaseProps = Override<
-  JSXElementProps<'button'>,
-  {
-    waiting?: Maybe<boolean>;
-  }
->;
+export type ButtonBaseProps = JSXElementProps<'button'> & {
+  waiting?: Maybe<boolean>;
+};
 
 export const esComponentsButtonClass = 'es-components-button';
 const ButtonBase = React.forwardRef<HTMLButtonElement, ButtonBaseProps>(
@@ -61,14 +55,6 @@ export const propTypes: PropTypesOf<ButtonBaseProps> = {
   waiting: PropTypes.bool
 };
 
-export const defaultProps = {
-  ...htmlButtonDefaultProps,
-  waiting: false
-};
-
-export type ButtonDefaultProps = typeof defaultProps;
-
 ButtonBase.propTypes = propTypes;
-ButtonBase.defaultProps = defaultProps;
 
 export default ButtonBase;

packages/es-components/src/components/controls/buttons/DropdownButton.tsx

@@ -15,8 +15,7 @@ import Button, {
   ButtonProps,
   ButtonStyleType,
   buttonStyleTypes,
-  propTypes as buttonPropTypes,
-  defaultProps as buttonDefaultProps
+  propTypes as buttonPropTypes
 } from './Button';
 import LinkButton from './LinkButton';
 import useUniqueId from '../../util/useUniqueId';
@@ -201,12 +200,12 @@ const DropdownButton = React.forwardRef<HTMLButtonElement, DropdownButtonProps>(
       children,
       buttonValue,
       manualButtonValue,
-      shouldCloseOnButtonClick,
-      shouldUpdateButtonValue,
-      styleType,
-      inline,
-      flatLeftEdge,
-      flatRightEdge,
+      shouldCloseOnButtonClick = false,
+      shouldUpdateButtonValue = false,
+      styleType = 'default',
+      inline = false,
+      flatLeftEdge = false,
+      flatRightEdge = false,
       ...otherProps
     },
     ref
@@ -375,35 +374,4 @@ DropdownButton.propTypes = {
   flatRightEdge: PropTypes.bool
 };
 
-type ButtonDefaultPropsNoChildren = Omit<typeof buttonDefaultProps, 'children'>;
-type ButtonDefaultEntry = [
-  keyof ButtonDefaultPropsNoChildren,
-  ButtonDefaultPropsNoChildren[keyof ButtonDefaultPropsNoChildren]
-];
-
-const correctedDefaultProps = Object.entries(buttonDefaultProps)
-  .filter<ButtonDefaultEntry>(
-    (entry): entry is ButtonDefaultEntry => entry[0] !== 'children'
-  )
-  .reduce<ButtonDefaultPropsNoChildren>(
-    (acc, [key, value]) =>
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-      ({ ...acc, [key]: value } as ButtonDefaultPropsNoChildren),
-    {} as ButtonDefaultPropsNoChildren
-  );
-
-DropdownButton.defaultProps = {
-  ...correctedDefaultProps,
-  buttonValue: undefined,
-  manualButtonValue: undefined,
-  shouldUpdateButtonValue: false,
-  shouldCloseOnButtonClick: false,
-  styleType: 'default',
-  rootClose: false,
-  inline: false,
-  id: undefined,
-  flatLeftEdge: false,
-  flatRightEdge: false
-};
-
 export default DropdownButton as DropdownButtonComponent;

packages/es-components/src/components/controls/buttons/IconButton.tsx

@@ -85,17 +85,21 @@ export type IconButtonProps = Override<
   }
 >;
 
+const noop = () => {
+  // noop
+};
+
 const IconButton = React.forwardRef<HTMLDivElement, IconButtonProps>(
   function IconButton(
     {
       iconName,
-      iconSize,
+      iconSize = 45,
       childrenFontSize = 18,
-      isHighlighted,
-      isIncomplete,
-      disabled,
+      isHighlighted = false,
+      isIncomplete = false,
+      disabled = false,
       maxWidth = 'auto',
-      onClick,
+      onClick = noop,
       styleType = 'magenta',
       children,
       ...otherProps
@@ -157,17 +161,4 @@ IconButton.propTypes = {
   children: PropTypes.node
 };
 
-IconButton.defaultProps = {
-  ...Container.defaultProps,
-  isHighlighted: false,
-  isIncomplete: false,
-  iconSize: 45,
-  childrenFontSize: 18,
-  disabled: false,
-  maxWidth: undefined,
-  onClick: () => ({}),
-  styleType: 'magenta',
-  children: undefined
-};
-
 export default IconButton;

packages/es-components/src/components/controls/buttons/LinkButton.tsx

@@ -5,16 +5,10 @@ import { useTheme } from '../../util/useTheme';
 import { darken } from '../../util/colors';
 import ButtonBase, {
   propTypes as basePropTypes,
-  defaultProps as baseDefaultProps,
-  ButtonDefaultProps,
   ButtonBaseProps
 } from './ButtonBase';
 import { TextColorButtonVariant } from 'es-components-shared-types';
-import {
-  ButtonProps,
-  propTypes as buttonPropTypes,
-  defaultProps as buttonDefaultProps
-} from './Button';
+import { ButtonProps, propTypes as buttonPropTypes } from './Button';
 
 const StyledButton = styled(ButtonBase)<{ variant: TextColorButtonVariant }>`
   background-color: transparent;
@@ -75,17 +69,8 @@ export const propTypes: PropTypesOf<LinkButtonProps> = {
   /** Select the color style of the button, types come from theme buttonStyles.linkButton */
   styleType: buttonPropTypes.styleType
 };
-
-const unchildrenDefaults = { ...baseDefaultProps };
-delete unchildrenDefaults['children'];
-
-export const defaultProps = {
-  ...(unchildrenDefaults as Omit<ButtonDefaultProps, 'children'>),
-  styleType: buttonDefaultProps.styleType
-};
 /* eslint-enable @typescript-eslint/no-non-null-assertion */
 
-LinkButton.defaultProps = defaultProps;
 LinkButton.propTypes = propTypes as ValidationMap<LinkButtonProps>;
 
 export default LinkButton;

packages/es-components/src/components/controls/buttons/OutlineButton.tsx

@@ -152,11 +152,6 @@ export const propTypes = {
 };
 /* eslint-enable @typescript-eslint/no-non-null-assertion */
 
-export const defaultProps = {
-  ...Button.defaultProps
-};
-
 OutlineButton.propTypes = propTypes;
-OutlineButton.defaultProps = defaultProps;
 
 export default OutlineButton;

packages/es-components/src/components/controls/buttons/PopoverLink.tsx

@@ -3,7 +3,6 @@ import PropTypes, { ValidationMap } from 'prop-types';
 import styled from 'styled-components';
 import LinkButton, {
   propTypes as linkButtonPropTypes,
-  defaultProps as linkButtonDefaultProps,
   LinkButtonProps
 } from './LinkButton';
 import {
@@ -34,7 +33,12 @@ const PopoverLink = React.forwardRef<HTMLButtonElement, PopoverLinkProps>(
     props,
     forwardedRef: React.Ref<HTMLButtonElement>
   ) {
-    const { children, styleType, suppressUnderline, ...other } = props;
+    const {
+      children,
+      styleType = 'primary',
+      suppressUnderline,
+      ...other
+    } = props;
 
     return (
       <StyledButton
@@ -58,13 +62,6 @@ export const propTypes: PropTypesOf<PopoverLinkProps> = {
   suppressUnderline: PropTypes.bool
 };
 
-export const defaultProps = {
-  ...linkButtonDefaultProps,
-  styleType: 'primary' as ButtonVariantStyleType,
-  suppressUnderline: false
-};
-
 PopoverLink.propTypes = propTypes as ValidationMap<PopoverLinkProps>;
-PopoverLink.defaultProps = defaultProps;
 
 export default PopoverLink;