Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 27 additions & 1 deletion CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -46,14 +46,40 @@ As artificial intelligence evolves, AI-generated code is becoming valuable for m

Please see our [guideline for AI-generated code contributions to SAP Open Source Software Projects](https://github.com/SAP/.github/blob/main/CONTRIBUTING_USING_GENAI.md) for these requirements.

## Development Setup

> **Before you start, read the [Development Conventions and Guidelines](/docs/Guidelines.md)** for commit message format, naming conventions, and coding standards.

### Prerequisites

- [Node.js](https://nodejs.org/) (see `.nvmrc` for the required version)
- [Yarn](https://yarnpkg.com/) v4 (managed via corepack, see `packageManager` in `package.json`)

### Getting Started

```bash
git clone https://github.com/UI5/webcomponents-react.git
cd webcomponents-react
yarn install # installs dependencies and runs postinstall setup (husky + build:i18n/css/version-info)
```

### Common Commands

```bash
yarn start # Storybook at localhost:6006 (includes CSS watcher)
yarn build # Full build (setup + tsc + client/wrapper builds)
yarn test # Cypress component tests (all packages)
yarn test:open # Cypress interactive mode
yarn lint # ESLint
```

### How to contribute - the Process

1. Please let us know, that you want to work on the issue you've filed in the [issue tracker](https://github.com/UI5/webcomponents-react/issues).
2. If the issue is marked with the `contribution welcome` tag, we'll assign you right away, otherwise we will check if some more information our guidance is needed and only then assign you to it.
3. Once you are assigned to the issue, you are ready to go.
4. Fork the `ui5-webcomponents-react` repository into your GitHub account, create a branch and apply your change. Please don't work directly on the `main` branch of your fork. This will help to update your fork in the future more easily.
5. Commit and push your change on that branch.
Please follow our [Development Conventions and Guidelines](/docs/Guidelines.md).
6. Create a pull request from your branch into `ui5-webcomponents-react`-`main` branch.
7. Follow the link posted by the CLA assistant to your pull request and accept it, as described above.
8. Wait for our code review and approval, possibly enhancing your change on request.
Expand Down
36 changes: 4 additions & 32 deletions docs/Guidelines.md
Original file line number Diff line number Diff line change
@@ -1,35 +1,8 @@
# Development Conventions and Guidelines

## Requirements

- [Yarn](https://yarnpkg.com)
- [Node.js](https://nodejs.org/) (**[LTS](https://github.com/nodejs/release?tab=readme-ov-file#release-schedule) version** ⚠️)

## Setup your local development environment

Please make sure you have installed a [LTS](https://github.com/nodejs/release?tab=readme-ov-file#release-schedule) `node` version (check by running `node -v`) and yarn v1 (check by running `yarn -v`).

First, you need to clone the git repository by running

```sh
# this git url points to the original repository, you can exchange it with the address of your fork
git clone https://github.com/UI5/webcomponents-react.git
```

Then, go into that cloned directory and run `yarn install`. At this point, you are ready to start local development. You can now run:

- `yarn start` <br />
This starts the local storybook, so you can check if your components are rendered correctly. _If the storybook doesn't open automatically after executing the command, you can use this link: http://localhost:6006/_
- `yarn test` <br />
This command is running all tests in the project.
- `yarn test:open` <br />
This command is opening all cypress tests in Chrome.
- `yarn build` <br />
This command executes the full build of the project.

## TypeScript

Please use TypeScript to write your components. A good introduction to TypeScript in React can be found [here](https://levelup.gitconnected.com/ultimate-react-component-patterns-with-typescript-2-8-82990c516935).
All components must be written in TypeScript.

## Naming Convention for Props

Expand All @@ -38,12 +11,11 @@ Please use TypeScript to write your components. A good introduction to TypeScrip
All Events must pass an instance of the `Event`-Class as single parameter.
- When passing additional elements into a component, a slot should be used. This prop should contain a `ReactNode` or an array of ReactNodes (`ReactNode[]`)

You must follow the coding style as best you can when submitting code. Take note of naming conventions, separation of concerns, and formatting rules. You can use the code formatter [Prettier](https://prettier.io/) to handle some of this for you automatically.
When you are finished with your implementation please run `yarn prettier:all`, this will auto format all files for you.
Follow the coding style as best you can when submitting code. Take note of naming conventions, separation of concerns, and formatting rules. Prettier runs automatically as a pre-commit hook.

## Unit testing
## Testing

All components should have associated unit tests created with a code coverage score of at least 80%. Be an overachiever and shoot for 100% :)
All components should have associated Cypress component tests with a code coverage score of at least 80%.

## Git Guidelines

Expand Down
Loading