@draftbit/core 46.8.2-fee87c.2 → 46.9.1-0f1b60.2

package/src/mappings/HtmlElements.js

@@ -0,0 +1,180 @@
+import { COMPONENT_TYPES, createTextProp, FORM_TYPES, PROP_TYPES, GROUPS, StylesPanelSections, BLOCK_STYLES_SECTIONS, } from "@draftbit/types";
+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: BLOCK_STYLES_SECTIONS,
+    category: COMPONENT_TYPES.webelement,
+};
+const TEXT_SEED_DATA = {
+    ...ELEMENT_SEED_DATA,
+    category: COMPONENT_TYPES.text,
+    stylesPanelSections: [
+        StylesPanelSections.Typography,
+        StylesPanelSections.LayoutSelectedItem,
+        StylesPanelSections.MarginsAndPaddings,
+        StylesPanelSections.Effects,
+    ],
+    layout: {
+        color: "strong",
+    },
+    props: {
+        children: {
+            group: GROUPS.data,
+            label: "Text",
+            description: "Text",
+            defaultValue: "Double click me to edit 👀",
+            editable: true,
+            required: true,
+            formType: FORM_TYPES.string,
+            propType: PROP_TYPES.STRING,
+        },
+        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: true,
+        },
+    },
+};
+export const SEED_DATA = [
+    {
+        name: "Heading 1",
+        tag: "H1",
+        ...TEXT_SEED_DATA,
+    },
+    {
+        name: "Heading 2",
+        tag: "H2",
+        ...TEXT_SEED_DATA,
+    },
+    {
+        name: "Heading 3",
+        tag: "H3",
+        ...TEXT_SEED_DATA,
+    },
+    {
+        name: "Heading 4",
+        tag: "H4",
+        ...TEXT_SEED_DATA,
+    },
+    {
+        name: "Heading 5",
+        tag: "H5",
+        ...TEXT_SEED_DATA,
+    },
+    {
+        name: "Heading 6",
+        tag: "H6",
+        ...TEXT_SEED_DATA,
+    },
+    {
+        name: "Paragraph",
+        tag: "P",
+        ...TEXT_SEED_DATA,
+    },
+    {
+        name: "Bold",
+        tag: "B",
+        ...TEXT_SEED_DATA,
+    },
+    {
+        name: "Strikethrough",
+        tag: "S",
+        ...TEXT_SEED_DATA,
+    },
+    {
+        name: "Italic",
+        tag: "I",
+        ...TEXT_SEED_DATA,
+    },
+    {
+        name: "Code",
+        tag: "Code",
+        ...TEXT_SEED_DATA,
+    },
+    {
+        name: "Preformatted",
+        tag: "Pre",
+        ...TEXT_SEED_DATA,
+    },
+    {
+        name: "Mark",
+        tag: "Mark",
+        ...TEXT_SEED_DATA,
+    },
+    {
+        name: "Block Quote",
+        tag: "BlockQuote",
+        ...TEXT_SEED_DATA,
+    },
+    {
+        name: "Quoted",
+        tag: "Q",
+        ...TEXT_SEED_DATA,
+    },
+    {
+        name: "Time",
+        tag: "Time",
+        ...TEXT_SEED_DATA,
+    },
+    {
+        name: "Unordered List",
+        tag: "UL",
+        ...ELEMENT_SEED_DATA,
+    },
+    {
+        name: "List Item",
+        tag: "LI",
+        ...TEXT_SEED_DATA,
+        category: COMPONENT_TYPES.webelement,
+    },
+    {
+        name: "Line Break",
+        tag: "BR",
+        ...ELEMENT_SEED_DATA,
+    },
+    {
+        name: "Horizontal Rule",
+        tag: "HR",
+        ...ELEMENT_SEED_DATA,
+    },
+    {
+        name: "Anchor",
+        tag: "A",
+        ...TEXT_SEED_DATA,
+        props: {
+            ...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"],
+            },
+        },
+        category: COMPONENT_TYPES.webelement,
+    },
+];

