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.

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.

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

<ActivityFeed />

Card Used for displaying title, meta information, time, and navigating to inner content

<Card />

Loader To Do

<Loader />

NavTabs To Do

<NavTabs />

NotificationBar To Do

<NotificationBar />

SearchBox To Do

<SearchBox />

Test Coverage

Contributing