@pagedotapp/page-avatar-select/meta.json

PageAvatarSelect - A reusable React component

{
	"name": "PageAvatarSelect",
	"package": "@pagedotapp/page-avatar-select",
	"description": "An avatar component with built-in selection functionality for choosing preset avatars, colors, or uploading custom images.",
	"tags": ["avatar", "select", "upload", "image", "page-ui"],
	"attributes": [
		{
			"name": "src",
			"type": "string",
			"default": null,
			"description": "URL of the avatar image",
			"required": false
		},
		{
			"name": "fallback",
			"type": "string",
			"default": null,
			"description": "Fallback text when image is not available",
			"required": false
		},
		{
			"name": "size",
			"type": "'small' | 'medium' | 'large'",
			"default": "'medium'",
			"description": "Avatar size",
			"required": false
		},
		{
			"name": "selectionOptions",
			"type": "('preset' | 'color' | 'upload')[]",
			"default": "['preset', 'color', 'upload']",
			"description": "Available selection methods",
			"required": false
		},
		{
			"name": "onSelect",
			"type": "(type: 'preset' | 'color' | 'upload', value: string | File) => void",
			"default": null,
			"description": "Callback when avatar is selected",
			"required": false
		},
		{
			"name": "onRemove",
			"type": "() => void",
			"default": null,
			"description": "Callback when avatar is removed",
			"required": false
		},
		{
			"name": "trigger",
			"type": "ReactNode",
			"default": null,
			"description": "Custom trigger element for the selection menu",
			"required": false
		}
	],
	"usage": "Use for profile pages, user settings, or anywhere users need to select/upload avatars.",
	"example": "import { PageAvatarSelect } from '@pagedotapp/page-avatar-select';\n\nfunction Example() {\n  return (\n    <PageAvatarSelect\n      fallback=\"JD\"\n      onSelect={(type, value) => console.log(type, value)}\n    />\n  );\n}",
	"goodPractices": [
		"Provide a fallback for better UX when image is loading or unavailable",
		"Handle both File and string values in onSelect callback",
		"Use appropriate size based on layout context",
		"Consider accessibility when implementing custom triggers"
	],
	"badPractices": [
		"Don't forget to handle file upload errors in the consuming component",
		"Avoid very large fallback text as it may overflow",
		"Don't use inconsistent avatar sizes in the same context"
	],
	"dependencies": [
		"@pagedotapp/page-avatar",
		"@pagedotapp/page-button",
		"@pagedotapp/page-menu"
	],
	"notes": "Integrates with PageAvatar for display and PageMenu for selection options.",
	"editorProps": {
		"src": {
			"component": "ImagePicker",
			"title": "Src",
			"description": "* Current avatar source (URL or preset)"
		},
		"fallback": {
			"component": "TextInput",
			"title": "Fallback",
			"description": "* Fallback text when no avatar"
		},
		"size": {
			"component": "Select",
			"title": "Size",
			"description": "* Avatar size",
			"responsive": true
		},
		"buttonSize": {
			"component": "TextInput",
			"title": "Button Size",
			"description": "* Button size",
			"responsive": true
		},
		"selectionOptions": {
			"component": "Array",
			"title": "Selection Options",
			"description": "* Available selection options"
		}
	}
}