ferns-ui 0.47.9 → 1.0.0-beta.0

package/src/DateTimeField.tsx

@@ -1,69 +1,176 @@
-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 {getCalendars} from "expo-localization";
+import {DateTime} from "luxon";
+import React, {useCallback, useState} from "react";
 
-import {Box} from "./Box";
-import {DateTimeFieldProps, WithChildren} from "./Common";
-import {WithLabel} from "./WithLabel";
+import {DateTimeFieldProps} from "./Common";
+import {DateTimeActionSheet} from "./DateTimeActionSheet";
+import {printDate, printDateAndTime, printTime} from "./DateUtilities";
+import {TextField} from "./TextField";
 
 export const DateTimeField = ({
-  mode,
+  type,
   value,
   onChange,
-  errorMessage,
-  errorMessageColor,
-}: WithChildren<DateTimeFieldProps>): ReactElement => {
+  timezone: tz,
+  ...rest
+}: DateTimeFieldProps): React.ReactElement => {
+  const calendar = getCalendars()[0];
+  const timezone = (tz || calendar?.timeZone) ?? "UTC"; // Fallback to UTC if timezone is undefined
+
+  const formatValue = useCallback(
+    (val: string) => {
+      switch (type) {
+        case "time":
+          return printTime(val, {timezone, showTimezone: true});
+        case "datetime":
+          return printDateAndTime(val, {timezone, showTimezone: true});
+        case "date":
+        default:
+          return printDate(val, {timezone, showTimezone: true});
+      }
+    },
+    [timezone, type]
+  );
+
+  const formatInputDate = useCallback(
+    (input: string) => {
+      const cleanedInput = input.replace(/[^0-9]/g, ""); // Remove non-numeric characters
+      let formatted = input;
+
+      switch (type) {
+        case "time":
+          if (cleanedInput.length >= 2) {
+            formatted = `${cleanedInput.slice(0, 2)}:${cleanedInput.slice(2, 4)}`;
+          } else {
+            formatted = cleanedInput;
+          }
+          break;
+        case "datetime":
+          if (cleanedInput.length >= 2) {
+            formatted = `${cleanedInput.slice(0, 2)}`;
+            if (cleanedInput.length > 2) {
+              formatted += `/${cleanedInput.slice(2, 4)}`;
+            }
+            if (cleanedInput.length > 4) {
+              formatted += `/${cleanedInput.slice(4, 8)}`;
+            }
+            if (cleanedInput.length > 8) {
+              formatted += ` ${cleanedInput.slice(8, 10)}:${cleanedInput.slice(10, 12)}`;
+            }
+          }
+          break;
+        case "date":
+        default:
+          if (cleanedInput.length >= 2) {
+            formatted = `${cleanedInput.slice(0, 2)}`;
+            if (cleanedInput.length > 2) {
+              formatted += `/${cleanedInput.slice(2, 4)}`;
+            }
+            if (cleanedInput.length > 4) {
+              formatted += `/${cleanedInput.slice(4, 8)}`;
+            }
+          }
+          break;
+      }
+
+      return formatted;
+    },
+    [type]
+  );
+
+  const dateActionSheetRef: React.RefObject<any> = React.createRef();
+  const [formattedDate, setFormattedDate] = useState<string>(value ? formatValue(value) : "");
+  const [showDate, setShowDate] = useState(false);
+  const [error, setError] = useState<string>("");
+
+  const onTextFieldChange = useCallback(
+    (inputDate: string) => {
+      const formattedInput = formatInputDate(inputDate);
+      const cleanedInput = formattedInput.replace(/[^0-9]/g, "");
+
+      let parsedDate;
+      if (type === "datetime" && cleanedInput.length === 12) {
+        const month = cleanedInput.slice(0, 2);
+        const day = cleanedInput.slice(2, 4);
+        const year = cleanedInput.slice(4, 8);
+        const hour = cleanedInput.slice(8, 10);
+        const minute = cleanedInput.slice(10, 12);
+        parsedDate = DateTime.fromFormat(`${month}${day}${year}${hour}${minute}`, "MMddyyyyHHmm", {
+          zone: timezone,
+        });
+      } else if (type === "time" && cleanedInput.length === 4) {
+        const hour = cleanedInput.slice(0, 2);
+        const minute = cleanedInput.slice(2, 4);
+        parsedDate = DateTime.fromFormat(`${hour}${minute}`, "HHmm", {
+          zone: timezone,
+        });
+      } else if (type === "date" && cleanedInput.length === 8) {
+        const month = cleanedInput.slice(0, 2);
+        const day = cleanedInput.slice(2, 4);
+        const year = cleanedInput.slice(4, 8);
+        parsedDate = DateTime.fromFormat(`${month}${day}${year}`, "MMddyyyy", {
+          zone: timezone,
+        });
+      }
+
+      if (parsedDate?.isValid) {
+        setFormattedDate(formatValue(parsedDate.toISO()));
+        setError("");
+        onChange(parsedDate.toISO());
+      } else if (cleanedInput.length > (type === "datetime" ? 12 : type === "time" ? 4 : 8)) {
+        setError("Invalid date/time");
+        setFormattedDate(formattedInput);
+        onChange("");
+      } else {
+        setFormattedDate(formattedInput);
+        setError("");
+      }
+    },
+    [formatInputDate, type, timezone, formatValue, onChange]
+  );
+
+  const onActionSheetChange = useCallback(
+    (inputDate: string) => {
+      onChange(inputDate);
+      setFormattedDate(formatValue(inputDate));
+      setShowDate(false);
+      setError("");
+    },
+    [formatValue, onChange]
+  );
+
+  let placeholder: string = "";
+  if (type === "time") {
+    placeholder = "hh:mm a";
+  } else if (type === "datetime") {
+    placeholder = "MM/dd/yyyy hh:mm a";
+  } else if (type === "date") {
+    placeholder = "MM/dd/yyyy";
+  }
+
   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>
+    <>
+      <TextField
+        errorText={error}
+        iconName={type === "time" ? "clock" : "calendar"}
+        placeholder={placeholder}
+        type="text"
+        value={formattedDate}
+        onChange={onTextFieldChange}
+        onIconClick={() => {
+          setShowDate(true);
+        }}
+        {...rest}
+      />
+      <DateTimeActionSheet
+        actionSheetRef={dateActionSheetRef}
+        timezone={timezone}
+        type={type}
+        value={value}
+        visible={showDate}
+        onChange={onActionSheetChange}
+        onDismiss={() => setShowDate(false)}
+      />
+    </>
   );
 };

