1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
|
---
id: Contributing
section: root
hideTOC: true
---
# Contributing to @patternfly/react-core
## Adding a new component
1. Check for open issues that are not assigned to anyone, and assign yourself. If you do not see an issue for the component you want to contribute open an issue and assign yourself. Assigning yourself will ensure that others do not begin working on the component you currently have in progress.
2. Generate the component scaffolding by running `yarn generate`. This will generate a structure that resembles the following
```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
examples/ - dir for all examples
SimpleComponentName.js - Simple Example
```
3. Write the component implementation in `[Component].js`.
4. Add jest tests to `[Component].test.js`. All new components must be tested.
5. Add any additional public exports to `index.js`
6. Update the generated `[ComponentName].md.` See how to create [component docs.](../react-core/README.md)
7. Add integration tests to the demo-app found [here](../react-integration)
## Code contribution guidelines
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:
```bash
# 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
```
2. Create a branch:
```text
$ git checkout -b my-branch -t upstream/main
```
3. Generate your component
```bash
# Run the tool to Generate the component scaffolding
yarn generate
```
- 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
```
4. Develop your component.
While developing, you can run the patternfly-react workspace to view the component docs with live examples.
```bash
# Start up the workspace locally on port 8002
yarn install && yarn start
```
5. After development is complete, ensure tests and lint standards pass.
```text
$ yarn test
```
Ensure no lint errors are introduced in `yarn-error.log` after running this command.
5. Add a commit using `git commit`:
This project uses [`lerna`](https://lerna.js.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`](https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#type) for your commit messages.
Once you are ready to commit the changes, please use the below commands:
```text
$ git add <files to be committed>
$ git commit -m
```
... and follow the instruction of the interactive prompt.
6. Rebase
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).
```text
$ git fetch upstream
$ git rebase upstream/main
```
7. Push
```text
$ git push origin my-branch
```
8. Create a pull request
- A link to the PatternFly demo documentation will be automatically generated and posted as a comment after the pull request build is complete.
## Additional information
See the PatternFly React Guide for full details on [Code Contribution Guidelines](https://github.com/patternfly/patternfly-react/blob/main/CONTRIBUTING.md#code-contribution-guidelines)
|
