@draftbit/core 46.2.4-70e86e.10 → 46.2.4-88e325.34

package/src/mappings/FlashList.js

@@ -0,0 +1,33 @@
+import { COMPONENT_TYPES, createNumColumnsType, createStaticBoolProp, createNumberProp, CONTAINER_COMPONENT_STYLES_SECTIONS, GROUPS, } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "FlashList",
+    tag: "FlashList",
+    description: "Flashlist by Shopify",
+    packageName: "@shopify/flash-list",
+    category: COMPONENT_TYPES.data,
+    stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
+    layout: {
+        flex: 1,
+    },
+    props: {
+        estimatedItemSize: createNumberProp({
+            group: GROUPS.basic,
+            label: "Est. Item Size",
+            description: "Approximate size of the items before rendering.",
+            defaultValue: 50,
+            step: 1,
+            precision: 0,
+        }),
+        horizontal: createStaticBoolProp({
+            label: "Horizontal",
+            description: "Render list horizontally",
+        }),
+        inverted: createStaticBoolProp({
+            label: "Inverted",
+            description: "If true, reverses the direction.",
+        }),
+        numColumns: createNumColumnsType({
+            editable: true,
+        }),
+    },
+};

package/src/mappings/FlashList.ts

@@ -0,0 +1,41 @@
+import {
+  COMPONENT_TYPES,
+  createNumColumnsType,
+  createStaticBoolProp,
+  createNumberProp,
+  CONTAINER_COMPONENT_STYLES_SECTIONS,
+  GROUPS,
+} from "@draftbit/types";
+
+export const SEED_DATA = {
+  name: "FlashList",
+  tag: "FlashList",
+  description: "Flashlist by Shopify",
+  packageName: "@shopify/flash-list",
+  category: COMPONENT_TYPES.data,
+  stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
+  layout: {
+    flex: 1,
+  },
+  props: {
+    estimatedItemSize: createNumberProp({
+      group: GROUPS.basic,
+      label: "Est. Item Size",
+      description: "Approximate size of the items before rendering.",
+      defaultValue: 50,
+      step: 1,
+      precision: 0,
+    }),
+    horizontal: createStaticBoolProp({
+      label: "Horizontal",
+      description: "Render list horizontally",
+    }),
+    inverted: createStaticBoolProp({
+      label: "Inverted",
+      description: "If true, reverses the direction.",
+    }),
+    numColumns: createNumColumnsType({
+      editable: true,
+    }),
+  },
+};

package/src/mappings/Image.js

