@draftbit/core 47.1.0 → 47.1.1-1883fa.2

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/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/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,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: 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,
+        }),
+        refreshColor: createColorProp({
+            label: "Refreshing Color",
+            description: "Color of the refresh indicator",
+        }),
+    },
+};

package/src/mappings/ScrollView.ts

@@ -2,6 +2,9 @@ import {
   COMPONENT_TYPES,
   createStaticBoolProp,
   CONTAINER_COMPONENT_STYLES_SECTIONS,
+  Triggers,
+  createActionProp,
+  createColorProp,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -11,7 +14,9 @@ export const SEED_DATA = {
   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",
@@ -35,5 +40,9 @@ export const SEED_DATA = {
         "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/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.control,
+    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/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.control,
+    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/Stepper.js

@@ -0,0 +1,32 @@
+import { COMPONENT_TYPES, createIconSizeProp, createColorProp, createFieldNameProp, createStaticNumberProp, Triggers, BLOCK_STYLES_SECTIONS, StylesPanelSections, } from "@draftbit/types";
+export const SEED_DATA = [
+    {
+        name: "Stepper",
+        tag: "Stepper",
+        description: "A component used to control the quantity of something",
+        category: COMPONENT_TYPES.control,
+        stylesPanelSections: [
+            StylesPanelSections.Typography,
+            ...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/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.container,
+    stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
+    layout: {
+        minHeight: 40,
+    },
+    props: {
+        elevation: createElevationType(0),
+    },
+};

package/src/mappings/Swiper.js

@@ -0,0 +1,62 @@
+import { COMPONENT_TYPES, createBoolProp, createNumberProp, createTextProp, createColorProp, GROUPS, Triggers, createActionProp, } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Swiper",
+    tag: "Swiper",
+    description: "Swiper container",
+    category: COMPONENT_TYPES.swiper,
+    layout: {
+        height: 300,
+        width: "100%",
+    },
+    triggers: [Triggers.OnIndexChanged],
+    props: {
+        onIndexChanged: createActionProp(),
+        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.swiper,
+    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.control,
+        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.control,
+        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",
+            }),
+        },
+    },
+];