@draftbit/core 47.0.0 → 47.0.1-0e56b5.2

package/src/utilities.js

@@ -0,0 +1,102 @@
+import { StyleSheet } from "react-native";
+import { isString, isNumber, pick, pickBy, identity } from "lodash";
+export function extractStyles(style) {
+    const { color, fontFamily, fontWeight, fontSize, lineHeight, letterSpacing, textTransform, textAlign, textDecorationLine, textDecorationColor, textDecorationStyle, ...viewStyles } = StyleSheet.flatten(style || {});
+    const textStyles = {
+        color,
+        fontFamily,
+        fontWeight,
+        fontSize,
+        lineHeight,
+        letterSpacing,
+        textTransform,
+        textAlign,
+        textDecorationLine,
+        textDecorationColor,
+        textDecorationStyle,
+    };
+    return { viewStyles, textStyles };
+}
+export const borderStyleNames = [
+    "borderRadius",
+    "borderBottomColor",
+    "borderBottomEndRadius",
+    "borderBottomLeftRadius",
+    "borderBottomRightRadius",
+    "borderBottomStartRadius",
+    "borderBottomWidth",
+    "borderColor",
+    "borderEndColor",
+    "borderLeftColor",
+    "borderLeftWidth",
+    "borderRadius",
+    "borderRightColor",
+    "borderRightWidth",
+    "borderStartColor",
+    "borderStyle",
+    "borderTopColor",
+    "borderTopEndRadius",
+    "borderTopLeftRadius",
+    "borderTopRightRadius",
+    "borderTopStartRadius",
+    "borderTopWidth",
+    "borderWidth",
+];
+export const marginStyleNames = [
+    "margin",
+    "marginBottom",
+    "marginEnd",
+    "marginHorizontal",
+    "marginLeft",
+    "marginRight",
+    "marginStart",
+    "marginTop",
+    "marginVertical",
+];
+export function extractBorderAndMarginStyles(style, additionalBorderStyles, additionalMarginStyles) {
+    const flatStyle = StyleSheet.flatten(style || {});
+    const borderStyles = pickBy(pick(flatStyle, [
+        ...borderStyleNames,
+        ...(additionalBorderStyles ? additionalBorderStyles : []),
+    ]), identity);
+    const marginStyles = pickBy(pick(flatStyle, [
+        ...marginStyleNames,
+        ...(additionalMarginStyles ? additionalMarginStyles : []),
+    ]), identity);
+    return { borderStyles, marginStyles };
+}
+/**
+ * Merges a style object on top of another style object. In React Native,
+ * keys with undefined values in a style object will still override styles
+ * that appear earlier in a sequence. This avoids that problem.
+ *
+ * This lets us avoid the `...(something ? { something } : {})` pattern.
+ * There doesn't seem to be a better way to do this. These all seem to not
+ * work (i.e. they all result in `{ color: undefined }`:
+ * `const mergedStyles = [{ color: "red" }, { color: undefined }]`
+ * `const mergedStyles = StyleSheet.compose({ color: "red" }, { color: undefined })`
+ * `const mergedStyles = StyleSheet.flatten([{ color: "red" }, { color: undefined }])`
+ */
+export function applyStyles(baseStyles, stylesToApply) {
+    if (!stylesToApply) {
+        return;
+    }
+    const flattenedStyles = StyleSheet.flatten(baseStyles);
+    for (const [key, value] of Object.entries(stylesToApply)) {
+        if (value != null) {
+            flattenedStyles[key] = value;
+        }
+    }
+    return flattenedStyles;
+}
+export function getValueForRadioButton(value) {
+    if (isString(value)) {
+        return value;
+    }
+    else if (isNumber(value)) {
+        return String(value);
+    }
+    else {
+        throw new Error(`Invalid value: ${value}`);
+    }
+}

package/lib/commonjs/components/DeprecatedButton.js

