Parkhub-component-library NPM

Steve, The Component Library

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.

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.

import { Component } from 'react';
import { Card } from 'parkhub-component-library';

class App extends Component {
    render() {
        return <div><h1>Look, ma! Components!</h1><Card></div>;
    }
}

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.

// 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(
  <App/>,
  document.getElementById('app')
);

Donezo.

Components

Components can range from being Atoms, Molecules, and Organisms (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