package/src/mappings/HtmlElements.ts

@@ -0,0 +1,194 @@
+import {
+  COMPONENT_TYPES,
+  createTextProp,
+  FORM_TYPES,
+  PROP_TYPES,
+  GROUPS,
+  StylesPanelSections,
+  BLOCK_STYLES_SECTIONS,
+} from "@draftbit/types";
+
+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: BLOCK_STYLES_SECTIONS,
+  category: COMPONENT_TYPES.webelement,
+};
+
+const TEXT_SEED_DATA = {
+  ...ELEMENT_SEED_DATA,
+  category: COMPONENT_TYPES.text,
+  stylesPanelSections: [
+    StylesPanelSections.Typography,
+    StylesPanelSections.LayoutSelectedItem,
+    StylesPanelSections.MarginsAndPaddings,
+    StylesPanelSections.Effects,
+  ],
+  layout: {
+    color: "strong",
+  },
+  props: {
+    children: {
+      group: GROUPS.data,
+      label: "Text",
+      description: "Text",
+      defaultValue: "Double click me to edit 👀",
+      editable: true,
+      required: true,
+      formType: FORM_TYPES.string,
+      propType: PROP_TYPES.STRING,
+    },
+    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: true,
+    },
+  },
+};
+
+export const SEED_DATA = [
+  {
+    name: "Heading 1",
+    tag: "H1",
+    ...TEXT_SEED_DATA,
+  },
+  {
+    name: "Heading 2",
+    tag: "H2",
+    ...TEXT_SEED_DATA,
+  },
+  {
+    name: "Heading 3",
+    tag: "H3",
+    ...TEXT_SEED_DATA,
+  },
+  {
+    name: "Heading 4",
+    tag: "H4",
+    ...TEXT_SEED_DATA,
+  },
+  {
+    name: "Heading 5",
+    tag: "H5",
+    ...TEXT_SEED_DATA,
+  },
+  {
+    name: "Heading 6",
+    tag: "H6",
+    ...TEXT_SEED_DATA,
+  },
+  {
+    name: "Paragraph",
+    tag: "P",
+    ...TEXT_SEED_DATA,
+  },
+  {
+    name: "Bold",
+    tag: "B",
+    ...TEXT_SEED_DATA,
+  },
+  {
+    name: "Strikethrough",
+    tag: "S",
+    ...TEXT_SEED_DATA,
+  },
+  {
+    name: "Italic",
+    tag: "I",
+    ...TEXT_SEED_DATA,
+  },
+  {
+    name: "Code",
+    tag: "Code",
+    ...TEXT_SEED_DATA,
+  },
+  {
+    name: "Preformatted",
+    tag: "Pre",
+    ...TEXT_SEED_DATA,
+  },
+  {
+    name: "Mark",
+    tag: "Mark",
+    ...TEXT_SEED_DATA,
+  },
+  {
+    name: "Block Quote",
+    tag: "BlockQuote",
+    ...TEXT_SEED_DATA,
+  },
+  {
+    name: "Quoted",
+    tag: "Q",
+    ...TEXT_SEED_DATA,
+  },
+
+  {
+    name: "Time",
+    tag: "Time",
+    ...TEXT_SEED_DATA,
+  },
+  {
+    name: "Unordered List",
+    tag: "UL",
+    ...ELEMENT_SEED_DATA,
+  },
+  {
+    name: "List Item",
+    tag: "LI",
+    ...TEXT_SEED_DATA,
+    category: COMPONENT_TYPES.webelement,
+  },
+  {
+    name: "Line Break",
+    tag: "BR",
+    ...ELEMENT_SEED_DATA,
+  },
+  {
+    name: "Horizontal Rule",
+    tag: "HR",
+    ...ELEMENT_SEED_DATA,
+  },
+  {
+    name: "Anchor",
+    tag: "A",
+    ...TEXT_SEED_DATA,
+    props: {
+      ...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"],
+      },
+    },
+    category: COMPONENT_TYPES.webelement,
+  },
+];

