Add ability to specify component Schema in component file

[justenh]

Rough example of component implementation. Heavily influenced by React's PropType implementation (Typechecking With PropTypes)

{% stackrComponent props {
    title: Stackr.string(),
    headline: Stackr.string(),
    bodyHtml: Stackr.string(),
    ctaGroup: Stackr.arrayOf(Stackr.shape({
        label: Stackr.string('Learn More'),
        url: Stackr.string('#'),
        target: Stackr.string('_self'),
    })),
    padding: Stackr.list('default', ['default', 'none']),
} %}

Allow default values

title: Stackr.string('Default Title')

Allow specifying the shapes of objects

ctaGroup: Stackr.shape({
    label: Stackr.string('Learn More'),
    url: Stackr.string('#'),
    target: Stackr.string('_self'),
}),

Allow specifying the shapes of collections

ctaGroup: Stackr.arrayOf(
    Stackr.shape({
        label: Stackr.string('Learn More'),
        url: Stackr.string('#'),
        target: Stackr.string('_self'),
    })
),

Allow specifying enums

padding: Stackr.list('default', ['default', 'none']),

Long term, it would be ideal if the CMS could read these definitions and present a UI to the admin for configuring this block. This might require that the user creates and specifies the "Field Type" that should be presented allowing the CMS to control the settings associated with a field.

[justenh]

Heading in the following direction.

Supports..

• Field types ex(array, number, string, enum)
• Field names
• Field description
• Field validation (see enum and number types)

{% stackrComponent props {
    title: craft.stackrProp()
        .array(null)
        .name('Title')
        .desc('An array containing the body and tag of an HTML element. Ex. ["Testing 123", "p"]'),

    headline: craft.stackrProp()
        .array(null)
        .name('Headline')
        .desc('An array containing the body and tag of an HTML element. Ex. ["Testing 123", "p"]'),

    bodyHtml: craft.stackrProp()
        .string()
        .name('Body HTML')
        .desc('HTML body of the block'),

    padding: craft.stackrProp()
        .enum('default', ['default', 'none'])
        .name('Padding')
        .desc('Padding options'),

    ctaGroup: craft.stackrProp()
        .array([])
        .name('CTA Group')
        .desc('CTAs to be displayed in the block.'),
} %}
    {# Component body #}
{% endcomponent %}

{{ stackr('blocks/test-block', {
    bodyHtml: 123,
    title: ['one', 'h1'],
}) }}

produces the following JSON Schema

{
  "title": {
    "type": "Array",
    "name": "Title",
    "description": "An array containing the body and tag of an HTML element. Ex. [\"Testing 123\", \"p\"]",
    "required": false,
    "default": null,
    "value": [
      "one",
      "h1"
    ]
  },
  "headline": {
    "type": "Array",
    "name": "Headline",
    "description": "An array containing the body and tag of an HTML element. Ex. [\"Testing 123\", \"p\"]",
    "required": false,
    "default": null,
    "value": null
  },
  "bodyHtml": {
    "type": "String",
    "name": "Body HTML",
    "description": "HTML body of the block",
    "required": false,
    "default": null,
    "value": 123
  },
  "padding": {
    "type": "Enum",
    "name": "Padding",
    "description": "Padding options",
    "required": false,
    "default": "default",
    "value": null,
    "list": [
      "default",
      "none"
    ]
  },
  "ctaGroup": {
    "type": "Array",
    "name": "CTA Group",
    "description": "CTAs to be displayed in the block.",
    "required": false,
    "default": [
      
    ],
    "value": null
  }
}