@draftbit/core 46.10.3-6c7505.2 → 46.10.3-7476ab.2

package/src/mappings/RowHeadlineImageCaption.ts

@@ -0,0 +1,178 @@
+import {
+  COMPONENT_TYPES,
+  FORM_TYPES,
+  PROP_TYPES,
+  GROUPS,
+} from "@draftbit/types";
+
+export const SEED_DATA = [
+  {
+    name: "Row Single Line Headline Caption",
+    tag: "RowHeadlineImageCaption",
+    description:
+      "A row with left aligned headline text and right aligned caption text",
+    category: COMPONENT_TYPES.row,
+    preview_image_url: "{CLOUDINARY_URL}/Row_SingleLine_HeadlineCaption.png",
+    supports_list_render: true,
+    props: {
+      title: {
+        group: GROUPS.data,
+        label: "Title",
+        description: "Headline text to display",
+        formType: FORM_TYPES.string,
+        propType: PROP_TYPES.STRING,
+        defaultValue: "Beautiful West Coast Villa",
+        editable: true,
+        required: false,
+      },
+      caption: {
+        group: GROUPS.data,
+        label: "Caption",
+        description: "Caption text to display",
+        formType: FORM_TYPES.string,
+        propType: PROP_TYPES.STRING,
+        defaultValue: "$100",
+        editable: true,
+        required: false,
+      },
+    },
+    layout: {},
+  },
+  {
+    name: "Row Single Line Headline Image Caption",
+    tag: "RowHeadlineImageCaption",
+    description:
+      "A row with left aligned image and headline text and right aligned caption text",
+    category: COMPONENT_TYPES.row,
+    preview_image_url:
+      "{CLOUDINARY_URL}/Row_SingleLine_HeadlineImageCaption.png",
+    supports_list_render: true,
+    props: {
+      title: {
+        group: GROUPS.data,
+        label: "Title",
+        description: "Headline text to display",
+        formType: FORM_TYPES.string,
+        propType: PROP_TYPES.STRING,
+        defaultValue: "Beautiful West Coast Villa",
+        editable: true,
+        required: false,
+      },
+      caption: {
+        group: GROUPS.data,
+        label: "Caption",
+        description: "Caption text to display",
+        formType: FORM_TYPES.string,
+        propType: PROP_TYPES.STRING,
+        defaultValue: "$100",
+        editable: true,
+        required: false,
+      },
+      image: {
+        group: GROUPS.data,
+        label: "Image",
+        description: "Image to display",
+        formType: FORM_TYPES.image,
+        propType: PROP_TYPES.ASSET,
+        defaultValue: null,
+        editable: true,
+        required: false,
+      },
+    },
+    layout: {},
+  },
+  {
+    name: "Row Double Line Headline Caption",
+    tag: "RowHeadlineImageCaption",
+    description:
+      "A row with left aligned headline text and subtitle text and right aligned caption text",
+    category: COMPONENT_TYPES.row,
+    preview_image_url: "{CLOUDINARY_URL}/Row_DoubleLine_HeadlineCaption.png",
+    supports_list_render: true,
+    props: {
+      title: {
+        group: GROUPS.data,
+        label: "Title",
+        description: "Headline text to display",
+        formType: FORM_TYPES.string,
+        propType: PROP_TYPES.STRING,
+        defaultValue: "Beautiful West Coast Villa",
+        editable: true,
+        required: false,
+      },
+      subtitle: {
+        group: GROUPS.data,
+        label: "Subtitle",
+        description: "Subtitle text to display",
+        formType: FORM_TYPES.string,
+        propType: PROP_TYPES.STRING,
+        defaultValue: "San Diego",
+        editable: true,
+        required: false,
+      },
+      caption: {
+        group: GROUPS.data,
+        label: "Caption",
+        description: "Caption text to display",
+        formType: FORM_TYPES.string,
+        propType: PROP_TYPES.STRING,
+        defaultValue: "$100",
+        editable: true,
+        required: false,
+      },
+    },
+    layout: {},
+  },
+  {
+    name: "Row Double Line Headline Image Caption",
+    tag: "RowHeadlineImageCaption",
+    description:
+      "A row with left aligned image, headline text, and subtitle text, and right aligned caption text",
+    category: COMPONENT_TYPES.row,
+    preview_image_url: "{CLOUDINARY_URL}/Row_DoubleLine_HeadlineCaption.png",
+    supports_list_render: true,
+    props: {
+      title: {
+        group: GROUPS.data,
+        label: "Title",
+        description: "Headline text to display",
+        formType: FORM_TYPES.string,
+        propType: PROP_TYPES.STRING,
+        defaultValue: "Beautiful West Coast Villa",
+        editable: true,
+        required: false,
+      },
+      subtitle: {
+        group: GROUPS.data,
+        label: "Subtitle",
+        description: "Subtitle text to display",
+        formType: FORM_TYPES.string,
+        propType: PROP_TYPES.STRING,
+        defaultValue: "San Diego",
+        editable: true,
+        required: false,
+      },
+      caption: {
+        group: GROUPS.data,
+        label: "Caption",
+        description: "Caption text to display",
+        formType: FORM_TYPES.string,
+        propType: PROP_TYPES.STRING,
+        defaultValue: "$100",
+        editable: true,
+        required: false,
+      },
+      image: {
+        group: GROUPS.data,
+        label: "Image",
+        description: "Image to display",
+        formType: FORM_TYPES.image,
+        propType: PROP_TYPES.ASSET,
+        defaultValue: null,
+        editable: true,
+        required: false,
+      },
+    },
+    layout: {},
+  },
+];

