@draftbit/core 46.4.4-c5d4b3.2 → 46.4.4-c73f9e.2

package/src/mappings/HtmlElements.js

@@ -0,0 +1,201 @@
+import { COMPONENT_TYPES, createTextProp, FORM_TYPES, PROP_TYPES, GROUPS, StylesPanelSections, Triggers, } from "@draftbit/types";
+const SEED_DATA_TRIGGERS = [Triggers.OnValueChange];
+const ELEMENT_PROPS = {
+    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,
+};
+const HEADING_PROPS = {
+    category: COMPONENT_TYPES.text,
+    ...ELEMENT_PROPS,
+    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_PROPS = {
+    category: COMPONENT_TYPES.text,
+    ...ELEMENT_PROPS,
+    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_PROPS,
+    },
+    {
+        name: "H2",
+        tag: "H2",
+        ...HEADING_PROPS,
+    },
+    {
+        name: "H3",
+        tag: "H3",
+        ...HEADING_PROPS,
+    },
+    {
+        name: "H4",
+        tag: "H4",
+        ...HEADING_PROPS,
+    },
+    {
+        name: "H5",
+        tag: "H5",
+        ...HEADING_PROPS,
+    },
+    {
+        name: "H6",
+        tag: "H6",
+        ...HEADING_PROPS,
+    },
+    {
+        name: "Anchor",
+        tag: "A",
+        ...TEXT_PROPS,
+        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_PROPS,
+        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",
+        category: COMPONENT_TYPES.text,
+        ...ELEMENT_PROPS,
+    },
+    {
+        name: "Pre",
+        tag: "Pre",
+        category: COMPONENT_TYPES.text,
+        ...ELEMENT_PROPS,
+    },
+    {
+        name: "Mark",
+        tag: "Mark",
+        category: COMPONENT_TYPES.text,
+        ...ELEMENT_PROPS,
+    },
+    {
+        name: "BR",
+        tag: "BR",
+        category: COMPONENT_TYPES.text,
+        ...ELEMENT_PROPS,
+    },
+    {
+        name: "BlockQuote",
+        tag: "BlockQuote",
+        category: COMPONENT_TYPES.text,
+        ...ELEMENT_PROPS,
+    },
+    {
+        name: "Time",
+        tag: "Time",
+        category: COMPONENT_TYPES.text,
+        ...ELEMENT_PROPS,
+    },
+    {
+        name: "UL",
+        tag: "UL",
+        category: COMPONENT_TYPES.text,
+        ...ELEMENT_PROPS,
+    },
+    {
+        name: "LI",
+        tag: "LI",
+        category: COMPONENT_TYPES.text,
+        ...ELEMENT_PROPS,
+    },
+    {
+        name: "HR",
+        tag: "HR",
+        category: COMPONENT_TYPES.text,
+        ...ELEMENT_PROPS,
+    },
+];

package/src/mappings/HtmlElements.ts

