@draftbit/core 46.8.1-fe4ccb.2 → 46.8.2-088bf8.2

package/src/mappings/ActionSheet.ts

@@ -1,10 +1,16 @@
-import { COMPONENT_TYPES, createStaticBoolProp, GROUPS } from "@draftbit/types";
+import {
+  COMPONENT_TYPES,
+  createStaticBoolProp,
+  GROUPS,
+  StylesPanelSections,
+} from "@draftbit/types";
 
 export const SEED_DATA = {
   name: "Action Sheet",
   tag: "ActionSheet",
   description: "Action Sheet container",
   category: COMPONENT_TYPES.actionsheet,
+  stylesPanelSections: [StylesPanelSections.Size, StylesPanelSections.Margins],
   props: {
     visible: createStaticBoolProp({
       group: GROUPS.data,

package/src/mappings/ActionSheetCancel.js

@@ -1,8 +1,9 @@
-import { COMPONENT_TYPES, createActionProp, createColorProp, createTextProp, GROUPS, Triggers, } from "@draftbit/types";
+import { COMPONENT_TYPES, createActionProp, createColorProp, createTextProp, GROUPS, Triggers, StylesPanelSections, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Action Sheet Cancel",
     tag: "ActionSheetCancel",
     description: "Action Sheet cancel",
+    stylesPanelSections: [StylesPanelSections.Size, StylesPanelSections.Margins],
     category: COMPONENT_TYPES.actionsheet,
     triggers: [Triggers.OnPress],
     props: {

package/src/mappings/ActionSheetCancel.ts

@@ -5,12 +5,14 @@ import {
   createTextProp,
   GROUPS,
   Triggers,
+  StylesPanelSections,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
   name: "Action Sheet Cancel",
   tag: "ActionSheetCancel",
   description: "Action Sheet cancel",
+  stylesPanelSections: [StylesPanelSections.Size, StylesPanelSections.Margins],
   category: COMPONENT_TYPES.actionsheet,
   triggers: [Triggers.OnPress],
   props: {

package/src/mappings/ActionSheetItem.js

@@ -1,9 +1,10 @@
-import { COMPONENT_TYPES, createActionProp, createColorProp, createTextProp, GROUPS, Triggers, } from "@draftbit/types";
+import { COMPONENT_TYPES, createActionProp, createColorProp, createTextProp, GROUPS, Triggers, StylesPanelSections, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Action Sheet Item",
     tag: "ActionSheetItem",
     description: "Action Sheet item",
     category: COMPONENT_TYPES.actionsheet,
+    stylesPanelSections: [StylesPanelSections.Size, StylesPanelSections.Margins],
     triggers: [Triggers.OnPress],
     layout: {
         textAlign: "center",

package/src/mappings/ActionSheetItem.ts

@@ -5,6 +5,7 @@ import {
   createTextProp,
   GROUPS,
   Triggers,
+  StylesPanelSections,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -12,6 +13,7 @@ export const SEED_DATA = {
   tag: "ActionSheetItem",
   description: "Action Sheet item",
   category: COMPONENT_TYPES.actionsheet,
+  stylesPanelSections: [StylesPanelSections.Size, StylesPanelSections.Margins],
   triggers: [Triggers.OnPress],
   layout: {
     textAlign: "center",

package/src/mappings/HtmlElements.js

@@ -0,0 +1,193 @@
+import { COMPONENT_TYPES, createTextProp, FORM_TYPES, PROP_TYPES, GROUPS, StylesPanelSections, Triggers, } from "@draftbit/types";
+const SEED_DATA_TRIGGERS = [Triggers.OnValueChange];
+const ELEMENT_SEED_DATA = {
+    doc_link: "https://www.npmjs.com/package/@expo/html-elements",
+    code_link: "https://github.com/expo/expo/tree/master/packages/html-elements",
+    packageName: "@expo/html-elements",
+    stylesPanelSections: [
+        StylesPanelSections.Typography,
+        StylesPanelSections.LayoutSelectedItem,
+        StylesPanelSections.MarginsAndPaddings,
+        StylesPanelSections.Effects,
+    ],
+    layout: {
+        margin: 0,
+    },
+    triggers: SEED_DATA_TRIGGERS,
+    category: COMPONENT_TYPES.webelement,
+};
+const HEADING_SEED_DATA = {
+    ...ELEMENT_SEED_DATA,
+    category: COMPONENT_TYPES.text,
+    props: {
+        accessibilityLabel: {
+            group: GROUPS.accessibility,
+            name: "accessibilityLabel",
+            label: "accessibilityLabel",
+            description: "Overrides the text that's read by the screen reader when the user interacts with the element. By default, the label is constructed by traversing all the children and accumulating all the Text nodes separated by space.",
+            editable: true,
+            required: false,
+            formType: FORM_TYPES.string,
+            propType: PROP_TYPES.STRING,
+            defaultValue: null,
+        },
+        selectable: {
+            group: GROUPS.advanced,
+            name: "selectable",
+            label: "selectable",
+            description: "Lets the user select text, to use the native copy and paste functionality.",
+            editable: true,
+            required: false,
+            formType: FORM_TYPES.boolean,
+            propType: PROP_TYPES.BOOLEAN,
+            defaultValue: null,
+        },
+        children: {
+            group: GROUPS.data,
+            label: "Text",
+            description: "Text",
+            editable: true,
+            required: true,
+            formType: FORM_TYPES.string,
+            propType: PROP_TYPES.STRING,
+            defaultValue: "Your Headline Here",
+        },
+    },
+};
+const TEXT_SEED_DATA = {
+    ...ELEMENT_SEED_DATA,
+    category: COMPONENT_TYPES.text,
+    props: {
+        children: {
+            group: GROUPS.data,
+            label: "Text",
+            description: "Text",
+            defaultValue: "Your Text Here",
+            editable: true,
+            required: true,
+            formType: FORM_TYPES.string,
+            propType: PROP_TYPES.STRING,
+        },
+    },
+};
+export const SEED_DATA = [
+    {
+        name: "H1",
+        tag: "H1",
+        ...HEADING_SEED_DATA,
+    },
+    {
+        name: "H2",
+        tag: "H2",
+        ...HEADING_SEED_DATA,
+    },
+    {
+        name: "H3",
+        tag: "H3",
+        ...HEADING_SEED_DATA,
+    },
+    {
+        name: "H4",
+        tag: "H4",
+        ...HEADING_SEED_DATA,
+    },
+    {
+        name: "H5",
+        tag: "H5",
+        ...HEADING_SEED_DATA,
+    },
+    {
+        name: "H6",
+        tag: "H6",
+        ...HEADING_SEED_DATA,
+    },
+    {
+        name: "Anchor",
+        tag: "A",
+        ...TEXT_SEED_DATA,
+        props: {
+            href: createTextProp({
+                label: "href",
+                description: "Specify the URL",
+                defaultValue: "",
+            }),
+            target: {
+                group: GROUPS.basic,
+                label: "target",
+                description: "decide where link should open",
+                formType: FORM_TYPES.flatArray,
+                defaultValue: "_blank",
+                options: ["_blank", "_self", "_parent", "_top"],
+            },
+        },
+    },
+    {
+        name: "Paragraph",
+        tag: "P",
+        ...TEXT_SEED_DATA,
+        props: {
+        // NOTE - Keeping the props commented until we figure out a way to use this props from draftbit side.
+        // strong: createBoolProp({
+        //     label: "Strong",
+        //     description: "Strong",
+        // }),
+        // strike: createBoolProp({
+        //     label: "Strike",
+        //     description: "Strike through",
+        // }),
+        // italic: createBoolProp({
+        //     label: "Italic",
+        //     description: "Italic Fonts",
+        // }),
+        // bold: createBoolProp({
+        //     label: "Bold",
+        //     description: "Bold",
+        // }),
+        },
+    },
+    {
+        name: "Code",
+        tag: "Code",
+        ...TEXT_SEED_DATA,
+    },
+    {
+        name: "Pre",
+        tag: "Pre",
+        ...TEXT_SEED_DATA,
+    },
+    {
+        name: "Mark",
+        tag: "Mark",
+        ...TEXT_SEED_DATA,
+    },
+    {
+        name: "BR",
+        tag: "BR",
+        ...TEXT_SEED_DATA,
+    },
+    {
+        name: "BlockQuote",
+        tag: "BlockQuote",
+        ...TEXT_SEED_DATA,
+    },
+    {
+        name: "HR",
+        tag: "HR",
+        ...TEXT_SEED_DATA,
+    },
+    {
+        name: "Time",
+        tag: "Time",
+        ...ELEMENT_SEED_DATA,
+    },
+    {
+        name: "UL",
+        tag: "UL",
+        ...ELEMENT_SEED_DATA,
+    },
+    {
+        name: "LI",
+        tag: "LI",
+        ...ELEMENT_SEED_DATA,
+    },
+];

package/src/mappings/HtmlElements.ts

@@ -0,0 +1,207 @@
+import {
+  COMPONENT_TYPES,
+  createTextProp,
+  FORM_TYPES,
+  PROP_TYPES,
+  GROUPS,
+  StylesPanelSections,
+  Triggers,
+} from "@draftbit/types";
+const SEED_DATA_TRIGGERS = [Triggers.OnValueChange];
+
+const ELEMENT_SEED_DATA = {
+  doc_link: "https://www.npmjs.com/package/@expo/html-elements",
+  code_link: "https://github.com/expo/expo/tree/master/packages/html-elements",
+  packageName: "@expo/html-elements",
+  stylesPanelSections: [
+    StylesPanelSections.Typography,
+    StylesPanelSections.LayoutSelectedItem,
+    StylesPanelSections.MarginsAndPaddings,
+    StylesPanelSections.Effects,
+  ],
+  layout: {
+    margin: 0,
+  },
+  triggers: SEED_DATA_TRIGGERS,
+  category: COMPONENT_TYPES.webelement,
+};
+
+const HEADING_SEED_DATA = {
+  ...ELEMENT_SEED_DATA,
+  category: COMPONENT_TYPES.text,
+  props: {
+    accessibilityLabel: {
+      group: GROUPS.accessibility,
+      name: "accessibilityLabel",
+      label: "accessibilityLabel",
+      description:
+        "Overrides the text that's read by the screen reader when the user interacts with the element. By default, the label is constructed by traversing all the children and accumulating all the Text nodes separated by space.",
+      editable: true,
+      required: false,
+      formType: FORM_TYPES.string,
+      propType: PROP_TYPES.STRING,
+      defaultValue: null,
+    },
+    selectable: {
+      group: GROUPS.advanced,
+      name: "selectable",
+      label: "selectable",
+      description:
+        "Lets the user select text, to use the native copy and paste functionality.",
+      editable: true,
+      required: false,
+      formType: FORM_TYPES.boolean,
+      propType: PROP_TYPES.BOOLEAN,
+      defaultValue: null,
+    },
+    children: {
+      group: GROUPS.data,
+      label: "Text",
+      description: "Text",
+      editable: true,
+      required: true,
+      formType: FORM_TYPES.string,
+      propType: PROP_TYPES.STRING,
+      defaultValue: "Your Headline Here",
+    },
+  },
+};
+
+const TEXT_SEED_DATA = {
+  ...ELEMENT_SEED_DATA,
+  category: COMPONENT_TYPES.text,
+  props: {
+    children: {
+      group: GROUPS.data,
+      label: "Text",
+      description: "Text",
+      defaultValue: "Your Text Here",
+      editable: true,
+      required: true,
+      formType: FORM_TYPES.string,
+      propType: PROP_TYPES.STRING,
+    },
+  },
+};
+
+export const SEED_DATA = [
+  {
+    name: "H1",
+    tag: "H1",
+    ...HEADING_SEED_DATA,
+  },
+  {
+    name: "H2",
+    tag: "H2",
+    ...HEADING_SEED_DATA,
+  },
+  {
+    name: "H3",
+    tag: "H3",
+    ...HEADING_SEED_DATA,
+  },
+  {
+    name: "H4",
+    tag: "H4",
+    ...HEADING_SEED_DATA,
+  },
+  {
+    name: "H5",
+    tag: "H5",
+    ...HEADING_SEED_DATA,
+  },
+  {
+    name: "H6",
+    tag: "H6",
+    ...HEADING_SEED_DATA,
+  },
+  {
+    name: "Anchor",
+    tag: "A",
+    ...TEXT_SEED_DATA,
+    props: {
+      href: createTextProp({
+        label: "href",
+        description: "Specify the URL",
+        defaultValue: "",
+      }),
+      target: {
+        group: GROUPS.basic,
+        label: "target",
+        description: "decide where link should open",
+        formType: FORM_TYPES.flatArray,
+        defaultValue: "_blank",
+        options: ["_blank", "_self", "_parent", "_top"],
+      },
+    },
+  },
+  {
+    name: "Paragraph",
+    tag: "P",
+    ...TEXT_SEED_DATA,
+    props: {
+      // NOTE - Keeping the props commented until we figure out a way to use this props from draftbit side.
+      // strong: createBoolProp({
+      //     label: "Strong",
+      //     description: "Strong",
+      // }),
+      // strike: createBoolProp({
+      //     label: "Strike",
+      //     description: "Strike through",
+      // }),
+      // italic: createBoolProp({
+      //     label: "Italic",
+      //     description: "Italic Fonts",
+      // }),
+      // bold: createBoolProp({
+      //     label: "Bold",
+      //     description: "Bold",
+      // }),
+    },
+  },
+  {
+    name: "Code",
+    tag: "Code",
+    ...TEXT_SEED_DATA,
+  },
+  {
+    name: "Pre",
+    tag: "Pre",
+    ...TEXT_SEED_DATA,
+  },
+  {
+    name: "Mark",
+    tag: "Mark",
+    ...TEXT_SEED_DATA,
+  },
+  {
+    name: "BR",
+    tag: "BR",
+    ...TEXT_SEED_DATA,
+  },
+  {
+    name: "BlockQuote",
+    tag: "BlockQuote",
+    ...TEXT_SEED_DATA,
+  },
+  {
+    name: "HR",
+    tag: "HR",
+    ...TEXT_SEED_DATA,
+  },
+  {
+    name: "Time",
+    tag: "Time",
+    ...ELEMENT_SEED_DATA,
+  },
+  {
+    name: "UL",
+    tag: "UL",
+    ...ELEMENT_SEED_DATA,
+  },
+  {
+    name: "LI",
+    tag: "LI",
+    ...ELEMENT_SEED_DATA,
+  },
+];

package/src/mappings/LinearGradient.js

@@ -1,9 +1,14 @@
-import { createColorProp, FORM_TYPES, GROUPS, PROP_TYPES, } from "@draftbit/types";
+import { createColorProp, FORM_TYPES, GROUPS, PROP_TYPES, StylesPanelSections, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Linear Gradient",
     tag: "LinearGradient",
     description: "Linear Gradient Component",
     layout: { width: "100%", height: "100%" },
+    stylesPanelSections: [
+        StylesPanelSections.MarginsAndPaddings,
+        StylesPanelSections.Borders,
+        StylesPanelSections.Effects,
+    ],
     props: {
         endY: {
             group: GROUPS.basic,

package/src/mappings/LinearGradient.ts

@@ -3,6 +3,7 @@ import {
   FORM_TYPES,
   GROUPS,
   PROP_TYPES,
+  StylesPanelSections,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -10,6 +11,11 @@ export const SEED_DATA = {
   tag: "LinearGradient",
   description: "Linear Gradient Component",
   layout: { width: "100%", height: "100%" },
+  stylesPanelSections: [
+    StylesPanelSections.MarginsAndPaddings,
+    StylesPanelSections.Borders,
+    StylesPanelSections.Effects,
+  ],
   props: {
     endY: {
       group: GROUPS.basic,

package/src/mappings/MapCallout.js

@@ -1,8 +1,9 @@
-import { COMPONENT_TYPES, createActionProp, createBoolProp, GROUPS, Triggers, } from "@draftbit/types";
+import { COMPONENT_TYPES, createActionProp, createBoolProp, GROUPS, Triggers, CONTAINER_COMPONENT_STYLES_SECTIONS, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Map Callout",
     tag: "MapCallout",
     packageName: "@draftbit/maps",
+    stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
     description: "An info window to display on top of a marker when it is clicked",
     category: COMPONENT_TYPES.map,
     triggers: [Triggers.OnPress],

package/src/mappings/MapCallout.ts

@@ -4,12 +4,14 @@ import {
   createBoolProp,
   GROUPS,
   Triggers,
+  CONTAINER_COMPONENT_STYLES_SECTIONS,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
   name: "Map Callout",
   tag: "MapCallout",
   packageName: "@draftbit/maps",
+  stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
   description:
     "An info window to display on top of a marker when it is clicked",
   category: COMPONENT_TYPES.map,

package/src/mappings/MapMarker.js

@@ -1,10 +1,11 @@
-import { COMPONENT_TYPES, createBoolProp, createColorProp, createNumberProp, createTextProp, GROUPS, } from "@draftbit/types";
+import { COMPONENT_TYPES, createBoolProp, createColorProp, createNumberProp, createTextProp, GROUPS, CONTAINER_COMPONENT_STYLES_SECTIONS, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Map Marker",
     tag: "MapMarker",
     packageName: "@draftbit/maps",
     description: "A marker to show inside map view",
     category: COMPONENT_TYPES.map,
+    stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
     layout: {},
     props: {
         latitude: createNumberProp({

package/src/mappings/MapMarker.ts

@@ -5,6 +5,7 @@ import {
   createNumberProp,
   createTextProp,
   GROUPS,
+  CONTAINER_COMPONENT_STYLES_SECTIONS,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -13,6 +14,7 @@ export const SEED_DATA = {
   packageName: "@draftbit/maps",
   description: "A marker to show inside map view",
   category: COMPONENT_TYPES.map,
+  stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
   layout: {},
   props: {
     latitude: createNumberProp({

package/src/mappings/MapView.js

@@ -1,10 +1,11 @@
-import { COMPONENT_TYPES, createBoolProp, createColorProp, createNumberProp, createTextProp, GROUPS, FORM_TYPES, PROP_TYPES, } from "@draftbit/types";
+import { COMPONENT_TYPES, createBoolProp, createColorProp, createNumberProp, createTextProp, GROUPS, FORM_TYPES, PROP_TYPES, StylesPanelSections, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Map View",
     tag: "MapView",
     packageName: "@draftbit/maps",
     description: "A map view",
     category: COMPONENT_TYPES.map,
+    stylesPanelSections: [StylesPanelSections.Size, StylesPanelSections.Margins],
     layout: {
         flex: 1,
         width: "100%",

package/src/mappings/MapView.ts

@@ -7,6 +7,7 @@ import {
   GROUPS,
   FORM_TYPES,
   PROP_TYPES,
+  StylesPanelSections,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -15,6 +16,7 @@ export const SEED_DATA = {
   packageName: "@draftbit/maps",
   description: "A map view",
   category: COMPONENT_TYPES.map,
+  stylesPanelSections: [StylesPanelSections.Size, StylesPanelSections.Margins],
   layout: {
     flex: 1,
     width: "100%",

package/src/mappings/Swiper.js

@@ -1,9 +1,18 @@
-import { COMPONENT_TYPES, createBoolProp, createNumberProp, createTextProp, createColorProp, GROUPS, Triggers, createActionProp, } from "@draftbit/types";
+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%",

package/src/mappings/Swiper.ts

@@ -7,6 +7,7 @@ import {
   GROUPS,
   Triggers,
   createActionProp,
+  StylesPanelSections,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -14,6 +15,15 @@ export const SEED_DATA = {
   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%",

package/src/mappings/SwiperItem.js

@@ -1,8 +1,9 @@
-import { COMPONENT_TYPES } from "@draftbit/types";
+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

@@ -1,4 +1,7 @@
-import { COMPONENT_TYPES } from "@draftbit/types";
+import {
+  COMPONENT_TYPES,
+  CONTAINER_COMPONENT_STYLES_SECTIONS,
+} from "@draftbit/types";
 
 export const SEED_DATA = {
   name: "Swiper Item",
@@ -6,4 +9,5 @@ export const SEED_DATA = {
   description: "Swiper item",
   category: COMPONENT_TYPES.swiper,
   props: {},
+  stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
 };