@draftbit/core 47.0.0-alpha.1 → 47.0.0-c416b1.2

package/src/mappings/ActivityIndicator.js

@@ -0,0 +1,58 @@
+import { COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, GROUPS, StylesPanelSections, } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Activity Indicator",
+    tag: "ActivityIndicator",
+    description: "Displays a circular loading indicator.",
+    doc_link: "https://docs.expo.io/versions/latest/react-native/activityindicator/",
+    code_link: "https://github.com/expo/expo/blob/master/ios/versioned-react-native/ABI32_0_0/Libraries/Components/ActivityIndicator/ActivityIndicator.js",
+    category: COMPONENT_TYPES.utility,
+    stylesPanelSections: [
+        StylesPanelSections.Size,
+        StylesPanelSections.Margins,
+        StylesPanelSections.Borders,
+    ],
+    layout: { width: 36, height: 36 },
+    props: {
+        size: {
+            label: "Size",
+            description: "The size of the loading indicator (Default: small)",
+            options: ["small", "large"],
+            formType: FORM_TYPES.flatArray,
+            propType: PROP_TYPES.STRING,
+            editable: true,
+            required: false,
+            defaultValue: "small",
+            group: GROUPS.basic,
+        },
+        animating: {
+            label: "Spinning",
+            description: "Whether to show the loading indicator (Default: true)",
+            formType: FORM_TYPES.boolean,
+            propType: PROP_TYPES.BOOLEAN,
+            editable: true,
+            required: false,
+            defaultValue: true,
+            group: GROUPS.basic,
+        },
+        hidesWhenStopped: {
+            label: "Hide When Stopped",
+            description: "Whether the indicator should hide when not animating (Default: true)",
+            formType: FORM_TYPES.boolean,
+            propType: PROP_TYPES.BOOLEAN,
+            editable: true,
+            required: false,
+            defaultValue: true,
+            group: GROUPS.basic,
+        },
+        color: {
+            label: "Color",
+            description: "The color of the loading indicator (Default: gray)",
+            formType: FORM_TYPES.color,
+            propType: PROP_TYPES.THEME,
+            editable: true,
+            required: false,
+            defaultValue: null,
+            group: GROUPS.basic,
+        },
+    },
+};

package/src/mappings/AudioPlayer.js

@@ -0,0 +1,20 @@
+import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Audio Player",
+    tag: "AudioPlayer",
+    description: "Given a source URL, plays sounds & audio!",
+    category: COMPONENT_TYPES.media,
+    layout: {},
+    props: {
+        source: {
+            group: GROUPS.data,
+            label: "Source",
+            description: "The source URL for the audio file.",
+            editable: true,
+            required: true,
+            defaultValue: "https://static.draftbit.com/audio/intro-to-draftbit-audio.mp3",
+            formType: FORM_TYPES.sourceUrl,
+            propType: PROP_TYPES.OBJECT,
+        },
+    },
+};

package/src/mappings/BlurView.js

@@ -0,0 +1,42 @@
+import { COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, GROUPS, CONTAINER_COMPONENT_STYLES_SECTIONS, } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Blur View",
+    tag: "BlurView",
+    description: "Expo Blur View",
+    doc_link: "https://docs.expo.io/versions/latest/sdk/blur-view/",
+    code_link: "https://github.com/expo/expo/blob/master/packages/expo/src/effects/BlurView.d.ts",
+    category: COMPONENT_TYPES.view,
+    stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
+    layout: {
+        flexGrow: 1,
+        flexShrink: 1,
+        flexBasis: 0,
+    },
+    props: {
+        tint: {
+            label: "Tint",
+            description: "The tint of the blur view",
+            editable: true,
+            required: true,
+            defaultValue: "default",
+            formType: FORM_TYPES.flatArray,
+            propType: PROP_TYPES.STRING,
+            options: ["default", "light", "dark"],
+            group: GROUPS.basic,
+        },
+        intensity: {
+            label: "Intensity",
+            description: "A number from 1 to 100 that controls the intensity of the blur effect",
+            editable: true,
+            required: true,
+            defaultValue: 50,
+            formType: FORM_TYPES.number,
+            propType: PROP_TYPES.NUMBER,
+            min: 0,
+            max: 100,
+            step: 1,
+            precision: 0,
+            group: GROUPS.basic,
+        },
+    },
+};

