@simpledotstudio/simple-banner/meta.json

SimpleBanner - A reusable React component

{
  "name": "SimpleBanner",
  "package": "@simpledotstudio/simple-banner",
  "description": "A comprehensive banner component with avatar, editable text fields, and customizable actions for profile headers or page banners.",
  "tags": ["banner", "profile", "header", "editable", "simple-ui"],
  "attributes": [
    {
      "name": "bannerSrc",
      "type": "string",
      "default": null,
      "description": "URL of the banner image",
      "required": false
    },
    {
      "name": "showAvatar",
      "type": "boolean",
      "default": true,
      "description": "Whether to show the avatar overlay",
      "required": false
    },
    {
      "name": "avatarSrc",
      "type": "string",
      "default": null,
      "description": "URL of the avatar image",
      "required": false
    },
    {
      "name": "avatarFallback",
      "type": "string",
      "default": null,
      "description": "Fallback text for avatar when image is not available",
      "required": false
    },
    {
      "name": "title",
      "type": "string",
      "default": null,
      "description": "Banner title text",
      "required": false
    },
    {
      "name": "editableTitle",
      "type": "boolean",
      "default": false,
      "description": "Allow inline editing of title",
      "required": false
    },
    {
      "name": "description",
      "type": "string",
      "default": null,
      "description": "Banner description text",
      "required": false
    },
    {
      "name": "editableDescription",
      "type": "boolean",
      "default": false,
      "description": "Allow inline editing of description",
      "required": false
    },
    {
      "name": "actions",
      "type": "ReactNode[]",
      "default": null,
      "description": "Action buttons or elements to display",
      "required": false
    },
    {
      "name": "onBannerChange",
      "type": "(type: 'preset' | 'color' | 'upload', value: string | File) => void",
      "default": null,
      "description": "Callback when banner is changed",
      "required": false
    },
    {
      "name": "onAvatarChange",
      "type": "(type: 'preset' | 'color' | 'upload', value: string | File) => void",
      "default": null,
      "description": "Callback when avatar is changed",
      "required": false
    },
    {
      "name": "onTitleChange",
      "type": "(value: string) => void",
      "default": null,
      "description": "Callback when title is edited",
      "required": false
    },
    {
      "name": "onDescriptionChange",
      "type": "(value: string) => void",
      "default": null,
      "description": "Callback when description is edited",
      "required": false
    }
  ],
  "usage": "Perfect for user profiles, page headers, or any context requiring a hero banner with interactive elements.",
  "example": "import { SimpleBanner } from '@simpledotstudio/simple-banner';\n\nfunction Example() {\n  return (\n    <SimpleBanner\n      bannerSrc=\"/banner.jpg\"\n      title=\"John Doe\"\n      description=\"Software Engineer\"\n      showAvatar\n      avatarFallback=\"JD\"\n      editableTitle\n      onTitleChange={(value) => console.log(value)}\n    />\n  );\n}",
  "goodPractices": [
    "Provide both banner and avatar images for complete profile presentation",
    "Use editable fields sparingly to avoid confusion",
    "Include action buttons for common operations (follow, message, etc.)",
    "Handle all change callbacks to persist edits"
  ],
  "badPractices": [
    "Don't make all fields editable at once without clear UI indicators",
    "Avoid very long descriptions that break the layout",
    "Don't forget to validate user input in change handlers"
  ],
  "dependencies": ["@simpledotstudio/simple-avatar", "@simpledotstudio/simple-banner-select", "@simpledotstudio/simple-button"],
  "notes": "Combines multiple components to create a feature-rich banner experience."
}