[!IMPORTANT] These UI components are in maintenance-mode and no longer under active development. For further details, see UI component libraries and templates.

react-gears is a React implementation of Appfolio UI components, using

React, Bootstrap 4, and reactstrap.

https://appfolio.github.io/react-gears

yarn add @appfolio/react-gears

# or for npm:
npm install @appfolio/react-gears

import React from 'react';
import { Button } from '@appfolio/react-gears';

export default (props) => {
  return (
    <Button color="danger">Danger!</Button>
  );
};

You can use react-gears-cypress for testing react-gears components in your project.

Install dependencies:

# For AppFolio members. Replace <codeartifact_registry_server> with the correct value.
CODEARTIFACT_REGISTRY_SERVER=<codeartifact_registry_server> yarn install

# For non-AppFolio members
YARN_RC_FILENAME=.yarnrc-public.yml yarn install

Run storybook examples:

yarn start

Then open http://localhost:6006 in a browser.

Run tests:

yarn test

This runs unit tests using Mocha and enzyme.

Run Linter

yarn lint

This runs ESLint using appfolio-react as the base configuration.

Commit messages should follow the Conventional Commits format:

<type>(<scope>): <message>

Here's an example commit message:

feat(SomeComponent): add new thing that does something

• <scope> is optional.
• ! indicates a breaking change. Example: feat!: some breaking change.

Here are a few common <type>s:

• feat: A new feature
• fix: A bug fix
• docs: Documentation changes
• refactor: Code changes that neither fix a bug nor add a feature
• test: Adding missing tests or correcting existing tests
• ci: Changes to CI configuration files and scripts
• chore: Other changes that don't modify src or test files

For more information about Conventional Commits, see the official documentation.

Open a pull request, get it approved by the relevant code owners, ensure it passes workflow checks, and merge your pull request.

Only appfolio/platform-front-end members can trigger workflows.

• Open a pull request with your changes against the default branch.
• A few minutes after triggering the prerelease workflow, GitHub bot will leave a comment on the pull request notifying the prerelease was created.
• Use the prerelease version (example: 8.0.1-some-branch-a48dadc.0) to test your changes in apps/libraries that depend on this library.

After merging your pull request to the default branch, triggering the release-please workflow will create or update a special "release pull request".

• Find this "release pull request" under the "Pull requests" tab for this repo. The title will be something like, chore(master): release 8.0.2.
• Approve and merge this "release pull request" then triggering the release-please workflow will create an official release (e.g. 8.0.2).