ferns-ui 0.2.0

package/src/Banner.tsx

@@ -0,0 +1,124 @@
+import React from "react";
+
+import {Box} from "./Box";
+import {BoxColor, ButtonColor, Rounding, TextColor} from "./Common";
+import {IconButton} from "./IconButton";
+import {Text} from "./Text";
+import {Unifier} from "./Unifier";
+
+// import {faTimesCircle, faArrowRight} from "@fortawesome/free-solid-svg-icons";
+
+export interface BannerProps {
+  id: string;
+  text: string;
+  subtext?: string;
+  color?: BoxColor;
+  textColor?: TextColor;
+  negativeXMargin?: number;
+  bold?: boolean;
+  shape?: Rounding;
+  type?: "dismiss" | "action";
+  onClick?: () => void;
+}
+
+// library.add(faTimesCircle);
+// library.add(faArrowRight);
+
+interface BannerState {
+  show: boolean;
+}
+
+function getKey(id: string) {
+  return `@ReactUnifier:${id}`;
+}
+
+export const hideBanner = (id: string) => {
+  console.debug(`[banner] Hiding ${getKey(id)} `);
+  Unifier.storage.setItem(getKey(id), "true");
+};
+
+export class Banner extends React.Component<BannerProps, BannerState> {
+  state = {show: false};
+
+  async componentDidMount() {
+    const seen = await Unifier.storage.getItem(getKey(this.props.id));
+    console.debug(`[banner] ${getKey(this.props.id)} seen? ${seen}`);
+    this.setState({show: !seen});
+  }
+
+  dismiss = () => {
+    hideBanner(this.props.id);
+    this.setState({show: false});
+  };
+
+  render() {
+    if (!this.state.show) {
+      return null;
+    }
+    const type = this.props.type || "dismiss";
+
+    if (type === "action" && !this.props.onClick) {
+      console.warn("Banners with type action require an onClick property.");
+    }
+    const negativeMargin = (this.props.negativeXMargin || 0) * -4;
+
+    return (
+      <Box
+        color={this.props.color || "secondaryDark"}
+        dangerouslySetInlineStyle={{
+          __style: {
+            marginLeft: negativeMargin,
+            marginRight: negativeMargin,
+          },
+        }}
+        direction="row"
+        justifyContent="between"
+        marginBottom={3}
+        marginTop={3}
+        paddingX={3}
+        paddingY={2}
+        rounding={this.props.shape}
+        shadow
+        width={Unifier.utils.dimensions().width || "100%"}
+        onClick={this.dismiss}
+      >
+        <Box alignItems="center" direction="column" flex="shrink" justifyContent="center">
+          <Box paddingY={1}>
+            <Text align="center" color={this.props.textColor || "white"} weight="bold">
+              {this.props.text}
+            </Text>
+          </Box>
+          {this.props.subtext && (
+            <Box paddingY={1}>
+              <Text align="center" color={this.props.textColor || "white"}>
+                {this.props.subtext}
+              </Text>
+            </Box>
+          )}
+        </Box>
+        <Box alignItems="center" display="block" justifyContent="center" width={40}>
+          {type === "dismiss" && (
+            <IconButton
+              accessibilityLabel=""
+              icon="times-circle"
+              // size="lg"
+              iconColor={(this.props.textColor || "white") as ButtonColor}
+              prefix="fas"
+              onClick={() => this.dismiss()}
+            />
+          )}
+          {type === "action" && (
+            <IconButton
+              accessibilityLabel=""
+              icon="arrow-right"
+              // size="lg"
+              iconColor={(this.props.textColor || "white") as ButtonColor}
+              prefix="fas"
+              onClick={() => this.props.onClick && this.props.onClick()}
+            />
+          )}
+        </Box>
+      </Box>
+    );
+  }
+}

package/src/BlurBox.native.tsx

@@ -0,0 +1,40 @@
+import {BlurView} from "@react-native-community/blur";
+import React from "react";
+import {Platform, View} from "react-native";
+
+import {Box} from "./Box";
+import {BlurBoxProps} from "./Common";
+
+export class BlurBox extends React.Component<BlurBoxProps, {}> {
+  renderBlur(children: any) {
+    if (Platform.OS === "ios") {
+      return (
+        <BlurView blurType={this.props.blurType || "regular"} style={{borderRadius: 12}}>
+          {children}
+        </BlurView>
+      );
+    } else {
+      return (
+        <View style={{backgroundColor: "rgba(82, 82, 82, 0.7)", borderRadius: 10}}>{children}</View>
+      );
+    }
+  }
+
+  render() {
+    const {marginBottom, marginTop, margin, ...props} = this.props;
+    return (
+      <Box
+        margin={margin || 0}
+        marginBottom={marginBottom || 4}
+        marginTop={marginTop || 0}
+        width="100%"
+      >
+        {this.renderBlur(
+          <Box paddingX={4} {...props}>
+            {this.props.children}
+          </Box>
+        )}
+      </Box>
+    );
+  }
+}

