@terreno/ui 0.0.1

package/src/DateUtilities.tsx

@@ -0,0 +1,370 @@
+import {DateTime} from "luxon";
+
+function getDate(date: string, {timezone}: {timezone?: string} = {}): DateTime {
+  if (!date) {
+    throw new Error("Passed undefined");
+  }
+  if (typeof date !== "string") {
+    throw new Error(`Invalid date type: ${typeof date}`);
+  }
+  const clonedDate = timezone ? DateTime.fromISO(date).setZone(timezone) : DateTime.fromISO(date);
+  if (!clonedDate.isValid) {
+    throw new Error(`Invalid date: ${date}`);
+  }
+  return clonedDate;
+}
+
+export function isTomorrow(date: string, {timezone}: {timezone?: string} = {}): boolean {
+  const clonedDate = getDate(date, {timezone});
+  const now = timezone ? DateTime.now().setZone(timezone) : DateTime.now();
+  const diff = now.startOf("day").diff(clonedDate.startOf("day"), "days");
+  return diff.days <= -1 && diff.days > -2;
+}
+
+export function isYesterday(date: string, {timezone}: {timezone?: string} = {}): boolean {
+  const clonedDate = getDate(date, {timezone});
+  const now = timezone ? DateTime.now().setZone(timezone) : DateTime.now();
+  const diff = now.startOf("day").diff(clonedDate.startOf("day"), "days");
+  return diff.days <= 1 && diff.days > -1;
+}
+
+export function isToday(date: string, {timezone}: {timezone?: string} = {}): boolean {
+  const clonedDate = getDate(date, {timezone});
+  const now = timezone ? DateTime.now().setZone(timezone) : DateTime.now();
+  const diff = now.startOf("day").diff(clonedDate.startOf("day"), "days");
+  return diff.days === 0;
+}
+
+export function isThisYear(date: string, {timezone}: {timezone?: string} = {}): boolean {
+  const clonedDate = getDate(date, {timezone});
+  const now = timezone ? DateTime.now().setZone(timezone) : DateTime.now();
+  return clonedDate.year === now.year;
+}
+
+export function isWithinWeek(date: string, {timezone}: {timezone?: string} = {}): boolean {
+  const clonedDate = getDate(date, {timezone});
+  const now = timezone ? DateTime.now().setZone(timezone) : DateTime.now();
+  const diff = now.startOf("day").diff(clonedDate.startOf("day"), "days");
+  return diff.days > -7 && diff.days < 7;
+}
+
+// Prints a human friendly date, e.g. "Tomorrow", "Yesterday", "Monday", "June 19", "December 25,
+// 2022".
+export function humanDate(
+  date: string,
+  {timezone, dontShowTime}: {timezone?: string; dontShowTime?: boolean} = {}
+): string {
+  let clonedDate;
+  try {
+    clonedDate = getDate(date, {timezone});
+  } catch (error: any) {
+    throw new Error(`humanDate: ${error.message}`);
+  }
+  if (isTomorrow(date, {timezone})) {
+    return "Tomorrow";
+  } else if (isToday(date, {timezone})) {
+    if (dontShowTime) {
+      return "Today";
+    } else {
+      return clonedDate.toFormat("h:mm a");
+    }
+  } else if (isYesterday(date, {timezone})) {
+    return "Yesterday";
+  } else if (isWithinWeek(date, {timezone})) {
+    // E.g. Monday
+    return clonedDate.toFormat("EEEE");
+  } else if (isThisYear(date, {timezone})) {
+    // E.g. June 19
+    return clonedDate.toFormat("MMM d");
+  } else {
+    // December 25, 2022
+    return clonedDate.toFormat("MMM d, iiii");
+  }
+}
+
+// Prints a human friendly date and time, e.g. "Tomorrow 9:00 AM", "Yesterday 9:00 AM", "Monday
+// 9:00 AM", "June 19 9:00 AM", "December 25, 2022 9:00 AM".
+export function humanDateAndTime(
+  date: string,
+  {timezone, showTimezone = true}: {timezone?: string; showTimezone?: boolean} = {}
+): string {
+  let clonedDate;
+  try {
+    clonedDate = getDate(date, {timezone});
+  } catch (error: any) {
+    throw new Error(`humanDateAndTime: ${error.message}`);
+  }
+  // This should maybe use printTime()
+  let time: string = "";
+  if (showTimezone) {
+    time = clonedDate.toLocaleString({
+      hour: "numeric",
+      minute: "2-digit",
+      timeZoneName: "short",
+    });
+  } else {
+    time = clonedDate.toFormat("h:mm a");
+  }
+  if (isTomorrow(date, {timezone})) {
+    return `Tomorrow ${time}`;
+  } else if (isToday(date, {timezone})) {
+    return time;
+  } else if (isYesterday(date, {timezone})) {
+    return `Yesterday ${time}`;
+  } else if (isWithinWeek(date, {timezone})) {
+    // E.g. Monday 9:00 AM
+    return `${clonedDate.toFormat("EEEE")} ${time}`;
+  } else if (isThisYear(date, {timezone})) {
+    // E.g. June 19
+    return `${clonedDate.toFormat("MMM d")} ${time}`;
+  } else {
+    // December 25, 2022
+    return `${clonedDate.toFormat("MMM d, iiii")} ${time}`;
+  }
+}
+
+// Print date in the format of M/D/YY, taking timezones into account.
+export const printDate = (
+  date?: string,
+  {
+    timezone,
+    showTimezone,
+    ignoreTime,
+    defaultValue,
+  }: {
+    timezone?: string;
+    showTimezone?: boolean;
+    ignoreTime?: boolean;
+    defaultValue?: string;
+  } = {}
+): string => {
+  if (!date) {
+    return defaultValue ?? "Invalid Date";
+  }
+  if (showTimezone) {
+    console.warn("showTimezone is not supported for printDate");
+  }
+
+  if (ignoreTime) {
+    // Parse the date in the specified timezone (or local if not provided)
+    // then force to UTC midnight to ignore time component
+    const justDate = timezone
+      ? DateTime.fromISO(date).setZone(timezone)
+      : DateTime.fromISO(date).setZone("UTC");
+    // Using startOf('day') to normalize the time component
+    return justDate.startOf("day").toFormat("M/d/yyyy");
+  }
+
+  let clonedDate;
+  try {
+    clonedDate = getDate(date, {timezone});
+  } catch (error: any) {
+    throw new Error(`printDate: ${error.message}`);
+  }
+
+  return clonedDate.toLocaleString(DateTime.DATE_SHORT);
+};
+
+// For printing dates from date times, ignoring the time. These should end in T00:00:00.000Z.
+// For example, the dates returned by Field type="date".
+export const printOnlyDate = (
+  date?: string,
+  {
+    defaultValue,
+  }: {
+    defaultValue?: string;
+  } = {}
+): string => {
+  if (!date) {
+    return defaultValue ?? "Invalid Date";
+  }
+
+  if (!date?.endsWith("T00:00:00.000Z")) {
+    console.warn(
+      "printOnlyDate, but the time is not set to midnight UTC. " +
+        "This may cause unexpected behavior."
+    );
+  }
+  // Use only the date component, ignore the time.
+  const justDate = DateTime.fromISO(date, {zone: "UTC"});
+  // We force it into UTC so we can get the correct date.
+  return justDate.toFormat("M/d/yyyy");
+};
+
+// Print time in the format of HH:mm A, taking timezones into account.
+export function printTime(
+  date?: string,
+  {
+    timezone,
+    showTimezone,
+    defaultValue,
+  }: {
+    timezone: string;
+    showTimezone?: boolean;
+    defaultValue?: string;
+  } = {defaultValue: "Invalid Date", timezone: "America/New_York"}
+): string {
+  if (!date) {
+    return defaultValue ?? "Invalid Date";
+  }
+  let clonedDate;
+  if (!timezone) {
+    throw new Error("printTime: timezone is required");
+  }
+  try {
+    clonedDate = getDate(date, {timezone});
+  } catch (error: any) {
+    throw new Error(`printTime: ${error.message}`);
+  }
+  if (showTimezone) {
+    return clonedDate.toLocaleString({
+      hour: "numeric",
+      minute: "2-digit",
+      timeZoneName: "short",
+    });
+  } else {
+    return clonedDate.toLocaleString(DateTime.TIME_SIMPLE);
+  }
+}
+
+// Print date in the format of M/D/YY HH:mm A, taking timezones into account.
+export function printDateAndTime(
+  date?: string,
+  {
+    timezone,
+    showTimezone,
+    defaultValue,
+  }: {
+    timezone?: string;
+    showTimezone?: boolean;
+    defaultValue?: string;
+  } = {}
+): string {
+  if (!date) {
+    return defaultValue ?? "Invalid Datetime";
+  }
+  let clonedDate;
+  try {
+    clonedDate = getDate(date, {timezone});
+  } catch (error: any) {
+    throw new Error(`printDateAndTime: ${error.message}`);
+  }
+  if (showTimezone) {
+    return clonedDate.toLocaleString({
+      day: "numeric",
+      hour: "numeric",
+      minute: "2-digit",
+      month: "numeric",
+      timeZoneName: "short",
+      year: "numeric",
+    });
+  } else {
+    return clonedDate.toLocaleString(DateTime.DATETIME_SHORT);
+  }
+}
+
+// Prints a date range in the format of M/D/YY HH:mm A - M/D/YY HH:mm A EST, taking timezones into
+// account. If the dates are the same, it will print the date only once, e.g. M/D/YY HH:mm A - HH:mm
+// A EST.
+export function printDateRange(
+  start: string,
+  end: string,
+  {
+    timezone,
+    showTimezone = true,
+    timeOnly,
+  }: {timezone: string; showTimezone?: boolean; timeOnly?: boolean}
+): string {
+  const startDate = printDate(start, {showTimezone: false, timezone});
+  const endDate = printDate(end, {showTimezone: false, timezone});
+
+  const startTime = printTime(start, {showTimezone: false, timezone});
+  const endTime = printTime(end, {showTimezone, timezone});
+  if (timeOnly) {
+    if (startDate !== endDate) {
+      console.warn(
+        `printDateRange: printing only time but start and end dates are different: ${start} - ${end}`
+      );
+    }
+    return `${startTime} - ${endTime}`;
+  } else if (startDate === endDate) {
+    return `${startDate} ${startTime} - ${endTime}`;
+  } else {
+    return `${startDate} ${startTime} - ${endDate} ${endTime}`;
+  }
+}
+
+// Print since nicely. If less than 2 months, print days, otherwise print months. If over 1 year,
+// print years.
+export function printSince(
+  date: string,
+  {timezone, showAgo = true}: {timezone?: string; showAgo?: boolean} = {}
+): string {
+  let clonedDate;
+  const ago = showAgo ? " ago" : "";
+  try {
+    clonedDate = getDate(date, {timezone});
+  } catch (error: any) {
+    throw new Error(`printSince: ${error.message}`);
+  }
+  const now = timezone ? DateTime.now().setZone(timezone) : DateTime.now();
+  const diff = now.diff(clonedDate, "months");
+  if (diff.months < 2) {
+    const days = Math.floor(now.diff(clonedDate, "days").days);
+    return `${days} ${days === 1 ? "day" : "days"}${ago}`;
+  } else if (diff.months < 12) {
+    const months = Math.floor(diff.months);
+    return `${months} ${months === 1 ? "month" : "months"}${ago}`;
+  } else {
+    const years = Math.floor(now.diff(clonedDate, "years").years);
+    return `${years} ${years === 1 ? "year" : "years"}${ago}`;
+  }
+}
+
+export function convertNullToUndefined(value: string | null): string | undefined {
+  return value ?? undefined;
+}
+
+// Get the ISO date string from a date string. If the date string is undefined,
+// return undefined instead of null so MongoDB can handle it.
+export function getIsoDate(date: string | undefined): string | undefined {
+  if (!date) {
+    return undefined;
+  }
+  return convertNullToUndefined(DateTime.fromISO(date).toUTC().toISO());
+}
+
+const usTimezoneOptions = [
+  {label: "Eastern", value: "America/New_York"},
+  {label: "Central", value: "America/Chicago"},
+  {label: "Mountain", value: "America/Denver"},
+  {label: "Pacific", value: "America/Los_Angeles"},
+  {label: "Alaska", value: "America/Anchorage"},
+  {label: "Hawaii", value: "Pacific/Honolulu"},
+  {label: "Arizona", value: "America/Phoenix"},
+];
+
+export function getTimezoneOptions(location: "USA" | "Worldwide", shortTimezone = false) {
+  let timezones: [string, string][];
+  if (location === "USA") {
+    timezones = usTimezoneOptions.map((tz) => [tz.label, tz.value]);
+  } else {
+    timezones = (Intl as any).supportedValuesOf("timeZone").map((tz: any) => {
+      return [tz, tz];
+    });
+  }
+  return timezones.map(([name, tz]) => {
+    const dateTime = DateTime.now().setZone(tz);
+    let tzAbbr = dateTime.toFormat("ZZZZ"); // Gets timezone abbreviation like "EST", "CST", etc.
+
+    // Special case for Arizona which returns MST during standard time
+    if (tz === "America/Phoenix") {
+      tzAbbr = "AZ";
+    }
+
+    return {
+      label: shortTimezone ? tzAbbr : name,
+      value: tz,
+    };
+  });
+}