package/src/mappings/Markdown.js

@@ -0,0 +1,25 @@
+import { COMPONENT_TYPES, FORM_TYPES, GROUPS, PROP_TYPES, StylesPanelSections, } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Markdown",
+    tag: "Markdown",
+    description: "A component that renders markdown",
+    category: COMPONENT_TYPES.text,
+    stylesPanelSections: [
+        StylesPanelSections.Typography,
+        StylesPanelSections.LayoutSelectedItem,
+        StylesPanelSections.MarginsAndPaddings,
+        StylesPanelSections.Effects,
+    ],
+    props: {
+        children: {
+            group: GROUPS.data,
+            label: "Markdown Text",
+            description: "Markdown text to be rendered ",
+            editable: true,
+            required: true,
+            formType: FORM_TYPES.string,
+            propType: PROP_TYPES.STRING,
+            defaultValue: "### Markdown",
+        },
+    },
+};

package/src/mappings/Markdown.ts

@@ -0,0 +1,32 @@
+import {
+  COMPONENT_TYPES,
+  FORM_TYPES,
+  GROUPS,
+  PROP_TYPES,
+  StylesPanelSections,
+} from "@draftbit/types";
+
+export const SEED_DATA = {
+  name: "Markdown",
+  tag: "Markdown",
+  description: "A component that renders markdown",
+  category: COMPONENT_TYPES.text,
+  stylesPanelSections: [
+    StylesPanelSections.Typography,
+    StylesPanelSections.LayoutSelectedItem,
+    StylesPanelSections.MarginsAndPaddings,
+    StylesPanelSections.Effects,
+  ],
+  props: {
+    children: {
+      group: GROUPS.data,
+      label: "Markdown Text",
+      description: "Markdown text to be rendered ",
+      editable: true,
+      required: true,
+      formType: FORM_TYPES.string,
+      propType: PROP_TYPES.STRING,
+      defaultValue: "### Markdown",
+    },
+  },
+};

package/src/mappings/Shadow.js

@@ -0,0 +1,95 @@
+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/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/TabView.js

@@ -1,12 +1,17 @@
-import { COMPONENT_TYPES, createTextEnumProp, createColorProp, BLOCK_STYLES_SECTIONS, StylesPanelSections, Triggers, createActionProp, createStaticBoolProp, } from "@draftbit/types";
+import { COMPONENT_TYPES, createTextEnumProp, createColorProp, StylesPanelSections, Triggers, createActionProp, createStaticBoolProp, GROUPS, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Tab View",
     tag: "TabView",
     description: "Tab view container",
     category: COMPONENT_TYPES.swiper,
     stylesPanelSections: [
-        ...BLOCK_STYLES_SECTIONS,
+        StylesPanelSections.Size,
+        StylesPanelSections.MarginsAndPaddings,
+        StylesPanelSections.Position,
+        StylesPanelSections.Effects,
+        StylesPanelSections.LayoutSelectedItem,
         StylesPanelSections.Background,
+        StylesPanelSections.Typography,
     ],
     triggers: [Triggers.OnIndexChanged, Triggers.OnEndReached],
     props: {
@@ -36,9 +41,9 @@ export const SEED_DATA = {
             defaultValue: true,
         }),
         scrollEnabled: createStaticBoolProp({
-            label: "Scroll Enabled",
+            label: "Tab Scroll Enabled",
             description: "Whether scrolling of tabs is enabled or not",
-            defaultValue: true,
+            defaultValue: false,
         }),
         activeColor: createColorProp({
             label: "Active Color",
@@ -52,8 +57,9 @@ export const SEED_DATA = {
         }),
         pressColor: createColorProp({
             label: "Press Color",
-            description: "Color of ripple when pressed (android only)",
+            description: "Color of ripple when pressed",
             defaultValue: "primary",
+            group: GROUPS.android,
         }),
         indicatorColor: createColorProp({
             label: "Indicator Color",