package/src/mappings/Button.js

@@ -0,0 +1,87 @@
+import { COMPONENT_TYPES, createIconProp, createTextProp, createDisabledProp, createLoadingProp, createActionProp, Triggers, StylesPanelSections, } from "@draftbit/types";
+const SEED_DATA_TRIGGERS = [Triggers.OnPress];
+const SEED_DATA_PROPS = {
+    onPress: createActionProp(),
+    icon: createIconProp({
+        defaultValue: null,
+        required: false,
+    }),
+    title: createTextProp({
+        label: "Label",
+        description: "Button Label",
+        defaultValue: "Get Started",
+    }),
+    disabled: createDisabledProp(),
+    loading: createLoadingProp(),
+};
+const LAYOUT = {
+    backgroundColor: "transparent",
+    borderRadius: 8,
+    fontFamily: "system-700",
+};
+export const SEED_DATA = [
+    {
+        name: "Button Outline",
+        tag: "ButtonOutline",
+        category: COMPONENT_TYPES.deprecated,
+        stylesPanelSections: [
+            StylesPanelSections.Typography,
+            StylesPanelSections.Background,
+            StylesPanelSections.Borders,
+            StylesPanelSections.Size,
+            StylesPanelSections.MarginsAndPaddings,
+            StylesPanelSections.Position,
+            StylesPanelSections.Effects,
+        ],
+        layout: {
+            ...LAYOUT,
+            backgroundColor: "transparent",
+            borderWidth: 1,
+            textAlign: "center",
+        },
+        triggers: SEED_DATA_TRIGGERS,
+        props: SEED_DATA_PROPS,
+    },
+    {
+        name: "Button Solid",
+        tag: "ButtonSolid",
+        category: COMPONENT_TYPES.deprecated,
+        stylesPanelSections: [
+            StylesPanelSections.Typography,
+            StylesPanelSections.Background,
+            StylesPanelSections.Borders,
+            StylesPanelSections.Size,
+            StylesPanelSections.MarginsAndPaddings,
+            StylesPanelSections.Position,
+            StylesPanelSections.Effects,
+        ],
+        layout: {
+            ...LAYOUT,
+            backgroundColor: "primary",
+            textAlign: "center",
+        },
+        triggers: SEED_DATA_TRIGGERS,
+        props: SEED_DATA_PROPS,
+    },
+    {
+        name: "Button",
+        tag: "Button",
+        category: COMPONENT_TYPES.button,
+        stylesPanelSections: [
+            StylesPanelSections.Typography,
+            StylesPanelSections.Background,
+            StylesPanelSections.Borders,
+            StylesPanelSections.Size,
+            StylesPanelSections.MarginsAndPaddings,
+            StylesPanelSections.Position,
+            StylesPanelSections.Effects,
+        ],
+        layout: {
+            ...LAYOUT,
+            backgroundColor: "primary",
+            textAlign: "center",
+        },
+        triggers: SEED_DATA_TRIGGERS,
+        props: SEED_DATA_PROPS,
+    },
+];

package/src/mappings/Checkbox.js

@@ -0,0 +1,46 @@
+import { COMPONENT_TYPES, createBoolProp, createIconProp, createStaticNumberProp, createColorProp, createFieldNameProp, GROUPS, Triggers, BLOCK_STYLES_SECTIONS, } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Checkbox",
+    tag: "Checkbox",
+    category: COMPONENT_TYPES.control,
+    stylesPanelSections: BLOCK_STYLES_SECTIONS,
+    triggers: [Triggers.OnPress, Triggers.OnCheck, Triggers.OnUncheck],
+    props: {
+        fieldName: createFieldNameProp({
+            defaultValue: "checkboxValue",
+            valuePropName: "status",
+            handlerPropName: "onPress",
+        }),
+        color: createColorProp({
+            group: GROUPS.basic,
+            label: "Color",
+            description: "Color for the button (used when the checkbox is checked)",
+            defaultValue: null,
+        }),
+        uncheckedColor: createColorProp({
+            group: GROUPS.basic,
+            label: "Unselected Color",
+            description: "Color for the button when the checkbox is unchecked",
+            defaultValue: null,
+        }),
+        disabled: createBoolProp({
+            label: "Disabled",
+            description: "Whether the checkbox is disabled",
+        }),
+        size: createStaticNumberProp({
+            label: "Size",
+            description: "Specifies the size of the icon",
+            defaultValue: null,
+        }),
+        checkedIcon: createIconProp({
+            label: "Checked Icon",
+            description: 'Icon to show when the checkbox status is "checked"',
+            defaultValue: null,
+        }),
+        uncheckedIcon: createIconProp({
+            label: "Unchecked Icon",
+            description: 'Icon to show when the checkbox status is "unchecked"',
+            defaultValue: null,
+        }),
+    },
+};

