@factorialco/f0-react-native 0.23.0 → 0.24.0

package/src/components/PressableFeedback/index.tsx

@@ -1,56 +1,59 @@
-import { forwardRef, useCallback, useMemo } from "react";
-import { Pressable, View, type PressableProps } from "react-native";
+import { forwardRef, useCallback, useMemo } from "react"
+import { Pressable, View, type PressableProps } from "react-native"
 import Animated, {
   Easing,
   useAnimatedStyle,
   useSharedValue,
   withTiming,
   type WithTimingConfig,
-} from "react-native-reanimated";
-import { cn } from "../../lib/utils";
+} from "react-native-reanimated"
 
-const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+import { cn } from "../../lib/utils"
 
-export type PressableFeedbackVariant = "highlight" | "scale" | "both" | "none";
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable)
+
+export type PressableFeedbackVariant = "highlight" | "scale" | "both" | "none"
 
 export interface ScaleAnimationConfig {
   /** Scale value when pressed (0-1, default: 0.98) */
-  value?: number;
+  value?: number
   /** Timing configuration for the animation */
-  timingConfig?: WithTimingConfig;
+  timingConfig?: WithTimingConfig
 }
 
 export interface HighlightAnimationConfig {
   /** Background color of the highlight overlay */
-  backgroundColor?: string;
+  backgroundColor?: string
   /** Opacity when pressed [min, max] (default: [0, 0.1]) */
-  opacity?: [number, number];
+  opacity?: [number, number]
   /** Timing configuration for the animation */
-  timingConfig?: WithTimingConfig;
+  timingConfig?: WithTimingConfig
 }
 
-export interface PressableFeedbackProps
-  extends Omit<PressableProps, "style" | "children"> {
+export interface PressableFeedbackProps extends Omit<
+  PressableProps,
+  "style" | "children"
+> {
   /** Visual feedback variant */
-  variant?: PressableFeedbackVariant;
+  variant?: PressableFeedbackVariant
   /** Scale animation configuration (only used when variant includes scale) */
-  scaleAnimation?: ScaleAnimationConfig;
+  scaleAnimation?: ScaleAnimationConfig
   /** Highlight animation configuration (only used when variant includes highlight) */
-  highlightAnimation?: HighlightAnimationConfig;
+  highlightAnimation?: HighlightAnimationConfig
   /** Additional className for the pressable container */
-  className?: string;
+  className?: string
   /** Style for the pressable container */
-  style?: PressableProps["style"];
+  style?: PressableProps["style"]
   /** Children to render inside the pressable */
-  children?: React.ReactNode;
+  children?: React.ReactNode
   /** Whether animations are disabled */
-  disableAnimation?: boolean;
+  disableAnimation?: boolean
 }
 
 const DEFAULT_TIMING_CONFIG: WithTimingConfig = {
   duration: 150,
   easing: Easing.out(Easing.ease),
-};
+}
 
 export const PressableFeedback = forwardRef<View, PressableFeedbackProps>(
   function PressableFeedback(
@@ -67,53 +70,53 @@ export const PressableFeedback = forwardRef<View, PressableFeedbackProps>(
       disabled,
       ...restProps
     },
-    ref,
+    ref
   ) {
     // Animation shared values
-    const scale = useSharedValue(1);
-    const highlightOpacity = useSharedValue(0);
+    const scale = useSharedValue(1)
+    const highlightOpacity = useSharedValue(0)
 
     // Config values
-    const scaleValue = scaleAnimation?.value ?? 0.98;
+    const scaleValue = scaleAnimation?.value ?? 0.98
     const scaleTimingConfig = useMemo(
       () => ({
         ...DEFAULT_TIMING_CONFIG,
         ...scaleAnimation?.timingConfig,
       }),
-      [scaleAnimation],
-    );
+      [scaleAnimation]
+    )
 
     const highlightOpacityValues = useMemo(
       () => highlightAnimation?.opacity ?? [0, 0.15],
-      [highlightAnimation],
-    );
+      [highlightAnimation]
+    )
     const highlightTimingConfig = useMemo(
       () => ({
         ...DEFAULT_TIMING_CONFIG,
         ...highlightAnimation?.timingConfig,
       }),
-      [highlightAnimation],
-    );
+      [highlightAnimation]
+    )
     const highlightColor =
