ferns-ui 0.36.1 → 0.36.3

package/src/TapToEdit.tsx

@@ -1,221 +0,0 @@
-import React, {ReactElement, useState} from "react";
-import {Linking} from "react-native";
-
-import {Box} from "./Box";
-import {Button} from "./Button";
-import {BoxProps} from "./Common";
-import {Field, FieldProps} from "./Field";
-import {Icon} from "./Icon";
-import {Text} from "./Text";
-
-export function formatAddress(address: any, asString = false): string {
-  let city = "";
-  if (address?.city) {
-    city = address?.state || address.zipcode ? `${address.city}, ` : `${address.city}`;
-  }
-
-  let state = "";
-  if (address?.state) {
-    state = address?.zipcode ? `${address.state} ` : `${address.state}`;
-  }
-
-  const zip = address?.zipcode || "";
-
-  const addressLineOne = address?.address1 ?? "";
-  const addressLineTwo = address?.address2 ?? "";
-  const addressLineThree = `${city}${state}${zip}`;
-
-  if (!asString) {
-    // Only add new lines if lines before and after are not empty to avoid awkward whitespace
-    return `${addressLineOne}${
-      addressLineOne && (addressLineTwo || addressLineThree) ? `\n` : ""
-    }${addressLineTwo}${addressLineTwo && addressLineThree ? `\n` : ""}${addressLineThree}`;
-  } else {
-    return `${addressLineOne}${
-      addressLineOne && (addressLineTwo || addressLineThree) ? `, ` : ""
-    }${addressLineTwo}${addressLineTwo && addressLineThree ? `, ` : ""}${addressLineThree}`;
-  }
-}
-
-export interface TapToEditProps extends Omit<FieldProps, "onChange" | "value"> {
-  title: string;
-  value: any;
-  // Not required if not editable.
-  setValue?: (value: any) => void;
-  // Not required if not editable.
-  onSave?: (value: any) => void | Promise<void>;
-  // Defaults to true
-  editable?: boolean;
-  // 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;
-  withConfirmation?: boolean;
-  confirmationText?: string;
-  confirmationHeading?: string;
-}
-
-export const TapToEdit = ({
-  value,
-  setValue,
-  placeholder,
-  title,
-  onSave,
-  editable = true,
-  isEditing = false,
-  rowBoxProps,
-  transform,
-  fieldComponent,
-  withConfirmation = false,
-  confirmationText = "Are you sure you want to save your changes?",
-  confirmationHeading = "Confirm",
-  ...fieldProps
-}: TapToEditProps): ReactElement => {
-  const [editing, setEditing] = useState(false);
-  const [initialValue] = useState(value);
-
-  if (editable && !setValue) {
-    throw new Error("setValue is required if editable is true");
-  }
-
-  if (editable && (editing || isEditing)) {
-    return (
-      <Box direction="column">
-        {fieldComponent ? (
-          fieldComponent(setValue as any)
-        ) : (
-          <Field
-            label={title}
-            placeholder={placeholder}
-            value={value}
-            onChange={setValue}
-            {...fieldProps}
-          />
-        )}
-        {editing && !isEditing && (
-          <Box direction="row">
-            <Button
-              color="blue"
-              confirmationHeading={confirmationHeading}
-              confirmationText={confirmationText}
-              inline
-              text="Save"
-              withConfirmation={withConfirmation}
-              onClick={async (): Promise<void> => {
-                if (!onSave) {
-                  console.error("No onSave provided for editable TapToEdit");
-                } else {
-                  await onSave(value);
-                }
-                setEditing(false);
-              }}
-            />
-            <Box marginLeft={2}>
-              <Button
-                color="red"
-                inline
-                text="Cancel"
-                onClick={(): void => {
-                  if (setValue) {
-                    setValue(initialValue);
-                  }
-                  setEditing(false);
-                }}
-              />
-            </Box>
-          </Box>
-        )}
-      </Box>
-    );
-  } else {
-    let displayValue = value;
-    // If a transform props is present, that takes priority
-    if (transform) {
-      displayValue = transform(value);
-    } else {
-      // If no transform, try and display the value reasonably.
-      if (fieldProps?.type === "boolean") {
-        displayValue = value ? "Yes" : "No";
-      } 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.
-        displayValue = `${parseFloat(parseFloat(String(value * 100)).toPrecision(7))}%`;
-      } else if (fieldProps?.type === "currency") {
-        // TODO: support currencies other than USD in Field and related components.
-        const formatter = new Intl.NumberFormat("en-US", {
-          style: "currency",
-          currency: "USD",
-          minimumFractionDigits: 2, // (this suffices for whole numbers, but will print 2500.10 as $2,500.1)
-        });
-        displayValue = formatter.format(value);
-      } else if (fieldProps?.type === "multiselect") {
-        // ???
-        displayValue = value.join(", ");
-      } else if (fieldProps?.type === "url") {
-        // Show only the domain, full links are likely too long.
-        try {
-          const url = new URL(value);
-          displayValue = url?.hostname ?? value;
-        } catch (e) {
-          // Don't print an error message for empty values.
-          if (value) {
-            console.debug(`Invalid URL: ${value}`);
-          }
-          displayValue = value;
-        }
-      } else if (fieldProps?.type === "address") {
-        displayValue = formatAddress(value);
-      }
-    }
-
-    const openLink = (): void => {
-      if (fieldProps?.type === "url") {
-        Linking.openURL(value);
-      }
-    };
-
-    return (
-      <Box
-        direction="row"
-        justifyContent="between"
-        paddingX={3}
-        paddingY={2}
-        width="100%"
-        {...rowBoxProps}
-      >
-        <Box>
-          <Text weight="bold">{title}:</Text>
-          {fieldProps?.type === "address" && (
-            <Box
-              onClick={
-                () =>
-                  Linking.openURL(
-                    `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(
-                      formatAddress(value, true)
-                    )}`
-                  )
-                // eslint-disable-next-line react/jsx-curly-newline
-              }
-            >
-              <Text color="blue" underline={fieldProps?.type === "address"}>
-                Google Maps
-              </Text>
-            </Box>
-          )}
-        </Box>
-        <Box direction="row">
-          <Box onClick={fieldProps?.type === "url" ? openLink : undefined}>
-            <Text underline={fieldProps?.type === "url"}>{displayValue}</Text>
-          </Box>
-          {editable && (
-            <Box marginLeft={2} onClick={(): void => setEditing(true)}>
-              <Icon color="darkGray" name="edit" prefix="far" size="md" />
-            </Box>
-          )}
-        </Box>
-      </Box>
-    );
-  }
-};

