Using Framer APIs to create an interface between LDSR and Framer X canvas

Button.tsx

import * as React from "react"
import { addPropertyControls, ControlType } from "framer"
import { Button as SLDS_Button } from "@salesforce/design-system-react"
// Open Preview (CMD + P)
// API Reference: https://www.framer.com/api

export function Button(props) {
    return (
        <SLDS_Button
            {...props}
            onClick={e => {
                console.log("Base Button e.target:", e.target)
            }}
        />
    )
}

//default props helps us assign default values to properties
Button.defaultProps = {
    label: "Hello World",
    height: 32,
    width: 80,
}

// https://www.framer.com/api/property-controls/
// addPropertyControls(<ComponentName>, PropertiesObject)
// ControlTypes documentation and variations are also provided in the same link
// in this example, we are creating two Properties for the user to manage in the properties panel
// 1. label : String (renders as input type="text")
// 2. variant : Enum (renders as picklist)

addPropertyControls(Button, {
    label: { type: ControlType.String, title: "Button Label" },
    variant: {
        type: ControlType.Enum,
        title: "Variant",
        defaultValue: "base",
        options: ["base", "neutral", "brand"],
        optionTitles: ["base", "neutral", "brand"],
    },
})