Feat(web-react): Additional parameter for styleProps and Box refactor

lmc-eu · Dec 23, 2024 · 27caac4 · 27caac4
1 parent 4241e5b
commit 27caac4
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 50 deletions.
diff --git a/packages/web-react/src/components/Box/Box.tsx b/packages/web-react/src/components/Box/Box.tsx
@@ -2,6 +2,7 @@
 
 import classNames from 'classnames';
 import React, { ElementType } from 'react';
+import { PaddingStyleProps } from '../../constants';
 import { useStyleProps } from '../../hooks';
 import { SpiritBoxProps } from '../../types';
 import { useBoxStyleProps } from './useBoxStyleProps';
@@ -15,7 +16,7 @@ const Box = <T extends ElementType = 'div'>(props: SpiritBoxProps<T>) => {
   const { elementType: ElementTag = 'div', children, ...restProps } = propsWithDefaults;
 
   const { classProps, props: modifiedProps, styleProps: boxStyle } = useBoxStyleProps(restProps);
-  const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
+  const { styleProps, props: otherProps } = useStyleProps(modifiedProps, PaddingStyleProps);
 
   const boxStyleProps = {
     style: {

diff --git a/packages/web-react/src/components/Box/useBoxStyleProps.ts b/packages/web-react/src/components/Box/useBoxStyleProps.ts
@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import { CSSProperties, ElementType } from 'react';
 import { BorderColors } from '../../constants';
-import { BreakpointToken, SpaceToken, SpiritBoxProps } from '../../types';
+import { SpiritBoxProps } from '../../types';
 
 interface BoxCSSProperties extends CSSProperties {
   [key: string]: string | undefined | number;
@@ -16,42 +16,10 @@ export interface UseBoxStyleProps<T> {
   styleProps: BoxCSSProperties;
 }
 
-export const generateResponsiveUtilityClasses = (
-  prefix: string,
-  propValue: SpaceToken | Partial<Record<BreakpointToken, SpaceToken>> | undefined,
-): string[] => {
-  if (propValue && typeof propValue === 'object') {
-    return Object.entries(propValue).map(([breakpoint, value]) => {
-      const classValue = value?.replace('space-', '');
-
-      return breakpoint === 'mobile' ? `${prefix}-${classValue}` : `${prefix}-${breakpoint}-${classValue}`;
-    });
-  }
-
-  if (propValue && typeof propValue !== 'object') {
-    return [`${prefix}-${propValue.replace('space-', '')}`];
-  }
-
-  return [];
-};
-
 export const useBoxStyleProps = (
   props: Partial<SpiritBoxProps<ElementType>>,
 ): UseBoxStyleProps<Partial<SpiritBoxProps<ElementType>>> => {
-  const {
-    backgroundColor,
-    borderColor,
-    borderRadius,
-    borderWidth,
-    padding,
-    paddingBottom,
-    paddingLeft,
-    paddingRight,
-    paddingTop,
-    paddingX,
-    paddingY,
-    ...restProps
-  } = props || {};
+  const { backgroundColor, borderColor, borderRadius, borderWidth, ...restProps } = props || {};
   const boxStyle: BoxCSSProperties = {};
 
   const boxBackgroundColor = backgroundColor ? `bg-${backgroundColor}` : '';
@@ -67,17 +35,7 @@ export const useBoxStyleProps = (
     }
   }
 
-  const paddingClasses = [
-    ...generateResponsiveUtilityClasses('p', padding),
-    ...generateResponsiveUtilityClasses('pb', paddingBottom),
-    ...generateResponsiveUtilityClasses('pl', paddingLeft),
-    ...generateResponsiveUtilityClasses('pr', paddingRight),
-    ...generateResponsiveUtilityClasses('pt', paddingTop),
-    ...generateResponsiveUtilityClasses('px', paddingX),
-    ...generateResponsiveUtilityClasses('py', paddingY),
-  ];
-
-  const boxClasses = classNames(boxBackgroundColor, boxBorderColor, boxBorderRadius, boxBorderWidth, ...paddingClasses);
+  const boxClasses = classNames(boxBackgroundColor, boxBorderColor, boxBorderRadius, boxBorderWidth);
 
   return {
     classProps: boxClasses,

diff --git a/packages/web-react/src/constants/style.ts b/packages/web-react/src/constants/style.ts
@@ -7,3 +7,13 @@ export const SpacingStyleProp = {
   marginX: 'mx',
   marginY: 'my',
 } as const;
+
+export const PaddingStyleProps = {
+  padding: 'p',
+  paddingBottom: 'pb',
+  paddingLeft: 'pl',
+  paddingRight: 'pr',
+  paddingTop: 'pt',
+  paddingX: 'px',
+  paddingY: 'py',
+} as const;
diff --git a/packages/web-react/src/hooks/styleProps.ts b/packages/web-react/src/hooks/styleProps.ts
@@ -10,10 +10,13 @@ export type StylePropsResult = {
   props: HTMLAttributes<HTMLElement>;
 };
 
-export function useStyleProps<T extends StyleProps>(props: T): StylePropsResult {
+export function useStyleProps<T extends StyleProps>(
+  props: T,
+  additionalUtilities?: Record<string, string>,
+): StylePropsResult {
   const classNamePrefix = useContext(ClassNamePrefixContext);
   const { UNSAFE_className, UNSAFE_style, ...otherProps } = props;
-  const { styleUtilities, props: modifiedProps } = useStyleUtilities(otherProps, classNamePrefix);
+  const { styleUtilities, props: modifiedProps } = useStyleUtilities(otherProps, classNamePrefix, additionalUtilities);
 
   const style: CSSProperties = { ...UNSAFE_style };
 

diff --git a/packages/web-react/src/hooks/useStyleUtilities.ts b/packages/web-react/src/hooks/useStyleUtilities.ts
@@ -1,4 +1,4 @@
-import { SpacingStyleProp } from '../constants';
+import { SpacingStyleProp as DefaultSpacingStyleProp } from '../constants';
 import {
   BREAKPOINT_MOBILE,
   BreakpointToken,
@@ -37,7 +37,13 @@ const processBreakpointProperties = (
     return accumulatedBreakpointUtilities;
   }, accumulatedUtilities);
 
-export function useStyleUtilities(props: StyleProps, prefix: string | null | undefined = ''): StyleUtilitiesResult {
+export function useStyleUtilities(
+  props: StyleProps,
+  prefix: string | null | undefined = '',
+  additionalSpacingProps: Record<string, string> = {},
+): StyleUtilitiesResult {
+  const SpacingStyleProp = { ...DefaultSpacingStyleProp, ...additionalSpacingProps };
+
   const propEntries = Object.entries(props);
   const styleUtilities = propEntries.reduce((accumulatedUtilities: string[], [key, propValue]) => {
     if (Object.keys(SpacingStyleProp).includes(key)) {