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

package/dist/es/field/Field.js

@@ -0,0 +1,434 @@
+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); }
+import React, { useCallback, useId, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { Platform, Pressable, Text, TextInput, View } from 'react-native';
+import { Clear, QuestionO } from 'react-native-system-icon';
+import Cell from '../cell';
+import Dialog from '../dialog';
+import { formatNumberInput } from '../../utils/string';
+import { isDef, isFiniteNumber, isFunction, isObject, isRenderable, isText } from '../../utils/validate';
+import { useFieldTokens } from './tokens';
+import { alignMap, mapKeyboardType } from './utils';
+export const Field = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    tokensOverride,
+    label,
+    labelWidth: labelWidthProp,
+    labelAlign: labelAlignProp,
+    inputAlign: inputAlignProp,
+    controlAlign: controlAlignProp,
+    required = false,
+    colon = false,
+    intro,
+    description,
+    tooltip,
+    error = false,
+    errorMessage,
+    errorMessageAlign = 'left',
+    disabled = false,
+    readOnly = false,
+    clearable = false,
+    clearTrigger: clearTriggerProp,
+    clearIcon,
+    leftIcon,
+    rightIcon,
+    prefix,
+    suffix: suffixProp,
+    button,
+    extra,
+    value: valueProp,
+    defaultValue = '',
+    type = 'text',
+    rows: rowsProp,
+    autoSize = false,
+    formatter,
+    formatTrigger: formatTriggerProp,
+    showWordLimit = false,
+    onOverlimit,
+    onClear,
+    onClick,
+    onClickInput,
+    onClickLeftIcon,
+    onClickRightIcon,
+    border,
+    center,
+    clickable,
+    isLink,
+    arrowDirection,
+    size,
+    titleStyle,
+    contentStyle,
+    inputStyle,
+    labelStyle,
+    introStyle,
+    errorMessageStyle,
+    style,
+    androidRipple,
+    children,
+    placeholderTextColor,
+    onFocus,
+    onBlur,
+    onPressIn,
+    onChangeText,
+    maxLength,
+    ...restInputProps
+  } = props;
+  const tokens = useFieldTokens(tokensOverride);
+  const labelWidth = labelWidthProp ?? tokens.defaults.labelWidth;
+  const labelAlign = labelAlignProp ?? tokens.defaults.labelAlign;
+  const inputAlign = inputAlignProp ?? tokens.defaults.inputAlign;
+  const controlAlign = controlAlignProp ?? tokens.defaults.controlAlign;
+  const clearTrigger = clearTriggerProp ?? tokens.defaults.clearTrigger;
+  const rows = rowsProp ?? tokens.defaults.rows;
+  const formatTrigger = formatTriggerProp ?? tokens.defaults.formatTrigger;
+  const mergedTitleStyle = useMemo(() => [{
+    width: labelWidth,
+    minWidth: labelWidth,
+    maxWidth: labelWidth,
+    flexBasis: labelWidth,
+    marginRight: tokens.spacing.labelGap,
+    flexShrink: 0,
+    flexGrow: 0
+  }, titleStyle], [labelWidth, titleStyle, tokens.spacing.labelGap]);
+  const resolvedSuffix = suffixProp ?? button;
+  const resolvedDescription = intro ?? description;
+  const resolvedPlaceholderColor = placeholderTextColor ?? (disabled ? tokens.colors.disabled : tokens.colors.placeholder);
+  const isTextarea = type === 'textarea';
+  const isControlled = valueProp !== undefined;
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const value = isControlled ? valueProp ?? '' : internalValue;
+  const [focused, setFocused] = useState(false);
+  const [pressingClear, setPressingClear] = useState(false);
+  const inputRef = useRef(null);
+  const introId = useId();
+  const errorId = useId();
+  const describedBy = useMemo(() => {
+    const ids = [isRenderable(errorMessage) ? errorId : null, isRenderable(resolvedDescription) ? introId : null].filter(Boolean);
+    return ids.length ? ids : undefined;
+  }, [errorId, errorMessage, introId, resolvedDescription]);
+  const lineHeight = tokens.defaults.textareaLineHeight;
+  const autoSizeConfig = autoSize && isObject(autoSize) ? autoSize : undefined;
+  const minRows = !isTextarea ? 1 : autoSizeConfig && isDef(autoSizeConfig.minRows) ? Math.max(1, autoSizeConfig.minRows) : Math.max(1, rows);
+  const maxRows = !isTextarea ? undefined : autoSizeConfig && isDef(autoSizeConfig.maxRows) ? Math.max(1, autoSizeConfig.maxRows) : undefined;
+  const minHeight = isTextarea ? Math.max(tokens.sizes.textareaMinHeight, minRows * lineHeight) : undefined;
+  const maxHeight = isTextarea && maxRows ? Math.max(tokens.sizes.textareaMinHeight, maxRows * lineHeight) : undefined;
+  const [textareaHeight, setTextareaHeight] = useState(minHeight);
+  const formatValue = useCallback((inputValue, trigger = 'onChange') => formatter && trigger === formatTrigger ? formatter(inputValue) : inputValue, [formatTrigger, formatter]);
+  const updateValue = useCallback((next, trigger = 'onChange') => {
+    const formatted = formatValue(next, trigger);
+    if (!isControlled) {
+      setInternalValue(formatted);
+    }
+    onChangeText?.(formatted);
+  }, [formatValue, isControlled, onChangeText]);
+  useImperativeHandle(ref, () => ({
+    focus: () => inputRef.current?.focus(),
+    blur: () => inputRef.current?.blur(),
+    clear: () => updateValue(''),
+    get nativeElement() {
+      return inputRef.current;
+    }
+  }));
+  const finalTextAlign = controlAlign !== 'left' ? controlAlign : inputAlign;
+  const showClear = clearable && !readOnly && (value ?? '') !== '' && (clearTrigger === 'always' || clearTrigger === 'focus' && (focused || pressingClear));
+  const handleChangeText = useCallback(text => {
+    let next = text ?? '';
+    if (type === 'number' || type === 'digit') {
+      const allowDot = type === 'number';
+      next = formatNumberInput(next, allowDot, allowDot);
+    }
+    if (isFiniteNumber(maxLength) && maxLength >= 0 && next.length > maxLength) {
+      onOverlimit?.(next);
+      next = next.slice(0, maxLength);
+    }
+    updateValue(next, 'onChange');
+  }, [maxLength, onOverlimit, type, updateValue]);
+  const handleFocus = useCallback(event => {
+    setFocused(true);
+    onFocus?.(event);
+    if (readOnly) {
+      inputRef.current?.blur();
+    }
+  }, [onFocus, readOnly]);
+  const handleBlur = useCallback(event => {
+    updateValue(value ?? '', 'onBlur');
+    setFocused(false);
+    onBlur?.(event);
+  }, [onBlur, updateValue, value]);
+  const handlePressIn = useCallback(event => {
+    onPressIn?.(event);
+    onClickInput?.();
+  }, [onClickInput, onPressIn]);
+  const handleContentSizeChange = useCallback(event => {
+    if (!isTextarea) return;
+    const contentHeight = event.nativeEvent.contentSize?.height ?? 0;
+    if (!contentHeight) return;
+    let nextHeight = contentHeight;
+    if (autoSize) {
+      nextHeight = Math.max(minHeight ?? contentHeight, contentHeight);
+      if (maxHeight) {
+        nextHeight = Math.min(nextHeight, maxHeight);
+      }
+    } else if (minHeight) {
+      nextHeight = Math.max(minHeight, contentHeight);
+    }
+    setTextareaHeight(nextHeight);
+  }, [autoSize, isTextarea, maxHeight, minHeight]);
+  const handleClear = useCallback(() => {
+    updateValue('');
+    inputRef.current?.clear?.();
+    inputRef.current?.focus?.();
+    onClear?.();
+  }, [onClear, updateValue]);
+  const renderLabel = () => {
+    if (!isRenderable(label)) return null;
+    const isPlain = isText(label);
+    const content = isPlain ? /*#__PURE__*/React.createElement(Text, {
+      style: [{
+        color: disabled ? tokens.colors.disabled : tokens.colors.label,
+        fontSize: tokens.typography.labelSize,
+        textAlign: labelAlign
+      }, labelStyle],
+      numberOfLines: 1
+    }, label, colon ? ':' : '') : label;
+    return /*#__PURE__*/React.createElement(View, {
+      style: tokens.layout.labelRow
+    }, content, isRenderable(tooltip) ? renderTooltip() : null);
+  };
+  const renderTooltip = () => {
+    if (!isRenderable(tooltip)) return null;
+    const defaultIcon = /*#__PURE__*/React.createElement(QuestionO, {
+      size: tokens.sizes.icon,
+      fill: tokens.colors.tooltip,
+      color: tokens.colors.tooltip
+    });
+    let icon = defaultIcon;
+    let dialogProps = {
+      message: tooltip
+    };
+    if (! /*#__PURE__*/React.isValidElement(tooltip) && !isText(tooltip)) {
+      const {
+        icon: customIcon,
+        ...rest
+      } = tooltip;
+      icon = customIcon ?? defaultIcon;
+      dialogProps = rest;
+    }
+    return /*#__PURE__*/React.createElement(Pressable, {
+      style: [tokens.layout.tooltip, {
+        marginLeft: tokens.spacing.rightIconGap
+      }],
+      onPress: () => Dialog.show(dialogProps),
+      accessibilityRole: "button"
+    }, icon);
+  };
+  const renderLeftIcon = () => {
+    if (!leftIcon) return null;
+    const content = /*#__PURE__*/React.createElement(View, {
+      style: [tokens.layout.leftIcon, {
+        marginRight: tokens.spacing.leftIconGap,
+        minWidth: tokens.sizes.icon
+      }]
+    }, leftIcon);
+    if (!onClickLeftIcon) return content;
+    return /*#__PURE__*/React.createElement(Pressable, {
+      onPress: onClickLeftIcon,
+      accessibilityRole: "button"
+    }, content);
+  };
+  const renderRightIcon = () => {
+    if (!rightIcon) return null;
+    const node = /*#__PURE__*/React.createElement(View, {
+      style: [tokens.layout.rightIcon, {
+        paddingHorizontal: tokens.spacing.rightIconGap
+      }]
+    }, rightIcon);
+    if (!onClickRightIcon) return node;
+    return /*#__PURE__*/React.createElement(Pressable, {
+      onPress: onClickRightIcon,
+      accessibilityRole: "button"
+    }, node);
+  };
+  const renderClearIcon = () => {
+    if (!showClear) return null;
+    const webMouseDownProps = Platform.OS === 'web' ? {
+      onMouseDown: event => {
+        event.preventDefault?.();
+        event.stopPropagation?.();
+      }
+    } : undefined;
+    return /*#__PURE__*/React.createElement(Pressable, _extends({
+      style: [tokens.layout.clearIcon, {
+        paddingHorizontal: tokens.spacing.rightIconGap
+      }]
+    }, webMouseDownProps, {
+      onPressIn: () => setPressingClear(true),
+      onPressOut: () => setPressingClear(false),
+      onPress: handleClear,
+      accessibilityRole: "button"
+    }), /*#__PURE__*/React.isValidElement(clearIcon) ? clearIcon : /*#__PURE__*/React.createElement(Clear, {
+      size: tokens.sizes.clearIcon,
+      fill: tokens.colors.clear,
+      color: tokens.colors.clear
+    }));
+  };
+  const renderControl = () => {
+    if (isRenderable(children)) {
+      return /*#__PURE__*/React.createElement(View, {
+        style: [tokens.layout.children, {
+          minHeight: tokens.sizes.controlMinHeight
+        }]
+      }, children);
+    }
+    const inputStyles = [isTextarea ? tokens.layout.textarea : tokens.layout.input, {
+      color: disabled ? tokens.colors.disabled : error ? tokens.colors.error : tokens.colors.input,
+      fontSize: tokens.typography.inputSize,
+      textAlign: finalTextAlign,
+      ...(isTextarea ? {
+        lineHeight,
+        height: textareaHeight,
+        minHeight
+      } : {
+        minHeight: tokens.sizes.controlMinHeight
+      })
+    }, inputStyle];
+    return /*#__PURE__*/React.createElement(TextInput, _extends({
+      ref: inputRef,
+      style: inputStyles,
+      value: value,
+      onChangeText: handleChangeText,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      onPressIn: handlePressIn,
+      editable: !disabled && !readOnly,
+      secureTextEntry: type === 'password',
+      multiline: isTextarea,
+      numberOfLines: isTextarea ? rows : undefined,
+      keyboardType: restInputProps.keyboardType ?? mapKeyboardType(type),
+      placeholderTextColor: resolvedPlaceholderColor,
+      onContentSizeChange: isTextarea ? handleContentSizeChange : undefined
+      // @ts-ignore
+      ,
+      accessibilityDescribedBy: describedBy,
+      clearButtonMode: "never"
+    }, restInputProps));
+  };
+  const renderWordLimit = () => {
+    if (!showWordLimit || maxLength === undefined || maxLength === null) {
+      return null;
+    }
+    const currentCount = (value ?? '').length;
+    const content = isFunction(showWordLimit) ? showWordLimit({
+      currentCount,
+      maxLength
+    }) : `${currentCount}/${maxLength}`;
+    if (content === null || content === false) return null;
+    if (isText(content)) {
+      return /*#__PURE__*/React.createElement(Text, {
+        style: [tokens.layout.wordLimit, {
+          color: tokens.colors.wordLimit,
+          fontSize: tokens.typography.wordLimitSize ?? 12,
+          textAlign: 'right',
+          alignSelf: 'flex-end',
+          marginTop: tokens.spacing.wordLimitMarginTop
+        }]
+      }, content);
+    }
+    return content;
+  };
+  const renderMessage = () => {
+    if (!isRenderable(errorMessage)) return null;
+    if (isText(errorMessage)) {
+      return /*#__PURE__*/React.createElement(Text, {
+        nativeID: errorId,
+        style: [tokens.layout.message, {
+          color: tokens.colors.error,
+          fontSize: tokens.typography.messageSize,
+          textAlign: errorMessageAlign,
+          marginTop: tokens.spacing.messageMarginTop
+        }, errorMessageStyle],
+        accessibilityLiveRegion: "polite"
+      }, errorMessage);
+    }
+    return /*#__PURE__*/React.createElement(View, {
+      nativeID: errorId,
+      style: [tokens.layout.message, {
+        alignSelf: alignMap[errorMessageAlign],
+        marginTop: tokens.spacing.messageMarginTop
+      }],
+      accessibilityLiveRegion: "polite"
+    }, errorMessage);
+  };
+  const renderIntro = () => {
+    if (!isRenderable(resolvedDescription)) return null;
+    if (isText(resolvedDescription)) {
+      return /*#__PURE__*/React.createElement(Text, {
+        nativeID: introId,
+        style: [tokens.layout.message, {
+          color: tokens.colors.intro,
+          fontSize: tokens.typography.introSize,
+          textAlign: controlAlign,
+          marginTop: tokens.spacing.introMarginTop
+        }, introStyle]
+      }, resolvedDescription);
+    }
+    return /*#__PURE__*/React.createElement(View, {
+      nativeID: introId,
+      style: {
+        marginTop: tokens.spacing.introMarginTop
+      }
+    }, resolvedDescription);
+  };
+  const contentWrapperStyle = useMemo(() => [{
+    width: '100%',
+    justifyContent: alignMap[controlAlign]
+  }, contentStyle], [contentStyle, controlAlign]);
+  const renderAffix = node => {
+    if (isText(node)) {
+      return /*#__PURE__*/React.createElement(Text, {
+        style: [tokens.layout.affixText, {
+          color: tokens.colors.input,
+          fontSize: tokens.typography.inputSize
+        }],
+        numberOfLines: 1
+      }, node);
+    }
+    return node;
+  };
+  return /*#__PURE__*/React.createElement(Cell, {
+    title: renderLabel(),
+    icon: renderLeftIcon(),
+    required: required,
+    border: border,
+    center: center,
+    size: size,
+    clickable: clickable,
+    isLink: isLink,
+    arrowDirection: arrowDirection,
+    extra: extra,
+    titleStyle: mergedTitleStyle,
+    style: style,
+    contentStyle: contentWrapperStyle,
+    accessibilityState: error ? {
+      invalid: true
+    } : undefined,
+    accessibilityLabel: isText(label) ? String(label) : undefined,
+    onPress: onClick,
+    android_ripple: androidRipple
+  }, /*#__PURE__*/React.createElement(View, {
+    style: tokens.layout.body
+  }, prefix ? /*#__PURE__*/React.createElement(View, {
+    style: [tokens.layout.prefix, {
+      paddingRight: tokens.spacing.prefixGap
+    }]
+  }, renderAffix(prefix)) : null, /*#__PURE__*/React.createElement(View, {
+    style: [tokens.layout.controlWrapper, {
+      minHeight: tokens.sizes.controlMinHeight
+    }]
+  }, renderControl(), renderClearIcon()), renderRightIcon(), resolvedSuffix ? /*#__PURE__*/React.createElement(View, {
+    style: [tokens.layout.suffix, {
+      paddingLeft: tokens.spacing.suffixGap
+    }]
+  }, renderAffix(resolvedSuffix)) : null), renderWordLimit(), renderMessage(), renderIntro());
+});
+Field.displayName = 'Field';
+export default Field;

