ferns-ui 0.39.0 → 0.39.2

package/src/ActionSheet.tsx

@@ -21,359 +21,9 @@ import {
   TextInput,
   UIManager,
   View,
-  ViewStyle,
 } from "react-native";
 
-export type ActionSheetProps = {
-  children?: React.ReactNode;
-  ref?: React.MutableRefObject<{
-    /**
-     * Open or close the ActionSheet.
-     */
-    setModalVisible(visible?: boolean): void;
-
-    /**
-     * Open the Action Sheet.
-     */
-    show(): void;
-
-    /**
-     * Close the ActionSheet.
-     */
-    hide(): void;
-
-    /**
-     * Attach this to any child ScrollView Component's onScrollEndDrag,
-     * onMomentumScrollEnd,onScrollAnimationEnd callbacks to handle the ActionSheet
-     * closing and bouncing back properly.
-     */
-    handleChildScrollEnd(): void;
-
-    /**
-     * Snap ActionSheet to given offset
-     */
-    snapToOffset(offset: number): void;
-  }>;
-  /**
-      * Animate the opening and closing of ActionSheet.
-
- | Type | Required |
- | ---- | -------- |
- | boolean | no |
-
- Default: `true`
-      */
-  animated?: boolean;
-
-  /**
-      * Use if you want to show the ActionSheet Partially on Opening. **Requires `gestureEnabled=true`**
-
- | Type | Required |
- | ---- | -------- |
- | boolean | no |
-
- Default:`1`
-      */
-
-  initialOffsetFromBottom?: number;
-
-  /**
-      * When touch ends and user has not moved farther from the set springOffset, the ActionSheet will return to previous position.
-
- | Type | Required |
- | ---- | -------- |
- | number | no |
-
- Default: `50`
-      */
-  springOffset?: number;
-  /**
-      * Add elevation to the ActionSheet container.
-
- | Type | Required |
- | ---- | -------- |
- | number | no |
-
- Default: `0`
-
- #
-      */
-  elevation?: number;
-
-  /**
-      * Color of the gestureEnabled Indicator.
-
- | Type | Required |
- | ---- | -------- |
- | string | no |
-
- Default: `"#f0f0f0"`
-      */
-  indicatorColor?: string;
-
-  /**
-      * Normally when the ActionSheet is fully opened, a small portion from the bottom is hidden by default. Use this prop if you want the ActionSheet to hover over the bottom of screen and not hide a little behind it.
-
- | Type | Required |
- | ---- | -------- |
- | number | no |
-
- Default:`0`
-      */
-  extraScroll?: number;
-  /**
-      * Color of the overlay/backdrop.
-
- | Type | Required |
- | ---- | -------- |
- | string | no |
-
- Default: `"black"`
-      */
-  overlayColor?: string;
-
-  /**
-      * Keep the header always visible even when gestures are disabled.
-
- | Type | Required |
- | ---- | -------- |
- | boolean | no |
-
- Default: `false`
-      */
-  headerAlwaysVisible?: boolean;
-
-  /**
-      * Delay draw of ActionSheet on open for android.
-
- | Type | Required |
- | ---- | -------- |
- | boolean | no |
-
- Default: `false`
-      */
-
-  delayActionSheetDraw?: boolean;
-
-  /**
-      * Delay draw of ActionSheet on open for android time.
-
- | Type | Required |
- | ---- | -------- |
- | number (ms) | no |
-
- Default: `50`
-      */
-
-  delayActionSheetDrawTime?: number;
-
-  /**
-      * Your custom header component. Using this will hide the default indicator.
-
- | Type | Required |
- | ---- | -------- |
- | React.Component | no |
-      */
-  CustomHeaderComponent?: React.ReactNode;
-
-  /**
-      * Any custom styles for the container.
-
- | Type | Required |
- | ---- | -------- |
- | Object | no |
-      */
-  containerStyle?: ViewStyle;
-
-  /**
-      * Control closing ActionSheet by touching on backdrop.
-
- | Type | Required |
- | ---- | -------- |
- | boolean | no |
-
- Default: `true`
-      */
-  closeOnTouchBackdrop?: boolean;
-
-  /**
-      * Speed of opening animation. Higher means the ActionSheet will open more quickly.
-
- | Type | Required |
- | ---- | -------- |
- | number | no |
-
- Default: `12`
-      */
-  openAnimationSpeed?: number;
-  /**
-      * Duration of closing animation.
-
- | Type | Required |
- | ---- | -------- |
- | number | no |
-
- Default: `300`
-      */
-  closeAnimationDuration?: number;
-  /**
-      *
- How much you want the ActionSheet to bounce when it is opened.
-
- | Type | Required |
- | ---- | -------- |
- | number | no |
-
- Default: `8`
-      */
-  bounciness?: number;
-
-  /**
-      * Will the ActionSheet close on `hardwareBackPress` event.
-
- | Type | Required |
- | ---- | -------- |
- | boolean | no |
-
- Default: `true`
-      */
-  closeOnPressBack?: boolean;
-  /**
-      * Default opacity of the overlay/backdrop.
-
- | Type | Required |
- | ---- | -------- |
- | number 0 - 1 | no |
-
- Default: `0.3`
-      */
-  defaultOverlayOpacity?: number;
-
-  /**
-      * Enables gesture control of ActionSheet
-
- | Type | Required |
- | ---- | -------- |
- | boolean | no |
-
- Default: `false`
-      */
-  gestureEnabled?: boolean;
-
-  /**
-      * Bounces the ActionSheet on open.
-
- | Type | Required |
- | ---- | -------- |
- | boolean | no |
-
- Default: `false`
-      */
-  bounceOnOpen?: boolean;
-
-  /**
-      * Setting the keyboard persistence of the ScrollView component, should be one of "never", "always", or "handled"
-
- | Type | Required |
- | ---- | -------- |
- | string | no |
-
- Default: `"never"`
-      */
-  keyboardShouldPersistTaps?: boolean | "always" | "never" | "handled";
-
-  /**
-      * Determine whether the modal should go under the system statusbar.
-
- | Type | Required |
- | ---- | -------- |
- | boolean | no |
-
- Default: `true`
-      */
-  statusBarTranslucent?: boolean;
-
-  /**
-      * Prevent ActionSheet from closing on
-      * gesture or tapping on backdrop.
-      * Instead snap it to `bottomOffset` location
-      *
-      *
-       * | Type | Required |
- | ---- | -------- |
- | boolean | no |
-       */
-  closable?: boolean;
-
-  /**
-     * Allow ActionSheet to draw under the StatusBar.
-     * This is enabled by default.
-     *
-     *
-      * | Type | Required |
- | ---- | -------- |
- | boolean | no |
- Default: `true`
-      */
-  drawUnderStatusBar?: boolean;
-
-  /**
-      * Snap ActionSheet to this location if `closable` is set to false;
-      *
-      *
-       * | Type | Required |
- | ---- | -------- |
- | number | no |
-       */
-
-  bottomOffset?: number;
-
-  /**
-     * Change how ActionSheet behaves when keyboard is opened.
-     *
-     *
-      * | Type | Required |
- | ---- | -------- |
- | "padding" | "position" | no |
- Default:`padding`
-      */
-
-  keyboardMode?: "padding" | "position";
-
-  /**
-   * Test ID for unit testing
-   */
-  testID?: string;
-
-  /**
-      *
- Event called when the ActionSheet closes.
-
-
- * | Type | Required |
- | ---- | -------- |
- | function | no |
-
-
- #
-      */
-
-  onClose?: () => void;
-
-  /**
-      * An event called when the ActionSheet Opens.
-
- | Type | Required |
- | ---- | -------- |
- | function | no |
-      */
-  onOpen?: () => void;
-
-  /**
-   * Event called when position of ActionSheet changes.
-   */
-  onPositionChanged?: (hasReachedTop: boolean) => void;
-};
+import {ActionSheetProps} from "./Common";
 
 export const styles = StyleSheet.create({
   scrollView: {

package/src/Avatar.tsx

@@ -5,7 +5,7 @@ import React, {useContext, useEffect, useState} from "react";
 import {Image, ImageResizeMode, Platform, Text, View} from "react-native";
 
 import {Box} from "./Box";
-import {AllColors, IconName, UnsignedUpTo12} from "./Common";
+import {AllColors, AvatarProps, IconName, UnsignedUpTo12} from "./Common";
 import {Icon} from "./Icon";
 import {isMobileDevice} from "./MediaQuery";
 import {ThemeContext} from "./Theme";
@@ -39,86 +39,6 @@ const statusIcons: {[id: string]: {icon: IconName; color: AllColors; label: stri
   commuting: {icon: "car", color: "orange", label: "Commuting"},
 };
 
-export type AvatarStatus =
-  | "online"
-  | "offline"
-  | "doNotDisturb"
-  | "away"
-  | "meeting"
-  | "vacation"
-  | "sick"
-  | "outOfOffice"
-  | "commuting";
-
-interface AvatarProps {
-  // Color for the background of the circle when no src picture is present.
-  backgroundColor?: AllColors;
-  // Color for the initials when no src picture is present.
-  textColor?: AllColors;
-  /**
-   * The name of the user. This is used for the placeholder treatment if an image is not available.
-   */
-  name: string;
-  /**
-   * Override the generated initials from `name`.
-   */
-  initials?: string;
-  /**
-   * Adds a white border around Avatar so it's visible when displayed on other images.
-   */
-  outline?: boolean;
-  /**
-   * xs: 24px, sm: 32px, md: 48px, lg: 64px, xl: 120px.
-   */
-  size?: "xs" | "sm" | "md" | "lg" | "xl";
-  /**
-   * The URL of the user's image.
-   */
-  src?: string;
-  /**
-   * The fit for the image within the Avatar: "cover" | "contain" | "none".
-   * Default is undefined. See Image.tsx for more info
-   */
-  imageFit?: "cover" | "contain" | "none";
-  /**
-   * Allow user to edit the image of the avatar
-   */
-  editAvatarImage?: boolean;
-  /**
-   * Function to handle the avatar image edit
-   */
-  onChange?: (val: any) => void;
-  /**
-   * Resize image width. If only the width is provided, the image will preserve aspect ratio
-   */
-  avatarImageWidth?: number;
-  /**
-   * Resize image height. If avatarImageWidth is also provided, the image aspect ratio may be distorted.
-   */
-  avatarImageHeight?: number;
-  /**
-   * The image format that the image will be saved as after any edits by the expo-image-manipulator
-   */
-  avatarImageFormat?: SaveFormat;
-  /**
-   * The status of the user to display with the avatar.
-   */
-  status?: AvatarStatus;
-  /**
-   * If true, the status indicator will show a mobile icon instead of a dot, if status is one of
-   * "online", "away", "offline", or "doNotDisturb". Will show the normal status icon in other cases.
-   */
-  statusMobile?: boolean;
-  /**
-   * Text to show when hovering over the avatar image. Only works on web.
-   */
-  statusText?: string;
-  /**
-   * If edit icon should be present when no image is present
-   */
-  shouldShowEditIconIfNoImage?: boolean;
-}
-
 export const Avatar = (props: AvatarProps): React.ReactElement => {
   const {theme} = useContext(ThemeContext);
 
@@ -272,8 +192,8 @@ export const Avatar = (props: AvatarProps): React.ReactElement => {
         onHoverStart={() => setHovered(true)}
       >
         {src && isImageLoaded ? (
-          // TODO: Make our Image component rounding work so that we can use it for Avatar. Currently it creates an
-          // unrounded box around the Image.
+          // TODO: Make our Image component rounding work so that we can use it for Avatar.
+          // Currently it creates an unrounded box around the Image.
           <Image
             resizeMode={imageFit as ImageResizeMode}
             source={{uri: src, cache: "force-cache"}}
@@ -318,8 +238,8 @@ export const Avatar = (props: AvatarProps): React.ReactElement => {
   }
 
   if (status) {
-    // Need to wrap the tooltip so it doesn't expand to 100% width and render the tooltip off. Don't show the
-    // tooltips on mobile because they intercept the edit avatar clicks.
+    // Need to wrap the tooltip so it doesn't expand to 100% width and render the tooltip off.
+    // Don't show the tooltips on mobile because they intercept the edit avatar clicks.
     return (
       <Box width={width}>
         <Tooltip idealDirection="top" text={isMobileDevice() ? undefined : status}>

package/src/Badge.tsx

@@ -1,20 +1,9 @@
 import React, {useContext} from "react";
 import {Text, View} from "react-native";
 
-import {AllColors} from "./Common";
+import {BadgeProps} from "./Common";
 import {ThemeContext} from "./Theme";
 
-interface BadgeProps {
-  // The text to display inside the badge.
-  title: string;
-  // Position relative to the text. Top should only be used with headings.
-  position?: "top" | "middle"; // default "middle"
-  // Some default badge types. Occasionally, a custom badge might be required for different color schemes.
-  type?: "info" | "error" | "warning" | "success" | "neutral" | "custom"; // default "info
-  // If `type` is set to "custom", a custom theme color should be provided.
-  color?: AllColors;
-}
-
 export function Badge({
   title,
   position = "middle",

package/src/Banner.tsx

@@ -1,26 +1,12 @@
 import React, {useEffect, useState} from "react";
 
 import {Box} from "./Box";
-import {BoxColor, ButtonColor, IconName, Rounding, TextColor} from "./Common";
+import {BannerProps, ButtonColor} from "./Common";
 import {Icon} from "./Icon";
 import {IconButton} from "./IconButton";
 import {Text} from "./Text";
 import {Unifier} from "./Unifier";
 
-export interface BannerProps {
-  id: string;
-  dismissible?: boolean;
-  text: string;
-  subtext?: string;
-  iconName?: IconName;
-  color?: BoxColor;
-  textColor?: TextColor;
-  negativeXMargin?: number;
-  shape?: Rounding;
-  type?: "dismiss" | "action" | "permanent";
-  onClick?: () => void;
-}
-
 function getKey(id: string): string {
   return `@FernsUI:${id}`;
 }

package/src/Body.tsx

@@ -1,19 +1,10 @@
-import React, {ReactNode, useContext} from "react";
+import React, {useContext} from "react";
 import {ActivityIndicator, KeyboardAvoidingView} from "react-native";
 
 import {Box} from "./Box";
-import {UnsignedUpTo12} from "./Common";
+import {BodyProps} from "./Common";
 import {ThemeContext} from "./Theme";
 
-export interface BodyProps {
-  scroll?: boolean;
-  loading?: boolean;
-  padding?: UnsignedUpTo12;
-  height?: number | string;
-  avoidKeyboard?: boolean; // default true
-  children?: ReactNode;
-}
-
 export function Body({
   scroll,
   loading,

package/src/Box.tsx

@@ -51,8 +51,8 @@ export const Box = React.forwardRef((props: BoxProps, ref) => {
   useImperativeHandle(ref, () => ({
     scrollToEnd: () => {
       if (scrollRef && scrollRef.current) {
-        // HACK HACK HACK...but it works. Probably need to do some onContentSizeChange or onLayout to
-        // avoid this, but it works well enough.
+        // HACK HACK HACK...but it works. Probably need to do some onContentSizeChange or onLayout
+        // to avoid this, but it works well enough.
         setTimeout(() => {
           scrollRef && scrollRef.current && (scrollRef.current as any).scrollToEnd();
         }, 50);
@@ -61,8 +61,8 @@ export const Box = React.forwardRef((props: BoxProps, ref) => {
 
     scrollTo: (y: number) => {
       if (scrollRef && scrollRef.current) {
-        // HACK HACK HACK...but it works. Probably need to do some onContentSizeChange or onLayout to
-        // avoid this, but it works well enough.
+        // HACK HACK HACK...but it works. Probably need to do some onContentSizeChange or onLayout
+        // to avoid this, but it works well enough.
         setTimeout(() => {
           scrollRef && scrollRef.current && (scrollRef.current as any).scrollTo({y});
         }, 50);

package/src/Button.tsx

@@ -3,7 +3,7 @@ import React, {useContext, useState} from "react";
 import {ActivityIndicator, Pressable, View} from "react-native";
 
 import {Box} from "./Box";
-import {ButtonColor, Color, IconName, IconPrefix, TooltipDirection, UnifiedTheme} from "./Common";
+import {ButtonProps, Color, UnifiedTheme} from "./Common";
 import {Icon} from "./Icon";
 import {Modal} from "./Modal";
 import {Text} from "./Text";
@@ -11,32 +11,6 @@ import {ThemeContext} from "./Theme";
 import {Tooltip} from "./Tooltip";
 import {Unifier} from "./Unifier";
 
-export interface ButtonProps {
-  children?: React.ReactElement;
-  text: string;
-  // TODO make this work for all colors
-  color?: ButtonColor | Color;
-  // default gray
-  disabled?: boolean; // default false
-  inline?: boolean; // default false
-  size?: "sm" | "md" | "lg"; // default md
-  type?: "solid" | "ghost" | "outline"; // default solid
-  loading?: boolean;
-  onClick: any;
-  icon?: IconName;
-  iconPrefix?: IconPrefix;
-  iconColor?: ButtonColor | Color;
-  withConfirmation?: boolean;
-  confirmationText?: string;
-  confirmationHeading?: string;
-  shape?: "rounded" | "pill";
-  testID?: string;
-  tooltip?: {
-    text: string;
-    idealDirection?: TooltipDirection;
-  };
-}
-
 const buttonTextColor: {[buttonColor: string]: "white" | "darkGray"} = {
   blue: "white",
   lightGray: "darkGray",

package/src/Card.tsx

@@ -3,21 +3,19 @@ import React from "react";
 import {Box} from "./Box";
 import {BoxProps} from "./Common";
 
-export class Card extends React.Component<BoxProps, {}> {
-  render() {
-    return (
-      <Box
-        color={this.props.color || "white"}
-        direction="column"
-        display="flex"
-        padding={this.props.padding || 4}
-        rounding={3}
-        shadow
-        width={this.props.width}
-        {...this.props}
-      >
-        {this.props.children}
-      </Box>
-    );
-  }
+export function Card({children, color = "white", padding = 4, width, ...rest}: BoxProps) {
+  return (
+    <Box
+      color={color}
+      direction="column"
+      display="flex"
+      padding={padding}
+      rounding={3}
+      shadow
+      width={width}
+      {...rest}
+    >
+      {children}
+    </Box>
+  );
 }

package/src/CheckBox.tsx

@@ -17,6 +17,7 @@ export function CheckBox({
   onChange,
   onClick,
   indeterminate,
+  testID,
 }: CheckBoxProps): React.ReactElement {
   if (checked && indeterminate) {
     console.error("CheckBox cannot be checked and indeterminate at the same time");
@@ -47,6 +48,7 @@ export function CheckBox({
         color={bgColor}
         height={size === "sm" ? 16 : 24}
         rounding={radio ? "circle" : size === "sm" ? 2 : 3}
+        testID={testID}
         width={size === "sm" ? 16 : 24}
         onClick={doOnClick}
       >