@draftbit/core 46.10.3-6c7505.2 → 46.10.3-7476ab.2

package/src/mappings/Shadow.ts

@@ -0,0 +1,104 @@
+import {
+  COMPONENT_TYPES,
+  CONTAINER_COMPONENT_STYLES_SECTIONS,
+  createColorProp,
+  createStaticNumberProp,
+  createStaticBoolProp,
+  createDisabledProp,
+  GROUPS,
+} from "@draftbit/types";
+
+export const SEED_DATA = {
+  name: "Shadow",
+  tag: "Shadow",
+  description: "A cross-platform, universal shadow.",
+  category: COMPONENT_TYPES.view,
+  stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
+  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: false,
+    }),
+    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/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/Slider.ts

@@ -0,0 +1,70 @@
+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/StarRating.ts

@@ -0,0 +1,52 @@
+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", // this is the name of the variable declared on the screen in Draftbit
+      handlerPropName: "onPress", // the change handler prop in this component
+      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/Stepper.ts

@@ -0,0 +1,42 @@
+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/Surface.ts

@@ -0,0 +1,19 @@
+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,71 @@
+import { COMPONENT_TYPES, createBoolProp, createNumberProp, createTextProp, createColorProp, GROUPS, Triggers, createActionProp, StylesPanelSections, } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Swiper",
+    tag: "Swiper",
+    description: "Swiper container",
+    category: COMPONENT_TYPES.swiper,
+    stylesPanelSections: [
+        StylesPanelSections.LayoutSelectedItem,
+        StylesPanelSections.Background,
+        StylesPanelSections.Size,
+        StylesPanelSections.MarginsAndPaddings,
+        StylesPanelSections.Position,
+        StylesPanelSections.Borders,
+        StylesPanelSections.Effects,
+    ],
+    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/Swiper.ts

@@ -0,0 +1,82 @@
+import {
+  COMPONENT_TYPES,
+  createBoolProp,
+  createNumberProp,
+  createTextProp,
+  createColorProp,
+  GROUPS,
+  Triggers,
+  createActionProp,
+  StylesPanelSections,
+} from "@draftbit/types";
+
+export const SEED_DATA = {
+  name: "Swiper",
+  tag: "Swiper",
+  description: "Swiper container",
+  category: COMPONENT_TYPES.swiper,
+  stylesPanelSections: [
+    StylesPanelSections.LayoutSelectedItem,
+    StylesPanelSections.Background,
+    StylesPanelSections.Size,
+    StylesPanelSections.MarginsAndPaddings,
+    StylesPanelSections.Position,
+    StylesPanelSections.Borders,
+    StylesPanelSections.Effects,
+  ],
+  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,9 @@
+import { COMPONENT_TYPES, CONTAINER_COMPONENT_STYLES_SECTIONS, } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Swiper Item",
+    tag: "SwiperItem",
+    description: "Swiper item",
+    category: COMPONENT_TYPES.swiper,
+    props: {},
+    stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
+};

package/src/mappings/SwiperItem.ts

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