package/src/mappings/RowHeadlineImageIcon.js

@@ -0,0 +1,99 @@
+import { COMPONENT_TYPES, createIconProp, createTextProp, createImageProp, createStaticBoolProp, } from "@draftbit/types";
+const SEED_DATA_PROPS = {
+    title: createTextProp({
+        label: "Title",
+        description: "Headline text to display",
+    }),
+    icon: createIconProp({
+        defaultValue: null,
+    }),
+};
+const IMAGE_PROP = createImageProp();
+const MULTILINE_PROP = createStaticBoolProp({
+    defaultValue: true,
+    editable: false,
+});
+const SUBTITLE_PROP = createTextProp({
+    label: "Subtitle",
+    description: "Subtitle text to display",
+    defaultValue: "San Diego",
+});
+export const SEED_DATA = [
+    {
+        name: "Row Single Line Headline Icon",
+        tag: "RowHeadlineImageIcon",
+        description: "A row with left aligned headline text and a right aligned icon",
+        category: COMPONENT_TYPES.row,
+        layout: {},
+        props: {
+            ...SEED_DATA_PROPS,
+        },
+    },
+    {
+        name: "Row Single Line Headline Icon Image",
+        tag: "RowHeadlineImageIcon",
+        description: "A row with left aligned image and headline text and a right aligned icon",
+        category: COMPONENT_TYPES.row,
+        layout: {},
+        props: {
+            ...SEED_DATA_PROPS,
+            image: IMAGE_PROP,
+        },
+    },
+    {
+        name: "Row Double Line Headline Icon",
+        tag: "RowHeadlineImageIcon",
+        description: "A row with left aligned headline text and subtitle text and a right aligned icon",
+        category: COMPONENT_TYPES.row,
+        layout: {},
+        props: {
+            ...SEED_DATA_PROPS,
+            subtitle: SUBTITLE_PROP,
+        },
+    },
+    {
+        name: "Row Double Line Headline Image Icon",
+        tag: "RowHeadlineImageIcon",
+        description: "A row with left aligned headline text and subtitle text and a right aligned icon",
+        category: COMPONENT_TYPES.row,
+        layout: {},
+        props: {
+            ...SEED_DATA_PROPS,
+            image: IMAGE_PROP,
+            subtitle: SUBTITLE_PROP,
+        },
+    },
+    {
+        name: "Row Multiline Headline Icon",
+        tag: "RowHeadlineImageIcon",
+        description: "A row with left aligned headline text and multiline subtitle text and a right aligned icon",
+        category: COMPONENT_TYPES.row,
+        layout: {},
+        props: {
+            ...SEED_DATA_PROPS,
+            multilineSubtitle: MULTILINE_PROP,
+            subtitle: createTextProp({
+                label: "Subtitle",
+                description: "Subtitle text to display",
+                defaultValue: "San Diego is a city on the Pacific coast of California known for its beaches, parks and warm climate",
+            }),
+        },
+    },
+    {
+        name: "Row Multiline Headline Image Icon",
+        tag: "RowHeadlineImageIcon",
+        description: "A row with left aligned image, headline text, and multiline subtitle text, and a right aligned icon",
+        category: COMPONENT_TYPES.row,
+        layout: {},
+        props: {
+            ...SEED_DATA_PROPS,
+            image: IMAGE_PROP,
+            multilineSubtitle: MULTILINE_PROP,
+            subtitle: createTextProp({
+                label: "Subtitle",
+                description: "Subtitle text to display",
+                defaultValue: "San Diego is a city on the Pacific coast of California known for its beaches, parks and warm climate",
+            }),
+        },
+    },
+];

