refactor(Grid): migrate from react-jss to css modules (#5689)

Author: MarcusNotheis

packages/main/src/components/Grid/Grid.jss.ts

@@ -0,0 +1,60 @@
+.grid {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+}
+
+.gridSpan1 {
+  grid-column: span 1;
+}
+
+.gridSpan2 {
+  grid-column: span 2;
+}
+
+.gridSpan3 {
+  grid-column: span 3;
+}
+
+.gridSpan4 {
+  grid-column: span 4;
+}
+
+.gridSpan5 {
+  grid-column: span 5;
+}
+
+.gridSpan6 {
+  grid-column: span 6;
+}
+
+.gridSpan7 {
+  grid-column: span 7;
+}
+
+.gridSpan8 {
+  grid-column: span 8;
+}
+
+.gridSpan9 {
+  grid-column: span 9;
+}
+
+.gridSpan10 {
+  grid-column: span 10;
+}
+
+.gridSpan11 {
+  grid-column: span 11;
+}
+
+.gridSpan12 {
+  grid-column: span 12;
+}
+
+.positionCenter {
+  margin-inline: auto;
+}
+
+.positionRight {
+  margin-inline: auto 0;
+}

packages/main/src/components/Grid/Grid.module.css

@@ -1,14 +1,13 @@
 'use client';
 
-import { useViewportRange } from '@ui5/webcomponents-react-base';
+import { useStylesheet, useViewportRange } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
 import type { CSSProperties, ReactNode } from 'react';
 import React, { forwardRef, isValidElement } from 'react';
-import { createUseStyles } from 'react-jss';
 import { GridPosition } from '../../enums/index.js';
 import { flattenFragments } from '../../internal/utils.js';
 import type { CommonProps } from '../../types/index.js';
-import { styles } from './Grid.jss.js';
+import { classNames, styleData } from './Grid.module.css.js';
 
 export interface GridPropTypes extends CommonProps {
   /**
@@ -45,54 +44,55 @@ export interface GridPropTypes extends CommonProps {
   children?: ReactNode | ReactNode[];
 }
 
+type Range = 'Phone' | 'Tablet' | 'Desktop' | 'LargeDesktop';
+
 const INDENT_PATTERN =
   /^([X][L](?<LargeDesktop>[0-9]|1[0-2]))? ?([L](?<Desktop>[0-9]|1[0-2]))? ?([M](?<Tablet>[0-9]|1[0-2]))? ?([S](?<Phone>[0-9]|1[0-2]))?$/i;
 const SPAN_PATTERN =
   /^([X][L](?<LargeDesktop>[1-9]|1[0-2]))? ?([L](?<Desktop>[1-9]|1[0-2]))? ?([M](?<Tablet>[1-9]|1[0-2]))? ?([S](?<Phone>[1-9]|1[0-2]))?$/i;
 
-const DefaultSpanMap = new Map();
+const DefaultSpanMap = new Map<Range, number>();
 DefaultSpanMap.set('Phone', 1);
 DefaultSpanMap.set('Tablet', 2);
 DefaultSpanMap.set('Desktop', 4);
 DefaultSpanMap.set('LargeDesktop', 4);
 
-const DefaultIndentMap = new Map();
+const DefaultIndentMap = new Map<Range, number>();
 DefaultIndentMap.set('Phone', 0);
 DefaultIndentMap.set('Tablet', 0);
 DefaultIndentMap.set('Desktop', 0);
 DefaultIndentMap.set('LargeDesktop', 0);
 
-const getSpanFromString = (span, currentRange) => {
+const getSpanFromString = (span: string, currentRange: Range) => {
   const spanConfig = SPAN_PATTERN.exec(span);
-  return spanConfig?.groups[currentRange] ?? DefaultSpanMap.get(currentRange);
+  return Number(spanConfig?.groups[currentRange] ?? DefaultSpanMap.get(currentRange));
 };
 
-const getIndentFromString = (indent, currentRange) => {
+const getIndentFromString = (indent: string, currentRange: Range) => {
   const indentConfig = INDENT_PATTERN.exec(indent);
-  return indentConfig?.groups[currentRange] ?? DefaultIndentMap.get(currentRange);
+  return Number(indentConfig?.groups[currentRange] ?? DefaultIndentMap.get(currentRange));
 };
 
-const useStyles = createUseStyles(styles, { name: 'Grid' });
 /**
  * A layout container component used for aligning items with various sizes in a simple grid.
  */
 const Grid = forwardRef<HTMLDivElement, GridPropTypes>((props, ref) => {
   const { position, children, hSpacing, vSpacing, style, className, slot, defaultIndent, defaultSpan, ...rest } = props;
 
-  const classes = useStyles();
+  useStylesheet(styleData, Grid.displayName);
   const currentRange = useViewportRange();
   const gridClasses = clsx(
-    classes.grid,
-    GridPosition.Center === position && classes.positionCenter,
-    GridPosition.Right === position && classes.positionRight,
+    classNames.grid,
+    GridPosition.Center === position && classNames.positionCenter,
+    GridPosition.Right === position && classNames.positionRight,
     className
   );
 
   return (
     <div
       ref={ref}
       className={gridClasses}
-      style={{ gridRowGap: vSpacing, gridColumnGap: hSpacing, ...style }}
+      style={{ rowGap: vSpacing, columnGap: hSpacing, ...style }}
       slot={slot}
       {...rest}
     >
@@ -102,7 +102,7 @@ const Grid = forwardRef<HTMLDivElement, GridPropTypes>((props, ref) => {
         }
 
         const childSpan = getSpanFromString(child.props['data-layout-span'] ?? defaultSpan, currentRange);
-        const childClass = classes[`gridSpan${childSpan}`];
+        const childClass = classNames[`gridSpan${childSpan}`];
 
         const childrenWithGridLayout = [
           <div className={childClass} key={child.key}>
@@ -114,7 +114,7 @@ const Grid = forwardRef<HTMLDivElement, GridPropTypes>((props, ref) => {
         if (indentSpan && indentSpan > 0) {
           childrenWithGridLayout.unshift(
             <span
-              className={classes[`gridSpan${indentSpan}`]}
+              className={classNames[`gridSpan${indentSpan}`]}
               key={`${child.key}-indent`}
               data-component-name="GridIndentSpacer"
               aria-hidden="true"