@terreno/ui 0.0.1

package/src/TextField.tsx

@@ -0,0 +1,260 @@
+import {getCalendars} from "expo-localization";
+import {type FC, useMemo, useState} from "react";
+import {
+  type DimensionValue,
+  type KeyboardTypeOptions,
+  Platform,
+  Pressable,
+  type StyleProp,
+  TextInput,
+  View,
+} from "react-native";
+
+import type {TextFieldProps, TextStyleWithOutline} from "./Common";
+import {FieldError, FieldHelperText, FieldTitle} from "./fieldElements";
+import {Icon} from "./Icon";
+import {useTheme} from "./Theme";
+
+const keyboardMap: {[id: string]: string | undefined} = {
+  date: "default",
+  decimal: "decimal-pad",
+  decimalRange: "decimal-pad",
+  email: "email-address",
+  height: "default",
+  number: "number-pad",
+  numberRange: "number-pad",
+  password: "default",
+  phoneNumber: "number-pad",
+  search: "default",
+  text: "default",
+  url: Platform.select({
+    android: "default",
+    ios: "url",
+  }),
+  username: "default",
+};
+
+// Not an exhaustive list of all the textContent types, but the ones we use.
+const textContentMap: {
+  [id: string]: "none" | "emailAddress" | "password" | "username" | "URL" | undefined;
+} = {
+  date: "none",
+  decimal: "none",
+  decimalRange: "none",
+  email: "emailAddress",
+  height: "none",
+  number: "none",
+  password: "password",
+  search: "none",
+  text: "none",
+  url: Platform.select({
+    android: "none",
+    ios: "URL",
+  }),
+  username: "username",
+};
+
+export const TextField: FC<TextFieldProps> = ({
+  title,
+  disabled,
+  helperText,
+  errorText,
+  value,
+  onChange,
+  placeholder,
+  blurOnSubmit = true,
+  iconName,
+  onIconClick,
+  trimOnBlur = true,
+  type = "text",
+  autoComplete,
+  inputRef,
+  multiline,
+  rows = 1,
+  grow,
+  returnKeyType,
+  onBlur,
+  onFocus,
+  onEnter,
+  onSubmitEditing,
+  testID,
+}) => {
+  const {theme} = useTheme();
+
+  const calendar = getCalendars()[0];
+  const localTimeZone = calendar?.timeZone;
+  if (!localTimeZone) {
+    console.warn("Could not automatically determine timezone.");
+  }
+
+  const [focused, setFocused] = useState(false);
+  const [height, setHeight] = useState(rows * 40);
+
+  let borderColor = focused ? theme.border.focus : theme.border.dark;
+  if (disabled) {
+    borderColor = theme.border.activeNeutral;
+  } else if (errorText) {
+    borderColor = theme.border.error;
+  }
+
+  const calculatedHeight: DimensionValue = useMemo(() => {
+    if (grow) {
+      return Math.max(40, height);
+    } else if (multiline) {
+      return height || "100%";
+    } else {
+      return 20;
+    }
+  }, [grow, height, multiline]);
+
+  const defaultTextInputStyles = useMemo(() => {
+    const style: StyleProp<TextStyleWithOutline> = {
+      color: theme.text.primary,
+      flex: 1,
+      fontFamily: "text",
+      fontSize: 16,
+      gap: 10,
+      height: calculatedHeight,
+      paddingVertical: 0,
+      width: "100%",
+    };
+
+    if (Platform.OS === "web") {
+      style.outline = "none";
+    }
+    return style;
+  }, [calculatedHeight, theme.text.primary]);
+
+  if (["numberRange", "decimalRange", "height"].includes(type)) {
+    console.warn(`${type} is not yet supported`);
+  }
+
+  const shouldAutocorrect =
+    ["text", "textarea"].includes(type) && (!autoComplete || autoComplete === "on");
+
+  const keyboardType = keyboardMap[type];
+  const textContentType = textContentMap[type || "text"];
+
+  return (
+    <View
+      style={{
+        flexDirection: "column",
+        width: "100%",
+      }}
+    >
+      {Boolean(title) && <FieldTitle text={title!} />}
+      {Boolean(errorText) && <FieldError text={errorText!} />}
+      <View
+        style={{
+          alignItems: "center",
+          backgroundColor: disabled ? theme.surface.neutralLight : theme.surface.base,
+          borderColor,
+          borderRadius: 4,
+          borderWidth: focused ? 3 : 1,
+          flexDirection: "row",
+          overflow: "hidden",
+          paddingHorizontal: focused ? 10 : 12,
+          paddingVertical: focused ? 6 : 8,
+        }}
+      >
+        <TextInput
+          accessibilityHint="Enter text here"
+          accessibilityState={{disabled}}
+          aria-label="Text input field"
+          autoCapitalize={type === "text" ? "sentences" : "none"}
+          autoCorrect={shouldAutocorrect}
+          blurOnSubmit={blurOnSubmit}
+          enterKeyHint={returnKeyType}
+          keyboardType={keyboardType as KeyboardTypeOptions}
+          multiline={multiline}
+          numberOfLines={rows || 4}
+          onBlur={() => {
+            if (disabled) return;
+            let finalValue = value ?? "";
+
+            if (trimOnBlur && value) {
+              finalValue = finalValue.trim();
+              if (finalValue !== value) {
+                onChange(finalValue);
+              }
+            }
+            if (onBlur) {
+              onBlur(finalValue);
+            }
+            setFocused(false);
+          }}
+          onChangeText={onChange}
+          onContentSizeChange={(event) => {
+            if (!grow) {
+              return;
+            }
+            setHeight(event.nativeEvent.contentSize.height);
+          }}
+          onFocus={() => {
+            if (!disabled) {
+              setFocused(true);
+            }
+            if (onFocus) {
+              onFocus();
+            }
+          }}
+          onSubmitEditing={() => {
+            if (onEnter) {
+              onEnter();
+            }
+            if (onSubmitEditing) {
+              onSubmitEditing();
+            }
+          }}
+          placeholder={placeholder}
+          placeholderTextColor={theme.text.secondaryLight}
+          readOnly={disabled}
+          ref={(ref) => {
+            if (inputRef) {
+              inputRef(ref);
+            }
+          }}
+          secureTextEntry={type === "password"}
+          style={defaultTextInputStyles}
+          testID={testID}
+          textContentType={textContentType}
+          underlineColorAndroid="transparent"
+          value={value}
+        />
+        {Boolean(iconName) && (
+          <Pressable aria-role="button" onPress={onIconClick}>
+            <Icon iconName={iconName!} size="md" />
+          </Pressable>
+        )}
+      </View>
+      {Boolean(helperText) && <FieldHelperText text={helperText!} />}
+      {/* {type === "numberRange" && value && (
+        <NumberPickerActionSheet
+          actionSheetRef={numberRangeActionSheetRef}
+          max={max || (min || 0) + 100}
+          min={min || 0}
+          value={value}
+          onChange={(result) => onChange(result)}
+        />
+      )}
+      {type === "decimalRange" && value && (
+        <DecimalRangeActionSheet
+          actionSheetRef={decimalRangeActionSheetRef}
+          max={max || (min || 0) + 100}
+          min={min || 0}
+          value={value}
+          onChange={(result) => onChange(result)}
+        />
+      )} */}
+      {/* {type === "height" && (
+        <HeightActionSheet
+          actionSheetRef={weightActionSheetRef}
+          value={value}
+          onChange={(result) => {
+            onChange(result);
+          }}
+        />
+      )} */}
+    </View>
+  );
+};

