{"id":20923788,"url":"https://github.com/patternfly/react-component-groups","last_synced_at":"2025-04-06T05:15:56.374Z","repository":{"id":65328507,"uuid":"577425253","full_name":"patternfly/react-component-groups","owner":"patternfly","description":null,"archived":false,"fork":false,"pushed_at":"2025-03-25T17:32:11.000Z","size":6955,"stargazers_count":9,"open_issues_count":19,"forks_count":24,"subscribers_count":21,"default_branch":"main","last_synced_at":"2025-03-30T04:09:19.946Z","etag":null,"topics":["hacktoberfest"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/patternfly.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-12-12T17:54:58.000Z","updated_at":"2025-03-25T17:26:55.000Z","dependencies_parsed_at":"2023-07-22T21:49:15.753Z","dependency_job_id":"43801fb1-3814-4f32-8fbb-27c507955fb7","html_url":"https://github.com/patternfly/react-component-groups","commit_stats":null,"previous_names":["patternfly/extended-components"],"tags_count":114,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patternfly%2Freact-component-groups","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patternfly%2Freact-component-groups/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patternfly%2Freact-component-groups/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patternfly%2Freact-component-groups/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/patternfly","download_url":"https://codeload.github.com/patternfly/react-component-groups/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247436286,"owners_count":20938533,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hacktoberfest"],"created_at":"2024-11-18T20:17:44.469Z","updated_at":"2025-04-06T05:15:56.341Z","avatar_url":"https://github.com/patternfly.png","language":"TypeScript","readme":"# PatternFly React Component Groups\n\nThis repo contains a set of opinionated react component groups used to standardize functionality and look and feel across products. The components are based on PatternFly with some additional functionality.\n\n### Branches\n`main` - PatternFly 6 implementation\n\n`v5` - PatternFly 5 implementation\n\n`do-not-delete` - do not delete\n\n\u003e NOTE: If new features are not needed in `v5,` they should be added directly to the `main` branch. For bug fixes, it is preferred to fix the bug for both versions (fix in one branch and cherry-pick to another). Pulling new changes from 5 to 6 and vice versa is not recommended using `rebase`. Rather, always cherry-pick specific commits.\n\n---\n\n### Migration from [RedHatInsights/frontend-components](https://github.com/RedHatInsights/frontend-components) to [patternfly/react-component-groups](https://github.com/patternfly/react-component-groups)\nPlease see the [migration guide](./migration.md)\n\n---\n## Contribution guide\n\n### Before adding a new component:\n- make sure your use case is new/complex enough to be added to this extension\n- the component should bring a value value above and beyond existing PatternFly components\n\n### To add a new component:\n1. create a folder in `src/` matching its name (for example `src/MyComponent`)\n2. to the new folder add a new `.tsx` file named after the component (for example `src/MyComponent/MyComponent.tsx`)\n3. to the same folder include an `index.ts` which will export the component as a default and then all necessary interfaces\n4. if this file structure is not met, your component won't be exposed correctly\n\n#### Example component:\n```\nimport * as React from 'react';\nimport { Content } from '@patternfly/react-core';\nimport { createUseStyles } from 'react-jss';\n\n// do not forget to export your component's interface\n// always place the component's interface above the component itself in the code\nexport interface MyComponentProps {\n  text: String;\n}\n\nconst useStyles = createUseStyles({\n  myText: {\n    fontFamily: 'monospace',\n    fontSize: 'var(--pf-v6-global--icon--FontSize--md)',\n  },\n})\n\n// do not use the named export of your component, just a default one\nconst MyComponent: React.FunctionComponent\u003cMyComponentProps\u003e = () =\u003e {\n  const classes = useStyles();\n\n  return (\n    \u003cContent className={classes.myText}\u003e\n      This is my new reusable component\n    \u003c/Content\u003e\n  );\n};\n\nexport default MyComponent;\n``` \n\n#### Index file example:\n```\nexport { default } from './MyComponent';\nexport * from './MyComponent';\n``` \n\n#### Component directory structure example:\n```\nsrc\n|- MyComponent\n   |- index.ts\n   |- MyComponent.tsx\n``` \n\n### Component's API rules:\n- prop names comply with PatternFly components naming standards (`variant`, `onClick`, `position`, etc.)\n- the API is maximally simplified and all props are provided with a description\n- it is built on top of existing PatternFly types without prop omitting\n- it is well documented using the PatternFly documentation (`/packages/module/patternfly-docs/content/extensions/component-groups/examples/MyComponent/MyComponent.md`) with examples of all possible use cases (`packages/module/patternfly-docs/content/extensions/component-groups/examples/MyComponent/MyComponent[...]Example.tsx`)\n- do not unnecessarily use external libraries in your component - rather, delegate the necessary logic to the component's user using the component's API\n\n#### Component API definition example:\n```\n// when possible, extend available PatternFly types\nexport interface MyComponentProps extends ButtonProps {\n    customLabel: Boolean\n};\n\nexport const MyComponent: React.FunctionComponent\u003cMyComponentProps\u003e = ({ customLabel, ...props }) =\u003e ( ... );\n```\n\n\n#### Markdown file example:\n```\n---\nsection: Component groups\nsubsection: My component's category\nid: MyComponent\npropComponents: ['MyComponent']\n---\n\nimport MyComponent from \"@patternfly/react-component-groups/dist/dynamic/MyComponent\";\n\n## Component usage\n\nMyComponent has been created to demo contributing to this repository.\n\n### MyComponent component example label\n\n```js file=\"./MyComponentExample.tsx\"```\n\n```\n\n#### Component usage file example: (`MyComponentExample.tsx`)\n```\nimport React from 'react';\n\nconst MyComponentExample: React.FunctionComponent = () =\u003e (\n  \u003cMyComponent customLabel=\"My label\"\u003e\n);\n\nexport default MyComponentExample;\n```\n\n### Sub-components:\nWhen adding a component for which it is advantageous to divide it into several sub-components make sure: \n- component and all its sub-components are located in separate files and directories straight under the `src/` folder\n- sub-components are exported and documented separately from their parent\n- parent component should provide a way to pass props to all its sub-components\n\nThe aim is to enable the user of our \"complex\" component to use either complete or take advantage of its sub-components and manage their composition independently.\n\n### Testing:\nWhen adding/making changes to a component, always make sure your code is tested:\n- use React Testing Library for unit testing \n- add unit tests to a `[ComponentName].test.tsx` file to your component's directory\n- make sure all the core functionality is covered using Cypress component or E2E tests\n- add component tests to `cypress/component/[ComponentName].cy.tsx` file and E2E tests to `cypress/e2e/[ComponentName].spec.cy.ts`\n- add `ouiaId` to the component props definition with a default value of the component name (for subcomponents, let's use `ComponentName-element-specification` naming convention e.g. `ouiaId=\"WarningModal-confirm-button\"`)\n\n### Styling:\n- for styling always use JSS\n- new classNames should be named in camelCase starting with the name of a given component and following with more details clarifying its purpose/component's subsection to which the class is applied (`actionMenu`, `actionMenuDropdown`, `actionMenuDropdownToggle`, etc.)\n- do not use `pf-v6-u-XXX` classes, use CSS variables in a custom class instead (styles for the utility classes are not bundled with the standard patternfly.css - it would require the consumer to import also addons.css)\n\n## Building for production\n\n- run `npm install`\n- run `npm run build`\n\n## Development\n- run `npm install`\n- run `npm run start` to build and start the development server\n\n## Testing and Linting\n- run `npm run test` to run the unit tests\n- run `npm run cypress:run:cp` to run Cypress component tests\n- run `npm run cypress:run:e2e` to run Cypress E2E tests\n- run `npm run lint` to run the linter\n\n## A11y testing\n\n- run `npm run build:docs` followed by `npm run serve:docs`, then run `npm run test:a11y` in a new terminal window to run our accessibility tests for the components. Once the accessibility tests have finished running you can run `npm run serve:a11y` to locally view the generated report.\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpatternfly%2Freact-component-groups","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpatternfly%2Freact-component-groups","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpatternfly%2Freact-component-groups/lists"}