chore(cypress-commands): fix typedoc generation

package.json

@@ -31,12 +31,12 @@
     "create-cypress-commands-docs": "typedoc && rimraf temp/typedoc"
   },
   "dependencies": {
-    "@storybook/addon-a11y": "7.4.2",
-    "@storybook/addon-essentials": "7.4.2",
-    "@storybook/blocks": "7.4.2",
-    "@storybook/react": "7.4.2",
-    "@storybook/react-vite": "7.4.2",
-    "@storybook/theming": "7.4.2",
+    "@storybook/addon-a11y": "7.4.5",
+    "@storybook/addon-essentials": "7.4.5",
+    "@storybook/blocks": "7.4.5",
+    "@storybook/react": "7.4.5",
+    "@storybook/react-vite": "7.4.5",
+    "@storybook/theming": "7.4.5",
     "@ui5/webcomponents": "1.17.0",
     "@ui5/webcomponents-fiori": "1.17.0",
     "@ui5/webcomponents-icons": "1.17.0",
@@ -55,8 +55,8 @@
     "@semantic-release/github": "^9.0.0",
     "@testing-library/cypress": "^10.0.0",
     "@types/node": "^18.0.0",
-    "@types/react": "^18.0.6",
-    "@types/react-dom": "^18.0.0",
+    "@types/react": "^18.2.23",
+    "@types/react-dom": "^18.2.7",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "@ui5/webcomponents-tools": "1.17.0",
@@ -75,7 +75,7 @@
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.11",
+    "eslint-plugin-storybook": "^0.6.14",
     "handlebars": "^4.7.7",
     "husky": "^8.0.0",
     "identity-obj-proxy": "^3.0.0",
@@ -87,8 +87,9 @@
     "postcss-import": "^15.1.0",
     "postcss-modules": "^6.0.0",
     "prettier": "^3.0.0",
+    "react-textarea-autosize": "^8.5.3",
     "rimraf": "^5.0.0",
-    "storybook": "7.4.2",
+    "storybook": "7.4.5",
     "turndown": "^7.0.0",
     "typedoc": "^0.25.0",
     "typescript": "5.2.2",

packages/cypress-commands/tsconfig.typedoc.json

@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "."
+  },
+  "include": ["src", "CommandsAndQueries.tsx"]
+}

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

@@ -200,6 +200,8 @@ const resizeObserverEntryWidth = (entry) => {
   return entry.target.getBoundingClientRect().width;
 };
 
