@draftbit/core 46.9.1-db63a0.2 → 46.9.1-e06549.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/lib/commonjs/components/Table/Table.js

@@ -1,91 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _reactNative = require("react-native");
-var _theming = require("../../theming");
-var _TableCommon = require("./TableCommon");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const Table = _ref => {
-  let {
-    theme,
-    borderWidth = 1,
-    borderColor = theme.colors.divider,
-    borderStyle = "solid",
-    drawTopBorder = true,
-    drawBottomBorder = false,
-    drawStartBorder = false,
-    drawEndBorder = false,
-    cellVerticalPadding = 10,
-    cellHorizontalPadding = 10,
-    data,
-    keyExtractor,
-    renderItem,
-    children: childrenProp,
-    style
-  } = _ref;
-  //Both 'renderItem' and 'data' are optional to allow direct children. But if one is included, both need to be included
-  if (data && !renderItem || renderItem && !data) {
-    throw new Error("'renderItem' and 'data' need to both be provided to render from 'data'. Either remove them entirley or include both");
-  }
-  if (data && renderItem && childrenProp) {
-    console.warn("'children' of Table ignored due to usage of 'data' and 'renderItem'");
-  }
-  const isTableHeader = _react.default.useCallback(object => {
-    return object.isTableHeader;
-  }, []);
-  const isRenderItem = data && renderItem;
-
-  //Uses 'renderItem' and 'data' to create an array of children
-  const dataAsChildren = _react.default.useMemo(() => {
-    if (!isRenderItem) return [];
-    return data.map((item, index) => {
-      const component = renderItem({
-        item,
-        index
-      });
-      if (!component) {
-        return null;
-      }
-      const key = keyExtractor ? keyExtractor(item, index) : index.toString();
-      return /*#__PURE__*/_react.default.cloneElement(component, {
-        key
-      });
-    });
-  }, [data, renderItem, keyExtractor, isRenderItem]);
-  const children = isRenderItem ? dataAsChildren : _react.default.Children.toArray(childrenProp);
-  const validChildren = _react.default.useMemo(() => children.filter(item => /*#__PURE__*/_react.default.isValidElement(item)), [children]);
-  const childrenWithoutHeader = _react.default.useMemo(() => validChildren.filter(item => !isTableHeader(item.props)), [validChildren, isTableHeader]);
-  const headers = _react.default.useMemo(() => validChildren.filter(item => isTableHeader(item.props)), [validChildren, isTableHeader]);
-  const contextValue = {
-    borderColor,
-    borderStyle,
-    borderWidth,
-    cellHorizontalPadding,
-    cellVerticalPadding
-  };
-  const borderViewStyle = (0, _TableCommon.generateBorderStyles)({
-    borderColor,
-    borderWidth,
-    borderStyle,
-    drawTopBorder,
-    drawBottomBorder,
-    drawStartBorder,
-    drawEndBorder
-  });
-  return /*#__PURE__*/_react.default.createElement(_TableCommon.TableStyleContext.Provider, {
-    value: contextValue
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: [styles.container, borderViewStyle, style]
-  }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, headers), /*#__PURE__*/_react.default.createElement(_reactNative.ScrollView, null, childrenWithoutHeader)));
-};
-const styles = _reactNative.StyleSheet.create({
-  container: {
-    flex: 1
-  }
-});
-var _default = (0, _theming.withTheme)(Table);
-exports.default = _default;

package/lib/commonjs/components/Table/TableCell.js

@@ -1,49 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _reactNative = require("react-native");
-var _TableCommon = require("./TableCommon");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const TableCell = _ref => {
-  let {
-    borderWidth,
-    borderColor,
-    borderStyle,
-    drawTopBorder = false,
-    drawBottomBorder = false,
-    drawStartBorder = false,
-    drawEndBorder = true,
-    cellVerticalPadding,
-    cellHorizontalPadding,
-    children,
-    style
-  } = _ref;
-  const parentContextValue = _react.default.useContext(_TableCommon.TableStyleContext);
-  const borderViewStyle = (0, _TableCommon.generateBorderStyles)({
-    borderColor: borderColor || parentContextValue.borderColor,
-    borderWidth: borderWidth || parentContextValue.borderWidth,
-    borderStyle: borderStyle || parentContextValue.borderStyle,
-    drawTopBorder,
-    drawBottomBorder,
-    drawStartBorder,
-    drawEndBorder
-  });
-  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: [styles.cellContainer, borderViewStyle, {
-      paddingVertical: cellVerticalPadding || parentContextValue.cellVerticalPadding,
-      paddingHorizontal: cellHorizontalPadding || parentContextValue.cellHorizontalPadding
-    }, style]
-  }, children);
-};
-const styles = _reactNative.StyleSheet.create({
-  cellContainer: {
-    flex: 1,
-    flexDirection: "row"
-  }
-});
-var _default = TableCell;
-exports.default = _default;