package/src/DecimalRangeActionSheet.tsx

@@ -0,0 +1,85 @@
+import {Picker} from "@react-native-picker/picker";
+import range from "lodash/range";
+import React from "react";
+
+import {ActionSheet} from "./ActionSheet";
+import {Box} from "./Box";
+import {Button} from "./Button";
+import type {DecimalRangeActionSheetProps, DecimalRangeActionSheetState} from "./Common";
+
+const PICKER_HEIGHT = 104;
+
+export class DecimalRangeActionSheet extends React.Component<
+  DecimalRangeActionSheetProps,
+  DecimalRangeActionSheetState
+> {
+  constructor(props: DecimalRangeActionSheetProps) {
+    super(props);
+    this.state = {
+      decimal: String((Number(props.value) * 10) % 10),
+      whole: String(Math.floor(Number(props.value))),
+    };
+  }
+
+  render() {
+    return (
+      <ActionSheet bounceOnOpen gestureEnabled ref={this.props.actionSheetRef}>
+        <Box marginBottom={8} paddingX={4} width="100%">
+          <Box alignItems="end" display="flex" width="100%">
+            <Box width="33%">
+              <Button
+                onClick={() => {
+                  this.props.actionSheetRef?.current?.setModalVisible(false);
+                }}
+                text="Close"
+              />
+            </Box>
+          </Box>
+          <Box direction="row" width="100%">
+            <Box width="50%">
+              <Picker
+                itemStyle={{
+                  height: PICKER_HEIGHT,
+                }}
+                onValueChange={(whole) => {
+                  this.setState({whole: String(whole)});
+                  this.props.onChange(String(Number(whole) + Number(this.state.decimal) * 0.1));
+                }}
+                selectedValue={this.state.whole}
+                style={{
+                  backgroundColor: "#FFFFFF",
+                  height: PICKER_HEIGHT,
+                }}
+              >
+                {range(this.props.min, this.props.max + 1).map((n) => {
+                  return <Picker.Item key={String(n)} label={String(n)} value={String(n)} />;
+                })}
+              </Picker>
+            </Box>
+            <Box width="50%">
+              <Picker
+                itemStyle={{
+                  height: PICKER_HEIGHT,
+                }}
+                onValueChange={(decimal) => {
+                  this.setState({decimal: String(decimal)});
+                  this.props.onChange(String(Number(this.state.whole) + Number(decimal) * 0.1));
+                }}
+                selectedValue={this.state.decimal}
+                style={{
+                  backgroundColor: "#FFFFFF",
+                  height: PICKER_HEIGHT,
+                }}
+              >
+                {range(0, 10).map((n) => {
+                  // console.log("N", n);
+                  return <Picker.Item key={String(n)} label={`.${String(n)}`} value={String(n)} />;
+                })}
+              </Picker>
+            </Box>
+          </Box>
+        </Box>
+      </ActionSheet>
+    );
+  }
+}

