Migrate components default props usage (#3027)

* refactor(design-system): migrate design system components

* refactor(design-system): migrate vrt utility components

* refactor(design-system): migrate calendar-utils components

* refactor(design-system): migrate butons components

* refactor(design-system): migrate collapsible components

* refactor(design-system): migrate data table components

* refactor(design-system): migrate spacings components

* refactor(design-system): migrate input components

* refactor(inputs): adjust missing parts

* refactor: adjust the rest of the components

* refactor: adjust default props on pending components

* chore: remove files

* chore: remove files

Author: CarlosCortizasCT

.editorconfig

@@ -8,4 +8,4 @@ end_of_line = lf
 indent_size = 2
 indent_style = space
 insert_final_newline = true
-trim_trailing_whitespace = true
+trim_trailing_whitespace = true

design-system/src/theme-provider.tsx

@@ -65,13 +65,17 @@ const applyTheme = ({
 };
 
 type ThemeProviderProps = {
-  parentSelector: typeof defaultParentSelector;
-  theme: string;
+  parentSelector?: typeof defaultParentSelector;
+  theme?: string;
   themeOverrides?: Record<string, string>;
 };
 
-const ThemeProvider = (props: ThemeProviderProps) => {
-  const parentSelectorRef = useRef(props.parentSelector);
+const ThemeProvider = ({
+  parentSelector = defaultParentSelector,
+  theme = 'default',
+  ...props
+}: ThemeProviderProps) => {
+  const parentSelectorRef = useRef(parentSelector);
   const themeNameRef = useRef<string>();
   const themeOverridesRef = useRef<Record<string, string>>();
 
@@ -80,26 +84,22 @@ const ThemeProvider = (props: ThemeProviderProps) => {
     // provided include a new object with the same theme overrides
     // (eg: users providing an inline object as prop to the ThemeProvider)
     if (
-      themeNameRef.current !== props.theme ||
+      themeNameRef.current !== theme ||
       !isEqual(themeOverridesRef.current, props.themeOverrides)
     ) {
-      themeNameRef.current = props.theme;
+      themeNameRef.current = theme;
       themeOverridesRef.current = props.themeOverrides;
 
       applyTheme({
-        newTheme: props.theme,
+        newTheme: theme,
         parentSelector: parentSelectorRef.current,
         themeOverrides: props.themeOverrides,
       });
     }
-  }, [props.theme, props.themeOverrides]);
+  }, [theme, props.themeOverrides]);
 
   return null;
 };
