ferns-ui 0.47.9 → 1.0.0-beta.0

package/src/Field.tsx

@@ -1,358 +1,96 @@
-import React from "react";
+import React, {FC} from "react";
 
-import {Box} from "./Box";
-import {CheckBox} from "./CheckBox";
-import {AddressInterface, FieldProps, ReactChildren, TextFieldType} from "./Common";
-import {USSTATESLIST} from "./Constants";
-import {CustomSelect} from "./CustomSelect";
-import {FieldWithLabels} from "./FieldWithLabels";
-import {SelectList} from "./SelectList";
+import {AddressField} from "./AddressField";
+import {BooleanField} from "./BooleanField";
+import {
+  AddressFieldProps,
+  BooleanFieldProps,
+  CustomSelectFieldProps,
+  DateTimeFieldProps,
+  EmailFieldProps,
+  FieldProps,
+  MultiselectFieldProps,
+  NumberFieldProps,
+  PhoneNumberFieldProps,
+  SelectFieldProps,
+  SignatureFieldProps,
+  TextAreaProps,
+  TextFieldProps,
+  TextFieldType,
+} from "./Common";
+import {CustomSelectField} from "./CustomSelectField";
+import {DateTimeField} from "./DateTimeField";
+import {EmailField} from "./EmailField";
+import {MultiselectField} from "./MultiselectField";
+import {NumberField} from "./NumberField";
+import {PhoneNumberField} from "./PhoneNumberField";
+import {SelectField} from "./SelectField";
 import {Signature} from "./Signature";
-import {Switch} from "./Switch";
-import {Text} from "./Text";
 import {TextArea} from "./TextArea";
 import {TextField} from "./TextField";
-import {UnifiedAddressAutoCompleteField} from "./UnifiedAddressAutoComplete";
 
