@draftbit/core 46.1.4 → 46.2.1-39f6d9.3

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/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/ScrollView.js

@@ -0,0 +1,31 @@
+import { COMPONENT_TYPES, createStaticBoolProp, CONTAINER_COMPONENT_STYLES_SECTIONS, } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Scroll View",
+    tag: "ScrollView",
+    description: "A basic ScrollView component",
+    category: COMPONENT_TYPES.layout,
+    stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
+    layout: {},
+    props: {
+        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: false,
+        }),
+        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,
+        }),
+    },
+};

package/src/mappings/ScrollView.ts

@@ -1,10 +1,15 @@
-import { COMPONENT_TYPES, createStaticBoolProp } from "@draftbit/types";
+import {
+  COMPONENT_TYPES,
+  createStaticBoolProp,
+  CONTAINER_COMPONENT_STYLES_SECTIONS,
+} from "@draftbit/types";
 
 export const SEED_DATA = {
   name: "Scroll View",
   tag: "ScrollView",
   description: "A basic ScrollView component",
   category: COMPONENT_TYPES.layout,
+  stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
   layout: {},
   props: {
     horizontal: createStaticBoolProp({

package/src/mappings/Slider.js

@@ -0,0 +1,60 @@
+import { COMPONENT_TYPES, GROUPS, createNumberProp, createColorProp, createFieldNameProp, createIconProp, Triggers, BLOCK_STYLES_SECTIONS, } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Slider",
+    tag: "Slider",
+    description: "A component used to set a value in a range",
+    category: COMPONENT_TYPES.input,
+    stylesPanelSections: BLOCK_STYLES_SECTIONS,
+    layout: {
+        marginLeft: 12,
+        marginRight: 12,
+    },
+    triggers: [Triggers.OnValueChange],
+    props: {
+        fieldName: createFieldNameProp({
+            defaultValue: "sliderValue",
+            handlerPropName: "onValueChange",
+            valuePropName: "value",
+        }),
+        minimumValue: createNumberProp({
+            group: GROUPS.basic,
+            label: "Min Value",
+            min: 0,
+            max: 1000,
+        }),
+        maximumValue: createNumberProp({
+            group: GROUPS.basic,
+            label: "Max Value",
+            min: 1,
+            max: 10000,
+        }),
+        step: createNumberProp({
+            group: GROUPS.basic,
+            label: "Step",
+            min: 0,
+            max: 100,
+            step: 0.01,
+            precision: 2,
+        }),
+        leftIcon: createIconProp({
+            label: "Left Icon",
+            defaultValue: null,
+        }),
+        rightIcon: createIconProp({
+            label: "Right Icon",
+            defaultValue: null,
+        }),
+        minimumTrackTintColor: createColorProp({
+            label: "Min Track Color",
+            defaultValue: null,
+        }),
+        maximumTrackTintColor: createColorProp({
+            label: "Max Track Color",
+            defaultValue: null,
+        }),
+        thumbTintColor: createColorProp({
+            label: "Thumb Color",
+            defaultValue: null,
+        }),
+    },
+};

package/src/mappings/Slider.ts

@@ -6,6 +6,7 @@ import {
   createFieldNameProp,
   createIconProp,
   Triggers,
+  BLOCK_STYLES_SECTIONS,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -13,6 +14,7 @@ export const SEED_DATA = {
   tag: "Slider",
   description: "A component used to set a value in a range",
   category: COMPONENT_TYPES.input,
+  stylesPanelSections: BLOCK_STYLES_SECTIONS,
   layout: {
     marginLeft: 12,
     marginRight: 12,

package/src/mappings/StarRating.js

@@ -0,0 +1,43 @@
+import { COMPONENT_TYPES, createStaticNumberProp, createFieldNameProp, createStaticBoolProp, Triggers, createColorProp, BLOCK_STYLES_SECTIONS, } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Star Rating",
+    tag: "StarRating",
+    description: "A star rating component",
+    category: COMPONENT_TYPES.button,
+    stylesPanelSections: BLOCK_STYLES_SECTIONS,
+    triggers: [Triggers.OnPress],
+    props: {
+        starSize: createStaticNumberProp({
+            label: "Star size",
+            description: "Size of each individual star",
+            defaultValue: 16,
+            min: 8,
+            max: 36,
+            step: 1,
+        }),
+        fieldName: createFieldNameProp({
+            defaultValue: "ratingValue",
+            handlerPropName: "onPress",
+            valuePropName: "rating", // the value prop in this component
+        }),
+        maxStars: createStaticNumberProp({
+            label: "Max stars",
+            description: "The max number of stars",
+            defaultValue: 5,
+            min: 0,
+            max: 10,
+            step: 1,
+        }),
+        isEditable: createStaticBoolProp({
+            label: "Editable",
+        }),
+        activeColor: createColorProp({
+            label: "Active Color",
+            defaultValue: "primary",
+        }),
+        inactiveColor: createColorProp({
+            label: "Inactive Color",
+            defaultValue: "divider",
+        }),
+    },
+};

package/src/mappings/StarRating.ts

@@ -5,6 +5,7 @@ import {
   createStaticBoolProp,
   Triggers,
   createColorProp,
+  BLOCK_STYLES_SECTIONS,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -12,6 +13,7 @@ export const SEED_DATA = {
   tag: "StarRating",
   description: "A star rating component",
   category: COMPONENT_TYPES.button,
+  stylesPanelSections: BLOCK_STYLES_SECTIONS,
   triggers: [Triggers.OnPress],
   props: {
     starSize: createStaticNumberProp({

package/src/mappings/Stepper.js

@@ -0,0 +1,29 @@
+import { COMPONENT_TYPES, createIconSizeProp, createColorProp, createFieldNameProp, createStaticNumberProp, Triggers, BLOCK_STYLES_SECTIONS, } from "@draftbit/types";
+export const SEED_DATA = [
+    {
+        name: "Stepper",
+        tag: "Stepper",
+        description: "A component used to control the quantity of something",
+        category: COMPONENT_TYPES.input,
+        stylesPanelSections: BLOCK_STYLES_SECTIONS,
+        layout: {},
+        triggers: [Triggers.OnChange],
+        props: {
+            fieldName: createFieldNameProp({
+                defaultValue: "stepperValue",
+                handlerPropName: "onChange",
+                valuePropName: "value",
+            }),
+            iconSize: createIconSizeProp({ defaultValue: 24 }),
+            iconColor: createColorProp({ defaultValue: "strong" }),
+            min: createStaticNumberProp({
+                label: "Minimum",
+                description: "Minimum Number",
+            }),
+            max: createStaticNumberProp({
+                label: "Maximum",
+                description: "Maximum Number",
+            }),
+        },
+    },
+];

package/src/mappings/Stepper.ts

@@ -5,6 +5,7 @@ import {
   createFieldNameProp,
   createStaticNumberProp,
   Triggers,
+  BLOCK_STYLES_SECTIONS,
 } from "@draftbit/types";
 
 export const SEED_DATA = [
@@ -13,6 +14,7 @@ export const SEED_DATA = [
     tag: "Stepper",
     description: "A component used to control the quantity of something",
     category: COMPONENT_TYPES.input,
+    stylesPanelSections: BLOCK_STYLES_SECTIONS,
     layout: {},
     triggers: [Triggers.OnChange],
     props: {

package/src/mappings/Surface.js

@@ -0,0 +1,14 @@
+import { COMPONENT_TYPES, createElevationType, CONTAINER_COMPONENT_STYLES_SECTIONS, } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Surface",
+    tag: "Surface",
+    description: "An elevated container",
+    category: COMPONENT_TYPES.layout,
+    stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
+    layout: {
+        minHeight: 40,
+    },
+    props: {
+        elevation: createElevationType(0),
+    },
+};

package/src/mappings/Surface.ts

@@ -1,10 +1,15 @@
-import { COMPONENT_TYPES, createElevationType } from "@draftbit/types";
+import {
+  COMPONENT_TYPES,
+  createElevationType,
+  CONTAINER_COMPONENT_STYLES_SECTIONS,
+} from "@draftbit/types";
 
 export const SEED_DATA = {
   name: "Surface",
   tag: "Surface",
   description: "An elevated container",
   category: COMPONENT_TYPES.layout,
+  stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
   layout: {
     minHeight: 40,
   },

package/src/mappings/Swiper.js

@@ -0,0 +1,60 @@
+import { COMPONENT_TYPES, createBoolProp, createNumberProp, createTextProp, createColorProp, GROUPS, } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Swiper",
+    tag: "Swiper",
+    description: "Swiper container",
+    category: COMPONENT_TYPES.container,
+    layout: {
+        height: 300,
+        width: "100%",
+    },
+    props: {
+        from: createNumberProp({
+            group: GROUPS.basic,
+            label: "Initial Slide",
+        }),
+        loop: createBoolProp({
+            group: GROUPS.basic,
+            label: "Loop",
+        }),
+        timeout: createNumberProp({
+            group: GROUPS.basic,
+            label: "Timeout",
+            defaultValue: 0,
+        }),
+        vertical: createBoolProp({
+            group: GROUPS.basic,
+            label: "Vertical",
+            defaultValue: false,
+        }),
+        prevTitle: createTextProp({
+            group: GROUPS.basic,
+            label: "Previous Title",
+            defaultValue: "",
+        }),
+        nextTitle: createTextProp({
+            group: GROUPS.basic,
+            label: "Next Title",
+            defaultValue: "",
+        }),
+        prevTitleColor: createColorProp({
+            label: "Previous Title Color",
+        }),
+        nextTitleColor: createColorProp({
+            label: "Next Title Color",
+        }),
+        dotColor: createColorProp({
+            label: "Dot Color",
+            defaultValue: "light",
+        }),
+        dotActiveColor: createColorProp({
+            label: "Dot Active Color",
+            defaultValue: "primary",
+        }),
+        dotsTouchable: createBoolProp({
+            group: GROUPS.basic,
+            label: "Dots Touchable",
+            defaultValue: true,
+        }),
+    },
+};

package/src/mappings/SwiperItem.js

@@ -0,0 +1,8 @@
+import { COMPONENT_TYPES } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Swiper Item",
+    tag: "SwiperItem",
+    description: "Swiper item",
+    category: COMPONENT_TYPES.button,
+    props: {},
+};

package/src/mappings/Switch.js

@@ -0,0 +1,81 @@
+import { COMPONENT_TYPES, GROUPS, createBoolProp, createColorProp, createFieldNameProp, createTextProp, createRowDirectionProp, Triggers, StylesPanelSections, BLOCK_STYLES_SECTIONS, } from "@draftbit/types";
+const SEED_DATA_TRIGGERS = [Triggers.OnValueChange];
+export const SEED_DATA = [
+    {
+        name: "Switch",
+        tag: "Switch",
+        category: COMPONENT_TYPES.input,
+        stylesPanelSections: BLOCK_STYLES_SECTIONS,
+        layout: {},
+        triggers: SEED_DATA_TRIGGERS,
+        props: {
+            disabled: createBoolProp({
+                label: "Disabled",
+                description: "Boolean to handle disabling the switch",
+            }),
+            fieldName: createFieldNameProp({
+                handlerPropName: "onValueChange",
+                valuePropName: "value",
+                defaultValue: "switchValue",
+            }),
+            activeTrackColor: createColorProp({
+                label: "Active Track Color",
+            }),
+            inactiveTrackColor: createColorProp({
+                label: "Inactive Track Color",
+            }),
+            activeThumbColor: createColorProp({
+                label: "Active Thumb Color",
+            }),
+            inactiveThumbColor: createColorProp({
+                label: "Inactive Thumb Color",
+            }),
+        },
+    },
+    {
+        name: "Switch Row",
+        tag: "SwitchRow",
+        category: COMPONENT_TYPES.input,
+        stylesPanelSections: [
+            StylesPanelSections.Typography,
+            StylesPanelSections.Margins,
+            StylesPanelSections.Effects,
+        ],
+        layout: {
+            marginLeft: 0,
+            marginRight: 0,
+        },
+        triggers: SEED_DATA_TRIGGERS,
+        props: {
+            label: createTextProp({
+                label: "Label",
+                description: "Label to show with the checkbox",
+                required: true,
+                defaultValue: "First Option",
+            }),
+            direction: createRowDirectionProp(),
+            disabled: createBoolProp({
+                label: "Disabled",
+                description: "Boolean to handle disabling the switch",
+                group: GROUPS.data,
+            }),
+            fieldName: createFieldNameProp({
+                handlerPropName: "onValueChange",
+                valuePropName: "value",
+                defaultValue: "switchValue",
+            }),
+            activeTrackColor: createColorProp({
+                label: "Active Track Color",
+            }),
+            inactiveTrackColor: createColorProp({
+                label: "Inactive Track Color",
+            }),
+            activeThumbColor: createColorProp({
+                label: "Active Thumb Color",
+            }),
+            inactiveThumbColor: createColorProp({
+                label: "Inactive Thumb Color",
+            }),
+        },
+    },
+];

package/src/mappings/Switch.ts

@@ -7,6 +7,8 @@ import {
   createTextProp,
   createRowDirectionProp,
   Triggers,
+  StylesPanelSections,
+  BLOCK_STYLES_SECTIONS,
 } from "@draftbit/types";
 const SEED_DATA_TRIGGERS = [Triggers.OnValueChange];
 export const SEED_DATA = [
@@ -14,6 +16,7 @@ export const SEED_DATA = [
     name: "Switch",
     tag: "Switch",
     category: COMPONENT_TYPES.input,
+    stylesPanelSections: BLOCK_STYLES_SECTIONS,
     layout: {},
     triggers: SEED_DATA_TRIGGERS,
     props: {
@@ -44,6 +47,11 @@ export const SEED_DATA = [
     name: "Switch Row",
     tag: "SwitchRow",
     category: COMPONENT_TYPES.input,
+    stylesPanelSections: [
+      StylesPanelSections.Typography,
+      StylesPanelSections.Margins,
+      StylesPanelSections.Effects,
+    ],
     layout: {
       marginLeft: 0,
       marginRight: 0,