@@ -0,0 +1,215 @@
+import {
+  COMPONENT_TYPES,
+  createTextProp,
+  FORM_TYPES,
+  PROP_TYPES,
+  GROUPS,
+  StylesPanelSections,
+  Triggers,
+} from "@draftbit/types";
+const SEED_DATA_TRIGGERS = [Triggers.OnValueChange];
+
+const ELEMENT_PROPS = {
+  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,
+};
+
+const HEADING_PROPS = {
+  category: COMPONENT_TYPES.text,
+  ...ELEMENT_PROPS,
+  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_PROPS = {
+  category: COMPONENT_TYPES.text,
+  ...ELEMENT_PROPS,
+  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_PROPS,
+  },
+  {
+    name: "H2",
+    tag: "H2",
+    ...HEADING_PROPS,
+  },
+  {
+    name: "H3",
+    tag: "H3",
+    ...HEADING_PROPS,
+  },
+  {
+    name: "H4",
+    tag: "H4",
+    ...HEADING_PROPS,
+  },
+  {
+    name: "H5",
+    tag: "H5",
+    ...HEADING_PROPS,
+  },
+  {
+    name: "H6",
+    tag: "H6",
+    ...HEADING_PROPS,
+  },
+  {
+    name: "Anchor",
+    tag: "A",
+    ...TEXT_PROPS,
+    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_PROPS,
+    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",
+    category: COMPONENT_TYPES.text,
+    ...ELEMENT_PROPS,
+  },
+  {
+    name: "Pre",
+    tag: "Pre",
+    category: COMPONENT_TYPES.text,
+    ...ELEMENT_PROPS,
+  },
+  {
+    name: "Mark",
+    tag: "Mark",
+    category: COMPONENT_TYPES.text,
+    ...ELEMENT_PROPS,
+  },
+  {
+    name: "BR",
+    tag: "BR",
+    category: COMPONENT_TYPES.text,
+    ...ELEMENT_PROPS,
+  },
+  {
+    name: "BlockQuote",
+    tag: "BlockQuote",
+    category: COMPONENT_TYPES.text,
+    ...ELEMENT_PROPS,
+  },
+  {
+    name: "Time",
+    tag: "Time",
+    category: COMPONENT_TYPES.text,
+    ...ELEMENT_PROPS,
+  },
+  {
+    name: "UL",
+    tag: "UL",
+    category: COMPONENT_TYPES.text,
+    ...ELEMENT_PROPS,
+  },
+  {
+    name: "LI",
+    tag: "LI",
+    category: COMPONENT_TYPES.text,
+    ...ELEMENT_PROPS,
+  },
+  {
+    name: "HR",
+    tag: "HR",
+    category: COMPONENT_TYPES.text,
+    ...ELEMENT_PROPS,
+  },
+];

package/src/mappings/Stepper.js

@@ -1,11 +1,14 @@
-import { COMPONENT_TYPES, createIconSizeProp, createColorProp, createFieldNameProp, createStaticNumberProp, Triggers, BLOCK_STYLES_SECTIONS, } from "@draftbit/types";
+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: BLOCK_STYLES_SECTIONS,
+        stylesPanelSections: [
+            StylesPanelSections.Typography,
+            ...BLOCK_STYLES_SECTIONS,
+        ],
         layout: {},
         triggers: [Triggers.OnChange],
         props: {

package/src/mappings/Stepper.ts

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

package/src/mappings/TextArea.js

@@ -1,4 +1,4 @@
-import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, FIELD_NAME, Triggers, } from "@draftbit/types";
+import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, FIELD_NAME, Triggers, createDisabledProp, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Text Area",
     tag: "TextInput",
@@ -59,6 +59,17 @@ export const SEED_DATA = {
             formType: FORM_TYPES.boolean,
             propType: PROP_TYPES.BOOLEAN,
         },
