{
  "props": {
    "label": {
      "type": "string",
      "required": true,
      "description": "Button text",
      "editorControl": "text",
      "constraints": {
        "minLength": 1,
        "maxLength": 50
      }
    },
    "intent": {
      "type": { "enum": ["primary", "secondary", "destructive"] },
      "default": "primary",
      "editorControl": "select"
    },
    "size": {
      "type": { "enum": ["sm", "md", "lg"] },
      "default": "md"
    },
    "disabled": {
      "type": "boolean",
      "default": false
    },
    "icon": {
      "type": "ReactNode",
      "description": "Icon to show before label",
      "editorControl": "slot"
    },
    "count": {
      "type": "number",
      "constraints": { "min": 0, "max": 100 },
      "editorControl": "slider"
    }
  }
}

{ "type": "string" }
{ "type": "number" }
{ "type": "boolean" }

{ "type": { "enum": ["primary", "secondary", "destructive"] } }

{ "type": { "array": "string" } }
{ "type": { "array": { "enum": ["a", "b", "c"] } } }

{ "type": "object" }
{ "type": { "object": { "theme": "string", "animate": "boolean" } } }

{ "type": { "union": ["string", "number"] } }

{ "type": "ReactNode" }

{
  "props": {
    "name": {
      "type": "string",
      "constraints": {
        "minLength": 1,
        "maxLength": 100,
        "pattern": "^[a-zA-Z]+"
      }
    },
    "count": {
      "type": "number",
      "constraints": {
        "min": 0,
        "max": 999,
        "step": 1
      }
    }
  }
}

{
  "events": {
    "onClick": {
      "description": "Fired when button is clicked",
      "parameters": [
        { "name": "event", "type": "React.MouseEvent<HTMLButtonElement>" }
      ]
    },
    "onFocus": {
      "description": "Fired when button receives focus",
      "parameters": [
        { "name": "event", "type": "React.FocusEvent<HTMLButtonElement>" }
      ]
    },
    "onChange": {
      "description": "Fired when value changes",
      "parameters": [
        { "name": "value", "type": "string" },
        { "name": "event", "type": "React.ChangeEvent", "optional": true }
      ],
      "deprecated": "Use onValueChange instead"
    }
  }
}

import { generatePropsInterface, generateComponentTypes } from '@reallygoodwork/coral-core'

const interfaceCode = generatePropsInterface(buttonComponent)
// export interface ButtonProps {
//   label: string;
//   intent?: "primary" | "secondary" | "destructive";
//   size?: "sm" | "md" | "lg";
//   disabled?: boolean;
//   onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
//   className?: string;
//   style?: React.CSSProperties;
// }

const fullTypes = generateComponentTypes(buttonComponent)
// Complete .d.ts file with imports and component declaration

{ "textContent": { "$prop": "label" } }

{
  "elementAttributes": {
    "href": { "$prop": "href" },
    "disabled": { "$prop": "disabled" }
  }
}

{
  "textContent": {
    "$computed": "concat",
    "$inputs": [{ "$prop": "firstName" }, " ", { "$prop": "lastName" }]
  }
}

{
  "elementAttributes": {
    "aria-expanded": { "$prop": "isOpen", "$transform": "boolean" },
    "aria-disabled": { "$prop": "enabled", "$transform": "not" }
  }
}

{
  "eventHandlers": {
    "onClick": { "$event": "onClick" },
    "onKeyDown": { "$event": "onKeyDown" }
  }
}

{
  "eventHandlers": {
    "onClick": {
      "$inline": "() => setIsOpen(!isOpen)"
    }
  }
}

import {
  getRequiredProps,
  getDefaultPropValues,
  validatePropValue,
  propTypeToTypeScript,
} from '@reallygoodwork/coral-core'

// Get required prop names
const required = getRequiredProps(component.props)
// ['label']

// Get default values
const defaults = getDefaultPropValues(component.props)
// { disabled: false, size: 'md' }

// Validate a value
const errors = validatePropValue('label', propDef, '')
// ['Prop "label" must have minimum length 1']

// Convert type to TypeScript
propTypeToTypeScript({ enum: ['a', 'b'] })
// '"a" | "b"'