ferns-ui 0.36.3 → 0.36.5

package/src/Tooltip.tsx

@@ -0,0 +1,269 @@
+import * as React from "react";
+import {
+  Dimensions,
+  LayoutChangeEvent,
+  LayoutRectangle,
+  Platform,
+  Pressable,
+  View,
+} from "react-native";
+import {Portal} from "react-native-portalize";
+
+import {TooltipDirection} from "./Common";
+import {Text} from "./Text";
+import {Unifier} from "./Unifier";
+
+const TOOLTIP_OFFSET = 8;
+// How many pixels to leave between the tooltip and the edge of the screen
+const TOOLTIP_OVERFLOW_PADDING = 20;
+
+type ChildrenMeasurement = {
+  width: number;
+  height: number;
+  pageX: number;
+  pageY: number;
+};
+
+type Measurement = {
+  children: ChildrenMeasurement;
+  tooltip: LayoutRectangle;
+  measured: boolean;
+  idealDirection?: TooltipDirection;
+};
+
+const overflowLeft = (x: number): boolean => {
+  return x < TOOLTIP_OVERFLOW_PADDING;
+};
+
+const overflowRight = (x: number): boolean => {
+  const {width: layoutWidth} = Dimensions.get("window");
+  return x + TOOLTIP_OVERFLOW_PADDING > layoutWidth;
+};
+
+const getTooltipPosition = ({
+  children,
+  tooltip,
+  measured,
+  idealDirection,
+}: Measurement): {} | {left: number; top: number} => {
+  if (!measured) {
+    console.debug("No measurements for child yet, cannot show tooltip yet.");
+    return {};
+  }
+
+  const {
+    pageY: childrenY,
+    height: childrenHeight,
+    pageX: childrenX,
+    width: childrenWidth,
+  }: ChildrenMeasurement = children;
+  const {width: tooltipWidth, height: tooltipHeight} = tooltip;
+  const horizontalCenter = childrenX + childrenWidth / 2;
+  const right = childrenX + childrenWidth + TOOLTIP_OFFSET;
+  const left = childrenX - tooltipWidth - TOOLTIP_OFFSET;
+
+  const top = childrenY - tooltipHeight - TOOLTIP_OFFSET;
+  const bottom = childrenY + childrenHeight + TOOLTIP_OFFSET;
+  const verticalCenter = top + childrenHeight + TOOLTIP_OFFSET;
+
+  // Top is overflowed if it would go off either side or the top of the screen.
+  const overflowTop = top < TOOLTIP_OVERFLOW_PADDING;
+
+  // Bottom is overflowed if it would go off either side or the bottom of the screen.
+  const overflowBottom =
+    bottom + tooltipHeight + TOOLTIP_OVERFLOW_PADDING > Dimensions.get("window").height;
+
+  // If it would overflow to the right, try to put it above, if not, put it on the left.
+  // If it would overflow to the left, try to put it above, if not, put it to the right.
+
+  // Happy path:
+  if (idealDirection === "left" && !overflowLeft(left)) {
+    return {left, top: verticalCenter};
+  } else if (idealDirection === "right" && !overflowRight(right + tooltipWidth)) {
+    return {left: right, top: verticalCenter};
+  } else if (
+    idealDirection === "bottom" &&
+    !overflowBottom &&
+    !overflowLeft(horizontalCenter - tooltipWidth) &&
+    !overflowRight(horizontalCenter + tooltipWidth)
+  ) {
+    return {left: horizontalCenter - tooltipWidth / 2, top: bottom};
+  } else {
+    // At this point, we're either trying to place it above or below, and force it into the viewport.
+
+    let y = top;
+    if ((idealDirection === "bottom" && !overflowBottom) || overflowTop) {
+      y = bottom;
+    }
+
+    // If it fits in the viewport, center it above the child.
+    if (
+      !overflowLeft(horizontalCenter - tooltipWidth) &&
+      !overflowRight(horizontalCenter + tooltipWidth)
+    ) {
+      return {left: horizontalCenter - tooltipWidth / 2, top: y};
+    }
+    // Failing that, if it fits on the left, put it there, otherwise to the right. We know it's smaller than the
+    // viewport.
+    else if (overflowLeft(horizontalCenter - tooltipWidth)) {
+      return {left: TOOLTIP_OVERFLOW_PADDING, top: y};
+    } else {
+      return {
+        left: Dimensions.get("window").width - TOOLTIP_OVERFLOW_PADDING - tooltipWidth,
+        top: y,
+      };
+    }
+  }
+};
+
+interface TooltipProps {
+  children: React.ReactElement;
+  // If text is undefined, the children will be rendered without a tooltip.
+  text?: string;
+  idealDirection?: "top" | "bottom" | "left" | "right";
+  bgColor?: "white" | "lightGray" | "gray" | "darkGray";
+}
+
+export const Tooltip = (props: TooltipProps) => {
+  const {text, children, bgColor, idealDirection} = props;
+  const hoverDelay = 500;
+  const hoverEndDelay = 1500;
+  const [visible, setVisible] = React.useState(false);
+
+  const [measurement, setMeasurement] = React.useState({
+    children: {},
+    tooltip: {},
+    measured: false,
+  });
+  const showTooltipTimer = React.useRef<NodeJS.Timeout>();
+  const hideTooltipTimer = React.useRef<NodeJS.Timeout>();
+  const childrenWrapperRef = React.useRef() as React.MutableRefObject<View>;
+
+  const touched = React.useRef(false);
+
+  const isWeb = Platform.OS === "web";
+
+  React.useEffect(() => {
+    return () => {
+      if (showTooltipTimer.current) {
+        clearTimeout(showTooltipTimer.current);
+      }
+
+      if (hideTooltipTimer.current) {
+        clearTimeout(hideTooltipTimer.current);
+      }
+    };
+  }, []);
+
+  const handleOnLayout = ({nativeEvent: {layout}}: LayoutChangeEvent) => {
+    if (childrenWrapperRef?.current && !childrenWrapperRef?.current?.measure) {
+      console.error("Tooltip: childrenWrapperRef does not have a measure method.");
+      return;
+    } else if (!childrenWrapperRef?.current) {
+      console.error("Tooltip: childrenWrapperRef is null.");
+    }
+    childrenWrapperRef?.current?.measure((_x, _y, width, height, pageX, pageY) => {
+      setMeasurement({
+        children: {pageX, pageY, height, width},
+        tooltip: {...layout},
+        measured: true,
+      });
+    });
+  };
+
+  const handleTouchStart = () => {
+    if (hideTooltipTimer.current) {
+      clearTimeout(hideTooltipTimer.current);
+    }
+
+    showTooltipTimer.current = setTimeout(() => {
+      touched.current = true;
+      setVisible(true);
+    }, 100);
+  };
+
+  const handleHoverIn = () => {
+    if (hideTooltipTimer.current) {
+      clearTimeout(hideTooltipTimer.current);
+    }
+
+    showTooltipTimer.current = setTimeout(() => {
+      touched.current = true;
+      setVisible(true);
+    }, hoverDelay);
+  };
+
+  const handleHoverOut = () => {
+    touched.current = false;
+    if (showTooltipTimer.current) {
+      clearTimeout(showTooltipTimer.current);
+    }
+
+    hideTooltipTimer.current = setTimeout(() => {
+      setVisible(false);
+      setMeasurement({children: {}, tooltip: {}, measured: false});
+    }, hoverEndDelay);
+  };
+
+  const mobilePressProps = {
+    onPress: React.useCallback(() => {
+      if (touched.current) {
+        return null;
+      } else {
+        return children.props.onClick?.();
+      }
+    }, [children.props]),
+  };
+
+  // Allow disabling tooltips when there is no string, otherwise you need to wrap the children in a function to
+  // determine if there should be a tooltip or not, which gets messy.
+  if (!text) {
+    return children;
+  }
+
+  return (
+    <>
+      {visible && (
+        <Portal>
+          <Pressable
+            style={{
+              alignSelf: "flex-start",
+              justifyContent: "center",
+              paddingHorizontal: 16,
+              backgroundColor: Unifier.theme[bgColor ?? "darkGray"],
+              borderRadius: 16,
+              paddingVertical: 8,
+              display: "flex",
+              flexShrink: 1,
+              maxWidth: Math.max(Dimensions.get("window").width - 32, 300),
+              ...getTooltipPosition({...(measurement as Measurement), idealDirection}),
+              ...(measurement.measured ? {opacity: 1} : {opacity: 0}),
+            }}
+            testID="tooltip-container"
+            onLayout={handleOnLayout}
+            onPress={() => {
+              setVisible(false);
+            }}
+          >
+            <Text color="white">{text}</Text>
+          </Pressable>
+        </Portal>
+      )}
+      <View
+        ref={childrenWrapperRef}
+        onPointerEnter={() => {
+          handleHoverIn();
+          children.props.onHoverIn?.();
+        }}
+        onPointerLeave={() => {
+          handleHoverOut();
+          children.props.onHoverOut?.();
+        }}
+        onTouchStart={handleTouchStart}
+        {...(!isWeb && mobilePressProps)}
+      >
+        {children}
+      </View>
+    </>
+  );
+};

