diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 34831fe7710..8481037fadd 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -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 @@ -99,7 +99,7 @@ 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 @@ -107,10 +107,8 @@ To create an issue for adding a new component to the repo, please observe the fo 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 @@ -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 @@ -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`. @@ -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. @@ -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 @@ -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. diff --git a/GETTING-STARTED.md b/GETTING-STARTED.md index 101718c2b94..031fe2da3bc 100644 --- a/GETTING-STARTED.md +++ b/GETTING-STARTED.md @@ -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: diff --git a/README.md b/README.md index 6fc3caf03b8..7b900e4d08e 100644 --- a/README.md +++ b/README.md @@ -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 @@ -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 | diff --git a/package.json b/package.json index f30156b78de..6f539c8a433 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/packages/react-charts/README.md b/packages/react-charts/README.md index fb3a387d97a..a540ad86c8e 100644 --- a/packages/react-charts/README.md +++ b/packages/react-charts/README.md @@ -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/ diff --git a/packages/react-core/CONTRIBUTING.md b/packages/react-core/CONTRIBUTING.md index b939b5d5931..a007c22cc21 100644 --- a/packages/react-core/CONTRIBUTING.md +++ b/packages/react-core/CONTRIBUTING.md @@ -3,6 +3,7 @@ title: Contributing section: root hideTOC: true --- + # Contributing to @patternfly/react-core ## Adding a new component @@ -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 @@ -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 diff --git a/packages/react-inline-edit-extension/package.json b/packages/react-inline-edit-extension/package.json index d2532f4179a..ad1b740f121 100644 --- a/packages/react-inline-edit-extension/package.json +++ b/packages/react-inline-edit-extension/package.json @@ -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" }, diff --git a/packages/react-integration/README.md b/packages/react-integration/README.md index 79899ab06cd..f79e1ecc2ea 100644 --- a/packages/react-integration/README.md +++ b/packages/react-integration/README.md @@ -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. @@ -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 @@ -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: @@ -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: diff --git a/packages/react-table/README.md b/packages/react-table/README.md index d4cdd692966..c226d3dae2e 100644 --- a/packages/react-table/README.md +++ b/packages/react-table/README.md @@ -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']] }; } @@ -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 { @@ -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 diff --git a/packages/react-table/src/components/Table/Table.md b/packages/react-table/src/components/Table/Table.md index 8bb391462d6..20a4a119d9d 100644 --- a/packages/react-table/src/components/Table/Table.md +++ b/packages/react-table/src/components/Table/Table.md @@ -1023,7 +1023,7 @@ import { CubeIcon } from '@patternfly/react-icons'; -// https://github.com/patternfly/patternfly-react/blob/master/packages/patternfly-4/react-table/src/components/Table/demo/DemoSortableTable.js +// https://github.com/patternfly/patternfly-react/blob/master/packages/react-table/src/components/Table/demo/DemoSortableTable.js import DemoSortableTable from './demo/DemoSortableTable'; class CompoundExpandableTable extends React.Component { diff --git a/packages/react-topology/README.md b/packages/react-topology/README.md index c15e7742931..228fb89ec04 100644 --- a/packages/react-topology/README.md +++ b/packages/react-topology/README.md @@ -41,7 +41,7 @@ import '@patternfly/react-core/dist/styles/base.css'; ```javascript import React from 'react'; - // TODO +// TODO ``` ## Contribution @@ -98,7 +98,7 @@ yarn build Testing is done at the root of this repo. To only run the @patternfly/react-topology tests: ``` -yarn test packages/patternfly-4/react-topology +yarn test packages/react-topology ``` [patternfly-4]: https://github.com/patternfly/patternfly-next