Вложенные компоненты (references/nested-components.md)

Источник: ds-skills/core-ui-development-skills/src/skills/build-core-ui-components/references/nested-components.md — справочник скилла build-core-ui-components

src/my-widget/components/
├── index.ts
└── widget-header/
    ├── widget-header.tsx
    ├── types.ts
    ├── constants.ts        # при необходимости
    ├── styles.module.scss
    ├── index.ts
    ├── utils/              # при необходимости
    └── components/         # при необходимости

• Использовать kebab-case для директорий и файлов, PascalCase для компонента и типов.
• Создавать локальный index.ts у каждого компонента и агрегирующий components/index.ts.
• Хранить типы, константы, стили, утилиты и более мелкие компоненты внутри директории владельца.
• Импортировать вложенные компоненты в родителе через ./components.
• Не экспортировать внутренние компоненты из публичного src/my-widget/index.ts.
• Не создавать отдельные *.test.tsx для компонентов внутри components/.
• Проверять их поведение через публичный API и тесты основного компонента.
• Создавать отдельные unit-тесты для утилит вложенного компонента.
• Не допускать обратной зависимости вложенного компонента от основного.
• Выносить свойства вложенного компонента в API родителя только по правилам проброшенных свойств.
• Для самостоятельного публичного контракта отдельно согласовать экспорт, тесты и Storybook.
• При глубине более двух уровней components/ проверить декомпозицию.

// components/widget-header/index.ts
export { WidgetHeader } from "./widget-header";
export type { WidgetHeaderProps } from "./types";

// components/index.ts
export { WidgetHeader } from "./widget-header";
export type { WidgetHeaderProps } from "./widget-header";