# ui-react-component-kit
> ui-react-component-kit ======================== [](https://travis-ci.org/Rob-Leggett/ui-react-component-kit) [ · ISC license · 0 weekly downloads
> **Deprecated.** This package is deprecated.
## Install
```sh
npm install ui-react-component-kit
pnpm add ui-react-component-kit
yarn add ui-react-component-kit
bun add ui-react-component-kit
```
## Health
**Score 10/100 (F)** — status: deprecated.
Negative: deprecated.
## Facts
| | |
|---|---|
| Version | 0.5.2 |
| Published | 2018-06-22 |
| First published | 2018-03-10 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 1.9 MB |
| Known vulnerabilities | 0 (+25 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | rleggett |
## Links
- npm: https://www.npmjs.com/package/ui-react-component-kit
- npm.io page: https://npm.io/package/ui-react-component-kit
## Dependencies (3)
- [axios](https://npm.io/package/axios.md) 0.18.0
- [react-idle-timer](https://npm.io/package/react-idle-timer.md) 3.0.0
- [styled-components](https://npm.io/package/styled-components.md) 3.3.3
## Recent versions
- 0.5.2 (latest) — 2018-06-22
- 0.5.1 — 2018-04-20
- 0.5.0 — 2018-04-19
- 0.4.1 — 2018-04-12
- 0.4.0 — 2018-04-11
- 0.3.3 — 2018-04-10
- 0.3.2 — 2018-04-09
- 0.3.1 — 2018-04-07
- 0.3.0 — 2018-04-06
- 0.2.2 — 2018-04-03
- 0.2.1 — 2018-04-02
- 0.2.0 — 2018-04-01
- 0.1.3 — 2018-03-29
- 0.1.2 — 2018-03-29
- 0.1.1 — 2018-03-27
- … 13 more at https://npm.io/package/ui-react-component-kit/versions
## README
ui-react-component-kit
========================
[](https://travis-ci.org/Rob-Leggett/ui-react-component-kit)
[](https://www.npmjs.com/package/ui-react-component-kit)
[](https://codecov.io/gh/Rob-Leggett/ui-react-component-kit)
[](https://david-dm.org/Rob-Leggett/ui-react-component-kit)
[](https://snyk.io/test/github/rob-leggett/ui-react-component-kit?targetFile=package.json)
A react component library that is not prescribing state management and has theming capabilities.
# Table of contents
1. [Installation](#installation)
1. [Prerequisites](#installation-prerequisites)
2. [Install Dependencies](#install-dependencies)
2. [Usage](#usage)
1. [How To](#how-to)
2. [Prerequisites](#usage-prerequisites)
3. [Theming](#theming)
3. [Dev Process](#dev-process)
4. [Styleguide](#styleguide)
5. [Metrics](#metrics)
6. [Third-Party Dependencies](#third-party-dependencies)
1. [Microservice](#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:
``` bash
$ git clone https://github.com/Rob-Leggett/ui-react-component-kit.git
```
### Install Dependencies
```bash
$ 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
```bash
$ 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.
```html
```
### 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]
```javascript static
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 (
{/* rest of your app */}
);
}
}
export default App
```
index.[js|ts]
```javascript static
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
,
document.getElementById('root')
);
```
## Dev Process
To ensure you are using the correct version of Node:
```bash
$ yarn check-node | npm run check-node
```
To commit using commitizen:
```bash
$ yarn commit | npm run commit
```
To build the library:
```bash
$ yarn build | npm run build
```
To perform linting:
```bash
$ yarn lint | npm run lint
```
To automatically fix linting where possible and perform linting:
```bash
$ yarn lint:fix | npm run lint:fix
```
To perform testing (unit & snapshot):
```bash
$ yarn test | npm run test
```
To update snapshots and perform testing (unit & snapshot):
```bash
$ yarn test:update-snapshot | npm run test:update-snapshot
```
To start a mock server for sample api support:
```bash
$ yarn mock-server-start | npm run mock-server-start
```
To run styleguide - without api support:
* styleguide - [http://localhost:6060]("http://localhost:6060)
```bash
$ 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)
```bash
$ yarn styleguide:with-mock-server | npm run styleguide:with-mock-server
```
To build a static version of styleguide - without api support:
```bash
$ 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
```text
GET - ${endpoint}?query=${term}&limit=${limit}
```
| Parameter | Description | Example | Default |
|-----------|---------------------------------------------------------|----------------------------------|---------|
| endpoint | The addresses endpoint | https://localhost:3000/addresses | N/A |
| term | Query to best match addresses to return in the response | 123 Cha | N/A |
| limit | Max number of addresses to return in the response | 15 | 10 |
##### Success Response Example (HTTP Status Code 2XX)
```json
{
"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)
```json
{
"data": []
}
```
##### Error Response Example (HTTP Status Code 4XX or 5XX)
```json
{}
```
#### Get Address Details
```text
GET - ${endpoint}/${id}
```
| Parameter | Description | Example | Default |
|-----------|----------------------------------------------------------|----------------------------------------|---------|
| endpoint | The address details endpoint | https://localhost:3000/addresses/45678 | N/A |
| id | ID of the address to return the details via the response | 45678 | N/A |
##### 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
```json
{
"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)
```json
{}
```
## 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)
---
_Source: https://npm.io/package/ui-react-component-kit · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._