react-native-system-ui 0.0.1-beta0 → 0.0.2

package/dist/cjs/cascader/utils.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.resolveSelectedRows = void 0;
+const resolveSelectedRows = (options = [], keys, value) => {
+  const selected = [];
+  let current = options;
+  value.forEach(val => {
+    if (!current || !current.length) return;
+    const match = current.find(option => option[keys.valueKey] === val);
+    if (match) {
+      selected.push(match);
+      current = match[keys.childrenKey] ?? [];
+    }
+  });
+  return selected;
+};
+exports.resolveSelectedRows = resolveSelectedRows;

package/dist/cjs/cell/Cell.js

@@ -0,0 +1,191 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Cell = void 0;
+function _react() {
+  const data = _interopRequireWildcard(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _reactNative() {
+  const data = require("react-native");
+  _reactNative = function () {
+    return data;
+  };
+  return data;
+}
+function _reactNativeSystemIcon() {
+  const data = require("react-native-system-icon");
+  _reactNativeSystemIcon = function () {
+    return data;
+  };
+  return data;
+}
+var _hooks = require("../../hooks");
+var _utils = require("../../utils");
+var _CellContext = require("./CellContext");
+var _tokens = require("./tokens");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const TextOrView = ({
+  children,
+  textStyle,
+  viewStyle,
+  numberOfLines
+}) => {
+  if ((0, _utils.isText)(children)) {
+    return /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+      style: textStyle,
+      numberOfLines: numberOfLines
+    }, children);
+  }
+  return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: viewStyle
+  }, children);
+};
+const Cell = exports.Cell = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
+  const {
+    title,
+    value,
+    label,
+    extra,
+    icon,
+    rightIcon,
+    border: borderProp,
+    clickable,
+    isLink,
+    required,
+    center,
+    size: sizeProp,
+    arrowDirection: arrowDirectionProp,
+    tokensOverride,
+    children,
+    style,
+    titleStyle,
+    valueStyle,
+    labelStyle,
+    contentStyle,
+    onPress,
+    disabled,
+    android_ripple,
+    ...rest
+  } = props;
+  const tokens = (0, _tokens.useCellTokens)(tokensOverride);
+  const group = (0, _react().useContext)(_CellContext.CellGroupContext);
+  const border = borderProp ?? tokens.defaults.border;
+  const size = sizeProp ?? tokens.defaults.size;
+  const arrowDirection = arrowDirectionProp ?? tokens.defaults.arrowDirection;
+  const lineHeight = tokens.typography.lineHeight;
+  const hasTitle = (0, _utils.isRenderable)(title);
+  const hasValue = (0, _utils.isRenderable)(value);
+  const hasLabel = (0, _utils.isRenderable)(label);
+  const hasExtra = (0, _utils.isRenderable)(extra);
+  const hasChildren = (0, _utils.isRenderable)(children);
+  const hasIcon = (0, _utils.isRenderable)(icon);
+  const hasRightIcon = (0, _utils.isRenderable)(rightIcon);
+  const onlyValue = !hasTitle && !hasChildren;
+  const showBorder = border && group.border && !group.isLast;
+  const showArrow = !!isLink || !!clickable;
+  const isInteractive = !disabled && (clickable || !!onPress || !!rest.onLongPress || !!rest.onPressIn || !!rest.onPressOut);
+  const containerStyles = [size === 'large' ? tokens.layout.containerLarge : tokens.layout.container, center && tokens.layout.center, style];
+  const hairline = (0, _hooks.useHairline)({
+    show: showBorder,
+    containerStyle: containerStyles,
+    color: tokens.colors.border,
+    width: tokens.borders.width,
+    defaultPaddingHorizontal: tokens.sizing.paddingHorizontal
+  });
+  const customContentStyle = [tokens.layout.customContent, {
+    justifyContent: center ? 'center' : 'flex-start'
+  }, contentStyle];
+  const bodyContent = /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, hasIcon && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [tokens.layout.iconWrapper, {
+      marginRight: tokens.spacing.iconGap,
+      minHeight: tokens.sizing.iconSize,
+      minWidth: tokens.sizing.iconSize
+    }]
+  }, icon), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: tokens.layout.body
+  }, (hasTitle || required) && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [tokens.layout.titleRow, {
+      minHeight: lineHeight
+    }]
+  }, required && /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+    style: {
+      color: tokens.colors.required,
+      marginRight: tokens.spacing.iconGap / 2
+    }
+  }, "*"), hasTitle && /*#__PURE__*/_react().default.createElement(TextOrView, {
+    textStyle: [{
+      color: tokens.colors.title,
+      fontSize: size === 'large' ? tokens.typography.largeTitleSize : tokens.typography.titleSize,
+      fontWeight: tokens.typography.titleWeight
+    }, titleStyle],
+    viewStyle: titleStyle,
+    numberOfLines: 1
+  }, title)), hasLabel && /*#__PURE__*/_react().default.createElement(TextOrView, {
+    textStyle: [{
+      marginTop: tokens.spacing.labelMarginTop,
+      color: tokens.colors.label,
+      fontSize: size === 'large' ? tokens.typography.largeLabelSize : tokens.typography.labelSize
+    }, labelStyle],
+    viewStyle: [{
+      marginTop: tokens.spacing.labelMarginTop
+    }, labelStyle],
+    numberOfLines: 2
+  }, label)), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [tokens.layout.valueContainer, {
+      minHeight: lineHeight,
+      marginLeft: tokens.spacing.valueGap
+    }, !center && onlyValue && tokens.layout.valueOnlyContainer, center && tokens.layout.valueCenter]
+  }, hasValue ? /*#__PURE__*/_react().default.createElement(TextOrView, {
+    textStyle: [tokens.layout.value, onlyValue && tokens.layout.valueOnly, {
+      color: tokens.colors.value,
+      fontSize: size === 'large' ? tokens.typography.largeValueSize : tokens.typography.valueSize
+    }, valueStyle],
+    viewStyle: customContentStyle,
+    numberOfLines: 1
+  }, value) : hasChildren ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: customContentStyle
+  }, children) : null), hasExtra && /*#__PURE__*/_react().default.createElement(TextOrView, {
+    textStyle: {
+      marginLeft: tokens.spacing.extraGap,
+      color: tokens.colors.value,
+      fontSize: size === 'large' ? tokens.typography.largeValueSize : tokens.typography.valueSize
+    },
+    viewStyle: {
+      marginLeft: tokens.spacing.extraGap
+    }
+  }, extra), hasRightIcon ? rightIcon : showArrow ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [tokens.layout.rightIconWrapper, tokens.layout.arrowTransforms[arrowDirection]]
+  }, /*#__PURE__*/_react().default.createElement(_reactNativeSystemIcon().Arrow, {
+    size: tokens.sizing.arrowSize,
+    fill: tokens.colors.arrow
+  })) : null);
+  const {
+    interactionProps,
+    states
+  } = (0, _hooks.useAriaPress)({
+    disabled: !isInteractive,
+    onPress: onPress ?? undefined
+  });
+  const Component = isInteractive ? _reactNative().Pressable : _reactNative().View;
+  const componentProps = isInteractive ? {
+    android_ripple: android_ripple ?? {
+      color: tokens.colors.ripple
+    },
+    accessibilityRole: 'button',
+    ...interactionProps
+  } : {};
+  return /*#__PURE__*/_react().default.createElement(Component, _extends({
+    ref: ref,
+    style: [containerStyles, isInteractive && states.pressed && {
+      opacity: tokens.defaults.activeOpacity
+    }]
+  }, componentProps, rest), bodyContent, hairline);
+});
+Cell.displayName = 'Cell';

