@terreno/ui 0.0.1

package/src/SplitPage.tsx

@@ -0,0 +1,304 @@
+import {Children, useCallback, useEffect, useState} from "react";
+import {Dimensions, type ListRenderItemInfo, ScrollView, View} from "react-native";
+import {SwiperFlatList} from "react-native-swiper-flatlist";
+
+import {Box} from "./Box";
+import type {SplitPageProps} from "./Common";
+import {FlatList} from "./FlatList";
+import {IconButton} from "./IconButton";
+import {mediaQueryLargerThan} from "./MediaQuery";
+import {SegmentedControl} from "./SegmentedControl";
+import {Spinner} from "./Spinner";
+import {useTheme} from "./Theme";
+
+// A component for rendering a list on one side and a details view on the right for large screens,
+// and a scrollable list where clicking an item takes you the details view.
+export const SplitPage = ({
+  children,
+  tabs = [],
+  loading = false,
+  color,
+  keyboardOffset,
+  renderListViewItem,
+  renderListViewHeader,
+  renderContent,
+  onSelectionChange = () => {},
+  listViewData,
+  listViewExtraData,
+  listViewWidth,
+  listViewMaxWidth,
+  bottomNavBarHeight,
+  showItemList,
+}: SplitPageProps) => {
+  const {theme} = useTheme();
+  const [selectedId, setSelectedId] = useState<number | undefined>(undefined);
+  const [activeTabs, setActiveTabs] = useState<number[]>([0, 1]);
+  const {width} = Dimensions.get("window");
+
+  const isMobileDevice = !mediaQueryLargerThan("sm");
+
+  const elementArray = Children.toArray(children).filter((c) => c !== null);
+
+  const onItemSelect = useCallback(
+    async (item: ListRenderItemInfo<any>): Promise<void> => {
+      setSelectedId(item.index);
+      await onSelectionChange(item);
+    },
+    [onSelectionChange]
+  );
+
+  const onItemDeselect = useCallback(async () => {
+    setSelectedId(undefined);
+    await onSelectionChange(undefined);
+  }, [onSelectionChange]);
+
+  // If the list is showing, deselect the item.
+  useEffect(() => {
+    if (showItemList) {
+      void onItemDeselect();
+    }
+  }, [showItemList, onItemDeselect]);
+
+  if (!children && !renderContent) {
+    console.warn("A child node is required");
+    return null;
+  }
+
+  if (elementArray.length > 2 && elementArray.length !== tabs.length) {
+    console.warn("There must be a tab for each child");
+    return null;
+  }
+
+  const renderItem = (itemInfo: ListRenderItemInfo<any>) => {
+    return (
+      <Box
+        accessibilityHint=""
+        accessibilityLabel="Select"
+        onClick={async () => {
+          await onItemSelect(itemInfo);
+        }}
+      >
+        {renderListViewItem(itemInfo)}
+      </Box>
+    );
+  };
+
+  const renderList = () => {
+    return (
+      <View
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          flexGrow: 1,
+          flexShrink: 0,
+          maxWidth: listViewMaxWidth ?? listViewWidth ?? 300,
+          width: listViewWidth ?? 300,
+        }}
+      >
+        {renderListViewHeader?.()}
+        <FlatList
+          data={listViewData}
+          extraData={listViewExtraData}
+          keyExtractor={(item) => item.id}
+          renderItem={renderItem}
+        />
+      </View>
+    );
+  };
+
+  const renderListContent = () => {
+    return (
+      <Box flex="grow" padding={2}>
+        {renderContent?.(selectedId)}
+      </Box>
+    );
+  };
+
+  const renderChildrenContent = () => {
+    if (Array.isArray(children) && elementArray.length > 2) {
+      return (
+        <View
+          style={{
+            alignItems: "center",
+            flex: 1,
+            height: "100%",
+            width: "100%",
+          }}
+        >
+          <Box marginBottom={4} paddingX={4} width="100%">
+            <SegmentedControl
+              items={tabs}
+              onChange={(index) => {
+                setActiveTabs([...([index] as number[])]);
+              }}
+              selectedIndex={activeTabs[0]}
+            />
+          </Box>
+          <Box
+            direction="row"
+            flex="grow"
+            height="100%"
+            paddingX={4}
+            width={activeTabs.length > 1 ? "100%" : "60%"}
+          >
+            {activeTabs.map((tabIndex, i) => {
+              return (
+                <ScrollView
+                  contentContainerStyle={{
+                    flex: 1,
+                  }}
+                  key={tabIndex}
+                  style={{
+                    flex: 1,
+                    height: "100%",
+                    paddingLeft: i ? 16 : 0,
+                    paddingRight: i ? 0 : 16,
+                    width: "60%",
+                  }}
+                >
+                  {elementArray[tabIndex]}
+                </ScrollView>
+              );
+            })}
+          </Box>
+        </View>
+      );
+    } else {
+      return (
+        <Box alignItems="center" direction="row" flex="grow" justifyContent="center" paddingX={2}>
+          {elementArray.map((element, index) => {
+            return (
+              <ScrollView
+                contentContainerStyle={{
+                  flex: 1,
+                }}
+                key={index}
+                style={{
+                  flex: 1,
+                  height: "100%",
+                  width: "60%",
+                }}
+              >
+                {element}
+              </ScrollView>
+            );
+          })}
+        </Box>
+      );
+    }
+  };
+
+  const renderMobileList = () => {
+    if (isMobileDevice && selectedId !== undefined) {
+      return null;
+    }
+
+    return (
+      <View
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          flexGrow: 1,
+          flexShrink: 0,
+          height: "100%",
+          maxWidth: "100%",
+          width: "100%",
+        }}
+      >
+        {renderListViewHeader?.()}
+        <FlatList
+          data={listViewData}
+          extraData={listViewExtraData}
+          keyExtractor={(item) => item.id}
+          nestedScrollEnabled
+          renderItem={renderItem}
+        />
+      </View>
+    );
+  };
+
+  const renderMobileListContent = () => {
+    if (isMobileDevice && selectedId === undefined) {
+      return null;
+    }
+
+    return (
+      <Box flex="grow" padding={2}>
+        {isMobileDevice && (
+          <Box width="100%">
+            <IconButton
+              accessibilityHint="close split page"
+              accessibilityLabel="close"
+              iconName="xmark"
+              onClick={() => onItemDeselect()}
+            />
+          </Box>
+        )}
+        {renderContent?.(selectedId)}
+      </Box>
+    );
+  };
+
+  const renderMobileChildrenContent = () => {
+    if (selectedId === undefined) {
+      return null;
+    }
+    return (
+      <SwiperFlatList
+        nestedScrollEnabled
+        paginationStyle={{justifyContent: "center", width: "95%"}}
+        renderAll
+        showPagination
+        style={{width: "100%"}}
+      >
+        {elementArray.map((element, i) => {
+          return (
+            <View
+              key={i}
+              style={{
+                height: elementArray.length > 1 ? "90%" : "100%",
+                padding: 4,
+                paddingBottom: bottomNavBarHeight,
+                width: width - 8,
+              }}
+            >
+              {element}
+            </View>
+          );
+        })}
+      </SwiperFlatList>
+    );
+  };
+
+  const renderSplitPage = () => {
+    return (
+      <>
+        {renderList()}
+        {renderContent ? renderListContent() : renderChildrenContent()}
+      </>
+    );
+  };
+
+  const renderMobileSplitPage = () => {
+    const renderMainContent = renderContent
+      ? renderMobileListContent()
+      : renderMobileChildrenContent();
+    return selectedId === undefined ? renderMobileList() : renderMainContent;
+  };
+
+  return (
+    <Box
+      avoidKeyboard
+      color={color || "neutralLight"}
+      direction="row"
+      display="flex"
+      height="100%"
+      keyboardOffset={keyboardOffset}
+      padding={2}
+      width="100%"
+    >
+      {loading === true && <Spinner color={theme.text.primary as any} size="md" />}
+      {isMobileDevice ? renderMobileSplitPage() : renderSplitPage()}
+    </Box>
+  );
+};

