How to use the scrivito.provideWidgetClass function in scrivito

import * as Scrivito from "scrivito";
import { registerTextExtract } from "../../utils/textExtractRegistry";

const AddressWidget = Scrivito.provideWidgetClass("AddressWidget", {
  attributes: {
    showLogo: ["enum", { values: ["yes", "no"] }],
    showBorderBottom: ["enum", { values: ["yes", "no"] }],

    locationName: "string",
    locationStreetAddress: "string",
    locationLocality: "string",
    locationPostalCode: "string",
    locationRegion: "string",
    locationCountry: "string",
    addressFormat: ["enum", { values: ["USA", "GER"] }],

    phone: "string",
    fax: "string",
    email: "string",
  },

import * as Scrivito from "scrivito";

const LinkContainerWidget = Scrivito.provideWidgetClass("LinkContainerWidget", {
  attributes: {
    headline: "string",
    links: ["widgetlist", { only: "LinkWidget" }],
  },
});

export default LinkContainerWidget;

import * as Scrivito from "scrivito";

const ThumbnailGalleryWidget = Scrivito.provideWidgetClass(
  "ThumbnailGalleryWidget",
  {
    attributes: {
      images: ["widgetlist", { only: "ThumbnailGalleryImageWidget" }],
      showTags: ["enum", { values: ["yes", "no"] }],
    },
  }
);

export default ThumbnailGalleryWidget;

import * as Scrivito from "scrivito";
import { registerTextExtract } from "../../utils/textExtractRegistry";

const TableRowWidget = Scrivito.provideWidgetClass("TableRowWidget", {
  attributes: {
    cell1: "string",
    cell2: [
      "widgetlist",
      { only: ["IconWidget", "TextWidget", "PriceWidget"] },
    ],
    cell3: [
      "widgetlist",
      { only: ["IconWidget", "TextWidget", "PriceWidget"] },
    ],
    cell4: [
      "widgetlist",
      { only: ["IconWidget", "TextWidget", "PriceWidget"] },
    ],
  },
  onlyInside: "TableWidget",

import * as Scrivito from "scrivito";
import { registerTextExtract } from "../../utils/textExtractRegistry";

const HeadlineWidget = Scrivito.provideWidgetClass("HeadlineWidget", {
  attributes: {
    headline: "string",
    level: ["enum", { values: ["h1", "h2", "h3", "h4", "h5", "h6"] }],
    style: ["enum", { values: ["h1", "h2", "h3", "h4", "h5", "h6"] }],
    alignment: ["enum", { values: ["left", "center", "right"] }],
    showDividingLine: ["enum", { values: ["yes", "no"] }],
    showMargin: ["enum", { values: ["yes", "no"] }],
  },
});

registerTextExtract("HeadlineWidget", [
  { attribute: "headline", type: "string" },
]);

export default HeadlineWidget;

import * as Scrivito from "scrivito";

const IconWidget = Scrivito.provideWidgetClass("IconWidget", {
  attributes: {
    icon: "string",
    size: [
      "enum",
      { values: ["fa-1x", "fa-lg", "fa-2x", "fa-3x", "fa-4x", "fa-5x"] },
    ],
    alignment: ["enum", { values: ["left", "center", "right"] }],
    link: "link",
  },
});

export default IconWidget;

import * as Scrivito from "scrivito";
import { registerTextExtract } from "../../utils/textExtractRegistry";

const CarouselWidget = Scrivito.provideWidgetClass("CarouselWidget", {
  attributes: {
    images: ["referencelist", { only: ["Image"] }],
    showDescription: ["enum", { values: ["yes", "no"] }],
    descriptionLogo: ["reference", { only: ["Image"] }],
    description: "widgetlist",
  },
});

registerTextExtract("CarouselWidget", [
  { attribute: "description", type: "widgetlist" },
]);

export default CarouselWidget;

import * as Scrivito from "scrivito";
import { registerTextExtract } from "../../utils/textExtractRegistry";

const SectionWidget = Scrivito.provideWidgetClass("SectionWidget", {
  attributes: {
    content: "widgetlist",
    useFullWidth: ["enum", { values: ["yes", "no"] }],
    useFullHeight: ["enum", { values: ["yes", "no"] }],
    showPadding: ["enum", { values: ["yes", "no"] }],
    backgroundColor: [
      "enum",
      {
        values: [
          "white",
          "greywhite",
          "greylight",
          "greymiddle",
          "greydark",
          "brand-primary",
          "brand-secondary",

import * as Scrivito from "scrivito";
import { registerTextExtract } from "../../utils/textExtractRegistry";

const PriceWidget = Scrivito.provideWidgetClass("PriceWidget", {
  onlyInside: "TableRowWidget",
  attributes: {
    currency: "string",
    period: "string",
    price: "string",
  },
});

registerTextExtract("PriceWidget", [
  { attribute: "price", type: "string" },
  { attribute: "currency", type: "string" },
  { attribute: "period", type: "string" },
]);

export default PriceWidget;

import * as Scrivito from "scrivito";
import { registerTextExtract } from "../../utils/textExtractRegistry";

const GoogleMapsWidget = Scrivito.provideWidgetClass("GoogleMapsWidget", {
  attributes: {
    address: "string",
    mapType: ["enum", { values: ["interactive", "static"] }],
    zoom: [
      "enum",
      {
        values: [
          "1",
          "2",
          "3",
          "4",
          "5",
          "6",
          "7",
          "8",
          "9",