-      highlightAnimation?.backgroundColor ?? "rgba(0, 0, 0, 1)";
+      highlightAnimation?.backgroundColor ?? "rgba(0, 0, 0, 1)"
 
     const shouldScale =
-      !disableAnimation && (variant === "scale" || variant === "both");
+      !disableAnimation && (variant === "scale" || variant === "both")
     const shouldHighlight =
-      !disableAnimation && (variant === "highlight" || variant === "both");
+      !disableAnimation && (variant === "highlight" || variant === "both")
 
     const handlePressIn = useCallback(
       (event: Parameters<NonNullable<PressableProps["onPressIn"]>>[0]) => {
         if (shouldScale) {
-          scale.value = withTiming(scaleValue, scaleTimingConfig);
+          scale.value = withTiming(scaleValue, scaleTimingConfig)
         }
         if (shouldHighlight) {
           highlightOpacity.value = withTiming(
             highlightOpacityValues[1],
-            highlightTimingConfig,
-          );
+            highlightTimingConfig
+          )
         }
-        onPressIn?.(event);
+        onPressIn?.(event)
       },
       [
         shouldScale,
@@ -125,21 +128,21 @@ export const PressableFeedback = forwardRef<View, PressableFeedbackProps>(
         highlightOpacityValues,
         highlightTimingConfig,
         onPressIn,
-      ],
-    );
+      ]
+    )
 
     const handlePressOut = useCallback(
       (event: Parameters<NonNullable<PressableProps["onPressOut"]>>[0]) => {
         if (shouldScale) {
-          scale.value = withTiming(1, scaleTimingConfig);
+          scale.value = withTiming(1, scaleTimingConfig)
         }
         if (shouldHighlight) {
           highlightOpacity.value = withTiming(
             highlightOpacityValues[0],
-            highlightTimingConfig,
-          );
+            highlightTimingConfig
+          )
         }
-        onPressOut?.(event);
+        onPressOut?.(event)
       },
       [
         shouldScale,
@@ -150,22 +153,22 @@ export const PressableFeedback = forwardRef<View, PressableFeedbackProps>(
         highlightOpacityValues,
         highlightTimingConfig,
         onPressOut,
-      ],
-    );
+      ]
+    )
 
     // Scale animation style
     const animatedContainerStyle = useAnimatedStyle(() => {
       return {
         transform: [{ scale: scale.value }],
-      };
-    });
+      }
+    })
 
     // Highlight overlay animation style
     const animatedHighlightStyle = useAnimatedStyle(() => {
       return {
         opacity: highlightOpacity.value,
-      };
-    });
+      }
+    })
 
     return (
       <AnimatedPressable
@@ -190,8 +193,8 @@ export const PressableFeedback = forwardRef<View, PressableFeedbackProps>(
         )}
         {children}
       </AnimatedPressable>
-    );
-  },
-);
+    )
+  }
+)
 
-export default PressableFeedback;
+export default PressableFeedback

package/src/components/Tags/AlertTab/index.spec.tsx

@@ -1,18 +1,19 @@
-import { render } from "@testing-library/react-native";
-import React from "react";
-import { AlertTag } from ".";
+import { render } from "@testing-library/react-native"
+import React from "react"
+
+import { AlertTag } from "."
 
 describe("AlertTag", () => {
   it("Snapshot Ingo level", () => {
-    const { toJSON } = render(<AlertTag text="info" level="info" />);
-    expect(toJSON()).toMatchSnapshot();
-  });
+    const { toJSON } = render(<AlertTag text="info" level="info" />)
+    expect(toJSON()).toMatchSnapshot()
+  })
   it("Snapshot Critical level", () => {
-    const { toJSON } = render(<AlertTag text="critical" level="critical" />);
-    expect(toJSON()).toMatchSnapshot();
-  });
+    const { toJSON } = render(<AlertTag text="critical" level="critical" />)
+    expect(toJSON()).toMatchSnapshot()
+  })
   it("Snapshot Warning level", () => {
-    const { toJSON } = render(<AlertTag text="warning" level="warning" />);
-    expect(toJSON()).toMatchSnapshot();
-  });
-});
+    const { toJSON } = render(<AlertTag text="warning" level="warning" />)
+    expect(toJSON()).toMatchSnapshot()
+  })
+})

package/src/components/Tags/AlertTab/index.tsx

