chore(prettier): enable trailing commas (#7330)

Also changes the `prettier.config` file to ES Module and adds it to the
`tsconfig`.

Author: Lukas742

eslint.config.mjs

@@ -12,6 +12,7 @@ import tseslint from 'typescript-eslint';
 
 const ignorePatterns = {
   ignores: [
+    'packages/ai/dist',
     'packages/base/dist',
     'packages/base/types',
     'packages/charts/dist',
@@ -22,13 +23,14 @@ const ignorePatterns = {
     'packages/main/src/i18n/i18n-defaults.ts',
     'packages/main/src/generated',
     'packages/cypress-commands/dist',
+    '**/generated',
     '**/scripts',
     '**/shared',
     '**/examples',
     '**/templates',
     '**/*.module.css.ts',
-    '.yarn'
-  ]
+    '.yarn',
+  ],
 };
 
 const config = tseslint.config(
@@ -46,14 +48,14 @@ const config = tseslint.config(
   // eslint-plugin-react-hooks
   {
     plugins: {
-      'react-hooks': reactHooksPlugin
+      'react-hooks': reactHooksPlugin,
     },
-    rules: reactHooksPlugin.configs.recommended.rules
+    rules: reactHooksPlugin.configs.recommended.rules,
   },
   {
     languageOptions: {
       globals: {
-        ...globals.browser
+        ...globals.browser,
       },
 
       ecmaVersion: 'latest',
@@ -63,15 +65,15 @@ const config = tseslint.config(
         projectService: {
           allowDefaultProject: ['packages/*/postcss.config.mjs'],
           // eslint-disable-next-line camelcase
-          maximumDefaultProjectFileMatchCount_THIS_WILL_SLOW_DOWN_LINTING: 1000
-        }
-      }
+          maximumDefaultProjectFileMatchCount_THIS_WILL_SLOW_DOWN_LINTING: 1000,
+        },
+      },
     },
 
     settings: {
       react: {
-        version: 'detect'
-      }
+        version: 'detect',
+      },
     },
 
     rules: {
@@ -89,9 +91,9 @@ const config = tseslint.config(
             'sap_horizon',
             'sap_horizon_dark',
             'sap_horizon_hcb',
-            'sap_horizon_hcw'
-          ]
-        }
+            'sap_horizon_hcw',
+          ],
+        },
       ],
 
       'import/order': [
@@ -101,25 +103,25 @@ const config = tseslint.config(
 
           alphabetize: {
             order: 'asc',
-            caseInsensitive: true
-          }
-        }
+            caseInsensitive: true,
+          },
+        },
       ],
 
       'import/no-duplicates': 'error',
       'import/no-unresolved': 'off',
 
       // recommended eslint rules
-      'no-extra-boolean-cast': 'warn'
-    }
+      'no-extra-boolean-cast': 'warn',
+    },
   },
   {
     files: ['**/*.ts', '**/*.tsx'],
 
     settings: {
       'import/resolver': {
-        typescript: true
-      }
+        typescript: true,
+      },
     },
 
     rules: {
@@ -136,16 +138,16 @@ const config = tseslint.config(
       '@typescript-eslint/consistent-type-exports': [
         'error',
         {
-          fixMixedExportsWithInlineTypeSpecifier: false
-        }
+          fixMixedExportsWithInlineTypeSpecifier: false,
+        },
       ],
 
       '@typescript-eslint/consistent-type-imports': [
         'error',
         {
           prefer: 'type-imports',
-          fixStyle: 'separate-type-imports'
-        }
+          fixStyle: 'separate-type-imports',
+        },
       ],
 
       '@typescript-eslint/no-floating-promises': 'warn',
@@ -155,55 +157,55 @@ const config = tseslint.config(
         {
           varsIgnorePattern: '^_',
           argsIgnorePattern: '^_',
-          caughtErrorsIgnorePattern: '^_'
-        }
+          caughtErrorsIgnorePattern: '^_',
+        },
       ],
 
       'import/named': 'off',
       'import/namespace': 'off',
       'import/default': 'off',
