Components Rules

Component props must be destructured in the function parameter

Why: Destructured props make it clear what props a component uses

export const Button = ({ label, onClick }) => (    <button onClick={onClick}>{label}</button>);

export const Button = (props) => (    <button onClick={props.onClick}>{props.label}</button>);

"code-style/component-props-destructure": "error"

Enforce inline type annotation for component props instead of interface reference

Why: Inline types keep prop definitions colocated with the component

export const Button = ({ label } : { label: string }) => (    <button>{label}</button>);

export const Button = ({ label }: ButtonPropsInterface) => (    <button>{label}</button>);

"code-style/component-props-inline-type": "error"

Enforce naming based on folder: suffix for views/layouts/pages/providers, camelCase for data/constants

Why: Consistent naming based on folder structure makes purpose immediately clear

Options

"code-style/folder-based-naming-convention": ["error", { chainOrder: "child-parent", files: [] }]

// views/dashboard.tsxexport const DashboardView = () => <div>Dashboard</div>;

// views/dashboard.tsxexport const Dashboard = () => <div>Dashboard</div>;

"code-style/folder-based-naming-convention": "error"

Enforce consistent folder structure (flat vs wrapped) in module folders

Why: Mixing flat files and wrapped folders creates inconsistency

Options

"code-style/folder-structure-consistency": ["error", { moduleFolders: (built-in list), extraModuleFolders: [] }]

atoms/input.tsxatoms/calendar.tsx

atoms/input.tsxatoms/calendar/index.tsxatoms/calendar/helpers.ts

"code-style/folder-structure-consistency": "error"

Disallow file/folder names that redundantly include the parent folder name as a suffix

Why: The folder already provides context, so the name doesn't need to repeat it

layouts/main.tsx

layouts/main-layout.tsx

"code-style/no-redundant-folder-suffix": "error"

SVG components must end with 'Icon' suffix; 'Icon' suffix components must return SVG

Why: Consistent naming makes it clear which components render icons

export const SuccessIcon = () => (    <svg><path d="M9 12l2 2 4-4" /></svg>);

export const Success = () => (    <svg><path d="M9 12l2 2 4-4" /></svg>);

"code-style/svg-icon-naming-convention": "error"