package/src/DismissButton.tsx

@@ -0,0 +1,31 @@
+import type React from "react";
+import {Pressable, View} from "react-native";
+
+import type {DismissButtonProps} from "./Common";
+import {Icon} from "./Icon";
+
+export const DismissButton = ({
+  accessibilityLabel,
+  accessibilityHint,
+  onClick,
+  color = "primary",
+}: DismissButtonProps): React.ReactElement | null => {
+  return (
+    <Pressable
+      accessibilityHint={accessibilityHint}
+      aria-label={accessibilityLabel}
+      aria-role="button"
+      onPress={onClick}
+      style={{
+        alignItems: "center",
+        height: 24.5,
+        justifyContent: "center",
+        width: 24.5,
+      }}
+    >
+      <View>
+        <Icon color={color} iconName="x" type="solid" />
+      </View>
+    </Pressable>
+  );
+};

package/src/EmailField.tsx

@@ -0,0 +1,66 @@
+import {type FC, useCallback, useEffect, useState} from "react";
+
+import type {EmailFieldProps} from "./Common";
+import {TextField} from "./TextField";
+
+export const EmailField: FC<EmailFieldProps> = ({
+  errorText,
+  iconName,
+  placeholder,
+  value,
+  onChange,
+  onBlur,
+  ...rest
+}) => {
+  const [localValue, setLocalValue] = useState<string>(value || "");
+
+  // Sync local state with incoming prop values
+  useEffect(() => {
+    setLocalValue(value || "");
+  }, [value]);
+
+  const validateEmail = useCallback((email: string): string | undefined => {
+    if (email.trim() === "") {
+      return undefined;
+    }
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!emailRegex.test(email)) {
+      return "Invalid email address format";
+    }
+    return undefined;
+  }, []);
+
+  const localOnChange = useCallback(
+    (e: string) => {
+      setLocalValue(e);
+      const err = validateEmail(e);
+      if (!err && onChange) {
+        onChange(e);
+      }
+    },
+    [onChange, validateEmail]
+  );
+
+  const localOnBlur = useCallback(
+    (e: string) => {
+      setLocalValue(e);
+      const err = validateEmail(e);
+      if (!err && onBlur) {
+        onBlur(e);
+      }
+    },
+    [onBlur, validateEmail]
+  );
+  return (
+    <TextField
+      errorText={errorText || validateEmail(localValue)}
+      iconName={iconName}
+      onBlur={localOnBlur}
+      onChange={localOnChange}
+      placeholder={placeholder}
+      type="email"
+      value={localValue}
+      {...rest}
+    />
+  );
+};

