{
  "container": {
    "name": "Container",
    "description": "This component contains things within itself",
    "icon": "ri-layout-column-line",
    "hasChildren": true,
    "styleable": true,
    "settings": [
      {
        "type": "select",
        "key": "type",
        "label": "Type",
        "defaultValue": "div",
        "options": [
          "article",
          "aside",
          "details",
          "div",
          "figure",
          "figcaption",
          "footer",
          "header",
          "main",
          "mark",
          "nav",
          "paragraph",
          "summary"
        ]
      }
    ]
  },
  "grid": {
    "name": "Grid",
    "description":
      "A datagrid component with functionality to add, remove and edit rows.",
    "icon": "ri-grid-line",
    "styleable": true,
    "settings": [
      {
        "type": "datasource",
        "label": "Source",
        "key": "datasource"
      },
      {
        "type": "detailScreen",
        "label": "Detail URL",
        "key": "detailUrl"
      },
      {
        "type": "boolean",
        "label": "Editable",
        "key": "editable"
      },
      {
        "type": "select",
        "label": "Theme",
        "key": "theme",
        "options": ["alpine", "alpine-dark", "balham", "balham-dark", "material"],
        "defaultValue": "alpine"
      },
      {
        "type": "number",
        "label": "Height",
        "key": "height",
        "defaultValue": "500"
      },
      {
        "type": "boolean",
        "label": "Pagination",
        "key": "pagination"
      }
    ]
  },
  "screenslot": {
    "name": "Screenslot",
    "description": "Contains your app screens",
    "styleable": true
  },
  "button": {
    "name": "Button",
    "description": "A basic html button that is ready for styling",
    "icon": "ri-share-box-line",
    "styleable": true,
    "settings": [
      {
        "type": "text",
        "label": "Text",
        "key": "text"
      },
      {
        "type": "boolean",
        "label": "Disabled",
        "key": "disabled"
      },
      {
        "type": "event",
        "label": "On Click",
        "key": "onClick"
      }
    ]
  },
  "list": {
    "name": "Repeater",
    "description": "A configurable data list that attaches to your backend tables.",
    "icon": "ri-list-check-2",
    "styleable": true,
    "hasChildren": true,
    "dataProvider": true,
    "settings": [
      {
        "type": "datasource",
        "label": "Data",
        "key": "datasource"
      }
    ]
  },
  "form": {
    "name": "Form",
    "icon": "ri-file-edit-line",
    "styleable": true
  },
  "input": {
    "name": "Text Field",
    "description": "A textfield component that allows the user to input text.",
    "icon": "ri-edit-box-line",
    "styleable": true,
    "bindable": true,
    "settings": [
      {
        "type": "text",
        "label": "Label",
        "key": "label"
      },
      {
        "label": "Type",
        "key": "type",
        "defaultValue": "text",
        "options": ["text", "password"]
      }
    ]
  },
  "richtext": {
    "name": "Rich Text",
    "description": "A component that allows the user to enter long form text.",
    "icon": "ri-edit-box-line",
    "styleable": true,
    "bindable": true
  },
  "datepicker": {
    "name": "Date Picker",
    "description": "A basic date picker component",
    "icon": "ri-calendar-line",
    "styleable": true,
    "bindable": true,
    "settings": [
      {
        "type": "text",
        "label": "Placeholder",
        "key": "placeholder"
      }
    ]
  },
  "stackedlist": {
    "name": "Stacked List",
    "icon": "ri-archive-drawer-line",
    "description": "A basic card component that can contain content and actions.",
    "styleable": true,
    "settings": [
      {
        "type": "text",
        "label": "Image",
        "key": "imageUrl"
      },
      {
        "type": "text",
        "label": "Heading",
        "key": "heading"
      },
      {
        "type": "text",
        "label": "Text 1",
        "key": "text1"
      },
      {
        "type": "text",
        "label": "Text 2",
        "key": "text2"
      },
      {
        "type": "text",
        "label": "Text 3",
        "key": "text3"
      },
      {
        "type": "screen",
        "label": "Link URL",
        "key": "destinationUrl"
      }
    ]
  },
  "card": {
    "name": "Vertical Card",
    "description": "A basic card component that can contain content and actions.",
    "icon": "ri-layout-column-line",
    "styleable": true,
    "settings": [
      {
        "type": "text",
        "label": "Image",
        "key": "imageUrl"
      },
      {
        "type": "text",
        "label": "Heading",
        "key": "heading"
      },
      {
        "type": "text",
        "label": "Description",
        "key": "description"
      },
      {
        "type": "text",
        "label": "Link Text",
        "key": "linkText"
      },
      {
        "type": "screen",
        "label": "Link Url",
        "key": "linkUrl"
      },
      {
        "type": "color",
        "label": "Link Color",
        "key": "linkColor",
        "defaultValue": "#000"
      },
      {
        "type": "color",
        "label": "Hover Color",
        "key": "linkHoverColor",
        "defaultValue": "#222"
      },
      {
        "type": "select",
        "label": "Image Height",
        "key": "imageHeight",
        "options": ["auto", "12rem", "16rem", "20rem", "24rem"],
        "defaultValue": "auto"
      },
      {
        "type": "select",
        "label": "Card Width",
        "key": "cardWidth",
        "options": ["16rem", "20rem", "24rem"],
        "defaultValue": "20rem"
      }
    ]
  },
  "text": {
    "name": "Paragraph",
    "description": "A component for displaying paragraph text.",
    "icon": "ri-paragraph",
    "styleable": true,
    "settings": [
      {
        "type": "text",
        "label": "Text",
        "key": "text"
      }
    ]
  },
  "login": {
    "description": "A component that automatically generates a login screen for your app.",
    "icon": "ri-login-box-line",
    "styleable": true,
    "settings": [
      {
        "type": "text",
        "label": "Logo",
        "key": "logo"
      },
      {
        "type": "text",
        "label": "Title",
        "key": "title"
      },
      {
        "type": "text",
        "label": "Button Text",
        "key": "buttonText"
      }
    ]
  },
  "navigation": {
    "name": "Nav Bar",
    "description": "A component for handling the navigation within your app.",
    "icon": "ri-navigation-line",
    "styleable": true,
    "hasChildren": true,
    "settings": [
      {
        "type": "text",
        "label": "Logo URL",
        "key": "logoUrl"
      }
    ]
  },
  "link": {
    "name": "Link",
    "description": "A basic link component for internal and external links",
    "icon": "ri-link",
    "styleable": true,
    "settings": [
      {
        "type": "text",
        "label": "Text",
        "key": "text"
      },
      {
        "type": "screen",
        "label": "URL",
        "key": "url"
      },
      {
        "type": "boolean",
        "label": "New Tab",
        "key": "openInNewTab"
      }
    ]
  },
  "rowdetail": {
    "name": "Row Detail",
    "description": "Loads a row, using an id from the URL, which can be used with {{ context }}, in children",
    "icon": "ri-profile-line",
    "styleable": true,
    "hasChildren": true,
    "dataProvider": true,
    "settings": [
      {
        "type": "table",
        "label": "Table",
        "key": "table"
      }
    ]
  }
}