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
|