package/src/EmojiSelector.test.tsx

@@ -0,0 +1,61 @@
+import {describe, expect, it, mock} from "bun:test";
+
+import EmojiSelector, {Categories} from "./EmojiSelector";
+import {renderWithTheme} from "./test-utils";
+
+describe("EmojiSelector", () => {
+  it("renders search bar when showSearchBar is true", () => {
+    const {getByPlaceholderText} = renderWithTheme(
+      <EmojiSelector
+        category={Categories.all}
+        columns={6}
+        onEmojiSelected={mock(() => {})}
+        placeholder="Search emojis"
+        showHistory={false}
+        showSearchBar
+        showSectionTitles
+        showTabs
+        theme="#007AFF"
+      />
+    );
+
+    expect(getByPlaceholderText("Search emojis")).toBeTruthy();
+  });
+
+  it("renders tab bar when showTabs is true", () => {
+    const {getByText} = renderWithTheme(
+      <EmojiSelector
+        category={Categories.people}
+        columns={6}
+        onEmojiSelected={mock(() => {})}
+        placeholder="Search emojis"
+        showHistory={false}
+        showSearchBar
+        showSectionTitles
+        showTabs
+        theme="#007AFF"
+      />
+    );
+
+    // One of the known category symbols
+    expect(getByText("😀")).toBeTruthy();
+  });
+
+  it("matches snapshot", () => {
+    const tree = renderWithTheme(
+      <EmojiSelector
+        category={Categories.people}
+        columns={6}
+        onEmojiSelected={mock(() => {})}
+        placeholder="Search emojis"
+        showHistory={false}
+        showSearchBar
+        showSectionTitles
+        showTabs
+        theme="#007AFF"
+      />
+    );
+
+    expect(tree.toJSON()).toMatchSnapshot();
+  });
+});