Skill: Create New Component

Create a new React component following project conventions.

Usage

/new-component <ComponentName> [directory]

Prerequisites

This should typically be done as part of implementing a feature. Ensure:

• A feature file exists that requires this component
• Step definitions reference the component's behavior

Steps

1. Create the component file at src/components/{directory}/{ComponentName}.jsx
2. Use functional component with hooks
3. Define PropTypes for type checking
4. Export the component as default
5. Add data-testid attributes for acceptance testing

Template

jsx
1// src/components/{directory}/{ComponentName}.jsx
2
3import { useState } from 'react';
4import PropTypes from 'prop-types';
5
6function {ComponentName}({ prop1, prop2 }) {
7  // Component logic here
8
9  return (
10    <div data-testid="{component-name}">
11      {/* Component content */}
12    </div>
13  );
14}
15
16{ComponentName}.propTypes = {
17  prop1: PropTypes.string.isRequired,
18  prop2: PropTypes.number
19};
20
21{ComponentName}.defaultProps = {
22  prop2: 0
23};
24
25export default {ComponentName};

Naming Conventions

• Component files: PascalCase (StepEditor.jsx)
• Test IDs: kebab-case (data-testid="step-editor")
• CSS classes: kebab-case with BEM (step-editor__input)

Test ID Guidelines

Add data-testid attributes for elements that acceptance tests need to interact with:

jsx
1<button data-testid="add-step-button">Add Step</button>
2<input data-testid="step-name-input" />
3<div data-testid="metrics-dashboard">...</div>

Integration with Acceptance Tests

Components should be designed to support acceptance testing:

javascript
1// In step definitions
2When('I click the add step button', async function () {
3  const button = await this.page.$('[data-testid="add-step-button"]');
4  await button.click();
5});
6
7Then('I should see the step editor', async function () {
8  const editor = await this.page.$('[data-testid="step-editor"]');
9  expect(editor).to.exist;
10});