package/src/mappings/CheckboxGroup.js

@@ -0,0 +1,26 @@
+import { GROUPS, COMPONENT_TYPES, FORM_TYPES, createTextProp, PROP_TYPES, createFieldNameProp, createDirectionProp, Triggers, StylesPanelSections, } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Checkbox Group",
+    tag: "CheckboxGroup",
+    category: COMPONENT_TYPES.deprecated,
+    layout: {},
+    triggers: [Triggers.OnValueChange],
+    stylesPanelSections: [StylesPanelSections.Margins],
+    props: {
+        direction: createDirectionProp(),
+        values: createTextProp({
+            group: GROUPS.data,
+            formType: FORM_TYPES.flatArray,
+            propType: PROP_TYPES.ARRAY,
+            label: "Values",
+            description: "Currently selected values of the checkbox group",
+            required: true,
+            defaultValue: null,
+        }),
+        fieldName: createFieldNameProp({
+            defaultValue: "checkboxGroupValue",
+            handlerPropName: "onValueChange",
+            valuePropName: "value",
+        }),
+    },
+};

package/src/mappings/CheckboxRow.js

@@ -0,0 +1,61 @@
+import { createBoolProp, createTextProp, createTextStyle, createRowDirectionProp, createFieldNameProp, createIconProp, createStaticNumberProp, COMPONENT_TYPES, Triggers, createColorProp, StylesPanelSections, } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Checkbox Row",
+    tag: "CheckboxRow",
+    category: COMPONENT_TYPES.control,
+    stylesPanelSections: [
+        StylesPanelSections.Typography,
+        StylesPanelSections.Margins,
+        StylesPanelSections.Effects,
+    ],
+    layout: {
+        minHeight: 50,
+    },
+    triggers: [Triggers.OnPress, Triggers.OnCheck, Triggers.OnUncheck],
+    props: {
+        fieldName: createFieldNameProp({
+            defaultValue: "checkboxRowValue",
+            valuePropName: "value",
+            handlerPropName: "onPress",
+        }),
+        label: createTextProp({
+            label: "Label",
+            description: "Label to show with the checkbox",
+            required: true,
+            defaultValue: "First Option",
+        }),
+        labelStyle: createTextStyle({
+            label: "Label Style",
+            description: "Change the styles of the label",
+            required: false,
+            editable: false,
+        }),
+        direction: createRowDirectionProp(),
+        color: createColorProp({
+            description: "Color for the button (used when the checkbox is checked)",
+        }),
+        uncheckedColor: createColorProp({
+            label: "Unselected Color",
+            description: "Color for the button when the checkbox is unchecked",
+        }),
+        disabled: createBoolProp({
+            label: "Disabled",
+            description: "Whether the checkbox is disabled",
+        }),
+        size: createStaticNumberProp({
+            label: "Size",
+            description: "Specifies the size of the icon",
+            defaultValue: null,
+        }),
+        checkedIcon: createIconProp({
+            label: "Checked Icon",
+            description: 'Icon to show when the checkbox status is "checked"',
+            defaultValue: null,
+        }),
+        uncheckedIcon: createIconProp({
+            label: "Unchecked Icon",
+            description: 'Icon to show when the checkbox status is "unchecked"',
+            defaultValue: null,
+        }),
+    },
+};

package/src/mappings/CustomCode.js

