refactor(FlexBox): migrate from react-jss to css modules

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

@@ -0,0 +1,84 @@
+.flexBox {
+  display: flex;
+
+  &:where(.fitContainer) {
+    width: 100%;
+    height: 100%;
+  }
+
+  /*justify*/
+
+  &:where(.justifyContentStart) {
+    justify-content: flex-start;
+  }
+
+  &:where(.justifyContentEnd) {
+    justify-content: flex-end;
+  }
+
+  &:where(.justifyContentCenter) {
+    justify-content: center;
+  }
+
+  &:where(.justifyContentSpaceAround) {
+    justify-content: space-around;
+  }
+
+  &:where(.justifyContentSpaceBetween) {
+    justify-content: space-between;
+  }
+
+  /*align*/
+
+  &:where(.alignItemsStart) {
+    align-items: flex-start;
+  }
+
+  &:where(.alignItemsEnd) {
+    align-items: flex-end;
+  }
+
+  &:where(.alignItemsCenter) {
+    align-items: center;
+  }
+
+  &:where(.alignItemsStretch) {
+    align-items: stretch;
+  }
+
+  &:where(.alignItemsBaseline) {
+    align-items: baseline;
+  }
+}
+
+.flexBoxDisplayInline {
+  display: inline-flex;
+}
+
+.flexBoxDirectionColumn {
+  flex-direction: column;
+}
+
+.flexBoxDirectionColumnReverse {
+  flex-direction: column-reverse;
+}
+
+.flexBoxDirectionRow {
+  flex-direction: row;
+}
+
+.flexBoxDirectionRowReverse {
+  flex-direction: row-reverse;
+}
+
+.flexWrapNoWrap {
+  flex-wrap: nowrap;
+}
+
+.flexWrapWrap {
+  flex-wrap: wrap;
+}
+
+.flexWrapWrapReverse {
+  flex-wrap: wrap-reverse;
+}

packages/main/src/components/FlexBox/index.tsx

@@ -1,14 +1,12 @@
 'use client';
 
+import { useStylesheet } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
 import type { ElementType, ReactNode } from 'react';
 import React, { forwardRef } from 'react';
-import { createUseStyles } from 'react-jss';
 import { FlexBoxAlignItems, FlexBoxDirection, FlexBoxJustifyContent, FlexBoxWrap } from '../../enums/index.js';
 import type { CommonProps } from '../../types/index.js';
-import { styles } from './FlexBox.jss.js';
-
-const useStyles = createUseStyles(styles, { name: 'FlexBox' });
+import { classNames, styleData } from './FlexBox.module.css.js';
 
 export interface FlexBoxPropTypes extends CommonProps {
   /**
@@ -70,15 +68,15 @@ const FlexBox = forwardRef<HTMLDivElement, FlexBoxPropTypes>((props, ref) => {
     ...rest
   } = props;
 
-  const classes = useStyles();
+  useStylesheet(styleData, FlexBox.displayName);
   const flexBoxClasses = clsx(
-    classes.flexBox,
-    classes[`flexBoxDirection${direction}`],
-    classes[`justifyContent${justifyContent}`],
-    classes[`alignItems${alignItems}`],
-    classes[`flexWrap${wrap}`],
-    displayInline && classes.flexBoxDisplayInline,
-    fitContainer && classes.fitContainer,
+    classNames.flexBox,
+    classNames[`flexBoxDirection${direction}`],
+    classNames[`justifyContent${justifyContent}`],
+    classNames[`alignItems${alignItems}`],
+    classNames[`flexWrap${wrap}`],
+    displayInline && classNames.flexBoxDisplayInline,
+    fitContainer && classNames.fitContainer,
     className
   );