Histoire dans l’histoire :
Dans Livre d’histoires, « Histoire dans l’histoire » signifie utiliser des parties d’une histoire dans une autre. Au lieu de refaire des éléments, les développeurs importent simplement des histoires existantes et utilisent leurs parties dans une nouvelle histoire.
Cela permet de créer des interfaces utilisateur complexes en combinant des parties plus simples de différentes histoires, ce qui rend le codage plus rapide et plus efficace.
- Supposons que vous ayez deux composants : un pour un bouton (Bouton) et un pour une zone de saisie (Saisir).
- Chaque composant possède son propre ensemble d’histoires définies dans des fichiers d’histoire distincts.
- Si vous souhaitez combiner ces histoires dans un fichier à une seule histoire pour montrer comment elles peuvent être utilisées ensemble.
- Vous trouverez ci-dessous un exemple montrant comment y parvenir en utilisant le concept « Histoire dans l’histoire » :
Bouton.js :
//Path src/Button/Button.js
import React from 'react';
import './Button.css';
function Button(props) {
const { variant="Primary", children, ...rest } = props;
return (
<button className={`button ${variant}`} {...rest}>
{children}
</button>
);
}
export default Button;
Bouton.stories.js :
//Path src/Button/Button.stories.js
import React from 'react';
import Button from './Button';
export default {
title: 'Form/Button',
component: Button,
};
export const Primary = () => <Button variant="primary">Primary</Button>
export const Secondary = () => <Button variant="secondary">Secondary</Button>
export const Success = () => <Button variant="success">Success</Button>
export const Danger = () =><Button variant="danger">Danger</Button>
Entrée.js :
//Path src/Input/Input.js
import React from 'react';
import './Input.css';
const Input =(props) =>{
const {size="medium", children, ...rest}=props;
return (
<>
<input type="text" className={`input ${size}`} {...rest}/>
</>
)
}
export default Input
Entrée.stories.js :
//Path src/Input/Input.stories.js
import React from 'react';
import Input from './Input';
export default {
title: 'Form/Input',
component: Input,
};
export const Small = () => <Input size="small" placeholder="Small">Small</Input>;
export const Medium = () => <Input size="medium" placeholder="Medium">Medium</Input>;
export const Large = () => <Input size="large" placeholder="Large">Large</Input>;
Abonnement.stories.js :
- Dans cet exemple, le concept « Story Within Story » est présenté.
//Path src/Subscription/Subscription.stories.js
import React from 'react';
import { Secondary } from '../Button/Button.stories';
import { Large } from '../Input/Input.stories';
export default {
title: 'Form/Subscription'
}
export const SecondarySubscription = () => {
return (
<>
<Secondary />
<Large />
</>
);
};
- Dans le fichier de configuration Storybook (Abonnement.stories.js), l’histoire de l’abonnement secondaire est définie.
- Il intègre des composants d’autres histoires (Button/Button.stories.js et Input/Input.stories.js), tels que le bouton secondaire et l’entrée grande, respectivement, les rendant dans le Abonnement Secondaire
Sortir:
Avantages de l’approche « Histoire dans l’histoire » :
- Réduit la redondance du code : Évite la répétition de l’importation et de la définition d’accessoires pour des composants tels que le bouton secondaire et l’entrée volumineuse, rationalisant ainsi le code.
- Mises à jour automatiques: Les modifications apportées aux histoires originales se propagent automatiquement à l’histoire composite. Les modifications apportées dans l’histoire du bouton secondaire, par exemple, sont mises à jour de manière transparente dans l’histoire de l’abonnement secondaire.
- Maintenance améliorée du code : Élimine le besoin de gérer le code sur plusieurs fichiers, ce qui conduit à de meilleures pratiques de maintenance du code.
- Efficacité améliorée : En réduisant la redondance et en automatisant les mises à jour, cette approche améliore l’efficacité globale du développement, permettant aux développeurs de se concentrer sur la création et le perfectionnement efficaces des éléments de l’interface utilisateur.
Décorateurs :
Les décorateurs sont des composants qui enveloppent des histoires individuelles, offrant des fonctionnalités ou un style supplémentaires.
Comprenons avec un exemple :
Maintenant, dans ce répertoire src, créons un dossier nommé « Centre ». Dans ce dossier, générons deux fichiers : ‘Center.js’ pour le composant Center et ‘Center.css’ pour son style associé.
//Path src/Center/Center.js
import React from 'react'
import './Center.css';
const Center =(props) =>{
return (
<div className="center">
{props.children}
</div>
)
}
export default Center
//Path src/Center/Center.css
.center{
display: flex;
justify-content: center;
}
- Enfermer les boutons « danger » La variante au sein du composant Center garantit un alignement centralisé sans altérer le code du bouton, favorisant ainsi la réutilisabilité.
- Les ajustements de la fonction de centrage peuvent être effectués sans effort en modifiant ou en supprimant le composant Centre.
//Path src/Button/Button.stories.js
import React from 'react';
import Button from './Button';
import Center from '../Center/Center';
export default {
title: 'Form/Button',
component: Button,
};
export const Primary = () => <Button variant="primary">Primary</Button>
export const Secondary = () => <Button variant="secondary">Secondary</Button>
export const Success = () => <Button variant="success">Success</Button>
export const Danger = () =><Center><Button variant="danger">Danger</Button></Center>
Sortir:
Maintenant, pour utiliser le Centre composant comme décorateur pour le Bouton composant, nous pouvons faire ce qui suit :
- Storybook simplifie la spécification des décorateurs en permettant une application universelle après les avoir définis une fois.
- Dans l’exportation par défaut, le « décorateurs » la propriété contient un éventail de fonctions. Chaque fonction enveloppe une histoire avec un composant souhaité, garantissant ainsi une application cohérente dans toutes les histoires sans effort.
//Path src/Button/Button.stories.js
import React from 'react';
import Button from './Button';
import Center from '../Center/Center';
export default {
title: 'Form/Button',
component: Button,
decorators: [story=><Center>{story()}</Center>]
};
export const Primary = () => <Button variant="primary">Primary</Button>
export const Secondary = () => <Button variant="secondary">Secondary</Button>
export const Success = () => <Button variant="success">Success</Button>
export const Danger = () => <Button variant="danger">Danger</Button>
Sortir:
Décorateurs mondiaux :
- Si un composant d’entrée ne dispose pas d’un alignement centré, comme le composant bouton, nous pouvons résoudre ce problème en appliquant des décorateurs dans l’exportation par défaut.
- Cependant, cela pourrait impliquer d’ajouter le décorateur à chaque histoire de notre Storybook.
- Pour simplifier ce processus, nous pouvons utiliser des décorateurs globaux.
//Path storybook/preview.js
import React from 'react';
import { addDecorator } from '@storybook/react';
import Center from '../src/Center/Center';
addDecorator(story=><Center>{story()}</Center>)
Retirer le addDecorator ligne du //Path src/Button/Button.stories.js fichier, tel que nous l’avons défini globalement. Par conséquent, tous les composants sont désormais automatiquement centrés.
Conclusion:
La méthode « Histoire dans l’histoire », associée aux décorateurs, accélère le développement de l’interface utilisateur en réutilisant les composants, en réduisant les répétitions et en automatisant les mises à jour. Cela simplifie le codage, la maintenance et encourage la réutilisation pour des projets plus importants.
Source link