@@ -0,0 +1,8 @@
+import { COMPONENT_TYPES } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Custom Code",
+    tag: "CustomCode",
+    description: "A component that allows usage of custom code",
+    category: COMPONENT_TYPES.utility,
+    props: {},
+};

package/src/mappings/DatePicker.js

@@ -0,0 +1,157 @@
+import { COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, FIELD_NAME, GROUPS, Triggers, } from "@draftbit/types";
+const SEED_DATA_PROPS = {
+    label: {
+        label: "Label",
+        description: "The label to be displayed on the picker",
+        formType: FORM_TYPES.string,
+        propType: PROP_TYPES.STRING,
+        defaultValue: "Date",
+        editable: true,
+        required: true,
+        group: GROUPS.data,
+    },
+    mode: {
+        label: "Mode",
+        description: "Choose between date, time and datetime",
+        defaultValue: "date",
+        editable: true,
+        required: true,
+        formType: FORM_TYPES.flatArray,
+        propType: PROP_TYPES.STRING,
+        options: ["date", "time", "datetime"],
+        group: GROUPS.basic,
+    },
+    format: {
+        label: "Format",
+        description: "Create an output format for the date.",
+        editable: true,
+        required: false,
+        formType: FORM_TYPES.string,
+        propType: PROP_TYPES.STRING,
+        defaultValue: null,
+        group: GROUPS.basic,
+    },
+    assistiveText: {
+        label: "Assistive text",
+        description: "Helper text to display below the picker",
+        formType: FORM_TYPES.string,
+        propType: PROP_TYPES.STRING,
+        defaultValue: null,
+        editable: true,
+        required: false,
+        group: GROUPS.basic,
+    },
+    // locale: {
+    //   label: "Locale",
+    //   description: "Locale for the datepicker. Must be a valid Locale",
+    //   formType: FORM_TYPES.string,
+    //   propType: PROP_TYPES.STRING,
+    //   defaultValue: null,
+    //   editable: true,
+    //   required: false,
+    //   group: GROUPS.basic,
+    // },
+    // minuteInterval: {
+    //   label: "Minute Interval",
+    //   description: "The interval at which minutes can be selected",
+    //   formType: FORM_TYPES.flatArray,
+    //   propType: PROP_TYPES.NUMBER,
+    //   options: [1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30],
+    //   defaultValue: null,
+    //   editable: true,
+    //   required: false,
+    //   group: GROUPS.basic,
+    // },
+    // timeZoneOffsetInMinutes: {
+    //   label: "Time zone offset",
+    //   description:
+    //     "By default, the datepicker uses the device's timezone. This will allow you to offset it",
+    //   formType: FORM_TYPES.number,
+    //   propType: PROP_TYPES.NUMBER,
+    //   defaultValue: null,
+    //   editable: true,
+    //   required: false,
+    //   group: GROUPS.basic,
+    // },
+    disabled: {
+        label: "Disabled",
+        description: "Whether the picker should be disabled. Will prevent selection and show a greyed out state.",
+        formType: FORM_TYPES.boolean,
+        propType: PROP_TYPES.BOOLEAN,
+        defaultValue: false,
+        editable: true,
+        required: false,
+        group: GROUPS.basic,
+    },
+    // error: {
+    //   label: "Error",
+    //   description: "Whether the picker should display the error state",
+    //   formType: FORM_TYPES.boolean,
+    //   propType: PROP_TYPES.BOOLEAN,
+    //   defaultValue: false,
+    //   editable: true,
+    //   required: false,
+    //   group: GROUPS.data,
+    // },
+    leftIconName: {
+        label: "Left icon name",
+        description: "The icon to display on the left",
+        formType: FORM_TYPES.icon,
+        propType: PROP_TYPES.STRING,
+        defaultValue: null,
+        editable: true,
+        required: false,
+        group: GROUPS.basic,
+    },
+    leftIconMode: {
+        label: "Left icon mode",
+        description: "The mode of the icon to display on the left. 'inset' or 'outset'.",
+        formType: FORM_TYPES.flatArray,
+        propType: PROP_TYPES.STRING,
+        defaultValue: "inset",
+        options: ["inset", "outset"],
+        editable: true,
+        required: true,
+        group: GROUPS.basic,
+    },
+    rightIconName: {
+        label: "Right icon name",
+        description: "The icon to display on the right",
+        formType: FORM_TYPES.icon,
+        propType: PROP_TYPES.STRING,
+        defaultValue: null,
+        editable: true,
+        required: false,
+        group: GROUPS.basic,
+    },
+    fieldName: {
+        ...FIELD_NAME,
+        handlerPropName: "onDateChange",
+        valuePropName: "date",
+        defaultValue: "date",
+    },
+};
+export const SEED_DATA = [
+    {
+        name: "Date Picker",
+        tag: "DatePicker",
+        description: "A component used to select a date from a visual calendar",
+        category: COMPONENT_TYPES.input,
+        layout: null,
+        triggers: [Triggers.OnDateChange],
+        props: {
+            ...SEED_DATA_PROPS,
+            type: {
+                label: "Appearance",
+                description: "Type of Datepicker",
+                formType: FORM_TYPES.flatArray,
+                propType: PROP_TYPES.STRING,
+                defaultValue: "solid",
+                options: ["solid", "underline"],
+                editable: true,
+                required: true,
+                group: GROUPS.basic,
+            },
+        },
+    },
+];

