ferns-ui 0.36.4 → 0.37.0

package/src/DateTimeField.ios.tsx

@@ -0,0 +1,83 @@
+import DateTimePicker from "@react-native-community/datetimepicker";
+import React, {ReactElement, useMemo, useState} from "react";
+import {TextInput} from "react-native";
+
+import {DateTimeFieldProps} from "./Common";
+import dayjs from "./dayjsExtended";
+import {Unifier} from "./Unifier";
+import {WithLabel} from "./WithLabel";
+
+export const DateTimeField = ({
+  mode,
+  value,
+  onChange,
+  errorMessage,
+  errorMessageColor,
+  dateFormat,
+  pickerType = "inline",
+  label,
+}: DateTimeFieldProps): ReactElement => {
+  const [showPicker, setShowPicker] = useState(false);
+
+  const defaultFormat = useMemo(() => {
+    if (dateFormat) {
+      return dateFormat;
+    } else {
+      if (mode === "date") {
+        return "MMMM Do YYYY";
+      } else if (mode === "time") {
+        return "h:mm a";
+      } else {
+        return "MMMM Do YYYY, h:mm a";
+      }
+    }
+  }, [mode, dateFormat]);
+
+  return (
+    <WithLabel label={label} labelSize="lg">
+      <WithLabel
+        label={errorMessage}
+        labelColor={errorMessageColor || "red"}
+        labelPlacement="after"
+        labelSize="sm"
+      >
+        <TextInput
+          inputMode="none"
+          style={{
+            flex: 1,
+            paddingTop: 10,
+            paddingRight: 10,
+            paddingBottom: 10,
+            paddingLeft: 10,
+            height: 40,
+            width: "100%",
+            color: Unifier.theme.darkGray,
+            fontFamily: Unifier.theme.primaryFont,
+            borderWidth: 1,
+          }}
+          value={dayjs(value).format(defaultFormat)}
+          onPressIn={() => {
+            setShowPicker(!showPicker);
+          }}
+        />
+
+        {showPicker && (
+          <DateTimePicker
+            accentColor={Unifier.theme.primary}
+            display={pickerType}
+            mode={mode}
+            style={{alignSelf: "flex-start"}}
+            testID="dateTimePicker"
+            value={dayjs(value).toDate()}
+            onChange={(event: any, date: any) => {
+              if (!date) {
+                return;
+              }
+              onChange(date);
+            }}
+          />
+        )}
+      </WithLabel>
+    </WithLabel>
+  );
+};

package/src/DateTimeField.tsx

@@ -0,0 +1,69 @@
+import isArray from "lodash/isArray";
+import React, {ReactElement} from "react";
+import DatePicker from "react-date-picker";
+import DateTimePickerWeb from "react-datetime-picker";
+import TimePicker from "react-time-picker";
+
+import {Box} from "./Box";
+import {DateTimeFieldProps, WithChildren} from "./Common";
+import {WithLabel} from "./WithLabel";
+
+export const DateTimeField = ({
+  mode,
+  value,
+  onChange,
+  errorMessage,
+  errorMessageColor,
+}: WithChildren<DateTimeFieldProps>): ReactElement => {
+  return (
+    <WithLabel
+      label={errorMessage}
+      labelColor={errorMessageColor || "red"}
+      labelPlacement="after"
+      labelSize="sm"
+    >
+      <Box flex="grow" maxWidth={300} zIndex="auto">
+        {mode === "datetime" && (
+          <DateTimePickerWeb
+            disableClock
+            value={value}
+            onChange={(newVal) => {
+              if (isArray(newVal) || !newVal) {
+                console.warn("DateTimePicker returned an array", newVal);
+                return;
+              }
+              onChange(newVal);
+            }}
+          />
+        )}
+        {mode === "date" && (
+          <DatePicker
+            value={value}
+            onChange={(newVal) => {
+              if (isArray(newVal) || !newVal) {
+                console.warn("DatePicker returned an array", newVal);
+                return;
+              }
+              onChange(newVal);
+            }}
+          />
+        )}
+        {mode === "time" && (
+          <TimePicker
+            disableClock
+            value={value}
+            onChange={(newVal) => {
+              if (isArray(newVal) || !newVal) {
+                console.warn("TimePicker returned an array", newVal);
+                return;
+              }
+              // TimePicker returns a string or Date, so we need to make sure it's a Date
+              const newDate = new Date(newVal);
+              onChange(newDate);
+            }}
+          />
+        )}
+      </Box>
+    </WithLabel>
+  );
+};

package/src/DecimalRangeActionSheet.tsx

