ferns-ui 0.47.10 → 1.0.0

package/src/TapToEdit.tsx

@@ -1,48 +1,36 @@
 import React, {ReactElement, useEffect, useState} from "react";
-import {Linking} from "react-native";
+import {Linking, View} from "react-native";
 
 import {Box} from "./Box";
 import {Button} from "./Button";
-import {TapToEditProps} from "./Common";
+import {AddressInterface, FieldProps, TapToEditProps} from "./Common";
 import {Field} from "./Field";
 import {Icon} from "./Icon";
 // import {useOpenAPISpec} from "./OpenAPIContext";
 import {Text} from "./Text";
-import {Tooltip} from "./Tooltip";
 
 const TapToEditTitle = ({
   title,
-  description,
-  showDescriptionAsTooltip,
-  onlyShowDescriptionWhileEditing,
+  helperText,
+  onlyShowHelperTextWhileEditing,
 }: {
-  onlyShowDescriptionWhileEditing?: boolean;
-  showDescriptionAsTooltip?: boolean;
+  onlyShowHelperTextWhileEditing?: boolean;
   title: string;
-  description?: string;
+  helperText?: string;
 }): ReactElement => {
-  const Title = (
-    <Box flex="grow" justifyContent="center">
-      <Text weight="bold">{title}:</Text>
-      {Boolean(description && !showDescriptionAsTooltip && !onlyShowDescriptionWhileEditing) && (
-        <Text color="gray" size="sm">
-          {description}
+  return (
+    <View style={{flex: 1, justifyContent: "center"}}>
+      <Text bold>{title}</Text>
+      {Boolean(helperText && !onlyShowHelperTextWhileEditing) && (
+        <Text color="secondaryLight" size="sm">
+          {helperText}
         </Text>
       )}
-    </Box>
+    </View>
   );
-  if (showDescriptionAsTooltip) {
-    return (
-      <Tooltip idealDirection="top" text={description}>
-        {Title}
-      </Tooltip>
-    );
-  } else {
-    return Title;
-  }
 };
 
-export function formatAddress(address: any, asString = false): string {
+export function formatAddress(address: AddressInterface, asString = false): string {
   let city = "";
   if (address?.city) {
     city = address?.state || address.zipcode ? `${address.city}, ` : `${address.city}`;
@@ -62,7 +50,7 @@ export function formatAddress(address: any, asString = false): string {
   const addressLineOne = address?.address1 ?? "";
   const addressLineTwo = address?.address2 ?? "";
   const addressLineThree = `${city}${state}${zip}`;
-  const addressLineFour = `${countyName}${address?.countyCode ? ` [${countyCode}]` : ""}`;
+  const addressLineFour = `${countyName}${address?.countyCode ? ` (${countyCode})` : ""}`;
 
   if (!asString) {
     // Only add new lines if lines before and after are not empty to avoid awkward whitespace
@@ -83,25 +71,21 @@ export function formatAddress(address: any, asString = false): string {
 export const TapToEdit = ({
   value,
   setValue,
-  placeholder,
   title,
   onSave,
   editable = true,
   isEditing = false,
-  rowBoxProps,
   transform,
-  fieldComponent,
   withConfirmation = false,
   confirmationText = "Are you sure you want to save your changes?",
-  confirmationHeading = "Confirm",
-  description: propsDescription,
-  showDescriptionAsTooltip = false,
-  onlyShowDescriptionWhileEditing = true,
+  confirmationTitle = "Confirm",
+  helperText: propsHelperText,
+  onlyShowHelperTextWhileEditing = true,
   ...fieldProps
 }: TapToEditProps): ReactElement => {
   const [editing, setEditing] = useState(false);
   const [initialValue, setInitialValue] = useState();
-  const description: string | undefined = propsDescription;
+  const helperText: string | undefined = propsHelperText;
   // setInitialValue is called after initial render to handle the case where the value is updated
   useEffect(() => {
     setInitialValue(value);
@@ -115,43 +99,25 @@ export const TapToEdit = ({
 
   if (editable && (editing || isEditing)) {
     return (
-      <Box direction="column">
-        {fieldComponent ? (
-          fieldComponent(setValue as any)
-        ) : (
+      <View style={{flexDirection: "column", width: "100%"}}>
+        <View style={{flex: 1, justifyContent: "center"}}>
+          <Text bold>{title}</Text>
+        </View>
+        <View style={{gap: 16}}>
           <Field
-            helperText={description}
-            label={title}
-            placeholder={placeholder}
+            grow={fieldProps?.type === "textarea" ? fieldProps.grow ?? true : undefined}
+            helperText={helperText}
+            row={fieldProps?.type === "textarea" ? 5 : undefined}
+            type={(fieldProps?.type ?? "text") as NonNullable<FieldProps["type"]>}
             value={value}
-            onChange={setValue}
-            {...fieldProps}
+            onChange={setValue ?? (() => {})}
+            {...(fieldProps as any)}
           />
-        )}
-        {editing && !isEditing && (
-          <Box direction="row">
-            <Button
-              color="blue"
-              confirmationHeading={confirmationHeading}
-              confirmationText={confirmationText}
-              inline
-              text="Save"
-              withConfirmation={withConfirmation}
-              onClick={async (): Promise<void> => {
-                if (!onSave) {
-                  console.error("No onSave provided for editable TapToEdit");
-                } else {
-                  setInitialValue(value);
-                  await onSave(value);
-                }
-                setEditing(false);
-              }}
-            />
-            <Box marginLeft={2}>
+          {editing && !isEditing && (
+            <View style={{flexDirection: "row", justifyContent: "flex-end", gap: 16}}>
               <Button
-                color="red"
-                inline
                 text="Cancel"
+                variant="muted"
                 onClick={(): void => {
                   if (setValue) {
                     setValue(initialValue);
@@ -159,10 +125,27 @@ export const TapToEdit = ({
                   setEditing(false);
                 }}
               />
-            </Box>
-          </Box>
-        )}
-      </Box>
+              <View style={{marginLeft: 8}}>
+                <Button
+                  confirmationText={confirmationText}
+                  modalTitle={confirmationTitle}
+                  text="Save"
+                  withConfirmation={withConfirmation}
+                  onClick={async (): Promise<void> => {
+                    if (!onSave) {
+                      console.error("No onSave provided for editable TapToEdit");
+                    } else {
+                      setInitialValue(value);
+                      await onSave(value);
+                    }
+                    setEditing(false);
+                  }}
+                />
+              </View>
+            </View>
+          )}
+        </View>
+      </View>
     );
   } else {
     let displayValue = value;
@@ -173,18 +156,19 @@ export const TapToEdit = ({
       // If no transform, try and display the value reasonably.
       if (fieldProps?.type === "boolean") {
         displayValue = value ? "Yes" : "No";
-      } else if (fieldProps?.type === "percent") {
-        // Prevent floating point errors from showing up by using parseFloat and precision.
-        // Pass through parseFloat again to trim off insignificant zeroes.
-        displayValue = `${parseFloat(parseFloat(String(value * 100)).toPrecision(7))}%`;
-      } else if (fieldProps?.type === "currency") {
-        // TODO: support currencies other than USD in Field and related components.
-        const formatter = new Intl.NumberFormat("en-US", {
-          style: "currency",
-          currency: "USD",
-          minimumFractionDigits: 2, // (this suffices for whole numbers, but will print 2500.10 as $2,500.1)
-        });
-        displayValue = formatter.format(value);
+        // TODO: put transform back in after field types are updated
+        // } else if (fieldProps?.type === "percent") {
+        //   // Prevent floating point errors from showing up by using parseFloat and precision.
+        //   // Pass through parseFloat again to trim off insignificant zeroes.
+        //   displayValue = `${parseFloat(parseFloat(String(value * 100)).toPrecision(7))}%`;
+        // } else if (fieldProps?.type === "currency") {
+        //   // TODO: support currencies other than USD in Field and related components.
+        //   const formatter = new Intl.NumberFormat("en-US", {
+        //     style: "currency",
+        //     currency: "USD",
+        //     minimumFractionDigits: 2, // (this suffices for whole numbers, but will print 2500.10 as $2,500.1)
+        //   });
+        //   displayValue = formatter.format(value);
       } else if (fieldProps?.type === "multiselect") {
         // ???
         displayValue = value.join(", ");
@@ -196,7 +180,7 @@ export const TapToEdit = ({
         } catch (error) {
           // Don't print an error message for empty values.
           if (value) {
-            console.debug(`Invalid URL: ${value}`);
+            console.debug(`Invalid URL: $value`);
           }
           displayValue = value;
         }
@@ -221,45 +205,74 @@ export const TapToEdit = ({
     // For textarea to display correctly, we place the title on its own line, then the text
     // on the next line. This is because the textarea will take up the full width of the row.
     return (
-      <Box
-        alignItems={fieldProps?.type === "textarea" ? "start" : "center"}
-        direction={fieldProps?.type === "textarea" ? "column" : "row"}
-        justifyContent="between"
-        paddingX={3}
-        paddingY={2}
-        width="100%"
-        {...rowBoxProps}
+      <View
+        style={{
+          alignItems: fieldProps?.type === "textarea" ? "flex-start" : "center",
+          flexDirection: fieldProps?.type === "textarea" ? "column" : "row",
+          justifyContent: "space-between",
+          width: "100%",
+        }}
       >
-        <Box direction="row" width="100%">
+        <View style={{flexDirection: "row", width: "100%", gap: 16}}>
           <TapToEditTitle
-            description={description}
-            onlyShowDescriptionWhileEditing={onlyShowDescriptionWhileEditing}
-            showDescriptionAsTooltip={showDescriptionAsTooltip}
+            helperText={helperText}
+            onlyShowHelperTextWhileEditing={onlyShowHelperTextWhileEditing}
             title={title}
           />
-          <Box direction="row" flex="grow" justifyContent="end" marginLeft={2}>
-            <Box justifyContent="start" onClick={isClickable ? openLink : undefined}>
+          <View
+            style={{
+              flexDirection: "row",
+              flex: 1,
+              justifyContent: "flex-end",
+            }}
+          >
+            <Box
+              accessibilityHint=""
+              accessibilityLabel="Link"
+              justifyContent="start"
+              onClick={isClickable ? openLink : undefined}
+            >
               {Boolean(fieldProps?.type !== "textarea") && (
                 <Text align="right" underline={isClickable}>
                   {displayValue}
                 </Text>
               )}
             </Box>
-            {editable && (
-              <Box marginLeft={2} width={16} onClick={(): void => setEditing(true)}>
-                <Icon color="darkGray" name="edit" prefix="far" size="md" />
+            {editable && fieldProps?.type !== "textarea" && (
+              <Box
+                accessibilityHint=""
+                accessibilityLabel="Edit"
+                marginLeft={2}
+                width={16}
+                onClick={(): void => setEditing(true)}
+              >
+                <Icon iconName="pencil" size="md" />
               </Box>
             )}
-          </Box>
-        </Box>
+          </View>
+        </View>
         {fieldProps?.type === "textarea" && (
-          <Box marginTop={2} paddingY={2} width="100%">
-            <Text align="left" underline={isClickable}>
-              {displayValue}
-            </Text>
-          </Box>
+          <>
+            <View style={{marginTop: 8, paddingVertical: 8, width: "100%"}}>
+              <Text align="left" underline={isClickable}>
+                {displayValue}
+              </Text>
+            </View>
+            {editable && (
+              <Box
+                accessibilityHint=""
+                accessibilityLabel="Edit"
+                alignSelf="end"
+                marginLeft={2}
+                width={16}
+                onClick={(): void => setEditing(true)}
+              >
+                <Icon color="primary" iconName="pencil" size="md" />
+              </Box>
+            )}
+          </>
         )}
-      </Box>
+      </View>
     );
   }
 };

package/src/Text.tsx

@@ -1,108 +1,118 @@
-import React, {useContext} from "react";
-import {Text as NativeText, TextStyle} from "react-native";
+import {
+  Nunito_400Regular,
+  Nunito_400Regular_Italic,
+  Nunito_500Medium,
+  Nunito_500Medium_Italic,
+  Nunito_700Bold,
+  Nunito_700Bold_Italic,
+  useFonts,
+} from "@expo-google-fonts/nunito";
+import React from "react";
+import {Platform, Text as NativeText, TextStyle} from "react-native";
 
 import {TextProps} from "./Common";
 import {Hyperlink} from "./Hyperlink";
-import {ThemeContext} from "./Theme";
+import {useTheme} from "./Theme";
 
-const fontSizes = {
-  xs: 10,
-  sm: 12,
-  md: 14,
-  lg: 16,
+const fontSizeAndWeightWeb = {
+  sm: {size: 12, weight: "regular"},
+  md: {size: 16, weight: "regular"},
+  lg: {size: 18, weight: "medium"},
+  xl: {size: 20, weight: "medium"},
 };
 
+const fontSizeAndWeighMobile = {
+  sm: {size: 10, weight: "regular"},
+  md: {size: 14, weight: "regular"},
+  lg: {size: 16, weight: "medium"},
+  xl: {size: 18, weight: "medium"},
+};
+
+const fontSizes = Platform.OS === "web" ? fontSizeAndWeightWeb : fontSizeAndWeighMobile;
+
 export const Text = ({
   align = "left",
+  bold,
   children,
   color,
-  inline = false,
   italic = false,
-  overflow,
   size = "md",
   truncate = false,
-  font,
-  onPress,
   underline,
   numberOfLines,
   skipLinking,
   testID,
-  weight = "normal",
 }: TextProps): React.ReactElement => {
-  const {theme} = useContext(ThemeContext);
+  const {theme} = useTheme();
 
-  function propsToStyle(): any {
-    const style: TextStyle = {};
-    if (overflow) {
-      console.warn(
-        "Text overflow is deprecated. Use `truncate` to cut off the text and add ellipse, otherwise breakWord is the default."
-      );
-    }
-    let computedFont = "primary";
-    if (font === "primary" || !font) {
-      if (weight === "bold") {
-        computedFont = "primaryBoldFont";
-      } else {
-        computedFont = "primaryFont";
-      }
-    } else if (font === "secondary") {
-      if (weight === "bold") {
-        computedFont = "secondaryBoldFont";
-      } else {
-        computedFont = "secondaryFont";
-      }
-    } else if (font === "button") {
-      computedFont = "buttonFont";
-    } else if (font === "title") {
-      computedFont = "titleFont";
-    } else if (font === "accent") {
-      if (weight === "bold") {
-        computedFont = "accentBoldFont";
-      } else {
-        computedFont = "accentFont";
-      }
-    }
-    if (weight === "bold") {
-      style.fontWeight = "bold";
-    }
+  // TODO: make fonts part of theme.
+  const [fontsLoaded] = useFonts({
+    "text-bold": Nunito_700Bold,
+    "text-bold-italic": Nunito_700Bold_Italic,
+    "text-medium": Nunito_500Medium,
+    "text-medium-italic": Nunito_500Medium_Italic,
+    text: Nunito_400Regular,
+    "text-regular": Nunito_400Regular,
+    "text-regular-italic": Nunito_400Regular_Italic,
+  });
 
-    style.fontFamily = theme[computedFont as keyof typeof theme];
+  // TODO: How should we handle unloaded fonts.
+  if (!fontsLoaded) {
+    // eslint-disable-next-line react-native/no-raw-text
+    return <NativeText />;
+  }
 
-    style.fontSize = fontSizes[size || "md"];
-    if (align) {
-      style.textAlign = align;
-    }
-    if (color) {
-      style.color = theme[color];
-    } else {
-      style.color = theme.darkGray;
-    }
+  const style: TextStyle = {};
 
-    if (italic) {
-      style.fontStyle = "italic";
+  if (size === "sm" || size === "md") {
+    if (bold && italic) {
+      style.fontFamily = "text-bold-italic";
+    } else if (italic) {
+      style.fontFamily = "text-regular-italic";
+    } else if (bold) {
+      style.fontFamily = "text-bold";
+    } else {
+      style.fontFamily = "text-regular";
     }
-    if (underline) {
-      style.textDecorationLine = "underline";
+  } else {
+    if (bold && italic) {
+      style.fontFamily = "text-bold-italic";
+    } else if (italic) {
+      style.fontFamily = "text-medium-italic";
+    } else if (bold) {
+      style.fontFamily = "text-bold";
+    } else {
+      style.fontFamily = "text-medium";
     }
-    // TODO: might be useful for wrapping/truncating
-    // if (numberOfLines !== 1 && !inline) {
-    //   style.flexWrap = "wrap";
-    // }
+  }
 
-    return style;
+  style.fontSize = fontSizes[size].size;
+  if (align) {
+    style.textAlign = align;
+  }
+  if (color) {
+    style.color = theme.text[color];
+  } else {
+    style.color = theme.text.primary;
   }
 
+  if (italic) {
+    style.fontStyle = "italic";
+  }
+  if (underline) {
+    style.textDecorationLine = "underline";
+  }
   let lines = 0;
   if (numberOfLines && truncate && numberOfLines > 1) {
     console.error(`Cannot truncate Text and have ${numberOfLines} lines`);
   }
   if (numberOfLines) {
     lines = numberOfLines;
-  } else if (inline || truncate) {
+  } else if (truncate) {
     lines = 1;
   }
   const inner = (
-    <NativeText numberOfLines={lines} style={propsToStyle()} testID={testID} onPress={onPress}>
+    <NativeText numberOfLines={lines} style={style} testID={testID}>
       {children}
     </NativeText>
   );

package/src/TextArea.tsx

@@ -3,6 +3,6 @@ import React from "react";
 import {TextAreaProps} from "./Common";
 import {TextField} from "./TextField";
 
-export const TextArea = ({height, ...rest}: TextAreaProps): React.ReactElement => {
-  return <TextField {...rest} height={height ?? 100} multiline />;
+export const TextArea = (props: TextAreaProps): React.ReactElement => {
+  return <TextField {...props} multiline type="text" />;
 };