MoneyGeek UI Components

Usage

The MoneyGeek ui-components library is a set of react based DOM components aimed to increase the features of web pages and blog posts of the MoneyGeek websites. This library currently have available the next components to use:

• Best Ranking
• Button
• Column
• Expand/Collapse
• Icon
• OrderedList
• Quote
• Quote Widget
• PremiumRanking

Installation

npm i -S @moneygeek/ui-components

The previous command would install these components in a NodeJS project and they could be used like in the following example.

import { Button } from "@moneygeek/ui-components";

<Button handleClick={() => alert("Clicked!")}>MG Button</Button>

Development

Each component contains three different sections, the component, styles and the unit tests. For styling we are using the React based styled-components library, for unit tests we are using jest and eslint as the project linter.

Setup

If you are using Unix like systems to install the right version of NodeJS it is convenient to use the following command:

nvm install

If you are using Windows based systems you can download the last LTS version of NodeJS from its website (https://nodejs.org/en/).

Once NodeJS is installed you can start adding the project modules using the next command:

npm i

If you want to use yarn instead of npm you could install it using the next command:

npm i -g yarn

You could install the project libraries through yarn using the following command:

yarn

Bulding the Docz Development Bundle

To build the documentation of the existing components you need to run the following command:

npm run docz:dev

or

yarn docz:dev

This would generate a local website in the http://localhost:3000 address with the components that exist currently in the project.

Building the project and running all the test suite with linters included

To run the whole project Continuous Integration you can use the next command:

npm run build:ci

or

yarn build:ci

This would show you if there are any linter errors and whether all the unit tests passed successfully.

Running only the unit tests

If you only need to run the unit tests you could use the following command:

npm test

or

yarn test

Running the linters

If you only need to run the linter (Eslint) you can run it using the next command:

npm run lint

or

yarn lint

Building Parcel transpiler and Docz source code

For building Parcel and Docz transpilers you can use the following command:

npm run build

or

yarn build

Building Parcel

For building Parcel you could use the next command:

npm run parcel:build

or

yarn parcel:build

Building Docz

For building Docz you could use the following command:

npm run docz:build

or

yarn docz:build