# parkhub-component-library
> A collection of React components that embody the Parkhub design system
Latest version **0.1.5** (published 2017-06-14) · BSD-2-Clause license · 0 weekly downloads
## Install
```sh
npm install parkhub-component-library
pnpm add parkhub-component-library
yarn add parkhub-component-library
bun add parkhub-component-library
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.1.5 |
| Published | 2017-06-14 |
| First published | 2017-05-25 |
| Weekly downloads | 0 |
| License | BSD-2-Clause |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 7 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | ggellene |
| Keywords | parkhub, react, component, library |
## Links
- npm: https://www.npmjs.com/package/parkhub-component-library
- Repository: https://github.com/parkhub/parkhub-component-library
- Homepage: https://github.com/parkhub/parkhub-component-library#readme
- Issues: https://github.com/parkhub/parkhub-component-library/issues
- npm.io page: https://npm.io/package/parkhub-component-library
## Dependencies (7)
- [react](https://npm.io/package/react.md) ^15.5.4
- [moment](https://npm.io/package/moment.md) ^2.18.1
- [loglevel](https://npm.io/package/loglevel.md) ^1.4.1
- [react-dom](https://npm.io/package/react-dom.md) ^15.5.4
- [classnames](https://npm.io/package/classnames.md) ^2.2.5
- [prop-types](https://npm.io/package/prop-types.md) ^15.5.10
- [font-awesome](https://npm.io/package/font-awesome.md) ^4.7.0
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 0.1.5 (latest) — 2017-06-14
- 0.1.4 — 2017-05-31
- 0.1.3 — 2017-05-26
- 0.1.2 — 2017-05-26
- 0.1.1 — 2017-05-25
- 0.1.0 — 2017-05-25
## README
# Steve, The Component Library
[](https://parkhub.slack.com/messages/C5K5D8P7Z/)
Steve's here to give you to defined, stable and tested React components to build consistent views and interactions within your applications. Comprised of Atoms, Molecules and Organisms.
## Table of Contents
- Introduction
- Why we built Steve
- Getting started
- Basic usage
- Components
- Activity Feed
- Card
- Loader
- NavTabs
- NotificationBar
- SearchBox
- Test coverage
- Contributing
- Design process
- Validating with customers
- Writing tests
- Publishing to NPM
----------
# Introduction
## Why we built Steve
**Consistency.** It's all about consistency in code and design. Steve is a core member of our Design System. There are some pretty clutch key benefits when using a component library also:
- Full test coverage for visual and data
- Write way less HTML / CSS to focus on core logic of applications
- Better UX defined by interaction patterns in the design system
## Getting started
Install from npm
`npm i parkhub-component-library --save`
Or yarn
`yarn add parkhub-component-library`
## Basic Usage
To use the components, just import them and add them to your layout.
```javascript
import { Component } from 'react';
import { Card } from 'parkhub-component-library';
class App extends Component {
render() {
return Look, ma! Components!
;
}
}
```
To use the packaged styles (seriously, do this), then simply add them to your html files. If you're using webpack (do this, too), then you need to reference it at the root of your app. Parkhub's styles are packaged minified but un-compressed. This can help produce smaller css bundles by merging with your custom CSS before compression. But, it's important to actually do that. There are numerous utilities and tutorials on that topic for whatever toolchain you're using.
```javascript
// This would work for webpack
import React from 'react';
import ReactDOM from 'react-dom';
import App from './app';
require('parkhub-component-library/lib/styles.css');
ReactDOM.render(
,
document.getElementById('app')
);
```
Donezo.
----------
# Components
Components can range from being Atoms, Molecules, and Organisms ([Atomic Design Principles](https://github.com/parkhub/parkhub-component-library/wiki/Atomic-Design-Principles)). They will be defined and grow over time like living organisms should. TODO: Functional components + component classes.
----------
**Activity Feed**
Allowing users to quickly get a heartbeat on the current subject they are looking at
```
```
----------
**Card**
Used for displaying title, meta information, time, and navigating to inner content
```
```
----------
**Loader**
To Do
```
```
----------
**NavTabs**
To Do
```
```
----------
**NotificationBar**
To Do
```
```
----------
**SearchBox**
To Do
```
```
# Test Coverage
# Contributing
---
_Source: https://npm.io/package/parkhub-component-library · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._