Collector Portal Framework

A collection of UI components and helper functions used in a couple of our internal and external web applications at Collector Bank. Documentation and an interactive test area can be found here.

This package contains

• UI components
• Formatter functions
• HTTP module for doing API requests
• Brand colors and fonts

Technologies used

• React
• TypeScript
• ~~Glamorous~~ emotion

Install

$ npm install --save collector-portal-framework

How to use

import React from 'react';
import ReactDOM from 'react-dom';
import { CollectorPortalFramework } from 'collector-portal-framework';
import { YourApp } from './App';

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

Available components

You can see a demo of the UI components here. If you want your own local copy you can clone this repo and do npm install followed by npm start to start a local instance of Storybook.

Generic components

| Component | Source | | ----------------------------------------------------------------- | ---------------------------------------------------------------- | | Alert | Source | | Amount selector | Source | | Badge | Source | | Button | Source | | Button group | Source | | Card | Source | | Checkbox | Source | | Checkbox group | Source | | Date picker | Source | | Date picker group | Source | | Input | Source | | Paginator | Source | | Radio button | Source | | Radio button group | Source | | Select | Source | | Slider | Source | | Spinner | Source | | Tags Input | Source |

Typographic components

| Component | Source | | --------- | -------------------------------------------- | | H1 | Source | | H2 | Source | | H3 | Source | | Text | Source | | TextLink | Source |

"Portal specific" components

| Component | Source | | ------------- | -------------------------------------------- | | Togglable | Source | | Fieldset | Source | | Logo | Source | | MainContainer | Source | | MainMenu | Source | | Modal | Source | | PageHeader | Source | | Tabs | Source | | ValueList | Source |