@@ -1,151 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _reactNative = require("react-native");
-var _color = _interopRequireDefault(require("color"));
-var _Config = _interopRequireDefault(require("./Config"));
-var _Touchable = _interopRequireDefault(require("./Touchable"));
-var _Elevation = _interopRequireDefault(require("./Elevation"));
-var _theming = require("../theming");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-const Button = _ref => {
-  let {
-    Icon,
-    icon,
-    disabled = false,
-    type = "solid",
-    loading = false,
-    labelColor,
-    color: colorOverride,
-    children,
-    onPress,
-    elevation = 0,
-    style,
-    theme: {
-      colors,
-      disabledOpacity,
-      roundness,
-      typography
-    },
-    ...rest
-  } = _ref;
-  let backgroundColor, borderColor, textColor, borderWidth;
-  const buttonColor = colorOverride || colors.primary;
-  if (type === "solid") {
-    backgroundColor = buttonColor;
-    if (disabled) {
-      textColor = (0, _color.default)(colors.surface).alpha(disabledOpacity).rgb().string();
-    } else {
-      textColor = labelColor || colors.surface;
-    }
-  } else {
-    backgroundColor = "transparent";
-    if (disabled) {
-      textColor = (0, _color.default)(buttonColor).alpha(disabledOpacity).rgb().string();
-    } else {
-      textColor = labelColor || buttonColor;
-    }
-  }
-  if (type === "outline") {
-    if (disabled) {
-      borderColor = (0, _color.default)(buttonColor).alpha(disabledOpacity).rgb().string();
-    } else {
-      borderColor = buttonColor;
-    }
-    borderWidth = _reactNative.StyleSheet.hairlineWidth;
-  } else {
-    borderColor = "transparent";
-    borderWidth = 0;
-  }
-  const buttonStyle = {
-    backgroundColor,
-    borderColor,
-    borderWidth,
-    borderRadius: roundness
-  };
-  const textStyle = {
-    textAlign: "center",
-    color: textColor,
-    marginVertical: 16,
-    marginHorizontal: 16
-  };
-  const iconStyle = [styles.icon, {
-    marginLeft: 16,
-    marginRight: -8,
-    width: _Config.default.buttonIconSize
-  }];
-  const {
-    margin,
-    marginEnd,
-    marginTop,
-    marginLeft,
-    marginRight,
-    marginBottom,
-    marginHorizontal,
-    marginVertical,
-    ...innerStyles
-  } = _reactNative.StyleSheet.flatten(style || {});
-  const margins = {
-    margin,
-    marginEnd,
-    marginTop,
-    marginLeft,
-    marginRight,
-    marginBottom,
-    marginHorizontal,
-    marginVertical
-  };
-  return /*#__PURE__*/React.createElement(_Elevation.default, {
-    style: {
-      elevation,
-      alignSelf: "stretch",
-      ...margins
-    }
-  }, /*#__PURE__*/React.createElement(_Touchable.default, _extends({}, rest, {
-    onPress: onPress,
-    accessibilityState: {
-      disabled
-    },
-    accessibilityRole: "button",
-    disabled: disabled || loading,
-    style: [styles.button, buttonStyle, innerStyles]
-  }), /*#__PURE__*/React.createElement(_reactNative.View, {
-    style: styles.content
-  }, icon && loading !== true ? /*#__PURE__*/React.createElement(_reactNative.View, {
-    style: iconStyle
-  }, /*#__PURE__*/React.createElement(Icon, {
-    name: icon,
-    size: _Config.default.buttonIconSize,
-    color: textColor
-  })) : null, loading ? /*#__PURE__*/React.createElement(_reactNative.ActivityIndicator, {
-    size: "small",
-    color: textColor,
-    style: iconStyle
-  }) : null, /*#__PURE__*/React.createElement(_reactNative.Text, {
-    numberOfLines: 1,
-    style: [textStyle, typography.button]
-  }, children))));
-};
-const styles = _reactNative.StyleSheet.create({
-  button: {
-    minWidth: 64,
-    borderStyle: "solid"
-  },
-  content: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  icon: {
-    width: _Config.default.buttonIconSize
-  }
-});
-var _default = (0, _theming.withTheme)(Button);
-exports.default = _default;

package/lib/commonjs/components/Touchable.web.js

@@ -1,9 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _reactNative = require("react-native");
-var _default = _reactNative.TouchableOpacity;
-exports.default = _default;

package/lib/commonjs/mappings/Touchable.js

@@ -1,20 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.SEED_DATA = void 0;
-var _types = require("@draftbit/types");
-const SEED_DATA = {
-  name: "Touchable",
-  tag: "Touchable",
-  description: "Simple button with no styles",
-  category: _types.COMPONENT_TYPES.button,
-  stylesPanelSections: [_types.StylesPanelSections.Size, _types.StylesPanelSections.Margins, _types.StylesPanelSections.Borders],
-  layout: {},
-  triggers: [_types.Triggers.OnPress],
-  props: {
-    onPress: (0, _types.createActionProp)()
-  }
-};
-exports.SEED_DATA = SEED_DATA;

