@terreno/ui 0.0.1

package/src/MultiselectField.tsx

@@ -0,0 +1,112 @@
+import {type FC, useEffect, useState} from "react";
+import {TouchableOpacity, View} from "react-native";
+
+import {CheckBox} from "./CheckBox";
+import type {MultiselectFieldProps} from "./Common";
+import {FieldError, FieldHelperText} from "./fieldElements";
+import {Heading} from "./Heading";
+import {isMobileDevice} from "./MediaQuery";
+import {Text} from "./Text";
+
+interface OptionProps {
+  isDefault: boolean;
+  value: string;
+  label?: string;
+  selected: boolean;
+  onSelect: () => void;
+}
+
+const Option: FC<OptionProps> = ({value, label, isDefault, selected, onSelect}) => {
+  return (
+    <View
+      style={{
+        display: "flex",
+        flexDirection: isDefault ? "row" : "row-reverse",
+        justifyContent: "space-between",
+      }}
+    >
+      <View style={{flex: 1, flexWrap: "wrap"}}>
+        <Text>{label ?? value}</Text>
+      </View>
+      <TouchableOpacity
+        accessibilityHint={`Select ${label ?? value} from list of options`}
+        aria-label={label ?? value}
+        aria-role="checkbox"
+        hitSlop={{bottom: 10, left: 10, right: 10, top: 10}}
+        key={value}
+        onPress={onSelect}
+        style={{
+          justifyContent: "center",
+        }}
+      >
+        <View
+          style={{
+            paddingEnd: isDefault ? 0 : 8,
+            paddingStart: isDefault ? 8 : 0,
+          }}
+        >
+          <CheckBox selected={selected} />
+        </View>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export const MultiselectField: FC<MultiselectFieldProps> = ({
+  options,
+  title,
+  value = [],
+  variant = "leftText",
+  onChange,
+  errorText,
+  helperText,
+  disabled,
+}) => {
+  const isMobile = isMobileDevice();
+  const isDefault = variant === "leftText";
+  const [selectedItems, setSelectedItems] = useState<string[]>(value);
+  // set the selected items to the value passed in the props
+  useEffect(() => {
+    setSelectedItems(value);
+  }, [value]);
+
+  const toggleItem = (item: string) => {
+    const newSelectedItems = selectedItems.includes(item)
+      ? selectedItems.filter((selected) => selected !== item)
+      : [...selectedItems, item];
+    setSelectedItems(newSelectedItems);
+    onChange(newSelectedItems);
+  };
+  return (
+    <View
+      accessibilityHint="Contains a prompt and list of options to select"
+      aria-label={title}
+      aria-role="combobox"
+      style={{
+        display: "flex",
+        gap: isMobile ? 16 : 8,
+        width: "100%",
+      }}
+    >
+      <Heading color="primary" size="sm">
+        {title}
+      </Heading>
+      {Boolean(errorText) && <FieldError text={errorText!} />}
+      {disabled ? (
+        <Text>{value.join(", ")}</Text>
+      ) : (
+        options.map((option) => (
+          <Option
+            isDefault={isDefault}
+            key={option.key ?? option.value}
+            label={option.label}
+            onSelect={() => toggleItem(option.value)}
+            selected={selectedItems.includes(option.value)}
+            value={option.value}
+          />
+        ))
+      )}
+      {Boolean(helperText) && <FieldHelperText text={helperText!} />}
+    </View>
+  );
+};

package/src/NumberField.tsx

@@ -0,0 +1,67 @@
+import {type FC, useCallback, useEffect, useState} from "react";
+
+import type {NumberFieldProps} from "./Common";
+import {TextField} from "./TextField";
+
+export const NumberField: FC<NumberFieldProps> = ({
+  errorText,
+  value: valueProp,
+  max,
+  min,
+  type,
+  onChange,
+  ...rest
+}: NumberFieldProps) => {
+  const [value, setValue] = useState(valueProp ?? "");
+
+  // Sync local state with incoming prop values
+  useEffect(() => {
+    setValue(valueProp ?? "");
+  }, [valueProp]);
+
+  const getError = useCallback(
+    (newV?: string) => {
+      const v = String(newV);
+      if (!v) {
+        return;
+      }
+      const num = type === "number" ? parseInt(v, 10) : parseFloat(v);
+      if (Number.isNaN(num) || (type === "number" && v.match(/[^0-9]/) !== null)) {
+        return "Value must be an integer";
+      } else if (
+        (type === "decimal" && v.match(/[^0-9.]+/) !== null) ||
+        (v.match(/\./g) || []).length > 1
+      ) {
+        return "Value must be a decimal";
+      } else if (max !== undefined && num > max) {
+        return `Value must be less than or equal to ${max}`;
+      } else if (min !== undefined && num < min) {
+        return `Value must be greater than or equal to ${min}`;
+      }
+      return undefined;
+    },
+    [max, min, type]
+  );
+
+  const error = errorText || getError(value);
+
+  // Only return the value if it is a valid number
+  const localOnChange = useCallback(
+    (v: string) => {
+      if (type === "decimal" && v === ".") {
+        // if type is decimal and dot is the first character add 0 before it
+        setValue("0.");
+        onChange("0.");
+        return;
+      }
+      const err = getError(v);
+      if (!err) {
+        setValue(v);
+        onChange(v);
+      }
+    },
+    [getError, onChange, type]
+  );
+
+  return <TextField {...rest} errorText={error} onChange={localOnChange} value={value} />;
+};

package/src/NumberPickerActionSheet.tsx

@@ -0,0 +1,51 @@
+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 {NumberPickerActionSheetProps} from "./Common";
+
+const PICKER_HEIGHT = 104;
+
+type NumberPickerActionSheetState = {};
+
+export class NumberPickerActionSheet extends React.Component<
+  NumberPickerActionSheetProps,
+  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="Close"
+              />
+            </Box>
+          </Box>
+          <Picker
+            itemStyle={{
+              height: PICKER_HEIGHT,
+            }}
+            onValueChange={(itemValue) => this.props.onChange(String(itemValue))}
+            selectedValue={String(this.props.value)}
+            style={{
+              backgroundColor: "#FFFFFF",
+              height: PICKER_HEIGHT,
+            }}
+          >
+            {range(this.props.min, this.props.max).map((n) => (
+              <Picker.Item key={String(n)} label={String(n)} value={String(n)} />
+            ))}
+          </Picker>
+        </Box>
+      </ActionSheet>
+    );
+  }
+}