package/src/BlurBox.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+
+import {Box} from "./Box";
+import {BlurBoxProps} from "./Common";
+import {mergeInlineStyles} from "./Utilities";
+
+export class BlurBox extends React.Component<BlurBoxProps, {}> {
+  render() {
+    const {marginBottom, marginTop, margin, ...props} = this.props;
+
+    return (
+      <Box
+        {...this.props}
+        dangerouslySetInlineStyle={mergeInlineStyles(this.props.dangerouslySetInlineStyle, {
+          // filter: "blur(4px)",
+          backdropFilter: "blur(4px)",
+          backgroundColor: "#111",
+          opacity: 0.8,
+          borderRadius: 12,
+        })}
+        margin={margin || 0}
+        marginBottom={marginBottom || 4}
+        marginTop={marginTop || 0}
+      >
+        <Box paddingX={4} {...props}>
+          {this.props.children}
+        </Box>
+      </Box>
+    );
+  }
+}

package/src/Body.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import {ActivityIndicator, KeyboardAvoidingView} from "react-native";
+
+import {Box} from "./Box";
+import {BodyProps} from "./Common";
+import {Unifier} from "./Unifier";
+
+export class Body extends React.Component<BodyProps, {}> {
+  renderBody() {
+    return (
+      <Box avoidKeyboard height="100%" scroll={this.props.scroll}>
+        <Box
+          height={this.props.height || "100%"}
+          padding={this.props.padding !== undefined ? this.props.padding : 5}
+        >
+          {this.props.loading === true && (
+            <ActivityIndicator color={Unifier.theme.darkGray} size="large" />
+          )}
+          {this.props.children}
+        </Box>
+      </Box>
+    );
+  }
+
+  render() {
+    if (this.props.avoidKeyboard === false) {
+      return this.renderBody();
+    } else {
+      return <KeyboardAvoidingView behavior="position">{this.renderBody()}</KeyboardAvoidingView>;
+    }
+  }
+}

package/src/Box.tsx