package/src/DateUtilities.test.ts

@@ -1,5 +1,3 @@
-// Write a jest test for the DateUtilities functions
-
 import {
   humanDate,
   humanDateAndTime,
@@ -350,10 +348,16 @@ describe("DateUtilities", function () {
 
     it("should return the time in the default format", function () {
       expect(printTime("2022-12-24T12:00:00.000Z", {timezone: "America/New_York"})).toBe("7:00 AM");
+      expect(printTime("2022-12-24T12:00:00.000-0400", {timezone: "America/New_York"})).toBe(
+        "11:00 AM"
+      );
     });
 
     it("should return the time in the default format", function () {
       expect(printTime("2022-12-24T12:00:00.000Z", {timezone: "America/Chicago"})).toBe("6:00 AM");
+      expect(printTime("2022-12-24T12:00:00.000-0400", {timezone: "America/Chicago"})).toBe(
+        "10:00 AM"
+      );
     });
   });
 

package/src/DateUtilities.tsx

@@ -4,7 +4,7 @@ function getDate(date: string, {timezone}: {timezone?: string} = {}): DateTime {
   if (!date) {
     throw new Error("Passed undefined");
   }
-  if (typeof (date as any) !== "string") {
+  if (typeof date !== "string") {
     throw new Error(`Invalid date type: ${typeof date}`);
   }
   const clonedDate = timezone ? DateTime.fromISO(date).setZone(timezone) : DateTime.fromISO(date);

package/src/DecimalRangeActionSheet.tsx

@@ -28,10 +28,7 @@ export class DecimalRangeActionSheet extends React.Component<
           <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);
                 }}
@@ -51,13 +48,10 @@ export class DecimalRangeActionSheet extends React.Component<
                 }}
                 onValueChange={(whole) => {
                   this.setState({whole: String(whole)});
-                  this.props.onChange({
-                    value: String(Number(whole) + Number(this.state.decimal) * 0.1),
-                  });
+                  this.props.onChange(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>
@@ -73,17 +67,8 @@ export class DecimalRangeActionSheet extends React.Component<
                   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),
-                  });
+                  this.props.onChange(String(Number(this.state.whole) + Number(decimal) * 0.1));
                 }}
               >
                 {range(0, 10).map((n) => {

package/src/DismissButton.tsx

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

package/src/EmailField.tsx

@@ -0,0 +1,70 @@
+import React, {FC, useCallback, useState} from "react";
+
+import {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 || "");
+  const [error, setError] = useState<string | undefined>(errorText);
+
+  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 handleBlur = useCallback(
+    (email: string) => {
+      if (onBlur) {
+        onBlur(email);
+      }
+      const validationError = validateEmail(email);
+      if (validationError) {
+        setError(validationError);
+      } else {
+        setError(undefined);
+      }
+    },
+    [onBlur, validateEmail]
+  );
+
+  const handleChange = useCallback(
+    (email: string) => {
+      setLocalValue(email);
+      const validationError = validateEmail(email);
+      if (error && !validationError) {
+        setError(undefined);
+      }
+      if (!validationError) {
+        onChange(email);
+      }
+    },
+    [onChange, error, validateEmail]
+  );
+
+  return (
+    <TextField
+      errorText={error}
+      iconName={iconName}
+      placeholder={placeholder}
+      type="email"
+      value={localValue}
+      onBlur={(e) => handleBlur(e)}
+      onChange={(e) => handleChange(e)}
+      {...rest}
+    />
+  );
+};

package/src/ErrorPage.tsx

@@ -22,7 +22,7 @@ export class ErrorPage extends React.Component<ErrorPageProps, {}> {
         padding={6}
         width="100%"
       >
-        <Text align="center" color="red" size="lg" weight="bold">
+        <Text align="center" bold color="error" size="lg">
           Oops!
         </Text>
         <Box paddingY={3}>
@@ -34,7 +34,7 @@ export class ErrorPage extends React.Component<ErrorPageProps, {}> {
         <Box paddingY={3}>
           <Text>{this.props.error.toString()}</Text>
         </Box>
-        <Button color="blue" text="Try again" onClick={this.props.resetError} />
+        <Button text="Try again" onClick={this.props.resetError} />
       </Box>
     );
   }

package/src/FernsProvider.tsx

@@ -21,7 +21,7 @@ export const FernsProvider = ({
         duration={50000}
         offset={50}
         placement="bottom"
-        renderToast={(toastOptions) => <Toast {...(toastOptions as any)} />}
+        renderToast={(toastOptions) => <Toast {...toastOptions?.data} />}
         swipeEnabled
       >
         <OpenAPIProvider specUrl={openAPISpecUrl}>