+        blurOnSubmit: {
+            group: GROUPS.advanced,
+            label: "Blur On Submit",
+            description: "If true, the text field will blur when submitted. ",
+            editable: true,
+            required: false,
+            defaultValue: null,
+            formType: FORM_TYPES.boolean,
+            propType: PROP_TYPES.BOOLEAN,
+        },
+        disabled: createDisabledProp(),
         caretHidden: {
             group: GROUPS.advanced,
             label: "Hide Caret",
@@ -80,12 +91,12 @@ export const SEED_DATA = {
             propType: PROP_TYPES.BOOLEAN,
         },
         editable: {
-            group: GROUPS.advanced,
-            label: "Editable",
+            group: GROUPS.data,
+            label: "Editable?",
             description: "If false, the text is not editable",
             editable: true,
             required: false,
-            defaultValue: true,
+            defaultValue: null,
             formType: FORM_TYPES.boolean,
             propType: PROP_TYPES.BOOLEAN,
         },

package/src/mappings/TextArea.ts

@@ -5,6 +5,7 @@ import {
   PROP_TYPES,
   FIELD_NAME,
   Triggers,
+  createDisabledProp,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -69,6 +70,17 @@ export const SEED_DATA = {
       formType: FORM_TYPES.boolean,
       propType: PROP_TYPES.BOOLEAN,
     },
+    blurOnSubmit: {
+      group: GROUPS.advanced,
+      label: "Blur On Submit",
+      description: "If true, the text field will blur when submitted. ",
+      editable: true,
+      required: false,
+      defaultValue: null,
+      formType: FORM_TYPES.boolean,
+      propType: PROP_TYPES.BOOLEAN,
+    },
+    disabled: createDisabledProp(),
     caretHidden: {
       group: GROUPS.advanced,
       label: "Hide Caret",
@@ -91,12 +103,12 @@ export const SEED_DATA = {
       propType: PROP_TYPES.BOOLEAN,
     },
     editable: {
-      group: GROUPS.advanced,
-      label: "Editable",
+      group: GROUPS.data,
+      label: "Editable?",
       description: "If false, the text is not editable",
       editable: true,
       required: false,
-      defaultValue: true,
+      defaultValue: null,
       formType: FORM_TYPES.boolean,
       propType: PROP_TYPES.BOOLEAN,
     },

package/src/mappings/TextField.js

@@ -62,7 +62,7 @@ const SEED_DATA_PROPS = {
         propType: PROP_TYPES.BOOLEAN,
     },
     disabled: {
-        group: GROUPS.basic,
+        group: GROUPS.data,
         label: "Disabled",
         description: "Whether the input should be disabled. Will prevent input and show a greyed out state.",
         formType: FORM_TYPES.boolean,
@@ -72,12 +72,22 @@ const SEED_DATA_PROPS = {
         required: false,
     },
     editable: {
-        group: GROUPS.advanced,
-        label: "Editable",
+        group: GROUPS.data,
+        label: "Editable?",
         description: "If false, the text is not editable",
         editable: true,
         required: false,
-        defaultValue: true,
+        defaultValue: null,
+        formType: FORM_TYPES.boolean,
+        propType: PROP_TYPES.BOOLEAN,
+    },
+    blurOnSubmit: {
+        group: GROUPS.advanced,
+        label: "Blur On Submit",
+        description: "If true, the text field will blur when submitted. ",
+        editable: true,
+        required: false,
+        defaultValue: null,
         formType: FORM_TYPES.boolean,
         propType: PROP_TYPES.BOOLEAN,
     },

package/src/mappings/TextField.ts

@@ -77,7 +77,7 @@ const SEED_DATA_PROPS = {
     propType: PROP_TYPES.BOOLEAN,
   },
   disabled: {
-    group: GROUPS.basic,
+    group: GROUPS.data,
     label: "Disabled",
     description:
       "Whether the input should be disabled. Will prevent input and show a greyed out state.",
@@ -88,12 +88,22 @@ const SEED_DATA_PROPS = {
     required: false,
   },
   editable: {
-    group: GROUPS.advanced,
-    label: "Editable",
+    group: GROUPS.data,
+    label: "Editable?",
     description: "If false, the text is not editable",
     editable: true,
     required: false,
-    defaultValue: true,
+    defaultValue: null,
+    formType: FORM_TYPES.boolean,
+    propType: PROP_TYPES.BOOLEAN,
+  },
+  blurOnSubmit: {
+    group: GROUPS.advanced,
+    label: "Blur On Submit",
+    description: "If true, the text field will blur when submitted. ",
+    editable: true,
+    required: false,
+    defaultValue: null,
     formType: FORM_TYPES.boolean,
     propType: PROP_TYPES.BOOLEAN,
   },

package/src/mappings/TextInput.js

@@ -1,4 +1,4 @@
-import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, FIELD_NAME, Triggers, StylesPanelSections, } from "@draftbit/types";
+import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, FIELD_NAME, Triggers, StylesPanelSections, createDisabledProp, } from "@draftbit/types";
 export const SEED_DATA_PROPS = {
     style: {
         group: GROUPS.basic,
@@ -150,12 +150,12 @@ export const SEED_DATA = [
                 propType: PROP_TYPES.BOOLEAN,
             },
             editable: {
-                group: GROUPS.advanced,
-                label: "Editable",
+                group: GROUPS.data,
+                label: "Editable?",
                 description: "If false, the text is not editable",
                 editable: true,
                 required: false,
-                defaultValue: true,
+                defaultValue: null,
                 formType: FORM_TYPES.boolean,
                 propType: PROP_TYPES.BOOLEAN,
             },
@@ -238,6 +238,16 @@ export const SEED_DATA = [
                 formType: FORM_TYPES.string,
                 propType: PROP_TYPES.STRING,
             },
+            blurOnSubmit: {
+                group: GROUPS.advanced,
+                label: "Blur On Submit",
+                description: "If true, the text field will blur when submitted. ",
+                editable: true,
+                required: false,
+                defaultValue: null,
+                formType: FORM_TYPES.boolean,
+                propType: PROP_TYPES.BOOLEAN,
+            },
             returnKeyType: {
                 group: GROUPS.advanced,
                 label: "Return Key Type",
@@ -317,6 +327,7 @@ export const SEED_DATA = [
                 formType: FORM_TYPES.number,
                 propType: PROP_TYPES.NUMBER,
             },
+            disabled: createDisabledProp(),
             scrollEnabled: {
                 group: GROUPS.basic,
                 label: "Scroll Enabled",

package/src/mappings/TextInput.ts

@@ -6,6 +6,7 @@ import {
   FIELD_NAME,
   Triggers,
   StylesPanelSections,
+  createDisabledProp,
 } from "@draftbit/types";
 
 export const SEED_DATA_PROPS = {
@@ -168,12 +169,12 @@ export const SEED_DATA = [
         propType: PROP_TYPES.BOOLEAN,
       },
       editable: {
-        group: GROUPS.advanced,
-        label: "Editable",
+        group: GROUPS.data,
+        label: "Editable?",
         description: "If false, the text is not editable",
         editable: true,
         required: false,
-        defaultValue: true,
+        defaultValue: null,
         formType: FORM_TYPES.boolean,
         propType: PROP_TYPES.BOOLEAN,
       },
@@ -258,6 +259,16 @@ export const SEED_DATA = [
         formType: FORM_TYPES.string,
         propType: PROP_TYPES.STRING,
       },
+      blurOnSubmit: {
+        group: GROUPS.advanced,
+        label: "Blur On Submit",
+        description: "If true, the text field will blur when submitted. ",
+        editable: true,
+        required: false,
+        defaultValue: null,
+        formType: FORM_TYPES.boolean,
+        propType: PROP_TYPES.BOOLEAN,
+      },
       returnKeyType: {
         group: GROUPS.advanced,
         label: "Return Key Type",
@@ -341,6 +352,7 @@ export const SEED_DATA = [
         formType: FORM_TYPES.number,
         propType: PROP_TYPES.NUMBER,
       },
+      disabled: createDisabledProp(),
       scrollEnabled: {
         group: GROUPS.basic,
         label: "Scroll Enabled",

package/lib/commonjs/Provider.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["Provider","React","Component","render","props","theme","children"],"sourceRoot":"../../src","sources":["Provider.tsx"],"mappings":";;;;;;AAAA;AACA;AACA;AAAwD;AAAA;AAAA;AAQzC,MAAMA,QAAQ,SAASC,KAAK,CAACC,SAAS,CAAQ;EAC3DC,MAAM,GAAG;IACP,oBACE,oBAAC,mBAAU,qBAET,oBAAC,sBAAa;MAAC,KAAK,EAAE,IAAI,CAACC,KAAK,CAACC;IAAM,GACpC,IAAI,CAACD,KAAK,CAACE,QAAQ,CACN,CACL;EAEjB;AACF;AAAC"}