package/lib/commonjs/components/Table/TableCommon.js

@@ -1,30 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TableStyleContext = void 0;
-exports.generateBorderStyles = generateBorderStyles;
-var _react = _interopRequireDefault(require("react"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const TableStyleContext = /*#__PURE__*/_react.default.createContext({});
-exports.TableStyleContext = TableStyleContext;
-function generateBorderStyles(_ref) {
-  let {
-    borderColor,
-    borderWidth,
-    borderStyle,
-    drawTopBorder,
-    drawBottomBorder,
-    drawStartBorder,
-    drawEndBorder
-  } = _ref;
-  return {
-    borderColor,
-    borderStyle,
-    borderTopWidth: drawTopBorder ? borderWidth : 0,
-    borderBottomWidth: drawBottomBorder ? borderWidth : 0,
-    borderStartWidth: drawStartBorder ? borderWidth : 0,
-    borderEndWidth: drawEndBorder ? borderWidth : 0
-  };
-}

package/lib/commonjs/components/Table/TableRow.js

@@ -1,61 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _reactNative = require("react-native");
-var _TableCommon = require("./TableCommon");
-var _theming = require("../../theming");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const TableRow = _ref => {
-  let {
-    borderWidth,
-    borderColor,
-    borderStyle,
-    drawTopBorder = false,
-    drawBottomBorder = true,
-    drawStartBorder = true,
-    drawEndBorder = false,
-    cellVerticalPadding,
-    cellHorizontalPadding,
-    isTableHeader = false,
-    children,
-    style,
-    theme
-  } = _ref;
-  const parentContextValue = _react.default.useContext(_TableCommon.TableStyleContext);
-
-  //Create context to use and pass to children based on own props or fall back to parent provided context
-  const contextValue = {
-    borderColor: borderColor || parentContextValue.borderColor,
-    borderStyle: borderStyle || parentContextValue.borderStyle,
-    borderWidth: borderWidth || parentContextValue.borderWidth,
-    cellHorizontalPadding: cellHorizontalPadding || parentContextValue.cellHorizontalPadding,
-    cellVerticalPadding: cellVerticalPadding || parentContextValue.cellVerticalPadding
-  };
-  const borderViewStyle = (0, _TableCommon.generateBorderStyles)({
-    borderColor: contextValue.borderColor,
-    borderWidth: contextValue.borderWidth,
-    borderStyle: contextValue.borderStyle,
-    drawTopBorder,
-    drawBottomBorder,
-    drawStartBorder,
-    drawEndBorder
-  });
-  return /*#__PURE__*/_react.default.createElement(_TableCommon.TableStyleContext.Provider, {
-    value: contextValue
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: [borderViewStyle, isTableHeader ? {
-      backgroundColor: theme.colors.primary
-    } : {}, style, styles.cellsContainer]
-  }, children));
-};
-const styles = _reactNative.StyleSheet.create({
-  cellsContainer: {
-    flexDirection: "row"
-  }
-});
-var _default = (0, _theming.withTheme)(TableRow);
-exports.default = _default;

package/lib/commonjs/components/Table/index.js

@@ -1,27 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Table", {
-  enumerable: true,
-  get: function () {
-    return _Table.default;
-  }
-});
-Object.defineProperty(exports, "TableCell", {
-  enumerable: true,
-  get: function () {
-    return _TableCell.default;
-  }
-});
-Object.defineProperty(exports, "TableRow", {
-  enumerable: true,
-  get: function () {
-    return _TableRow.default;
-  }
-});
-var _Table = _interopRequireDefault(require("./Table"));
-var _TableRow = _interopRequireDefault(require("./TableRow"));
-var _TableCell = _interopRequireDefault(require("./TableCell"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }