@holidayextras/ui-toolkit


Under Active Development

Requirements:

• Node.js v10+ ( For Application Development )

UI Toolkit Usage

All the available UI Toolkit Components are to be listed in the dist/index.js so they can be accessed via:

var UIToolkit = require('ui-toolkit');

// Custom Components
<UIToolkit.Button />
<UIToolkit.Flag />
<UIToolkit.Rating />
<UIToolkit.Reviews />
<UIToolkit.Tile />
<UIToolkit.Image />
<UIToolkit.Input />

If you would like to cherry pick which components to include in your project, you can use this method:

var Button = require('ui-toolkit').Button;
<Button />

please note this still includes the entire ui-toolkit

Install for development

To install ui-toolkit locally for development:

git clone [e-mail]:holidayextras/ui-toolkit.git
cd ui-toolkit
npm install

Troubleshooting

If you have any problems installing the ui-toolkit then please view the troubleshooting guide which contains common errors and solutions. If you cannot find your specific problem then please create a github issue

Adding a new component

Creating the component

Generate a component & follow the prompts

cd src/components
mkdir your-new-component
cd your-new-component

Then require this file in dist/index.js

// dist/index.js
UIToolkit.YourNewComponent = require('./components/your-new-component');

Adding functionality

Add the functionality to your component in your-new-component/your-new-component.jsx.

Adding styles

The styles are currently written in LESS and live in the component directory.

You will need to create a new file for your component

cd src/less
touch _your-new-component.less
open _your-new-component.less

Then import this file in src/less/toolkit.less

// src/less/toolkit.less
@import "_your-new-component";

Running grunt less will compile this to dist/toolkit.css

Viewing your component in the browser

There are two ways you can view your component:

1. In the documentation
2. Standalone (currently doesn't bring in ui-toolkit styles)

In the documentation

Note: This needs to and will be be simplified

1. In ./docs/examples/, create a new jsx file that describes your component. e.g.

// docs/examples/YourNewComponent.jsx
var example = (
  <UIToolkit.YourNewComponent foo="bar" />
);
ReactDOM.render(example, mountNode);

1. Then add a link to the navigation in .docs/src/Nav.jsx.
2. In ./docs/src/Components.jsx, add a new <article>, similar to the existing ones e.g.

<article>
  <h3 id="your-new-component">Your new component</h3>
  <p>Your new component description</p>
  <CustomComponent codeText={fs.readFileSync(__dirname + '/../examples/YourNewComponent.jsx', 'utf8')} />
</article>

1. You should now be able to see your component when running npm run docs from the root of ui-toolkit

Standalone (currently doesn't bring in ui-toolkit styles)

cd src/components/your-new-component
npm run build-dev

Browserify bundles from the dev/example.jsx. Loading the dev/index.html in your browser will display the component.

UI Toolkit Themes

A collection of custom themes for UI Toolkit are coming soon.

Component Documentation

You can view the React Components in your browser by generating and viewing the docs:

Run & watch the documentation in development:

npm run docs

Building so you can upload to a remote docs server that does not require Node:

grunt docs-build

You will only need to upload the following static assets once generated:

• assets/
• vendor/
• index.html

Grunt Terminal Commands:

THIS SECTION IS A WORK IN PROGRESS

You can use the following build commands via terminal:

Build for Distribution:

The following command will compile Less Styles into a CSS and Concat JS files for Distribution.

This is the most common command you will want to use and is required to view any changed you made in a browser or simulator.

npm run build

Create a Major Release:

The following will:

1. Increase the build's major number ( e.g. v 1.2.3 => v 2.0.0 )
2. Build & Package Distribution Files
3. Create Tag Branch & Perform a git commit
4. Generated Documentation will be merged into gh-pages

grunt release-major --changelogtxt="Some changes happened"

Create a Minor Release:

Once you have merged your work into master, ensure you build the standalone assets (npm run build and npm run docs) commit these compiled files to master then release as below...

The following will:

1. Increase the build's minor number ( e.g. v 1.2.3 => v 1.3.0 )
2. Build & Package Distribution Files
3. Create Tag Branch & Perform a git commit
4. Generated Documentation will be merged into gh-pages

grunt release-minor --changelogtxt="Some changes happened"

Create a Release Patch:

The following will:

1. Increase the build's patch number ( e.g. v 1.2.3 => v 1.2.4 )
2. Build & Package Distribution Files
3. Create Tag Branch & Perform a git commit
4. Generated Documentation will be merged into gh-pages

grunt release-patch --changelogtxt="Some changes happened"