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

Install

$ npm install --save collector-portal-framework

How to use

Import Collectors theme from collector-portal-framework/themes/collector or create your own. Then import ThemeProvider and injectGlobalStyles from collector-portal-framework and provide them the theme.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ThemeProvider, injectGlobalStyles } from 'collector-portal-framework';
import * as theme from 'collector-portal-framework/dist/themes/collector';
import { YourApp } from './App';

injectGlobalStyles(theme);

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <YourApp />
  </ThemeProvider>,
  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