package/dist/cjs/cell/CellContext.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CellGroupContext = void 0;
+function _react() {
+  const data = _interopRequireDefault(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const CellGroupContext = exports.CellGroupContext = /*#__PURE__*/_react().default.createContext({
+  border: true,
+  inset: false,
+  isLast: false
+});

package/dist/cjs/cell/CellGroup.js

@@ -0,0 +1,107 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CellGroup = void 0;
+function _react() {
+  const data = _interopRequireDefault(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _reactNative() {
+  const data = require("react-native");
+  _reactNative = function () {
+    return data;
+  };
+  return data;
+}
+var _utils = require("../../utils");
+var _Cell = require("./Cell");
+var _CellContext = require("./CellContext");
+var _tokens = require("./tokens");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const CellGroup = ({
+  children,
+  title,
+  border,
+  inset,
+  card,
+  style,
+  bodyStyle,
+  tokensOverride
+}) => {
+  const tokens = (0, _tokens.useCellTokens)(tokensOverride);
+  const resolvedBorder = border ?? tokens.defaults.groupBorder;
+  const resolvedInset = inset ?? tokens.defaults.groupInset;
+  const resolvedCard = card ?? tokens.defaults.groupCard;
+  const showInset = resolvedInset || resolvedCard;
+  const showOuterBorder = resolvedBorder && !showInset;
+  const childArray = _react().default.Children.toArray(children);
+  const isCellElement = child => {
+    if (! /*#__PURE__*/_react().default.isValidElement(child)) return false;
+    if (child.type === _Cell.Cell) return true;
+    const type = child.type;
+    return type.displayName === 'Cell';
+  };
+  const lastCellIndex = (() => {
+    for (let i = childArray.length - 1; i >= 0; i--) {
+      const child = childArray[i];
+      if (isCellElement(child)) return i;
+    }
+    return -1;
+  })();
+  return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [{
+      marginBottom: resolvedCard ? 0 : tokens.sizing.groupMarginBottom
+    }, style]
+  }, title ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+    style: {
+      color: tokens.colors.groupTitle,
+      fontSize: tokens.typography.groupTitleSize,
+      paddingHorizontal: tokens.sizing.groupTitlePaddingHorizontal,
+      paddingVertical: tokens.sizing.groupTitlePaddingVertical
+    }
+  }, title) : null, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [{
+      backgroundColor: tokens.colors.groupBodyBackground
+    }, showInset && {
+      overflow: 'hidden',
+      borderRadius: tokens.radii.groupInset,
+      marginHorizontal: tokens.sizing.groupInsetMarginHorizontal,
+      backgroundColor: tokens.colors.background
+    }, resolvedCard ? tokens.layout.groupCardShadow : null, bodyStyle]
+  }, childArray.map((child, index) => {
+    const key = /*#__PURE__*/_react().default.isValidElement(child) && child.key != null ? child.key : index;
+    const isCell = isCellElement(child);
+    return /*#__PURE__*/_react().default.createElement(_CellContext.CellGroupContext.Provider, {
+      key: key,
+      value: {
+        border: resolvedBorder,
+        inset: showInset,
+        isLast: isCell ? index === lastCellIndex : false
+      }
+    }, child);
+  }), showOuterBorder ? /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: (0, _utils.createHairlineView)({
+      position: 'top',
+      color: tokens.colors.border,
+      left: 0,
+      right: 0,
+      enabled: tokens.borders.width > 0,
+      width: tokens.borders.width
+    })
+  }), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: (0, _utils.createHairlineView)({
+      position: 'bottom',
+      color: tokens.colors.border,
+      left: 0,
+      right: 0,
+      enabled: tokens.borders.width > 0,
+      width: tokens.borders.width
+    })
+  })) : null));
+};
+exports.CellGroup = CellGroup;

