ferns-ui 0.47.10 → 1.0.0-beta.0

package/src/Banner.tsx

@@ -1,13 +1,90 @@
+import debounce from "lodash/debounce";
 import React, {useEffect, useState} from "react";
+import {ActivityIndicator, Pressable, Text as NativeText, View} from "react-native";
 
 import {Box} from "./Box";
-import {Button} from "./Button";
-import {BannerProps, ButtonColor} from "./Common";
+import {BannerProps, IconName, SurfaceTheme} from "./Common";
+import {DismissButton} from "./DismissButton";
 import {Icon} from "./Icon";
-import {IconButton} from "./IconButton";
-import {Text} from "./Text";
+import {useTheme} from "./Theme";
 import {Unifier} from "./Unifier";
 
+type BannerButtonProps = {
+  buttonIconName?: string;
+  buttonOnClick: () => void | Promise<void>;
+  buttonText: string;
+  loading?: boolean;
+};
+
+const BannerButton = ({
+  loading: propsLoading,
+  buttonText,
+  buttonIconName,
+  buttonOnClick,
+}: BannerButtonProps): React.ReactElement | null => {
+  const [loading, setLoading] = useState(propsLoading);
+  const {theme} = useTheme();
+
+  if (!theme) {
+    return null;
+  }
+
+  return (
+    <Pressable
+      accessibilityHint={`Press to perform action ${buttonText}`}
+      accessibilityLabel={buttonText}
+      accessibilityRole="button"
+      style={{
+        alignItems: "center",
+        alignSelf: "stretch",
+        backgroundColor: theme.surface.base,
+        borderRadius: theme.radius.rounded as any,
+        flexDirection: "column",
+        justifyContent: "center",
+        paddingHorizontal: 12,
+        paddingVertical: 4,
+      }}
+      onPress={debounce(
+        async () => {
+          await Unifier.utils.haptic();
+          setLoading(true);
+          try {
+            await buttonOnClick();
+          } catch (error) {
+            setLoading(false);
+            throw error;
+          }
+          setLoading(false);
+        },
+        500,
+        {leading: true}
+      )}
+    >
+      <View style={{flexDirection: "row"}}>
+        <View style={{flexDirection: "row-reverse"}}>
+          {Boolean(buttonIconName) && (
+            <View
+              style={{
+                alignSelf: "center",
+                marginRight: 0,
+                marginLeft: 8,
+              }}
+            >
+              <Icon iconName={buttonIconName as IconName} type="solid" />
+            </View>
+          )}
+          <NativeText style={{fontSize: 12}}>{buttonText}</NativeText>
+        </View>
+        {Boolean(loading) && (
+          <Box marginLeft={2}>
+            <ActivityIndicator size="small" />
+          </Box>
+        )}
+      </View>
+    </Pressable>
+  );
+};
+
 function getKey(id: string): string {
   return `@FernsUI:${id}`;
 }
@@ -17,137 +94,107 @@ export const hideBanner = (id: string): Promise<void> => {
   return Unifier.storage.setItem(getKey(id), "true");
 };
 
