docs(contributing): include guidance for ai generated contributions, contributor hall of fame, and general clean up

nicolethoen · nicolethoen · commit 891e7812b8e4 · 2025-07-30T15:51:57.000-04:00
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -1,9 +1,11 @@
 # Contributing to PatternFly React
 
-> ### Looking for a quick guide to PatternFly React Contribution? [Go Here](./packages/react-core/CONTRIBUTING.md)
+> **Looking for a quick guide to PatternFly React Contribution?** [Go Here](./packages/react-core/CONTRIBUTING.md)
 
 ## Outline
 
+- [Quick Start for New Contributors](#quick-start-for-new-contributors)
+- [Community Contributors Hall of Fame](#community-contributors-hall-of-fame)
 - [Code of Conduct](#code-of-conduct)
 - [Issues and Project Board](#issues-and-project-board)
   - [Issue Labels](#issue-labels)
@@ -14,16 +16,52 @@
   - [Creating Issues for New Components](#creating-issues-for-new-components)
   - [Contributing Components](#contributing-components)
   - [Adding Styling for your Components](#adding-styling-for-your-components)
-  - [Using Generators](#using-generators)
+
 - [Guidelines and Requirements](#guidelines-and-requirements)
   - [React Component Requirements](#react-component-requirements)
   - [Code Consistency](#code-consistency)
   - [Code Contribution Guidelines](#code-contribution-guidelines)
+  - [AI-Assisted Development Guidelines](#ai-assisted-development-guidelines)
+- [Troubleshooting](#troubleshooting)
 - [Becoming a Maintainer](#becoming-a-maintainer)
   - [How do I become a maintainer?](#how-do-i-become-a-maintainer)
   - [How do I lose maintainers status?](#how-do-i-lose-maintainers-status)
   - [Quick Tips for New Maintainers](#quick-tips-for-new-maintainers)
 
+## Quick Start for New Contributors
+
+New to contributing to PatternFly React? Here's how to get started quickly:
+
+1. **🍴 Fork and Clone**: Fork the repository and clone it locally
+2. **📦 Install Dependencies**: Run `yarn install` to install dependencies  
+3. **🏗️ Build**: Run `yarn build` to build the project
+4. **🔍 Find an Issue**: Look for issues labeled [`good first issue`](https://github.com/patternfly/patternfly-react/labels/good%20first%20issue)
+5. **🌿 Create a Branch**: Create a new branch for your changes
+6. **✅ Test**: Run `yarn test` to ensure tests pass
+7. **📝 Submit PR**: Create a pull request with a clear description
+
+**Need help?** Join us on [PatternFly Slack](https://patternfly.slack.com/) in the `#patternfly-react` channel!
+
+## Community Contributors Hall of Fame
+
+We want to recognize and celebrate our amazing community contributors who have made significant contributions to PatternFly React in the past year! 🎉
+
+### Top Community Contributors (Last 12 Months as on July 1, 2025)
+
+The following contributors (excluding PatternFly team members and bots) have made outstanding contributions to the project:
+
+1. **@Mash707** - 49 contributions
+2. **@adamviktora** - 10 contributions
+3. **@logonoff** - 5 contributions
+
+### Notable Contributors
+
+Thank you to all community contributors who have helped improve PatternFly React! Every contribution makes a difference.
+
+Thank you to all our community contributors for helping make PatternFly React better! Every contribution, whether it's code, documentation, bug reports, or feature requests, helps improve the library for everyone.
+
+*This list is updated periodically and reflects contributions over the past 12 months. If you'd like to join this list, check out our [contribution guidelines](#contribution-process) below!*
+
 ## Code of conduct
 
 This project is governed by the [Contributor Covenant version 2.1][1]. All contributors and participants
@@ -124,22 +162,7 @@ Inside the package directory:
 - Add a Sass file to the `sass/patternfly-react/` directory and use the file name `_<component>.scss`
 - Import the Sass file into `sass/patternfly-react/_patternfly-react.scss` using `@import "<component>";`
 
-### Using generators
 
-To make contributing components and packages easier a generator utility has been provided.
-
-To start the generator run:
-
-```sh
-yarn generate
-```
-
-Follow the prompts to generate the desired component or package.
-
-Currently the following generators are provided
-
-- PatternFly component
-- Package
 
 ## Guidelines and requirements
 
@@ -179,51 +202,36 @@ Please ensure that all React UI components contributed meet the following guidel
 
 Adhering to the following process is the best way to get your work included in the project:
 
-1. [Fork](https://help.github.com/fork-a-repo/) the project, clone your fork, and configure the remotes:
+1. **Fork and set up the repository** (assumes basic git knowledge)
 
-```sh
-# Clone your fork of the repo into the current directory
-git clone https://github.com/<your-username>/patternfly-react.git
-# Navigate to the newly cloned directory
-cd patternfly-react
-# Assign the original repo to a remote called "upstream"
-git remote add upstream https://github.com/patternfly/patternfly-react.git
-# Fetch the code and branches from remote repo "upstream"
-git fetch upstream
-```
+2. **Set up your development environment**
 
-2. Set up tooling
-
-[Install Node.js](https://nodejs.org/en/download/package-manager) version 22 (or higher), and make sure to [enable Corepack](https://nodejs.org/api/corepack.html). Then install the project dependencies and build it by running:
+**Prerequisites:**
+- [Node.js](https://nodejs.org/en/download/package-manager) version 22 or higher
+- [Enable Corepack](https://nodejs.org/api/corepack.html) for package manager management
+- Git configured with your GitHub account
 
+**Setup commands:**
 ```sh
+# Install dependencies
 yarn install
-yarn build
-```
-
-3.  Create a branch:
 
-```sh
-git checkout -b my-branch upstream/main
-```
+# Build the project
+yarn build
 
-4. Generate your component
+# Run tests to verify setup
+yarn test
 
-```sh
-# Run the tool to Generate the component scaffolding
- yarn generate
+# Start development server (optional)
+yarn start
 ```
 
-- When you select the option to generate a PatternFly component, a structure resembling the following is generated
-  ```text
-  packages/react-core/src/[type]/[ComponentName]/
-    index.js - Barrel File exporting public exports
-    ComponentName.js - Component Implementation
-    ComponentName.test.js - Component Tests
-    ComponentName.md - Component Docs
-  ```
+**Verify your setup:**
+- All tests should pass
+- Build should complete without errors
+- Development server should start (if running yarn start)
 
-5.  Develop your component. After development is complete, run build and ensure tests and lint standards pass.
+3. **Develop your component** - After development is complete, run build and ensure tests and lint standards pass.
 
 ```sh
 yarn build
@@ -234,26 +242,9 @@ Ensure no lint errors are introduced in `yarn-error.log` after running this comm
 
 ***Note to Windows users:*** you may need to change the path for the lint script in package.json to be `node_modules/eslint/bin/eslint`
 
-6.  Add a commit using `git commit`:
-
-This project uses [`lerna`](https://lernajs.io/) to do automatic releases and generate a changelog based on the commit history. So we follow [a convention][3] for commit messages. Please follow this convention for your commit messages.
-
-7.  Rebase
+4. **Follow commit conventions** - This project uses [`lerna`](https://lernajs.io/) to do automatic releases and generate a changelog based on the commit history. So we follow [a convention][3] for commit messages. Please follow this convention for your commit messages.
 
-Use `git rebase` (not `git merge`) to sync your work from time to time. Ensure all commits related to a single issue have been [squashed](https://github.com/ginatrapani/todo.txt-android/wiki/Squash-All-Commits-Related-to-a-Single-Issue-into-a-Single-Commit).
-
-```sh
-git fetch upstream
-git rebase upstream/main
-```
-
-8.  Push
-
-```sh
-git push origin my-branch
-```
-
-9.  Create a pull request
+5. **Create a pull request**
 
 [Open a pull request](https://help.github.com/articles/using-pull-requests/) with a clear title and description against the `main` branch. Please be sure to include all of the following in your PR:
 
@@ -276,6 +267,75 @@ Please help in ensuring all relevant issues are closed and that any subsequent i
 - If an issue in Core will affect a component in PF-React, this issue should link to the main PF-React issue.
 - The CSS Developers and UX Designers should be tagged to review their respective PF-React issue.
 
+### AI-Assisted Development Guidelines
+
+AI-generated code can be accepted as a contribution to this project as long as the contributor follows the following guidance.
+
+When using AI coding assistants (such as GitHub Copilot, ChatGPT, Claude, or other similar tools) to help with development work on PatternFly React, please follow these guidelines to ensure code quality, security, and transparency:
+
+#### Human in the loop: Verify and validate AI-generated code
+
+- **Treat AI-generated code as suggestions, not final code.** Review all generated code and modify as appropriate. Thoroughly review and test all code that you intend to integrate into your work.
+
+- **Do not blindly trust the code assistant output.** Always apply your own judgment and expertise. AI coding assistants can introduce security vulnerabilities if not used carefully, and AI models can sometimes hallucinate and provide incorrect or non-functional code.
+
+- **Make sure you thoroughly understand any AI-generated code.** If the generated code you intend to incorporate in your work is outside your expertise, consult with someone knowledgeable in the area prior to making it available to others within Red Hat or externally.
+
+#### Mark code with substantial AI-generated portions
+
+Nontrivial and substantial AI-generated or AI-assisted content should be "marked" in appropriate cases. In deciding how to approach this, consider adopting one or more of the following recommendations:
+
+- **In a commit message, or in a pull request/merge request description field,** identify the code assistant that you used, perhaps elaborating on how it was used. You may wish to use a trailer like "Assisted-by:" or "Generated-by:". For example:
+
+  ```
+  Assisted-by: GitHub Copilot
+  Generated-by: ChatGPT for initial component structure
+  ```
+
+- **In a source file comment,** indicate the use of the code assistant. For example:
+
+  ```javascript
+  // Generated by GitHub Copilot
+  // AI-assisted implementation with human review and modifications
+  ```
+
+#### Additional considerations
+
+- **Security review:** Pay special attention to security implications of AI-generated code, especially when dealing with user input, authentication, or data handling.
+- **Testing:** Ensure that AI-generated code is thoroughly tested and meets all existing project standards for testing coverage.
+- **Code style:** Verify that AI-generated code follows PatternFly React's coding standards and style guidelines as outlined in this document.
+- **Documentation:** If AI assists in generating documentation or comments, review them for accuracy and completeness.
+
+## Troubleshooting
+
+### Common Issues and Solutions
+
+**Build Failures:**
+- Ensure you're using Node.js version 22 or higher: `node --version`
+- Clear node_modules and reinstall: `rm -rf node_modules && yarn install`
+- Clear yarn cache: `yarn cache clean`
+
+**Test Failures:**
+- Run tests in watch mode for debugging: `yarn test --watch`
+- Update snapshots if components have intentionally changed: `yarn test -u`
+
+**Linting Errors:**
+- Auto-fix linting issues: `yarn lint --fix`
+- Format code with Prettier: `yarn prettier`
+
+**Development Server Issues:**
+- Clear cache and restart: `rm -rf node_modules/.cache && yarn start`
+- Check if port is already in use and kill the process if needed
+
+**Integration Issues:**
+- Ensure your branch is up to date with the latest changes before submitting PR
+- Squash commits related to a single issue before submitting
+
+**Still having issues?** 
+- Check existing [GitHub issues](https://github.com/patternfly/patternfly-react/issues)
+- Ask for help in [PatternFly Slack](https://patternfly.slack.com/) `#patternfly-react` channel
+- Create a new issue with detailed error information
+
 ## Becoming a maintainer
 
 The documentation for becoming a maintainer has been taken from [Foreman](https://theforeman.org/handbook.html#Becomingamaintainer) and adapted for the PatternFly project.
