[WIP] Implement UI Kit

[xekc]

Behavior:

• UI Kit introduces a list of examples;
• each example is a component (or composition of components) to render;
• JS sources (source code) of all components in the example are displayed;
• user can interact with source code's field; js code is evaluated in runtime, whole in browser;
• it's possible to edit futher modules (which are imported in the source code of first-level components);
• used css classes are analyzed from compiled js' AST (abstract syntax tree);
• LESS blocks (source code) representing those CSS classes is displayed. Each block is stored in its own tab;
• user can edit LESS code as well; it's also evaluated in runtime, whole in browser;
• user can work with a number of examples sequantially: all changes made in other examples (for other componets and CSS blocks) are saved; they affect next examples.
• user can create his own (new) example;
• Additional: user can pick up the version of libertysoil-site repository to fetch sources from.

General approach:

• create webpack loader to highlight imported modules in CSS (next step)
• create independent bundle of initial CSS for UI-Kit itself;
• inject that bundle to <style id="ui-kit" />;
• make the bundle enabled only at the UI Kit's page;
• disable main bundle of styles at the UI Kit's page to prevent conflicts;
• provide webpackJsonp() in context;
• provide global registry to store transformed modules (for those which are transformed by user);
• provide context (/src/) and available paths' pattern for dynamic require();
• such require() resolves modules from either main bundle or global registry (if they're present there);
• resolve all runtime sources from github repository (to show them to user);
• transform JSX and ES6/7 with babel-core and related presets;
• analyze transformed js-code to find dependencies;
• emulate es modules' exports; store each evaluated module in the registry;
• analyze rendered elements' (React.createElement()) props (through AST of generated code); inject runtime spy function call (stored in global level) to the transformed js-code to figure out used CSS classes (blocks in general);
• fetch sources of required CSS blocks, provide them as tabs to the user;
• compile LESS with less.js, inject (insert or replace) to related block's region in <style id="ui-kit" />;

[xekc]

➤ Coveralls commented:

Coverage remained the same at 56.796% when pulling 4cc1302884d17fa45c20011fcb5c5da58ed65fe2 on feature/ui-kit into cfbc3d4b90887badb354297b1e4c0e8e7a857e90 on stable.

[xekc]

➤ Coveralls commented:

Coverage decreased (-0.6%) to 56.218% when pulling 84db94741232ab68d8d866f36e2bb3d739c29084 on feature/ui-kit into cfbc3d4b90887badb354297b1e4c0e8e7a857e90 on stable.

[xekc]

➤ Coveralls commented:

Coverage decreased (-0.6%) to 56.218% when pulling 84db94741232ab68d8d866f36e2bb3d739c29084 on feature/ui-kit into cfbc3d4b90887badb354297b1e4c0e8e7a857e90 on stable.

[xekc]

➤ Coveralls commented:

Coverage decreased (-0.6%) to 56.202% when pulling 8eca74a9a7cb49901179b3e81f21b7ce926d2d63 on feature/ui-kit into cfbc3d4b90887badb354297b1e4c0e8e7a857e90 on stable.

[xekc]

➤ Coveralls commented:

Coverage decreased (-2.0%) to 54.829% when pulling b68abbf78382e399e6f64d014380eb256a2d9a4b on feature/ui-kit into cfbc3d4b90887badb354297b1e4c0e8e7a857e90 on stable.

[xekc]

➤ Coveralls commented:

Coverage decreased (-2.0%) to 54.829% when pulling b68abbf78382e399e6f64d014380eb256a2d9a4b on feature/ui-kit into cfbc3d4b90887badb354297b1e4c0e8e7a857e90 on stable.