ferns-ui 1.10.0 → 1.12.0

package/src/Common.ts

@@ -430,7 +430,13 @@ export const iconSizeToNumber = (size?: IconSize) => {
   }[size || "md"];
 };
 
-export type TextSize = "sm" | "md" | "lg" | "xl";
+export type TextSize = "sm" | "md" | "lg" | "xl" | "2xl";
+
+export type ValueMappingItem = {
+  value: number;
+  label: string;
+  size?: IconSize;
+};
 
 export type IconPrefix = "far" | "fas";
 
@@ -732,7 +738,7 @@ export interface HeadingProps {
   children?: React.ReactNode;
   color?: TextColor;
   overflow?: "normal" | "breakWord"; // default "breakWord"
-  size?: "sm" | "md" | "lg" | "xl"; // default "sm"
+  size?: "sm" | "md" | "lg" | "xl" | "2xl"; // default "sm"
   truncate?: boolean; // default false
   testID?: string;
 }
@@ -1305,6 +1311,10 @@ export interface AvatarProps {
    * Accessibility label for the avatar image.
    */
   accessibilityLabel?: string;
+  /**
+   * Test ID for unit testing
+   */
+  testID?: string;
 }
 
 export interface BadgeProps {
@@ -1354,6 +1364,11 @@ export interface BadgeProps {
    */
   status?: "info" | "error" | "warning" | "success" | "neutral" | "custom";
 
+  /**
+   * Test ID for unit testing
+   */
+  testID?: string;
+
   /**
    * The text or number to display inside the badge.
    */
@@ -2678,3 +2693,101 @@ export interface TableNumberProps {
    */
   align?: "left" | "right";
 }
+
+export interface SliderProps extends HelperTextProps, ErrorTextProps {
+  /**
+   * The title of the slider field.
+   */
+  title?: string;
+
+  /**
+   * The current value of the slider.
+   */
+  value: number;
+
+  /**
+   * The function to call when the slider value changes.
+   */
+  onChange: (value: number) => void;
+
+  /**
+   * The minimum value of the slider.
+   * @default 0
+   */
+  minimumValue?: number;
+
+  /**
+   * The maximum value of the slider.
+   * @default 1
+   */
+  maximumValue?: number;
+
+  /**
+   * The step value of the slider.
+   * @default 0
+   */
+  step?: number;
+
+  /**
+   * If true, the slider will be disabled.
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * The color of the track to the left of the thumb.
+   */
+  minimumTrackTintColor?: string;
+
+  /**
+   * The color of the track to the right of the thumb.
+   */
+  maximumTrackTintColor?: string;
+
+  /**
+   * The color of the thumb.
+   */
+  thumbTintColor?: string;
+
+  /**
+   * If true, the slider will show the current value as text.
+   * @default false
+   */
+  showSelection?: boolean;
+
+  /**
+   * Labels to show below the slider track.
+   */
+  labels?: {
+    /**
+     * The minimum value label.
+     */
+    min?: string;
+    /**
+     * The maximum value label.
+     */
+    max?: string;
+    /**
+     * Additional labels with their positions (0-1 range).
+     */
+    custom?: Array<{index: number; label: string}>;
+  };
+
+  /**
+   * If true, displays min and max labels inline on both ends of the track.
+   * @default false
+   */
+  inlineLabels?: boolean;
+
+  /**
+   * If true, icons will be displayed instead of numeric values when valueMapping is provided.
+   * @default false
+   */
+  useIcons?: boolean;
+
+  /**
+   * Graphics/icons to display instead of numeric values.
+   * Maps slider values to icon names or any string.
+   */
+  valueMapping?: ValueMappingItem[];
+}

package/src/DateTimeField.tsx

@@ -336,6 +336,8 @@ export const DateTimeField: FC<DateTimeFieldProps> = ({
             day: parseInt(dayVal),
             hour: hourNum,
             minute: parseInt(minuteVal),
+            second: 0,
+            millisecond: 0,
           },
           {
             zone: override?.timezone ?? timezone,
@@ -350,6 +352,10 @@ export const DateTimeField: FC<DateTimeFieldProps> = ({
             year: parseInt(yearVal),
             month: parseInt(monthVal),
             day: parseInt(dayVal),
+            hour: 0,
+            minute: 0,
+            second: 0,
+            millisecond: 0,
           },
           {
             zone: "UTC",
@@ -369,6 +375,8 @@ export const DateTimeField: FC<DateTimeFieldProps> = ({
           {
             hour: hourNum,
             minute: parseInt(minuteVal),
+            second: 0,
+            millisecond: 0,
           },
           {
             zone: override?.timezone ?? timezone,
@@ -527,8 +535,13 @@ export const DateTimeField: FC<DateTimeFieldProps> = ({
       // Normalize emitted value to ISO (UTC for date-only)
       const normalized =
         type === "date"
-          ? parsedDate.setZone("UTC").startOf("day").toUTC().toISO()
-          : parsedDate.toUTC().toISO();
+          ? parsedDate
+              .setZone("UTC")
+              .startOf("day")
+              .set({second: 0, millisecond: 0})
+              .toUTC()
+              .toISO()
+          : parsedDate.set({second: 0, millisecond: 0}).toUTC().toISO();
       if (!normalized) {
         console.warn("Invalid date passed to DateTimeField", parsedDate);
         return;

package/src/Heading.tsx

@@ -14,6 +14,7 @@ const fontSizeAndWeightWeb = {
   md: {size: 18, weight: "bold"},
   lg: {size: 24, weight: "bold"},
   xl: {size: 32, weight: "bold"},
+  "2xl": {size: 48, weight: "bold"},
 };
 
 const fontSizeAndWeighMobile = {
@@ -21,6 +22,7 @@ const fontSizeAndWeighMobile = {
   md: {size: 16, weight: "bold"},
   lg: {size: 20, weight: "bold"},
   xl: {size: 28, weight: "bold"},
+  "2xl": {size: 32, weight: "bold"},
 };
 
 const fontSizes = Platform.OS === "web" ? fontSizeAndWeightWeb : fontSizeAndWeighMobile;

package/src/InfoModalIcon.tsx

@@ -30,6 +30,7 @@ export const InfoModalIcon: FC<InfoModalIconProps> = ({
         aria-role="button"
         hitSlop={{top: 10, bottom: 10, left: 10, right: 10}}
         style={{marginLeft: 8}}
+        testID="info-icon"
         onPress={() => setInfoModalVisibleState(true)}
       >
         <Heading color="secondaryLight" size="sm">

package/src/MarkdownView.tsx

@@ -0,0 +1,67 @@
+import {
+  Nunito_400Regular,
+  Nunito_500Medium,
+  Nunito_700Bold,
+  useFonts as useTextFonts,
+} from "@expo-google-fonts/nunito";
+import {
+  TitilliumWeb_600SemiBold,
+  TitilliumWeb_700Bold,
+  useFonts as useHeadingFonts,
+} from "@expo-google-fonts/titillium-web";
+import React from "react";
+import {Platform} from "react-native";
+import Markdown from "react-native-markdown-display";
+
+import {useTheme} from "./Theme";
+
+// Takes markdown and renders it with our theme. We should open source this component.
+export const MarkdownView: React.FC<{children: React.ReactNode; inverted?: boolean}> = ({
+  children,
+  inverted,
+}) => {
+  const {theme} = useTheme();
+
+  const color = {color: inverted ? theme.text.inverted : theme.text.primary};
+
+  // Match Heading font sizes to Heading component
+  // Web sizes (see src/Heading.tsx): sm:16, md:18, lg:24, xl:32
+  // Mobile sizes: sm:14, md:16, lg:20, xl:28
+  const isWeb = Platform.OS === "web";
+  const sizes = {
+    sm: isWeb ? 16 : 14,
+    md: isWeb ? 18 : 16,
+    lg: isWeb ? 24 : 20,
+    xl: isWeb ? 32 : 28,
+  } as const;
+
+  // Load fonts similar to Heading/Text components so fontFamily names resolve
+  useHeadingFonts({
+    heading: TitilliumWeb_600SemiBold,
+    "heading-bold": TitilliumWeb_700Bold,
+    "heading-semibold": TitilliumWeb_600SemiBold,
+  });
+  useTextFonts({
+    text: Nunito_400Regular,
+    "text-regular": Nunito_400Regular,
+    "text-medium": Nunito_500Medium,
+    "text-bold": Nunito_700Bold,
+  });
+
+  return (
+    <Markdown
+      style={{
+        body: {fontFamily: "text", ...color},
+        heading1: {fontFamily: "heading-bold", fontSize: sizes.xl, ...color},
+        heading2: {fontFamily: "heading-bold", fontSize: sizes.lg, ...color},
+        heading3: {fontFamily: "heading-bold", fontSize: sizes.md, ...color},
+        heading4: {fontFamily: "heading-semibold", fontSize: sizes.sm, ...color},
+        // h5/h6 map to small as well for consistency, slightly smaller visually handled by weight
+        heading5: {fontFamily: "heading-semibold", fontSize: sizes.sm, ...color},
+        heading6: {fontFamily: "heading-semibold", fontSize: sizes.sm, ...color},
+      }}
+    >
+      {children}
+    </Markdown>
+  );
+};

package/src/Slider.tsx

@@ -0,0 +1,205 @@
+import SliderComponent from "@react-native-community/slider";
+import React, {FC} from "react";
+import {View} from "react-native";
+
+import {Box} from "./Box";
+import {IconName, SliderProps, ValueMappingItem} from "./Common";
+import {FieldError} from "./fieldElements/FieldError";
+import {FieldHelperText} from "./fieldElements/FieldHelperText";
+import {FieldTitle} from "./fieldElements/FieldTitle";
+import {Icon} from "./Icon";
+import {Text} from "./Text";
+import {useTheme} from "./Theme";
+
+// Find the closest option for the current value
+const getCurrentMapping = (map: ValueMappingItem[], value: number) => {
+  if (!map || map.length === 0) {
+    return null;
+  }
+  
+  // Find the option with the closest value
+  let closestOption = map[0];
+  let closestDistance = Math.abs(value - closestOption.value);
+  
+  for (const option of map) {
+    const distance = Math.abs(value - option.value);
+    if (distance < closestDistance) {
+      closestDistance = distance;
+      closestOption = option;
+    }
+  }
+  
+  return closestOption;
+};
+
+const getCenterContent = (
+  valueMapping: ValueMappingItem[] | undefined,
+  value: number,
+  step: number,
+  disabled: boolean,
+  useIcons: boolean
+): React.ReactElement => {
+  if (!valueMapping || valueMapping.length === 0) {
+    const formattedValue = value.toFixed(
+      step > 0 && step < 1 ? String(step).split(".")[1]?.length || 0 : 0
+    );
+    return (
+      <Text align="center" color={disabled ? "secondaryLight" : "primary"} size="lg">
+        {formattedValue}
+      </Text>
+    );
+  }
+  
+  const currentOption = getCurrentMapping(valueMapping, value);
+  
+  if (useIcons) {
+    return (
+      <Icon
+        color={disabled ? "secondaryLight" : "primary"}
+        iconName={currentOption!.label as IconName}
+        size={currentOption!.size || "md"}
+      />
+    );
+  }
+  
+  return (
+    <Text align="center" color={disabled ? "secondaryLight" : "primary"} size="2xl">
+      {currentOption?.label}
+    </Text>
+  );
+};
+
+const getSliderContent = (
+  slider: React.ReactElement,
+  inlineLabels: boolean,
+  labels?: SliderProps['labels']
+): React.ReactElement => {
+  if (inlineLabels && labels?.min && labels?.max) {
+    return (
+      <Box alignItems="center" direction="row" gap={2}>
+        <Box flex="shrink" minWidth={30}>
+          <Text color="secondaryDark" size="md">
+            {labels.min}
+          </Text>
+        </Box>
+        <Box flex="grow">{slider}</Box>
+        <Box alignItems="end" flex="shrink" minWidth={30}>
+          <Text color="secondaryDark" size="md">
+            {labels.max}
+          </Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  return (
+    <>
+      {slider}
+      {labels && (
+        <Box direction="row" justifyContent="between" marginTop={2}>
+          {labels.min && (
+            <Text color="secondaryDark" size="sm">
+              {labels.min}
+            </Text>
+          )}
+          {labels.custom?.map((customLabel, index) => (
+            <Text key={index} color="secondaryDark" size="sm">
+              {customLabel.label}
+            </Text>
+          ))}
+          {labels.max && (
+            <Text color="secondaryDark" size="sm">
+              {labels.max}
+            </Text>
+          )}
+        </Box>
+      )}
+    </>
+  );
+};
+
+export const Slider: FC<SliderProps> = ({
+  disabled = false,
+  errorText,
+  helperText,
+  inlineLabels = false,
+  labels,
+  maximumTrackTintColor,
+  maximumValue = 1,
+  minimumTrackTintColor,
+  minimumValue = 0,
+  step = 0,
+  thumbTintColor,
+  title,
+  showSelection = false,
+  useIcons = false,
+  value,
+  valueMapping,
+  onChange,
+}) => {
+  const {theme} = useTheme();
+
+  if (!theme) {
+    return null;
+  }
+
+  const minTrackColor = minimumTrackTintColor || theme.surface.primary;
+  const maxTrackColor = maximumTrackTintColor || theme.border.default;
+  const thumbColor = thumbTintColor || theme.surface.primary;
+
+  const sliderStyles = {
+    trackStyle: {
+      height: 10,
+    },
+    thumbStyle: {
+      width: 48,
+      height: 48,
+      backgroundColor: 'white',
+      borderRadius: 24,
+      shadowColor: '#000',
+      shadowOffset: {
+        width: 0,
+        height: 2,
+      },
+      shadowOpacity: 0.25,
+      shadowRadius: 3.84,
+      elevation: 5,
+    },
+  };
+
+  const sliderElement = (
+    <SliderComponent
+      disabled={disabled}
+      maximumTrackTintColor={maxTrackColor}
+      maximumValue={maximumValue}
+      minimumTrackTintColor={minTrackColor}
+      minimumValue={minimumValue}
+      step={step}
+      thumbTintColor={thumbColor}
+      value={value}
+      onValueChange={onChange}
+      {...sliderStyles}
+    />
+  );
+
+  const centerContent = getCenterContent(valueMapping, value, step, disabled, useIcons);
+  const sliderContent = getSliderContent(sliderElement, inlineLabels, labels);
+
+  return (
+    <Box>
+      {Boolean(title) && <FieldTitle text={title!} />}
+      <Box direction="column" gap={showSelection ? 2 : 0}>
+        {showSelection && (
+          <Box alignItems="center">
+            {centerContent}
+          </Box>
+        )}
+        {sliderContent}
+      </Box>
+      {Boolean(helperText && !errorText) && <FieldHelperText text={helperText!} />}
+      {Boolean(errorText) && <FieldError text={errorText!} />}
+    </Box>
+  );
+};
+
+

package/src/Text.tsx

@@ -19,6 +19,7 @@ const fontSizeAndWeightWeb = {
   md: {size: 16, weight: "regular"},
   lg: {size: 18, weight: "medium"},
   xl: {size: 20, weight: "medium"},
+  "2xl": {size: 48, weight: "medium"},
 };
 
 const fontSizeAndWeighMobile = {
@@ -26,6 +27,7 @@ const fontSizeAndWeighMobile = {
   md: {size: 14, weight: "regular"},
   lg: {size: 16, weight: "medium"},
   xl: {size: 18, weight: "medium"},
+  "2xl": {size: 40, weight: "medium"},
 };
 
 const fontSizes = Platform.OS === "web" ? fontSizeAndWeightWeb : fontSizeAndWeighMobile;