package/src/mappings/RowHeadlineImageIcon.ts

@@ -0,0 +1,116 @@
+import {
+  COMPONENT_TYPES,
+  createIconProp,
+  createTextProp,
+  createImageProp,
+  createStaticBoolProp,
+} from "@draftbit/types";
+
+const SEED_DATA_PROPS = {
+  title: createTextProp({
+    label: "Title",
+    description: "Headline text to display",
+  }),
+  icon: createIconProp({
+    defaultValue: null,
+  }),
+};
+
+const IMAGE_PROP = createImageProp();
+const MULTILINE_PROP = createStaticBoolProp({
+  defaultValue: true,
+  editable: false,
+});
+const SUBTITLE_PROP = createTextProp({
+  label: "Subtitle",
+  description: "Subtitle text to display",
+  defaultValue: "San Diego",
+});
+
+export const SEED_DATA = [
+  {
+    name: "Row Single Line Headline Icon",
+    tag: "RowHeadlineImageIcon",
+    description:
+      "A row with left aligned headline text and a right aligned icon",
+    category: COMPONENT_TYPES.row,
+    layout: {},
+    props: {
+      ...SEED_DATA_PROPS,
+    },
+  },
+  {
+    name: "Row Single Line Headline Icon Image",
+    tag: "RowHeadlineImageIcon",
+    description:
+      "A row with left aligned image and headline text and a right aligned icon",
+    category: COMPONENT_TYPES.row,
+    layout: {},
+    props: {
+      ...SEED_DATA_PROPS,
+      image: IMAGE_PROP,
+    },
+  },
+  {
+    name: "Row Double Line Headline Icon",
+    tag: "RowHeadlineImageIcon",
+    description:
+      "A row with left aligned headline text and subtitle text and a right aligned icon",
+    category: COMPONENT_TYPES.row,
+    layout: {},
+    props: {
+      ...SEED_DATA_PROPS,
+      subtitle: SUBTITLE_PROP,
+    },
+  },
+  {
+    name: "Row Double Line Headline Image Icon",
+    tag: "RowHeadlineImageIcon",
+    description:
+      "A row with left aligned headline text and subtitle text and a right aligned icon",
+    category: COMPONENT_TYPES.row,
+    layout: {},
+    props: {
+      ...SEED_DATA_PROPS,
+      image: IMAGE_PROP,
+      subtitle: SUBTITLE_PROP,
+    },
+  },
+  {
+    name: "Row Multiline Headline Icon",
+    tag: "RowHeadlineImageIcon",
+    description:
+      "A row with left aligned headline text and multiline subtitle text and a right aligned icon",
+    category: COMPONENT_TYPES.row,
+    layout: {},
+    props: {
+      ...SEED_DATA_PROPS,
+      multilineSubtitle: MULTILINE_PROP,
+      subtitle: createTextProp({
+        label: "Subtitle",
+        description: "Subtitle text to display",
+        defaultValue:
+          "San Diego is a city on the Pacific coast of California known for its beaches, parks and warm climate",
+      }),
+    },
+  },
+  {
+    name: "Row Multiline Headline Image Icon",
+    tag: "RowHeadlineImageIcon",
+    description:
+      "A row with left aligned image, headline text, and multiline subtitle text, and a right aligned icon",
+    category: COMPONENT_TYPES.row,
+    layout: {},
+    props: {
+      ...SEED_DATA_PROPS,
+      image: IMAGE_PROP,
+      multilineSubtitle: MULTILINE_PROP,
+      subtitle: createTextProp({
+        label: "Subtitle",
+        description: "Subtitle text to display",
+        defaultValue:
+          "San Diego is a city on the Pacific coast of California known for its beaches, parks and warm climate",
+      }),
+    },
+  },
+];