package/src/OpenAPIContext.tsx

@@ -0,0 +1,74 @@
+import camelCase from "lodash/camelCase";
+import type React from "react";
+import {createContext, useContext, useEffect, useState} from "react";
+
+import type {
+  ModelFieldConfig,
+  ModelFields,
+  OpenAPIContextType,
+  OpenAPIProviderProps,
+  OpenAPISpec,
+} from "./Common";
+
+const OpenAPIContext = createContext<OpenAPIContextType | null>(null);
+
+export const OpenAPIProvider = ({children, specUrl}: OpenAPIProviderProps): React.ReactElement => {
+  const [spec, setSpec] = useState<OpenAPISpec | null>(null);
+
+  const getModelFields = (modelName: string): ModelFields | null => {
+    const modelPath = `/${camelCase(modelName.replace(/\s/g, ""))}/`;
+    const rootConfig = spec?.paths?.[modelPath];
+    if (!rootConfig) {
+      if (spec?.paths && modelName) {
+        console.warn(`No OpenAPI model found for ${modelName}`);
+      }
+      return null;
+    }
+
+    return rootConfig?.get?.responses?.["200"]?.content?.["application/json"]?.schema?.properties
+      ?.data?.items;
+  };
+
+  const getModelField = (modelName: string, fieldName: string): ModelFieldConfig => {
+    const fields = getModelFields(modelName);
+    const dotFields = fieldName.split(".");
+
+    let field = fields?.properties?.[dotFields[0]];
+    if (!field && fieldName && fields?.properties) {
+      console.warn(`No OpenAPI field found for ${modelName}:${fieldName}`);
+    }
+
+    for (const dotField of dotFields.slice(1)) {
+      field = (field?.properties as any)?.[dotField];
+    }
+    return field;
+  };
+
+  // Fetch the OpenAPI spec from the provided URL.
+  useEffect((): void => {
+    if (!specUrl) {
+      return;
+    }
+
+    fetch(specUrl)
+      .then(async (response) => {
+        const data = (await response.json()) as OpenAPISpec;
+        setSpec(data);
+      })
+      .catch((error: any) => console.error(`Error fetching OpenAPI spec: ${error}`));
+  }, [specUrl]);
+
+  return (
+    <OpenAPIContext.Provider value={{getModelField, getModelFields, spec}}>
+      {children}
+    </OpenAPIContext.Provider>
+  );
+};
+
+export const useOpenAPISpec = () => {
+  const context = useContext(OpenAPIContext);
+  if (!context) {
+    throw new Error("useOpenAPISpec must be used within an OpenAPIProvider");
+  }
+  return context;
+};

