Trilogy - Design System

Développeur

Tout ce qu'un développeur doit savoir pour bien débuter son projet avec Trilogy se trouve ici !

Installation

Comment utiliser le framework ? Une ligne suffit.

npm i @bytel/trilogy-react

Frameworks

Pour la plupart des frameworks React (Create React App, Astro, Nextjs app router, Remix etc...), la lib Trilogy fonctionne as-is. Seul un projet Nextjs avec pages router requiert une configuration spécifique.

// next.config.js
const nextConfig = {
  transpilePackages: ["@bytel/trilogy-react", "@trilogy-ds/react"]
  // Le reste de votre configuration
};
 
export default nextConfig;

Utilisation

Exemple d'utilisation de Trilogy.

// App.tsx
import { Button, Container, Section, Text } from '@bytel/trilogy-react';

export const App = (): JSX.Element => (
    <main>
        <Section>
            <Container>
                <Text>Welcome to Trilogy Design System</Text>
                <Button>My button</Button>
            </Container>
        </Section>
    </main>
);

Style

Pour utiliser le style Trilogy, 2 options s'offrent à vous :

Utiliser le fichier CSS
Utiliser le provider Trilogy

Fichier CSS

Dans votre fichier

_document.tsx

ou dans votre fichier racine, importez le fichier CSS de Trilogy de la façon suivante :

// _document.tsx
import { Head, Html, Main, NextScript } from "next/document";

export default function Document() {
    return (
        <Html lang="fr">
            <Head>
                <link
                    rel="stylesheet"
                    href="https://assets.bouyguestelecom.fr/TRILOGY/trilogy-styles@4.1.3/default/trilogy.css"
                />
            </Head>
            <body>
                <Main/>
                <NextScript/>
            </body>
        </Html>
    );
}

Provider Trilogy

Toujours dans votre fichier

_document.tsx

ou dans votre fichier racine, importez et utilisez le provider de la façon suivante :

// _document.tsx
import { Head, Html, Main, NextScript } from "next/document";
import { TrilogyProvider } from "@bytel/trilogy-react/lib/context/provider";

export default function Document() {
    return (
        <Html lang="fr">
            <Head/>
            <body>
                <TrilogyProvider>
                    <Main/>
                </TrilogyProvider>
                <NextScript/>
            </body>
        </Html>
    );
}

Aller plus loin...

Structurer sa première page avec Trilogy

Il est primordial d'avoir une base de travail saine qui respecte les conventions. Pour ce faire, rien de compliqué : il suffit de jouer correctement avec les différents éléments de structure, notamment les composants Section et Container.

// Home.tsx
import { Button, Container, Section, Text } from '@bytel/trilogy-react';

export default function Home() {
    return (
        <main>
            <Section>
                <Container>
                    <Text>First section</Text>
                    <Button>My button</Button>
                </Container>
            </Section>
            <Section>
                <Container>
                    <Text>Second section</Text>
                    <Button>My button</Button>
                </Container>
            </Section>
        </main>
    );
}