Brickslab.Tools

@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.

Override rapide

Tous les paramètres listés dans cette table sont overrideables via les props. Utilisez ce squelette comme point de départ.

<MyComponent
  props={[]}
/>

props

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.

Override rapide

Tous les paramètres listés dans cette table sont overrideables via les props. Utilisez ce squelette comme point de départ.

<MyComponent
  name="..."
  type="..."
  required={true}
  default="..."
  description="..."
/>

nametyperequireddefaultdescription

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.

Override rapide

Tous les paramètres listés dans cette table sont overrideables via les props. Utilisez ce squelette comme point de départ.

<MyComponent
  title="..."
  align="left"
  count={0}
  disabled={false}
  children={<span>...</span>}
  onChange="..."
/>

titlealigncountdisabledchildrenonChange

Override titre/sous-titre: taille + couleur

Exemple cible pour personnaliser la taille et la couleur via les variables CSS (tokens) autour du composant.

<div
  style={{
    "--fontsize-3xl": "2.25rem",
    "--fontsize-xl": "1.125rem",
    "--color-fg": "#111827",
    "--color-muted": "#4B5563",
    "--color-brand": "#CC4A48",
  } as React.CSSProperties}
>
  <MyComponent
    title="Votre titre"
    align="left"
  />
</div>

Props

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

Override rapide

Tous les paramètres listés dans cette table sont overrideables via les props. Utilisez ce squelette comme point de départ.

<MyComponent
  props={[]}
/>

props

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} />