## # Install

    yarn add @arckinteractive/noah-ui

## # Integrate

Noah UI has been built in a way that does not lock you into using our theme and styles. Components have been written without scoped CSS and the element selectors are not hard coded - you can bring in your own favorite CSS framework or customize ours.

### # Using Noah CSS

To use our styles, simply import them, when you initialize your app:

    import Vue from 'vue';
    import NoahUI from '@arckinteractive/noah-ui';

    import '@arckinteractive/noah-ui/src/styles/fonts.scss';
    import '@arckinteractive/noah-ui/src/styles/all.scss';

    Vue.use(NoahUI);

Noah UI uses CSS custom properties, which are easy to work with and customize. Take a look at `./src/styles/_root.scss` to see the full list of used CSS variables. You can customize any of these variables anywhere in your project's CSS.

    /** Override globally **/
    :root {
        --hsl-danger: 4, 46%, 44%;
    }

    /** Override in a specific scope **/
    .my-red-button {
        --hsl-danger: 4, 46%, 44%;
    }

If you are planning to support older browsers, you will need to setup your project to use PostCSS custom properties plugin
.

### # Using your own CSS

Noah UI allows you to use your own CSS framework, by giving you a wide range of control via config object. See `./src/noah.config.js` for a full list of components and options. Let's say you are using Bootstrap as your CSS framework:

    import Vue from 'vue';
    import NoahUI from '@arckinteractive/noah-ui';
    import config from '@arckinteractive/noah-ui/src/noah.config.js';

    config.components.Button = {
        baseClass: 'btn',
        modifierPrefix: 'btn-',
    }

    Vue.use(NoahUI, config);

Now your buttons will have the `btn btn-*` CSS selectors, instead of `n-button --*`.

## # Components

Component | Path | Async | Description
--- | --- | --- | ---
NBadge | atoms |  | Badges are units of information that summarize elements's content, e.g. number of items in a shopping card, or number of unread messages
NButton | atoms |  | Button is a clickable element, which can be used in forms, as well as a navigation element. Noah UI buttons natively support Vue Router `to` property.
NControl | atoms |  | Controls wraps an input element to create a stylable form element with an input/select, icons and inline labels
NDiv | atoms |  | Basic component that allows you to use Styling mixin
NField | atoms |  | Field is a wrapper component that provides uniform layout for form elements: label, help text, validation messages etc. Field component can be used in conjunction with the Input mixin to introduce new form elements.
NForm | atoms |  |
NHighlight | atoms |  | Highlight provides XSS-safe text highlighting
NIcon | atoms |  | Icons are glyphs used to provide visual cues
NImg | atoms |  | Render an image with alternative source for vertical display (e.g. mobile device in a portrait mode)
NLayer | atoms |  | Layer is a utility component that provides accessible stacking of overlay components
NMedia | atoms |  | Media component is a responsive container for images, videos, iframes etc.
NMessage | atoms |  | Messages draw users attention to important/useful information
NTag | atoms |  | Tags are bits of information that describe an item
NText | atoms |  | Text components provides a simple wrapper to render text and headings
NCheckbox | molecules |  |
NCheckboxGroup | molecules |  |
NDialog | molecules |  | Dialogs present information in an overlay/popup window

NDropzone

molecules

Dropzone component allows you to implement a file input with a drag&drop support and previews. You can add your custom handler if you want to upload files to your server before the form is submitted. You can add a handler to delete files from the server. If you don't provide a send handler, the input value will contain a list of selected file objects. Files will have base64 property attached to them, which you can use to upload files to the server.

NEmbed | molecules |  | Embed component allows you to cloak an element (e.g. video or iframe) with an overlay until user clicks on it
NList | molecules |  | Renders a list of items
NMenuItem | molecules |  | Menu item is a navigation element that can have sub-navigation items
NPagination | molecules |  | Pagination allows users to navigate through a larger set of items
NPopup | molecules |  | Popups are hidden elements that can be displayed conditionally as in a floating layer
NRadio | molecules |  |
NRadioGroup | molecules |  |
NSelect | molecules |  |
NTextField | molecules |  |
NTile | molecules |  | Tiles is a horizontally aligned block of information, which can be used to standardize navigation, as well as to display list items. Tiles usually contain an icon, title, subtitle and certain actions.
NCarousel | organisms |  | Content carousel built on top of tiny-slider
NDataTable | organisms |  | Data table is a wrapper component that encapsulates search, sort and pagination of tabular data.
NDrawer | organisms |  |
NHero | organisms |  |
NInfiniteList | organisms |  | Data table is a wrapper component that encapsulates search, sort and pagination of tabular data.
NMenu | organisms |  | Menu allows to build a tree of navigation elements from an array of items
NModule | organisms |  | Modules group header, content and footer into a organic component
NTable | organisms |  | Tables are used to represent data in a sortable manner
NTabs | organisms |  | Tabs allow users to navigation between a set of related items
NAlert | plugins |  | Alerts are system notifications and errors. This component is used by the $alert plugin and is not intended to be used directly
NConfirm | plugins |  | Confirm component is a Dialog wrapper used by `v-confirm` directive and `$confirm()` plugin This component is not intended to be used directly

NoahUi provides a wide range of commonly used UI elements and patterns. Each component has a set of configuration options that can be altered via a config object when NoahUI is first initialized.

    import Vue from 'vue';
    import NoahUI from 'noah-ui';

    Vue.use(NoahUI, {
        breakpoints: {
            //...
        },
        components: {
            NButton: {
                // Most components are loaded asynchronously. We have identified a set of components that
                // in our experience are used most widely than others and set them for sync loading
                // If you would like to include the component in your webpack bundle, set async to false,
                // and vice versa if you want to load the component asynchronously, set it to true.
                async: false,

                // If you would like to replace the component with your custom implementation,
                // you can specify, which directory the component should be loaded from
                // This can be handy, if you need to make high level modifications to
                // the component code
                path: '/path/to/component/directory',

                /**
                * Because working with paths can be tricky, you can specify your custom loader
                */
                loader: () => {
                    return require('/path/to/component/').default;

                    // or

                    return () => import('/path/to/component');
                },

                // Each component has a set of additional configuration options,
                // such as CSS class name, modifier prefixes and modifier map,
                // icon classes to use etc.
                // Please check individual component file to discover a full list of available
                // configuration options

                // These configuration options allow you to bring in your own CSS library,
                // and reconfigure CSS selectors, e.g. to use Bootstrap instead of NoahUi,
                // you could do something like
                baseClass: 'btn',
                modifierPrefix: 'btn-',
                classMap: {
                    'btn-notice': 'btn-info',
                    'btn-small': 'btn-sm',
                    // ...
                },
            },

            // Should you need to completely eliminate a component from the build, e.g. if you are only
            // using a handful of components for a basic UI, you can do so by setting component options to false or null
            NDataTable: null,
        },
    })