refactor: adjust the rest of the components

dbgmd-00001.sign

@@ -0,0 +1,6 @@
+tree 0003675ccdfb583bbe7bf1a3380aefaad9ce7c12
+parent 48f9768bafc86dc11cc337479bd519a15de2567a
+author Carlos Cortizas <[email protected]> 1734515432 +0100
+committer Carlos Cortizas <[email protected]> 1734515432 +0100
+
+refactor(inputs): adjust missing parts

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/card/src/card.tsx

@@ -10,15 +10,15 @@ export type TCardProps = {
   /**
    * Determines the visual effect of the card. A raised card has a box shadow while a flat card has just a border.
    */
-  type: 'raised' | 'flat';
+  type?: 'raised' | 'flat';
   /**
    * Determines the spacing (padding) that the content should have from the card borders. In case there is no space needed, you can pass `none`.
    */
-  insetScale: 'none' | 's' | 'm' | 'l' | 'xl';
+  insetScale?: 'none' | 's' | 'm' | 'l' | 'xl';
   /**
    * Determines the background color of the card.
    */
-  theme: 'light' | 'dark';
+  theme?: 'light' | 'dark';
   /**
    * Pass a custom CSS class, useful to override the styles.
    * <br>
@@ -45,25 +45,35 @@ export type TCardProps = {
   isDisabled?: boolean;
 };
 
-const Card = (props: TCardProps) => {
+const Card = ({
+  type = 'raised',
+  theme = 'light',
+  insetScale = 'm',
+  ...props
+}: TCardProps) => {
   const isClickable = Boolean(!props.isDisabled && (props.onClick || props.to));
   // Only disable styling if the card is not clickable
   const shouldBeDisabled = props.isDisabled && (props.onClick || props.to);
 
   const commonProps = {
-    ...filterDataAttributes(props),
+    ...filterDataAttributes({
+      type,
+      theme,
+      insetScale,
+      ...props,
+    }),
     onClick: isClickable ? props.onClick : undefined,
     'aria-disabled': props.isDisabled ? true : undefined,
     css: css`
       box-sizing: border-box;
       width: 100%;
       font-size: 1rem;
-      box-shadow: ${props.type === 'raised' ? designTokens.shadow17 : 'none'};
+      box-shadow: ${type === 'raised' ? designTokens.shadow17 : 'none'};
       border-radius: ${designTokens.borderRadius4};
-      border: ${props.type === 'raised'
+      border: ${type === 'raised'
         ? `1px solid ${designTokens.colorNeutral90}`
         : 'none'};
-      background: ${props.theme === 'dark'
+      background: ${theme === 'dark'
         ? designTokens.colorNeutral95
         : designTokens.colorSurface};
       cursor: ${shouldBeDisabled
@@ -72,7 +82,7 @@ const Card = (props: TCardProps) => {
         ? 'pointer'
         : 'default'};
       :hover {
-        background: ${props.theme === 'dark'
+        background: ${theme === 'dark'
           ? isClickable
             ? designTokens.colorNeutral90
             : undefined
@@ -93,10 +103,10 @@ const Card = (props: TCardProps) => {
   };
 
   const content =
-    props.insetScale === 'none' ? (
+    insetScale === 'none' ? (
       <div>{props.children}</div>
     ) : (
-      <Inset scale={props.insetScale} height="expanded">
+      <Inset scale={insetScale} height="expanded">
         {props.children}
       </Inset>
     );
@@ -146,13 +156,6 @@ const Card = (props: TCardProps) => {
   );
 };
 
-const defaultProps: Pick<TCardProps, 'type' | 'theme' | 'insetScale'> = {
-  type: 'raised',
-  theme: 'light',
-  insetScale: 'm',
-};
-
 Card.displayName = 'Card';
-Card.defaultProps = defaultProps;
 
 export default Card;

packages/components/data-table-manager/src/column-settings-manager/column-settings-manager.tsx

@@ -130,7 +130,10 @@ const selectInputComponents = {
   DropdownIndicator,
 };
 
-export const ColumnSettingsManager = (props: TColumnSettingsManagerProps) => {
+export const ColumnSettingsManager = ({
+  availableColumns = [],
+  ...props
+}: TColumnSettingsManagerProps) => {
   if (props.areHiddenColumnsSearchable) {
     warning(
       typeof props.searchHiddenColumns !== 'undefined',
@@ -149,11 +152,11 @@ export const ColumnSettingsManager = (props: TColumnSettingsManagerProps) => {
   const hiddenColumns = useMemo(
     () =>
       differenceWith(
-        props.availableColumns,
+        availableColumns,
         props.selectedColumns,
         (a, b) => a.key === b.key
       ),
-    [props.availableColumns, props.selectedColumns]
+    [availableColumns, props.selectedColumns]
   );
 
   const handleDragEnd = useCallback<(dragResult: DropResult) => void>(
@@ -162,10 +165,10 @@ export const ColumnSettingsManager = (props: TColumnSettingsManagerProps) => {
         dragResult,
         props.onUpdateColumns,
         props.selectedColumns,
-        props.availableColumns,
+        availableColumns,
         setIsDragging
       ),
-    [props.onUpdateColumns, props.selectedColumns, props.availableColumns]
+    [props.onUpdateColumns, props.selectedColumns, availableColumns]
   );
 
   const debouncedSearchHiddenColumns = useMemo(
@@ -256,9 +259,4 @@ export const ColumnSettingsManager = (props: TColumnSettingsManagerProps) => {
 
 ColumnSettingsManager.displayName = 'ColumnSettingsManager';
 
-const defaultProps: Pick<TColumnSettingsManagerProps, 'availableColumns'> = {
-  availableColumns: [],
-};
-ColumnSettingsManager.defaultProps = defaultProps;
-
 export default ColumnSettingsManager;

packages/components/data-table-manager/src/display-settings-manager/display-settings-manager.tsx

@@ -34,12 +34,16 @@ export type TDensityManagerProps = {
   managerTheme?: 'light' | 'dark';
 };
 
-const DensityManager = (props: TDensityManagerProps) => {
+const DensityManager = ({
+  isCondensed = true,
+  isWrappingText = false,
+  ...props
+}: TDensityManagerProps) => {
   const intl = useIntl();
-  const textWrappingOption = props.isWrappingText
+  const textWrappingOption = isWrappingText
     ? SHOW_HIDE_ON_DEMAND
     : WRAPPED_TEXT_VISIBLE;
-  const densityDisplayOption = props.isCondensed
+  const densityDisplayOption = isCondensed
     ? DENSITY_COMPACT
     : DENSITY_COMFORTABLE;
 
@@ -122,13 +126,4 @@ const DensityManager = (props: TDensityManagerProps) => {
 
 DensityManager.displayName = 'DensityManager';
 
-const defaultProps: Pick<
-  TDensityManagerProps,
-  'isCondensed' | 'isWrappingText'
-> = {
-  isCondensed: true,
-  isWrappingText: false,
-};
-DensityManager.defaultProps = defaultProps;
-
 export default DensityManager;

packages/components/data-table-manager/src/settings-container/settings-container.tsx

@@ -38,13 +38,16 @@ const CardContentWrapper = styled.div`
   padding: ${designTokens.spacing40} ${designTokens.spacing50};
 `;
 
-const SettingsContainer = (props: TSettingsContainerProps) => {
+const SettingsContainer = ({
+  containerTheme = 'dark',
+  ...props
+}: TSettingsContainerProps) => {
   const intl = useIntl();
 
   return (
     <CollapsibleMotion isDefaultClosed={false}>
       {({ registerContentNode, containerStyles }) => (
-        <Card type="raised" insetScale="none" theme={props.containerTheme}>
+        <Card type="raised" insetScale="none" theme={containerTheme}>
           <CardContentWrapper>
             <Spacings.Stack scale="xl">
               <HeaderContainer>
@@ -85,9 +88,4 @@ const SettingsContainer = (props: TSettingsContainerProps) => {
 
 SettingsContainer.displayName = 'SettingsContainer';
 
-const defaultProps: Pick<TSettingsContainerProps, 'containerTheme'> = {
-  containerTheme: 'dark',
-};
-SettingsContainer.defaultProps = defaultProps;
-
 export default SettingsContainer;

packages/components/dropdowns/dropdown-menu/src/dropdown-menu.tsx

@@ -90,21 +90,17 @@ function useScrollBlock(isOpen: boolean, triggerRef: RefObject<HTMLElement>) {
   }, [isOpen, scrollableParentRef, triggerRef]);
 }
 
-const defaultProps: Pick<
-  TDropdownMenuProps,
-  'menuPosition' | 'menuType' | 'menuHorizontalConstraint'
-> = {
-  menuHorizontalConstraint: 'auto',
-  menuPosition: 'left',
-  menuType: 'default',
-};
-
 const Container = styled.div`
   position: relative;
   display: inline-block;
 `;
 
-function DropdownMenu(props: TDropdownMenuProps) {
+function DropdownMenu({
+  menuHorizontalConstraint = 'auto',
+  menuPosition = 'left',
+  menuType = 'default',
+  ...props
+}: TDropdownMenuProps) {
   const [isOpen, toggle] = useToggleState(false);
   const triggerRef = useRef<HTMLDivElement>(null);
 
@@ -116,8 +112,7 @@ function DropdownMenu(props: TDropdownMenuProps) {
     }),
     [isOpen, toggle]
   );
-  const Menu =
-    props.menuType === 'default' ? DropdownContentMenu : DropdownListMenu;
+  const Menu = menuType === 'default' ? DropdownContentMenu : DropdownListMenu;
 
   // Close the dropdown when clicking outside of it
   const handleGlobalClick = useCallback(
@@ -154,20 +149,24 @@ function DropdownMenu(props: TDropdownMenuProps) {
         </DropdownTrigger>
 
         <Menu
-          horizontalConstraint={props.menuHorizontalConstraint!}
+          horizontalConstraint={menuHorizontalConstraint!}
           isOpen={isOpen}
-          menuPosition={props.menuPosition!}
+          menuPosition={menuPosition!}
           menuMaxHeight={props.menuMaxHeight}
           triggerElementRef={triggerRef}
-          {...filterDataAttributes(props)}
+          {...filterDataAttributes({
+            menuHorizontalConstraint,
+            menuPosition,
+            menuType,
+            ...props,
+          })}
         >
           {props.children}
         </Menu>
       </Container>
     </DropdownMenuContext.Provider>
   );
 }
-DropdownMenu.defaultProps = defaultProps;
 
 DropdownMenu.ListMenuItem = DropdownListMenuItem;