package/lib/module/components/DeprecatedButton.js

@@ -1,141 +0,0 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import * as React from "react";
-import { ActivityIndicator, View, Text, StyleSheet } from "react-native";
-import color from "color";
-import Config from "./Config";
-import Touchable from "./Touchable";
-import Elevation from "./Elevation";
-import { withTheme } from "../theming";
-const Button = _ref => {
-  let {
-    Icon,
-    icon,
-    disabled = false,
-    type = "solid",
-    loading = false,
-    labelColor,
-    color: colorOverride,
-    children,
-    onPress,
-    elevation = 0,
-    style,
-    theme: {
-      colors,
-      disabledOpacity,
-      roundness,
-      typography
-    },
-    ...rest
-  } = _ref;
-  let backgroundColor, borderColor, textColor, borderWidth;
-  const buttonColor = colorOverride || colors.primary;
-  if (type === "solid") {
-    backgroundColor = buttonColor;
-    if (disabled) {
-      textColor = color(colors.surface).alpha(disabledOpacity).rgb().string();
-    } else {
-      textColor = labelColor || colors.surface;
-    }
-  } else {
-    backgroundColor = "transparent";
-    if (disabled) {
-      textColor = color(buttonColor).alpha(disabledOpacity).rgb().string();
-    } else {
-      textColor = labelColor || buttonColor;
-    }
-  }
-  if (type === "outline") {
-    if (disabled) {
-      borderColor = color(buttonColor).alpha(disabledOpacity).rgb().string();
-    } else {
-      borderColor = buttonColor;
-    }
-    borderWidth = StyleSheet.hairlineWidth;
-  } else {
-    borderColor = "transparent";
-    borderWidth = 0;
-  }
-  const buttonStyle = {
-    backgroundColor,
-    borderColor,
-    borderWidth,
-    borderRadius: roundness
-  };
-  const textStyle = {
-    textAlign: "center",
-    color: textColor,
-    marginVertical: 16,
-    marginHorizontal: 16
-  };
-  const iconStyle = [styles.icon, {
-    marginLeft: 16,
-    marginRight: -8,
-    width: Config.buttonIconSize
-  }];
-  const {
-    margin,
-    marginEnd,
-    marginTop,
-    marginLeft,
-    marginRight,
-    marginBottom,
-    marginHorizontal,
-    marginVertical,
-    ...innerStyles
-  } = StyleSheet.flatten(style || {});
-  const margins = {
-    margin,
-    marginEnd,
-    marginTop,
-    marginLeft,
-    marginRight,
-    marginBottom,
-    marginHorizontal,
-    marginVertical
-  };
-  return /*#__PURE__*/React.createElement(Elevation, {
-    style: {
-      elevation,
-      alignSelf: "stretch",
-      ...margins
-    }
-  }, /*#__PURE__*/React.createElement(Touchable, _extends({}, rest, {
-    onPress: onPress,
-    accessibilityState: {
-      disabled
-    },
-    accessibilityRole: "button",
-    disabled: disabled || loading,
-    style: [styles.button, buttonStyle, innerStyles]
-  }), /*#__PURE__*/React.createElement(View, {
-    style: styles.content
-  }, icon && loading !== true ? /*#__PURE__*/React.createElement(View, {
-    style: iconStyle
-  }, /*#__PURE__*/React.createElement(Icon, {
-    name: icon,
-    size: Config.buttonIconSize,
-    color: textColor
-  })) : null, loading ? /*#__PURE__*/React.createElement(ActivityIndicator, {
-    size: "small",
-    color: textColor,
-    style: iconStyle
-  }) : null, /*#__PURE__*/React.createElement(Text, {
-    numberOfLines: 1,
-    style: [textStyle, typography.button]
-  }, children))));
-};
-const styles = StyleSheet.create({
-  button: {
-    minWidth: 64,
-    borderStyle: "solid"
-  },
-  content: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  icon: {
-    width: Config.buttonIconSize
-  }
-});
-export default withTheme(Button);

package/lib/module/components/Touchable.web.js

@@ -1,2 +0,0 @@
-import { TouchableOpacity } from "react-native";
-export default TouchableOpacity;

package/lib/module/mappings/Touchable.js

