Addition of implementations to component definitions

[janechu]

Background

After some revision of the current JSON format I've taken another stab at further defining the format as I attempted in #85 which I've closed in favor of this issue.

Implementations

I believe that we should allow for a section on implementations which can be categorized by framework type, react, vue, etc. I'm not thinking to make an exhaustive list at this time but we can at least expose web components as a starting point.

What this means is that a library maintainer (Material, Fluent, FAST, etc.) can further define the implementation of the component in any number of ways which they may have some tooling they would like to use for those implementations. An example is that by defining all attributes for a web component they can be converted into a form that allows for the editing those attributes.

Additionally they open up to other tools, in particular for web components for such tools like VS Code, see https://github.com/microsoft/vscode-custom-data

{
    "id": "fast-button",
    "title": "Button",
    "description": "A FAST button definition",
    "url": "https://explore.fast.design/components/button",
    "version": 1,
    "categories": [
        "form"
    ],
    "implementations": [
        {
            "name": "open-ui-button",
            "type": "web-component",
            "description": "An Open UI button",
            "attributes": [
                {
                    "name": "appearance",
                    "description": "The appearance attribute",
                    "type": "string",
                    "values": [
                        {
                            "name": "accent"
                        },
                        {
                            "name": "lightweight"
                        },
                        {
                            "name": "neutral"
                        },
                        {
                            "name": "outline"
                        },
                        {
                           "name": "stealth"
                        }
                    ],
                    "default": "neutral",
                    "required": false
                },
                {
                    "name": "autofocus",
                    "description": "The autofocus attribute",
                    "type": "boolean",
                    "default": false,
                    "required": false
                },
                {
                    "name": "disabled",
                    "description": "The disabled attribute",
                    "type": "boolean",
                    "required": false
                },
                {
                    "name": "form",
                    "description": "The form attribute",
                    "type": "string",
                    "required": false
                },
                {
                    "name": "formaction",
                    "description": "The formaction attribute",
                    "type": "string",
                    "required": false
                },
                {
                    "name": "formenctype",
                    "description": "The formenctype attribute",
                    "type": "string",
                    "required": false
                },
                {
                    "name": "formmethod",
                    "description": "The formmethod attribute",
                    "type": "string",
                    "required": false
                },
                {
                    "name": "formnovalidate",
                    "description": "The formnovalidate attribute",
                    "type": "boolean",
                    "required": false
                },
                {
                    "name": "formtarget",
                    "description": "The formtarget attribute",
                    "type": "string",
                    "values": [
                        {
                           "name": "_self"
                        },
                        {
                            "name": "_blank"
                        },
                        {
                          "name": "_parent"
                        },
                        {
                            "name": "_top"
                        }
                    ],
                    "required": false
                },
                {
                    "name": "name",
                    "description": "The name attribute",
                    "type": "string",
                    "required": false
                },
                {
                    "name": "type",
                    "description": "The type attribute",
                    "type": "string",
                    "required": false
                },
                {
                    "name": "value",
                    "description": "The value attribute",
                    "type": "string",
                    "required": false
                }
            ],
            "slots": [
                {
                "name": "",
                "description": "The default slot"
                },
                {
                "name": "start",
                "description": "The start slot"
                },
                {
                "name": "end",
                "description": "The end slot"
                }
            ]
        }
    ],
    "anatomy": [
        {
            "name": "root",
            "implicit": true,
            "openUIName": "root"
        },
        {
            "name": "start",
            "implicit": true,
            "openUIName": "start of content"
        },
        {
            "name": "end",
            "description": true,
            "openUIName": "end of content"
        }
    ],
    "concepts": [
        {
            "name": "default",
            "description": "",
        },
        {
            "name": "disabled",
            "description": "Disabled"
        },
        {
            "name": "accent",
            "description": "Accent appearance"
        },
        {
            "name": "lightweight",
            "description": "Lightweight appearance"
        },
        {
            "name": "neutral",
            "description": "Neutral appearance"
        },
        {
            "name": "outline",
            "description": "Outline appearance"
        },
        {
            "name": "stealth",
            "description": "Stealth appearance"
        }
    ]
}

[github-actions[bot]]

There hasn't been any discussion on this issue for a while, so we're marking it as stale. If you choose to kick off the discussion again, we'll remove the 'stale' label.

[gregwhitworth]

While I like the idea no one has picked this up so I'm going to close this