component-file-structure

a folder created for a component that bundles no utilities, types or constants

Agent checkadvisory by defaultreactcode

The argument

Component File Structure

The graduation rule applied to components: a component is a single .tsx file until it has private companions — utilities, types, or constants of its own — and graduates to a folder only then.

components/
├── StatusBadge.tsx                  ✅ Single file (the default)
├── InstallPanel/                    ✅ Graduated: it bundles private companions
│   ├── common/
│   │   └── utils/
│   │       └── getInstallStepLabel.ts
│   └── InstallPanel.tsx

The folder's inside is the ordinary fractal skeleton: companions live under common/, and callers import the component from InstallPanel/InstallPanel.tsx itself — a folder carries no index.ts (folder-index-file rule). A folder holding only Component.tsx bundles nothing and should be the single file — the single-file folder rule, applied to a component.

The proof

failsrc/components/StatusBadge/StatusBadge.tsx

interface Props {
	status: 'connected' | 'notInstalled';
}

// A folder and a barrel around a component that bundles no utilities, types or
// constants — the folder is the default only once there is something to bundle.
export const StatusBadge = ({ status }: Props) => <span className={status}>{status}</span>;

pass

export const getInstallStepLabel = ({ step }: { step: number }): string => `Step ${step} of 4`;

Turn it down

Both lines go in your lightsout.config.json.

"standards-checks": { "component-file-structure": "advisory" }

"standards-checks": { "component-file-structure": "off" }