| 1 | # Xalt UI React Component Library
|
| 2 |
|
| 3 |
|
| 4 | ## Table of Contents:
|
| 5 | - [Overview](#overview)
|
| 6 | - [Getting Started](#getting-started)
|
| 7 | - [Using NPM](#standalone-using-npm)
|
| 8 | - [Using Yarn](#standalone-using-yarn)
|
| 9 | - [Using Lerna](#with-lernahttpsgithubcomlernalerna-project)
|
| 10 | - [Running the HTML Library](#running-the-html-library)
|
| 11 | - [Running the Native Library](#running-the-native-library)
|
| 12 |
|
| 13 |
|
| 14 | ## Overview
|
| 15 | This project houses code that pertains to the Xalt UI React component library for web and native mobile platforms.
|
| 16 | This contains our client UI component code and supporting libraries.
|
| 17 | The overall goal of this project is to keep a single source of truth for the UI building blocks of Xalt web and mobile applications.
|
| 18 |
|
| 19 |
|
| 20 | ## Getting Started
|
| 21 | Before you can start working on the Xalt UI React component library, you'll need to set some things up first depending on your development environment OS.
|
| 22 |
|
| 23 | - [NodeJS](https://nodejs.org/en/) must be installed on your machine.
|
| 24 | - [Yarn](https://yarnpkg.com/) must be installed on your machine.
|
| 25 | - [React Native CLI](https://github.com/react-native-community/cli) - This should be installed globally
|
| 26 |
|
| 27 | npm install react-native-cli -g
|
| 28 |
|
| 29 | - [Xcode](https://itunes.apple.com/us/app/xcode/id497799835?mt=12) for iOS Development
|
| 30 | - [Android Studio](https://developer.android.com/studio) for Android Development
|
| 31 | - See [React Native's documentation](https://facebook.github.io/react-native/docs/getting-started.html) and select the **"React Native CLI Quickstart"** tab and review the **Installing Dependencies** section depending on the OS utilized.
|
| 32 | - Clone this repo
|
| 33 |
|
| 34 |
|
| 35 | ### Standalone using NPM
|
| 36 | - In a terminal/console, navigate to the root of the project and run the following command:
|
| 37 |
|
| 38 | npm install
|
| 39 |
|
| 40 |
|
| 41 | ### Standalone using YARN
|
| 42 | - In a terminal/console, navigate to the root of the project and run the following command:
|
| 43 |
|
| 44 | yarn install
|
| 45 |
|
| 46 |
|
| 47 | ### With [Lerna](https://github.com/lerna/lerna) project
|
| 48 | This will setup your environment for development and link the necessary libraries inside this repository.
|
| 49 | Afterwards you will be able to make changes in any of the libraries and test those changes running the client.
|
| 50 | Please notice that we are hoisting some node_modules to the root directory.
|
| 51 | We recommend you do not `hoist` react-native or any module that has a dependency on react-native.
|
| 52 | Lerna and yarn workspaces are used to provided support for linking to projects inside this repository.
|
| 53 | Lerna will also be used for publishing your changes to the projects specific npm module after a successful merge with master.
|
| 54 | Lerna will keep the projects in sync with repo changes so that the build process will always use the latest version of your changes in any package.
|
| 55 |
|
| 56 | After installing yarn:
|
| 57 | - In a terminal/console, navigate to the root of the Lerna project and run the following command:
|
| 58 |
|
| 59 | lerna bootstrap
|
| 60 |
|
| 61 |
|
| 62 | ## Running the HTML Library
|
| 63 | To start the Storybook web server on http://localhost:9009:
|
| 64 |
|
| 65 | npm run storybook-web
|
| 66 |
|
| 67 | To manually generate the test report output file:
|
| 68 |
|
| 69 | npm run test:generate-output
|
| 70 |
|
| 71 | ## Running the Native Library
|
| 72 | To start the Storybook native project:
|
| 73 |
|
| 74 | npm run storybook-native
|
| 75 | npm run start-library-ios
|
| 76 |
|
| 77 | To manually generate the React Native stories loader file:
|
| 78 |
|
| 79 | npm run pre-native-storybook
|