package/src/Page.tsx

@@ -0,0 +1,105 @@
+import React from "react";
+
+import {Box} from "./Box";
+import {Button} from "./Button";
+import type {PageProps} from "./Common";
+import {ErrorBoundary} from "./ErrorBoundary";
+import {Heading} from "./Heading";
+import {IconButton} from "./IconButton";
+import {Spinner} from "./Spinner";
+
+export class Page extends React.Component<PageProps, {}> {
+  actionSheetRef: React.RefObject<any> = React.createRef();
+
+  renderHeader() {
+    if (!this.props.title && !this.props.backButton) {
+      return null;
+    }
+    return (
+      <Box direction="row" display="flex" width="100%">
+        {this.props.backButton && (
+          <Box alignItems="center" display="block" justifyContent="center" paddingY={3}>
+            <IconButton
+              accessibilityHint="Navigate back"
+              accessibilityLabel=""
+              iconName="chevron-left"
+              onClick={() => this.props.navigation.goBack()}
+            />
+          </Box>
+        )}
+        {this.props.closeButton && (
+          <Box alignItems="center" display="block" justifyContent="center" paddingY={3}>
+            <IconButton
+              accessibilityHint="Close page"
+              accessibilityLabel=""
+              iconName="xmark"
+              onClick={() => this.props.navigation.goBack()}
+            />
+          </Box>
+        )}
+        {Boolean(this.props.title) && (
+          <Box direction="column" display="flex" flex="grow" justifyContent="center">
+            <Heading align="center">{this.props.title}</Heading>
+          </Box>
+        )}
+        {this.props.rightButton && (
+          <Box alignItems="center" display="block" justifyContent="center" paddingY={3}>
+            <Button
+              onClick={() => this.props.rightButtonOnClick?.()}
+              text={this.props.rightButton}
+              variant="muted"
+            />
+          </Box>
+        )}
+      </Box>
+    );
+  }
+
+  render() {
+    return (
+      <ErrorBoundary onError={this.props.onError}>
+        <Box
+          alignSelf="center"
+          avoidKeyboard
+          color={this.props.color || "base"}
+          direction={this.props.direction || "column"}
+          display={this.props.display || "flex"}
+          flex="grow"
+          height="100%"
+          keyboardOffset={this.props.keyboardOffset}
+          maxWidth={this.props.maxWidth || 800}
+          padding={this.props.padding !== undefined ? this.props.padding : 2}
+          scroll={this.props.scroll === undefined ? true : this.props.scroll}
+          width="100%"
+        >
+          {this.renderHeader()}
+          {this.props.loading === true && <Spinner />}
+          {/* <KeyboardAccessoryNavigation
+          avoidKeyboard
+          doneButton={true}
+          nextButton={true}
+          previousButton={true}
+        /> */}
+
+          {this.props.children}
+        </Box>
+        {Boolean(this.props.footer) && (
+          <Box
+            alignSelf="center"
+            color={this.props.color || "neutralLight"}
+            direction={this.props.direction || "column"}
+            display={this.props.display || "flex"}
+            flex="shrink"
+            marginBottom={8}
+            maxWidth={this.props.maxWidth || 800}
+            paddingX={this.props.padding !== undefined ? this.props.padding : 6}
+            paddingY={this.props.padding !== undefined ? this.props.padding : 2}
+            width="100%"
+          >
+            {this.props.footer}
+          </Box>
+        )}
+      </ErrorBoundary>
+    );
+  }
+}