@@ -1,26 +1,26 @@
-import { BaseTag } from "../BaseTag";
-import { cn } from "../../../lib/utils";
-import { useTextFormatEnforcer } from "../../../lib/text";
-import { Icon, IconType } from "../../Icon";
-import { AlertCircle, InfoCircle, Warning } from "../../../icons/app";
+import { AlertCircle, InfoCircle, Warning } from "../../../icons/app"
+import { useTextFormatEnforcer } from "../../../lib/text"
+import { cn } from "../../../lib/utils"
+import { Icon, IconType } from "../../Icon"
+import { BaseTag } from "../BaseTag"
 
-type Level = "info" | "warning" | "critical";
+type Level = "info" | "warning" | "critical"
 
-type NonEmpty<T extends string> = T extends "" ? never : T;
+type NonEmpty<T extends string> = T extends "" ? never : T
 
 type Props<T extends string = string> = {
-  text: NonEmpty<T>;
-  level: Level;
-};
+  text: NonEmpty<T>
+  level: Level
+}
 
 const iconMap: Record<Level, IconType> = {
   info: InfoCircle,
   warning: Warning,
   critical: AlertCircle,
-};
+}
 
 export const AlertTag = <T extends string>({ text, level }: Props<T>) => {
-  useTextFormatEnforcer(text, { disallowEmpty: true });
+  useTextFormatEnforcer(text, { disallowEmpty: true })
 
   return (
     <BaseTag
@@ -29,7 +29,7 @@ export const AlertTag = <T extends string>({ text, level }: Props<T>) => {
           info: "text-f1-foreground-info",
           warning: "text-f1-foreground-warning",
           critical: "text-f1-foreground-critical",
-        }[level],
+        }[level]
       )}
       classNameContainer={cn(
         "pl-0.5",
@@ -37,7 +37,7 @@ export const AlertTag = <T extends string>({ text, level }: Props<T>) => {
           info: "bg-f1-background-info text-f1-foreground-info",
           warning: "bg-f1-background-warning text-f1-foreground-warning",
           critical: "bg-f1-background-critical text-f1-foreground-critical",
-        }[level],
+        }[level]
       )}
       left={
         <Icon
@@ -47,7 +47,7 @@ export const AlertTag = <T extends string>({ text, level }: Props<T>) => {
               info: "text-f1-foreground-info",
               warning: "text-f1-foreground-warning",
               critical: "text-f1-foreground-critical",
-            }[level],
+            }[level]
           )}
           size="md"
           aria-hidden
@@ -55,7 +55,7 @@ export const AlertTag = <T extends string>({ text, level }: Props<T>) => {
       }
       text={text}
     />
-  );
-};
+  )
+}
 
-AlertTag.displayName = "AlertTag";
+AlertTag.displayName = "AlertTag"

package/src/components/Tags/BaseTag/index.tsx

@@ -1,25 +1,26 @@
-import { ReactNode } from "react";
-import { Text, View } from "react-native";
-import { cn } from "../../../lib/utils";
-import { PressableFeedback } from "../../PressableFeedback";
+import { ReactNode } from "react"
+import { Text, View } from "react-native"
+
+import { cn } from "../../../lib/utils"
+import { PressableFeedback } from "../../PressableFeedback"
 
 type Props = {
-  additionalAccesibleText?: string;
-  onClick?: () => void;
-  classNameContainer?: string;
-  classNameText?: string;
+  additionalAccesibleText?: string
+  onClick?: () => void
+  classNameContainer?: string
+  classNameText?: string
 } & (
   | {
-      left: ReactNode;
-      text?: string;
-      right?: ReactNode;
+      left: ReactNode
+      text?: string
+      right?: ReactNode
     }
   | {
-      left?: ReactNode;
-      text: string;
-      right?: ReactNode;
+      left?: ReactNode
+      text: string
+      right?: ReactNode
     }
-);
+)
 
 export const BaseTag = ({
   left,
@@ -37,7 +38,7 @@ export const BaseTag = ({
         onClick && "cursor-pointer",
         !text && "aspect-square w-6 items-center justify-center p-1",
         !left ? "pl-2" : "pl-1",
-        classNameContainer,
+        classNameContainer
       )}
       onPress={onClick}
       variant={onClick ? "both" : "none"}
@@ -47,21 +48,21 @@ export const BaseTag = ({
       {!!text && (
         <Text
           className={cn(
-            "text-f1-foreground line-clamp-1 text-base font-medium",
-            classNameText,
+            "line-clamp-1 text-base font-medium text-f1-foreground",
+            classNameText
           )}
         >
           {text}
         </Text>
       )}
       {additionalAccesibleText && (
-        <Text className="text-f1-foreground sr-only text-base font-medium">
+        <Text className="sr-only text-base font-medium text-f1-foreground">
           {additionalAccesibleText}
         </Text>
       )}
       {right}
     </PressableFeedback>
   </View>
-);
+)
 
-BaseTag.displayName = "BaseTag";
+BaseTag.displayName = "BaseTag"

package/src/components/Tags/DotTag/__snapshots__/index.spec.tsx.snap

@@ -58,7 +58,7 @@ exports[`RawTag Snapshot 1`] = `
       }
     />
     <Text
-      className="text-f1-foreground line-clamp-1 text-base font-medium"
+      className="line-clamp-1 text-base font-medium text-f1-foreground"
     >
       Label
     </Text>
@@ -124,7 +124,7 @@ exports[`RawTag Snapshot 2`] = `
       }
     />
     <Text
-      className="text-f1-foreground line-clamp-1 text-base font-medium"
+      className="line-clamp-1 text-base font-medium text-f1-foreground"
     >
       Label
     </Text>
@@ -190,7 +190,7 @@ exports[`RawTag Snapshot 3`] = `
       }
     />
     <Text
-      className="text-f1-foreground line-clamp-1 text-base font-medium"
+      className="line-clamp-1 text-base font-medium text-f1-foreground"
     >
       Label
     </Text>
@@ -256,7 +256,7 @@ exports[`RawTag Snapshot 4`] = `
       }
     />
     <Text
