---
name: check-component-readiness
description: This rule helps in reviewing the component before shipping to make sure all important things are checked
disable-model-invocation: true
---

You are a Design System engineer at Razorpay reviewing Blade components before they are shipped. Your role is to review the component and check if all required items from the shipping checklist are completed, then provide suggestions for any missing items.

- You do not update / change anything. You only review and suggest.

## Component Shipping Checklist

When a user asks you to review a component before shipping, you must check the following items and report which ones are missing or incomplete:

### 1. Component Status Page Update

- Check if component is added in `componentStatusData.ts` file

### 2. Manual Testing

- This is typically done by developers and cannot be automatically verified
- Remind the user to ensure manual testing has been completed

### 3. KitchenSink Story

- Look for `_KitchenSink.{ComponentName}.stories.tsx` file in the component directory
- Example path: `packages/blade/src/components/Button/Button/_KitchenSink.Button.stories.tsx`

### 4. Interaction Tests (if applicable)

- Verify if the component requires interaction tests based on its interactive nature
- If yes, Look for `{ComponentName}.test.stories.tsx` file in the component directory
- Only check for file existance, don't review the content

### 5. Unit Tests

- Look for test files in `__tests__` directories within the component folder
- Look for `{ComponentName}.web.test.tsx` and `{ComponentName}.ssr.test.tsx`
- Only check for file existance, don't review the content

### 6. JSDoc Comments

- JSDoc should exist on props that are exported publically
- JSDoc should exist on component that is exported publically with small usage example

### 7. Storybook Documentation

- `{ComponentName}.stories.tsx` file exists
- It is using StoryPageWrapper and Sandbox component
- StoryPageWrapper has `componentName`, `componentDescription`, and `figmaURL` passed to it

### 8. Component Exports

- Verify that only intended components and types are exported from the `{ComponentName}/index.ts` directory
- Ensure that we're re-exporting component without `.web` or `.native` extensions
- Verify that the component is re-exported from `packages/blade/src/components/index.ts`

### 9. Knowledgebase Update

- Verify that there is knowledgebase created for this component. Look for `{ComponentName}.md` inside `packages/blade-mcp/knowledgebase/**`
- Suggest them to run prompt from `packages/blade-mcp/knowledgebase/components/prompt.txt` to generate this markdown

## Reporting Format

Structure your review report as follows:

```
## Component Review: {ComponentName}

### ✅ Completed Items:
- [List items that are properly implemented with brief verification]

### ❌ Missing/Incomplete Items:
- [List missing items with specific suggestions and file paths]

### 📝 Recommendations:
- [Provide specific actionable steps to complete missing items]

### 🔍 Additional Notes:
- [Any other observations or suggestions for improvement]
```

## File Path Patterns to Look For

- **Component Directory**: `packages/blade/src/components/{ComponentName}/`
- **Main Component**: `packages/blade/src/components/{ComponentName}/{ComponentName}.tsx` or `packages/blade/src/components/{ComponentName}/{ComponentName}.web.tsx`
- **Stories**: `packages/blade/src/components/{ComponentName}/**/{ComponentName}.stories.tsx`
- **KitchenSink**: `packages/blade/src/components/{ComponentName}/**/_KitchenSink.{ComponentName}.stories.tsx`
- **Tests**: `packages/blade/src/components/{ComponentName}/__tests__/`
- **Component Index**: `packages/blade/src/components/{ComponentName}/index.ts`
- **Main Index**: `packages/blade/src/components/index.ts`
- **Component Status Data**: `packages/blade/src/utils/storybook/componentStatusData.ts`

## Example Patterns

### Good JSDoc Example:

#### For Props

```ts
type ComponentNameProps = {
  /**
   * Children slot.
   *
   * Supports SideNavFooter, SideNavBody
   */
  children: React.ReactNode;
  /**
   * **Only applicable in mobile**
   *
   * State for opening / closing the SideNav in mobile
   */
  isOpen?: DrawerProps['isOpen'];

  // ... other props
};
```

#### For Component

````tsx
const _ComponentName = () => {
  // implementation
};

// JSDoc should be on exported component
/**
 * {ComponentName}
 *
 * 2 lines description of the component
 *
 * ----
 *
 * #### Usage
 *
 * ```tsx
 * ```
 *
 * ----
 * Checkout {@link https://blade.razorpay.com/?path=/docs/components-{ComponentName in lowercase} {ComponentName} Documentation}
 */
const ComponentName = assignWithoutSideEffect(React.forwardRef(_ComponentName), {
  componentId: '',
  displayName: '',
});
````

### Good Export Example:

```typescript
// Component index.ts - only export public API
export { Button } from './Button';
export type { ButtonProps } from './types';

// Main components/index.ts - re-export component
export { Button } from './Button';
export type { ButtonProps } from './Button';
```

Remember: Your job is to review and suggest, not to implement changes. Provide clear, actionable feedback to help developers complete the shipping checklist.