package/src/Text.tsx

@@ -1,131 +0,0 @@
-import React from "react";
-import {Text as NativeText, TextStyle} from "react-native";
-
-import {AllColors, Font, TextSize} from "./Common";
-import {Hyperlink} from "./Hyperlink";
-import {Unifier} from "./Unifier";
-
-export interface TextProps {
-  align?: "left" | "right" | "center" | "justify"; // default "left"
-  children?: React.ReactNode;
-  color?: AllColors;
-  inline?: boolean; // default false
-  italic?: boolean; // default false
-  overflow?: "normal" | "breakWord"; // deprecated
-  size?: TextSize; // default "md"
-  truncate?: boolean; // default false
-  font?: Font;
-  underline?: boolean;
-  numberOfLines?: number;
-  skipLinking?: boolean;
-  weight?: "bold" | "normal";
-  testID?: string;
-}
-
-const fontSizes = {
-  sm: 12,
-  md: 14,
-  lg: 16,
-};
-
-export function Text({
-  align = "left",
-  children,
-  color,
-  inline = false,
-  italic = false,
-  overflow,
-  size = "md",
-  truncate = false,
-  font,
-  underline,
-  numberOfLines,
-  skipLinking,
-  testID,
-  weight = "normal",
-}: TextProps): React.ReactElement {
-  function propsToStyle(): any {
-    const style: TextStyle = {};
-    if (overflow) {
-      console.warn(
-        "Text overflow is deprecated. Use `truncate` to cut off the text and add ellipse, otherwise breakWord is the default."
-      );
-    }
-    let computedFont = "primary";
-    if (font === "primary" || !font) {
-      if (weight === "bold") {
-        computedFont = "primaryBoldFont";
-      } else {
-        computedFont = "primaryFont";
-      }
-    } else if (font === "secondary") {
-      if (weight === "bold") {
-        computedFont = "secondaryBoldFont";
-      } else {
-        computedFont = "secondaryFont";
-      }
-    } else if (font === "button") {
-      computedFont = "buttonFont";
-    } else if (font === "title") {
-      computedFont = "titleFont";
-    } else if (font === "accent") {
-      if (weight === "bold") {
-        computedFont = "accentBoldFont";
-      } else {
-        computedFont = "accentFont";
-      }
-    }
-    if (weight === "bold") {
-      style.fontWeight = "bold";
-    }
-
-    style.fontFamily = Unifier.theme[computedFont as keyof typeof Unifier.theme];
-
-    style.fontSize = fontSizes[size || "md"];
-    if (align) {
-      style.textAlign = align;
-    }
-    if (color) {
-      style.color = Unifier.theme[color];
-    } else {
-      style.color = Unifier.theme.darkGray;
-    }
-
-    if (italic) {
-      style.fontStyle = "italic";
-    }
-    if (underline) {
-      style.textDecorationLine = "underline";
-    }
-    // TODO: might be useful for wrapping/truncating
-    // if (numberOfLines !== 1 && !inline) {
-    //   style.flexWrap = "wrap";
-    // }
-
-    return style;
-  }
-
-  let lines = 0;
-  if (numberOfLines && truncate && numberOfLines > 1) {
-    console.error(`Cannot truncate Text and have ${numberOfLines} lines`);
-  }
-  if (numberOfLines) {
-    lines = numberOfLines;
-  } else if (inline || truncate) {
-    lines = 1;
-  }
-  const inner = (
-    <NativeText numberOfLines={lines} style={propsToStyle()} testID={testID}>
-      {children}
-    </NativeText>
-  );
-  if (skipLinking) {
-    return inner;
-  } else {
-    return (
-      <Hyperlink linkDefault linkStyle={{textDecorationLine: "underline"}}>
-        {inner}
-      </Hyperlink>
-    );
-  }
-}

package/src/TextArea.tsx

@@ -1,16 +0,0 @@
-import React from "react";
-
-import {TextAreaProps} from "./Common";
-import {TextField} from "./TextField";
-
-export class TextArea extends React.Component<TextAreaProps, {}> {
-  constructor(props: TextAreaProps) {
-    super(props);
-    this.state = {};
-  }
-
-  render() {
-    const {height, ...props} = this.props;
-    return <TextField {...props} height={height ?? 100} multiline />;
-  }
-}