package/src/Pagination.tsx

@@ -0,0 +1,169 @@
+import {type FC, useMemo} from "react";
+import {Pressable, View} from "react-native";
+
+import type {IconName, PaginationProps} from "./Common";
+import {Icon} from "./Icon";
+import {Text} from "./Text";
+import {useTheme} from "./Theme";
+
+const PaginationButton: FC<{
+  type: "first" | "prev" | "next" | "last" | "more";
+  onClick: () => void;
+  totalPages?: number;
+  page?: number;
+}> = ({type, onClick, totalPages = 1, page = 1}) => {
+  let icon: IconName;
+  let disabled = false;
+
+  if (type === "prev") {
+    icon = "angle-left";
+    disabled = page <= 1;
+  } else if (type === "next") {
+    icon = "angle-right";
+    disabled = page >= totalPages;
+  } else if (type === "more") {
+    icon = "ellipsis";
+  } else {
+    throw new Error(`Invalid Pagination Button type ${type}`);
+  }
+  // TODO: Show text input when tapping more.
+
+  return (
+    <Pressable
+      accessibilityHint={`Click to go to ${type} page`}
+      aria-label="Pagination Button"
+      disabled={disabled}
+      onPress={onClick}
+      style={{
+        alignItems: "center",
+        display: "flex",
+        height: 32,
+        justifyContent: "center",
+        width: 32,
+      }}
+    >
+      <Icon color={disabled ? "extraLight" : "primary"} iconName={icon} size="md" />
+    </Pressable>
+  );
+};
+
+const PaginationNumber: FC<{
+  number: number | "more";
+  current: boolean;
+  onClick: () => void;
+}> = ({number, current, onClick}) => {
+  // Shortcut to make rendering the number buttons easier.
+  if (number === "more") {
+    return <PaginationButton onClick={() => {}} type="more" />;
+  }
+  return (
+    <Pressable
+      accessibilityHint={`Click to go to page ${number}`}
+      accessibilityLabel="Pagination Number"
+      onPress={onClick}
+      style={{
+        alignItems: "center",
+        borderRadius: 4,
+        display: "flex",
+        height: 32,
+        justifyContent: "center",
+        width: 32,
+      }}
+    >
+      <Text color={current ? "accent" : "primary"}>{number}</Text>
+    </Pressable>
+  );
+};
+
+export const Pagination: FC<PaginationProps> = ({totalPages, page, setPage}) => {
+  const {theme} = useTheme();
+
+  // Determine the number of pages to show. Show the first page,
+  // the page before and after the current page, and the last page.
+  const pages: (number | "more")[] = useMemo(() => {
+    const pagesResult: (number | "more")[] = [];
+
+    if (totalPages < 6) {
+      for (let i = 1; i <= totalPages; i++) {
+        pagesResult.push(i);
+      }
+    } else {
+      pagesResult.push(1);
+
+      if (page > 3) {
+        pagesResult.push("more");
+      } else {
+        pagesResult.push(2);
+        pagesResult.push(3);
+      }
+
+      // This is to help sort the last few numbers of the total pages behind the current page.
+      if (page > totalPages - 2 && !pagesResult.includes(totalPages - 2)) {
+        pagesResult.push(totalPages - 2);
+      }
+
+      if (page > totalPages - 1 && !pagesResult.includes(totalPages - 1)) {
+        pagesResult.push(totalPages - 1);
+      }
+
+      if (!pagesResult.includes(page)) {
+        pagesResult.push(page);
+      }
+
+      if (page < totalPages - 2) {
+        pagesResult.push("more");
+      } else if (page !== totalPages && !pagesResult.includes(totalPages - 1)) {
+        pagesResult.push(totalPages - 1);
+      }
+
+      if (!pagesResult.includes(totalPages)) {
+        pagesResult.push(totalPages);
+      }
+    }
+    return pagesResult;
+  }, [page, totalPages]);
+
+  // TODO: Add hover for pagination numbers.
+
+  if (!pages) {
+    return null;
+  }
+  return (
+    <View
+      style={{
+        alignItems: "center",
+        display: "flex",
+        flexDirection: "row",
+        gap: theme.spacing.xs as any,
+      }}
+    >
+      <PaginationButton
+        onClick={() => {
+          if (page > 1) {
+            setPage(page - 1);
+          }
+        }}
+        page={page}
+        totalPages={totalPages}
+        type="prev"
+      />
+      {pages.map((number, index) => (
+        <PaginationNumber
+          current={number === page}
+          key={number === "more" ? `more${index}` : number}
+          number={number}
+          onClick={() => setPage(number as number)}
+        />
+      ))}
+
+      <PaginationButton
+        onClick={() => {
+          setPage(page + 1);
+        }}
+        page={page}
+        totalPages={totalPages}
+        type="next"
+      />
+    </View>
+  );
+};

