Furcata React

Table des Matières

• Furcata React
• Structure des Fichiers
• Bloc
• Style
• Utilisation

Furcata React

Ce projet est le frontend d'une application React qui utilise Wagtail comme CMS. Le code frontend est situé dans le dossier frontend_react.

Structure des Fichiers

• Le fichier base.js situé dans frontend_react/static/js est le composant App principal et la racine du frontend.

• Le dossier basePage dans frontend_react/static/js contient tous les composants disponibles pour l'utilisateur à utiliser via Wagtail. Les composants obligatoires sont le menu et le pied de page.

  Les autres composants disponibles sont : - HeadingBlock - TextBlock - ImageBlock - VideoBlock - WhiteSpaceBlock - BannerBlock - LogoGridBlock - LargeCarousel - ButtonBlock

• Chaque composant est situé dans un dossier séparé sous frontend_react/static/js/components.

• Chaque composant est composé d'au moins 2 fichiers : -blockName.js : Le fichier Block est l'index du composant. -blockNameElements.js : Le fichier Elements contient le style associé au bloc.

• Lorsqu'un composant contient des actions ou des animations : -blockNameComponents.js : Appelation pour le fichier de sous composants si l'élément racine est trop complexe -blockNameControler.js : Les actions associées à notre composants

Bloc

Pour utiliser le composant Block, suivez la syntaxe ci-dessous :

        "use strict";
        import {
            BlockContainer,
            BlockImage,
            BlockText,
        } from "./BlockElements";

        const Block = ({ value }) => {
            return (
                <BlockContainer>
                    <BlockImage />
                    <BlockText />
                </BlockContainer>
            );
        };
        export default Block;

• Le composant BlockContainer est un conteneur qui contient les composants BlockImage et BlockText.
• Le composant BlockImage est un espace réservé pour l'image qui sera affichée dans le BlockContainer.
• Le composant BlockText est un espace réservé pour le texte qui sera affiché dans le BlockContainer.
• Le composant Block accepte une prop value, qui peut être utilisée pour transmettre des données au composant.

Utilisation

Pour utiliser le composant Block, importez-le simplement dans votre composant React et faites-le rendre comme suit :

import Block from "./Block";

function MyComponent() {
    return (
        <div>
            <Block value="example" />
        </div>
    );
}

Style

Le style des composants doit être dynamique (couleur, fonts, etc.) Utilisez color.js dans frontend_react/static/js/components/styling/colors.js et frontend_react/static/js/components/styling/generalStyling.js

export const Colors = {
    primary: {
        solid: "rgba(199, 200, 221, 1)",
    },
    secondary: {
        solid: "rgba(49, 50, 56, 1)",
    },
    accent: {
        solid: "rgba(88, 121, 157, 1)",
    },
    colorA: {
        solid: "rgba(0, 0, 0, 1)",
    },
    colorB: {
        solid: "rgba(255, 255, 255, 1)",
    },
};

Le style pour le composant Block peut être trouvé dans le fichier BlockElements.js.

'use strict'
import { Colors } from "../colors";


export const blockContainer = styled.div`
    color: ${Colors.secondary.solid};
`

Utilisation de la fonction transparence dans colors.js

Vous pouvez utiliser la fonction transparence pour générer des valeurs CSS avec une opacité spécifiée. Voici comment l'intégrer avec votre exemple de couleurs :

import { Colors } from "../colors";
import { transparence } from './chemin-vers-transparence'; 

export const CompleteButtonBlockLink = styled(ButtonBlockLink)`
    color: ${Colors.primary.solid};
    background-color: ${transparence(Colors.secondary.solid, 20)}; /* Exemple avec 20% d'opacité */
    &:hover {
        color: ${Colors.secondary.solid};
        background-color: ${Colors.accent.solid};
    }

`;

## StyleProvider et Utilisation des Styles 

Pour une gestion dynamique des styles (couleurs, polices, etc.) dans votre application, nous utilisons le `StyleProvider` pour fournir un contexte de style partagé à tous les composants.

### StyleProvider

Le `StyleProvider` est un composant qui enveloppe toute votre application React pour fournir un contexte de style partagé. Il est configuré dans le fichier `StyleProvider.js` et peut être utilisé comme suit dans votre application :

```javascript
import { StyleProvider } from "./StyleProvider";

const App = () => {
    return (
        <StyleProvider>
            {/* Notre app */}
        </StyleProvider>
    );
};

Utilisation des Couleurs

Pour utiliser les couleurs définies dans le fichier colors.js, vous pouvez simplement accéder aux propriétés de l'objet style.colors. Par exemple :

import styled from "styled-components";
import { useStyle } from "chemin-vers-votre-style-context"; // Assurez-vous d'importer depuis le chemin correct

const style = useStyle(); // Utilisez useStyle pour obtenir le thème et les styles

export const ButtonBlockLink = styled.a`
    padding: ${buttonPadding.width} ${buttonPadding.height};
    font-family: ${style.fonts.primary.family}; // Utilisez le style du contexte
    font-weight: 400;
    font-size: 1.2rem;
    border-radius: 50px;
    transition: all 0.3s ease-in-out;
`;