package/src/mappings/SVG.js

@@ -0,0 +1,20 @@
+import { COMPONENT_TYPES, createSVGProp, StylesPanelSections, } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "SVG",
+    tag: "SVG",
+    description: "An SVG component",
+    category: COMPONENT_TYPES.media,
+    layout: {
+        width: 100,
+        height: 100,
+    },
+    stylesPanelSections: [
+        StylesPanelSections.Size,
+        StylesPanelSections.Margins,
+        StylesPanelSections.Position,
+        StylesPanelSections.Effects,
+    ],
+    props: {
+        source: createSVGProp(),
+    },
+};

package/src/mappings/SVG.ts

@@ -0,0 +1,25 @@
+import {
+  COMPONENT_TYPES,
+  createSVGProp,
+  StylesPanelSections,
+} from "@draftbit/types";
+
+export const SEED_DATA = {
+  name: "SVG",
+  tag: "SVG",
+  description: "An SVG component",
+  category: COMPONENT_TYPES.media,
+  layout: {
+    width: 100,
+    height: 100,
+  },
+  stylesPanelSections: [
+    StylesPanelSections.Size,
+    StylesPanelSections.Margins,
+    StylesPanelSections.Position,
+    StylesPanelSections.Effects,
+  ],
+  props: {
+    source: createSVGProp(),
+  },
+};

package/src/mappings/SafeAreaView.js

@@ -0,0 +1,33 @@
+import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "SafeAreaView",
+    tag: "SafeAreaView",
+    description: "A basic View that handles safe area",
+    category: COMPONENT_TYPES.deprecated,
+    props: {
+        edges: {
+            group: GROUPS.basic,
+            name: "edges",
+            label: "edges",
+            description: "Provides edges to be used by safe area view",
+            editable: true,
+            required: false,
+            formType: FORM_TYPES.flatArray,
+            propType: PROP_TYPES.STRING,
+            options: ["right", "bottom", "left", "top"],
+            defaultValue: ["right", "bottom", "left", "top"],
+        },
+        mode: {
+            group: GROUPS.basic,
+            name: "mode",
+            label: "mode",
+            description: "Mode used by safe area view",
+            editable: true,
+            required: false,
+            options: ["padding", "margin"],
+            formType: FORM_TYPES.flatArray,
+            propType: PROP_TYPES.STRING,
+            defaultValue: "padding",
+        },
+    },
+};

package/src/mappings/SafeAreaView.ts

