ferns-ui 1.0.0-beta.0 → 1.0.1

package/src/Common.ts

@@ -31,7 +31,7 @@ export interface AccordionProps {
   /**
    * The subtitle of the information modal.
    */
-  infoModalSubTitle?: ModalProps["subTitle"];
+  infoModalSubtitle?: ModalProps["subtitle"];
 
   /**
    * The text content of the information modal.
@@ -49,6 +49,11 @@ export interface AccordionProps {
    */
   isCollapsed?: boolean;
 
+  /*
+   * The subtitle showed below the title of the accordion.
+   */
+  subtitle?: string;
+
   /**
    * The title of the accordion.
    */
@@ -1296,6 +1301,26 @@ export interface AvatarProps {
 }
 
 export interface BadgeProps {
+  /**
+   * When status is "custom", determines the badge's background color.
+   */
+  customBackgroundColor?: string;
+  /**
+   * When status is "custom", determines the badge's border color.
+   */
+  customBorderColor?: string;
+  /**
+   * When status is "custom", determines the badge's icon color
+   */
+  customIconColor?: IconColor;
+  /**
+   * When status is "custom", determines the badge's icon
+   */
+  customIconName?: IconName;
+  /**
+   * When status is "custom", determines the badge's text color.
+   */
+  customTextColor?: string;
   /**
    * The name of the icon to display in the badge.
    */
@@ -1320,7 +1345,7 @@ export interface BadgeProps {
    * The status of the badge. Determines its color and appearance.
    * @default "info"
    */
-  status?: "info" | "error" | "warning" | "success" | "neutral";
+  status?: "info" | "error" | "warning" | "success" | "neutral" | "custom";
 
   /**
    * The text or number to display inside the badge.
@@ -1711,7 +1736,7 @@ export interface ModalProps {
   /**
    * The subtitle of the modal.
    */
-  subTitle?: string;
+  subtitle?: string;
   /**
    * The text content of the modal.
    */
@@ -2103,28 +2128,61 @@ export type TapToEditProps =
 export interface BaseTapToEditProps extends Omit<FieldProps, "onChange" | "value"> {
   title: string;
   value: any;
-  // Not required if not editable.
+
+  /**
+   * Not required if not editable.
+   */
   setValue?: (value: any) => void;
-  // Not required if not editable.
+
+  /**
+   * Not required if not editable.
+   */
   onSave?: (value: any) => void | Promise<void>;
-  // Defaults to true
+
+  /**
+   * If false, the field will not be editable and will be disabled
+   * @default true
+   */
   editable?: boolean;
-  // enable edit mode from outside the component
+
+  /**
+   * Enable edit mode from outside the component.
+   */
   isEditing?: boolean;
-  // For changing how the non-editing row renders
-  rowBoxProps?: Partial<BoxProps>;
   transform?: (value: any) => string;
-  fieldComponent?: (setValue: () => void) => ReactElement;
+  /**
+   * Show a confirmation modal before saving the value.
+   * @default false
+   */
   withConfirmation?: boolean;
+
+  /**
+   * The text content of the confirmation modal.
+   * @default "Are you sure you want save your changes?"
+   */
   confirmationText?: string;
-  confirmationHeading?: string;
-  description?: string;
+
+  /**
+   * The title of the confirmation modal.
+   * @default "Confirm"
+   */
+  confirmationTitle?: string;
+
+  /**
+   * Field helperText, a description of the field surfaced in the UI
+   * @default "Confirm"
+   */
+  helperText?: string;
+
+  /**
+   * Only display the helperText in the UI while editing. if false, the helperText is always shown below the value.
+   * @default true
+   */
+  onlyShowHelperTextWhileEditing?: boolean;
+
   // openApi to supported in future
   // openApiModel?: string;
   // openApiField?: string;
-  showDescriptionAsTooltip?: boolean;
-  // Default true. If false, description is shown below the value always.
-  onlyShowDescriptionWhileEditing?: boolean;
 }
 
 export interface APIError {
@@ -2343,6 +2401,12 @@ export interface SelectFieldPropsBase {
    */
   helperText?: string;
 
+  /**
+   * The function to call when the selected value changes.
+   * If requireValue is false and value is undefined, onChange will return empty string.
+   */
+  onChange: (value: string) => void;
+
   /**
    * The options available for selection in the select field.
    * Each option should have a label and a value.
@@ -2371,11 +2435,6 @@ export interface SelectFieldPropsWithoutRequire extends SelectFieldPropsBase {
    * The current value of the select field.
    */
   value?: string;
-
-  /**
-   * The function to call when the selected value changes.
-   */
-  onChange: (value: string | undefined) => void;
 }
 
 export interface SelectFieldPropsWithRequire extends SelectFieldPropsBase {

package/src/DateTimeActionSheet.tsx

@@ -340,7 +340,7 @@ const DateCalendar = ({
 
   // Check if the date is T00:00:00.000Z (it should be), otherwise treat it as a date in the
   // current timezone.
-  const dt = DateTime.fromISO(date).setZone("UTC");
+  const dt = DateTime.fromISO(date);
   let dateString: string;
   if (dt.hour === 0 && dt.minute === 0 && dt.second === 0) {
     dateString = dt.toISO()!;

package/src/DateTimeField.tsx

@@ -26,7 +26,7 @@ export const DateTimeField = ({
           return printDateAndTime(val, {timezone, showTimezone: true});
         case "date":
         default:
-          return printDate(val, {timezone, showTimezone: true});
+          return printDate(val, {ignoreTime: true});
       }
     },
     [timezone, type]
@@ -108,9 +108,9 @@ export const DateTimeField = ({
         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,
-        });
+        parsedDate = DateTime.fromFormat(`${month}${day}${year}`, "MMddyyyy", {zone: timezone})
+          .startOf("day")
+          .toUTC(0, {keepLocalTime: true});
       }
 
       if (parsedDate?.isValid) {

package/src/Field.tsx

@@ -48,7 +48,12 @@ export const Field: FC<FieldProps> = ({type, ...rest}) => {
   } else if (type === "boolean") {
     return <BooleanField {...(rest as BooleanFieldProps)} />;
   } else if (type && ["date", "time", "datetime"].includes(type)) {
-    return <DateTimeField {...(rest as DateTimeFieldProps)} />;
+    return (
+      <DateTimeField
+        {...(rest as DateTimeFieldProps)}
+        type={type as "date" | "time" | "datetime"}
+      />
+    );
   } else if (type === "address") {
     return <AddressField {...(rest as AddressFieldProps)} />;
   } else if (type === "customSelect") {

package/src/IconButton.tsx

@@ -15,7 +15,7 @@ import {isNative} from "./Utilities";
 type ConfirmationModalProps = {
   visible: boolean;
   title: string;
-  subTitle?: string;
+  subtitle?: string;
   text: string;
   onConfirm: () => void;
   onCancel: () => void;
@@ -24,7 +24,7 @@ type ConfirmationModalProps = {
 const ConfirmationModal: FC<ConfirmationModalProps> = ({
   visible,
   title,
-  subTitle,
+  subtitle,
   text,
   onConfirm,
   onCancel,
@@ -35,7 +35,7 @@ const ConfirmationModal: FC<ConfirmationModalProps> = ({
       primaryButtonText="Confirm"
       secondaryButtonOnClick={onCancel}
       secondaryButtonText="Cancel"
-      subTitle={subTitle}
+      subtitle={subtitle}
       title={title}
       visible={visible}
       onDismiss={onCancel}
@@ -173,7 +173,7 @@ const IconButtonComponent: FC<IconButtonProps> = ({
       )}
       {withConfirmation && (
         <ConfirmationModal
-          subTitle={undefined}
+          subtitle={undefined}
           text={confirmationText}
           title={confirmationHeading}
           visible={showConfirmation}

package/src/Modal.tsx

@@ -32,7 +32,7 @@ const getModalSize = (size: "sm" | "md" | "lg"): DimensionValue => {
 const ModalContent: FC<{
   children?: ModalProps["children"];
   title?: ModalProps["title"];
-  subTitle?: ModalProps["subTitle"];
+  subtitle?: ModalProps["subtitle"];
   text?: ModalProps["text"];
   primaryButtonText?: ModalProps["primaryButtonText"];
   primaryButtonDisabled?: ModalProps["primaryButtonDisabled"];
@@ -46,7 +46,7 @@ const ModalContent: FC<{
 }> = ({
   children,
   title,
-  subTitle,
+  subtitle,
   text,
   primaryButtonText,
   primaryButtonDisabled,
@@ -113,14 +113,14 @@ const ModalContent: FC<{
           <Heading size="lg">{title}</Heading>
         </View>
       )}
-      {subTitle && (
+      {subtitle && (
         <View
           accessibilityHint="Modal Sub Heading Text"
-          accessibilityLabel={subTitle}
+          accessibilityLabel={subtitle}
           accessibilityRole="text"
-          style={{alignSelf: "flex-start", marginTop: subTitle ? 8 : 0}}
+          style={{alignSelf: "flex-start", marginTop: subtitle ? 8 : 0}}
         >
-          <Text size="lg">{subTitle}</Text>
+          <Text size="lg">{subtitle}</Text>
         </View>
       )}
       {text && (
@@ -172,7 +172,7 @@ export const Modal: FC<ModalProps> = ({
   primaryButtonText,
   secondaryButtonText,
   size = "sm",
-  subTitle,
+  subtitle,
   text,
   title,
   visible,
@@ -201,7 +201,7 @@ export const Modal: FC<ModalProps> = ({
 
   const modalContentProps = {
     title,
-    subTitle,
+    subtitle,
     text,
     primaryButtonText,
     primaryButtonDisabled,

package/src/Page.tsx

@@ -61,7 +61,7 @@ export class Page extends React.Component<PageProps, {}> {
         <Box
           alignSelf="center"
           avoidKeyboard
-          color={this.props.color || "neutralLight"}
+          color={this.props.color || "base"}
           direction={this.props.direction || "column"}
           display={this.props.display || "flex"}
           flex="grow"

package/src/SegmentedControl.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import {Pressable, View} from "react-native";
 
 import {SegmentedControlProps} from "./Common";
-import {Text} from "./Text";
+import {Heading} from "./Heading";
 import {useTheme} from "./Theme";
 
 export const SegmentedControl = ({
@@ -23,6 +23,7 @@ export const SegmentedControl = ({
         alignItems: "center",
         gap: 4,
         height,
+        maxHeight: height,
         borderRadius: theme.primitives.radius3xl,
         borderColor: theme.primitives.neutral300,
         borderWidth: 3,
@@ -52,7 +53,7 @@ export const SegmentedControl = ({
           }}
           onPress={() => onChange(index)}
         >
-          <Text>{item}</Text>
+          <Heading size="sm">{item}</Heading>
         </Pressable>
       ))}
     </View>

package/src/SelectField.tsx

@@ -28,8 +28,8 @@ export const SelectField: FC<SelectFieldProps> = ({
         placeholder={!requireValue ? clearOption : {}}
         value={value ?? ""}
         onValueChange={(v) => {
-          if (v === "" && !requireValue) {
-            (onChange as (val: string | undefined) => void)(undefined);
+          if (v === undefined || v === "") {
+            onChange("");
           } else {
             onChange(v);
           }

package/src/TapToEdit.tsx

@@ -1,45 +1,33 @@
 import React, {ReactElement, useEffect, useState} from "react";
-import {Linking} from "react-native";
+import {Linking, View} from "react-native";
 
 import {Box} from "./Box";
 import {Button} from "./Button";
-import {AddressInterface, BoxProps, FieldProps, TapToEditProps} from "./Common";
+import {AddressInterface, FieldProps, TapToEditProps} from "./Common";
 import {Field} from "./Field";
 import {Icon} from "./Icon";
 // import {useOpenAPISpec} from "./OpenAPIContext";
 import {Text} from "./Text";
-import {Tooltip} from "./Tooltip";
 
 const TapToEditTitle = ({
   title,
-  description,
-  showDescriptionAsTooltip,
-  onlyShowDescriptionWhileEditing,
+  helperText,
+  onlyShowHelperTextWhileEditing,
 }: {
-  onlyShowDescriptionWhileEditing?: boolean;
-  showDescriptionAsTooltip?: boolean;
+  onlyShowHelperTextWhileEditing?: boolean;
   title: string;
-  description?: string;
+  helperText?: string;
 }): ReactElement => {
-  const Title = (
-    <Box flex="grow" justifyContent="center">
-      <Text bold>{title}:</Text>
-      {Boolean(description && !showDescriptionAsTooltip && !onlyShowDescriptionWhileEditing) && (
+  return (
+    <View style={{flex: 1, justifyContent: "center"}}>
+      <Text bold>{title}</Text>
+      {Boolean(helperText && !onlyShowHelperTextWhileEditing) && (
         <Text color="secondaryLight" size="sm">
-          {description}
+          {helperText}
         </Text>
       )}
-    </Box>
+    </View>
   );
-  if (showDescriptionAsTooltip) {
-    return (
-      <Tooltip idealPosition="top" text={description}>
-        {Title}
-      </Tooltip>
-    );
-  } else {
-    return Title;
-  }
 };
 
 export function formatAddress(address: AddressInterface, asString = false): string {
@@ -87,20 +75,17 @@ export const TapToEdit = ({
   onSave,
   editable = true,
   isEditing = false,
-  rowBoxProps,
   transform,
-  fieldComponent,
   withConfirmation = false,
   confirmationText = "Are you sure you want to save your changes?",
-  confirmationHeading = "Confirm",
-  description: propsDescription,
-  showDescriptionAsTooltip = false,
-  onlyShowDescriptionWhileEditing = true,
+  confirmationTitle = "Confirm",
+  helperText: propsHelperText,
+  onlyShowHelperTextWhileEditing = true,
   ...fieldProps
 }: TapToEditProps): ReactElement => {
   const [editing, setEditing] = useState(false);
   const [initialValue, setInitialValue] = useState();
-  const description: string | undefined = propsDescription;
+  const helperText: string | undefined = propsHelperText;
   // setInitialValue is called after initial render to handle the case where the value is updated
   useEffect(() => {
     setInitialValue(value);
@@ -114,37 +99,22 @@ export const TapToEdit = ({
 
   if (editable && (editing || isEditing)) {
     return (
-      <Box direction="column">
-        {fieldComponent ? (
-          fieldComponent(setValue as any)
-        ) : (
+      <View style={{flexDirection: "column", width: "100%"}}>
+        <View style={{flex: 1, justifyContent: "center"}}>
+          <Text bold>{title}</Text>
+        </View>
+        <View style={{gap: 16}}>
           <Field
-            helperText={description}
-            label={title}
+            grow={fieldProps?.type === "textarea" ? fieldProps.grow ?? true : undefined}
+            helperText={helperText}
+            row={fieldProps?.type === "textarea" ? 5 : undefined}
             type={(fieldProps?.type ?? "text") as NonNullable<FieldProps["type"]>}
             value={value}
             onChange={setValue ?? (() => {})}
             {...(fieldProps as any)}
           />
-        )}
-        {editing && !isEditing && (
-          <Box direction="row">
-            <Button
-              confirmationText={confirmationText}
-              modalTitle={confirmationHeading}
-              text="Save"
-              withConfirmation={withConfirmation}
-              onClick={async (): Promise<void> => {
-                if (!onSave) {
-                  console.error("No onSave provided for editable TapToEdit");
-                } else {
-                  setInitialValue(value);
-                  await onSave(value);
-                }
-                setEditing(false);
-              }}
-            />
-            <Box marginLeft={2}>
+          {editing && !isEditing && (
+            <View style={{flexDirection: "row", justifyContent: "flex-end", gap: 16}}>
               <Button
                 text="Cancel"
                 variant="muted"
@@ -155,10 +125,27 @@ export const TapToEdit = ({
                   setEditing(false);
                 }}
               />
-            </Box>
-          </Box>
-        )}
-      </Box>
+              <View style={{marginLeft: 8}}>
+                <Button
+                  confirmationText={confirmationText}
+                  modalTitle={confirmationTitle}
+                  text="Save"
+                  withConfirmation={withConfirmation}
+                  onClick={async (): Promise<void> => {
+                    if (!onSave) {
+                      console.error("No onSave provided for editable TapToEdit");
+                    } else {
+                      setInitialValue(value);
+                      await onSave(value);
+                    }
+                    setEditing(false);
+                  }}
+                />
+              </View>
+            </View>
+          )}
+        </View>
+      </View>
     );
   } else {
     let displayValue = value;
@@ -169,6 +156,7 @@ export const TapToEdit = ({
       // If no transform, try and display the value reasonably.
       if (fieldProps?.type === "boolean") {
         displayValue = value ? "Yes" : "No";
+        // TODO: put transform back in after field types are updated
         // } else if (fieldProps?.type === "percent") {
         //   // Prevent floating point errors from showing up by using parseFloat and precision.
         //   // Pass through parseFloat again to trim off insignificant zeroes.
@@ -217,23 +205,27 @@ export const TapToEdit = ({
     // For textarea to display correctly, we place the title on its own line, then the text
     // on the next line. This is because the textarea will take up the full width of the row.
     return (
-      <Box
-        alignItems={fieldProps?.type === "textarea" ? "start" : "center"}
-        direction={fieldProps?.type === "textarea" ? "column" : "row"}
-        justifyContent="between"
-        paddingX={3}
-        paddingY={2}
-        width="100%"
-        {...(rowBoxProps as Exclude<BoxProps, "onClick">)}
+      <View
+        style={{
+          alignItems: fieldProps?.type === "textarea" ? "flex-start" : "center",
+          flexDirection: fieldProps?.type === "textarea" ? "column" : "row",
+          justifyContent: "space-between",
+          width: "100%",
+        }}
       >
-        <Box direction="row" width="100%">
+        <View style={{flexDirection: "row", width: "100%", gap: 16}}>
           <TapToEditTitle
-            description={description}
-            onlyShowDescriptionWhileEditing={onlyShowDescriptionWhileEditing}
-            showDescriptionAsTooltip={showDescriptionAsTooltip}
+            helperText={helperText}
+            onlyShowHelperTextWhileEditing={onlyShowHelperTextWhileEditing}
             title={title}
           />
-          <Box direction="row" flex="grow" justifyContent="end" marginLeft={2}>
+          <View
+            style={{
+              flexDirection: "row",
+              flex: 1,
+              justifyContent: "flex-end",
+            }}
+          >
             <Box
               accessibilityHint=""
               accessibilityLabel="Link"
@@ -257,30 +249,16 @@ export const TapToEdit = ({
                 <Icon iconName="pencil" size="md" />
               </Box>
             )}
-          </Box>
-        </Box>
+          </View>
+        </View>
         {fieldProps?.type === "textarea" && (
-          <>
-            <Box marginTop={2} paddingY={2} width="100%">
-              <Text align="left" underline={isClickable}>
-                {displayValue}
-              </Text>
-            </Box>
-            {editable && (
-              <Box
-                accessibilityHint=""
-                accessibilityLabel="Edit"
-                alignSelf="end"
-                marginLeft={2}
-                width={16}
-                onClick={(): void => setEditing(true)}
-              >
-                <Icon color="primary" iconName="pencil" size="md" />
-              </Box>
-            )}
-          </>
+          <View style={{marginTop: 8, paddingVertical: 8, width: "100%"}}>
+            <Text align="left" underline={isClickable}>
+              {displayValue}
+            </Text>
+          </View>
         )}
-      </Box>
+      </View>
     );
   }
 };