opentrons React Component Creation Checklist
General TypeScript, React, styling, testing, and import conventions are in the opentrons-typescript skill. PD-specific architecture is in the protocol-designer skill. CSS Modules details are in the css-modules skill. This file covers the component creation workflow and opentrons-ai-client specifics.
Before Creating a New Component
- Consider the component's purpose, functionality, and design
- Check if a similar component already exists in:
components/src/atoms/,components/src/molecules/,components/src/organisms/(shared library)<project>/src/components/atoms/,molecules/,organisms/(project-local)
- If an existing component can be extended or composed, prefer that over creating a new one
Component File Structure
ComponentName/
├── index.tsx
├── componentname.module.css
└── __tests__/
└── ComponentName.test.tsx
opentrons-ai-client Specifics
Path Alias
The ai-client uses /ai-client/ as its path alias (mapped to opentrons-ai-client/src/):
import { AttachedFileItem } from '/ai-client/atoms/AttachedFileItem'
import type { ChatData } from '/ai-client/resources/types'
Testing
Use renderWithProviders from the ai-client testing utils:
import { renderWithProviders } from '/ai-client/__testing-utils__'
Running Tests
pnpm vitest opentrons-ai-client/src/path/to/file
pnpm vitest opentrons-ai-client/src/folder/
Running Stylelint
pnpm stylelint opentrons-ai-client/src/path/to/file.module.css