Chameleon

This is a ReactJS UI framework designed to provide the most native experience possible automatically across common platforms and devices.

Using Chameleon

The Library

npm install chamel --save

Now you can use it anywhere within your ES6 code via imports.

import FlatButton from 'chamel/lib/FlatButton'

const App = () => {
    return (<div><FlatButton label={'Click Me'} /></div>);
}

The Styles

In order for the correct theme to be propogated throughout each component, it is important that you wrap a root level component in a theme provider.

import ThemeProvider from 'chamel/lib/styles/ChamelThemeProvider';

const App = () => {
    return (
        <ThemeProvider setGlobalStyles={true}>
            <FlatButton label={'Click Me'} />
        </ThemeProvider>
    );
}

Developing, Testing & Building

Docker (Preferred)

The simplest way to interact with chamel is through docker because it provides a predictable environment across all platforms.

docker-compose up

With the above container running, you can open a new tab/window and run tests with:

docker-compose exec chamel npm test

Local Node

If you would like to build the project or develop it locally then follow these steps.

First make sure you have the latest version of node installed and working locally: https://nodejs.org

1. Open your terminal or command prompt and type

npm install

2. Run the development server

npm run dev

###$ 3. Run tests (typically in another terminal tab or window)

npm test

This will start a development server that can be accessed at http://localhost3000

Building and Publishing

We implement CI/CD so every commit to master is automatically pushed to npm.