-      className="text-f1-foreground line-clamp-1 text-base font-medium"
+      className="line-clamp-1 text-base font-medium text-f1-foreground"
     >
       Label
     </Text>
@@ -322,7 +322,7 @@ exports[`RawTag Snapshot 5`] = `
       }
     />
     <Text
-      className="text-f1-foreground line-clamp-1 text-base font-medium"
+      className="line-clamp-1 text-base font-medium text-f1-foreground"
     >
       Label
     </Text>
@@ -388,7 +388,7 @@ exports[`RawTag Snapshot 6`] = `
       }
     />
     <Text
-      className="text-f1-foreground line-clamp-1 text-base font-medium"
+      className="line-clamp-1 text-base font-medium text-f1-foreground"
     >
       Label
     </Text>
@@ -454,7 +454,7 @@ exports[`RawTag Snapshot 7`] = `
       }
     />
     <Text
-      className="text-f1-foreground line-clamp-1 text-base font-medium"
+      className="line-clamp-1 text-base font-medium text-f1-foreground"
     >
       Label
     </Text>
@@ -520,7 +520,7 @@ exports[`RawTag Snapshot 8`] = `
       }
     />
     <Text
-      className="text-f1-foreground line-clamp-1 text-base font-medium"
+      className="line-clamp-1 text-base font-medium text-f1-foreground"
     >
       Label
     </Text>
@@ -586,7 +586,7 @@ exports[`RawTag Snapshot 9`] = `
       }
     />
     <Text
-      className="text-f1-foreground line-clamp-1 text-base font-medium"
+      className="line-clamp-1 text-base font-medium text-f1-foreground"
     >
       Label
     </Text>
@@ -652,7 +652,7 @@ exports[`RawTag Snapshot 10`] = `
       }
     />
     <Text
-      className="text-f1-foreground line-clamp-1 text-base font-medium"
+      className="line-clamp-1 text-base font-medium text-f1-foreground"
     >
       Label
     </Text>
@@ -718,7 +718,7 @@ exports[`RawTag Snapshot 11`] = `
       }
     />
     <Text
-      className="text-f1-foreground line-clamp-1 text-base font-medium"
+      className="line-clamp-1 text-base font-medium text-f1-foreground"
     >
       Label
     </Text>
@@ -784,7 +784,7 @@ exports[`RawTag Snapshot 12`] = `
       }
     />
     <Text
-      className="text-f1-foreground line-clamp-1 text-base font-medium"
+      className="line-clamp-1 text-base font-medium text-f1-foreground"
     >
       Label
     </Text>
@@ -850,7 +850,7 @@ exports[`RawTag Snapshot 13`] = `
       }
     />
     <Text
-      className="text-f1-foreground line-clamp-1 text-base font-medium"
+      className="line-clamp-1 text-base font-medium text-f1-foreground"
     >
       Label
     </Text>
@@ -916,7 +916,7 @@ exports[`RawTag Snapshot 14`] = `
       }
     />
     <Text
