.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.
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.
[component name]Propsand place it in the same file as the component.
ComponentPropsis the type described above.
React.MouseEventHandlerfor functions that handle clicks, etc.
uipackage should have Storybook stories and snapshot tests created for them.
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.
[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).
useTranslationhook. If you prefer, you can also use the
Transcomponent directly in the components, as long as they're not from the