Converting to Typescript
Change the file extensions from
.tsas appropriate (
.tsxis for files containing JSX, so anything that has React markup). The directory for a component needs to be named the same as the component itself.
- Place their main code in
index.tsx, while the css need to be placed in
styles.scssin the same directory. Inside the component folder, there can be sub-components which make up the component higher up in the directory structure. Sometimes it's fine to place other small components in the same file as the main component too.
- Remove proptypes if they exist, and replace them with a Typescript type. Name it
[component name]Propsand place it in the same file as the component.
- The component's type should be
ComponentPropsis the type described above.
React.MouseEventHandlerfor functions that handle clicks, etc.
- All existing plain strings should be passed down to components as props.
- Components in the
uipackage should have Storybook stories and snapshot tests created for them.
Containers follow the same conventions as components, with the following additions:
- Hooks for the container need to be placed in
hooks.tsx, unless they include functionality that can be reused. If that's the case, put that hook in
packages/app/app/hooksin a file named like the hook itself.
- Do not use higher order components - prefer hooks.
- Avoid using CSS in containers.
[container name].test.tsxin the same directory as the container itself. Look at the existing tests to find out how to write them. Typically it involves mounting the container and simulating user interactions. Snapshots for these tests need to be placed in a
__snapshot__directory (this is the default that Jest uses).
- If the container uses forms, they should be placed in
- Containers should also handle accessing localized strings through
useTranslationhook. If you prefer, you can also use the
Transcomponent directly in the components, as long as they're not from the