ferns-ui 0.36.4 → 0.37.0

package/src/Box.tsx

@@ -0,0 +1,308 @@
+/* eslint-disable react/prop-types */
+import React, {useImperativeHandle} from "react";
+import {
+  KeyboardAvoidingView,
+  Platform,
+  Pressable,
+  SafeAreaView,
+  ScrollView,
+  View,
+} from "react-native";
+
+import {UnifiedTheme} from ".";
+import {AlignContent, AlignItems, AlignSelf, BoxProps, JustifyContent, SPACING} from "./Common";
+import {mediaQueryLargerThan} from "./MediaQuery";
+import {Unifier} from "./Unifier";
+
+const ALIGN_CONTENT = {
+  start: "flex-start",
+  end: "flex-end",
+  center: "center",
+  between: "space-between",
+  around: "space-around",
+  stretch: "stretch",
+};
+
+const ALIGN_ITEMS = {
+  start: "flex-start",
+  end: "flex-end",
+  center: "center",
+  baseline: "baseline",
+  stretch: "stretch",
+};
+
+const ALIGN_SELF = {
+  auto: "auto",
+  baseline: "baseline",
+  start: "flex-start",
+  end: "flex-end",
+  center: "center",
+  between: "space-between",
+  around: "space-around",
+  stretch: "stretch",
+};
+
+const BORDER_WIDTH = 1;
+
+// eslint-disable-next-line react/display-name
+export const Box = React.forwardRef((props: BoxProps, ref) => {
+  useImperativeHandle(ref, () => ({
+    scrollToEnd: () => {
+      if (scrollRef && scrollRef.current) {
+        // HACK HACK HACK...but it works. Probably need to do some onContentSizeChange or onLayout to
+        // avoid this, but it works well enough.
+        setTimeout(() => {
+          scrollRef && scrollRef.current && (scrollRef.current as any).scrollToEnd();
+        }, 50);
+      }
+    },
+
+    scrollTo: (y: number) => {
+      if (scrollRef && scrollRef.current) {
+        // HACK HACK HACK...but it works. Probably need to do some onContentSizeChange or onLayout to
+        // avoid this, but it works well enough.
+        setTimeout(() => {
+          scrollRef && scrollRef.current && (scrollRef.current as any).scrollTo({y});
+        }, 50);
+      }
+    },
+  }));
+
+  const BOX_STYLE_MAP: {
+    [prop: string]: (
+      value: any,
+      all: {[prop: string]: any}
+    ) => {[style: string]: string | number} | {};
+  } = {
+    alignItems: (value: AlignItems) => ({alignItems: ALIGN_ITEMS[value]}),
+    alignContent: (value: AlignContent) => ({alignContent: ALIGN_CONTENT[value]}),
+    alignSelf: (value: AlignSelf) => ({alignSelf: ALIGN_SELF[value]}),
+    color: (value: keyof UnifiedTheme) => ({backgroundColor: Unifier.theme[value]}),
+    direction: (value: any) => ({flexDirection: value, display: "flex"}),
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    smDirection: (value: any) =>
+      mediaQueryLargerThan("sm") ? {flexDirection: value, display: "flex"} : {},
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    mdDirection: (value: any) =>
+      mediaQueryLargerThan("md") ? {flexDirection: value, display: "flex"} : {},
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    lgDirection: (value: any) =>
+      mediaQueryLargerThan("lg") ? {flexDirection: value, display: "flex"} : {},
+    display: (value: any) => {
+      return value === "flex" ? {flex: undefined} : {flex: 0, flexDirection: "row"};
+    },
+    flex: (value: string) => {
+      if (value === "grow") {
+        return {flexGrow: 1, flexShrink: 1, display: "flex"};
+      } else if (value === "shrink") {
+        return {flexShrink: 1, display: "flex"};
+      } else {
+        return {flex: 0, display: "flex"};
+      }
+    },
+    justifyContent: (value: JustifyContent) => ({justifyContent: ALIGN_CONTENT[value]}),
+    height: (value) => {
+      if (props.border && !isNaN(Number(value))) {
+        return {height: Number(value) + 2 * 2};
+      } else {
+        return {height: value};
+      }
+    },
+    margin: (value) => ({margin: value * SPACING}),
+    marginRight: (value) => ({marginRight: value * SPACING}),
+    marginLeft: (value) => ({marginLeft: value * SPACING}),
+    marginTop: (value) => ({marginTop: value * SPACING}),
+    marginBottom: (value) => ({marginBottom: value * SPACING}),
+    paddingX: (value) => ({paddingLeft: value * SPACING, paddingRight: value * SPACING}),
+    paddingY: (value) => ({paddingTop: value * SPACING, paddingBottom: value * SPACING}),
+    padding: (value) => ({padding: value * SPACING}),
+    zIndex: (value) => ({zIndex: value ? value : undefined}),
+    position: (value) => ({position: value}),
+    top: (top) => ({top: top ? 0 : undefined}),
+    bottom: (bottom) => ({bottom: bottom ? 0 : undefined}),
+    right: (right) => ({right: right ? 0 : undefined}),
+    left: (left) => ({left: left ? 0 : undefined}),
+    rounding: (rounding, allProps) => {
+      if (rounding === "circle") {
+        if (!allProps.height && !allProps.width) {
+          console.warn("Cannot use Box rounding='circle' without height or width.");
+          return {borderRadius: undefined};
+        }
+        return {borderRadius: allProps.height || allProps.width};
+      }
+
+      if (rounding === "pill") {
+        return {borderRadius: 999};
+      }
+
+      if (typeof rounding === "number") {
+        return {borderRadius: rounding * 4};
+      }
+
+      return {borderRadius: undefined};
+    },
+    overflow: (value) => {
+      if (value === "scrollY" || value === "scroll") {
+        return {overflow: "scroll"};
+      }
+      return {overflow: value};
+    },
+    width: (value) => {
+      if (props.border && !isNaN(Number(value))) {
+        return {width: Number(value) + 2 * 2};
+      } else {
+        return {width: value};
+      }
+    },
+    wrap: (value) => ({flexWrap: value ? "wrap" : "nowrap", alignItems: "flex-start"}),
+    shadow: (value) => {
+      if (!value) {
+        return {};
+      }
+      if (Platform.OS === "ios" || Platform.OS === "web") {
+        return {
+          shadowColor: "#999",
+          shadowOffset: {
+            width: 2,
+            height: 2,
+          },
+          shadowRadius: 2,
+          shadowOpacity: 1.0,
+        };
+      } else {
+        return {elevation: 4};
+      }
+    },
+    border: (value: keyof UnifiedTheme) => {
+      if (!value) {
+        return {};
+      }
+      return {borderColor: Unifier.theme[value], borderWidth: BORDER_WIDTH};
+    },
+    borderBottom: (value: keyof UnifiedTheme) => {
+      if (!value) {
+        return {};
+      }
+      return {borderBottomColor: Unifier.theme[value], borderBottomWidth: BORDER_WIDTH};
+    },
+    borderTop: (value: keyof UnifiedTheme) => {
+      if (!value) {
+        return {};
+      }
+      return {borderTopColor: Unifier.theme[value], borderTopWidth: BORDER_WIDTH};
+    },
+    borderRight: (value: keyof UnifiedTheme) => {
+      if (!value) {
+        return {};
+      }
+      return {borderRightColor: Unifier.theme[value], borderRightWidth: BORDER_WIDTH};
+    },
+    borderLeft: (value: keyof UnifiedTheme) => {
+      if (!value) {
+        return {};
+      }
+      return {borderLeftColor: Unifier.theme[value], borderLeftWidth: BORDER_WIDTH};
+    },
+  };
+
+  const scrollRef = props.scrollRef ?? React.createRef();
+
+  const propsToStyle = (): any => {
+    let style: any = {};
+    for (const prop of Object.keys(props)) {
+      const value = (props as any)[prop];
+      if (BOX_STYLE_MAP[prop]) {
+        Object.assign(style, BOX_STYLE_MAP[prop](value, props));
+      } else if (prop !== "children" && prop !== "onClick") {
+        style[prop] = value;
+        // console.warn(`Box: unknown property ${prop}`);
+      }
+    }
+
+    if (props.wrap && props.alignItems) {
+      console.warn("React Native doesn't support wrap and alignItems together.");
+    }
+
+    // Finally, dangerously set overrides.
+    if (props.dangerouslySetInlineStyle) {
+      style = {...style, ...props.dangerouslySetInlineStyle.__style};
+    }
+
+    return style;
+  };
+
+  const onHoverIn = () => {
+    props.onHoverStart?.();
+  };
+
+  const onHoverOut = () => {
+    props.onHoverEnd?.();
+  };
+
+  let box;
+
+  if (props.onClick) {
+    box = (
+      <Pressable
+        style={propsToStyle()}
+        testID={props.testID ? `${props.testID}-clickable` : undefined}
+        onLayout={props.onLayout}
+        onPointerEnter={onHoverIn}
+        onPointerLeave={onHoverOut}
+        onPress={() => {
+          Unifier.utils.haptic();
+          props.onClick!();
+        }}
+      >
+        {props.children}
+      </Pressable>
+    );
+  } else {
+    box = (
+      <View
+        style={propsToStyle()}
+        testID={props.testID}
+        onPointerEnter={onHoverIn}
+        onPointerLeave={onHoverOut}
+      >
+        {props.children}
+      </View>
+    );
+  }
+
+  if (props.scroll) {
+    const {justifyContent, alignContent, alignItems, ...scrollStyle} = propsToStyle();
+
+    box = (
+      <ScrollView
+        ref={props.scrollRef || scrollRef}
+        contentContainerStyle={{justifyContent, alignContent, alignItems}}
+        horizontal={props.overflow === "scrollX"}
+        keyboardShouldPersistTaps="handled"
+        nestedScrollEnabled
+        scrollEventThrottle={50}
+        style={scrollStyle}
+        onScroll={(event) => {
+          if (props.onScroll && event) {
+            props.onScroll(event.nativeEvent.contentOffset.y);
+          }
+        }}
+      >
+        {box}
+      </ScrollView>
+    );
+  }
+
+  if (props.avoidKeyboard) {
+    box = (
+      <KeyboardAvoidingView
+        behavior={Platform.OS === "ios" ? "padding" : "height"}
+        keyboardVerticalOffset={props.keyboardOffset}
+        style={{flex: 1, display: "flex"}}
+      >
+        <SafeAreaView style={{flex: 1, display: "flex"}}>{box}</SafeAreaView>
+      </KeyboardAvoidingView>
+    );
+  }
+  return box;
+});