@@ -1,13 +0,0 @@
-import { COMPONENT_TYPES, createActionProp, Triggers, StylesPanelSections } from "@draftbit/types";
-export const SEED_DATA = {
-  name: "Touchable",
-  tag: "Touchable",
-  description: "Simple button with no styles",
-  category: COMPONENT_TYPES.button,
-  stylesPanelSections: [StylesPanelSections.Size, StylesPanelSections.Margins, StylesPanelSections.Borders],
-  layout: {},
-  triggers: [Triggers.OnPress],
-  props: {
-    onPress: createActionProp()
-  }
-};

package/lib/typescript/src/components/DeprecatedButton.d.ts

@@ -1,54 +0,0 @@
-import * as React from "react";
-import { TouchableHighlightProps, StyleProp, ViewStyle } from "react-native";
-import type { Theme } from "../styles/DefaultTheme";
-import type { IconSlot } from "../interfaces/Icon";
-/**
- * A button is component that the user can press to trigger an action.
- *
- * <div class="screenshots">
- *   <figure>
- *     <img src="screenshots/button-1.png" />
- *     <figcaption>Text button</figcaption>
- *   </figure>
- *   <figure>
- *     <img src="screenshots/button-2.png" />
- *     <figcaption>Outlined button</figcaption>
- *   </figure>
- *   <figure>
- *     <img src="screenshots/button-3.png" />
- *     <figcaption>Contained button</figcaption>
- *   </figure>
- * </div>
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { Button } from '@draftbit/ui';
- *
- * const MyComponent = () => (
- *   <Button icon="add-a-photo" type="solid" onPress={() => console.log('Pressed')}>
- *     Press me
- *   </Button>
- * );
- *
- * export default MyComponent;
- * ```
- */
-declare type Props = {
-    disabled?: boolean;
-    type?: "solid" | "outline" | "text";
-    loading?: boolean;
-    icon?: string;
-    labelColor?: string;
-    color?: string;
-    children?: React.ReactNode;
-    onPress: () => void;
-    elevation?: number;
-    style?: StyleProp<ViewStyle>;
-    theme: Theme;
-} & TouchableHighlightProps & IconSlot;
-declare const _default: React.ComponentType<import("@draftbit/react-theme-provider").$Without<React.PropsWithChildren<Props>, "theme"> & {
-    theme?: import("@draftbit/react-theme-provider").$DeepPartial<any> | undefined;
-}> & import("@draftbit/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<React.ComponentType<React.PropsWithChildren<Props>> & React.FC<React.PropsWithChildren<Props>>, {}>;
-export default _default;
-//# sourceMappingURL=DeprecatedButton.d.ts.map

package/lib/typescript/src/components/DeprecatedButton.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DeprecatedButton.d.ts","sourceRoot":"","sources":["../../../../src/components/DeprecatedButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAKL,uBAAuB,EACvB,SAAS,EACT,SAAS,EAEV,MAAM,cAAc,CAAC;AAOtB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,aAAK,KAAK,GAAG;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,EAAE,KAAK,CAAC;CACd,GAAG,uBAAuB,GACzB,QAAQ,CAAC;;;;AAmJX,wBAAiC"}

package/lib/typescript/src/components/Touchable.web.d.ts

@@ -1,3 +0,0 @@
-import { TouchableOpacity } from "react-native";
-export default TouchableOpacity;
-//# sourceMappingURL=Touchable.web.d.ts.map

package/lib/typescript/src/components/Touchable.web.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Touchable.web.d.ts","sourceRoot":"","sources":["../../../../src/components/Touchable.web.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAEhD,eAAe,gBAAgB,CAAC"}

package/lib/typescript/src/mappings/Touchable.d.ts

@@ -1,22 +0,0 @@
-export declare const SEED_DATA: {
-    name: string;
-    tag: string;
-    description: string;
-    category: string;
-    stylesPanelSections: string[];
-    layout: {};
-    triggers: string[];
-    props: {
-        onPress: {
-            label: string;
-            description: string;
-            editable: boolean;
-            required: boolean;
-            formType: string;
-            propType: string;
-            defaultValue: null;
-            group: string;
-        };
-    };
-};
-//# sourceMappingURL=Touchable.d.ts.map

package/lib/typescript/src/mappings/Touchable.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Touchable.d.ts","sourceRoot":"","sources":["../../../../src/mappings/Touchable.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;CAerB,CAAC"}