From ad60a64705342725c9cd1e2718ed4b8fc6ea3a01 Mon Sep 17 00:00:00 2001
From: Pavel Klibani <pavel@techloop.io>
Date: Mon, 26 Aug 2024 23:52:48 +0200
Subject: [PATCH] Refactor(web-react): Grid useGridStylesProps use new hooks
 for generating classes

- uses new hook for generate alignment classes
---
 .../src/components/Grid/useGridStyleProps.ts  | 45 +++++--------------
 packages/web-react/src/types/grid.ts          | 11 ++++-
 2 files changed, 21 insertions(+), 35 deletions(-)

diff --git a/packages/web-react/src/components/Grid/useGridStyleProps.ts b/packages/web-react/src/components/Grid/useGridStyleProps.ts
index 608cef5b02..655ed1f8c2 100644
--- a/packages/web-react/src/components/Grid/useGridStyleProps.ts
+++ b/packages/web-react/src/components/Grid/useGridStyleProps.ts
@@ -1,15 +1,8 @@
 import classNames from 'classnames';
 import { CSSProperties, ElementType } from 'react';
 import { DirectionAxis } from '../../constants';
-import { useClassNamePrefix, useSpacingStyle } from '../../hooks';
-import { GridColsBreakpoints, GridCustomLayoutProps, SpiritGridProps } from '../../types';
-
-type AlignmentOrCols =
-  | string
-  | number
-  | Pick<GridCustomLayoutProps, 'alignmentX' | 'alignmentY' | 'cols'>
-  | GridColsBreakpoints
-  | undefined;
+import { useAlignmentClass, useClassNamePrefix, useSpacingStyle } from '../../hooks';
+import { GridColsBreakpoints, SpiritGridProps, GridAlignmentYType, GridAlignmentXType } from '../../types';
 
 interface GridCSSProperties extends CSSProperties {
   [key: string]: string | undefined | number;
@@ -24,14 +17,6 @@ export interface GridStyles<T> {
   styleProps: GridCSSProperties;
 }
 
-function capitalizeFirstLetter(str: string): string {
-  if (typeof str !== 'string') {
-    return str;
-  }
-
-  return str.charAt(0).toUpperCase() + str.slice(1);
-}
-
 export function useGridStyleProps(props: SpiritGridProps<ElementType>): GridStyles<SpiritGridProps<ElementType>> {
   const { alignmentX, alignmentY, cols, spacing, spacingX, spacingY, ...restProps } = props;
 
@@ -46,36 +31,30 @@ export function useGridStyleProps(props: SpiritGridProps<ElementType>): GridStyl
     ...useSpacingStyle(spacingY, 'grid', DirectionAxis.Y),
   };
 
-  function generateGridClass(componentClass: string, property: AlignmentOrCols, type: string) {
+  function generateColsClasses(
+    componentClass: string,
+    property: number | GridColsBreakpoints | undefined,
+    type: string,
+  ) {
     if (typeof property === 'object' && property !== null) {
-      // If the property is an object, we need to check if the mobile property is set.
-      // If not, we set it to stretch
-      if (!Object.keys(property).includes('mobile')) {
-        (property as Record<string, string>).mobile = 'stretch';
-      }
-
       // We map over the object and generate the classes for each breakpoint
       return Object.keys(property)
         .map((key) => {
           const infix = key === 'mobile' ? '' : `--${key}`;
           const responsiveProperty = (property as Record<string, string>)[key];
 
-          return `${componentClass}${infix}--${type}${
-            responsiveProperty && typeof responsiveProperty === 'string'
-              ? capitalizeFirstLetter(responsiveProperty)
-              : `-${responsiveProperty}`
-          }`;
+          return `${componentClass}${infix}--${type}-${responsiveProperty}`;
         })
         .join(' ');
     }
 
-    return `${componentClass}--${type}${property && typeof property === 'string' ? capitalizeFirstLetter(property) : `-${property}`}`;
+    return `${componentClass}--${type}-${property}`;
   }
 
   const classes = classNames(gridClass, {
-    [generateGridClass(gridClass, alignmentX, 'alignmentX')]: alignmentX,
-    [generateGridClass(gridClass, alignmentY, 'alignmentY')]: alignmentY,
-    [generateGridClass(gridClass, cols, 'cols')]: cols,
+    [useAlignmentClass(gridClass, alignmentX as GridAlignmentXType, 'alignmentX')]: alignmentX,
+    [useAlignmentClass(gridClass, alignmentY as GridAlignmentYType, 'alignmentY')]: alignmentY,
+    [generateColsClasses(gridClass, cols, 'cols')]: cols,
   });
 
   return {
diff --git a/packages/web-react/src/types/grid.ts b/packages/web-react/src/types/grid.ts
index 02a9ab484c..21cae801fa 100644
--- a/packages/web-react/src/types/grid.ts
+++ b/packages/web-react/src/types/grid.ts
@@ -41,9 +41,16 @@ export interface GridItemElementTypeProps<T extends ElementType = 'div'> {
   elementType?: T | JSXElementConstructor<unknown>;
 }
 
+export type GridAlignmentXType =
+  | NonNullable<AlignmentXExtendedDictionaryType>
+  | { [key: string]: NonNullable<AlignmentXExtendedDictionaryType> };
+export type GridAlignmentYType =
+  | NonNullable<AlignmentYExtendedDictionaryType>
+  | { [key: string]: NonNullable<AlignmentYExtendedDictionaryType> };
+
 export interface GridCustomLayoutProps {
-  alignmentX?: AlignmentXExtendedDictionaryType | { [key: string]: AlignmentXExtendedDictionaryType };
-  alignmentY?: AlignmentYExtendedDictionaryType | { [key: string]: AlignmentYExtendedDictionaryType };
+  alignmentX?: GridAlignmentXType;
+  alignmentY?: GridAlignmentYType;
   cols?: GridColumns | GridColsBreakpoints;
   /** Custom spacing between items */
   spacing?: SpaceToken | Partial<Record<BreakpointToken, SpaceToken>>;