treeline-react-core-components

View the demo app

Installation

npm install --save treeline-react-core-components

Peer Dependencies

npm install --save antd api-fetcher-treeline react-localize-redux

Basic Usage

The Ant design library is a peer dependency so be sure to include ant css at the root of your project. Also include the base styles from this project.

// In App.js
import 'antd/dist/antd.css';
import 'treeline-react-core-components/index.css';

Import components as follows: import ComponentName from 'treeline-react-core-components/ComponentName';

// For example, import UserAvatar as follows
import UserAvatar from 'treeline-react-core-components/UserAvatar';

Setting up Localization for your react project

using the LocalizationInitializer component

1. Make sure you have react-localize-redux installed

2. Create a directory called 'Localization' in /src and create a file called 'LocalizationInit.js'

3. Paste this in LocalizationInit.js and update as needed

import React from 'react';
import PropTypes from 'prop-types';
import { withRouter } from 'react-router-dom';
import { LocalizeProvider, withLocalize } from 'react-localize-redux';
import LocalizationInitializer from 'treeline-react-core-components/LocalizationInitializer';
import coreKeys from 'treeline-react-core-components/localizationKeys'; // These keys are referenced by components in the lib

const WrappedInit = withRouter(withLocalize(LocalizationInitializer));

const keys = [...coreKeys, 'another_key']; // Add any other localization keys you need for your app here.

export default class LocalizationInit extends React.Component {
	static propTypes = {
		children: PropTypes.element,
	};

	render() {
		const url = this.getLocalizationApiUrl();
		return (
			<LocalizeProvider>
				<WrappedInit localizationKeys={keys} localizationApiUrl={url}>
					{this.renderChildren}
				</WrappedInit>
			</LocalizeProvider>
		);
	}

	renderChildren = ({ isLoadingTranslations }) => {
		if (isLoadingTranslations) {
			return <div>Loading....</div>;
		}
		return this.props.children;
	};

	// You might need to put different logic in this function for identifying
	// the Localization service url. Or just add an environment variable in
	// your .env(s) called REACT_APP_LOCALIZATION_API_URL that points to the url for the treeline
	// Localization service
	getLocalizationApiUrl = () => {
		const { REACT_APP_LOCALIZATION_API_URL: url } = process.env;
		return url;
	};
}

4. Import LocalizationInit into your App.js file and nest it under <Router> maybe like this:

//....
import LocalizationInit from '../Localization/LocalizationInit';
import { BrowserRouter as Router } from 'react-router-dom';
//....

export default function App() {
	return (
		<Router>
			<LocalizationInit>
				<div>{/** Your App's routes go here */}</div>
			</LocalizationInit>
		</Router>
	);
}

5. All set.

Contribution

Getting started

Clone the repo and npm install the project's dependencies. npm start will start the webpack development server for the demo app. Viewing the demo app will allow you to easily review component descriptions, proptypes and examples.

Adding a new component to the library

Adding a new component to /src/components will automatically add a new associated component page to the demo app. See the file /scripts/generateComponentData.js if you are curious how this is done. Otherwise, follow the example of the UserAvatar component when writing a component description and annotating the component's proptypes. Your notes and examples will be included in the component page for your new component.

Building & publishing the library

To transpile your components and build the output files, run npm run build:lib. The output files will be placed under a directory called 'lib'.

Follow these steps to publish a new version of the library after adding or editing a component:

1. Udpdate the version field in the package.json
2. Rebuild the library with npm run build:lib
3. Enter npm adduser and add treeline-dev as the user with [email protected] as the user email
4. cd into /lib
5. Enter npm publish

Then navigate to the npm registry page for treeline-react-core-components to ensure your latest version is there. Click here

Treeline colors

Add these to project css files as needed.

.color-gray {
	color: #545454;
}

.color-white {
	color: #ffffff;
}

.color-red {
	color: #fc601f;
}

.color-orange {
	color: #ffa500;
}

.color-true-red {
	color: red;
}

.color-darkgreen {
	color: #598a18;
}

.color-lightgreen {
	color: #92d050;
}

.color-d2d6d8 {
	color: #d2d6d8;
}

Available background colors

.bg-dark-green {
	background-color: #598a18;
	color: #ffffff;
}

.bg-light-green {
	background-color: rgb(146, 208, 80);
	color: #ffffff;
}

.bg-yellow {
	background-color: #ffea00;
}

.bg-red {
	background-color: #fc601f;
	color: #ffffff;
}

.bg-orange {
	background-color: #ffa500;
	color: #ffffff;
}

.bg-light-blue {
	background-color: #529bd4;
	color: #ffffff;
}

.bg-d2d6d8 {
	background-color: #d2d6d8;
}
.bg-e9ebec {
	background-color: #e9ebec;
}
.bg-light-gray {
	background-color: #f5f5f5;
}
.bg-red {
	background-color: #fc601f;
	color: #ffffff;
}
.bg-transparent {
	background-color: transparent;
}
.bg-white {
	background-color: #ffffff;
}
.bg-yellow {
	background-color: #ffea00;
}