totology-components v0.0.23

Trilogy React

🚀 Quick Start

Project structure

.
├── config                  # Build / CI config
├── demo                    # Native / Web Demo views
├── docs                    # Storybook / TS documentation
├── lib                     # lib (dist) folder
├── mobile                  # Android / IOS Native root
├── scripts                 # Build scripts
├── styles                  # - Trilogy SCSS Styles
├── src                     # Source files
│   ├── assets              # - Fonts
│   ├── components       ◀  # - React functional components
│   ├── config              # React Native Config
│   ├── context             # Trilogy Providers (styles / hashed styles)
│   ├── events              # - Event type definitions
│   ├── helpers             # - Utility functions
│   ├── objects             # - Atoms & facets definition & implementation
│   │   ├── atoms           #
│   │   └── facets          #
│   ├── services            # - hooks
├── LICENSE
├── package.json            # Node package reference
├── tsconfig.json           # Typescript configuration
└── README.md

Quick Start 🚀

🚨 Prerequisites

Web

• Node.js (>= 18.0.0)
• npm (>= 9.0.0)

Mobile (Android / IOS)

• Java
• cocoapods (>= 1.10.1) (only for ios)
• Xcode (>= 12.5.1) (only for ios)
• Android Studio (>= 4.2.2) (only for android)

See how to setup your environment for Android and IOS

Development Setup

🖥️ Web

• npm install: This script is used to install the dependencies of the project.
• npm run start: This script is used to run the app in development mode.
• npm run build: This deletes the 'lib' directory, runs the pre-build and builds the project before finishing up with other build tasks. You will need to run this script when you want to generate a production build of the app.
• npm run build:css: This script uses webpack to compile the styles.
• npm run storybook: This script is used to run the Storybook.
• npm run build:storybook: This script is used for building the Storybook under the docs/storybook directory.

📱 Mobile (Android / IOS)

• npm run postinstall:native: This script is used to install the dependencies of the native app.
• npm run start:native: This script is used to run the app in development mode.

🧰 Development experience

• npm run lint: This script is used to maintain code quality by checking for style writing errors in the code.
• npm run test: This script is used to run Jest tests.

✨ Trilogy Provider Usage 🙋

The TrilogyProvider simplifies integrating Trilogy style into your app by wrapping your entry point with a provider. It offers two props for customization:

• mangled [optionnal]: Apply compressed styling for performance.
• injectTrilogyAssets: Inject Trilogy assets directly into the DOM.

Usage

Import the TrilogyProvider component:

import {TrilogyProvider} from "@bytel/trilogy-react-ts";

Wrap your app's root component with TrilogyProvider:

  <TrilogyProvider mangled injectTrilogyAssets>
        <Router>
          {routeComponents}
        </Router>
    </TrilogyProvider>

Android Setup

See 👉 https://reactnative.dev/docs/environment-setup

1. Node & Watchman

Make sure you have installed Node + Watchman :

brew install node

brew install watchman

1.1. Java Development Kit

ARM / Intel Hybrid Compatible Distribution :

brew tap homebrew/cask-versions

brew install --cask zulu11

1.2. Install Android Studio

See 👉 https://developer.android.com/studio

2. Install the Android SDK

• Appearance & Behavior → System Settings → Android SDK

• Install : Android 13 (Tiramisu) (Version Compatible ARM + Intel)

• Then Create New Device and select "Android 13 (Tiramisu)"

3. Configure the ANDROID_HOME environment variable

Add the following lines to your ~/.zprofile or ~/.zshrc (if you are using bash, then ~/.bash_profile or ~/.bashrc) config file:

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools

4. Run Android App

cd mobile
npm i         # Install all node dependencies
npm run android | npm start # Start and launch the android simulator

Run Native Project

cd mobile
npm i         # Install all node dependencies
npm run ios | npm start   # Start and launch the ios simulator

Install

npm i @bytel/trilogy-react-ts
# or
yarn add @bytel/trilogy-react-ts

Sample Use WEB / NATIVE

import { Button, Text } from '@bytel/trilogy-react-ts'

<Button variant='PRIMARY'>My Button</Button>
<Text level='1'>My Text</Text>

Launch Components Documentation

Based on JSDOC components

npm run start:docs