package/dist/cjs/cell/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Cell = void 0;
+Object.defineProperty(exports, "CellGroup", {
+  enumerable: true,
+  get: function () {
+    return _CellGroup.CellGroup;
+  }
+});
+exports.default = void 0;
+var _Cell = require("./Cell");
+var _CellGroup = require("./CellGroup");
+const Cell = exports.Cell = Object.assign(_Cell.Cell, {
+  Group: _CellGroup.CellGroup
+});
+var _default = exports.default = Cell;

package/dist/cjs/cell/tokens.js

@@ -0,0 +1,173 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCellTokens = exports.createCellTokens = void 0;
+function _reactNative() {
+  const data = require("react-native");
+  _reactNative = function () {
+    return data;
+  };
+  return data;
+}
+var _designSystem = require("../../design-system");
+const createCellTokens = foundations => {
+  const {
+    palette,
+    spacing,
+    fontSize,
+    typography,
+    radii
+  } = foundations;
+  const background = '#ffffff';
+  const paddingVertical = 10;
+  const largePaddingVertical = 14;
+  const paddingHorizontal = 16;
+  const arrowSize = 16;
+  const iconSize = 16;
+  const baseContainerLayout = {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    width: '100%',
+    backgroundColor: background,
+    paddingHorizontal
+  };
+  return {
+    defaults: {
+      border: true,
+      size: 'normal',
+      arrowDirection: 'right',
+      activeOpacity: 0.6,
+      groupBorder: true,
+      groupInset: false,
+      groupCard: false
+    },
+    layout: {
+      container: {
+        ...baseContainerLayout,
+        paddingVertical
+      },
+      containerLarge: {
+        ...baseContainerLayout,
+        paddingVertical: largePaddingVertical
+      },
+      center: {
+        alignItems: 'center'
+      },
+      body: {
+        minWidth: 0,
+        flexDirection: 'column'
+      },
+      titleRow: {
+        flexDirection: 'row',
+        alignItems: 'center'
+      },
+      value: {
+        textAlign: 'right'
+      },
+      valueOnly: {
+        textAlign: 'left'
+      },
+      valueContainer: {
+        flex: 1,
+        flexShrink: 1,
+        minWidth: 0,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'flex-end'
+      },
+      valueOnlyContainer: {
+        justifyContent: 'flex-start',
+        alignItems: 'flex-start'
+      },
+      valueCenter: {
+        alignItems: 'center'
+      },
+      customContent: {
+        flexShrink: 1,
+        minWidth: 0
+      },
+      iconWrapper: {
+        justifyContent: 'center',
+        alignItems: 'center'
+      },
+      rightIconWrapper: {
+        alignSelf: 'center',
+        justifyContent: 'center',
+        alignItems: 'center'
+      },
+      hairline: {
+        position: 'absolute',
+        bottom: 0
+      },
+      groupCardShadow: {},
+      arrowTransforms: {
+        left: {
+          transform: [{
+            rotate: '180deg'
+          }]
+        },
+        right: {},
+        up: {
+          transform: [{
+            rotate: '-90deg'
+          }]
+        },
+        down: {
+          transform: [{
+            rotate: '90deg'
+          }]
+        }
+      }
+    },
+    colors: {
+      background,
+      ripple: palette.default[100],
+      title: palette.default[800],
+      label: palette.default[500],
+      value: palette.default[600],
+      required: palette.danger[500],
+      border: palette.default[200],
+      arrow: palette.default[400],
+      groupTitle: palette.default[500],
+      groupBodyBackground: background
+    },
+    typography: {
+      titleSize: fontSize.sm,
+      lineHeight: 24,
+      titleWeight: typography.weight.medium,
+      largeTitleSize: fontSize.lg,
+      labelSize: fontSize.xs,
+      largeLabelSize: fontSize.sm,
+      valueSize: fontSize.sm,
+      largeValueSize: fontSize.md,
+      groupTitleSize: fontSize.sm
+    },
+    sizing: {
+      paddingVertical,
+      paddingHorizontal,
+      largePaddingVertical,
+      arrowSize,
+      iconSize,
+      groupMarginBottom: spacing.md,
+      groupTitlePaddingHorizontal: spacing.lg,
+      groupTitlePaddingVertical: spacing.sm,
+      groupInsetMarginHorizontal: spacing.lg
+    },
+    radii: {
+      groupInset: radii.lg
+    },
+    borders: {
+      width: _reactNative().StyleSheet.hairlineWidth
+    },
+    spacing: {
+      iconGap: spacing.sm,
+      valueGap: spacing.none,
+      extraGap: spacing.sm,
+      labelMarginTop: spacing.xs
+    }
+  };
+};
+exports.createCellTokens = createCellTokens;
+const useCellTokens = exports.useCellTokens = (0, _designSystem.createComponentTokensHook)('cell', createCellTokens);