@draftbit/core 47.0.1-9fd6f2.2 → 47.0.1-cc5ccc.2

package/src/mappings/Pressable.ts

@@ -0,0 +1,63 @@
+import {
+  COMPONENT_TYPES,
+  createActionProp,
+  Triggers,
+  createNumberProp,
+  StylesPanelSections,
+  GROUPS,
+} from "@draftbit/types";
+
+const SEED_DATA_PROPS = {
+  stylesPanelSections: [
+    StylesPanelSections.Size,
+    StylesPanelSections.Margins,
+    StylesPanelSections.Borders,
+  ],
+  layout: {},
+  triggers: [Triggers.OnPress, Triggers.OnLongPress],
+  props: {
+    onPress: createActionProp(),
+    onLongPress: createActionProp(),
+    activeOpacity: createNumberProp({
+      label: "Active Opacity",
+      description: "The opacity when the button is pressed.",
+      defaultValue: 0.8,
+      group: GROUPS.basic,
+    }),
+    disabledOpacity: createNumberProp({
+      label: "Disabled Opacity",
+      description: "The opacity when the button is disabled.",
+      defaultValue: 0.8,
+      group: GROUPS.basic,
+    }),
+    delayLongPress: createNumberProp({
+      label: "Delay Long Press",
+      description:
+        "Duration (in milliseconds) from onPressIn before onLongPress is called.",
+      group: GROUPS.basic,
+    }),
+    hitSlop: createNumberProp({
+      label: "Hit Slop",
+      description:
+        "Sets additional distance outside of element in which a press can be detected.",
+      group: GROUPS.basic,
+    }),
+  },
+};
+
+export const SEED_DATA = [
+  {
+    name: "Touchable",
+    tag: "Touchable",
+    description: "An interactive view with no styles",
+    category: COMPONENT_TYPES.button,
+    ...SEED_DATA_PROPS,
+  },
+  {
+    name: "Pressable",
+    tag: "Pressable",
+    description: "An interactive view with no styles",
+    category: COMPONENT_TYPES.deprecated,
+    ...SEED_DATA_PROPS,
+  },
+];

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"}

package/src/components/DeprecatedButton.js

@@ -1,95 +0,0 @@
-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 = ({ Icon, icon, disabled = false, type = "solid", loading = false, labelColor, color: colorOverride, children, onPress, elevation = 0, style, theme: { colors, disabledOpacity, roundness, typography }, ...rest }) => {
-    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 (React.createElement(Elevation, { style: { elevation, alignSelf: "stretch", ...margins } },
-        React.createElement(Touchable, { ...rest, onPress: onPress, accessibilityState: { disabled }, accessibilityRole: "button", disabled: disabled || loading, style: [styles.button, buttonStyle, innerStyles] },
-            React.createElement(View, { style: styles.content },
-                icon && loading !== true ? (React.createElement(View, { style: iconStyle },
-                    React.createElement(Icon, { name: icon, size: Config.buttonIconSize, color: textColor }))) : null,
-                loading ? (React.createElement(ActivityIndicator, { size: "small", color: textColor, style: iconStyle })) : null,
-                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);