@@ -0,0 +1,39 @@
+import {
+  GROUPS,
+  COMPONENT_TYPES,
+  FORM_TYPES,
+  PROP_TYPES,
+} from "@draftbit/types";
+
+export const SEED_DATA = {
+  name: "SafeAreaView",
+  tag: "SafeAreaView",
+  description: "A basic View that handles safe area",
+  category: COMPONENT_TYPES.deprecated,
+  props: {
+    edges: {
+      group: GROUPS.basic,
+      name: "edges",
+      label: "edges",
+      description: "Provides edges to be used by safe area view",
+      editable: true,
+      required: false,
+      formType: FORM_TYPES.flatArray,
+      propType: PROP_TYPES.STRING,
+      options: ["right", "bottom", "left", "top"],
+      defaultValue: ["right", "bottom", "left", "top"],
+    },
+    mode: {
+      group: GROUPS.basic,
+      name: "mode",
+      label: "mode",
+      description: "Mode used by safe area view",
+      editable: true,
+      required: false,
+      options: ["padding", "margin"],
+      formType: FORM_TYPES.flatArray,
+      propType: PROP_TYPES.STRING,
+      defaultValue: "padding",
+    },
+  },
+};

package/src/mappings/ScrollView.js

@@ -0,0 +1,37 @@
+import { COMPONENT_TYPES, createStaticBoolProp, CONTAINER_COMPONENT_STYLES_SECTIONS, Triggers, createActionProp, createColorProp, } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Scroll View",
+    tag: "ScrollView",
+    description: "A basic ScrollView component",
+    category: COMPONENT_TYPES.view,
+    stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
+    layout: {},
+    triggers: [Triggers.OnRefresh],
+    props: {
+        onRefresh: createActionProp(),
+        horizontal: createStaticBoolProp({
+            label: "Horizontal",
+            description: "Render your list horizontally",
+            defaultValue: false,
+        }),
+        showsHorizontalScrollIndicator: createStaticBoolProp({
+            label: "Show Horizontal Scroll Indicator",
+            description: "When true, shows a horizontal scroll indicator. The default value is true.",
+            defaultValue: true,
+        }),
+        showsVerticalScrollIndicator: createStaticBoolProp({
+            label: "Show Vertical Scroll Indicator",
+            description: "When true, shows a vertical scroll indicator. The default value is true.",
+            defaultValue: true,
+        }),
+        bounces: createStaticBoolProp({
+            label: "Bounce",
+            description: "When true, the scroll view bounces when it reaches the end of the content if the content is larger then the scroll view along the axis of the scroll direction.",
+            defaultValue: true,
+        }),
+        refreshColor: createColorProp({
+            label: "Refreshing Color",
+            description: "Color of the refresh indicator",
+        }),
+    },
+};

package/src/mappings/ScrollView.ts

@@ -0,0 +1,48 @@
+import {
+  COMPONENT_TYPES,
+  createStaticBoolProp,
+  CONTAINER_COMPONENT_STYLES_SECTIONS,
+  Triggers,
+  createActionProp,
+  createColorProp,
+} from "@draftbit/types";
+
+export const SEED_DATA = {
+  name: "Scroll View",
+  tag: "ScrollView",
+  description: "A basic ScrollView component",
+  category: COMPONENT_TYPES.view,
+  stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
+  layout: {},
+  triggers: [Triggers.OnRefresh],
+  props: {
+    onRefresh: createActionProp(),
+    horizontal: createStaticBoolProp({
+      label: "Horizontal",
+      description: "Render your list horizontally",
+      defaultValue: false,
+    }),
+    showsHorizontalScrollIndicator: createStaticBoolProp({
+      label: "Show Horizontal Scroll Indicator",
+      description:
+        "When true, shows a horizontal scroll indicator. The default value is true.",
+      defaultValue: true,
+    }),
+    showsVerticalScrollIndicator: createStaticBoolProp({
+      label: "Show Vertical Scroll Indicator",
+      description:
+        "When true, shows a vertical scroll indicator. The default value is true.",
+      defaultValue: true,
+    }),
+    bounces: createStaticBoolProp({
+      label: "Bounce",
+      description:
+        "When true, the scroll view bounces when it reaches the end of the content if the content is larger then the scroll view along the axis of the scroll direction.",
+      defaultValue: true,
+    }),
+    refreshColor: createColorProp({
+      label: "Refreshing Color",
+      description: "Color of the refresh indicator",
+    }),
+  },
+};

