Xalt UI React Component Library
Table of Contents:
Overview
This project houses code that pertains to the Xalt UI React component library for web and native mobile platforms. This contains our client UI component code and supporting libraries. 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.
Getting Started
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.
-
NodeJS must be installed on your machine.
-
Yarn must be installed on your machine.
-
React Native CLI - This should be installed globally
npm install react-native-cli -g -
Xcode for iOS Development
-
Android Studio for Android Development
- See React Native's documentation and select the "React Native CLI Quickstart" tab and review the Installing Dependencies section depending on the OS utilized.
-
Clone this repo
Standalone using NPM
-
In a terminal/console, navigate to the root of the project and run the following command:
npm install
Standalone using YARN
-
In a terminal/console, navigate to the root of the project and run the following command:
yarn install
With Lerna project
This will setup your environment for development and link the necessary libraries inside this repository.
Afterwards you will be able to make changes in any of the libraries and test those changes running the client.
Please notice that we are hoisting some node_modules to the root directory.
We recommend you do not hoist react-native or any module that has a dependency on react-native.
Lerna and yarn workspaces are used to provided support for linking to projects inside this repository.
Lerna will also be used for publishing your changes to the projects specific npm module after a successful merge with master.
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.
After installing yarn:
-
In a terminal/console, navigate to the root of the Lerna project and run the following command:
lerna bootstrap
Running the HTML Library
To start the Storybook web server on http://localhost:9009:
npm run storybook-web
To manually generate the test report output file:
npm run test:generate-output
Running the Native Library
To start the Storybook native project:
npm run storybook-native
npm run start-library-ios
To manually generate the React Native stories loader file:
npm run pre-native-storybook