@@ -0,0 +1,277 @@
+import React from "react";
+import {
+  KeyboardAvoidingView,
+  Platform,
+  SafeAreaView,
+  ScrollView,
+  TouchableOpacity,
+  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",
+};
+
+export class Box extends React.Component<BoxProps, {}> {
+  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, all: any) =>
+      mediaQueryLargerThan("sm") ? {flexDirection: value, display: "flex"} : {},
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    mdDirection: (value: any, all: any) =>
+      mediaQueryLargerThan("md") ? {flexDirection: value, display: "flex"} : {},
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    lgDirection: (value: any, all: 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 (this.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}),
+    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"};
+      } else if (value === "scrollX") {
+        return {overflow: "scrollX"};
+      }
+      return {};
+    },
+    width: (value) => {
+      if (this.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: 2};
+    },
+  };
+
+  scrollRef = React.createRef();
+
+  constructor(props: BoxProps) {
+    super(props);
+    if (props.scrollRef) {
+      this.scrollRef = props.scrollRef;
+    }
+  }
+
+  public scrollToEnd = () => {
+    if (this.scrollRef && this.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(() => {
+        this.scrollRef && this.scrollRef.current && (this.scrollRef.current as any).scrollToEnd();
+      }, 50);
+    }
+  };
+
+  public scrollTo = (y: number) => {
+    if (this.scrollRef && this.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(() => {
+        this.scrollRef && this.scrollRef.current && (this.scrollRef.current as any).scrollTo({y});
+      }, 50);
+    }
+  };
+
+  propsToStyle(): any {
+    let style: any = {};
+    for (const prop of Object.keys(this.props)) {
+      const value = (this.props as any)[prop];
+      if (this.BOX_STYLE_MAP[prop]) {
+        Object.assign(style, this.BOX_STYLE_MAP[prop](value, this.props));
+      } else if (prop !== "children" && prop !== "onClick") {
+        style[prop] = value;
+        // console.warn(`Box: unknown property ${prop}`);
+      }
+    }
+
+    if (this.props.wrap && this.props.alignItems) {
+      console.warn("React Native doesn't support wrap and alignItems together.");
+    }
+
+    // Finally, dangerously set overrides.
+    if (this.props.dangerouslySetInlineStyle) {
+      style = {...style, ...this.props.dangerouslySetInlineStyle.__style};
+    }
+
+    return style;
+  }
+
+  renderBox() {
+    return (
+      <View style={!this.props.scroll && !this.props.overflow && this.propsToStyle()}>
+        {this.props.children}
+      </View>
+    );
+  }
+
+  render() {
+    let box;
+
+    if (this.props.onClick) {
+      box = (
+        <TouchableOpacity
+          style={this.propsToStyle()}
+          // TODO: refactor this better..
+          onLayout={this.props.onLayout}
+          onPress={() => {
+            Unifier.utils.haptic();
+            this.props.onClick();
+          }}
+        >
+          {this.props.children}
+          {/* <View pointerEvents="none">{box}</View> */}
+        </TouchableOpacity>
+      );
+    } else {
+      box = <View style={this.propsToStyle()}>{this.props.children}</View>;
+    }
+
+    if (this.props.scroll) {
+      const {justifyContent, alignContent, alignItems, ...scrollStyle} = this.propsToStyle();
+
+      box = (
+        <ScrollView
+          ref={this.props.scrollRef || this.scrollRef}
+          contentContainerStyle={{justifyContent, alignContent, alignItems}}
+          horizontal={this.props.overflow === "scrollX"}
+          keyboardShouldPersistTaps="handled"
+          scrollEventThrottle={50}
+          style={scrollStyle}
+          onScroll={(event) => {
+            if (this.props.onScroll && event) {
+              this.props.onScroll(event.nativeEvent.contentOffset.y);
+            }
+          }}
+        >
+          {box}
+        </ScrollView>
+      );
+    }
+
+    if (this.props.avoidKeyboard) {
+      box = (
+        <KeyboardAvoidingView
+          behavior={Platform.OS === "ios" ? "padding" : "height"}
+          keyboardVerticalOffset={this.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,139 @@
+import debounce from "lodash/debounce";
+import React from "react";
+import {ActivityIndicator, TouchableOpacity} from "react-native";
+
+import {UnifiedTheme} from ".";
+import {Box} from "./Box";
+import {ButtonProps, Color, iconSizeToNumber} from "./Common";
+import {Icon} from "./Icon";
+// import {Icon} from "./Icon";
+import {Text} from "./Text";
+import {Unifier} from "./Unifier";
+
+interface ButtonState {
+  loading: boolean;
+}
+
+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",
+};
+
+export class Button extends React.Component<ButtonProps, ButtonState> {
+  state = {loading: false};
+
+  HEIGHTS = {
+    sm: 36,
+    md: 40,
+    lg: 48,
+  };
+
+  getBackgroundColor(color: string) {
+    if (this.props.type === "ghost" || this.props.type === "outline") {
+      return "transparent";
+    } else {
+      return Unifier.theme[color as keyof UnifiedTheme];
+    }
+  }
+
+  getTextColor(color: Color): Color {
+    if (this.props.type === "ghost" || this.props.type === "outline") {
+      return color;
+    } else if (color === undefined) {
+      return "darkGray";
+    } else {
+      return buttonTextColor[color] || "white";
+    }
+  }
+
+  getBorderColor(color: string) {
+    if (this.props.type === "outline") {
+      return Unifier.theme[this.getTextColor(color as Color)];
+    } else {
+      return "transparent";
+    }
+  }
+
+  render() {
+    let color = this.props.color || "lightGray";
+    if (color === "gray") {
+      color = "lightGray";
+    }
+    return (
+      <TouchableOpacity
+        disabled={this.props.disabled || this.props.loading}
+        style={{
+          alignSelf: this.props.inline === true ? undefined : "stretch",
+          height: this.HEIGHTS[this.props.size || "md"],
+          backgroundColor: this.getBackgroundColor(color),
+          // width: this.props.inline === true ? undefined : "100%",
+          flexShrink: this.props.inline ? 1 : 0,
+          // flexGrow: this.props.inline ? 0 : 1,
+          alignItems: "center",
+          justifyContent: "center",
+          borderRadius: 5,
+          borderColor: this.getBorderColor(color),
+          borderWidth: this.props.type === "outline" ? 2 : 0,
+          opacity: this.props.disabled ? 0.4 : 1,
+          flexDirection: "row",
+          paddingHorizontal: 4 * 2,
+        }}
+        onPress={debounce(
+          async () => {
+            Unifier.utils.haptic();
+            this.setState({loading: true});
+            try {
+              if (this.props.onClick) {
+                await this.props.onClick();
+              }
+            } catch (e) {
+              this.setState({loading: false});
+              throw e;
+            }
+            this.setState({loading: false});
+          },
+          500,
+          {leading: true}
+        )}
+      >
+        {this.props.icon !== undefined && (
+          <Box paddingX={2}>
+            <Icon
+              color={this.getTextColor(this.props.color as Color)}
+              name={this.props.icon}
+              prefix={this.props.iconPrefix || "far"}
+              size={iconSizeToNumber(this.props.size)}
+            />
+          </Box>
+        )}
+        {Boolean(this.props.children) && this.props.children}
+        {Boolean(this.props.text) && (
+          <Text
+            color={this.getTextColor(color as Color)}
+            inline={this.props.inline}
+            size={this.props.size}
+            skipLinking
+            weight="bold"
+          >
+            {this.props.text}
+          </Text>
+        )}
+        {(this.state.loading || this.props.loading) && (
+          <Box marginLeft={2}>
+            <ActivityIndicator color={this.getTextColor(color as Color)} size="small" />
+          </Box>
+        )}
+      </TouchableOpacity>
+    );
+  }
+}

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>
+    );
+  }
+}