@@ -1,4 +1,4 @@
-import { COMPONENT_TYPES, createImageProp, createResizeModeProp, StylesPanelSections, } from "@draftbit/types";
+import { COMPONENT_TYPES, createImageProp, createResizeModeProp, StylesPanelSections, FORM_TYPES, PROP_TYPES, GROUPS, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Image",
     tag: "Image",
@@ -9,6 +9,7 @@ export const SEED_DATA = {
         StylesPanelSections.Margins,
         StylesPanelSections.Position,
         StylesPanelSections.Effects,
+        StylesPanelSections.Borders,
     ],
     layout: {
         width: 100,
@@ -17,5 +18,18 @@ export const SEED_DATA = {
     props: {
         source: createImageProp(),
         resizeMode: createResizeModeProp(),
+        blurRadius: {
+            group: GROUPS.basic,
+            name: "blurRadius",
+            label: "Blur Radius",
+            defaultValue: null,
+            description: "The blur radius of the blur filter added to the image.",
+            editable: true,
+            required: false,
+            formType: FORM_TYPES.number,
+            propType: PROP_TYPES.NUMBER,
+            step: 5,
+            precision: 1,
+        },
     },
 };

package/src/mappings/Image.ts

@@ -3,6 +3,9 @@ import {
   createImageProp,
   createResizeModeProp,
   StylesPanelSections,
+  FORM_TYPES,
+  PROP_TYPES,
+  GROUPS,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -15,6 +18,7 @@ export const SEED_DATA = {
     StylesPanelSections.Margins,
     StylesPanelSections.Position,
     StylesPanelSections.Effects,
+    StylesPanelSections.Borders,
   ],
   layout: {
     width: 100,
@@ -23,5 +27,18 @@ export const SEED_DATA = {
   props: {
     source: createImageProp(),
     resizeMode: createResizeModeProp(),
+    blurRadius: {
+      group: GROUPS.basic,
+      name: "blurRadius",
+      label: "Blur Radius",
+      defaultValue: null,
+      description: "The blur radius of the blur filter added to the image.",
+      editable: true,
+      required: false,
+      formType: FORM_TYPES.number,
+      propType: PROP_TYPES.NUMBER,
+      step: 5,
+      precision: 1,
+    },
   },
 };

package/src/mappings/KeyboardAvoidingView.js

@@ -3,7 +3,7 @@ export const SEED_DATA = {
     name: "Keyboard Avoiding View",
     tag: "KeyboardAvoidingView",
     description: "View that moves out of the way of the virtual keyboard. ",
-    category: COMPONENT_TYPES.layout,
+    category: COMPONENT_TYPES.view,
     stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
     props: {
         enabled: {

package/src/mappings/KeyboardAvoidingView.ts

@@ -10,7 +10,7 @@ export const SEED_DATA = {
   name: "Keyboard Avoiding View",
   tag: "KeyboardAvoidingView",
   description: "View that moves out of the way of the virtual keyboard. ",
-  category: COMPONENT_TYPES.layout,
+  category: COMPONENT_TYPES.view,
   stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
   props: {
     enabled: {

package/src/mappings/KeyboardAwareScrollView.js

@@ -3,7 +3,7 @@ export const SEED_DATA = {
     name: "Keyboard Aware Scroll View",
     tag: "KeyboardAwareScrollView",
     description: "View that moves pushes the content when virtual keyboard is open.",
-    category: COMPONENT_TYPES.layout,
+    category: COMPONENT_TYPES.view,
     stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
     layout: {},
     props: {

package/src/mappings/KeyboardAwareScrollView.ts

@@ -11,7 +11,7 @@ export const SEED_DATA = {
   tag: "KeyboardAwareScrollView",
   description:
     "View that moves pushes the content when virtual keyboard is open.",
-  category: COMPONENT_TYPES.layout,
+  category: COMPONENT_TYPES.view,
   stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
   layout: {},
   props: {

package/src/mappings/Layout.js

@@ -3,7 +3,7 @@ export const SEED_DATA = [
     {
         name: "Row",
         tag: "Row",
-        category: COMPONENT_TYPES.layout,
+        category: COMPONENT_TYPES.deprecated,
         stylesPanelSections: [StylesPanelSections.NoStyles],
         props: {
             justifyContent: {
@@ -78,7 +78,7 @@ export const SEED_DATA = [
     {
         name: "Stack",
         tag: "Stack",
-        category: COMPONENT_TYPES.layout,
+        category: COMPONENT_TYPES.deprecated,
         stylesPanelSections: [StylesPanelSections.NoStyles],
         props: {
             justifyContent: {

package/src/mappings/Layout.ts

@@ -10,7 +10,7 @@ export const SEED_DATA = [
   {
     name: "Row",
     tag: "Row",
-    category: COMPONENT_TYPES.layout,
+    category: COMPONENT_TYPES.deprecated,
     stylesPanelSections: [StylesPanelSections.NoStyles],
     props: {
       justifyContent: {
@@ -85,7 +85,7 @@ export const SEED_DATA = [
   {
     name: "Stack",
     tag: "Stack",
-    category: COMPONENT_TYPES.layout,
+    category: COMPONENT_TYPES.deprecated,
     stylesPanelSections: [StylesPanelSections.NoStyles],
     props: {
       justifyContent: {

package/src/mappings/MapCallout.js

@@ -4,7 +4,7 @@ export const SEED_DATA = {
     tag: "MapCallout",
     packageName: "@draftbit/maps",
     description: "An info window to display on top of a marker when it is clicked",
-    category: COMPONENT_TYPES.media,
+    category: COMPONENT_TYPES.map,
     triggers: [Triggers.OnPress],
     layout: {},
     props: {

package/src/mappings/MapCallout.ts

@@ -12,7 +12,7 @@ export const SEED_DATA = {
   packageName: "@draftbit/maps",
   description:
     "An info window to display on top of a marker when it is clicked",
-  category: COMPONENT_TYPES.media,
+  category: COMPONENT_TYPES.map,
   triggers: [Triggers.OnPress],
   layout: {},
   props: {

package/src/mappings/MapMarker.js

@@ -4,7 +4,7 @@ export const SEED_DATA = {
     tag: "MapMarker",
     packageName: "@draftbit/maps",
     description: "A marker to show inside map view",
-    category: COMPONENT_TYPES.media,
+    category: COMPONENT_TYPES.map,
     layout: {},
     props: {
         latitude: createNumberProp({

package/src/mappings/MapMarker.ts

@@ -12,7 +12,7 @@ export const SEED_DATA = {
   tag: "MapMarker",
   packageName: "@draftbit/maps",
   description: "A marker to show inside map view",
-  category: COMPONENT_TYPES.media,
+  category: COMPONENT_TYPES.map,
   layout: {},
   props: {
     latitude: createNumberProp({

package/src/mappings/MapView.js

@@ -4,7 +4,7 @@ export const SEED_DATA = {
     tag: "MapView",
     packageName: "@draftbit/maps",
     description: "A map view",
-    category: COMPONENT_TYPES.media,
+    category: COMPONENT_TYPES.map,
     layout: {
         flex: 1,
     },

package/src/mappings/MapView.ts

@@ -14,7 +14,7 @@ export const SEED_DATA = {
   tag: "MapView",
   packageName: "@draftbit/maps",
   description: "A map view",
-  category: COMPONENT_TYPES.media,
+  category: COMPONENT_TYPES.map,
   layout: {
     flex: 1,
   },

package/src/mappings/Modal.js

@@ -3,7 +3,7 @@ export const SEED_DATA = {
     name: "Modal",
     tag: "Modal",
     description: "A basic Modal Component",
-    category: COMPONENT_TYPES.container,
+    category: COMPONENT_TYPES.layout,
     stylesPanelSections: [StylesPanelSections.NoStyles],
     props: {
         animationType: {

package/src/mappings/Modal.ts

@@ -11,7 +11,7 @@ export const SEED_DATA = {
   name: "Modal",
   tag: "Modal",
   description: "A basic Modal Component",
-  category: COMPONENT_TYPES.container,
+  category: COMPONENT_TYPES.layout,
   stylesPanelSections: [StylesPanelSections.NoStyles],
   props: {
     animationType: {

package/src/mappings/RadioButton.js

@@ -2,7 +2,7 @@ import { GROUPS, COMPONENT_TYPES, createBoolProp, createColorProp, createNumberP
 export const SEED_DATA = {
     name: "Radio Button",
     tag: "RadioButton",
-    category: COMPONENT_TYPES.input,
+    category: COMPONENT_TYPES.control,
     stylesPanelSections: BLOCK_STYLES_SECTIONS,
     triggers: [Triggers.OnPress],
     props: {

package/src/mappings/RadioButton.ts

@@ -13,7 +13,7 @@ import {
 export const SEED_DATA = {
   name: "Radio Button",
   tag: "RadioButton",
-  category: COMPONENT_TYPES.input,
+  category: COMPONENT_TYPES.control,
   stylesPanelSections: BLOCK_STYLES_SECTIONS,
   triggers: [Triggers.OnPress],
   props: {

package/src/mappings/RadioButtonGroup.js

@@ -2,7 +2,7 @@ import { COMPONENT_TYPES, createFieldNameProp, createDirectionProp, Triggers, St
 export const SEED_DATA = {
     name: "Radio Button Group",
     tag: "RadioButtonGroup",
-    category: COMPONENT_TYPES.input,
+    category: COMPONENT_TYPES.control,
     stylesPanelSections: [StylesPanelSections.Margins],
     layout: {},
     triggers: [Triggers.OnValueChange],

package/src/mappings/RadioButtonGroup.ts

@@ -9,7 +9,7 @@ import {
 export const SEED_DATA = {
   name: "Radio Button Group",
   tag: "RadioButtonGroup",
-  category: COMPONENT_TYPES.input,
+  category: COMPONENT_TYPES.control,
   stylesPanelSections: [StylesPanelSections.Margins],
   layout: {},
   triggers: [Triggers.OnValueChange],

package/src/mappings/RadioButtonRow.js

@@ -2,7 +2,7 @@ import { createTextProp, createTextEnumProp, COMPONENT_TYPES, createColorProp, G
 export const SEED_DATA = {
     name: "Radio Button Row",
     tag: "RadioButtonRow",
-    category: COMPONENT_TYPES.input,
+    category: COMPONENT_TYPES.control,
     stylesPanelSections: [
         StylesPanelSections.Typography,
         StylesPanelSections.Margins,

package/src/mappings/RadioButtonRow.ts

@@ -10,7 +10,7 @@ import {
 export const SEED_DATA = {
   name: "Radio Button Row",
   tag: "RadioButtonRow",
-  category: COMPONENT_TYPES.input,
+  category: COMPONENT_TYPES.control,
   stylesPanelSections: [
     StylesPanelSections.Typography,
     StylesPanelSections.Margins,

package/src/mappings/ScrollView.js

@@ -3,7 +3,7 @@ export const SEED_DATA = {
     name: "Scroll View",
     tag: "ScrollView",
     description: "A basic ScrollView component",
-    category: COMPONENT_TYPES.layout,
+    category: COMPONENT_TYPES.view,
     stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
     layout: {},
     props: {

package/src/mappings/ScrollView.ts

@@ -8,7 +8,7 @@ export const SEED_DATA = {
   name: "Scroll View",
   tag: "ScrollView",
   description: "A basic ScrollView component",
-  category: COMPONENT_TYPES.layout,
+  category: COMPONENT_TYPES.view,
   stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
   layout: {},
   props: {

package/src/mappings/Slider.js

@@ -3,7 +3,7 @@ export const SEED_DATA = {
     name: "Slider",
     tag: "Slider",
     description: "A component used to set a value in a range",
-    category: COMPONENT_TYPES.input,
+    category: COMPONENT_TYPES.control,
     stylesPanelSections: BLOCK_STYLES_SECTIONS,
     layout: {
         marginLeft: 12,

package/src/mappings/Slider.ts

@@ -13,7 +13,7 @@ export const SEED_DATA = {
   name: "Slider",
   tag: "Slider",
   description: "A component used to set a value in a range",
-  category: COMPONENT_TYPES.input,
+  category: COMPONENT_TYPES.control,
   stylesPanelSections: BLOCK_STYLES_SECTIONS,
   layout: {
     marginLeft: 12,

package/src/mappings/StarRating.js

@@ -3,7 +3,7 @@ export const SEED_DATA = {
     name: "Star Rating",
     tag: "StarRating",
     description: "A star rating component",
-    category: COMPONENT_TYPES.button,
+    category: COMPONENT_TYPES.control,
     stylesPanelSections: BLOCK_STYLES_SECTIONS,
     triggers: [Triggers.OnPress],
     props: {

package/src/mappings/StarRating.ts

@@ -12,7 +12,7 @@ export const SEED_DATA = {
   name: "Star Rating",
   tag: "StarRating",
   description: "A star rating component",
-  category: COMPONENT_TYPES.button,
+  category: COMPONENT_TYPES.control,
   stylesPanelSections: BLOCK_STYLES_SECTIONS,
   triggers: [Triggers.OnPress],
   props: {

package/src/mappings/Stepper.js

@@ -4,7 +4,7 @@ export const SEED_DATA = [
         name: "Stepper",
         tag: "Stepper",
         description: "A component used to control the quantity of something",
-        category: COMPONENT_TYPES.input,
+        category: COMPONENT_TYPES.control,
         stylesPanelSections: BLOCK_STYLES_SECTIONS,
         layout: {},
         triggers: [Triggers.OnChange],

package/src/mappings/Stepper.ts

@@ -13,7 +13,7 @@ export const SEED_DATA = [
     name: "Stepper",
     tag: "Stepper",
     description: "A component used to control the quantity of something",
-    category: COMPONENT_TYPES.input,
+    category: COMPONENT_TYPES.control,
     stylesPanelSections: BLOCK_STYLES_SECTIONS,
     layout: {},
     triggers: [Triggers.OnChange],

package/src/mappings/Surface.js

@@ -3,7 +3,7 @@ export const SEED_DATA = {
     name: "Surface",
     tag: "Surface",
     description: "An elevated container",
-    category: COMPONENT_TYPES.layout,
+    category: COMPONENT_TYPES.container,
     stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
     layout: {
         minHeight: 40,

package/src/mappings/Surface.ts

@@ -8,7 +8,7 @@ export const SEED_DATA = {
   name: "Surface",
   tag: "Surface",
   description: "An elevated container",
-  category: COMPONENT_TYPES.layout,
+  category: COMPONENT_TYPES.container,
   stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
   layout: {
     minHeight: 40,

package/src/mappings/Swiper.js

@@ -3,7 +3,7 @@ export const SEED_DATA = {
     name: "Swiper",
     tag: "Swiper",
     description: "Swiper container",
-    category: COMPONENT_TYPES.container,
+    category: COMPONENT_TYPES.swiper,
     layout: {
         height: 300,
         width: "100%",

package/src/mappings/Swiper.ts

@@ -11,7 +11,7 @@ export const SEED_DATA = {
   name: "Swiper",
   tag: "Swiper",
   description: "Swiper container",
-  category: COMPONENT_TYPES.container,
+  category: COMPONENT_TYPES.swiper,
   layout: {
     height: 300,
     width: "100%",

package/src/mappings/SwiperItem.js

@@ -3,6 +3,6 @@ export const SEED_DATA = {
     name: "Swiper Item",
     tag: "SwiperItem",
     description: "Swiper item",
-    category: COMPONENT_TYPES.button,
+    category: COMPONENT_TYPES.swiper,
     props: {},
 };

package/src/mappings/SwiperItem.ts

@@ -4,6 +4,6 @@ export const SEED_DATA = {
   name: "Swiper Item",
   tag: "SwiperItem",
   description: "Swiper item",
-  category: COMPONENT_TYPES.button,
+  category: COMPONENT_TYPES.swiper,
   props: {},
 };

package/src/mappings/Switch.js

@@ -4,7 +4,7 @@ export const SEED_DATA = [
     {
         name: "Switch",
         tag: "Switch",
-        category: COMPONENT_TYPES.input,
+        category: COMPONENT_TYPES.control,
         stylesPanelSections: BLOCK_STYLES_SECTIONS,
         layout: {},
         triggers: SEED_DATA_TRIGGERS,
@@ -35,7 +35,7 @@ export const SEED_DATA = [
     {
         name: "Switch Row",
         tag: "SwitchRow",
-        category: COMPONENT_TYPES.input,
+        category: COMPONENT_TYPES.control,
         stylesPanelSections: [
             StylesPanelSections.Typography,
             StylesPanelSections.Margins,

package/src/mappings/Switch.ts

@@ -15,7 +15,7 @@ export const SEED_DATA = [
   {
     name: "Switch",
     tag: "Switch",
-    category: COMPONENT_TYPES.input,
+    category: COMPONENT_TYPES.control,
     stylesPanelSections: BLOCK_STYLES_SECTIONS,
     layout: {},
     triggers: SEED_DATA_TRIGGERS,
@@ -46,7 +46,7 @@ export const SEED_DATA = [
   {
     name: "Switch Row",
     tag: "SwitchRow",
-    category: COMPONENT_TYPES.input,
+    category: COMPONENT_TYPES.control,
     stylesPanelSections: [
       StylesPanelSections.Typography,
       StylesPanelSections.Margins,

package/src/mappings/TextField.js

@@ -16,7 +16,7 @@ const SEED_DATA_PROPS = {
         description: "Can automatically capitalize sentences, words, and characters (Default: none).",
         editable: true,
         required: false,
-        defaultValue: null,
+        defaultValue: "none",
         options: ["none", "sentences", "words", "characters"],
         formType: FORM_TYPES.flatArray,
         propType: PROP_TYPES.STRING,

package/src/mappings/TextField.ts

@@ -30,7 +30,7 @@ const SEED_DATA_PROPS = {
       "Can automatically capitalize sentences, words, and characters (Default: none).",
     editable: true,
     required: false,
-    defaultValue: null,
+    defaultValue: "none",
     options: ["none", "sentences", "words", "characters"],
     formType: FORM_TYPES.flatArray,
     propType: PROP_TYPES.STRING,

package/src/mappings/TextInput.js

@@ -104,7 +104,7 @@ export const SEED_DATA = [
                 description: "Can automatically capitalize sentences, words, and characters (Default: none).",
                 editable: true,
                 required: false,
-                defaultValue: null,
+                defaultValue: "none",
                 options: ["none", "sentences", "words", "characters"],
                 formType: FORM_TYPES.flatArray,
                 propType: PROP_TYPES.STRING,

package/src/mappings/TextInput.ts

@@ -121,7 +121,7 @@ export const SEED_DATA = [
           "Can automatically capitalize sentences, words, and characters (Default: none).",
         editable: true,
         required: false,
-        defaultValue: null,
+        defaultValue: "none",
         options: ["none", "sentences", "words", "characters"],
         formType: FORM_TYPES.flatArray,
         propType: PROP_TYPES.STRING,

package/src/mappings/WebView.js

@@ -3,7 +3,7 @@ export const SEED_DATA = {
     name: "Web View",
     tag: "WebView",
     description: "Render web content inside a view",
-    category: COMPONENT_TYPES.media,
+    category: COMPONENT_TYPES.utility,
     stylesPanelSections: [
         StylesPanelSections.Size,
         StylesPanelSections.Margins,

package/src/mappings/WebView.ts

@@ -11,7 +11,7 @@ export const SEED_DATA = {
   name: "Web View",
   tag: "WebView",
   description: "Render web content inside a view",
-  category: COMPONENT_TYPES.media,
+  category: COMPONENT_TYPES.utility,
   stylesPanelSections: [
     StylesPanelSections.Size,
     StylesPanelSections.Margins,