-ThemeProvider.defaultProps = {
-  parentSelector: defaultParentSelector,
-  theme: 'default',
-};
 
 type TUseThemeResult = {
   theme: ThemeName;

packages/calendar-utils/src/calendar-body/calendar-body.tsx

@@ -79,11 +79,10 @@ export type TCalendarBody = {
   theme?: Theme;
 };
 
-const defaultProps: Pick<TCalendarBody, 'isClearable'> = {
-  isClearable: true,
-};
-
-export const CalendarBody = (props: TCalendarBody) => {
+export const CalendarBody = ({
+  isClearable = true,
+  ...props
+}: TCalendarBody) => {
   const [isFocused, toggleIsFocused] = useToggleState(false);
 
   const onInputFocus = props.inputProps?.onFocus;
@@ -130,18 +129,29 @@ export const CalendarBody = (props: TCalendarBody) => {
 
   return (
     <Inline alignItems="center">
-      <div css={getInputContainerStyles(props, { isFocused })}>
+      <div
+        css={getInputContainerStyles(
+          {
+            isClearable,
+            ...props,
+          },
+          { isFocused }
+        )}
+      >
         <input
           ref={props.inputRef}
           {...props.inputProps}
           disabled={props.isDisabled}
           readOnly={props.isReadOnly}
-          css={getDateTimeInputStyles(props)}
+          css={getDateTimeInputStyles({
+            isClearable,
+            ...props,
+          })}
           onFocus={handleInputFocus}
           onBlur={handleInputBlur}
           aria-readonly={props.isReadOnly}
         />
-        {!disabledOrReadOnly && props.hasSelection && props.isClearable && (
+        {!disabledOrReadOnly && props.hasSelection && isClearable && (
           <ClearSection
             isCondensed={props.isCondensed}
             hasError={props.hasError}
@@ -153,7 +163,13 @@ export const CalendarBody = (props: TCalendarBody) => {
         )}
         <button
           type="button"
-          css={getCalendarIconContainerStyles(props, { isFocused })}
+          css={getCalendarIconContainerStyles(
+            {
+              isClearable,
+              ...props,
+            },
+            { isFocused }
+          )}
           {...props.toggleButtonProps}
           onFocus={handleToggleFocus}
           onBlur={handleToggleBlur}
@@ -178,6 +194,4 @@ export const CalendarBody = (props: TCalendarBody) => {
 
 CalendarBody.displayName = 'CalendarBody';
 
-CalendarBody.defaultProps = defaultProps;
-
 export default CalendarBody;

packages/components/avatar/src/avatar.tsx

@@ -48,17 +48,6 @@ export type TInitialsProps = Pick<
   'firstName' | 'lastName' | 'size'
 >;
 
-const defaultProps: Pick<
-  TAvatarProps,
-  'firstName' | 'lastName' | 'isHighlighted' | 'size' | 'color'
-> = {
-  firstName: '',
-  lastName: '',
-  isHighlighted: false,
-  size: 's',
-  color: 'accent',
-};
-
 const getFirstChar = (str: string) =>
   typeof str === 'string' ? str.trim().slice(0, 1).toUpperCase() : '';
 
@@ -127,11 +116,35 @@ const Initials = (props: TInitialsProps) => {
 };
 Initials.displayName = 'Initials';
 
-const Avatar = (props: TAvatarProps) => {
-  const avatarSize = getWidthSize(props.size);
-  const foregroundColor = getForegroundColor(props.color);
+const Avatar = ({
+  firstName = '',
+  lastName = '',
+  isHighlighted = false,
+  size = 's',
+  color = 'accent',
+  ...props
+}: TAvatarProps) => {
+  const avatarSize = getWidthSize(size);
+  const foregroundColor = getForegroundColor(color);
   return (
-    <div css={getAvatarStyles(props)} {...filterDataAttributes(props)}>
+    <div
+      css={getAvatarStyles({
+        firstName,
+        lastName,
+        isHighlighted,
+        size,
+        color,
+        ...props,
+      })}
+      {...filterDataAttributes({
+        firstName,
+        lastName,
+        isHighlighted,
+        size,
+        color,
+        ...props,
+      })}
+    >
       {props?.icon ? (
         <div
           css={css`
@@ -149,20 +162,15 @@ const Avatar = (props: TAvatarProps) => {
         <>
           <GravatarImg
             gravatarHash={props.gravatarHash}
-            size={props.size}
-            isHighlighted={props.isHighlighted}
-          />
-          <Initials
-            size={props.size}
-            firstName={props.firstName}
-            lastName={props.lastName}
+            size={size}
+            isHighlighted={isHighlighted}
           />
+          <Initials size={size} firstName={firstName} lastName={lastName} />
         </>
       )}
     </div>
   );
 };
 Avatar.displayName = 'Avatar';
-Avatar.defaultProps = defaultProps;
 
 export default Avatar;

packages/components/buttons/accessible-button/src/accessible-button.tsx

@@ -84,30 +84,29 @@ export type TAccessibleButtonProps = {
   buttonAttributes?: Record<string, unknown>;
 };
 
-const defaultProps: Pick<
-  TAccessibleButtonProps,
-  'type' | 'buttonAttributes' | 'isToggleButton' | 'isToggled'
-> = {
-  type: 'button',
-  buttonAttributes: {},
-  isToggleButton: false,
-  isToggled: false,
-};
-
 const AccessibleButton = forwardRef<HTMLButtonElement, TAccessibleButtonProps>(
-  (props: TAccessibleButtonProps, ref) => {
+  (
+    {
+      type = 'button',
+      buttonAttributes = {},
+      isToggleButton = false,
+      isToggled = false,
+      ...props
+    }: TAccessibleButtonProps,
+    ref
+  ) => {
     warning(
       props.as ? isValidElementType(props.as) : true,
       `ui-kit/AccessibleButton: "as" must be a valid element type.`
     );
 
     warning(
-      !(props.as && props.type !== 'button'),
+      !(props.as && type !== 'button'),
       `ui-kit/AccessibleButton: "type" does not have any effect when "as" is set.`
     );
 
     warning(
-      !(props.isToggleButton && props.isToggled === undefined),
+      !(isToggleButton && isToggled === undefined),
       `ui-kit/AccessibleButton: "isToggled" is required if "isToggleButton" is "true"`
     );
 
@@ -144,7 +143,7 @@ const AccessibleButton = forwardRef<HTMLButtonElement, TAccessibleButtonProps>(
     let buttonProps = {};
     if (isButton) {
       buttonProps = {
-        type: props.type,
+        type: type,
       };
     } else {
       buttonProps = {
@@ -177,8 +176,8 @@ const AccessibleButton = forwardRef<HTMLButtonElement, TAccessibleButtonProps>(
         className={props.className}
         disabled={props.isDisabled}
         aria-disabled={props.isDisabled}
-        {...(props.isToggleButton ? { 'aria-pressed': props.isToggled } : {})}
-        {...omit(props.buttonAttributes, propsToOmit)}
+        {...(isToggleButton ? { 'aria-pressed': isToggled } : {})}
+        {...omit(buttonAttributes, propsToOmit)}
         {...buttonProps}
         {...filterAriaAttributes(props)}
         {...filterDataAttributes(props)}
@@ -189,6 +188,5 @@ const AccessibleButton = forwardRef<HTMLButtonElement, TAccessibleButtonProps>(
   }
 );
 AccessibleButton.displayName = 'AccessibleButton';
-AccessibleButton.defaultProps = defaultProps;
 
 export default AccessibleButton;