Refactoring/transform typescript #602

lukasbriza · 2025-03-04T07:01:38Z

I tried to maintain the existing logic; however, for about two components, I had to implement a few additional things due to TypeScript. Please review and let me know if this works for you.

.eslintrc

src/components/Alert/Alert.types.ts

package.json

src/components/ButtonGroup/ButtonGroupContext.ts

src/components/Card/Card.types.ts

src/components/FormLayout/FormLayout.types.ts

src/components/Grid/GridSpan.types.ts

src/components/Grid/_helpers/generateResponsiveCustomProperties.ts

src/components/InputGroup/InputGroup.tsx

src/components/InputGroup/InputGroup.types.ts

src/components/Modal/_hooks/useModalFocus.ts

src/components/Popover/PopoverWrapper.types.ts

src/components/ScrollView/ScrollView.tsx

src/components/SelectField/SelectField.types.ts

atmelmicro · 2025-04-25T09:52:26Z

tsconfig.json

@@ -0,0 +1,35 @@
+{
+    "compilerOptions": {
+        "target": "es5",


Don't we want to target something newer? Targeting es5 will make the bundle larger.

@mbohal what we want to target on?

Honestly I have no idea. I think we should discuss it on our weekly meeting.

Lets leave it as es5 for now - that is the default and it is a safe value.

tsconfig.json

atmelmicro

If I am not mistaken docoff will need to be updated to support typescript. For now, I cant spin up the development server

I introduced Playwright Component Testing as replacement for Jest and RTL. Those tests must be run within `playwright` docker container with pre-installed browsers to ensure uniform testing environment. `.env.playwright` is created using `postinstall` script to follow zero-config setup. `.env.playwright` can be used to tweak parameters for local development if needed. `.env` newly contains Playwright related configuration for Docker. Currently, only tests for `Alert` and `Button` components are migrated to Playwright CT as this commit is supposed to be proof-of-concept. Rest should be migrated in later pull request. All visual tests use prop tests concept we already have for Jest to simplify testing and to make it DRY. `mixPropTests()` is introduced to mix those to create combinations to be tested. New Github workflow is introduced to test only Playwright as it can be time exhausting. Further improvements are expected to be make in the future.

Transform Playwright related files to Typescript and introduce temporary configuration files `.eslintrc-ts`, `jest.config-ts.js` and `tsconfig.json` that must be removed when whole package is transformed into Playwright. Due to missing TypeScript support in the rest of the package, `*.spec.tsx` and `*.story.tsx` file do not have complete types and might not be compatible with strict type checking that should be introduced in #394. The reason for such change is parallel work on transformation to TypeScript and on Playwright tests.

)

lukasbriza self-assigned this Mar 4, 2025

lukasbriza requested review from mbohal and bedrich-schindler as code owners March 4, 2025 07:01

github-actions bot added the refactoring label Mar 4, 2025

lukasbriza requested a review from atmelmicro April 22, 2025 11:10

bedrich-schindler changed the base branch from master to next April 24, 2025 12:31