Rivet-react is open source and maintained by members of the Indiana University organization on GitHub. If you have questions about the library or encounter problems please file an issue. If you wish to contribute, pull requests are welcome!
To get started, fork the rivet-react repo on GitHub.
To compile the components:
- Requires Node v22.12.0 (The "Jod" LTS)
npm run build
To test the components:
npm test
To test with code coverage:
npm test --coverage
To start a local server with the style guide and demo pages:
npm run start
This project supports hot reloading of tests and the demo page.
New components should always go in the src/components
directory in the project. Every component must have a jsx
component file, a test file, and a documentation markdown file explaining how the component is used. Additionally, in order to correctly modularize components, there should be an index.jsx
file for each directory with the following content.
export { default as ComponentName } from "./ComponentName";
When adding a new export, the module should be added to package.json
as part of the exports
section.
"./path/to/component/directory/ComponentToExport": {
"import": "./dist/rivet-react-componenttoexport.js",
"require": "./dist/rivet-react-componenttoexport.cjs"
}
You will also need to add an export to the top level component index in src/components/index.js
.
export * from "./path/to/component/index.jsx";
To add a new section to the documentation, edit styleguide.config.cjs
and add a new sections
entry. They will typically follow this pattern.
{
name: Section Name,
components: () => [
"src/components/path/to/Component/[A-Z]*.jsx",
],
}
- We aspire to full test coverage of all components. Look at existing tests for examples on how to write them. If you have questions about testing or how to resolve coverage issues, we can help!
- All component properties should be documented. Property documentation should link to relevant Rivet documentation if available, particularly if the property is for styling and presentation options. Look to existing components for examples.
- Components should be included in the style guide.
styleguide.config.cjs
organizes component documentation into sections that align with the Rivet component documentation. If you're adding a new component, please place its documentation in the appropriate section. - Components should have usage examples. Every component should have a markdown file (
.md
) alongside its implementation file (.jsx
) with usage examples for the style guide. Look to existing components for examples. - Every source file should contain a standard license header. You can ensure these are applied consistently by running
npm run license
before committing your code.
Semantic Release is a workflow for using structured commit messages to determine the next version number of a package in accordance with Semantic Versioning principles and Angular Commit Message Conventions.
The semantic-release package adds a number of useful automations.
- Select the next version number based on commit logs since the last release;
- Tag the GH commit with that version number;
- Create a release from the tag with auto-generated release notes;
- Add a friendly comment to any PRs referenced by the release notes, that the given PR was included in the release;
- Push the package to NPM with the new version.