package/src/Button.tsx

@@ -0,0 +1,219 @@
+import debounce from "lodash/debounce";
+import React, {useState} from "react";
+import {ActivityIndicator, Pressable, View} from "react-native";
+
+import {Box} from "./Box";
+import {ButtonColor, Color, IconName, IconPrefix, TooltipDirection, UnifiedTheme} from "./Common";
+import {Icon} from "./Icon";
+import {Modal} from "./Modal";
+import {Text} from "./Text";
+import {Tooltip} from "./Tooltip";
+import {Unifier} from "./Unifier";
+
+export interface ButtonProps {
+  children?: React.ReactElement;
+  text: string;
+  // TODO make this work for all colors
+  color?: ButtonColor | Color;
+  // default gray
+  disabled?: boolean; // default false
+  inline?: boolean; // default false
+  size?: "sm" | "md" | "lg"; // default md
+  type?: "solid" | "ghost" | "outline"; // default solid
+  loading?: boolean;
+  onClick: any;
+  icon?: IconName;
+  iconPrefix?: IconPrefix;
+  iconColor?: ButtonColor | Color;
+  withConfirmation?: boolean;
+  confirmationText?: string;
+  confirmationHeading?: string;
+  shape?: "rounded" | "pill";
+  testID?: string;
+  tooltip?: {
+    text: string;
+    idealDirection?: TooltipDirection;
+  };
+}
+
+const buttonTextColor: {[buttonColor: string]: "white" | "darkGray"} = {
+  blue: "white",
+  lightGray: "darkGray",
+  red: "white",
+  transparent: "white",
+  white: "darkGray",
+  primary: "white",
+  secondary: "white",
+  accent: "white",
+  tertiary: "white",
+  facebook: "white",
+  twitter: "white",
+  google: "white",
+};
+
+const HEIGHTS = {
+  sm: 36,
+  md: 40,
+  lg: 48,
+};
+
+export function Button({
+  disabled = false,
+  type = "solid",
+  loading: propsLoading,
+  children,
+  text,
+  inline = false,
+  icon,
+  iconPrefix,
+  size = "md",
+  onClick,
+  color = "gray",
+  withConfirmation = false,
+  confirmationText = "Are you sure you want to continue?",
+  confirmationHeading = "Confirm",
+  shape = "rounded",
+  testID,
+  tooltip,
+}: ButtonProps) {
+  const [loading, setLoading] = useState(propsLoading);
+  const [showConfirmation, setShowConfirmation] = useState(false);
+
+  const getBackgroundColor = (backgroundColor: string): string => {
+    if (type === "ghost" || type === "outline") {
+      return "transparent";
+    } else {
+      return Unifier.theme[backgroundColor as keyof UnifiedTheme];
+    }
+  };
+
+  const getTextColor = (textColor: Color): Color => {
+    if (type === "ghost" || type === "outline") {
+      return textColor;
+    } else if (textColor === undefined) {
+      return "darkGray";
+    } else {
+      return buttonTextColor[textColor] || "white";
+    }
+  };
+
+  const getBorderColor = (borderColor: string): string => {
+    if (type === "outline") {
+      return Unifier.theme[getTextColor(borderColor as Color)];
+    } else {
+      return "transparent";
+    }
+  };
+
+  if (color === "gray") {
+    color = "lightGray";
+  }
+
+  const renderConfirmation = () => {
+    return (
+      <Modal
+        heading={confirmationHeading}
+        primaryButtonOnClick={() => {
+          onClick();
+          setShowConfirmation(false);
+        }}
+        primaryButtonText="Confirm"
+        secondaryButtonOnClick={(): void => setShowConfirmation(false)}
+        secondaryButtonText="Cancel"
+        size="sm"
+        visible={showConfirmation}
+        onDismiss={(): void => {
+          setShowConfirmation(false);
+        }}
+      >
+        <Text>{confirmationText}</Text>
+      </Modal>
+    );
+  };
+
+  const renderButton = () => {
+    return (
+      <View>
+        <Pressable
+          disabled={disabled || loading}
+          style={{
+            alignSelf: inline === true ? undefined : "stretch",
+            height: HEIGHTS[size || "md"],
+            backgroundColor: getBackgroundColor(color),
+            // width: inline === true ? undefined : "100%",
+            flexShrink: inline ? 1 : 0,
+            // flexGrow: inline ? 0 : 1,
+            alignItems: "center",
+            justifyContent: "center",
+            borderRadius: shape === "pill" ? 999 : 5,
+            borderColor: getBorderColor(color),
+            borderWidth: type === "outline" ? 2 : 0,
+            opacity: disabled ? 0.4 : 1,
+            flexDirection: "row",
+            paddingHorizontal: 8 * 2,
+          }}
+          testID={testID}
+          onPress={debounce(
+            async () => {
+              Unifier.utils.haptic();
+              setLoading(true);
+              try {
+                if (withConfirmation && !showConfirmation) {
+                  setShowConfirmation(true);
+                } else if (onClick) {
+                  await onClick();
+                }
+              } catch (e) {
+                setLoading(false);
+                throw e;
+              }
+              setLoading(false);
+            },
+            500,
+            {leading: true}
+          )}
+        >
+          {icon !== undefined && (
+            <Box paddingX={2}>
+              <Icon
+                color={getTextColor(color as Color)}
+                name={icon}
+                prefix={iconPrefix || "far"}
+                size={size}
+              />
+            </Box>
+          )}
+          {Boolean(children) && children}
+          {Boolean(text) && (
+            <Text
+              color={getTextColor(color as Color)}
+              font="button"
+              inline={inline}
+              size={size}
+              skipLinking
+              weight="bold"
+            >
+              {text}
+            </Text>
+          )}
+          {Boolean(loading) && (
+            <Box marginLeft={2}>
+              <ActivityIndicator color={getTextColor(color as Color)} size="small" />
+            </Box>
+          )}
+        </Pressable>
+        {Boolean(withConfirmation) && renderConfirmation()}
+      </View>
+    );
+  };
+
+  if (tooltip) {
+    return (
+      <Tooltip idealDirection={tooltip.idealDirection} text={tooltip.text}>
+        {renderButton()}
+      </Tooltip>
+    );
+  } else {
+    return renderButton();
+  }
+}