-      'import/no-named-as-default-member': 'off'
-    }
+      'import/no-named-as-default-member': 'off',
+    },
   },
   {
     files: ['**/*.mjs'],
-    ...tseslint.configs.disableTypeChecked
+    ...tseslint.configs.disableTypeChecked,
   },
   {
     files: [
       'packages/main/src/webComponents/*/index.tsx',
       'packages/compat/src/components/TableCell/index.tsx',
-      'packages/compat/src/components/TableGroupRow/index.tsx'
+      'packages/compat/src/components/TableGroupRow/index.tsx',
     ],
 
     rules: {
-      '@typescript-eslint/no-empty-object-type': 'off'
-    }
+      '@typescript-eslint/no-empty-object-type': 'off',
+    },
   },
   {
     files: [
       'packages/main/src/components/AnalyticalTable/defaults/**/*.tsx',
       'packages/main/src/components/AnalyticalTable/hooks/*.ts',
       'packages/main/src/components/AnalyticalTable/hooks/*.tsx',
-      'packages/main/src/components/AnalyticalTable/TableBody/VirtualTableBodyContainer.tsx'
+      'packages/main/src/components/AnalyticalTable/TableBody/VirtualTableBodyContainer.tsx',
     ],
 
     rules: {
-      'react/prop-types': 'off'
-    }
+      'react/prop-types': 'off',
+    },
   },
   {
     files: ['cypress/**/*'],
 
     rules: {
-      '@typescript-eslint/no-namespace': 'off'
-    }
+      '@typescript-eslint/no-namespace': 'off',
+    },
   },
   {
     files: ['**/*.cy.ts', '**/*.cy.tsx'],
 
     plugins: {
-      'no-only-tests': noOnlyTests
+      'no-only-tests': noOnlyTests,
     },
 
     rules: {
@@ -212,8 +214,8 @@ const config = tseslint.config(
       'react/no-unescaped-entities': 'off',
       '@typescript-eslint/unbound-method': 'warn',
       'react/display-name': 'off',
-      'no-only-tests/no-only-tests': 'error'
-    }
+      'no-only-tests/no-only-tests': 'error',
+    },
   },
 
   // Storybook
@@ -223,8 +225,8 @@ const config = tseslint.config(
     rules: {
       'react/prop-types': 'off',
       '@typescript-eslint/no-unused-vars': 'warn',
-      'react/no-unescaped-entities': 'off'
-    }
+      'react/no-unescaped-entities': 'off',
+    },
   },
 
   // no-restricted-imports rule for compat package
@@ -238,16 +240,16 @@ const config = tseslint.config(
             {
               name: '@ui5/webcomponents-react',
               message:
-                "Please use deep imports from @ui5/webcomponents-react. Example: import { Button } from '@ui5/webcomponents-react/dist/webComponents/Button/index.js';"
-            }
-          ]
-        }
-      ]
-    }
+                "Please use deep imports from @ui5/webcomponents-react. Example: import { Button } from '@ui5/webcomponents-react/dist/webComponents/Button/index.js';",
+            },
+          ],
+        },
+      ],
+    },
   },
 
   // prettier plugin must be the last entry in the config!
-  prettierPlugin
+  prettierPlugin,
 );
 
 export default config;

package.json

@@ -18,7 +18,7 @@
     "test": "yarn test:prepare && cypress run --component --browser chrome",
     "clean": "tsc --build --clean && tsc --build tsconfig.build.json --clean && rimraf temp .out && lerna run clean",
     "clean:remove-modules": "yarn clean && rimraf node_modules",
-    "prettier:all": "prettier --write --config ./prettier.config.cjs \"packages/**/*.{js,jsx,ts,tsx,mdx,json,md}\"",
+    "prettier:all": "prettier --write --config ./prettier.config.js \"packages/**/*.{js,jsx,ts,tsx,mdx,json,md,mjs,cjs}\"",
     "lint": "eslint packages",
     "lerna:version-dryrun": "lerna version --conventional-graduate --no-git-tag-version --no-push",
     "wrappers:main": "node packages/cli/dist/bin/index.js create-wrappers --packageName @ui5/webcomponents --out ./packages/main/src/webComponents --additionalComponentNote 'This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)'",

packages/ai/src/components/Button/Button.stories.tsx

@@ -14,12 +14,12 @@ const meta = {
   title: 'Button',
   component: Button,
   argTypes: {
-    children: { control: 'text' }
+    children: { control: 'text' },
   },
   args: {
-    design: ButtonDesign.Default
+    design: ButtonDesign.Default,
   },
-  tags: ['package:@ui5/webcomponents-ai']
+  tags: ['package:@ui5/webcomponents-ai'],
 } satisfies Meta<typeof Button>;
 
 export default meta;
@@ -106,5 +106,5 @@ export const Default: Story = {
         )}
       </>
     );
-  }
+  },
 };