package/src/TapToEdit.tsx

@@ -0,0 +1,292 @@
+import {type FC, useEffect, useRef, useState} from "react";
+import {Linking, View} from "react-native";
+
+import {Box} from "./Box";
+import {Button} from "./Button";
+import type {AddressInterface, FieldProps, TapToEditProps} from "./Common";
+import {Field} from "./Field";
+import {Icon} from "./Icon";
+// import {useOpenAPISpec} from "./OpenAPIContext";
+import {Text} from "./Text";
+
+const TapToEditTitle: FC<{
+  onlyShowHelperTextWhileEditing?: boolean;
+  title: string;
+  helperText?: string;
+}> = ({title, helperText, onlyShowHelperTextWhileEditing}) => {
+  return (
+    <View style={{flex: 1, justifyContent: "center"}}>
+      <Text bold>{title}</Text>
+      {Boolean(helperText && !onlyShowHelperTextWhileEditing) && (
+        <Text color="secondaryLight" size="sm">
+          {helperText}
+        </Text>
+      )}
+    </View>
+  );
+};
+
+export function formatAddress(address: AddressInterface, asString = false): string {
+  let city = "";
+  if (address?.city) {
+    city = address?.state || address.zipcode ? `${address.city}, ` : `${address.city}`;
+  }
+
+  let state = "";
+  if (address?.state) {
+    state = address?.zipcode ? `${address.state} ` : `${address.state}`;
+  }
+
+  const zip = address?.zipcode || "";
+
+  const countyName = address?.countyName ?? "";
+
+  const countyCode = address?.countyCode ?? "";
+
+  const addressLineOne = address?.address1 ?? "";
+  const addressLineTwo = address?.address2 ?? "";
+  const addressLineThree = `${city}${state}${zip}`;
+  const addressLineFour = `${countyName}${address?.countyCode ? ` (${countyCode})` : ""}`;
+
+  if (!asString) {
+    // Only add new lines if lines before and after are not empty to avoid awkward whitespace
+    return `${addressLineOne}${
+      addressLineOne && (addressLineTwo || addressLineThree) ? `\n` : ""
+    }${addressLineTwo}${addressLineTwo && addressLineThree ? `\n` : ""}${addressLineThree}${
+      addressLineThree && addressLineFour ? `\n` : ""
+    }${addressLineFour}`;
+  } else {
+    return `${addressLineOne}${
+      addressLineOne && (addressLineTwo || addressLineThree) ? `, ` : ""
+    }${addressLineTwo}${addressLineTwo && addressLineThree ? `, ` : ""}${addressLineThree}${
+      addressLineThree && addressLineFour ? `, ` : ""
+    }${addressLineFour}`;
+  }
+}
+
+export const TapToEdit: FC<TapToEditProps> = ({
+  value,
+  setValue,
+  title,
+  onSave,
+  editable = true,
+  isEditing = false,
+  transform,
+  withConfirmation = false,
+  confirmationText = "Are you sure you want to save your changes?",
+  confirmationTitle = "Confirm",
+  helperText: propsHelperText,
+  onlyShowHelperTextWhileEditing = true,
+  showClearButton = false,
+  ...fieldProps
+}) => {
+  const [editing, setEditing] = useState(false);
+  const [initialValue, setInitialValue] = useState();
+  const helperText: string | undefined = propsHelperText;
+  // setInitialValue is called after initial render to handle the case where the value is updated
+  useEffect(() => {
+    setInitialValue(value);
+    // do not update if value changes
+  }, [value]);
+
+  // TODO: Auto focus on input when editing for field types other than text for accessibility
+  const inputRef = useRef<any>(null);
+
+  // bring the bring the input into focus when editing from within the component,
+  // but not when editing from outside
+  useEffect(() => {
+    if (editable && editing && !isEditing) {
+      inputRef.current?.focus();
+    }
+  }, [editable, editing, isEditing]);
+
+  if (editable && !setValue) {
+    throw new Error("setValue is required if editable is true");
+  }
+
+  if (editable && (editing || isEditing)) {
+    return (
+      <View style={{flexDirection: "column", width: "100%"}}>
+        <View style={{flex: 1, justifyContent: "center"}}>
+          <Text bold>{title}</Text>
+        </View>
+        <View style={{gap: 16}}>
+          <Field
+            grow={fieldProps?.type === "textarea" ? (fieldProps.grow ?? true) : undefined}
+            helperText={helperText}
+            inputRef={
+              ["text", "textarea", "url", "email", "number"].includes(fieldProps?.type)
+                ? (ref: any) => (inputRef.current = ref)
+                : undefined
+            }
+            onChange={setValue ?? (() => {})}
+            row={fieldProps?.type === "textarea" ? 5 : undefined}
+            type={(fieldProps?.type ?? "text") as NonNullable<FieldProps["type"]>}
+            value={value}
+            {...(fieldProps as any)}
+          />
+          {editing && !isEditing && (
+            <View style={{flexDirection: "row", gap: 16, justifyContent: "flex-end"}}>
+              <Button
+                onClick={(): void => {
+                  if (setValue) {
+                    setValue(initialValue);
+                  }
+                  setEditing(false);
+                }}
+                text="Cancel"
+                variant="muted"
+              />
+              {(showClearButton || ["date", "datetime", "time"].includes(fieldProps?.type)) && (
+                <Button
+                  onClick={(): void => {
+                    if (setValue) {
+                      setValue("");
+                      setInitialValue("" as any);
+                    }
+                    if (onSave) {
+                      onSave("");
+                    }
+                    setEditing(false);
+                  }}
+                  text="Clear"
+                  variant="muted"
+                />
+              )}
+              <View style={{marginLeft: 8}}>
+                <Button
+                  confirmationText={confirmationText}
+                  modalTitle={confirmationTitle}
+                  onClick={async (): Promise<void> => {
+                    if (!onSave) {
+                      console.error("No onSave provided for editable TapToEdit");
+                    } else {
+                      setInitialValue(value);
+                      await onSave(value);
+                    }
+                    setEditing(false);
+                  }}
+                  text="Save"
+                  withConfirmation={withConfirmation}
+                />
+              </View>
+            </View>
+          )}
+        </View>
+      </View>
+    );
+  } else {
+    let displayValue = value;
+    // If a transform props is present, that takes priority
+    if (transform) {
+      displayValue = transform(value);
+    } else {
+      // If no transform, try and display the value reasonably.
+      if (fieldProps?.type === "boolean") {
+        displayValue = value ? "Yes" : "No";
+        // 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(", ");
+      } else if (fieldProps?.type === "url") {
+        // Show only the domain, full links are likely too long.
+        try {
+          const url = new URL(value);
+          displayValue = url?.hostname ?? value;
+        } catch (_error) {
+          // Don't print an error message for empty values.
+          if (value) {
+            console.debug(`Invalid URL: $value`);
+          }
+          displayValue = value;
+        }
+      } else if (fieldProps?.type === "address") {
+        displayValue = formatAddress(value);
+      }
+    }
+
+    const openLink = async (): Promise<void> => {
+      if (fieldProps?.type === "url") {
+        await Linking.openURL(value);
+      } else if (fieldProps?.type === "address") {
+        await Linking.openURL(
+          `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(
+            formatAddress(value, true)
+          )}`
+        );
+      }
+    };
+    const isClickable = fieldProps?.type === "url" || fieldProps?.type === "address";
+
+    // 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 (
+      <View
+        style={{
+          alignItems: fieldProps?.type === "textarea" ? "flex-start" : "center",
+          flexDirection: fieldProps?.type === "textarea" ? "column" : "row",
+          justifyContent: "space-between",
+          width: "100%",
+        }}
+      >
+        <View style={{flexDirection: "row", gap: 16, width: "100%"}}>
+          <TapToEditTitle
+            helperText={helperText}
+            onlyShowHelperTextWhileEditing={onlyShowHelperTextWhileEditing}
+            title={title}
+          />
+          <View
+            style={{
+              flex: 1,
+              flexDirection: "row",
+              justifyContent: "flex-end",
+            }}
+          >
+            <Box
+              accessibilityHint=""
+              accessibilityLabel="Link"
+              justifyContent="start"
+              onClick={isClickable ? openLink : undefined}
+            >
+              {Boolean(fieldProps?.type !== "textarea") && (
+                <Text align="right" skipLinking underline={isClickable}>
+                  {displayValue}
+                </Text>
+              )}
+            </Box>
+            {editable && (
+              <Box
+                accessibilityHint=""
+                accessibilityLabel="Edit"
+                marginLeft={2}
+                onClick={(): void => setEditing(true)}
+                width={16}
+              >
+                <Icon iconName="pencil" size="md" />
+              </Box>
+            )}
+          </View>
+        </View>
+        {fieldProps?.type === "textarea" && (
+          <View style={{marginTop: 8, paddingVertical: 8, width: "100%"}}>
+            <Text align="left" underline={isClickable}>
+              {displayValue}
+            </Text>
+          </View>
+        )}
+      </View>
+    );
+  }
+};

package/src/TerrenoProvider.tsx

@@ -0,0 +1,31 @@
+import type React from "react";
+import type {FC} from "react";
+import {Host} from "react-native-portalize";
+import {ToastProvider} from "react-native-toast-notifications";
+
+import {OpenAPIProvider} from "./OpenAPIContext";
+import {ThemeProvider} from "./Theme";
+import {Toast} from "./Toast";
+
+export const TerrenoProvider: FC<{
+  children: React.ReactNode;
+  openAPISpecUrl?: string;
+}> = ({children, openAPISpecUrl}) => {
+  return (
+    <ThemeProvider>
+      <ToastProvider
+        animationDuration={250}
+        animationType="slide-in"
+        duration={50000}
+        offset={50}
+        placement="bottom"
+        renderToast={(toastOptions) => <Toast {...toastOptions?.data} />}
+        swipeEnabled
+      >
+        <OpenAPIProvider specUrl={openAPISpecUrl}>
+          <Host>{children}</Host>
+        </OpenAPIProvider>
+      </ToastProvider>
+    </ThemeProvider>
+  );
+};