package/src/TextFieldNumberActionSheet.tsx

@@ -0,0 +1,46 @@
+import DateTimePicker from "@react-native-community/datetimepicker";
+import React from "react";
+
+import {ActionSheet} from "./ActionSheet";
+import {Box} from "./Box";
+import {Button} from "./Button";
+import type {TextFieldPickerActionSheetProps} from "./Common";
+
+type NumberPickerActionSheetState = {};
+
+export class NumberPickerActionSheet extends React.Component<
+  TextFieldPickerActionSheetProps,
+  NumberPickerActionSheetState
+> {
+  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="Save"
+              />
+            </Box>
+          </Box>
+          <DateTimePicker
+            display="spinner"
+            is24Hour
+            mode={this.props.mode}
+            onChange={(_event: any, date?: Date) => {
+              if (!date) {
+                return;
+              }
+              this.props.onChange(date.toString());
+            }}
+            testID="dateTimePicker"
+            value={this.props.value ? new Date(this.props.value) : new Date()}
+          />
+        </Box>
+      </ActionSheet>
+    );
+  }
+}

package/src/Theme.tsx

@@ -0,0 +1,248 @@
+import React, {createContext, useMemo, useState} from "react";
+
+import type {TerrenoTheme, TerrenoThemeConfig, ThemePrimitives} from "./Common";
+
+const defaultPrimitives = {
+  accent000: "#FFFDF7",
+  accent050: "#FCECC2",
+  accent100: "#F9E0A1",
+  accent200: "#F7D582",
+  accent300: "#F2CB62",
+  accent400: "#E5B132",
+  accent500: "#D69C0E",
+  accent600: "#B58201",
+  accent700: "#956A00",
+  accent800: "#543C00",
+  accent900: "#332400",
+
+  error000: "#FDD7D7",
+  error100: "#D33232",
+  error200: "#BD1111",
+  neutral000: "#FFFFFF",
+  neutral050: "#F2F2F2",
+  neutral100: "#E6E6E6",
+  neutral200: "#D9D9D9",
+  neutral300: "#CDCDCD",
+  neutral400: "#B3B3B3",
+  neutral500: "#9A9A9A",
+  neutral600: "#686868",
+  neutral700: "#4E4E4E",
+  neutral800: "#353535",
+  neutral900: "#1C1C1C",
+
+  primary000: "#EBFAFF",
+  primary050: "#BCE9F7",
+  primary100: "#90D8F0",
+  primary200: "#73CAE8",
+  primary300: "#40B8E0",
+  primary400: "#0E9DCD",
+  primary500: "#0086B3",
+  primary600: "#0A7092",
+  primary700: "#035D7E",
+  primary800: "#004B64",
+  primary900: "#013749",
+  radius2xl: 128,
+  radius3xl: 360,
+  radiusLg: 16,
+  radiusMd: 4,
+
+  radiusSm: 2,
+  radiusXl: 32,
+
+  secondary000: "#F2F9FA",
+  secondary050: "#D7E5EA",
+  secondary100: "#B6CDD5",
+  secondary200: "#9EB7BF",
+  secondary300: "#87A1AA",
+  secondary400: "#608997",
+  secondary500: "#2B6072",
+  secondary600: "#1C4E5F",
+  secondary700: "#0F3D4D",
+  secondary800: "#092E3A",
+  secondary900: "#041E27",
+
+  spacing0: 0,
+  spacing1: 4,
+  spacing2: 8,
+  spacing3: 12,
+  spacing4: 16,
+  spacing5: 24,
+  spacing6: 32,
+  spacing7: 40,
+  spacing8: 48,
+  spacing9: 56,
+  spacing10: 64,
+  spacing11: 72,
+  spacing12: 80,
+
+  success000: "#DCF2E2",
+  success100: "#3EA45C",
+  success200: "#1A7F36",
+
+  warning000: "#FFE3C6",
+  warning100: "#F36719",
+  warning200: "#B14202",
+};
+
+const defaultTheme: TerrenoThemeConfig = {
+  border: {
+    activeAccent: "accent500",
+    activeNeutral: "neutral700",
+    dark: "neutral500",
+    default: "neutral300",
+    error: "error100",
+    focus: "primary200",
+    hover: "neutral200",
+    success: "success100",
+    warning: "warning100",
+  },
+
+  // These will continue to throw errors until we have a proper font system in place.
+  // TODO: currently to use these, you need to set fontFamily to "text" or "heading",
+  // not theme.font.primary or theme.font.title.
+  font: {
+    primary: "Nunito",
+    title: "Titillium Web",
+  },
+  primitives: defaultPrimitives,
+  radius: {
+    default: "radiusMd",
+    full: "radiusLg",
+    minimal: "radiusSm",
+    rounded: "radius3xl",
+  },
+  spacing: {
+    "2xl": "spacing8",
+    "3xl": "spacing12",
+    lg: "spacing5",
+    md: "spacing4",
+    none: "spacing0",
+    sm: "spacing2",
+    xl: "spacing6",
+    xs: "spacing1",
+  },
+  status: {
+    active: "success100",
+    away: "neutral500",
+    doNotDisturb: "error100",
+  },
+  surface: {
+    base: "neutral000",
+    disabled: "neutral500",
+    error: "error200",
+    errorLight: "error000",
+    neutral: "neutral600",
+    neutralDark: "neutral800",
+    neutralLight: "neutral200",
+    primary: "primary400",
+    secondaryDark: "secondary500",
+    secondaryExtraDark: "secondary800",
+    secondaryLight: "secondary100",
+    success: "success200",
+    successLight: "success000",
+    warning: "warning100",
+    warningLight: "warning000",
+  },
+  text: {
+    accent: "accent700",
+    error: "error200",
+    extraLight: "neutral500",
+    inverted: "neutral000",
+    link: "primary600",
+    linkLight: "primary400",
+    primary: "neutral900",
+    secondaryDark: "secondary800",
+    // TODO: ask jo about the naming here, secondaryDark is a blue, secondaryLight is a gray.
+    secondaryLight: "neutral600",
+    success: "success200",
+    warning: "warning200",
+  },
+};
+
+type DeepPartial<T> = {
+  [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
+};
+
+export const ThemeContext = createContext({
+  resetTheme: () => {},
+  setPrimitives: (_primitives: DeepPartial<typeof defaultPrimitives>) => {},
+  setTheme: (_theme: DeepPartial<TerrenoThemeConfig>) => {},
+  theme: {} as TerrenoTheme,
+});
+
+interface ThemeProviderProps {
+  children: any;
+}
+
+export const ThemeProvider = ({children}: ThemeProviderProps) => {
+  const [providerTheme, setProviderTheme] = useState<DeepPartial<TerrenoThemeConfig>>(defaultTheme);
+  const [providerPrimitives, setProviderPrimitives] = useState<ThemePrimitives>(defaultPrimitives);
+
+  const computedTheme = useMemo(() => {
+    // Map the providerTheme and transform the strings into the actual values from the primitives.
+    // Do this for each sub-object in the theme. E.g. theme.text, theme.surface, etc.
+    const theme = Object.keys(providerTheme).reduce((acc, key) => {
+      if (key === "primitives") return acc;
+      const value = providerTheme[key as keyof TerrenoThemeConfig] ?? {};
+      // for each key, map the value to the primitive value.
+      acc[key as keyof TerrenoTheme] = Object.keys(value).reduce((accKey, valueKey) => {
+        const primitiveKey = value[valueKey as keyof typeof value] as keyof ThemePrimitives;
+        if (key === "font") {
+          accKey[valueKey] = primitiveKey;
+        } else {
+          if (providerPrimitives[primitiveKey] === undefined) {
+            console.error(`Primitive ${primitiveKey} not found in theme.`);
+          }
+          accKey[valueKey as keyof typeof accKey] = providerPrimitives[primitiveKey];
+        }
+        return accKey;
+      }, {} as any);
+      return acc;
+    }, {} as TerrenoTheme);
+    return {
+      ...theme,
+      primitives: providerPrimitives,
+    };
+  }, [providerTheme, providerPrimitives]);
+
+  const setPrimitives = (newPrimitives: Partial<ThemePrimitives>) => {
+    setProviderPrimitives((prev) => ({...prev, ...newPrimitives}));
+  };
+
+  const setTheme = (newTheme: DeepPartial<TerrenoThemeConfig>) => {
+    setProviderTheme((prev) => {
+      const mergedTheme = {...prev};
+
+      for (const key in newTheme) {
+        if (Object.hasOwn(newTheme, key)) {
+          const newSubTheme = newTheme[key as keyof TerrenoThemeConfig];
+          const prevSubTheme = prev[key as keyof TerrenoThemeConfig];
+
+          if (newSubTheme && typeof newSubTheme === "object") {
+            (mergedTheme as any)[key as keyof TerrenoThemeConfig] = {
+              ...prevSubTheme,
+              ...newSubTheme,
+            };
+          } else {
+            mergedTheme[key as keyof TerrenoThemeConfig] = newSubTheme as any;
+          }
+        }
+      }
+
+      return mergedTheme;
+    });
+  };
+
+  const resetTheme = () => {
+    setProviderTheme(defaultTheme);
+    setProviderPrimitives(defaultPrimitives);
+  };
+
+  return (
+    <ThemeContext.Provider value={{resetTheme, setPrimitives, setTheme, theme: computedTheme}}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+export const useTheme = () => React.useContext(ThemeContext);

package/src/TimezonePicker.tsx

@@ -0,0 +1,45 @@
+import React, {type FC} from "react";
+
+import type {SelectFieldPropsBase} from "./Common";
+import {getTimezoneOptions} from "./DateUtilities";
+import {SelectField} from "./SelectField";
+
+interface TimezonePickerProps extends Omit<SelectFieldPropsBase, "options"> {
+  timezone?: string;
+  onChange: (value: string) => void;
+  location?: "USA" | "Worldwide";
+  hideTitle?: boolean;
+  shortTimezone?: boolean;
+}
+
+export const TimezonePicker: FC<TimezonePickerProps> = ({
+  timezone,
+  onChange,
+  location = "USA",
+  hideTitle = false,
+  shortTimezone = false,
+  ...fieldProps
+}: TimezonePickerProps): React.ReactElement => {
+  const tzOptions = React.useMemo(
+    () => getTimezoneOptions(location, shortTimezone),
+    [location, shortTimezone]
+  );
+
+  // Check that value is in the list of options
+  const valueIndex = tzOptions.findIndex((t) => t.value === timezone);
+  if (valueIndex === -1) {
+    console.warn(`${timezone} is not a valid timezone`);
+  }
+
+  const title = hideTitle ? undefined : "Timezone";
+
+  return (
+    <SelectField
+      title={title}
+      {...fieldProps}
+      onChange={onChange}
+      options={tzOptions}
+      value={timezone}
+    />
+  );
+};