@xbotvn/react-ui v1.1.52

UIBOT

UIBOT is an React UI library that we use natively for developing XBOT's applications. The library provides an easy way to get started creating React applicaton without sacrificing customization ability.

Supported platforms

Browser

UIBOT supports the latest, stable releases of all major browsers and platforms. It also supports Internet Explorer 11. You don't need to provide any JavaScript polyfill as it manages unsupported browser features internally and in isolation.

You may experience degraded visuals in IE. IE 10 and below are unsupported due to their lack of support for CSS Flexbox Layout. These browsers were deprecated by Microsoft (end of support) in January 2016.

React

UIBOT supports the most recent versions of React, starting with ^16.8.0 (the one with the hooks).

TypeScript

UIBOT requires a minimum version of TypeScript 3.2.

Installation

npm install --save @xbotvn/ui @xbotvn/utils

Roboto font

UIBOT was designed with the Roboto font in mind. So be sure to follow these instructions. For instance, via Google Web Fonts:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

Font icons

In order to use the font Icon component, you must first add the Material icons font. For instance, via Google Web Fonts:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

Responsive meta tag

UIBOT is developed mobile-first, a strategy in which we first write code for mobile devices, and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your head element.

<meta
  name="viewport"
  content="minimum-scale=1, initial-scale=1, width=device-width"
/>

Developing

If you want to run the project locally, its really easy!

The project uses Storybook for its demos and development environment. To run it locally:

• Clone repo
• npm install
• npm run storybook

Once started the browser will open to the storybook url. From here you can tweak the components and see them build and reload in real time.

You can build storybook as a static web application.

• npm run build-storybook