+type ReactKeyWithoutBigInt = string | number;
+
 const useStyles = createUseStyles(styles, { name: 'FilterBar' });
 /**
  * The `FilterBar` displays filters in a user-friendly manner to populate values for a query. It consists of a row containing the `VariantManagement` or a title, the related buttons, and an area underneath displaying the filters. The filters are arranged in a logical row that is divided depending on the space available and the width of the filters. The area containing the filters can be hidden or shown using the "Hide FilterBar / Show FilterBar" button, the "Filters" button shows the filter dialog.
@@ -279,12 +281,13 @@ const FilterBar = forwardRef<HTMLDivElement, FilterBarPropTypes>((props, ref) =>
   useEffect(() => {
     Children.toArray(children).forEach((item) => {
       if (isValidElement(item)) {
+        const key = item.key as ReactKeyWithoutBigInt;
         setToggledFilters((prev) => {
-          if (!item.props.hasOwnProperty('visibleInFilterBar') && prev?.[item.key] === undefined) {
-            return { ...prev, [item.key]: true };
+          if (!item.props.hasOwnProperty('visibleInFilterBar') && prev?.[key] === undefined) {
+            return { ...prev, [key]: true };
           }
           if (item.props.hasOwnProperty('visibleInFilterBar')) {
-            return { ...prev, [item.key]: item.props.visibleInFilterBar };
+            return { ...prev, [key]: item.props.visibleInFilterBar };
           }
           return prev;
         });
@@ -365,11 +368,14 @@ const FilterBar = forwardRef<HTMLDivElement, FilterBarPropTypes>((props, ref) =>
   const safeChildren = () => {
     if (Object.keys(toggledFilters).length > 0) {
       return Children.toArray(children).map((child) => {
-        if (isValidElement(child) && toggledFilters?.[child.key] !== undefined) {
-          // @ts-expect-error: child should always be a FilterGroupItem w/o portal
-          return cloneElement<FilterGroupItemPropTypes, HTMLDivElement>(child, {
-            visibleInFilterBar: toggledFilters[child.key]
-          });
+        if (isValidElement(child)) {
+          const key = child.key as ReactKeyWithoutBigInt;
+          if (toggledFilters?.[key] !== undefined) {
+            // @ts-expect-error: child should always be a FilterGroupItem w/o portal
+            return cloneElement<FilterGroupItemPropTypes, HTMLDivElement>(child, {
+              visibleInFilterBar: toggledFilters[key]
+            });
+          }
         }
         return child;
       });
@@ -389,17 +395,18 @@ const FilterBar = forwardRef<HTMLDivElement, FilterBarPropTypes>((props, ref) =>
         return item?.props?.visible && item.props?.visibleInFilterBar;
       })
       .map((child) => {
+        const key = child.key as ReactKeyWithoutBigInt;
         // necessary because of varying widths of input elements
         if (filterContainerWidth) {
           childProps.style = { width: filterContainerWidth, ...child.props.style };
         }
         if (hideFilterConfiguration) {
           return cloneElement(child, { ...childProps });
         }
-        prevVisibleInFilterBarProps.current[child.key] = child.props.visibleInFilterBar;
+        prevVisibleInFilterBarProps.current[key] = child.props.visibleInFilterBar;
         let filterItemProps = {};
         if (Object.keys(dialogRefs).length > 0) {
-          const dialogItemRef = dialogRefs[child.key];
+          const dialogItemRef = dialogRefs[key];
           if (dialogItemRef) {
             filterItemProps = filterValue(dialogItemRef, child);
           }
@@ -410,22 +417,22 @@ const FilterBar = forwardRef<HTMLDivElement, FilterBarPropTypes>((props, ref) =>
           });
         }
         if (
-          prevChildren.current?.[child.key] &&
+          prevChildren.current?.[key] &&
           //Input
-          (child.props.children?.props?.value !== prevChildren.current?.[child.key]?.value ||
+          (child.props.children?.props?.value !== prevChildren.current?.[key]?.value ||
             //Checkbox
-            child.props.children?.props?.checked !== prevChildren.current?.[child.key]?.checked ||
+            child.props.children?.props?.checked !== prevChildren.current?.[key]?.checked ||
             //Selectable
             (Array.isArray(child.props.children?.props?.children) &&
               child.props.children?.props?.children?.map((item) => item.props.selected).join(',') !==
-                prevChildren?.current?.[child.key]?.children?.map((item) => item.props.selected).join(',')))
+                prevChildren?.current?.[key]?.children?.map((item) => item.props.selected).join(',')))
         ) {
           // eslint-disable-next-line @typescript-eslint/ban-ts-comment
           // @ts-ignore
           const { [child.key]: _omit, ...rest } = dialogRefs;
           setDialogRefs(rest);
         }
-        prevChildren.current[child.key] = child.props.children.props;
+        prevChildren.current[key] = child.props.children.props;
 
         return cloneElement(child, {
           ...childProps,
@@ -436,7 +443,7 @@ const FilterBar = forwardRef<HTMLDivElement, FilterBarPropTypes>((props, ref) =>
               ...filterItemProps
             },
             ref: (node) => {
-              filterRefs.current[child.key] = node;
+              filterRefs.current[key] = node;
               if (!dialogOpen) syncRef(child.props.children.ref, node);
             }
           }

packages/main/src/components/Grid/Grid.cy.tsx

@@ -108,9 +108,8 @@ describe('Grid', () => {
     );
     cy.findByTestId('grid').should('have.css', 'grid-row-gap', '42px').should('have.css', 'grid-column-gap', '7px');
   });
-
-  it('position', () => {
-    [...Object.values(GridPosition), undefined].forEach((pos) => {
+  [...Object.values(GridPosition), undefined].forEach((pos: GridPosition | undefined) => {
+    it(`position-${pos}`, () => {
       cy.mount(
         <div style={{ width: '400px' }}>
           <Grid data-testid="grid" position={pos} style={{ width: '200px' }}>
@@ -120,15 +119,22 @@ describe('Grid', () => {
       );
       switch (pos) {
         case 'Center':
-          cy.findByTestId('grid')
-            .should('have.css', 'margin-left', '100px')
-            .should('have.css', 'margin-right', '100px');
+          cy.findByTestId('grid').should('satisfy', ($el) => {
+            const classList = Array.from($el[0].classList);
+            return classList.some((item) => item.includes('positionCenter'));
+          });
           break;
         case 'Right':
-          cy.findByTestId('grid').should('have.css', 'margin-left', '200px').should('have.css', 'margin-right', '0px');
+          cy.findByTestId('grid').should('satisfy', ($el) => {
+            const classList = Array.from($el[0].classList);
+            return classList.some((item) => item.includes('positionRight'));
+          });
           break;
         default:
-          cy.findByTestId('grid').should('have.css', 'margin-left', '0px').should('have.css', 'margin-right', '0px');
+          cy.findByTestId('grid').should('satisfy', ($el) => {
+            const classList = Array.from($el[0].classList);
+            return classList.every((item) => !item.includes('position'));
+          });
           break;
       }
     });

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

@@ -13,11 +13,9 @@ export const styles = {
   },
   ...generateGridSpans(),
   positionCenter: {
-    marginLeft: 'auto',
-    marginRight: 'auto'
+    marginInline: 'auto'
   },
   positionRight: {
-    marginLeft: 'auto',
-    marginRight: 0
+    marginInline: 'auto 0px'
   }
 };

typedoc.json

@@ -1,6 +1,7 @@
 {
   "$schema": "https://typedoc.org/schema.json",
   "entryPoints": ["packages/cypress-commands"],
+  "tsconfig": "./packages/cypress-commands/tsconfig.typedoc.json",
   "entryPointStrategy": "expand",
   "out": "temp/typedoc",
   "exclude": ["**/dist/**/*", "**/test/**/*"],

vite.config.ts

@@ -29,6 +29,11 @@ export default defineConfig(() => {
       tsconfigPaths({
         projects: [fileURLToPath(new URL('tsconfig.base.json', import.meta.url))]
       })
-    ].filter(Boolean)
+    ].filter(Boolean),
+    server: {
+      watch: {
+        ignored: ['**/packages/cra-template/**', '**/packages/cra-template-seed/**']
+      }
+    }
   };
 });