@@ -0,0 +1,113 @@
+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 {OnChangeCallback} from "./Common";
+
+const PICKER_HEIGHT = 104;
+
+interface DecimalRangeActionSheetProps {
+  value: string;
+  min: number;
+  max: number;
+  onChange: OnChangeCallback;
+  actionSheetRef: React.RefObject<any>;
+}
+
+interface DecimalRangeActionSheetState {
+  whole: string;
+  decimal: string;
+}
+
+export class DecimalRangeActionSheet extends React.Component<
+  DecimalRangeActionSheetProps,
+  DecimalRangeActionSheetState
+> {
+  constructor(props: DecimalRangeActionSheetProps) {
+    super(props);
+    this.state = {
+      whole: String(Math.floor(Number(props.value))),
+      decimal: String((Number(props.value) * 10) % 10),
+    };
+  }
+
+  render() {
+    return (
+      <ActionSheet ref={this.props.actionSheetRef} bounceOnOpen gestureEnabled>
+        <Box marginBottom={8} paddingX={4} width="100%">
+          <Box alignItems="end" display="flex" width="100%">
+            <Box width="33%">
+              <Button
+                color="blue"
+                size="lg"
+                text="Close"
+                type="ghost"
+                onClick={() => {
+                  this.props.actionSheetRef?.current?.setModalVisible(false);
+                }}
+              />
+            </Box>
+          </Box>
+          <Box direction="row" width="100%">
+            <Box width="50%">
+              <Picker
+                itemStyle={{
+                  height: PICKER_HEIGHT,
+                }}
+                selectedValue={this.state.whole}
+                style={{
+                  height: PICKER_HEIGHT,
+                  backgroundColor: "#FFFFFF",
+                }}
+                onValueChange={(whole) => {
+                  this.setState({whole: String(whole)});
+                  this.props.onChange({
+                    value: String(Number(whole) + Number(this.state.decimal) * 0.1),
+                  });
+                }}
+              >
+                {range(this.props.min, this.props.max + 1).map((n) => {
+                  // console.log("FIRST", String(n));
+                  return <Picker.Item key={String(n)} label={String(n)} value={String(n)} />;
+                })}
+              </Picker>
+            </Box>
+            <Box width="50%">
+              <Picker
+                itemStyle={{
+                  height: PICKER_HEIGHT,
+                }}
+                selectedValue={this.state.decimal}
+                style={{
+                  height: PICKER_HEIGHT,
+                  backgroundColor: "#FFFFFF",
+                }}
+                onValueChange={(decimal) => {
+                  // console.log(
+                  //   "DECIMAL",
+                  //   decimal,
+                  //   this.state.whole,
+                  //   Number(decimal.toString()) * 0.1,
+                  //   String(this.state.whole + Number(decimal) * 0.1)
+                  // );
+                  this.setState({decimal: String(decimal)});
+                  this.props.onChange({
+                    value: String(Number(this.state.whole) + Number(decimal) * 0.1),
+                  });
+                }}
+              >
+                {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/ErrorBoundary.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+
+import {ErrorBoundaryProps} from "./Common";
+import {ErrorPage} from "./ErrorPage";
+
+interface State {
+  error?: Error;
+}
+
+export class ErrorBoundary extends React.Component<ErrorBoundaryProps, State> {
+  state = {error: undefined};
+
+  static getDerivedStateFromError(error: Error) {
+    console.warn("[ErrorBoundary] Derived error", error);
+    return {error};
+  }
+
+  componentDidCatch(error: Error, info: {componentStack: string}) {
+    console.warn("[ErrorBoundary] Caught error", error);
+
+    if (this.props.onError) {
+      this.props.onError(error, info.componentStack);
+    }
+  }
+
+  resetError = () => {
+    this.setState({error: undefined});
+  };
+
+  render() {
+    const error = this.state.error;
+    if (error) {
+      return <ErrorPage error={error} resetError={this.resetError} />;
+    }
+    return this.props.children;
+  }
+}

package/src/ErrorPage.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+
+import {Box} from "./Box";
+import {Button} from "./Button";
+import {Text} from "./Text";
+interface ErrorPageProps {
+  error: Error;
+  resetError: () => void;
+}
+
+export class ErrorPage extends React.Component<ErrorPageProps, {}> {
+  constructor(props: ErrorPageProps) {
+    super(props);
+    this.state = {};
+  }
+
+  render() {
+    return (
+      <Box
+        alignItems="center"
+        direction="column"
+        display="flex"
+        height="100%"
+        justifyContent="center"
+        padding={6}
+        width="100%"
+      >
+        <Text align="center" color="red" size="lg" weight="bold">
+          Oops!
+        </Text>
+        <Box paddingY={3}>
+          <Text align="center">
+            There&apos;s an error. Sorry! Our team just got a notification about the error so they
+            can fix it as soon as possible!
+          </Text>
+        </Box>
+        <Box paddingY={3}>
+          <Text>{this.props.error.toString()}</Text>
+        </Box>
+        <Button color="blue" text="Try again" onClick={this.props.resetError} />
+      </Box>
+    );
+  }
+}

package/src/FernsProvider.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import {Host} from "react-native-portalize";
+import {ToastProvider} from "react-native-toast-notifications";
+
+import {Toast} from "./Toast";
+
+export function FernsProvider({children}: {children: React.ReactNode}): React.ReactElement {
+  return (
+    <ToastProvider
+      animationDuration={250}
+      animationType="slide-in"
+      duration={50000}
+      offset={50}
+      placement="bottom"
+      renderToast={(toastOptions) => <Toast {...(toastOptions as any)} />}
+      swipeEnabled
+    >
+      <Host>{children}</Host>
+    </ToastProvider>
+  );
+}

package/src/Field.tsx

@@ -0,0 +1,299 @@
+import React from "react";
+
+import {Box} from "./Box";
+import {CheckBox} from "./CheckBox";
+import {AddressInterface, FieldWithLabelsProps, ReactChildren, TextFieldType} from "./Common";
+import {USSTATESLIST} from "./Constants";
+import {CustomSelect} from "./CustomSelect";
+import {FieldWithLabels} from "./FieldWithLabels";
+import {SelectList, SelectListOptions} from "./SelectList";
+import {Switch} from "./Switch";
+import {Text} from "./Text";
+import {TextArea} from "./TextArea";
+import {TextField} from "./TextField";
+
+export interface FieldProps extends FieldWithLabelsProps {
+  name?: string;
+  label?: string;
+  height?: number;
+  type?:
+    | "address"
+    | "boolean"
+    | "currency"
+    | "customSelect"
+    | "date"
+    | "datetime"
+    | "email"
+    | "multiselect"
+    | "number"
+    | "password"
+    | "percent"
+    | "phoneNumber"
+    | "select"
+    | "text"
+    | "textarea"
+    | "time"
+    | "url";
+  rows?: number;
+  value?: any;
+  onChange?: any;
+  options?: SelectListOptions;
+  placeholder?: string;
+  disabled?: boolean;
+  useCheckbox?: boolean;
+}
+
+export const Field = ({
+  name,
+  label,
+  labelColor,
+  height,
+  type,
+  rows,
+  value,
+  onChange,
+  options,
+  placeholder,
+  disabled,
+  errorMessage,
+  errorMessageColor,
+  helperText,
+  helperTextColor,
+}: FieldProps) => {
+  const handleAddressChange = (field: string, newValue: string) => {
+    onChange({...value, [field]: newValue});
+  };
+
+  const handleSwitchChange = (switchValue: boolean) => {
+    onChange(switchValue);
+  };
+
+  const renderField = (): ReactChildren => {
+    if (type === "select") {
+      if (!options) {
+        console.error("Field with type=select require options");
+        return undefined;
+      }
+      return (
+        <SelectList
+          disabled={disabled}
+          id={name}
+          options={options}
+          placeholder={placeholder}
+          value={value}
+          onChange={onChange}
+        />
+      );
+    } else if (type === "multiselect") {
+      if (options === undefined) {
+        console.error("Field with type=multiselect require options");
+        return undefined;
+      }
+      return (
+        <Box width="100%">
+          {options.map((o) => (
+            <Box
+              key={o.label + o.value}
+              alignItems="center"
+              direction="row"
+              justifyContent="between"
+              width="100%"
+            >
+              <Box flex="shrink" marginRight={2}>
+                <Text weight="bold">{o.label}</Text>
+              </Box>
+              <Box>
+                <CheckBox
+                  key={o.label + o.value}
+                  checked={(value ?? []).includes(o.value)}
+                  disabled={disabled}
+                  name={name}
+                  size="sm"
+                  onChange={(result) => {
+                    let newValue;
+                    if (result.value) {
+                      if (value.includes(o.value)) {
+                        console.warn(`Tried to add value that already exists: ${o.value}`);
+                        return;
+                      }
+                      newValue = [...value, o.value];
+                    } else {
+                      newValue = value.filter((v: string) => v !== o.value);
+                    }
+                    onChange(newValue);
+                  }}
+                />
+              </Box>
+            </Box>
+          ))}
+        </Box>
+      );
+    } else if (type === "textarea") {
+      return (
+        <TextArea
+          disabled={disabled}
+          height={height ?? 100}
+          id={name}
+          placeholder={Boolean(value) ? "" : placeholder}
+          rows={rows}
+          value={String(value)}
+          onChange={(result) => onChange(result.value)}
+        />
+      );
+    } else if (type === "boolean") {
+      return (
+        <Switch
+          disabled={disabled}
+          id={name}
+          name={name}
+          switched={Boolean(value)}
+          onChange={(result) => handleSwitchChange(result)}
+        />
+      );
+    } else if (type && ["date", "time", "datetime"].includes(type)) {
+      return (
+        <TextField
+          disabled={disabled}
+          id={name}
+          placeholder={placeholder}
+          type={type as "date" | "time" | "datetime"}
+          value={value}
+          onChange={(result) => onChange(result.value)}
+        />
+      );
+    } else if (type === "address") {
+      const addressValue = value ? value : {};
+      const {
+        address1 = "",
+        address2 = "",
+        city = "",
+        state = "",
+        zipcode = "",
+      }: AddressInterface = addressValue;
+      return (
+        <>
+          <TextField
+            disabled={disabled}
+            id="address1"
+            label="Street Address"
+            type="text"
+            value={address1}
+            onChange={(result) => handleAddressChange("address1", result.value)}
+          />
+          <TextField
+            disabled={disabled}
+            id="address2"
+            label="Apt, suite, etc"
+            type="text"
+            value={address2}
+            onChange={(result) => handleAddressChange("address2", result.value)}
+          />
+          <TextField
+            disabled={disabled}
+            id="city"
+            label="City"
+            type="text"
+            value={city}
+            onChange={(result) => handleAddressChange("city", result.value)}
+          />
+          <SelectList
+            disabled={disabled}
+            id="state"
+            label="State"
+            options={USSTATESLIST}
+            placeholder="Select state"
+            style={{borderRadius: 16}}
+            value={state}
+            onChange={(result) => handleAddressChange("state", result)}
+          />
+          <TextField
+            disabled={disabled}
+            id="zipcode"
+            label="Zipcode"
+            type="text"
+            value={zipcode}
+            onChange={(result) => handleAddressChange("zipcode", result.value)}
+          />
+        </>
+      );
+    } else if (type === "customSelect") {
+      if (!options) {
+        console.error("Field with type=customSelect require options");
+        return null;
+      }
+      return (
+        <CustomSelect
+          disabled={disabled}
+          options={options}
+          placeholder={placeholder}
+          value={value}
+          onChange={onChange}
+        />
+      );
+    } else {
+      let tfType: TextFieldType = "text";
+      let tfValue: string = value;
+      // Number is supported differently because we need fractional numbers and they don't work
+      // well on iOS.
+      if (
+        type &&
+        ["date", "time", "datetime", "email", "phoneNumber", "password", "url"].includes(type)
+      ) {
+        tfType = type as TextFieldType;
+      } else if (type === "percent" || type === "currency") {
+        tfType = "text";
+      }
+      let autoComplete: "on" | "current-password" | "username" = "on";
+      if (tfType === "password") {
+        autoComplete = "current-password";
+      } else if (tfType === "email") {
+        autoComplete = "username";
+      }
+      if (type === "percent") {
+        tfValue = `${Number(value).toFixed(0)}%`;
+      } else if (type === "currency") {
+        tfValue = `$${Number(value).toFixed(2)}`;
+      }
+      return (
+        <TextField
+          autoComplete={autoComplete}
+          disabled={disabled}
+          id={name}
+          placeholder={placeholder}
+          type={
+            tfType as
+              | "date"
+              | "datetime"
+              | "email"
+              | "number"
+              | "password"
+              | "phoneNumber"
+              | "text"
+              | "time"
+              | "url"
+          }
+          value={tfValue}
+          onChange={(result) => onChange(result.value)}
+        />
+      );
+    }
+  };
+
+  const children = renderField();
+  return (
+    <Box marginBottom={5}>
+      <FieldWithLabels
+        {...{
+          errorMessage,
+          errorMessageColor,
+          helperText,
+          helperTextColor,
+          label,
+          labelColor,
+        }}
+      >
+        {children}
+      </FieldWithLabels>
+    </Box>
+  );
+};

package/src/FieldWithLabels.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+
+import {FieldWithLabelsProps} from "./Common";
+import {WithLabel} from "./WithLabel";
+
+export const FieldWithLabels = ({
+  children,
+  errorMessage,
+  errorMessageColor = "red",
+  helperText,
+  helperTextColor = "darkGray",
+  label,
+  labelColor = "darkGray",
+}: FieldWithLabelsProps) => {
+  return (
+    <WithLabel
+      label={helperText}
+      labelColor={helperTextColor}
+      labelPlacement="after"
+      labelSize="sm"
+      show={Boolean(helperText)}
+    >
+      <WithLabel
+        label={errorMessage}
+        labelColor={errorMessageColor}
+        labelPlacement="after"
+        labelSize="md"
+        show={Boolean(errorMessage)}
+      >
+        <WithLabel label={label} labelColor={labelColor} show={Boolean(label)}>
+          {children}
+        </WithLabel>
+      </WithLabel>
+    </WithLabel>
+  );
+};