Skip to content

Commit

Permalink
Fix broken links and references in README files caused by moving patt…
Browse files Browse the repository at this point in the history
…ernfly-3 packages to their own branch (patternfly#4332)

* Fix broken links and references in README files caused by moving patternfly-3 packages to their own branch

* Use relative paths where possible
  • Loading branch information
mturley authored Jun 8, 2020
1 parent d398f3e commit 6471bce
Show file tree
Hide file tree
Showing 11 changed files with 49 additions and 57 deletions.
40 changes: 12 additions & 28 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
# Contributing to PatternFly React

> ### Looking for a quick guide to PatternFly 3 React Contribution? [Go Here](./packages/patternfly-3/patternfly-react/CONTRIBUTING.md)
> ### Looking for a quick guide to PatternFly 3 React Contribution? [Go Here](https://github.com/patternfly/patternfly-react/blob/patternfly-3/packages/patternfly-react/CONTRIBUTING.md)
>
> ### Looking for a quick guide to PatternFly 4 React Contribution? [Go Here](./packages/patternfly-4/react-core/CONTRIBUTING.md)
> ### Looking for a quick guide to PatternFly 4 React Contribution? [Go Here](./packages/react-core/CONTRIBUTING.md)
## Outline

Expand Down Expand Up @@ -99,18 +99,16 @@ If you find a bug within the repo, please help us track the issue by following t

To create an issue for adding a new component to the repo, please observe the following process:

1. If the component does not yet exist as a PatternFly component, please do not start coding yet. Components contributed to PatternFly-React should have a design pattern in PatternFly or be approved PatternFly-Extension components.
1. If the component does not yet exist as a PatternFly component, please do not start coding yet. Components contributed to PatternFly-React should have a design pattern in PatternFly or be approved PatternFly-Extension components.
2. If the component exists in PatternFly core (meaning CSS and the pattern design exists), then create an issue with the following details:
- Assign the label `enhancement` to the issue
- Include the text “Component -“ in the beginning of the title if the issue captures a new component
- If the component is documented as a [PatternFly Library Pattern](http://www.patternfly.org/pattern-library/), include a link to it.
3. If a component is not in PatternFly, but you feel it would be a good addition to the library, please do the following:
- Open a new GitHub issue and tag it with the Extension label
- Reach out on the patternfly-react channel on slack, the mailing list or the forum to see if the issue is approved as an extension
- If it is approved:
- For PatternFly 3 components, please use the patternfly-react-extensions package
- For PatternFly 4 components, direction will be given as to which package it will go in. Generally, we are recommending most extension components go in individual packages. Several smaller common components may end up being grouped together. In the future, a generator for extension component packages will be created.
- Extension components do not undergo the same rigorous design or coding review process as core PatternFly components. If enough members of the community find them useful, we will work to move them into our core PatternFly system by starting the design process for the idea.
- If it is approved, direction will be given as to which package it will go in. Generally, we are recommending most extension components go in individual packages. Several smaller common components may end up being grouped together. In the future, a generator for extension component packages will be created.
- Extension components do not undergo the same rigorous design or coding review process as core PatternFly components. If enough members of the community find them useful, we will work to move them into our core PatternFly system by starting the design process for the idea.

### Contributing Components

Expand Down Expand Up @@ -155,7 +153,7 @@ Follow the prompts to generate the desired component or package.
Currently the following generators are provided

- PatternFly 4 Component
- PatternFly 3 Component
- PatternFly 3 Component (only available on the `patternfly-3` branch, see [this guide](https://github.com/patternfly/patternfly-react/blob/patternfly-3/packages/patternfly-react/CONTRIBUTING.md))
- Package

## Guidelines and Requirements
Expand All @@ -167,10 +165,9 @@ Please ensure that all React UI components contributed meet the following guidel
- This repository serves as a UI / presentational component library only. This means we should not be introducing container components which subscribe to state updates or handle data fetching (i.e. redux aware components). Prefer [stateless functional components](http://buildwithreact.com/article/stateless-functional-components)
when possible and accept [props](https://facebook.github.io/react/docs/components-and-props.html) as UI display parameters.
- Provide a [single default export](http://exploringjs.com/es6/ch_modules.html#_single-default-export) for exporting your React UI component as an ES6 Module in your component's jsx definition.
- For PatternFly 3 components, provide an associated `.stories.js` [story](https://getstorybook.io/docs/react-storybook/basics/writing-stories) for your component. Stories should demonstrate as many different UI states for your component as possible. Use Storybook [knobs](https://github.com/storybooks/storybook-addon-knobs) to enable dynamic visualizations of your component's props.
For PatternFly 4 components, provide associated examples for documentation in the examples directory for the component.
- Provide associated examples for documentation in the examples directory for the component.
- Provide a [jest snapshot test](https://facebook.github.io/jest/docs/snapshot-testing.html) to ensure your UI markup does not change unexpectedly.
- Ensure the component's rendered design and Storybook stories for PatternFly 3 or Documentation examples for PatternFly 4 meet [PatternFly design standard](https://github.com/patternfly/patternfly-design).
- Ensure the component's rendered design and documentation examples meet [PatternFly design standard](https://github.com/patternfly/patternfly-design).
**Note:** If your component does not yet have PatternFly design documentation, the PatternFly React design team will first confirm that the pattern passes the [PatternFly Decision Tree](https://github.com/patternfly/patternfly-design/blob/master/resources/decision-tree/PatternflyDecisionTree.pdf) and then start the process for generating design documentation.
- Ensure the code is properly formatted and there are no linting errors. PatternFly React uses custom eslint configuration based on [Javascript Standard Style](https://standardjs.com/) and [Prettier](https://github.com/prettier/prettier) for code formatting. You can automatically format your code with `yarn prettier` and run the project's linter with `yarn lint`.

Expand All @@ -187,13 +184,8 @@ Please ensure that all React UI components contributed meet the following guidel
- Always prefer **default imports** between components in the same folder
- Components that are not getting exported (to consumers) from
the `index.js` file should be in a subfolder named `InnerComponents`
- Storybooks for PatternFly 3
- Provide a storybook with your component named on the parent component with a `.stories.js` suffix (e.g., `ListGroup.stories.js`)
- When your stories contain multiple files, put them in a subfolder named `Stories`
- `src/**/*.stories.js` and `src/**/Stories/` are excluded from the package build output
- Documentation for PatternFly 4
- Provide documentation for your component with a single Markdown file. (e.g., `ListGroup.md`)
See how to write documentation in the [`react-docs` README](./packages/patternfly-4/react-docs/README.md)
- Provide documentation for your component with a single Markdown file. (e.g., `ListGroup.md`)
See how to write documentation in the [`react-docs` README](./packages/react-docs/README.md)
- When writing a component and you want to use the classnames package, be sure to import and name it `classNames`. For example - `import classNames from 'classnames'`
- When destructuring or spreading expressions , use ...props as the variable name.

Expand Down Expand Up @@ -227,17 +219,9 @@ $ git checkout -b my-branch -t upstream/master
yarn generate
```

- When you select the option to generate a PatternFly 3 component, a structure resembling the following is generated
```text
packages/patternfly-3/patternfly-react/src/components/[ComponentName]/
index.js - Barrel File exporting public exports
ComponentName.js - Component Implementation
ComponentName.test.js - Component Tests
ComponentName.stories.js - Component Stories
```
- When you select the option to generate a PatternFly 4 component, a structure resembling the following is generated
```text
packages/patternfly-4/react-core/src/[type]/[ComponentName]/
packages/react-core/src/[type]/[ComponentName]/
index.js - Barrel File exporting public exports
ComponentName.js - Component Implementation
ComponentName.test.js - Component Tests
Expand Down Expand Up @@ -290,7 +274,7 @@ $ git push origin my-branch
- Storybook and Documentation
- Include a link to the design documentation in the [PatternFly Pattern Library](http://www.patternfly.org/pattern-library/) if it exists. If a PatternFly design does not exist yet, then provide a description that explains when the component would be used and what goal or task it helps to accomplish.

A link to the Storybook (PatternFly 3) and demo documentation (PatternFly 4) will be automatically generated and posted as a comment after the pull request build is complete.
A link to the demo documentation will be automatically generated and posted as a comment after the pull request build is complete.

Once your pull request has been reviewed, if all conditions above have been met your pull request will be approved and merged.

Expand Down
2 changes: 1 addition & 1 deletion GETTING-STARTED.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ After you have written your new PatternFly component, tests, and Storybook stori
## PatternFly React Doc

PatternFly 4 React uses Gatsby. Examples are created to demonstrate of the use of the React components. Documents are generated from these examples.
See how to write documentation in the [`react-docs` README](./packages/patternfly-4/react-docs/README.md)
See how to write documentation in the [`react-docs` README](./packages/react-docs/README.md)

Some things to keep in mind when writing examples:

Expand Down
4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ This project provides a set of React components for the [PatternFly project](htt
3. [Contribution guidelines](#Contribution-guidelines)
4. [License](#License)

Using PatternFly 3? Take a look at the [PatternFly 3 React component information](https://github.com/patternfly/patternfly-react/tree/master/packages/patternfly-3/patternfly-react/README.md).
Using PatternFly 3? Take a look at the [PatternFly 3 React component information](https://github.com/patternfly/patternfly-react/blob/patternfly-3/README.md).

### PatternFly React packages

Expand All @@ -25,7 +25,7 @@ Using PatternFly 3? Take a look at the [PatternFly 3 React component informatio
|   [@patternfly/react-core](./packages/react-core/README.md) | Core set of components |
|   [@patternfly/react-table](./packages/react-table/README.md) | Table components |
|   [@patternfly/react-charts](./packages/react-charts/README.md) | Chart components
|   [@patternfly/react-icons](https://github.com/patternfly/patternfly-react/tree/master/packages/react-icons/README.md) | Icon components |
|   [@patternfly/react-icons](./packages/react-icons/README.md) | Icon components |
|   [@patternfly/react-styles](./packages/react-styles/README.md) | PatternFly CSS styles |
|   [@patternfly/react-tokens](./packages/react-tokens/README.md) | PatternFly CSS variable tokens |
|   [@patternfly/react-topology](./packages/react-topology/README.md) | Topology components |
Expand Down
1 change: 0 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,6 @@
"build:generate": "lerna run generate --parallel --stream",
"clean": "yarn clean:build && yarn clean:pf3 && lerna run clean --parallel",
"clean:build": "rimraf .cache .eslintcache coverage",
"clean:pf3": "rimraf packages/patternfly-3 packages/patternfly-4",
"commit": "git-cz",
"generate": "yarn plop",
"lint": "node --max-old-space-size=4096 node_modules/.bin/eslint --ext js,jsx,ts,tsx --cache",
Expand Down
6 changes: 3 additions & 3 deletions packages/react-charts/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -99,11 +99,11 @@ Note the build scripts for this are located in the root package.json under `yarn

### Testing

Testing is done at the root of this repo. To only run the patternfly-react tests:
Testing is done at the root of this repo. To only run the @patternfly/react-charts tests:

```
yarn test packages/patternfly-4/react-charts
yarn test packages/react-charts
```

[patternfly-4]: https://github.com/patternfly/patternfly
[docs]: https://patternfly-react.surge.sh/patternfly-4
[docs]: https://patternfly-react.surge.sh/
6 changes: 3 additions & 3 deletions packages/react-core/CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ title: Contributing
section: root
hideTOC: true
---

# Contributing to @patternfly/react-core

## Adding a new component
Expand All @@ -22,8 +23,7 @@ hideTOC: true
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](https://github.com/patternfly/patternfly-react/tree/master/packages/react-integration)

7. Add integration tests to the demo-app found [here](../react-integration)

## Code contribution guidelines

Expand Down Expand Up @@ -55,7 +55,7 @@ $ git checkout -b my-branch -t upstream/master

- When you select the option to generate a PatternFly 4 component, a structure resembling the following is generated
```text
packages/patternfly-4/react-core/src/[type]/[ComponentName]/
packages/react-core/src/[type]/[ComponentName]/
index.js - Barrel File exporting public exports
ComponentName.js - Component Implementation
ComponentName.test.js - Component Tests
Expand Down
2 changes: 1 addition & 1 deletion packages/react-inline-edit-extension/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
"bugs": {
"url": "https://github.com/patternfly/patternfly-react/issues"
},
"homepage": "https://github.com/patternfly/patternfly-react/tree/master/packages/patternfly-4/",
"homepage": "https://github.com/patternfly/patternfly-react/tree/master/packages/react-inline-edit-extension",
"scripts": {
"clean": "rimraf dist"
},
Expand Down
24 changes: 13 additions & 11 deletions packages/react-integration/README.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
# Integration testing for PatternFly 4 React

## Overview

PatternFly 4 React provides an integration testing demo app as an environment to verify and test PatternFly 4 code changes and contributions.

The demo app is written in TypeScript and includes Cypress. We use Cypress for integration testing. If you’re new to Cypress and want to learn more, you can start with their documentation.

* [Cypress Documentation](https://docs.cypress.io/guides/overview/why-cypress.html#In-a-nutshell)
* [Cypress API](https://docs.cypress.io/api/api/table-of-contents.html)
* [Cypresss Examples](https://docs.cypress.io/examples/examples/recipes.html#Node-Modules)
- [Cypress Documentation](https://docs.cypress.io/guides/overview/why-cypress.html#In-a-nutshell)
- [Cypress API](https://docs.cypress.io/api/api/table-of-contents.html)
- [Cypresss Examples](https://docs.cypress.io/examples/examples/recipes.html#Node-Modules)

All new components need to be written in TypeScript and then added to the demo application.

Expand All @@ -16,13 +17,14 @@ When making a new PatternFly 4 contribution, you’ll need to write a Cypress te
This README will show you how to launch the demo app and use Cypress to run your tests against it.

## Building your react component

Building your React component
Once you’ve completed development of a new component, you need to perform a build before you can start writing integration tests.

1. Make your changes in packages/patternfly-4/react-core
1. Make your changes in packages/react-core
2. Run the following command from the root directory to build your component:

`yarn build`
`yarn build`

## Running the demo app

Expand All @@ -36,12 +38,12 @@ Once the demo app is launched, all saved changes you make to the code should be

Before you can start writing a Cypress test, you need to build a demo page to test against.

1. Go to the [component demo section](https://github.com/patternfly/patternfly-react/tree/master/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos) and create a new folder to add your demo page.
2. To see your demo in app navigation, add your demo to the [Demo.ts](https://github.com/patternfly/patternfly-react/tree/master/packages/patternfly-4/react-integration/demo-app-ts/src/Demos.ts) file.

1. Go to the [component demo section](./demo-app-ts/src/components/demos) and create a new folder to add your demo page.
2. To see your demo in app navigation, add your demo to the [Demo.ts](./demo-app-ts/src/Demos.ts) file.

## Building Cypress tests
We use [Cypress](https://www.cypress.io/) for integration testing. View all of our existing Cypress tests [here](https://github.com/patternfly/patternfly-react/tree/master/packages/patternfly-4/react-integration/cypress/integration).

We use [Cypress](https://www.cypress.io/) for integration testing. View all of our existing Cypress tests [here](./cypress/integration).

Make sure your demo app is running. If you need to launch the demo application, run the following command from the root directory:

Expand All @@ -53,10 +55,10 @@ Run the following command from the root directory to launch Cypress:

You can leave both the demo app and Cypress running while you develop your tests. You may receive notifications from Cypress that ask you to refresh as you make changes. Use the “Try again” button to refresh Cypress with your updated tests.

Add any new integration tests you write to the [integration folder here](https://github.com/patternfly/patternfly-react/tree/master/packages/patternfly-4/react-integration/cypress/integration).

Add any new integration tests you write to the [integration folder here](./cypress/integration).

## Running integration tests

Once you’ve completed writing your integration tests, run all tests to verify that both new tests and previously written tests are all working.

Run the following command from the root directory to run all tests:
Expand Down
15 changes: 11 additions & 4 deletions packages/react-table/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -44,11 +44,16 @@ import React from 'react';
import { Table, TableHeader, TableBody } from '@patternfly/react-table';

class SimpleTable extends React.Component {

constructor(props) {
super(props);
this.state = {
columns: [{ title: 'Repositories', props: null }, 'Branches', { title: 'Pull requests', props: null }, 'Workspaces', 'Last Commit'],
columns: [
{ title: 'Repositories', props: null },
'Branches',
{ title: 'Pull requests', props: null },
'Workspaces',
'Last Commit'
],
rows: [['one', 'two', 'three', 'four', 'five']]
};
}
Expand All @@ -70,9 +75,11 @@ export default SimpleTable;
This library makes use of the babel plugin from [@patternfly/react-styles](../react-styles/README.md) to enable providing the CSS alongside the components. This removes the need for consumers to use (style|css|sass)-loaders. For an example of using CSS from core you can reference [Button.js](./src/components/Button/Button.js). For any CSS not provided by core please use the `StyleSheet.create` utility from [@patternfly/react-styles](../react-styles/README.md). This will prevent collisions with any consumers, and allow the CSS to be bundled with the component.

### Custom transformators

If you want to add custom transformators to show some special column (collapsible, checkbox) you have to include `isVisible` there as well so cellRenderer knows which cells to render (main purpose is for colSpan).

Example of such transformator can be:

```JSX
function someTransform(value) {
return {
Expand Down Expand Up @@ -136,8 +143,8 @@ yarn build
Testing is done at the root of this repo. To only run the @patternfly/react-table tests:

```
yarn test packages/patternfly-4/react-table
yarn test packages/react-table
```

[patternfly-4]: https://github.com/patternfly/patternfly-next
[docs]: https://patternfly-react.surge.sh/patternfly-4
[docs]: https://patternfly-react.surge.sh
Loading

0 comments on commit 6471bce

Please sign in to comment.