ui-react-component-kit v0.5.2

ui-react-component-kit

A react component library that is not prescribing state management and has theming capabilities.

Table of contents

1. Installation
   1. Prerequisites
   2. Install Dependencies
2. Usage
   1. How To
   2. Prerequisites
   3. Theming
3. Dev Process
4. Styleguide
5. Metrics
6. Third-Party Dependencies
   1. Microservice

Installation

Prerequisites

• [Node.js](https://nodejs.org/en/) (>9.x).
• [Yarn](https://yarnpkg.com/en/) (optional).

Use [Source Tree](https://www.sourcetreeapp.com/) to clone the [ui-react-component-kit](https://github.com/Rob-Leggett/ui-react-component-kit) repo or manually clone:

$ git clone https://github.com/Rob-Leggett/ui-react-component-kit.git

Install Dependencies

$ yarn install | npm install

Usage

The following section outlines commonly used commands. For a detailed list of all possible project commands please refer to the scripts section of the package.json file located in the root of the project directory.

This project has opted to use Yarn as the preferred package manager. However, the commands yarn and npm can be used interchangeably if not available. For more information on the benefits and usage of Yarn please visit this [website](https://yarnpkg.com/en/).

How To Use

Install

$ yarn add ui-react-component-kit --dev | npm install ui-react-component-kit --save-dev

Prerequisites

In you index.html of your application please add the following to enable font awesome fonts required for components.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">

Theming

The defaultTheme is used if you don't provide your own theme, it has been written with mobile first, therefore breakpoints are triggered on min-width rather then max-width.

Wrap your application in the ThemeProvider and pass in your own theme.

Example: [defaultTheme](https://github.com/Rob-Leggett/ui-react-component-kit/blob/master/src/theme/defaultTheme.ts)

App.[js|ts]

import * as React from 'react';
import { ThemeProvider } from 'styled-components';
// custom theme provided with library
import { customTheme } from './your/custom/theme/path'; 

class App extends React.Component {
  render() {
    return (
      <ThemeProvider theme={customTheme}>
        {/* rest of your app */}
      </ThemeProvider>
    );
  }
}

export default App

index.[js|ts]

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Dev Process

To ensure you are using the correct version of Node:

$ yarn check-node | npm run check-node

To commit using commitizen:

$ yarn commit | npm run commit

To build the library:

$ yarn build | npm run build

To perform linting:

$ yarn lint | npm run lint

To automatically fix linting where possible and perform linting:

$ yarn lint:fix | npm run lint:fix

To perform testing (unit & snapshot):

$ yarn test | npm run test

To update snapshots and perform testing (unit & snapshot):

$ yarn test:update-snapshot | npm run test:update-snapshot

To start a mock server for sample api support:

$ yarn mock-server-start | npm run mock-server-start

To run styleguide - without api support:

• styleguide - [http://localhost:6060]("http://localhost:6060)

$ yarn styleguide | npm run styleguide

To run styleguide - with api support:

• styleguide - [http://localhost:6060]("http://localhost:6060)
• mock server (http) - [http://localhost:8882]("http://localhost:8882)
• mock server (https) - [http://localhost:8443]("http://localhost:7443)
• mock server (admin) - [http://localhost:8889]("http://localhost:8889)

$ yarn styleguide:with-mock-server | npm run styleguide:with-mock-server

To build a static version of styleguide - without api support:

$ yarn styleguide:build | npm run styleguide:build

Metrics

When running the tests you will get the following metrics:

• Code Coverage Report - /coverage
• Test Report (junit parsable) - test-report.xml

Third-Party Dependencies

Microservice

In order to use any components specified below in this section you will be required to have an API with the endpoints the components requires.

Interface Spec

For use with address-autocomplete component:

Get Addresses

GET - ${endpoint}?query=${term}&limit=${limit}

Success Response Example (HTTP Status Code 2XX)

{
  "data": [
    {
      "id": "12345",
      "address": "123 Champion Road Clayton South VIC 3169"
    },
    {
      "id": "23456",
      "address": "123 Champion Road Umina Beach NSW 2257"
    }
  ]
}

No Match Response Example (HTTP Status Code 2XX)

{
  "data": []
}

Error Response Example (HTTP Status Code 4XX or 5XX)

{}

Get Address Details

GET - ${endpoint}/${id}

Success Response Example (HTTP Status Code 2XX)

The json payload must have property address for the component to be functional, all the other payload properties such as house_number etc are optional and can be anything that represents an address

{
  "data": {
    "id": "45678",
    "house_number": "123",
    "street": "Champion Street",
    "locality": "Dubbo",
    "state": "NSW",
    "postcode": "2830",
    "address": "123 Champion Street Dubbo NSW 2830"
  }
}

Error Response Example (HTTP Status Code 4XX or 5XX)

{}

Styleguide

Styleguide via: https://rob-leggett.github.io/ui-react-component-kit/

Donations

How you can help?

Any donations received will be able to assist me provide more blog entries and examples via GitHub, any contributions provided is greatly appreciated.

Thanks for your support.

[](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=EV2ZLZBABFJ34&lc=AU&item_name=Research%20%26%20Development¤cy_code=AUD&bn=PP%2dDonationsBF%3abtn_donateCC_LG%2egif%3aNonHosted)