package/src/Card.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+import {Box} from "./Box";
+import {BoxProps} from "./Common";
+
+export class Card extends React.Component<BoxProps, {}> {
+  render() {
+    return (
+      <Box
+        color={this.props.color || "white"}
+        direction="column"
+        display="flex"
+        padding={this.props.padding || 4}
+        rounding={3}
+        shadow
+        width={this.props.width}
+        {...this.props}
+      >
+        {this.props.children}
+      </Box>
+    );
+  }
+}

package/src/CheckBox.tsx

@@ -0,0 +1,118 @@
+import React from "react";
+
+import {Box} from "./Box";
+import {BoxColor, CheckBoxProps} from "./Common";
+import {Icon} from "./Icon";
+import {Text} from "./Text";
+
+export function CheckBox({
+  color,
+  checked,
+  size,
+  radio,
+  label,
+  labelColor,
+  subLabel,
+  disabled,
+  onChange,
+  onClick,
+  indeterminate,
+}: CheckBoxProps): React.ReactElement {
+  if (checked && indeterminate) {
+    console.error("CheckBox cannot be checked and indeterminate at the same time");
+  }
+
+  const doOnClick = () => {
+    if (disabled) {
+      return;
+    }
+    if (!indeterminate) {
+      onChange({value: !checked});
+    }
+    onClick && onClick();
+  };
+
+  const renderCheckBox = () => {
+    let bgColor: BoxColor;
+    if (disabled) {
+      bgColor = "gray";
+    } else if (checked) {
+      bgColor = color || "darkGray";
+    } else {
+      bgColor = "white";
+    }
+    return (
+      <Box
+        border={color || "darkGray"}
+        color={bgColor}
+        height={size === "sm" ? 16 : 24}
+        rounding={radio ? "circle" : size === "sm" ? 2 : 3}
+        width={size === "sm" ? 16 : 24}
+        onClick={doOnClick}
+      >
+        <Box
+          alignItems="center"
+          direction="column"
+          display="flex"
+          height="100%"
+          justifyContent="center"
+          width="100%"
+        >
+          {checked && (
+            <Icon color="white" name="check" prefix="fas" size={size === "sm" ? "sm" : "md"} />
+          )}
+          {indeterminate && (
+            <Icon
+              color={color || "darkGray"}
+              name="circle"
+              prefix="fas"
+              size={size === "sm" ? "sm" : "md"}
+            />
+          )}
+        </Box>
+      </Box>
+    );
+  };
+
+  return (
+    <Box
+      alignItems="center"
+      direction="row"
+      display="flex"
+      maxHeight={60}
+      paddingY={1}
+      width="100%"
+    >
+      <Box
+        display="flex"
+        justifyContent="center"
+        maxWidth={size === "sm" ? 14 : 20}
+        width={size === "sm" ? 14 : 20}
+      >
+        {renderCheckBox()}
+      </Box>
+      <Box
+        direction="column"
+        display="flex"
+        height="100%"
+        justifyContent="center"
+        marginLeft={4}
+        onClick={doOnClick}
+      >
+        <Text
+          color={labelColor || "darkGray"}
+          numberOfLines={subLabel ? 1 : 2}
+          size={size}
+          weight="bold"
+        >
+          {label}
+        </Text>
+        {Boolean(subLabel) && (
+          <Text color={labelColor || "darkGray"} size="sm" weight="bold">
+            {subLabel!}
+          </Text>
+        )}
+      </Box>
+    </Box>
+  );
+}