Brickslab.Toolsv2.1.1

@brickslab./ui-web

Section de présentation de composant avec titre, description et zone de preview encadrée. Idéale pour documenter et showcaser des composants individuels dans une structure cohérente.

Aperçu

Présentation simple

TextInput

Champ de saisie de texte avec support des variantes et états.

Avec contenu enfant (children)

Badge

Élément d'étiquette compacte pour signaler des statuts.

Active
💡 Ce badge est un exemple simple. Vous pouvez combiner plusieurs variantes avec différentes couleurs et tailles.

Plusieurs éléments en preview (grid)

Button States

Les différents états d'un bouton.

Props

PropTypeDéfautRequisDescription
namestring—✓Nom du composant à présenter.
descriptionstring—✓Description ou explications du composant.
previewReact.ReactNode—✓Contenu à afficher dans la zone de prévisualisation (composant ou rendu).
childrenReact.ReactNode——Contenu optionnel supplémentaire (documentation, props table, etc.) affiché sous la preview.
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="..."
  description="..."
  preview={<span>...</span>}
  children={<span>...</span>}
/>
namedescriptionpreviewchildren

Utilisation

tsx
import { ComponentPresentationSection } from "@brickslab./ui-web";

export function MyComponentPresentation() {
  return (
    <ComponentPresentationSection
      name="MyComponent"
      description="Brève description du composant et ses cas d'usage."
      preview={<MyComponent />}
    >
      {/* Contenu optionnel: PropsTable, CodeBlock, etc. */}
      <PropsTable props={myProps} />
    </ComponentPresentationSection>
  );
}

Notes

ComponentPresentationSection est un wrapper de présentation idéal pour documenter les composants dans le catalogue. La prop children permet d'ajouter du contenu supplémentaire sous la preview (description, code, props, etc.).