Trilogy DS

🚀 Quick Start

Trilogy DS, developed by Bouygues Telecom, is a multiplatform design system ( Web / React / React Native ) with reusable components with same codebase.

🚨 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

👷 Mobile Usage with Expo

If you haven't already installed Expo CLI, you can install it globally:

npm install -g expo-cli

Setup Expo for Native Development:

npm run setup:native:expo

Build the Project:

npm run build

Start the Expo Project:

npm run start:native:expo

Install the Test Application:

• [ANDROID] - Press "a" to install the test application on Android.
• [iOS] - Press "i" to install the test application on iOS.

---

Usage

npm i @trilogy-ds/react

import { Button, Text } from '@trilogy-ds/react';

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

Trilogy Provider - Import directly css styles

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

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

Web Usage

1. Import the TrilogyProvider component:

   import { TrilogyProvider } from "@trilogy-ds/react/lib/context/provider"

2. Wrap your app's root component with it:

     <TrilogyProvider mangled injectTrilogyAssets>
       <App />
     </TrilogyProvider>

Native Usage

1. Import the TrilogyThemeProvider along with SVGicons & colors from trilogy-assets library:

   import { TrilogyThemeProvider, defaultTheme } from '@trilogy-ds/react/lib/context/providerTheme'
   import { SVGicons } from '@trilogy-ds/assets/lib/iconsPath'

2. Wrap your app's root component with it:

     const theme = {
       ...defaultTheme,
       icons: SVGicons,
       // here: override theme colors
     }
   
     <TrilogyThemeProvider theme={theme}>
       <AppNative />
     </TrilogyThemeProvider>