# 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.

Structure

.
├── react             
   ├── components      # ◀ React functional components
   ├── context         # Providers (Themes , styles / hashed styles)
   ├── events          # Event type definitions
   ├── helpers         # Utility functions
   ├── objects         # Atoms & facets definition & implementation
   ├── services        # Hooks
   └── types           # Typescript types

Usage

npm i @trilogy-ds/react

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

<Button variant='PRIMARY'>My Button</Button>


### 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:

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

Wrap your app's root component with it:

```typescript jsx <TrilogyProvider mangled injectTrilogyAssets>
```
<App />
```
</TrilogyProvider> ```

Native Usage

Import the TrilogyThemeProvider along with SVGicons & colors from @trilogy-ds/assets library:

typescript jsx import { TrilogyThemeProvider, defaultTheme } from '@trilogy-ds/react/lib/context/providerTheme' import { SVGicons } from '@trilogy-ds/assets/lib/iconsPath'
Wrap your app's root component with it:

```typescript jsx const theme = {
```
...defaultTheme,
icons: SVGicons,
// here: override theme colors
```
}

<TrilogyThemeProvider theme={theme}>
```
<AppNative />
```
</TrilogyThemeProvider> ```

Environment

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

Example

Check out our example project using Trilogy for consumption.

Contributing

Read the contributing guide to become familiar with our development process, suggest fixes for bugs and improvements, and understand how to construct and assess your modifications

Changelog

The changelog is consistently refreshed to show the modifications made in each new version.

Détail du package

@trilogy-ds/react

readme