/new-process-step <StepTypeName>

// src/data/stepTypes.js

export const STEP_TYPES = {
  PLANNING: 'planning',
  DEVELOPMENT: 'development',
  CODE_REVIEW: 'code_review',
  TESTING: 'testing',
  QA: 'qa',
  STAGING: 'staging',
  DEPLOYMENT: 'deployment',
  MONITORING: 'monitoring',
  CUSTOM: 'custom'
};

// src/components/canvas/nodes/{StepTypeName}Node.jsx

import { Handle, Position } from 'reactflow';
import PropTypes from 'prop-types';

function {StepTypeName}Node({ data }) {
  return (
    <div
      className="vsm-node vsm-node--{step-type}"
      data-testid="vsm-node-{step-type}"
    >
      <Handle type="target" position={Position.Left} />
      <div className="vsm-node__header">
        <span className="vsm-node__icon">{/* Icon */}</span>
        <span className="vsm-node__name">{data.name}</span>
      </div>
      <div className="vsm-node__metrics">
        <div>PT: {data.processTime}m</div>
        <div>LT: {data.leadTime}m</div>
        <div>%C&amp;A: {data.percentCompleteAccurate}%</div>
      </div>
      <Handle type="source" position={Position.Right} />
    </div>
  );
}

{StepTypeName}Node.propTypes = {
  data: PropTypes.shape({
    name: PropTypes.string.isRequired,
    processTime: PropTypes.number.isRequired,
    leadTime: PropTypes.number.isRequired,
    percentCompleteAccurate: PropTypes.number.isRequired
  }).isRequired
};

export default {StepTypeName}Node;

Feature: Development Step Type
  As a team mapping their value stream
  I want to add development steps
  So that I can capture coding work in my process

  Scenario: Add a development step
    Given I am editing a value stream map
    When I select "Development" from the step type menu
    And I enter "Backend API" as the step name
    Then a development step should appear on the canvas
    And it should have a code icon