ferns-ui 0.47.9 → 1.0.0-beta.0

package/src/TapToEdit.tsx

@@ -1,9 +1,9 @@
-import React, {ReactElement, useState} from "react";
+import React, {ReactElement, useEffect, useState} from "react";
 import {Linking} from "react-native";
 
 import {Box} from "./Box";
 import {Button} from "./Button";
-import {TapToEditProps} from "./Common";
+import {AddressInterface, BoxProps, FieldProps, TapToEditProps} from "./Common";
 import {Field} from "./Field";
 import {Icon} from "./Icon";
 // import {useOpenAPISpec} from "./OpenAPIContext";
@@ -23,9 +23,9 @@ const TapToEditTitle = ({
 }): ReactElement => {
   const Title = (
     <Box flex="grow" justifyContent="center">
-      <Text weight="bold">{title}:</Text>
+      <Text bold>{title}:</Text>
       {Boolean(description && !showDescriptionAsTooltip && !onlyShowDescriptionWhileEditing) && (
-        <Text color="gray" size="sm">
+        <Text color="secondaryLight" size="sm">
           {description}
         </Text>
       )}
@@ -33,7 +33,7 @@ const TapToEditTitle = ({
   );
   if (showDescriptionAsTooltip) {
     return (
-      <Tooltip idealDirection="top" text={description}>
+      <Tooltip idealPosition="top" text={description}>
         {Title}
       </Tooltip>
     );
@@ -42,7 +42,7 @@ const TapToEditTitle = ({
   }
 };
 
-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 +62,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,7 +83,6 @@ export function formatAddress(address: any, asString = false): string {
 export const TapToEdit = ({
   value,
   setValue,
-  placeholder,
   title,
   onSave,
   editable = true,
@@ -100,8 +99,14 @@ export const TapToEdit = ({
   ...fieldProps
 }: TapToEditProps): ReactElement => {
   const [editing, setEditing] = useState(false);
-  const [initialValue] = useState(value);
+  const [initialValue, setInitialValue] = useState();
   const description: string | undefined = propsDescription;
+  // setInitialValue is called after initial render to handle the case where the value is updated
+  useEffect(() => {
+    setInitialValue(value);
+    // do not update if value changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   if (editable && !setValue) {
     throw new Error("setValue is required if editable is true");
@@ -116,25 +121,24 @@ export const TapToEdit = ({
           <Field
             helperText={description}
             label={title}
-            placeholder={placeholder}
+            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
+              modalTitle={confirmationHeading}
               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);
@@ -142,9 +146,8 @@ export const TapToEdit = ({
             />
             <Box marginLeft={2}>
               <Button
-                color="red"
-                inline
                 text="Cancel"
+                variant="muted"
                 onClick={(): void => {
                   if (setValue) {
                     setValue(initialValue);
@@ -166,18 +169,18 @@ 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);
+        // } 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(", ");
@@ -189,7 +192,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,7 +224,7 @@ export const TapToEdit = ({
         paddingX={3}
         paddingY={2}
         width="100%"
-        {...rowBoxProps}
+        {...(rowBoxProps as Exclude<BoxProps, "onClick">)}
       >
         <Box direction="row" width="100%">
           <TapToEditTitle
@@ -231,7 +234,12 @@ export const TapToEdit = ({
             title={title}
           />
           <Box direction="row" flex="grow" justifyContent="end" marginLeft={2}>
-            <Box justifyContent="start" onClick={isClickable ? openLink : undefined}>
+            <Box
+              accessibilityHint=""
+              accessibilityLabel="Link"
+              justifyContent="start"
+              onClick={isClickable ? openLink : undefined}
+            >
               {Boolean(fieldProps?.type !== "textarea") && (
                 <Text align="right" underline={isClickable}>
                   {displayValue}
@@ -239,18 +247,38 @@ export const TapToEdit = ({
               )}
             </Box>
             {editable && (
-              <Box marginLeft={2} width={16} onClick={(): void => setEditing(true)}>
-                <Icon color="darkGray" name="edit" prefix="far" size="md" />
+              <Box
+                accessibilityHint=""
+                accessibilityLabel="Edit"
+                marginLeft={2}
+                width={16}
+                onClick={(): void => setEditing(true)}
+              >
+                <Icon iconName="pencil" size="md" />
               </Box>
             )}
           </Box>
         </Box>
         {fieldProps?.type === "textarea" && (
-          <Box marginTop={2} paddingY={2} width="100%">
-            <Text align="left" underline={isClickable}>
-              {displayValue}
-            </Text>
-          </Box>
+          <>
+            <Box marginTop={2} paddingY={2} width="100%">
+              <Text align="left" underline={isClickable}>
+                {displayValue}
+              </Text>
+            </Box>
+            {editable && (
+              <Box
+                accessibilityHint=""
+                accessibilityLabel="Edit"
+                alignSelf="end"
+                marginLeft={2}
+                width={16}
+                onClick={(): void => setEditing(true)}
+              >
+                <Icon color="primary" iconName="pencil" size="md" />
+              </Box>
+            )}
+          </>
         )}
       </Box>
     );

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" />;
 };