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>

---

🤖 AI Agent Skill

This repository includes an AI agent skill that teaches coding agents (Claude, Copilot, Cursor, Codex, etc.) how to build UIs with the Trilogy design system.

Install the skill

npx skills add BouyguesTelecom/trilogy

The skill covers:

• Page structure (Section → Container → content)
• Grid system (12-column Columns/Column, responsive FlexBox)
• Component composition patterns (Card, Accordion, Tabs, Price, etc.)
• Enum usage (uppercase vs lowercase accessors)
• Self-contained landing page generation (HTML + JSX)