ferns-ui 0.37.0 → 0.37.2

package/src/IconButton.tsx

@@ -1,4 +1,4 @@
-import React, {forwardRef, useState} from "react";
+import React, {forwardRef, useContext, useState} from "react";
 import {Platform, Pressable, View, ViewStyle} from "react-native";
 
 import {
@@ -16,6 +16,7 @@ import {
 import {Icon} from "./Icon";
 import {Modal} from "./Modal";
 import {Text} from "./Text";
+import {ThemeContext} from "./Theme";
 import {Tooltip} from "./Tooltip";
 import {Unifier} from "./Unifier";
 
@@ -26,7 +27,14 @@ export interface IconButtonProps {
   iconColor: "darkGray" | ButtonColor | ThemeColor | Color;
   onClick: () => void;
   size?: IconSize;
-  bgColor?: "transparent" | "transparentDarkGray" | "gray" | "lightGray" | "white"; // default transparent
+  bgColor?:
+    | "transparent"
+    | "transparentDarkGray"
+    | "gray"
+    | "lightGray"
+    | "white"
+    | "background"
+    | "backgroundSecondary"; // default transparent
   disabled?: boolean;
   selected?: boolean;
   withConfirmation?: boolean;
@@ -59,6 +67,7 @@ export const IconButton = forwardRef(
     }: IconButtonProps,
     ref
   ) => {
+    const {theme} = useContext(ThemeContext);
     const [showConfirmation, setShowConfirmation] = useState(false);
 
     const opacity = 1;
@@ -68,7 +77,7 @@ export const IconButton = forwardRef(
     } else if (bgColor === "transparent" || !bgColor) {
       color = "rgba(0, 0, 0, 0.0)";
     } else {
-      color = Unifier.theme[bgColor];
+      color = theme[bgColor];
     }
 
     const IndicatorPosition = {

package/src/Modal.tsx

@@ -8,6 +8,7 @@ import {Heading} from "./Heading";
 import {IconButton} from "./IconButton";
 import {isMobileDevice} from "./MediaQuery";
 import {Text} from "./Text";
+import {isNative} from "./Utilities";
 
 interface ModalProps {
   onDismiss: () => void;
@@ -240,7 +241,7 @@ export const Modal = ({
     );
   };
 
-  if (isMobileDevice()) {
+  if (isMobileDevice() && isNative()) {
     return renderActionSheet();
   } else {
     return renderModal();

package/src/Page.tsx

@@ -6,9 +6,7 @@ import {Color, UnsignedUpTo12} from "./Common";
 import {ErrorBoundary} from "./ErrorBoundary";
 import {Heading} from "./Heading";
 import {IconButton} from "./IconButton";
-// import {KeyboardAccessoryNavigation} from "react-native-keyboard-accessory";
 import {Spinner} from "./Spinner";
-import {Unifier} from "./Unifier";
 
 interface PageProps {
   // TODO: figure out navigation
@@ -99,9 +97,7 @@ export class Page extends React.Component<PageProps, {}> {
           width="100%"
         >
           {this.renderHeader()}
-          {this.props.loading === true && (
-            <Spinner color={Unifier.theme.darkGray as any} size="md" />
-          )}
+          {this.props.loading === true && <Spinner color="darkGray" size="md" />}
           {/* <KeyboardAccessoryNavigation
           avoidKeyboard
           doneButton={true}

package/src/ProgressBar.tsx

@@ -1,55 +1,52 @@
-import React from "react";
+import React, {useContext} from "react";
 import {View} from "react-native";
 
-import {ProgressBarProps} from "./Common";
-import {Unifier} from "./Unifier";
+import {Color} from "./Common";
+import {ThemeContext} from "./Theme";
 
-interface ProgressBarState {}
+export interface ProgressBarProps {
+  color: Color;
+  completed: number;
+}
 
-export class ProgressBar extends React.Component<ProgressBarProps, ProgressBarState> {
-  constructor(props: ProgressBarProps) {
-    super(props);
-    this.state = {};
-  }
+export function ProgressBar({color, completed}: ProgressBarProps): React.ReactElement {
+  const {theme} = useContext(ThemeContext);
 
-  render() {
-    // console.log("PROGRESS", Unifier.theme[this.props.color], `${this.props.completed / 100}%`);
-    return (
+  return (
+    <View
+      style={{
+        width: "100%",
+        height: 6,
+      }}
+    >
       <View
         style={{
           width: "100%",
+          position: "absolute",
+          top: 0,
+          left: 0,
+          height: 6,
+          borderRadius: 6,
+          borderWidth: 1,
+          borderColor: theme[color],
+          backgroundColor: theme[color],
+          opacity: 0.3,
+        }}
+      />
+      <View
+        style={{
+          width: `${Math.min(completed / 100, 1) * 100}%`,
+          position: "absolute",
+          top: 0,
+          left: 0,
           height: 6,
+          borderRadius: 6,
+          borderWidth: 1,
+          borderColor: theme[color],
+          backgroundColor: theme[color],
+          opacity: 1,
         }}
-      >
-        <View
-          style={{
-            width: "100%",
-            position: "absolute",
-            top: 0,
-            left: 0,
-            height: 6,
-            borderRadius: 6,
-            borderWidth: 1,
-            borderColor: Unifier.theme[this.props.color],
-            backgroundColor: Unifier.theme[this.props.color],
-            opacity: 0.3,
-          }}
-        />
-        <View
-          style={{
-            width: `${Math.min(this.props.completed / 100, 1) * 100}%`,
-            position: "absolute",
-            top: 0,
-            left: 0,
-            height: 6,
-            borderRadius: 6,
-            borderWidth: 1,
-            borderColor: Unifier.theme[this.props.color],
-            backgroundColor: Unifier.theme[this.props.color],
-            opacity: 1,
-          }}
-        />
-      </View>
-    );
-  }
+      />
+    </View>
+  );
 }

package/src/SelectList.tsx

@@ -1,10 +1,10 @@
-import React from "react";
+import React, {useContext} from "react";
 import {Platform} from "react-native";
 
 import {FieldWithLabelsProps, StyleProp} from "./Common";
 import {Icon} from "./Icon";
 import {RNPickerSelect} from "./PickerSelect";
-import {Unifier} from "./Unifier";
+import {ThemeContext} from "./Theme";
 import {WithLabel} from "./WithLabel";
 
 // Use "" if you want to have an "unset" value.
@@ -32,11 +32,13 @@ export function SelectList({
   placeholder,
   disabled,
 }: SelectListProps) {
+  const {theme} = useContext(ThemeContext);
+
   const withLabelProps = {label, labelColor};
 
-  let backgroundColor = style?.backgroundColor || Unifier.theme.white;
+  let backgroundColor = style?.backgroundColor || theme.white;
   if (disabled) {
-    backgroundColor = Unifier.theme.lightGray;
+    backgroundColor = theme.lightGray;
   }
 
   return (
@@ -58,7 +60,7 @@ export function SelectList({
             alignItems: style?.alignItems || "center",
             minHeight: style?.minHeight || 50,
             width: style?.width || "100%",
-            borderColor: style?.borderColor || Unifier.theme.gray,
+            borderColor: style?.borderColor || theme.gray,
             borderWidth: style?.borderWidth || 1,
             borderRadius: style?.borderRadius || 5,
             backgroundColor,

package/src/Spinner.tsx

@@ -1,7 +1,12 @@
 import React, {ReactElement, useEffect, useState} from "react";
 import {ActivityIndicator} from "react-native";
 
-import {SpinnerProps} from "./Common";
+import {Color} from "./Common";
+
+export interface SpinnerProps {
+  size?: "sm" | "md";
+  color?: Color;
+}
 
 export function Spinner({size, color}: SpinnerProps): ReactElement | null {
   const [show, setShow] = useState(false);
@@ -16,5 +21,5 @@ export function Spinner({size, color}: SpinnerProps): ReactElement | null {
     return null;
   }
   const spinnerSize: "small" | "large" = size === "sm" ? "small" : "large";
-  return <ActivityIndicator color={color || "darkGray"} size={spinnerSize} />;
+  return <ActivityIndicator color={color ?? "darkGray"} size={spinnerSize} />;
 }

package/src/SplitPage.native.tsx

@@ -1,5 +1,5 @@
 // TODO: Update SplitPage native to have desktop UX for tablet sized screens
-import React, {useCallback, useEffect, useState} from "react";
+import React, {useCallback, useContext, useEffect, useState} from "react";
 import flattenChildren from "react-keyed-flatten-children";
 import {Dimensions, ListRenderItemInfo, View} from "react-native";
 import {SwiperFlatList} from "react-native-swiper-flatlist";
@@ -9,6 +9,7 @@ import {SplitPageProps} from "./Common";
 import {FlatList} from "./FlatList";
 import {IconButton} from "./IconButton";
 import {Spinner} from "./Spinner";
+import {ThemeContext} from "./Theme";
 import {Unifier} from "./Unifier";
 
 export const SplitPage = ({
@@ -25,6 +26,7 @@ export const SplitPage = ({
   bottomNavBarHeight,
   showItemList,
 }: SplitPageProps) => {
+  const {theme} = useContext(ThemeContext);
   const [selectedId, setSelectedId] = useState<number | undefined>(undefined);
 
   // flattenChildren is necessary to pull children from a React Fragment. Without this,
@@ -153,7 +155,7 @@ export const SplitPage = ({
       keyboardOffset={keyboardOffset}
       width="100%"
     >
-      {loading === true && <Spinner color={Unifier.theme.darkGray as any} size="md" />}
+      {loading === true && <Spinner color={theme.darkGray as any} size="md" />}
       {selectedId === undefined ? renderList() : renderMainContent}
     </Box>
   );

package/src/SplitPage.tsx

@@ -1,4 +1,4 @@
-import React, {Children, useCallback, useEffect, useState} from "react";
+import React, {Children, useCallback, useContext, useEffect, useState} from "react";
 import {Dimensions, ListRenderItemInfo, ScrollView, View} from "react-native";
 import {SwiperFlatList} from "react-native-swiper-flatlist";
 
@@ -9,7 +9,7 @@ import {IconButton} from "./IconButton";
 import {mediaQueryLargerThan} from "./MediaQuery";
 import {SegmentedControl} from "./SegmentedControl";
 import {Spinner} from "./Spinner";
-import {Unifier} from "./Unifier";
+import {ThemeContext} from "./Theme";
 
 // A component for rendering a list on one side and a details view on the right for large screens,
 // and a scrollable list where clicking an item takes you the details view.
@@ -30,6 +30,7 @@ export const SplitPage = ({
   showItemList,
   selectLimit,
 }: SplitPageProps) => {
+  const {theme} = useContext(ThemeContext);
   const [selectedId, setSelectedId] = useState<number | undefined>(undefined);
   const [activeTabs, setActiveTabs] = useState<number[]>([0, 1]);
   const {width} = Dimensions.get("window");
@@ -295,7 +296,7 @@ export const SplitPage = ({
       padding={2}
       width="100%"
     >
-      {loading === true && <Spinner color={Unifier.theme.darkGray as any} size="md" />}
+      {loading === true && <Spinner color={theme.darkGray as any} size="md" />}
       {Boolean(isMobileDevice) ? renderMobileSplitPage() : renderSplitPage()}
     </Box>
   );

package/src/Text.tsx

@@ -1,9 +1,9 @@
-import React from "react";
+import React, {useContext} from "react";
 import {Text as NativeText, TextStyle} from "react-native";
 
 import {AllColors, Font, TextSize} from "./Common";
 import {Hyperlink} from "./Hyperlink";
-import {Unifier} from "./Unifier";
+import {ThemeContext} from "./Theme";
 
 export interface TextProps {
   align?: "left" | "right" | "center" | "justify"; // default "left"
@@ -44,6 +44,8 @@ export function Text({
   testID,
   weight = "normal",
 }: TextProps): React.ReactElement {
+  const {theme} = useContext(ThemeContext);
+
   function propsToStyle(): any {
     const style: TextStyle = {};
     if (overflow) {
@@ -79,16 +81,16 @@ export function Text({
       style.fontWeight = "bold";
     }
 
-    style.fontFamily = Unifier.theme[computedFont as keyof typeof Unifier.theme];
+    style.fontFamily = theme[computedFont as keyof typeof theme];
 
     style.fontSize = fontSizes[size || "md"];
     if (align) {
       style.textAlign = align;
     }
     if (color) {
-      style.color = Unifier.theme[color];
+      style.color = theme[color];
     } else {
-      style.color = Unifier.theme.darkGray;
+      style.color = theme.darkGray;
     }
 
     if (italic) {

package/src/TextField.tsx

@@ -1,5 +1,5 @@
 import {AsYouType} from "libphonenumber-js";
-import React, {ReactElement, useCallback, useMemo, useState} from "react";
+import React, {ReactElement, useCallback, useContext, useMemo, useState} from "react";
 import {
   ActivityIndicator,
   KeyboardTypeOptions,
@@ -17,7 +17,7 @@ import {DecimalRangeActionSheet} from "./DecimalRangeActionSheet";
 import {HeightActionSheet} from "./HeightActionSheet";
 import {Icon} from "./Icon";
 import {NumberPickerActionSheet} from "./NumberPickerActionSheet";
-import {Unifier} from "./Unifier";
+import {ThemeContext} from "./Theme";
 import {WithLabel} from "./WithLabel";
 
 const keyboardMap: {[id: string]: string | undefined} = {
@@ -88,6 +88,8 @@ export function TextField({
   onEnter,
   onSubmitEditing,
 }: TextFieldProps): ReactElement {
+  const {theme} = useContext(ThemeContext);
+
   const dateActionSheetRef: React.RefObject<any> = React.createRef();
   const numberRangeActionSheetRef: React.RefObject<any> = React.createRef();
   const decimalRangeActionSheetRef: React.RefObject<any> = React.createRef();
@@ -104,7 +106,7 @@ export function TextField({
     if (searching) {
       return (
         <Box marginRight={4}>
-          <ActivityIndicator color={Unifier.theme.primary} size="small" />
+          <ActivityIndicator color={theme.primary} size="small" />
         </Box>
       );
     } else {
@@ -118,11 +120,11 @@ export function TextField({
 
   let borderColor;
   if (errorMessage) {
-    borderColor = Unifier.theme.red;
+    borderColor = theme.red;
   } else if (focused) {
-    borderColor = Unifier.theme.blue;
+    borderColor = theme.blue;
   } else {
-    borderColor = Unifier.theme.gray;
+    borderColor = theme.gray;
   }
 
   const getHeight = useCallback(() => {
@@ -144,8 +146,8 @@ export function TextField({
       paddingLeft: 0,
       height: getHeight(),
       width: "100%",
-      color: Unifier.theme.darkGray,
-      fontFamily: Unifier.theme.primaryFont,
+      color: theme.darkGray,
+      fontFamily: theme.primaryFont,
       ...style,
     };
 
@@ -154,7 +156,7 @@ export function TextField({
     }
 
     return defaultStyles;
-  }, [getHeight, style]);
+  }, [getHeight, style, theme.darkGray, theme.primaryFont]);
 
   const isHandledByModal = [
     "date",
@@ -258,7 +260,7 @@ export function TextField({
               borderColor,
               borderWidth: focused ? 5 : 1,
               borderRadius: 16,
-              backgroundColor: disabled ? Unifier.theme.gray : Unifier.theme.white,
+              backgroundColor: disabled ? theme.gray : theme.white,
               overflow: "hidden",
             }}
             onPress={() => {
@@ -286,7 +288,7 @@ export function TextField({
               multiline={multiline}
               numberOfLines={rows || 4}
               placeholder={placeholder}
-              placeholderTextColor={Unifier.theme.gray}
+              placeholderTextColor={theme.gray}
               returnKeyType={type === "number" || type === "decimal" ? "done" : returnKeyType}
               secureTextEntry={type === "password"}
               style={defaultTextInputStyles}

package/src/Theme.tsx

@@ -0,0 +1,189 @@
+import React, {createContext, useState} from "react";
+
+import {UnifiedTheme} from "./Common";
+import {changeColorLuminance} from "./Unifier";
+
+const DEFAULT_FONT = "Cochin";
+const DEFAULT_BOLD_FONT = "Cochin";
+
+const darkGray = "#111111";
+const lightGray = "#efefef";
+const gray = "#8e8e8e";
+const white = "#fdfdfd";
+const primary = "#5c58bb";
+const secondary = "#8d58bb";
+const accent = "#58b3bb";
+const tertiary = "#b7956f";
+
+const defaultTheme: UnifiedTheme = {
+  // Primary colors
+  white,
+  lightGray,
+  gray,
+  darkGray,
+  // secondary colors
+  green: "#0fa573",
+  red: "#bd081c",
+  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: changeColorLuminance(primary, "lighter"),
+  primaryLight: changeColorLuminance(primary, "light"),
+  primary,
+  primaryDark: changeColorLuminance(primary, "dark"),
+  primaryDarker: changeColorLuminance(primary, "darker"),
+
+  secondaryLighter: changeColorLuminance(secondary, "lighter"),
+  secondaryLight: changeColorLuminance(secondary, "light"),
+  secondary,
+  secondaryDark: changeColorLuminance(secondary, "dark"),
+  secondaryDarker: changeColorLuminance(secondary, "darker"),
+
+  accentLighter: changeColorLuminance(accent, "lighter"),
+  accentLight: changeColorLuminance(accent, "light"),
+  accent,
+  accentDark: changeColorLuminance(accent, "dark"),
+  accentDarker: changeColorLuminance(accent, "darker"),
+
+  tertiaryLighter: changeColorLuminance(tertiary, "lighter"),
+  tertiaryLight: changeColorLuminance(tertiary, "light"),
+  tertiary,
+  tertiaryDark: changeColorLuminance(tertiary, "dark"),
+  tertiaryDarker: changeColorLuminance(tertiary, "darker"),
+
+  background: white,
+  backgroundSecondary: lightGray,
+  textPrimary: darkGray,
+  textSecondary: lightGray,
+  textDisabled: gray,
+  divider: gray,
+
+  // 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 const ThemeContext = createContext({
+  setTheme: (_theme: Partial<UnifiedTheme>) => {},
+  theme: defaultTheme,
+  resetTheme: () => {},
+});
+
+interface ThemeProviderProps {
+  children: any;
+}
+
+function setThemeWithLuminances(
+  oldTheme: UnifiedTheme,
+  newTheme: Partial<UnifiedTheme>
+): UnifiedTheme {
+  return {
+    ...oldTheme,
+    ...newTheme,
+    primaryLighter:
+      newTheme.primaryLighter ??
+      changeColorLuminance(newTheme.primary ?? oldTheme.primary, "lighter"),
+    primaryLight:
+      newTheme.primaryLight ?? changeColorLuminance(newTheme.primary ?? oldTheme.primary, "light"),
+    primary: newTheme.primary ?? oldTheme.primary,
+    primaryDark:
+      newTheme.primaryDark ?? changeColorLuminance(newTheme.primary ?? oldTheme.primary, "dark"),
+    primaryDarker:
+      newTheme.primaryDarker ??
+      changeColorLuminance(newTheme.primary ?? oldTheme.primary, "darker"),
+
+    secondaryLighter:
+      newTheme.secondaryLighter ??
+      changeColorLuminance(newTheme.secondary ?? oldTheme.secondary, "lighter"),
+    secondaryLight:
+      newTheme.secondaryLight ??
+      changeColorLuminance(newTheme.secondary ?? oldTheme.secondary, "light"),
+    secondary: newTheme.secondary ?? oldTheme.secondary,
+    secondaryDark:
+      newTheme.secondaryDark ??
+      changeColorLuminance(newTheme.secondary ?? oldTheme.secondary, "dark"),
+    secondaryDarker:
+      newTheme.secondaryDarker ??
+      changeColorLuminance(newTheme.secondary ?? oldTheme.secondary, "darker"),
+
+    accentLighter:
+      newTheme.accentLighter ?? changeColorLuminance(newTheme.accent ?? oldTheme.accent, "lighter"),
+    accentLight:
+      newTheme.accentLight ?? changeColorLuminance(newTheme.accent ?? oldTheme.accent, "light"),
+    accent: newTheme.accent ?? oldTheme.accent,
+    accentDark:
+      newTheme.accentDark ?? changeColorLuminance(newTheme.accent ?? oldTheme.accent, "dark"),
+    accentDarker:
+      newTheme.accentDarker ?? changeColorLuminance(newTheme.accent ?? oldTheme.accent, "darker"),
+
+    tertiaryLighter:
+      newTheme.tertiaryLighter ??
+      changeColorLuminance(newTheme.tertiary ?? oldTheme.tertiary, "lighter"),
+    tertiaryLight:
+      newTheme.tertiaryLight ??
+      changeColorLuminance(newTheme.tertiary ?? oldTheme.tertiary, "light"),
+    tertiary: newTheme.tertiary ?? oldTheme.tertiary,
+    tertiaryDark:
+      newTheme.tertiaryDark ?? changeColorLuminance(newTheme.tertiary ?? oldTheme.tertiary, "dark"),
+    tertiaryDarker:
+      newTheme.tertiaryDarker ??
+      changeColorLuminance(newTheme.tertiary ?? oldTheme.tertiary, "darker"),
+  };
+}
+
+export const ThemeProvider = ({children}: ThemeProviderProps) => {
+  const [providerTheme, setProviderTheme] = useState<UnifiedTheme>(defaultTheme);
+
+  const setTheme = (newTheme: Partial<UnifiedTheme>) => {
+    setProviderTheme(setThemeWithLuminances(providerTheme, newTheme));
+  };
+
+  const resetTheme = () => {
+    setProviderTheme(defaultTheme);
+  };
+
+  return (
+    <ThemeContext.Provider value={{theme: providerTheme, setTheme, resetTheme}}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};

package/src/Tooltip.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import {useContext} from "react";
 import {
   Dimensions,
   LayoutChangeEvent,
@@ -11,7 +12,7 @@ import {Portal} from "react-native-portalize";
 
 import {TooltipDirection} from "./Common";
 import {Text} from "./Text";
-import {Unifier} from "./Unifier";
+import {ThemeContext} from "./Theme";
 
 const TOOLTIP_OFFSET = 8;
 // How many pixels to leave between the tooltip and the edge of the screen
@@ -125,6 +126,7 @@ interface TooltipProps {
 }
 
 export const Tooltip = (props: TooltipProps) => {
+  const {theme} = useContext(ThemeContext);
   const {text, children, bgColor, idealDirection} = props;
   const hoverDelay = 500;
   const hoverEndDelay = 1500;
@@ -230,7 +232,7 @@ export const Tooltip = (props: TooltipProps) => {
               alignSelf: "flex-start",
               justifyContent: "center",
               paddingHorizontal: 16,
-              backgroundColor: Unifier.theme[bgColor ?? "darkGray"],
+              backgroundColor: theme[bgColor ?? "darkGray"],
               borderRadius: 16,
               paddingVertical: 8,
               display: "flex",