-export const Field = ({
-  name,
-  label,
-  labelColor,
-  height,
-  type,
-  rows,
-  value,
-  onChange,
-  onBlur,
-  onStart,
-  onEnd,
-  options,
-  placeholder,
-  disabled,
-  errorMessage,
-  errorMessageColor,
-  helperText,
-  helperTextColor,
-  includeCounty = false,
-  googleMapsApiKey,
-  googlePlacesMobileStyles,
-  testID,
-  transformValue,
-}: FieldProps) => {
-  const handleAddressChange = (field: string, newValue: string) => {
-    onChange({...value, [field]: newValue});
-    onBlur && onBlur({...value, [field]: newValue});
-  };
-
-  const handleAutoCompleteChange = (newValue: AddressInterface) => {
-    onChange({...value, ...newValue});
-  };
-
-  const handleSwitchChange = (switchValue: boolean) => {
-    onChange(switchValue);
-    onBlur && onBlur(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}
-          testID={testID}
-          value={value}
-          onChange={(result) => {
-            onChange(result);
-            onBlur && onBlur(result);
-          }}
-        />
-      );
-    } 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"
-                  testID={`${testID}-${o.value}`}
-                  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);
-                    onBlur && onBlur(newValue);
-                  }}
-                />
-              </Box>
-            </Box>
-          ))}
-        </Box>
-      );
-    } else if (type === "textarea") {
-      return (
-        <TextArea
-          disabled={disabled}
-          height={height ?? 100}
-          id={name}
-          placeholder={Boolean(value) ? "" : placeholder}
-          rows={rows}
-          testID={testID}
-          value={String(value)}
-          onBlur={onBlur}
-          onChange={(result) => onChange(result.value)}
-        />
-      );
-    } else if (type === "boolean") {
-      return (
-        <Switch
-          disabled={disabled}
-          id={name}
-          name={name}
-          switched={Boolean(value)}
-          testID={testID}
-          onChange={(result) => {
-            handleSwitchChange(result);
-          }}
-        />
-      );
-    } else if (type && ["date", "time", "datetime"].includes(type)) {
-      return (
-        <TextField
-          disabled={disabled}
-          id={name}
-          placeholder={placeholder}
-          testID={testID}
-          transformValue={transformValue}
-          type={type as "date" | "time" | "datetime"}
-          value={value}
-          onBlur={(result) => {
-            onBlur && onBlur(result.value);
-          }}
-          onChange={(result) => onChange(result.value)}
-        />
-      );
-    } else if (type === "address") {
-      const addressValue = value ? value : {};
-      const {
-        address1 = "",
-        address2 = "",
-        city = "",
-        state = "",
-        zipcode = "",
-        countyName = "",
-        countyCode = "",
-      }: AddressInterface = addressValue;
-      return (
-        <>
-          <UnifiedAddressAutoCompleteField
-            disabled={disabled}
-            googleMapsApiKey={googleMapsApiKey}
-            googlePlacesMobileStyles={googlePlacesMobileStyles}
-            handleAddressChange={(result) => handleAddressChange("address1", result.value)}
-            handleAutoCompleteChange={(result) => handleAutoCompleteChange(result)}
-            includeCounty={includeCounty}
-            inputValue={address1}
-            testID={`${testID}-address1`}
-          />
-          <TextField
-            disabled={disabled}
-            id="address2"
-            label="Apt, suite, etc"
-            testID={`${testID}-address2`}
-            type="text"
-            value={address2}
-            onChange={(result) => handleAddressChange("address2", result.value)}
-          />
-          <TextField
-            disabled={disabled}
-            id="city"
-            label="City"
-            testID={`${testID}-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}}
-            testID={`${testID}-state`}
-            value={state}
-            onChange={(result) => {
-              handleAddressChange("state", result!);
-            }}
-          />
-          <TextField
-            disabled={disabled}
-            id="zipcode"
-            label="Zipcode"
-            testID={`${testID}-zip`}
-            type="text"
-            value={zipcode}
-            onChange={(result) => handleAddressChange("zipcode", result.value)}
-          />
-          {includeCounty && (
-            <>
-              <TextField
-                disabled={disabled}
-                id="countyName"
-                label="County Name"
-                testID={`${testID}-county`}
-                type="text"
-                value={countyName}
-                onChange={(result) => handleAddressChange("countyName", result.value)}
-              />
-              <TextField
-                disabled={disabled}
-                id="countyCode"
-                label="County Code"
-                testID={`${testID}-county-code`}
-                type="number"
-                value={countyCode}
-                onChange={(result) => handleAddressChange("countyCode", 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={(val) => {
-            onChange(val);
-            onBlur && onBlur(val);
-          }}
-        />
-      );
-    } else if (type === "number") {
-      return (
-        <TextField
-          disabled={disabled}
-          id={name}
-          placeholder={placeholder}
-          testID={testID}
-          type="number"
-          value={value}
-          onBlur={(result) => {
-            onBlur && onBlur(result.value);
-          }}
-          onChange={(result) => {
-            onChange(result.value);
-          }}
-        />
-      );
-    } else if (type === "signature") {
-      return <Signature onChange={onChange} onEnd={onEnd} onStart={onStart} />;
-    } 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";
+// TODO: put onblur back in any fields that need it
+export const Field: FC<FieldProps> = ({type, ...rest}) => {
+  if (type === "select") {
+    return (
+      <SelectField
+        {...(rest as SelectFieldProps)}
+        // onChange={(result) => {
+        //   rest.onChange?.(result);
+        //   rest.onBlur?.(result);
+        // }}
+      />
+    );
+  } else if (type === "multiselect") {
+    return <MultiselectField {...(rest as MultiselectFieldProps)} />;
+  } else if (type === "textarea") {
+    return <TextArea {...(rest as TextAreaProps)} />;
+  } else if (type === "boolean") {
+    return <BooleanField {...(rest as BooleanFieldProps)} />;
+  } else if (type && ["date", "time", "datetime"].includes(type)) {
+    return <DateTimeField {...(rest as DateTimeFieldProps)} />;
+  } else if (type === "address") {
+    return <AddressField {...(rest as AddressFieldProps)} />;
+  } else if (type === "customSelect") {
+    return (
+      <CustomSelectField
+        {...(rest as CustomSelectFieldProps)}
+        // onChange={(result) => {
+        //   rest.onChange(result);
+        //   rest.onBlur && rest.onBlur(result);
+        // }}
+      />
+    );
+  } else if (type === "number") {
+    return <NumberField {...(rest as NumberFieldProps)} />;
+  } else if (type === "signature") {
+    return <Signature {...(rest as SignatureFieldProps)} />;
+  } else if (type === "email") {
+    return <EmailField {...(rest as EmailFieldProps)} />;
+  } else if (type === "phoneNumber") {
+    return <PhoneNumberField {...(rest as PhoneNumberFieldProps)} />;
+  } else {
+    let tfType: TextFieldType = "text";
+    let autoComplete: "on" | "current-password" | "username" = "on";
+    if (type && ["password", "url"].includes(type)) {
+      tfType = type as TextFieldType;
+      // } else if (type === "percent" || type === "currency") {
+      // TODO: Implement percent and currency fields
+      // tfType = "text";
+      // }
       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}
-          testID={testID}
-          type={
-            tfType as
-              | "date"
-              | "datetime"
-              | "email"
-              | "number"
-              | "password"
-              | "phoneNumber"
-              | "text"
-              | "time"
-              | "url"
-          }
-          value={tfValue}
-          onBlur={(result) => {
-            onBlur && onBlur(result.value);
-          }}
-          onChange={(result) => onChange(result.value)}
-        />
-      );
     }
-  };
 
-  const children = renderField();
-  return (
-    <Box marginBottom={5}>
-      <FieldWithLabels
-        {...{
-          errorMessage,
-          errorMessageColor,
-          helperText,
-          helperTextColor,
-          label,
-          labelColor,
-        }}
-      >
-        {children}
-      </FieldWithLabels>
-    </Box>
-  );
+    return (
+      <TextField
+        autoComplete={autoComplete}
+        type={tfType as "email" | "password" | "phoneNumber" | "text" | "url"}
+        {...(rest as TextFieldProps)}
+      />
+    );
+  }
 };

package/src/Heading.tsx

@@ -1,37 +1,65 @@
-import React, {useContext} from "react";
-import {StyleProp, Text as NativeText, TextStyle} from "react-native";
+import {
+  TitilliumWeb_600SemiBold,
+  TitilliumWeb_700Bold,
+  useFonts,
+} from "@expo-google-fonts/titillium-web";
+import React from "react";
+import {Platform, StyleProp, Text as NativeText, TextStyle} from "react-native";
 
 import {HeadingProps} from "./Common";
-import {ThemeContext} from "./Theme";
+import {useTheme} from "./Theme";
 
-const fontSizes = {
-  sm: 20,
-  md: 28,
-  lg: 36,
+const fontSizeAndWeightWeb = {
+  sm: {size: 16, weight: "semibold"},
+  md: {size: 18, weight: "bold"},
+  lg: {size: 24, weight: "bold"},
+  xl: {size: 32, weight: "bold"},
 };
 
+const fontSizeAndWeighMobile = {
+  sm: {size: 14, weight: "semibold"},
+  md: {size: 16, weight: "bold"},
+  lg: {size: 20, weight: "bold"},
+  xl: {size: 28, weight: "bold"},
+};
+
+const fontSizes = Platform.OS === "web" ? fontSizeAndWeightWeb : fontSizeAndWeighMobile;
+
 export const Heading = ({
   align,
   children,
-  color,
+  color = "primary",
   size,
   testID,
 }: HeadingProps): React.ReactElement => {
-  const {theme} = useContext(ThemeContext);
+  const {theme} = useTheme();
+
+  // TODO: make fonts part of theme.
+  const [fontsLoaded] = useFonts({
+    heading: TitilliumWeb_600SemiBold,
+    "heading-bold": TitilliumWeb_700Bold,
+    "heading-semibold": TitilliumWeb_600SemiBold,
+  });
+
+  // TODO: How should we handle unloaded fonts.
+  if (!fontsLoaded) {
+    // eslint-disable-next-line react-native/no-raw-text
+    return <NativeText>Loading fonts...</NativeText>;
+  }
 
   const style: StyleProp<TextStyle> = {};
 
-  style.fontFamily = theme.titleFont;
+  if (size === "sm") {
+    style.fontFamily = "heading-semibold";
+  } else {
+    style.fontFamily = "heading-bold";
+  }
 
-  style.fontSize = fontSizes[size || "md"];
+  style.fontSize = fontSizes[size || "md"].size;
   if (align) {
     style.textAlign = align;
   }
-  style.color = theme[color ?? "darkGray"];
-  // TODO: might be useful for wrapping/truncating
-  // if (numberOfLines !== 1 && !inline) {
-  //   style.flexWrap = "wrap";
-  // }
+  style.color = theme.text[color];
 
   const lines = 0;
   return (

package/src/HeightActionSheet.tsx

@@ -33,10 +33,7 @@ export class HeightActionSheet 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);
                 }}
@@ -56,9 +53,7 @@ export class HeightActionSheet extends React.Component<
                 }}
                 onValueChange={(feet) => {
                   this.setState({feet: String(feet)});
-                  this.props.onChange({
-                    value: String(Number(feet) * 12 + Number(this.state.inches)),
-                  });
+                  this.props.onChange(String(Number(feet) * 12 + Number(this.state.inches)));
                 }}
               >
                 {range(4, 8).map((n) => {
@@ -79,9 +74,7 @@ export class HeightActionSheet extends React.Component<
                 }}
                 onValueChange={(inches) => {
                   this.setState({inches: String(inches)});
-                  this.props.onChange({
-                    value: String(Number(this.state.feet) * 12 + Number(inches)),
-                  });
+                  this.props.onChange(String(Number(this.state.feet) * 12 + Number(inches)));
                 }}
               >
                 {range(0, 12).map((n) => {

package/src/Hyperlink.tsx

@@ -27,6 +27,13 @@
  * SOFTWARE.
  * */
 
+/**
+ * Hyperlink is used to wrap text that should be clickable.
+ * It will automatically detect URLs and open them in the browser. For example,
+ * this is great for wrapping text in a chat app so any link in a chat message is clickable.
+ * This is different than <Link> which is meant for specifically linking to a URL.
+ */
+
 import * as mdurl from "mdurl";
 import React from "react";
 import {Linking, Platform, Text, View} from "react-native";
@@ -37,7 +44,7 @@ const linkifyLib = require("linkify-it")();
 
 const {OS} = Platform;
 
-// Leaving this as a class component because it was easier to handle the `pasrse(this)` in
+// Leaving this as a class component because it was easier to handle the `parse(this)` in
 // `render()`
 class HyperlinkComponent extends React.Component<HyperlinkProps> {
   isTextNested = (component: any) => {

package/src/Icon.tsx

@@ -1,27 +1,35 @@
-import {FontAwesome5} from "@expo/vector-icons";
-import React, {useContext} from "react";
+import FontAwesome6 from "@expo/vector-icons/FontAwesome6";
+import React from "react";
 
 import {IconProps, iconSizeToNumber} from "./Common";
-import {ThemeContext} from "./Theme";
-
-export function initIcons() {
-  console.debug("Initializing icons");
-}
+import {useTheme} from "./Theme";
 
 // TODO: Update <Icon /> to be closer to Expo's Vector Icon, letting multiple icon packs be used,
 // etc.
-export const Icon = ({color, size, name, prefix, testID}: IconProps): React.ReactElement => {
-  const {theme} = useContext(ThemeContext);
-  const iconColor = theme[color || "primary"];
+// TODO: Add documentation for adding FA6-Pro icons.
+export const Icon = ({
+  color = "primary",
+  size = "md",
+  iconName,
+  type = "solid",
+  testID,
+}: IconProps): React.ReactElement => {
+  const {theme} = useTheme();
+  const iconColor = theme.text[color];
   const iconSize = iconSizeToNumber(size);
   return (
-    <FontAwesome5
+    <FontAwesome6
+      brand={type === "brand"}
       color={iconColor}
-      name={name}
-      regular={prefix === "far"}
+      duotone={type === "duotone"}
+      light={type === "light" || type === "sharpLight"}
+      name={iconName}
+      regular={type === "regular"}
+      sharp={type === "sharp"}
       size={iconSize}
-      solid={!prefix || prefix === "fas"}
+      solid={type === "solid" || type === "sharpSolid"}
       testID={testID}
+      thin={type === "thin"}
     />
   );
 };