WCPay client component structure.md

client/components/component
├── index.tsx - the root of the component lives here.
├── large-child-component - for components that are used only in the parent component, but are large enough to require separate styles and tests, assisting with merge conflicts.
│   ├── index.tsx
│   ├── style.scss
│   └── test
│       └── index.test.tsx
├── small-child-component.tsx - for components that are used only in the parent component, but are small enough to share style and unit test files with the parent.
├── strings.ts - for defining translatable strings used throughout this component and children.
├── style.scss - styles specific to this component and children.
├── types.d.ts - for TS types that are shared within the component's files. Try to use/expand on types higher up the tree where suitable.
├── test
│   ├── index.test.tsx - unit tests for the parent component.
│   └── utils.test.ts - unit tests for the utils.ts
└── utils.ts - for encapsulating functions and logic that is specific to this component. Using this encourages smaller pure functions.