-      className="text-f1-foreground line-clamp-1 text-base font-medium"
+      className="line-clamp-1 text-base font-medium text-f1-foreground"
     >
       Label
     </Text>
@@ -982,7 +982,7 @@ exports[`RawTag Snapshot 15`] = `
       }
     />
     <Text
-      className="text-f1-foreground line-clamp-1 text-base font-medium"
+      className="line-clamp-1 text-base font-medium text-f1-foreground"
     >
       Label
     </Text>
@@ -1048,7 +1048,7 @@ exports[`RawTag Snapshot 16`] = `
       }
     />
     <Text
-      className="text-f1-foreground line-clamp-1 text-base font-medium"
+      className="line-clamp-1 text-base font-medium text-f1-foreground"
     >
       Label
     </Text>
@@ -1114,7 +1114,7 @@ exports[`RawTag Snapshot 17`] = `
       }
     />
     <Text
-      className="text-f1-foreground line-clamp-1 text-base font-medium"
+      className="line-clamp-1 text-base font-medium text-f1-foreground"
     >
       Label
     </Text>
@@ -1180,7 +1180,7 @@ exports[`RawTag Snapshot 18`] = `
       }
     />
     <Text
-      className="text-f1-foreground line-clamp-1 text-base font-medium"
+      className="line-clamp-1 text-base font-medium text-f1-foreground"
     >
       Label
     </Text>
@@ -1246,7 +1246,7 @@ exports[`RawTag Snapshot 19`] = `
       }
     />
     <Text
-      className="text-f1-foreground line-clamp-1 text-base font-medium"
+      className="line-clamp-1 text-base font-medium text-f1-foreground"
     >
       Label
     </Text>

package/src/components/Tags/DotTag/index.spec.tsx

@@ -1,14 +1,15 @@
-import { render } from "@testing-library/react-native";
-import React from "react";
-import { DotTag, dotTagColors } from ".";
+import { render } from "@testing-library/react-native"
+import React from "react"
+
+import { DotTag, dotTagColors } from "."
 
 describe("RawTag", () => {
   it("Snapshot", () => {
     dotTagColors.map((color) => {
       const { toJSON } = render(
-        <DotTag key={color} text="Label" color={color} />,
-      );
-      expect(toJSON()).toMatchSnapshot();
-    });
-  });
-});
+        <DotTag key={color} text="Label" color={color} />
+      )
+      expect(toJSON()).toMatchSnapshot()
+    })
+  })
+})

package/src/components/Tags/DotTag/index.tsx

@@ -1,7 +1,8 @@
-import { baseColors } from "../../../styles";
-import { BaseTag } from "../BaseTag";
-import { useTextFormatEnforcer } from "../../../lib/text";
-import { View } from "react-native";
+import { View } from "react-native"
+
+import { useTextFormatEnforcer } from "../../../lib/text"
+import { baseColors } from "../../../styles"
+import { BaseTag } from "../BaseTag"
 
 export type NewColor = Extract<
   keyof typeof baseColors,
@@ -16,23 +17,23 @@ export type NewColor = Extract<
   | "flubber"
   | "indigo"
   | "camel"
->;
+>
 
-export const dotTagColors = Object.keys(baseColors) as NewColor[];
+export const dotTagColors = Object.keys(baseColors) as NewColor[]
 
 export type DotTagProps = {
-  text: string;
-} & ({ color: NewColor } | { customColor: string });
+  text: string
+} & ({ color: NewColor } | { customColor: string })
 
 export const DotTag = ({ text, ...props }: DotTagProps) => {
-  useTextFormatEnforcer(text, { disallowEmpty: true });
+  useTextFormatEnforcer(text, { disallowEmpty: true })
 
   const backgroundColor =
     "color" in props && props.color
       ? `hsl(${baseColors[props.color][50]})`
-      : "customColor" in props && props.customColor;
+      : "customColor" in props && props.customColor
 
-  if (!backgroundColor) return null;
+  if (!backgroundColor) return null
 
   return (
     <BaseTag
@@ -48,7 +49,7 @@ export const DotTag = ({ text, ...props }: DotTagProps) => {
       }
       text={text}
     />
-  );
-};
+  )
+}
 
-DotTag.displayName = "DotTag";
+DotTag.displayName = "DotTag"