caseymhunt / design-system

FireHydrant flavored React component library, built using Chakra UI

🌈 FireHydrant Design System 🦄

FireHydrant flavored React component library, built using Chakra UI, and a custom theme layer.

• installation
  • GitHub token as environment variable
  • Add to project
• usage
• contributors
• changelog
• acknowledgements

---

installation

The package is registered on GitHub's package registry, added via .npmrc

Access to this registry requires authentication with GitHub tokens. These tokens are private and should not be committed to any project, accessed instead via environment variable.

GitHub token as environment variable

1. Go to https://github.com/settings/tokens and create a token with at least read:package access

2. Set the token (paste into either ~/.zshrc OR ~/.bashrc)

   export GITHUB_TOKEN=<your token>

3. Open a new terminal window (or source the edited .*rc file)

Add to project

yarn add @firehydrant/design-system

or

npm i @firehydrant/design-system --save

---

usage

Our components require a ThemeProvider to wrap your application. By default the FireHydrant theme is included with our provider.

// import themeprovider from our package
import { ThemeProvider } from '@firehydrant/design-system';

// wrap your application
<ThemeProvider>
  <App />
</ThemeProvider>;

For a list of all components & properties, refer to Storybook ↗️

---

contributors

💡 Want to contribute? Check out the Contributing Guidelines

Contributions of any kind are welcome!

Thanks goes to these wonderful people (emoji key):

Casey Hunt 🚧

Jax Engel 🎨

Josh Hamilton 💻

Robert Ross 📖 💻

Hilary Beck 💻

Brian Han 💻

Tristan Free 🎨

This project follows the all-contributors specification.

changelog

Interested in what changed lately? Check out the CHANGELOG

---

acknowledgements

Thank you to the following projects, upon which this Design System is built:

• Chromatic ↗️ - Storybook hosting; component feedback & regression testing
• chakra-ui ↗️ - React component library
• storybook ↗️ - Component visualization & documentation tool
• seek-oss/playroom ↗️ - Component live sandbox
• conventional-changelog/standard-version ↗️ - A utility for versioning using semver and CHANGELOG generation powered by Conventional Commits.