package/dist/es/field/index.js

@@ -0,0 +1,6 @@
+import Field from './Field';
+import { CellGroup as FieldGroup } from '../cell';
+export { useFieldTokens } from './tokens';
+export { FieldGroup };
+export default Field;
+export { Field };

package/dist/es/field/tokens.js

@@ -0,0 +1,138 @@
+import { StyleSheet } from 'react-native';
+import { createComponentTokensHook } from '../../design-system';
+const fieldLayout = StyleSheet.create({
+  body: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  controlWrapper: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    minWidth: 0
+  },
+  input: {
+    flex: 1,
+    minWidth: 0,
+    padding: 0,
+    margin: 0,
+    borderWidth: 0,
+    outlineStyle: 'solid',
+    outlineWidth: 0,
+    outlineColor: 'transparent',
+    backgroundColor: 'transparent',
+    includeFontPadding: false,
+    textAlignVertical: 'center'
+  },
+  textarea: {
+    flex: 1,
+    padding: 0,
+    margin: 0,
+    borderWidth: 0,
+    outlineStyle: 'solid',
+    outlineWidth: 0,
+    outlineColor: 'transparent',
+    backgroundColor: 'transparent',
+    textAlignVertical: 'top'
+  },
+  children: {
+    justifyContent: 'center'
+  },
+  leftIcon: {
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  rightIcon: {
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  prefix: {
+    justifyContent: 'center'
+  },
+  suffix: {
+    justifyContent: 'center'
+  },
+  affixText: {
+    includeFontPadding: false
+  },
+  clearIcon: {
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  labelWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flexShrink: 0,
+    flexGrow: 0,
+    minWidth: 0
+  },
+  labelRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    minWidth: 0
+  },
+  tooltip: {
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  message: {},
+  wordLimit: {}
+});
+const createFieldTokens = foundations => {
+  const {
+    palette,
+    spacing,
+    fontSize
+  } = foundations;
+  return {
+    layout: fieldLayout,
+    defaults: {
+      labelWidth: 72,
+      labelAlign: 'left',
+      inputAlign: 'left',
+      controlAlign: 'left',
+      clearTrigger: 'focus',
+      formatTrigger: 'onChange',
+      rows: 2,
+      textareaLineHeight: 20
+    },
+    colors: {
+      label: palette.default[700],
+      input: palette.default[800],
+      placeholder: palette.default[300] ?? '#c8c9cc',
+      error: palette.danger[500],
+      disabled: palette.default[500],
+      intro: palette.default[600],
+      tooltip: palette.default[500],
+      clear: palette.default[500],
+      rightIcon: palette.default[500],
+      wordLimit: palette.default[600] ?? '#646566'
+    },
+    spacing: {
+      labelGap: spacing.none,
+      leftIconGap: spacing.xs,
+      rightIconGap: spacing.sm * 1,
+      prefixGap: spacing.sm * 1,
+      suffixGap: spacing.sm * 1,
+      messageMarginTop: spacing.none,
+      introMarginTop: spacing.none,
+      wordLimitMarginTop: spacing.none
+    },
+    typography: {
+      labelSize: fontSize.sm,
+      inputSize: fontSize.sm,
+      inputLineHeight: 24,
+      placeholderSize: fontSize.sm,
+      messageSize: 12,
+      introSize: 12,
+      wordLimitSize: fontSize.xs
+    },
+    sizes: {
+      icon: 16,
+      clearIcon: 16,
+      textareaMinHeight: 60,
+      controlMinHeight: 24
+    }
+  };
+};
+export const useFieldTokens = createComponentTokensHook('field', createFieldTokens);

package/dist/es/field/utils.js

@@ -0,0 +1,17 @@
+export const alignMap = {
+  left: 'flex-start',
+  center: 'center',
+  right: 'flex-end'
+};
+export const mapKeyboardType = type => {
+  switch (type) {
+    case 'number':
+      return 'decimal-pad';
+    case 'digit':
+      return 'number-pad';
+    case 'tel':
+      return 'phone-pad';
+    default:
+      return undefined;
+  }
+};

package/dist/es/flex/Flex.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Platform, View } from 'react-native';
+import { FlexContext } from './FlexContext';
+import { useFlexTokens } from './tokens';
+const alignMap = {
+  start: 'flex-start',
+  center: 'center',
+  end: 'flex-end',
+  baseline: 'baseline',
+  stretch: 'stretch'
+};
+const justifyMap = {
+  start: 'flex-start',
+  end: 'flex-end',
+  center: 'center',
+  around: 'space-around',
+  between: 'space-between'
+};
+export const Flex = props => {
+  const {
+    tokensOverride,
+    children,
+    direction: directionProp,
+    wrap: wrapProp,
+    gutter: gutterProp,
+    align: alignProp,
+    justify: justifyProp,
+    style,
+    columns: columnsProp
+  } = props;
+  const tokens = useFlexTokens(tokensOverride);
+  const direction = directionProp ?? tokens.defaults.direction;
+  const wrap = wrapProp ?? tokens.defaults.wrap;
+  const gutter = gutterProp ?? tokens.defaults.gutter;
+  const align = alignProp ?? tokens.defaults.align;
+  const justify = justifyProp ?? tokens.defaults.justify;
+  const columns = columnsProp ?? tokens.defaults.columns;
+  const resolvedColumns = Math.max(1, columns);
+  const [hRaw, vRaw] = Array.isArray(gutter) ? gutter : [gutter, 0];
+  const horizontalGap = Math.max(0, hRaw ?? 0);
+  const verticalGap = Math.max(0, vRaw ?? 0);
+  const supportsGap = Platform.OS === 'web';
+  return /*#__PURE__*/React.createElement(FlexContext.Provider, {
+    value: {
+      horizontalGap,
+      verticalGap,
+      columns: resolvedColumns
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    style: [tokens.layout.container, {
+      flexDirection: direction,
+      flexWrap: wrap,
+      alignItems: alignMap[align],
+      justifyContent: justifyMap[justify],
+      marginHorizontal: !supportsGap && horizontalGap ? -horizontalGap / 2 : undefined,
+      marginVertical: !supportsGap && verticalGap ? -verticalGap / 2 : undefined,
+      columnGap: supportsGap ? horizontalGap : undefined,
+      rowGap: supportsGap ? verticalGap : undefined
+    }, style]
+  }, children));
+};

package/dist/es/flex/FlexContext.js

@@ -0,0 +1,6 @@
+import React from 'react';
+export const FlexContext = /*#__PURE__*/React.createContext({
+  horizontalGap: 0,
+  verticalGap: 0,
+  columns: 24
+});