@draftbit/core 47.1.1-ee131b.2 → 47.2.1-d833e1.2

package/src/mappings/DeckSwiperCard.ts

@@ -0,0 +1,24 @@
+import { COMPONENT_TYPES, StylesPanelSections } from "@draftbit/types";
+
+export const SEED_DATA = {
+  name: "Deck Swiper Card",
+  tag: "DeckSwiperCard",
+  description: "Single Deck Swiper Card item to be used in DeckSwiper",
+  category: COMPONENT_TYPES.swiper,
+  stylesPanelSections: [
+    StylesPanelSections.LayoutFlexItems,
+    StylesPanelSections.LayoutContent,
+    StylesPanelSections.Background,
+    StylesPanelSections.Size,
+    StylesPanelSections.MarginsAndPaddings,
+    StylesPanelSections.Borders,
+    StylesPanelSections.Effects,
+  ],
+  layout: {
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 20,
+    borderWidth: 2,
+  },
+  props: {},
+};

package/src/mappings/FlashList.js

@@ -1,4 +1,4 @@
-import { COMPONENT_TYPES, createNumColumnsType, createStaticBoolProp, createNumberProp, CONTAINER_COMPONENT_STYLES_SECTIONS, GROUPS, Triggers, createActionProp, createStaticNumberProp, createColorProp, } from "@draftbit/types";
+import { COMPONENT_TYPES, createNumColumnsType, createStaticBoolProp, createNumberProp, GROUPS, Triggers, createActionProp, createStaticNumberProp, createColorProp, StylesPanelSections, } from "@draftbit/types";
 export const SEED_DATA = [
     {
         name: "Masonry List",
@@ -6,10 +6,10 @@ export const SEED_DATA = [
         description: "Masonry Flashlist by Shopify",
         packageName: "@shopify/flash-list",
         category: COMPONENT_TYPES.data,
-        stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
-        layout: {
-            flex: 1,
-        },
+        stylesPanelSections: [
+            StylesPanelSections.Background,
+            StylesPanelSections.MarginsAndPaddings,
+        ],
         triggers: [Triggers.OnRefresh, Triggers.OnEndReached],
         props: {
             onRefresh: createActionProp(),
@@ -57,10 +57,10 @@ export const SEED_DATA = [
         description: "Flashlist by Shopify",
         packageName: "@shopify/flash-list",
         category: COMPONENT_TYPES.data,
-        stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
-        layout: {
-            flex: 1,
-        },
+        stylesPanelSections: [
+            StylesPanelSections.Background,
+            StylesPanelSections.MarginsAndPaddings,
+        ],
         triggers: [Triggers.OnRefresh, Triggers.OnEndReached],
         props: {
             onRefresh: createActionProp(),

package/src/mappings/FlashList.ts

@@ -3,12 +3,12 @@ import {
   createNumColumnsType,
   createStaticBoolProp,
   createNumberProp,
-  CONTAINER_COMPONENT_STYLES_SECTIONS,
   GROUPS,
   Triggers,
   createActionProp,
   createStaticNumberProp,
   createColorProp,
+  StylesPanelSections,
 } from "@draftbit/types";
 
 export const SEED_DATA = [
@@ -18,10 +18,10 @@ export const SEED_DATA = [
     description: "Masonry Flashlist by Shopify",
     packageName: "@shopify/flash-list",
     category: COMPONENT_TYPES.data,
-    stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
-    layout: {
-      flex: 1,
-    },
+    stylesPanelSections: [
+      StylesPanelSections.Background,
+      StylesPanelSections.MarginsAndPaddings,
+    ],
     triggers: [Triggers.OnRefresh, Triggers.OnEndReached],
     props: {
       onRefresh: createActionProp(),
@@ -72,10 +72,10 @@ export const SEED_DATA = [
     description: "Flashlist by Shopify",
     packageName: "@shopify/flash-list",
     category: COMPONENT_TYPES.data,
-    stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
-    layout: {
-      flex: 1,
-    },
+    stylesPanelSections: [
+      StylesPanelSections.Background,
+      StylesPanelSections.MarginsAndPaddings,
+    ],
     triggers: [Triggers.OnRefresh, Triggers.OnEndReached],
     props: {
       onRefresh: createActionProp(),

package/src/mappings/LinearGradient.js

@@ -1,9 +1,14 @@
-import { createColorProp, FORM_TYPES, GROUPS, PROP_TYPES, } from "@draftbit/types";
+import { createColorProp, FORM_TYPES, GROUPS, PROP_TYPES, StylesPanelSections, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Linear Gradient",
     tag: "LinearGradient",
     description: "Linear Gradient Component",
     layout: { width: "100%", height: "100%" },
+    stylesPanelSections: [
+        StylesPanelSections.MarginsAndPaddings,
+        StylesPanelSections.Borders,
+        StylesPanelSections.Effects,
+    ],
     props: {
         endY: {
             group: GROUPS.basic,

package/src/mappings/LinearGradient.ts

@@ -3,6 +3,7 @@ import {
   FORM_TYPES,
   GROUPS,
   PROP_TYPES,
+  StylesPanelSections,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -10,6 +11,11 @@ export const SEED_DATA = {
   tag: "LinearGradient",
   description: "Linear Gradient Component",
   layout: { width: "100%", height: "100%" },
+  stylesPanelSections: [
+    StylesPanelSections.MarginsAndPaddings,
+    StylesPanelSections.Borders,
+    StylesPanelSections.Effects,
+  ],
   props: {
     endY: {
       group: GROUPS.basic,

package/src/mappings/MapCallout.js

@@ -1,8 +1,13 @@
-import { COMPONENT_TYPES, createActionProp, createBoolProp, GROUPS, Triggers, } from "@draftbit/types";
+import { COMPONENT_TYPES, createActionProp, createBoolProp, GROUPS, Triggers, StylesPanelSections, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Map Callout",
     tag: "MapCallout",
     packageName: "@draftbit/maps",
+    stylesPanelSections: [
+        StylesPanelSections.Size,
+        StylesPanelSections.Margins,
+        StylesPanelSections.Effects,
+    ],
     description: "An info window to display on top of a marker when it is clicked",
     category: COMPONENT_TYPES.map,
     triggers: [Triggers.OnPress],

package/src/mappings/MapCallout.ts

@@ -4,12 +4,18 @@ import {
   createBoolProp,
   GROUPS,
   Triggers,
+  StylesPanelSections,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
   name: "Map Callout",
   tag: "MapCallout",
   packageName: "@draftbit/maps",
+  stylesPanelSections: [
+    StylesPanelSections.Size,
+    StylesPanelSections.Margins,
+    StylesPanelSections.Effects,
+  ],
   description:
     "An info window to display on top of a marker when it is clicked",
   category: COMPONENT_TYPES.map,

package/src/mappings/MapMarker.js

@@ -1,12 +1,19 @@
-import { COMPONENT_TYPES, createBoolProp, createColorProp, createNumberProp, createTextProp, GROUPS, } from "@draftbit/types";
+import { COMPONENT_TYPES, createActionProp, createBoolProp, createColorProp, createImageProp, createNumberProp, createStaticNumberProp, createTextProp, GROUPS, StylesPanelSections, Triggers, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Map Marker",
     tag: "MapMarker",
     packageName: "@draftbit/maps",
     description: "A marker to show inside map view",
     category: COMPONENT_TYPES.map,
+    stylesPanelSections: [
+        StylesPanelSections.Size,
+        StylesPanelSections.Margins,
+        StylesPanelSections.Effects,
+    ],
     layout: {},
+    triggers: [Triggers.OnPress],
     props: {
+        onPress: createActionProp(),
         latitude: createNumberProp({
             label: "Latitude",
             description: "The latitude in which the marker is located",
@@ -43,5 +50,18 @@ export const SEED_DATA = {
             label: "Pin Color",
             description: "Sets the color of the marker",
         }),
+        pinImage: createImageProp({
+            label: "Pin image",
+            description: "Image to be used instead of the default pin",
+            editable: true,
+            required: false,
+            defaultValue: null,
+        }),
+        pinImageSize: createStaticNumberProp({
+            label: "Pin image size",
+            description: "The size of pin image. Only applies when using custom pin image",
+            required: false,
+            defaultValue: 50,
+        }),
     },
 };

package/src/mappings/MapMarker.ts

@@ -1,10 +1,15 @@
 import {
   COMPONENT_TYPES,
+  createActionProp,
   createBoolProp,
   createColorProp,
+  createImageProp,
   createNumberProp,
+  createStaticNumberProp,
   createTextProp,
   GROUPS,
+  StylesPanelSections,
+  Triggers,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -13,8 +18,15 @@ export const SEED_DATA = {
   packageName: "@draftbit/maps",
   description: "A marker to show inside map view",
   category: COMPONENT_TYPES.map,
+  stylesPanelSections: [
+    StylesPanelSections.Size,
+    StylesPanelSections.Margins,
+    StylesPanelSections.Effects,
+  ],
   layout: {},
+  triggers: [Triggers.OnPress],
   props: {
+    onPress: createActionProp(),
     latitude: createNumberProp({
       label: "Latitude",
       description: "The latitude in which the marker is located",
@@ -52,5 +64,19 @@ export const SEED_DATA = {
       label: "Pin Color",
       description: "Sets the color of the marker",
     }),
+    pinImage: createImageProp({
+      label: "Pin image",
+      description: "Image to be used instead of the default pin",
+      editable: true,
+      required: false,
+      defaultValue: null,
+    }),
+    pinImageSize: createStaticNumberProp({
+      label: "Pin image size",
+      description:
+        "The size of pin image. Only applies when using custom pin image",
+      required: false,
+      defaultValue: 50,
+    }),
   },
 };

package/src/mappings/MapView.js

@@ -1,16 +1,22 @@
-import { COMPONENT_TYPES, createBoolProp, createColorProp, createNumberProp, createTextProp, GROUPS, FORM_TYPES, PROP_TYPES, } from "@draftbit/types";
+import { COMPONENT_TYPES, createBoolProp, createColorProp, createNumberProp, createTextProp, GROUPS, FORM_TYPES, PROP_TYPES, StylesPanelSections, Triggers, createActionProp, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Map View",
     tag: "MapView",
     packageName: "@draftbit/maps",
     description: "A map view",
     category: COMPONENT_TYPES.map,
+    stylesPanelSections: [StylesPanelSections.Size, StylesPanelSections.Margins],
     layout: {
         flex: 1,
         width: "100%",
         height: "100%",
     },
+    triggers: [Triggers.OnRegionChange],
     props: {
+        onRegionChange: createActionProp({
+            label: "On region changed",
+            description: "Action to execute when map panning stops and region changes",
+        }),
         provider: {
             formType: FORM_TYPES.flatArray,
             propType: PROP_TYPES.STRING,

package/src/mappings/MapView.ts

@@ -7,6 +7,9 @@ import {
   GROUPS,
   FORM_TYPES,
   PROP_TYPES,
+  StylesPanelSections,
+  Triggers,
+  createActionProp,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -15,12 +18,19 @@ export const SEED_DATA = {
   packageName: "@draftbit/maps",
   description: "A map view",
   category: COMPONENT_TYPES.map,
+  stylesPanelSections: [StylesPanelSections.Size, StylesPanelSections.Margins],
   layout: {
     flex: 1,
     width: "100%",
     height: "100%",
   },
+  triggers: [Triggers.OnRegionChange],
   props: {
+    onRegionChange: createActionProp({
+      label: "On region changed",
+      description:
+        "Action to execute when map panning stops and region changes",
+    }),
     provider: {
       formType: FORM_TYPES.flatArray,
       propType: PROP_TYPES.STRING,

package/src/mappings/Markdown.js

@@ -0,0 +1,25 @@
+import { COMPONENT_TYPES, FORM_TYPES, GROUPS, PROP_TYPES, StylesPanelSections, } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Markdown",
+    tag: "Markdown",
+    description: "A component that renders markdown",
+    category: COMPONENT_TYPES.text,
+    stylesPanelSections: [
+        StylesPanelSections.Typography,
+        StylesPanelSections.LayoutSelectedItem,
+        StylesPanelSections.MarginsAndPaddings,
+        StylesPanelSections.Effects,
+    ],
+    props: {
+        children: {
+            group: GROUPS.data,
+            label: "Markdown Text",
+            description: "Markdown text to be rendered ",
+            editable: true,
+            required: true,
+            formType: FORM_TYPES.string,
+            propType: PROP_TYPES.STRING,
+            defaultValue: "### Markdown",
+        },
+    },
+};

package/src/mappings/Markdown.ts

@@ -0,0 +1,32 @@
+import {
+  COMPONENT_TYPES,
+  FORM_TYPES,
+  GROUPS,
+  PROP_TYPES,
+  StylesPanelSections,
+} from "@draftbit/types";
+
+export const SEED_DATA = {
+  name: "Markdown",
+  tag: "Markdown",
+  description: "A component that renders markdown",
+  category: COMPONENT_TYPES.text,
+  stylesPanelSections: [
+    StylesPanelSections.Typography,
+    StylesPanelSections.LayoutSelectedItem,
+    StylesPanelSections.MarginsAndPaddings,
+    StylesPanelSections.Effects,
+  ],
+  props: {
+    children: {
+      group: GROUPS.data,
+      label: "Markdown Text",
+      description: "Markdown text to be rendered ",
+      editable: true,
+      required: true,
+      formType: FORM_TYPES.string,
+      propType: PROP_TYPES.STRING,
+      defaultValue: "### Markdown",
+    },
+  },
+};

package/src/mappings/Picker.js

@@ -1,4 +1,4 @@
-import { COMPONENT_TYPES, Triggers, GROUPS, FORM_TYPES, PROP_TYPES, FIELD_NAME, createIconSizeProp, createColorProp, StylesPanelSections, } from "@draftbit/types";
+import { COMPONENT_TYPES, Triggers, GROUPS, FORM_TYPES, PROP_TYPES, FIELD_NAME, createIconSizeProp, createColorProp, StylesPanelSections, createStaticBoolProp, } from "@draftbit/types";
 const SEED_DATA_PROPS = {
     label: {
         group: GROUPS.data,
@@ -142,6 +142,11 @@ export const SEED_DATA = [
             },
             iconSize: createIconSizeProp({ defaultValue: 24 }),
             iconColor: createColorProp({ label: "Icon Color" }),
+            autoDismissKeyboard: createStaticBoolProp({
+                label: "Auto dismiss keyboard",
+                description: "Automatically dismiss keyboard when Picker is opened",
+                defaultValue: true,
+            }),
         },
         layout: {},
     },

package/src/mappings/Picker.ts

@@ -8,6 +8,7 @@ import {
   createIconSizeProp,
   createColorProp,
   StylesPanelSections,
+  createStaticBoolProp,
 } from "@draftbit/types";
 
 const SEED_DATA_PROPS = {
@@ -157,6 +158,11 @@ export const SEED_DATA = [
       },
       iconSize: createIconSizeProp({ defaultValue: 24 }),
       iconColor: createColorProp({ label: "Icon Color" }),
+      autoDismissKeyboard: createStaticBoolProp({
+        label: "Auto dismiss keyboard",
+        description: "Automatically dismiss keyboard when Picker is opened",
+        defaultValue: true,
+      }),
     },
     layout: {},
   },

package/src/mappings/Shadow.js

@@ -0,0 +1,101 @@
+import { COMPONENT_TYPES, createColorProp, createStaticNumberProp, createStaticBoolProp, createDisabledProp, GROUPS, StylesPanelSections, } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Shadow",
+    tag: "Shadow",
+    description: "A cross-platform, universal shadow.",
+    category: COMPONENT_TYPES.view,
+    stylesPanelSections: [
+        StylesPanelSections.Size,
+        StylesPanelSections.Margins,
+        StylesPanelSections.Position,
+        StylesPanelSections.Borders,
+        StylesPanelSections.Effects,
+    ],
+    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: true,
+        }),
+        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,
+        }),
+    },
+};

package/src/mappings/Shadow.ts

@@ -0,0 +1,110 @@
+import {
+  COMPONENT_TYPES,
+  createColorProp,
+  createStaticNumberProp,
+  createStaticBoolProp,
+  createDisabledProp,
+  GROUPS,
+  StylesPanelSections,
+} from "@draftbit/types";
+
+export const SEED_DATA = {
+  name: "Shadow",
+  tag: "Shadow",
+  description: "A cross-platform, universal shadow.",
+  category: COMPONENT_TYPES.view,
+  stylesPanelSections: [
+    StylesPanelSections.Size,
+    StylesPanelSections.Margins,
+    StylesPanelSections.Position,
+    StylesPanelSections.Borders,
+    StylesPanelSections.Effects,
+  ],
+  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: true,
+    }),
+    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,
+    }),
+  },
+};