BricksLab Catalog

@brickslab/ui-web

Tableau de documentation des props d'un composant. Utilisé sur toutes les pages du catalog pour présenter les APIs de composants de façon standardisée. Cette page est une méta-documentation : PropsTable documente ses propres props.

Aperçu

PropsTable documentant ses propres props

Prop	Type	Défaut	Requis	Description
`props`	`PropDef[]`	—	✓	Tableau de définitions de props à afficher dans le tableau de documentation.

structure de PropDef — les champs disponibles

Prop	Type	Défaut	Requis	Description
`name`	`string`	—	✓	Nom de la prop.
`type`	`string`	—	✓	Type TypeScript de la prop (ex. : string, number, boolean, ReactNode...).
`required`	`boolean`	—	—	Indique si la prop est obligatoire. Si false ou absent, la prop est optionnelle.
`default`	`string`	—	—	Valeur par défaut de la prop. Doit être une chaîne représentant la valeur (ex. : '"left"', 'false', '0').
`description`	`string`	—	—	Description de la prop et de son comportement.

exemple avec différents types de props

Prop	Type	Défaut	Requis	Description
`title`	`string`	—	✓	Titre principal du composant.
`align`	`"left" \| "center" \| "right"`	`"left"`	—	Alignement du contenu.
`count`	`number`	`0`	—	Compteur numérique.
`disabled`	`boolean`	`false`	—	Désactive le composant.
`children`	`ReactNode`	—	—	Contenu enfant du composant.
`onChange`	`(value: string) => void`	—	—	Callback déclenché lors d'un changement de valeur.

Props

Prop	Type	Défaut	Requis	Description
`props`	`PropDef[]`	—	✓	Tableau de définitions de props à afficher dans le tableau de documentation.

Utilisation

tsx

import { PropsTable, type PropDef } from "../../../catalog/PropsTable";

const props: PropDef[] = [
  {
    name: "title",
    type: "string",
    required: true,
    description: "Titre principal du composant.",
  },
  {
    name: "align",
    type: '"left" | "center" | "right"',
    default: '"left"',
    description: "Alignement du contenu.",
  },
  {
    name: "disabled",
    type: "boolean",
    default: "false",
    description: "Désactive le composant.",
  },
];

<PropsTable props={props} />