Transform codebase to Typescript

[bedrich-schindler]

We need to transform codebase from standard JavaScript to TypeScript. Inspiration can be found in private RACOM repositories where TypeScript is already used. If you use parts of configurations from RACOM repositories, it would be easier for you as we would not have to much comments on that.

We would like to use strict typings, so that any type is prohibited if not necessary.

---

Speaking of convention where to put type definitions. It seems the most practical for us to have structure of component like this:

• Directory <ComponentName>
  • File index.ts - exporting named export
  • File <ComponentName>.tsx - component itself
  • File <ComponentName>.types.ts - all types associated with component

If you thing that <ComponentName>.types.ts is not necessary, place type definitions into <ComponentName>.tsx before definition of component, but separate file seems more friendly to us (at least for now). You can of course look into other libraries like Material UI, Ant Design, ..., how they work with type definitions.

---

There is lot of props that are defined as enums. Like colors, variants, priorities etc. Those definitions should be placed in some global file (e.g. src/types.ts, src/definitions.d.ts, ...) , do not define them per components, we do not want to repeat those definitions in each component.

---

Speaking of "API" section in documentation. As @mbohal wrote in the email, do not try to fix "table of props". It will be solved by @mbohal in following issue as we use our custom documentation platform.

[bedrich-schindler]

After @mbohal's decision, I assigned @lukasbriza to this issue.

What we want now is to pull branch transform-typescript and rebase it onto master and resolve all conflicts as try to finish the transformation. As this was not touched in months/years, there might be a lot of changes and some files might be missing at all.

I would personally consider whether you are (@lukasbriza) able to rebase it or whether there is better way - e.g. start from current master and do it manually file-by-file by renaming and copying it manually. For this might be useful to open transform-typescript branch in Github editor (GitHub.dev) from where you can copy it simply. See: https://github.dev/react-ui-org/react-ui/tree/transform-typescript

I am just giving you suggestions as we are not aware about the state of transformation and might be better for you to start over.

Do not hesitate to ask us before deciding something as it might result in lot of work in later phase. With this being said, if you are not sure about something, I would suggest checking other UI libraries like Material UI (https://github.com/mui/material-ui/tree/master/packages/mui-base/src) where you can get inspiration. I can also recommend Spirit Design System (https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-react).

[mbohal]

Tahnk you @bedrich-schindler , I only have two points to add:

1. I think there are components that did not change in a significant way for years. In those cases I think it would be practical to use what has been done instead of rewriting. Of course there are other parts that are new or have changed a lot and starting anew is a better option.
2. I think the original transformation was done with help from chat GPT. I think this is a task where it could help, but it is up to @lukasbriza . I myself would explore this though.

[bedrich-schindler]

We talked about this with @adamkudrna and @lukasbriza and approved approach in which @lukasbriza can start from current master and can use already transformed parts from https://github.dev/react-ui-org/react-ui/tree/transform-typescript as rebasing would take longer than to start from the scratch.