package/src/mappings/Fetch.js

@@ -0,0 +1,13 @@
+import { COMPONENT_TYPES, StylesPanelSections } from "@draftbit/types";
+/* TODO remove, still used inside the builder in a weird way */
+export const SEED_DATA = {
+    name: "Fetch",
+    tag: "Fetch",
+    description: "Rest API Declarative Fetch component. Uses react-request internally",
+    category: COMPONENT_TYPES.data,
+    stylesPanelSections: [StylesPanelSections.NoStyles],
+    layout: {
+        minHeight: 40,
+    },
+    props: {},
+};

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

@@ -0,0 +1,24 @@
+import { COMPONENT_TYPES, createNumColumnsType, createStaticBoolProp, CONTAINER_COMPONENT_STYLES_SECTIONS, } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "List",
+    tag: "FlatList",
+    description: "A basic List component",
+    category: COMPONENT_TYPES.data,
+    stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
+    layout: {
+        flex: 1,
+    },
+    props: {
+        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/Icon.js

@@ -0,0 +1,32 @@
+import { COMPONENT_TYPES, GROUPS, createNumberProp, createColorProp, createIconProp, StylesPanelSections, } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Icon",
+    tag: "Icon",
+    description: "An icon",
+    category: COMPONENT_TYPES.basic,
+    stylesPanelSections: [
+        StylesPanelSections.Size,
+        StylesPanelSections.Margins,
+        StylesPanelSections.Background,
+        StylesPanelSections.Position,
+        StylesPanelSections.Effects,
+    ],
+    layout: {},
+    props: {
+        name: {
+            ...createIconProp(),
+            group: GROUPS.data,
+        },
+        color: createColorProp(),
+        size: createNumberProp({
+            group: GROUPS.basic,
+            label: "Size",
+            description: "Width and height of your icon",
+            defaultValue: 24,
+            min: 1,
+            max: 128,
+            step: 1,
+            precision: 0,
+        }),
+    },
+};

package/src/mappings/IconButton.js

@@ -0,0 +1,35 @@
+import { COMPONENT_TYPES, GROUPS, createIconProp, createColorProp, createNumberProp, createBoolProp, createActionProp, Triggers, StylesPanelSections, } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Icon Button",
+    tag: "IconButton",
+    category: COMPONENT_TYPES.button,
+    layout: {},
+    triggers: [Triggers.OnPress],
+    stylesPanelSections: [
+        StylesPanelSections.Margins,
+        StylesPanelSections.Effects,
+        StylesPanelSections.Position,
+    ],
+    props: {
+        onPress: createActionProp(),
+        icon: createIconProp(),
+        color: createColorProp({
+            label: "Color",
+            group: GROUPS.basic,
+        }),
+        disabled: createBoolProp({
+            label: "Disabled",
+            group: GROUPS.basic,
+        }),
+        size: createNumberProp({
+            group: GROUPS.basic,
+            label: "Size",
+            description: "Width and height of your icon",
+            defaultValue: 32,
+            min: 16,
+            max: 128,
+            step: 1,
+            precision: 0,
+        }),
+    },
+};