package/src/UnifiedScreens.ts

@@ -0,0 +1,24 @@
+// import {Screens} from "./UnifiedScreens";
+
+export enum UnifierScreens {
+  // BarcodeView = "BarcodeView",
+  Contacts = "Contacts",
+  FullPageModal = "FullPageModal",
+  Auth = "Auth",
+  Spinner = "lib.Spinner",
+  Payment = "Payment",
+  Onboarding = "Onboarding",
+}
+let initialized = false;
+export function initializeUnifiedScreens() {
+  if (initialized) {
+    console.error("Cannot initialize screens multiple times.");
+    return;
+  }
+  initialized = true;
+  console.debug("[unifier] Registering unifier screens");
+  // Unifier.navigation.registerScreen(UnifierScreens.Auth, Auth, {url: "/auth"});
+  // registerScreen(Screens.BarcodeView, BarcodeView, {url: "/barcode"});
+  // Unifier.navigation.registerScreen(UnifierScreens.FullPageModal, FullPageModal, {url: "/item"});
+  // Unifier.navigation.registerScreen(UnifierScreens.Spinner, Spinner);
+}

package/src/Unifier.ts

@@ -0,0 +1,371 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/no-empty-function */
+
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import * as Clipboard from "expo-clipboard";
+import * as Font from "expo-font";
+import {FontSource} from "expo-font";
+import * as Haptics from "expo-haptics";
+import {Dimensions, Keyboard, Linking, Platform, Vibration} from "react-native";
+
+import {PermissionKind, UnifiedTheme} from "./Common";
+import {requestPermissions} from "./Permissions";
+
+function capitalize(string: string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+const DEFAULT_FONT = "Cochin";
+const DEFAULT_BOLD_FONT = "Cochin";
+
+const DefaultTheme: UnifiedTheme = {
+  // Primary colors
+  red: "#bd081c",
+  white: "#fdfdfd",
+  lightGray: "#efefef",
+  gray: "#8e8e8e",
+  darkGray: "#111",
+  // secondary colors
+  green: "#0fa573",
+  springGreen: "#008753",
+  pine: "#0a6955",
+  olive: "#364a4c",
+  blue: "#4a90e2",
+  navy: "#004b91",
+  midnight: "#133a5e",
+  purple: "#b469eb",
+  orchid: "#8046a5",
+  eggplant: "#5b2677",
+  maroon: "#6e0f3c",
+  watermelon: "#f13535",
+  orange: "#e3780c",
+  black: "#000000",
+
+  primaryLighter: "#4ED456",
+  primaryLight: "#28CA32",
+  primary: "#00BD0C",
+  primaryDark: "#00960A",
+  primaryDarker: "#007508",
+
+  secondaryLighter: "#41AAAE",
+  secondaryLight: "#20989D",
+  secondary: "#018B91",
+  secondaryDark: "#016E73",
+  secondaryDarker: "#00565A",
+
+  accentLighter: "#FF625D",
+  accentLight: "#FF3732",
+  accent: "#F00600",
+  accentDark: "#BE0500",
+  accentDarker: "#950400",
+
+  tertiaryLighter: "#FFCF67",
+  tertiaryLight: "#FFC23E",
+  tertiary: "#FFB109",
+  tertiaryDark: "#CA8A00",
+  tertiaryDarker: "#9F6D00",
+
+  // From the Atlassian templates
+  neutral900: "#091E42",
+  neutral800: "#172B4D",
+  neutral700: "#253858",
+  neutral600: "#344563",
+  neutral500: "#42526E",
+  neutral400: "#505F79",
+  neutral300: "#5E6C84",
+  neutral200: "#6B778C",
+  neutral100: "#7A869A",
+  neutral90: "#8993A4",
+  neutral80: "#97A0AF",
+  neutral70: "#A5ADBA",
+  neutral60: "#B3BAC5",
+  neutral50: "#C1C7D0",
+  neutral40: "#DFE1E6",
+  neutral30: "#EBECF0",
+  neutral20: "#F4F5F7",
+  neutral10: "#FAFBFC",
+
+  primaryFont: DEFAULT_FONT,
+  primaryBoldFont: DEFAULT_BOLD_FONT,
+
+  secondaryFont: DEFAULT_FONT,
+  secondaryBoldFont: DEFAULT_BOLD_FONT,
+
+  accentFont: DEFAULT_FONT,
+  accentBoldFont: DEFAULT_BOLD_FONT,
+
+  buttonFont: DEFAULT_FONT,
+  titleFont: DEFAULT_FONT,
+};
+
+export type PlatformOS = "ios" | "android" | "web";
+
+const fontKeys = [
+  "primaryFont",
+  "primaryBoldFont",
+  "secondaryFont",
+  "secondaryBoldFont",
+  "buttonFont",
+  "accentFont",
+  "accentBoldFont",
+  "titleFont",
+];
+
+type Luminance = "light" | "lighter" | "dark" | "darker";
+const luminances: Luminance[] = ["lighter", "light", "dark", "darker"];
+
+// Changes a color luminance
+export function changeColorLuminance(hex: string, luminanceChange: Luminance) {
+  // Validate hex string, strip "#" if present.
+  hex = String(hex).replace(/[^0-9a-f]/gi, "");
+  if (hex.length === 3) {
+    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+  } else if (hex.length !== 6) {
+    throw new Error(`Invalid color hex: ${hex}`);
+  }
+  let luminance;
+  switch (luminanceChange) {
+    case "light":
+      luminance = -0.2;
+      break;
+    case "lighter":
+      luminance = -0.33;
+      break;
+    case "dark":
+      luminance = 0.2;
+      break;
+    case "darker":
+      luminance = 0.33;
+      break;
+    default:
+      throw new Error(`Cannot change luminance to ${luminanceChange}`);
+  }
+
+  // Convert to decimal and change luminosity
+  let rgb = "#";
+  for (let i = 0; i < 3; i++) {
+    const decimal = parseInt(hex.substr(i * 2, 2), 16);
+    const appliedLuminance = Math.round(
+      Math.min(Math.max(0, decimal + decimal * luminance), 255)
+    ).toString(16);
+    // 0 pad, if necessary.
+    rgb += `00${appliedLuminance}`.substr(appliedLuminance.length);
+  }
+
+  return rgb;
+}
+
+class UnifierClass {
+  private _theme?: Partial<UnifiedTheme>;
+
+  private _web = false;
+
+  private _dev = false;
+
+  get web(): boolean {
+    return this._web;
+  }
+
+  get dev(): boolean {
+    return this._dev;
+  }
+
+  private get fontMap() {
+    const fontMap: {[id: string]: FontSource} = {};
+    for (const key of fontKeys) {
+      if (typeof this.theme[key as keyof typeof Unifier.theme] === "string") {
+        fontMap[key] = key;
+      } else {
+        fontMap[(this.theme as any)[key].name] = (this.theme as any)[key].source;
+      }
+    }
+    return fontMap;
+  }
+
+  // If the theme only has e.g. "primary" set, calculate the primaryLighter, primaryLight, etc based on that color.
+  private calculateLuminances(
+    theme: Partial<UnifiedTheme>,
+    color: "primary" | "secondary" | "accent" | "tertiary"
+  ) {
+    if (!theme[color]) {
+      return;
+    }
+    for (const luminance of luminances) {
+      const capitalized = capitalize(luminance);
+      if (!theme[`${color}${capitalized}` as keyof typeof Unifier.theme] && theme[color]) {
+        theme[`${color}${capitalized}` as keyof typeof Unifier.theme] = changeColorLuminance(
+          theme[color] as string,
+          luminance
+        );
+      }
+    }
+  }
+
+  setTheme(theme: Partial<UnifiedTheme>) {
+    Unifier.calculateLuminances(theme, "primary");
+    Unifier.calculateLuminances(theme, "secondary");
+    Unifier.calculateLuminances(theme, "accent");
+    Unifier.calculateLuminances(theme, "tertiary");
+    this._theme = theme;
+  }
+
+  get theme(): UnifiedTheme {
+    return {
+      ...DefaultTheme,
+      // Custom per project
+      primaryLighter: this._theme?.primaryLighter || this._theme?.primary || DefaultTheme.primary,
+      primaryLight: this._theme?.primaryLight || this._theme?.primary || DefaultTheme.primary,
+      primary: this._theme?.primary || this._theme?.primary || DefaultTheme.primary,
+      primaryDark: this._theme?.primaryDark || this._theme?.primary || DefaultTheme.primary,
+      primaryDarker: this._theme?.primaryDarker || this._theme?.primary || DefaultTheme.primary,
+
+      secondaryLighter:
+        this._theme?.secondaryLighter || this._theme?.secondary || DefaultTheme.secondary,
+      secondaryLight:
+        this._theme?.secondaryLight || this._theme?.secondary || DefaultTheme.secondary,
+      secondary: this._theme?.secondary || this._theme?.secondary || DefaultTheme.secondary,
+      secondaryDark: this._theme?.secondaryDark || this._theme?.secondary || DefaultTheme.secondary,
+      secondaryDarker:
+        this._theme?.secondaryDarker || this._theme?.secondary || DefaultTheme.secondary,
+
+      accentLighter: this._theme?.accentLighter || this._theme?.accent || DefaultTheme.accent,
+      accentLight: this._theme?.accentLight || this._theme?.accent || DefaultTheme.accent,
+      accent: this._theme?.accent || this._theme?.accent || DefaultTheme.accent,
+      accentDark: this._theme?.accentDark || this._theme?.accent || DefaultTheme.accent,
+      accentDarker: this._theme?.accentDarker || this._theme?.accent || DefaultTheme.accent,
+
+      tertiaryLighter: this._theme?.tertiaryLighter || this._theme?.accent || DefaultTheme.accent,
+      tertiaryLight: this._theme?.tertiaryLight || this._theme?.accent || DefaultTheme.accent,
+      tertiary: this._theme?.tertiary || this._theme?.accent || DefaultTheme.accent,
+      tertiaryDark: this._theme?.tertiaryDark || this._theme?.accent || DefaultTheme.accent,
+      tertiaryDarker: this._theme?.tertiaryDarker || this._theme?.accent || DefaultTheme.accent,
+
+      primaryFont: this._theme?.primaryFont || DefaultTheme.primaryFont,
+      primaryBoldFont:
+        this._theme?.primaryBoldFont || this._theme?.primaryFont || DefaultTheme.primaryBoldFont,
+      secondaryFont:
+        this._theme?.secondaryFont || this._theme?.primaryFont || DefaultTheme.secondaryFont,
+      secondaryBoldFont:
+        this._theme?.secondaryBoldFont ||
+        this._theme?.primaryFont ||
+        DefaultTheme.secondaryBoldFont,
+      buttonFont: this._theme?.buttonFont || this._theme?.primaryFont || DefaultTheme.buttonFont,
+      accentFont: this._theme?.accentFont || this._theme?.primaryFont || DefaultTheme.accentFont,
+      accentBoldFont:
+        this._theme?.accentBoldFont || this._theme?.primaryFont || DefaultTheme.accentBoldFont,
+      titleFont: this._theme?.titleFont || this._theme?.primaryFont || DefaultTheme.titleFont,
+    };
+  }
+
+  constructor() {
+    console.debug("[unifier] Setting up Unifier");
+  }
+
+  navigation = {
+    dismissOverlay: () => {
+      console.warn("Dismiss overlay not supported.");
+    },
+  };
+
+  loadFonts = async () => {
+    try {
+      await Font.loadAsync(this.fontMap);
+    } catch (err) {
+      console.error(`[unifier] Fonts failed to load: ${err}`);
+    }
+  };
+
+  // tracking: Tracking,
+  utils = {
+    dismissKeyboard: () => {
+      Keyboard.dismiss();
+    },
+    dimensions: () => ({
+      width: Dimensions.get("window").width,
+      height: Dimensions.get("window").height,
+    }),
+    copyToClipboard: (text: string) => {
+      Clipboard.setString(text);
+    },
+    orientationChange: (callback: (orientation: "portrait" | "landscape") => void) => {
+      Dimensions.addEventListener("change", () => {
+        const screen = Dimensions.get("screen");
+        const isPortrait = screen.width < screen.height;
+        callback(isPortrait ? "portrait" : "landscape");
+      });
+    },
+    requestPermissions: async (_perm: PermissionKind) => {
+      return requestPermissions(_perm);
+      // return requestPermissions(perm);
+    },
+    makePurchase: () => {
+      console.warn("Make purchase not supported yet.");
+    },
+    PaymentService: () => {
+      console.warn("Make purchase not supported yet.");
+    },
+    vibrate: (pattern?: number[]) => {
+      Vibration.vibrate(pattern || [100], false);
+    },
+    haptic: () => {
+      if (Platform.OS !== "web") {
+        return Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+      }
+      return;
+    },
+    openUrl: async (url: string) => {
+      return Linking.openURL(url);
+    },
+    // keepAwake: (activate: boolean) => {
+    //   if (activate) {
+    //     activateKeepAwake();
+    //   } else {
+    //     deactivateKeepAwake();
+    //   }
+    // },
+  };
+
+  storage = {
+    getItem: async (key: string, defaultValue?: any) => {
+      try {
+        const jsonValue = await AsyncStorage.getItem(key);
+        if (jsonValue) {
+          const value = JSON.parse(jsonValue);
+          if (value === null || value === undefined) {
+            return defaultValue;
+          } else {
+            return value;
+          }
+        } else if (defaultValue !== undefined) {
+          return defaultValue;
+        } else {
+          return null;
+        }
+      } catch (e) {
+        console.error(`[storage] Error reading ${key}`, e);
+        return defaultValue || null;
+      }
+    },
+    setItem: async (key: string, item: any) => {
+      try {
+        const jsonValue = JSON.stringify(item);
+        await AsyncStorage.setItem(key, jsonValue);
+      } catch (e) {
+        console.error(`[storage] Error storing ${key}`, item, e);
+        throw new Error(e as any);
+      }
+    },
+  };
+
+  tracking = {
+    log: (message: string) => {
+      console.info(message);
+    },
+  };
+
+  initIcons = () => {
+    console.debug("[unifier] Initializing icons");
+  };
+}
+
+export const Unifier = new UnifierClass();