Guide de Style

Aperçu

Ce document fournit un aperçu de l'approche de style utilisée dans le projet Optave ZCLI.

Architecture de Style

Le projet utilise une approche de style basée sur les composants avec ces technologies clés :

• Styled Components : Solution de style principale utilisant CSS-in-JS
• Système de Design Zendesk Garden : Fournit des composants UI cohérents et des thèmes
• CSS Global : Styles globaux limités dans index.css

Intégration Zendesk Garden

Le projet s'appuie fortement sur les composants Zendesk Garden pour une UI cohérente :

import { ThemeProvider, PALETTE } from '@zendeskgarden/react-theming';
import { Grid, Row, Col } from '@zendeskgarden/react-grid';
import { LG, MD } from '@zendeskgarden/react-typography';
import { Button } from '@zendeskgarden/react-buttons';

Packages Garden clés utilisés :

• @zendeskgarden/react-theming : Fournit les capacités de thématisation
• @zendeskgarden/react-grid : Composants de mise en page (Grid, Row, Col)
• @zendeskgarden/react-typography : Composants de style de texte
• @zendeskgarden/react-buttons : Composants de boutons
• @zendeskgarden/react-forms : Éléments de formulaire
• @zendeskgarden/react-modals : Boîtes de dialogue modales
• @zendeskgarden/react-tooltips : Composants d'info-bulles
• @zendeskgarden/svg-icons : Iconographie

Système de Couleurs

PALETTE Garden

L'objet PALETTE de Garden fournit un système de couleurs standardisé :

import { PALETTE } from '@zendeskgarden/react-theming';

// Exemples
const darkText = PALETTE.grey[800];
const primaryBlue = PALETTE.blue[600];
const successGreen = PALETTE.green[600];

Couleurs Personnalisées

Les couleurs personnalisées sont définies dans src/constants/colours.ts :

// Constantes de couleurs personnalisées
export const AGENT_BAR_COLOUR = '#1F73B7';
export const AI_BAR_COLOUR = '#ADCCE4';
export const PIE_CHART_BLUE = '#349EFF';
export const PIE_CHART_GREEN = '#19b75e';
export const PIE_CHART_YELLOW = '#FFCE56';
export const PIE_CHART_BROWN = '#E09846';

Style des Composants

Les composants sont stylés en utilisant la bibliothèque styled-components :

import styled from 'styled-components';

const StyledContainer = styled.div`
  display: flex;
  flex-direction: column;
  padding: 16px;
  border-radius: 4px;
  background-color: ${PALETTE.white};
`;

// Avec style conditionnel basé sur les props
const StyledButton = styled.button<{ isActive: boolean }>`
  background-color: ${props => props.isActive ? PALETTE.blue[600] : PALETTE.grey[200]};
  color: ${props => props.isActive ? PALETTE.white : PALETTE.grey[800]};
`;

Système de Mise en Page

Le projet utilise le système de grille de Zendesk Garden pour des mises en page responsives :

<ThemeProvider>
  <Grid>
    <Row>
      <Col sm={12} md={6} lg={4}>
        {/* Contenu */}
      </Col>
      <Col sm={12} md={6} lg={8}>
        {/* Contenu */}
      </Col>
    </Row>
  </Grid>
</ThemeProvider>

Typographie

Le style du texte est géré via les composants de typographie Garden :

import { LG, MD, SM, XL } from '@zendeskgarden/react-typography';

// Utilisation
<XL>Texte de titre</XL>
<LG>Texte de sous-titre</LG>
<MD>Texte normal</MD>
<SM>Petit texte</SM>

Styles Globaux

Des styles globaux limités sont définis dans src/app/index.css :

• Styles des éléments HTML de base
• Style de barre de défilement personnalisé
• Préférences de schéma de couleurs
• Styles de conteneur de layout racine

Bonnes Pratiques

1. Utiliser les Composants Garden : Préférer les composants Garden aux implémentations personnalisées pour la cohérence
2. Cohérence du Thème : Utiliser les couleurs PALETTE au lieu de valeurs hexadécimales codées en dur
3. Encapsulation des Composants : Garder les styles limités à leurs composants en utilisant styled-components
4. Design Responsif : Utiliser le système Grid de Garden et les media queries pour la responsivité
5. Style Basé sur les Props : Utiliser les props des composants pour contrôler les variations de style

Utilisation des Icônes

Le projet utilise les icônes SVG de Zendesk Garden :

import PencilStroke from '@zendeskgarden/svg-icons/src/12/pencil-stroke.svg';
import InfoStroke from '@zendeskgarden/svg-icons/src/16/info-stroke.svg';

Exemples

Composant Modal

import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Modal, Header, Body, Footer, Close } from '@zendeskgarden/react-modals';
import { Button } from '@zendeskgarden/react-buttons';
import styled from 'styled-components';

const StyledModalBody = styled(Body)`
  padding: 24px;
  max-height: 70vh;
  overflow-y: auto;
`;

const StyledFooter = styled(Footer)`
  justify-content: space-between;
`;

const CustomModal = ({ isOpen, onClose, title, children }) => (
  <ThemeProvider>
    <Modal isOpen={isOpen} onClose={onClose}>
      <Header>{title}</Header>
      <Close aria-label="Fermer la modale" />
      <StyledModalBody>{children}</StyledModalBody>
      <StyledFooter>
        <Button onClick={onClose}>Annuler</Button>
        <Button isPrimary>Sauvegarder</Button>
      </StyledFooter>
    </Modal>
  </ThemeProvider>
);