-const BannerType = {
-  ACTION: "action",
-  DISMISS: "dismiss",
-  PERMANENT: "permanent", // deprecated in favor of default behavior
-  CUSTOM_BUTTON: "customButton",
-};
+export const Banner = (props: BannerProps): React.ReactElement | null => {
+  const {id, text, status = "info", dismissible = false, hasIcon = false, buttonOnClick} = props;
+
+  const {buttonText, buttonIconName} = props as BannerButtonProps;
+
+  const {theme} = useTheme();
+
+  let bgColor: keyof SurfaceTheme = "secondaryDark";
+
+  if (status === "alert") {
+    bgColor = "error";
+  } else if (status === "warning") {
+    bgColor = "warning";
+  }
+
+  const [show, setShow] = useState(true);
 
-export const Banner = ({
-  id,
-  customButtonProps,
-  text,
-  subtext,
-  color = "secondaryDark",
-  iconName,
-  textColor = "white",
-  negativeXMargin = 0,
-  width,
-  shape,
-  type,
-  onClick,
-}: BannerProps): React.ReactElement | null => {
-  // If the banner is not type dismiss, show it immediately.
-  const {ACTION, DISMISS, CUSTOM_BUTTON} = BannerType;
-  const [show, setShow] = useState(type !== DISMISS);
   // Load seen from async storage.
   useEffect(() => {
-    if (type === DISMISS) {
+    if (dismissible) {
       void Unifier.storage.getItem(getKey(id)).then((isSeen) => {
         console.debug(`[banner] ${getKey(id)} seen? ${isSeen}`);
         setShow(!isSeen);
       });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [id, type]);
+  }, [id]);
 
   const dismiss = async (): Promise<void> => {
-    if (type !== DISMISS) {
+    if (!dismissible) {
       return;
     }
     await hideBanner(id);
     setShow(false);
   };
 
-  const renderButton = (): React.ReactElement | null => {
-    if (type === CUSTOM_BUTTON) {
-      return (
-        <Button
-          {...customButtonProps}
-          color={customButtonProps?.color ?? "primary"}
-          size={customButtonProps?.size ?? "sm"}
-          text={customButtonProps?.text ?? ""}
-          onClick={onClick}
-        />
-      );
-    } else if (type === ACTION) {
-      return (
-        <Box alignItems="center" display="block" justifyContent="center" width={40}>
-          <IconButton
-            accessibilityLabel=""
-            icon="arrow-right"
-            iconColor={textColor as ButtonColor}
-            prefix="fas"
-            onClick={(): void => onClick?.()}
-          />
-        </Box>
-      );
-    } else if (type === DISMISS) {
-      return (
-        <Box alignItems="center" display="block" justifyContent="center" width={40}>
-          <IconButton
-            accessibilityLabel=""
-            icon="times-circle"
-            iconColor={textColor as ButtonColor}
-            prefix="fas"
-            onClick={dismiss}
-          />
-        </Box>
-      );
-    } else {
-      return null;
-    }
-  };
-
   if (!show) {
     return null;
   }
 
-  if ((type === ACTION && !onClick) || (type === CUSTOM_BUTTON && !onClick)) {
-    console.warn("Banners with type action require an onClick property.");
-  }
-
-  const negativeMargin = negativeXMargin * -4;
-
   return (
-    <Box
-      color={color}
-      dangerouslySetInlineStyle={{
-        __style: {
-          marginLeft: negativeMargin,
-          marginRight: negativeMargin,
-        },
+    <View
+      style={{
+        alignItems: "center",
+        backgroundColor: theme.surface[bgColor],
+        height: "auto",
+        width: "100%",
+        margin: "auto",
+        flexDirection: "row",
+        borderRadius: theme.radius.default,
+        minHeight: theme.spacing.xl,
+        padding: theme.spacing.xs,
       }}
-      direction="row"
-      justifyContent="between"
-      paddingX={3}
-      paddingY={2}
-      rounding={shape}
-      shadow
-      width={width || Unifier.utils.dimensions().width || "100%"}
-      onClick={type === DISMISS ? dismiss : undefined}
     >
-      {iconName && (
-        <Box justifyContent="center" width={32}>
-          <Icon color={textColor} name={iconName} size="lg" />
-        </Box>
-      )}
-      <Box alignItems="center" direction="column" flex="shrink" justifyContent="center">
-        <Box paddingY={1}>
-          <Text align="center" color={textColor} weight="bold">
-            {text}
-          </Text>
-        </Box>
-        {subtext && (
-          <Box paddingY={1}>
-            <Text align="center" color={textColor}>
-              {subtext}
-            </Text>
-          </Box>
+      <View
+        style={{
+          flexDirection: "row",
+          flex: 1,
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        {Boolean(hasIcon) && (
+          <View style={{paddingRight: 12, paddingLeft: 10}}>
+            <Icon color="inverted" iconName="triangle-exclamation" />
+          </View>
         )}
-      </Box>
-      {renderButton()}
-    </Box>
+        <NativeText
+          style={{
+            color: theme.text.inverted,
+            fontWeight: "bold",
+            textAlign: "center",
+            flexShrink: 1,
+            flexWrap: "wrap",
+          }}
+        >
+          {text}
+        </NativeText>
+        {Boolean(buttonText && buttonIconName && buttonOnClick) && (
+          <View style={{paddingLeft: 16, paddingRight: 10}}>
+            <BannerButton
+              buttonIconName={buttonIconName}
+              buttonOnClick={buttonOnClick ?? (() => {})}
+              buttonText={buttonText}
+            />
+          </View>
+        )}
+        {Boolean(buttonText && !buttonIconName && buttonOnClick) && (
+          <View style={{paddingLeft: 16, paddingRight: 10}}>
+            <BannerButton buttonOnClick={buttonOnClick ?? (() => {})} buttonText={buttonText} />
+          </View>
+        )}
+      </View>
+      {Boolean(dismissible) && (
+        <DismissButton
+          accessibilityHint="Press to dismiss banner"
+          accessibilityLabel="Dismiss"
+          color="inverted"
+          onClick={dismiss}
+        />
+      )}
+    </View>
   );
 };

package/src/Body.tsx

@@ -1,9 +1,9 @@
-import React, {useContext} from "react";
+import React from "react";
 import {ActivityIndicator, KeyboardAvoidingView} from "react-native";
 
 import {Box} from "./Box";
 import {BodyProps} from "./Common";
-import {ThemeContext} from "./Theme";
+import {useTheme} from "./Theme";
 
 export const Body = ({
   scroll,
@@ -13,13 +13,13 @@ export const Body = ({
   avoidKeyboard,
   children,
 }: BodyProps): React.ReactElement => {
-  const {theme} = useContext(ThemeContext);
+  const {theme} = useTheme();
 
   const renderBody = () => {
     return (
       <Box avoidKeyboard height="100%" scroll={scroll}>
         <Box height={height || "100%"} padding={padding !== undefined ? padding : 5}>
-          {loading === true && <ActivityIndicator color={theme.darkGray} size="large" />}
+          {loading === true && <ActivityIndicator color={theme.text.primary} size="large" />}
           {children}
         </Box>
       </Box>

package/src/BooleanField.tsx

@@ -0,0 +1,122 @@
+import React, {ReactElement, useRef} from "react";
+import {Animated, TouchableWithoutFeedback, View} from "react-native";
+
+import {BooleanFieldProps} from "./Common";
+import {FieldHelperText, FieldTitle} from "./fieldElements";
+import {Text} from "./Text";
+import {useTheme} from "./Theme";
+
+export const BooleanField = ({
+  title,
+  variant,
+  value,
+  onChange,
+  disabled,
+  disabledHelperText,
+  helperText,
+}: BooleanFieldProps): ReactElement => {
+  const {theme} = useTheme();
+  const backgroundColor = useRef(new Animated.Value(value ? 75 : -75)).current;
+  const circleColor = useRef(new Animated.Value(value ? 75 : -75)).current;
+  const circleBorderColor = useRef(new Animated.Value(value ? 75 : -75)).current;
+  const transformSwitch = useRef(new Animated.Value(value ? 15 : -15)).current;
+
+  const animateSwitch = (newValue: boolean) => {
+    Animated.parallel([
+      Animated.spring(transformSwitch, {
+        toValue: newValue ? 15 : -15,
+        useNativeDriver: false,
+      }),
+      Animated.timing(backgroundColor, {
+        toValue: newValue ? 75 : -75,
+        duration: 200,
+        useNativeDriver: false,
+      }),
+      Animated.timing(circleColor, {
+        toValue: newValue ? 75 : -75,
+        duration: 200,
+        useNativeDriver: false,
+      }),
+      Animated.timing(circleBorderColor, {
+        toValue: value ? 75 : -75,
+        duration: 200,
+        useNativeDriver: false,
+      }),
+    ]).start();
+  };
+
+  const handleSwitch = () => {
+    if (disabled) {
+      return;
+    }
+    animateSwitch(!value);
+    onChange(!value);
+  };
+
+  const interpolatedColorAnimation = backgroundColor.interpolate({
+    inputRange: [-75, 75],
+    outputRange: [theme.surface.base, theme.surface.secondaryDark],
+  });
+
+  return (
+    <View
+      style={{
+        flexDirection: "column",
+        alignItems: "flex-start",
+      }}
+    >
+      <View
+        style={{
+          flexDirection: variant === "title" ? "column" : "row",
+          alignItems: variant === "title" ? "flex-start" : "center",
+          justifyContent: variant === "title" ? "flex-start" : "center",
+        }}
+      >
+        {Boolean(title) && <FieldTitle text={title!} />}
+        <TouchableWithoutFeedback accessibilityRole="button" onPress={handleSwitch}>
+          <View style={{flexDirection: "row", alignItems: "center", justifyContent: "center"}}>
+            <Animated.View
+              style={{
+                width: 60,
+                height: 30,
+                borderRadius: 30,
+                backgroundColor: disabled ? theme.surface.disabled : interpolatedColorAnimation,
+                borderColor: disabled ? theme.surface.disabled : theme.surface.secondaryDark,
+                borderWidth: 1,
+                marginHorizontal: variant === "title" ? undefined : 8,
+                marginRight: variant === "title" ? 8 : undefined,
+              }}
+            >
+              <Animated.View
+                style={{
+                  flex: 1,
+                  width: 60,
+                  flexDirection: "row",
+                  justifyContent: "center",
+                  alignItems: "center",
+                  left: transformSwitch,
+                }}
+              >
+                <Animated.View
+                  style={{
+                    borderWidth: 1,
+                    borderColor: disabled ? theme.surface.disabled : theme.surface.secondaryDark,
+                    backgroundColor: theme.surface.base,
+                    width: 30,
+                    height: 30,
+                    borderRadius: 15,
+                    alignItems: "center",
+                    justifyContent: "center",
+                  }}
+                />
+              </Animated.View>
+            </Animated.View>
+            {variant === "title" && <Text size="md">{value ? "Yes" : "No"}</Text>}
+          </View>
+        </TouchableWithoutFeedback>
+      </View>
+      {disabled && disabledHelperText && <FieldHelperText text={disabledHelperText} />}
+      {Boolean(helperText) && <FieldHelperText text={helperText!} />}
+    </View>
+  );
+};