packages/ai/src/components/Button/index.tsx

@@ -100,7 +100,7 @@ const Button = withWebComponent<ButtonPropTypes, ButtonDomRef>(
   ['design', 'state'],
   ['arrowButtonPressed', 'disabled'],
   [],
-  ['arrow-button-click', 'click']
+  ['arrow-button-click', 'click'],
 );
 
 Button.displayName = 'Button';

packages/ai/src/components/ButtonState/index.tsx

@@ -73,7 +73,7 @@ const ButtonState = withWebComponent<ButtonStatePropTypes, ButtonStateDomRef>(
   ['endIcon', 'icon', 'name', 'text'],
   ['showArrowButton'],
   [],
-  []
+  [],
 );
 
 ButtonState.displayName = 'ButtonState';

packages/ai/src/components/PromptInput/PromptInput.stories.tsx

@@ -7,12 +7,12 @@ const meta = {
   component: PromptInput,
   argTypes: {
     children: { control: { disable: true } },
-    valueStateMessage: { control: { disable: true } }
+    valueStateMessage: { control: { disable: true } },
   },
   args: {
-    valueState: ValueState.None
+    valueState: ValueState.None,
   },
-  tags: ['package:@ui5/webcomponents-ai']
+  tags: ['package:@ui5/webcomponents-ai'],
 } satisfies Meta<typeof PromptInput>;
 
 export default meta;

packages/ai/src/components/PromptInput/index.tsx

@@ -185,7 +185,7 @@ const PromptInput = withWebComponent<PromptInputPropTypes, PromptInputDomRef>(
   ['label', 'maxlength', 'placeholder', 'value', 'valueState'],
   ['disabled', 'readonly', 'showClearIcon', 'showExceededText', 'showSuggestions'],
   ['valueStateMessage'],
-  ['change', 'input', 'submit']
+  ['change', 'input', 'submit'],
 );
 
 PromptInput.displayName = 'PromptInput';

packages/base/src/Device/Media.cy.tsx

@@ -7,7 +7,7 @@ describe('Device - Media', () => {
     expect(getCurrentRange()).to.deep.equal({
       from: 1440,
       name: 'LargeDesktop',
-      unit: 'px'
+      unit: 'px',
     });
   });
 
@@ -16,7 +16,7 @@ describe('Device - Media', () => {
       from: 0,
       name: 'Phone',
       to: 599,
-      unit: 'px'
+      unit: 'px',
     });
   });
 

packages/base/src/Device/Media.ts

@@ -10,14 +10,14 @@ const RANGE_DEFINITIONS: Record<RANGE_4_STEPS, [number, number]> = {
   S: [0, 599],
   M: [600, 1023],
   L: [1024, 1439],
-  XL: [1440, -1]
+  XL: [1440, -1],
 };
 
 const newRangeToLegacyRangeMap: Record<RANGE_4_STEPS, RANGE_LEGACY_4_STEPS> = {
   S: 'Phone',
   M: 'Tablet',
   L: 'Desktop',
-  XL: 'LargeDesktop'
+  XL: 'LargeDesktop',
 };
 
 function getQuery(from: number, to: number) {
@@ -35,7 +35,7 @@ function resolveRangeInfo(name: RANGE_4_STEPS): RangeInfo {
   const params: RangeInfo = {
     from: RANGE_DEFINITIONS[name][0],
     name: newRangeToLegacyRangeMap[name],
-    unit: 'px'
+    unit: 'px',
   };
   if (RANGE_DEFINITIONS[name][1] > 0) {
     params.to = RANGE_DEFINITIONS[name][1];
@@ -51,7 +51,7 @@ function initMediaQueries() {
       S: window.matchMedia(getQuery(...RANGE_DEFINITIONS.S)),
       M: window.matchMedia(getQuery(...RANGE_DEFINITIONS.M)),
       L: window.matchMedia(getQuery(...RANGE_DEFINITIONS.L)),
-      XL: window.matchMedia(getQuery(...RANGE_DEFINITIONS.XL))
+      XL: window.matchMedia(getQuery(...RANGE_DEFINITIONS.XL)),
     };
 
     for (const mediaQueriesKey in mediaQueries) {
@@ -74,7 +74,7 @@ export const getCurrentRange = (width?: number): RangeInfo => {
       from: 1024,
       to: 1439,
       name: 'Desktop',
-      unit: 'px'
+      unit: 'px',
     };
   }
   // @ts-expect-error: width can only be undefined or a number, therefore `isNaN` works here