gblache / ui-toolkit Goto Github PK

• Node.js v10+ ( For Application Development )

All the available UI Toolkit Components are to be listed in the src/ui-toolkit.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 />

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 />

To install ui-toolkit locally for development:

git clone [email protected]:holidayextras/ui-toolkit.git
cd ui-toolkit
npm install

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

npm install -g holidayextras/generator-ui-component

Generate a component & follow the prompts

cd src/components
mkdir your-new-component
cd your-new-component
yo ui-component:external

Then require this file in src/ui-toolkit.js

// src/ui-toolkit.js
UIToolkit.YourNewComponent = require('./components/your-new-component');

Add the functionality to your component in your-new-component/code/. For more information on this directory structure, view the component generator documentation

The styles are currently written in LESS and live in the src/ 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

There are two ways you can view your component:

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

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" />
);
React.render(example, mountNode);

2. Then add a link to the navigation in .docs/src/Nav.jsx.
3. 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>

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

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.

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

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

Run & watch the documentation in development:

grunt 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

You can use the following build commands via terminal:

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.

grunt build

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

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

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