treeline-react-core-components v2.1.4
treeline-react-core-components
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
Make sure you have
react-localize-redux
installedCreate a directory called 'Localization' in /src and create a file called 'LocalizationInit.js'
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;
};
}
- Import
LocalizationInit
into yourApp.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>
);
}
- 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:
- Udpdate the version field in the package.json
- Rebuild the library with
npm run build:lib
- Enter
npm adduser
and add treeline-dev as the user with dev@abovethetreeline.com as the user email - cd into /lib
- 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;
}