package/src/mappings/Shadow.js

@@ -0,0 +1,95 @@
+import { COMPONENT_TYPES, CONTAINER_COMPONENT_STYLES_SECTIONS, createColorProp, createStaticNumberProp, createStaticBoolProp, createDisabledProp, GROUPS, } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Shadow",
+    tag: "Shadow",
+    description: "A cross-platform, universal shadow.",
+    category: COMPONENT_TYPES.view,
+    stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
+    props: {
+        disabled: createDisabledProp({
+            description: "Disables the shadow.",
+        }),
+        startColor: createColorProp({
+            label: "Start Color",
+            description: "The initial gradient color of the shadow.",
+            defaultValue: null,
+        }),
+        endColor: createColorProp({
+            label: "End Color",
+            description: "The final gradient color of the shadow.",
+            defaultValue: null,
+        }),
+        distance: createStaticNumberProp({
+            label: "Distance",
+            description: "The distance of the shadow.",
+        }),
+        paintInside: createStaticBoolProp({
+            label: "Paint Inside",
+            description: "Apply the shadow below/inside the content.",
+            defaultValue: false,
+        }),
+        stretch: createStaticBoolProp({
+            label: "Stretch",
+            description: "Force children to occupy all available horizontal space.",
+            defaultValue: null,
+        }),
+        offsetX: createStaticNumberProp({
+            label: "Offset X",
+            description: "Moves the shadow in the x direction",
+            defeaultValue: 0,
+        }),
+        offsetY: createStaticNumberProp({
+            label: "Offset Y",
+            description: "Moves the shadow in the y direction",
+            defeaultValue: 0,
+        }),
+        showShadowSideStart: createStaticBoolProp({
+            label: "Show Shadow Start",
+            description: "Whether to show shadow on the start side or not",
+            defaultValue: true,
+            group: GROUPS.advanced,
+        }),
+        showShadowSideEnd: createStaticBoolProp({
+            label: "Show Shadow End",
+            description: "Whether to show shadow on the end side or not",
+            defaultValue: true,
+            group: GROUPS.advanced,
+        }),
+        showShadowSideTop: createStaticBoolProp({
+            label: "Show Shadow Top",
+            description: "Whether to show shadow on the top side or not",
+            defaultValue: true,
+            group: GROUPS.advanced,
+        }),
+        showShadowSideBottom: createStaticBoolProp({
+            label: "Show Shadow Bottom",
+            description: "Whether to show shadow on the bottom side or not",
+            defaultValue: true,
+            group: GROUPS.advanced,
+        }),
+        showShadowCornerTopStart: createStaticBoolProp({
+            label: "Show Shadow Top Start Corner",
+            description: "Whether to show shadow on the top start corner or not",
+            defaultValue: true,
+            group: GROUPS.advanced,
+        }),
+        showShadowCornerTopEnd: createStaticBoolProp({
+            label: "Show Shadow Top End Corner",
+            description: "Whether to show shadow on the top end corner or not",
+            defaultValue: true,
+            group: GROUPS.advanced,
+        }),
+        showShadowCornerBottomStart: createStaticBoolProp({
+            label: "Show Shadow Bottom Start Corner",
+            description: "Whether to show shadow on the bottom start corner or not",
+            defaultValue: true,
+            group: GROUPS.advanced,
+        }),
+        showShadowCornerBottomEnd: createStaticBoolProp({
+            label: "Show Shadow Bottom End Corner",
+            description: "Whether to show shadow on the bottom end corner or not",
+            defaultValue: true,
+            group: GROUPS.advanced,
+        }),
+    },
+};