package/src/PasswordField.tsx

@@ -0,0 +1,7 @@
+import type React from "react";
+
+import {Box} from "./Box";
+
+export const PasswordField = (): React.ReactElement => {
+  return <Box />;
+};

package/src/Permissions.ts

@@ -0,0 +1,43 @@
+// import {Tracking} from "./Tracking";
+// import capitalize from "lodash/capitalize";
+// import Permissions from "react-native-permissions";
+import type {PermissionKind, PermissionStatus} from "./Common";
+
+export async function requestPermissions(_kind: PermissionKind): Promise<PermissionStatus> {
+  return new Promise((_resolve, _reject) => {
+    return "denied";
+  });
+  // const userPropertyKey = `PermissionsFor${capitalize(kind)}`;
+
+  //   let k = kind;
+  //   let options: any = undefined;
+  //   if (kind === "locationAlways") {
+  //     k = "location";
+  //     options = { type: "always" };
+  //   }
+  //   if (Platform.OS === "android" && k === "notification") {
+  //     return;
+  //   }
+
+  //   // TODO check soft request status.
+
+  //   const current = await Permissions.check(MAP[k] as any);
+  //   // Tracking.log(`[permissions] ${k} permissions are ${current}`);
+  //   if (current === "denied" || current === "limited") {
+  //     // Tracking.setUserProperty(userPropertyKey, "false");
+  //     return reject(MAP_RESULTS[current]);
+  //   } else if (current === "granted") {
+  //     // Tracking.setUserProperty(userPropertyKey, "true");
+  //     return resolve("authorized");
+  //   }
+
+  //   const response = await Permissions.request(MAP[k] as any, options);
+  //   if (response === "granted") {
+  //     // Tracking.setUserProperty(userPropertyKey, "true");
+  //     return resolve("authorized");
+  //   } else {
+  //     // Tracking.setUserProperty(userPropertyKey, "false");
+  //     return reject(MAP_RESULTS[response]);
+  //   }
+  // });
+}