<aside> 🗣

Les design patterns sont des solutions connues et reconnues à des cas récurrent. Ce sont des modèles de comment résoudre un problème, applicables pour la majorité dans tous les langages

</aside>

<aside> 💡

Exercice 8 Créez un dossier modal-v2 dans le dossier components . Ce dossier contiendra tous les composant nécessaires à la création d’une Modal en appliquant le design pattern vu ci-dessous ( Composition ).

À faire

Une fois les composants développés, remplacez la modal de création et d’édition v1 dans la gestion des étudiants par cette dernière.

</aside>

Composition vs Héritage (Props-drilling)

<aside> 📌

Nous avons beaucoup utilisé l’héritage, c’est à dire donner des props à nos composants pour les construire.

</aside>

Exemple de composant avec beaucoup de props-drilling

// composant Modal version

type ModalProps = {
	title?: string
	titleColor?: string
	mainText?: string
	secondaryText?: string
	aside?: ReactNode
	footer?: ReactNode
}

export const Modal = ({title, mainText,...}) => {
	return <div>
						<div className='text-2xl'>
							{title}
						</div>
				 </div>
}

<aside> ⚠️

On remarque que ce code ne respecte pas un principe important du développment:

Écrire du code ouvert à l’évolution, fermé à la modification

En effet ici si l’on souhaite demain ajouter des variantes de styles à notre titre, text principal ou autre il faudra ajouter ou modifier les props existantes, rendant le composant de plus en plus lourd et on risque vite d’avoir des effets de bords.

</aside>

Voici ce qu’on devrait plutôt écrire:

const modalTitleVariants = cva(
  "text-xl",
  {
    variants: {
      variant: {
        default: "bg-primary text-white hover:bg-primary/90",
        underline:
          "text-underline dzqd",
      },
      size: {
        default: "h-10 px-4 py-2",
        sm: "h-9 rounded-md px-3",
        lg: "h-11 rounded-md px-8",
        icon: "h-10 w-10",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

type ModalTitleProps = {
	children: ReactNode
} & VariantProps<typeof buttonVariants>

export const ModalTitle = ({children, variant, size, className}) => {
	return <h1 className={modalTitleVariants({ variant, size, className })>{children}</h1>
}

export const ModalDescription = ({text, variant, size, className}) => {
	return <p className={modalDescriptionVariants({ variant, size, className })>{text}</p>
}

export const Modal = ({children}) => {
	return <dialog>
		{children}
		//...
	</dialog>
}

// Utilisation des composants

export const App = () => {
	return <Modal>
					<ModalTitle size='xl' variant='underline'>Ajouter un parcours</ModalTitle>
					<ModalDescription>Vous pouvez ajouter un parcours au master MIAGE</ModalDescription>
					<ModalFooter>
						<Button>
							Sauvegarder
						</Button>
					</ModalFooter>
				 </Modal>
}

Pour terminer et indiquez à vos collaborateurs que le composant v1 de la Modal ne devrait plus être utilisé, allez dans son fichier et marquer le comme deprecated

/**
 * @deprecated Use ModalV2 instead
 */
export const Modal: React.FC<ModalProps> = ({

Cela permet de rapidement identifier qu’une nouvelle version existe et/ou de la remplacer si l’on tombe dessus!

<aside> ℹ️

Je vous conseille dans vos projets de vous pencher sur la librairie shadcn. Elle vous aide à avoir des examples de composants modifiables, accessibles et utilisant le Composition pattern.

The Foundation for your Design System - shadcn/ui

</aside>

Organisation du repo