# Tiki UI Kit for React-Native

[![npm](https://img.shields.io/npm/v/@lamvd0101/tiki-ui?color=brightgreen&label=npm%20package)](https://npmjs.com/package/@lamvd0101/tiki-ui) [![npm](https://img.shields.io/npm/dm/@lamvd0101/tiki-ui.svg)](https://npmjs.com/package/@lamvd0101/tiki-ui)

The operation to build and maintain a Design Language System includes people, processes, rules, tools, guides, etc...

## Contents

- [Installation](#installation)
- [Get Started](#get-started)
- [Documentation](#documentation)
- [Changelog](#changelog)
- [Contributors](#contributors)
- [License](#license)

## Installation

```bash
# NPM
npm install @lamvd0101/tiki-ui
```

```bash
# Yarn
yarn add @lamvd0101/tiki-ui
```

**iOS**

- Browse to `node_modules/@lamvd0101/tiki-ui` and drag the folder `Fonts` to your project in Xcode. **Make sure your app is checked under "Add to targets" and that "Create groups" is checked if you add the whole folder**.
- Edit Info.plist and add a property called Fonts provided by application (or UIAppFonts if Xcode won't autocomplete/not using Xcode) and type in the files you just added.

- List of all available fonts to copy & paste in info.plist

```xml
<key>UIAppFonts</key>
<array>
  <string>Inter-Black.ttf</string>
  <string>Inter-Bold.ttf</string>
  <string>Inter-ExtraBold.ttf</string>
  <string>Inter-ExtraLight.ttf</string>
  <string>Inter-Light.ttf</string>
  <string>Inter-Medium.ttf</string>
  <string>Inter-Regular.ttf</string>
  <string>Inter-SemiBold.ttf</string>
  <string>Inter-Thin.ttf</string>
</array>
```

**Android**

- Copy the contents in the `Fonts` folder to `android/app/src/main/assets/fonts`

</details>

## Get Started

Add & run `configure function` from the library in your index file

```javascript
import {configure} from '@lamvd0101/tiki-ui';

// Setup common configs of the UI Kit before rendering your Application
configure();
```

**Custom Theme**

The config function can pass a param. Allows to customize the look of the library.

```javascript
type Configs = {
  mapping?: {[key: string]: string},
};
```

```javascript
import {configure} from '@lamvd0101/tiki-ui';

const customTheme = {
  /*
  mapping is an object where the key is any color token
  (You can get it from the documentation content below)
  */
  mapping: {},
};

configure(customTheme);
```

## Documentation

- [Foundation][foundation]
- [Basic Components][basic-components]
- [Advance Components][advance-components]

[foundation]: docs/foundation.md
[basic-components]: docs/basic-components.md
[advance-components]: docs/advance-components.md

## Changelog

- [Releases](https://github.com/tikivn/TKRNUIKit/releases)

## Contributors

This project exists thanks to all the people who contribute.

<a href="https://github.com/tikivn/TKRNCommon/graphs/contributors">
  <img src="https://contrib.rocks/image?repo=tikivn/TKRNCommon" />
</a>

## License

@Tiki