rnnovaui 0.9.0 → 0.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rnnovaui",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "description": "",
   "main": "src/index.js",
   "react-native": "src/index.js",

package/src/components/Tabs/UITabs.js

@@ -0,0 +1,170 @@
+import React, {
+  Children,
+  createContext,
+  isValidElement,
+  memo,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from "react";
+
+import { StyleSheet, View } from "react-native";
+
+import { useUITheme } from "../../theme";
+import { UITabsList } from "./UITabsList";
+import { UITabsTrigger } from "./UITabsTrigger";
+import { UITabsContent } from "./UITabsContent";
+import { UITabsIndicator } from "./UITabsIndicator";
+
+const TabsContext = createContext(null);
+
+const UI_TABS_SIZES = {
+  sm: "sm",
+  md: "md",
+  lg: "lg",
+};
+
+export const UITabs = memo(function UITabs({
+  children,
+
+  value,
+  defaultValue,
+
+  onValueChange,
+
+  size = "md",
+
+  animated = true,
+  animationDuration = 220,
+
+  variant = "default",
+
+  activeColor,
+  inactiveColor,
+
+  indicatorColor,
+  indicatorHeight = 2,
+
+  indicatorWidth = "content",
+
+  disabled = false,
+
+  containerStyle,
+
+  testID,
+}) {
+  const { theme } = useUITheme();
+
+  const colors = theme?.colors || {};
+
+  const controlled = value !== undefined;
+
+  const [internalValue, setInternalValue] = useState(defaultValue ?? null);
+
+  const currentValue = controlled ? value : internalValue;
+
+  const safeSize = UI_TABS_SIZES[size] ? size : "md";
+
+  const changeValue = useCallback(
+    (nextValue) => {
+      if (disabled) {
+        return;
+      }
+
+      if (!controlled) {
+        setInternalValue(nextValue);
+      }
+
+      onValueChange?.(nextValue);
+    },
+    [disabled, controlled, onValueChange],
+  );
+
+  const contextValue = useMemo(
+    () => ({
+      colors,
+
+      value: currentValue,
+
+      setValue: changeValue,
+
+      size: safeSize,
+
+      animated,
+
+      animationDuration,
+
+      variant,
+
+      activeColor: activeColor || colors.primary || "#FF5A1F",
+
+      inactiveColor: inactiveColor || colors.textSecondary || "#525252",
+
+      indicatorColor:
+        indicatorColor || activeColor || colors.primary || "#FF5A1F",
+
+      indicatorHeight,
+
+      indicatorWidth,
+
+      disabled,
+    }),
+    [
+      colors,
+      currentValue,
+      changeValue,
+      safeSize,
+      animated,
+      animationDuration,
+      variant,
+      activeColor,
+      inactiveColor,
+      indicatorColor,
+      indicatorHeight,
+      indicatorWidth,
+      disabled,
+    ],
+  );
+
+  return (
+    <TabsContext.Provider value={contextValue}>
+      <View testID={testID} style={[styles.container, containerStyle]}>
+        {Children.map(children, (child) => {
+          if (!isValidElement(child)) {
+            return child;
+          }
+
+          return child;
+        })}
+      </View>
+    </TabsContext.Provider>
+  );
+});
+
+export function useUITabs() {
+  const context = useContext(TabsContext);
+
+  if (!context) {
+    throw new Error("UITabs components must be used inside UITabs.");
+  }
+
+  return context;
+}
+
+export const UITabsSizes = UI_TABS_SIZES;
+
+const styles = StyleSheet.create({
+  container: {
+    width: "100%",
+  },
+});
+
+UITabs.displayName = "UITabs";
+UITabs.List = UITabsList;
+
+UITabs.Trigger = UITabsTrigger;
+
+UITabs.Content = UITabsContent;
+
+UITabs.Indicator = UITabsIndicator;

package/src/components/Tabs/UITabsContent.js

@@ -0,0 +1,122 @@
+import React, { memo, useEffect, useRef, useState } from "react";
+
+import { Animated, View } from "react-native";
+
+import { useUITabs } from "./UITabs";
+
+export const UITabsContent = memo(function UITabsContent({
+  children,
+
+  value,
+
+  style,
+
+  animationDuration,
+
+  testID,
+}) {
+  const tabs = useUITabs();
+
+  const active = tabs.value === value;
+
+  const [mounted, setMounted] = useState(active);
+
+  const opacity = useRef(new Animated.Value(active ? 1 : 0)).current;
+
+  const translateY = useRef(new Animated.Value(active ? 0 : 5)).current;
+
+  useEffect(() => {
+    if (active) {
+      setMounted(true);
+
+      if (!tabs.animated) {
+        opacity.setValue(1);
+        translateY.setValue(0);
+
+        return;
+      }
+
+      Animated.parallel([
+        Animated.timing(opacity, {
+          toValue: 1,
+
+          duration: animationDuration ?? tabs.animationDuration,
+
+          useNativeDriver: true,
+        }),
+
+        Animated.timing(translateY, {
+          toValue: 0,
+
+          duration: animationDuration ?? tabs.animationDuration,
+
+          useNativeDriver: true,
+        }),
+      ]).start();
+
+      return;
+    }
+
+    if (!tabs.animated) {
+      opacity.setValue(0);
+      setMounted(false);
+
+      return;
+    }
+
+    Animated.parallel([
+      Animated.timing(opacity, {
+        toValue: 0,
+
+        duration: animationDuration ?? tabs.animationDuration,
+
+        useNativeDriver: true,
+      }),
+
+      Animated.timing(translateY, {
+        toValue: 5,
+
+        duration: animationDuration ?? tabs.animationDuration,
+
+        useNativeDriver: true,
+      }),
+    ]).start(() => {
+      setMounted(false);
+    });
+  }, [
+    active,
+    tabs.animated,
+    tabs.animationDuration,
+    animationDuration,
+    opacity,
+    translateY,
+  ]);
+
+  if (!mounted) {
+    return null;
+  }
+
+  return (
+    <Animated.View
+      testID={testID}
+      accessibilityRole="tabpanel"
+      style={[
+        {
+          opacity,
+
+          transform: [
+            {
+              translateY,
+            },
+          ],
+        },
+
+        style,
+      ]}
+    >
+      {children}
+    </Animated.View>
+  );
+});
+
+UITabsContent.displayName = "UITabs.Content";

package/src/components/Tabs/UITabsIndicator.js

@@ -0,0 +1,34 @@
+import React, { memo } from "react";
+
+import { View } from "react-native";
+
+import { useUITabs } from "./UITabs";
+
+export const UITabsIndicator = memo(function UITabsIndicator({
+  children,
+  style,
+}) {
+  const tabs = useUITabs();
+
+  if (children) {
+    return <View style={style}>{children}</View>;
+  }
+
+  return (
+    <View
+      style={[
+        {
+          height: tabs.indicatorHeight,
+
+          backgroundColor: tabs.indicatorColor,
+
+          borderRadius: tabs.indicatorHeight / 2,
+        },
+
+        style,
+      ]}
+    />
+  );
+});
+
+UITabsIndicator.displayName = "UITabs.Indicator";

package/src/components/Tabs/UITabsList.js

@@ -0,0 +1,82 @@
+import React, { memo } from "react";
+
+import { ScrollView, StyleSheet, View } from "react-native";
+
+import { useUITabs } from "./UITabs";
+
+export const UITabsList = memo(function UITabsList({
+  children,
+
+  scrollable = false,
+
+  showsHorizontalScrollIndicator = false,
+
+  contentContainerStyle,
+
+  style,
+
+  testID,
+}) {
+  const tabs = useUITabs();
+
+  const sizePadding = tabs.size === "sm" ? 8 : tabs.size === "lg" ? 16 : 12;
+
+  const content = (
+    <View
+      style={[
+        styles.row,
+
+        {
+          paddingHorizontal: sizePadding,
+        },
+      ]}
+    >
+      {children}
+    </View>
+  );
+
+  if (scrollable) {
+    return (
+      <ScrollView
+        testID={testID}
+        horizontal
+        showsHorizontalScrollIndicator={showsHorizontalScrollIndicator}
+        bounces
+        keyboardShouldPersistTaps="handled"
+        contentContainerStyle={[styles.scrollContent, contentContainerStyle]}
+        style={style}
+      >
+        {content}
+      </ScrollView>
+    );
+  }
+
+  return (
+    <View testID={testID} style={[styles.container, style]}>
+      {content}
+    </View>
+  );
+});
+
+const styles = StyleSheet.create({
+  container: {
+    width: "100%",
+    overflow: "hidden",
+  },
+
+  scrollContent: {
+    flexGrow: 1,
+  },
+
+  row: {
+    minHeight: 48,
+
+    flexDirection: "row",
+
+    alignItems: "stretch",
+
+    gap: 4,
+  },
+});
+
+UITabsList.displayName = "UITabs.List";

package/src/components/Tabs/UITabsTrigger.js

@@ -0,0 +1,288 @@
+import React, { memo, useEffect, useRef } from "react";
+
+import { Animated, Pressable, StyleSheet, Text, View } from "react-native";
+
+import { useUITabs } from "./UITabs";
+
+export const UITabsTrigger = memo(function UITabsTrigger({
+  children,
+
+  value,
+
+  icon,
+  iconPosition = "left",
+
+  badge,
+
+  disabled = false,
+
+  onPress,
+
+  activeColor,
+  inactiveColor,
+
+  style,
+  contentStyle,
+  textStyle,
+  iconStyle,
+  badgeStyle,
+
+  testID,
+
+  accessibilityLabel,
+}) {
+  const tabs = useUITabs();
+
+  const active = tabs.value === value;
+
+  const isDisabled = disabled || tabs.disabled;
+
+  const progress = useRef(new Animated.Value(active ? 1 : 0)).current;
+
+  useEffect(() => {
+    if (!tabs.animated) {
+      progress.setValue(active ? 1 : 0);
+
+      return;
+    }
+
+    Animated.timing(progress, {
+      toValue: active ? 1 : 0,
+
+      duration: tabs.animationDuration,
+
+      useNativeDriver: true,
+    }).start();
+  }, [active, tabs.animated, tabs.animationDuration, progress]);
+
+  const handlePress = (event) => {
+    if (isDisabled) {
+      return;
+    }
+
+    tabs.setValue(value);
+
+    onPress?.(event);
+  };
+
+  const resolvedActiveColor = activeColor || tabs.activeColor;
+
+  const resolvedInactiveColor = inactiveColor || tabs.inactiveColor;
+
+  const iconElement = icon ? (
+    <View
+      style={[
+        styles.icon,
+
+        iconPosition === "right" ? styles.iconRight : styles.iconLeft,
+
+        iconStyle,
+      ]}
+    >
+      {icon}
+    </View>
+  ) : null;
+
+  const textElement = (
+    <Text
+      numberOfLines={1}
+      style={[
+        styles.text,
+
+        {
+          fontSize: tabs.size === "sm" ? 12 : tabs.size === "lg" ? 16 : 14,
+
+          color: active ? resolvedActiveColor : resolvedInactiveColor,
+
+          opacity: isDisabled ? 0.45 : 1,
+        },
+
+        textStyle,
+      ]}
+    >
+      {children}
+    </Text>
+  );
+
+  return (
+    <Pressable
+      testID={testID}
+      disabled={isDisabled}
+      onPress={handlePress}
+      accessibilityRole="tab"
+      accessibilityState={{
+        selected: active,
+        disabled: isDisabled,
+      }}
+      accessibilityLabel={accessibilityLabel}
+      style={({ pressed }) => [
+        styles.trigger,
+
+        {
+          minHeight: tabs.size === "sm" ? 42 : tabs.size === "lg" ? 56 : 48,
+
+          opacity: pressed ? 0.7 : 1,
+        },
+
+        style,
+      ]}
+    >
+      <View
+        style={[
+          styles.content,
+
+          iconPosition === "right" ? styles.contentRight : null,
+
+          contentStyle,
+        ]}
+      >
+        {iconPosition === "left" ? iconElement : null}
+
+        {textElement}
+
+        {iconPosition === "right" ? iconElement : null}
+
+        {badge !== undefined ? (
+          <View
+            style={[
+              styles.badge,
+
+              {
+                backgroundColor: active
+                  ? resolvedActiveColor
+                  : tabs.colors.surfaceSecondary || "#F1F1F1",
+              },
+
+              badgeStyle,
+            ]}
+          >
+            <Text
+              style={[
+                styles.badgeText,
+
+                {
+                  color: active
+                    ? tabs.colors.onPrimary || "#FFFFFF"
+                    : tabs.colors.textSecondary || "#525252",
+                },
+              ]}
+            >
+              {badge}
+            </Text>
+          </View>
+        ) : null}
+      </View>
+
+      <Animated.View
+        style={[
+          styles.indicator,
+
+          {
+            backgroundColor: tabs.indicatorColor,
+
+            height: tabs.indicatorHeight,
+
+            opacity: progress,
+
+            transform: [
+              {
+                scaleX: progress,
+              },
+            ],
+          },
+
+          tabs.indicatorWidth === "full"
+            ? styles.indicatorFull
+            : styles.indicatorContent,
+        ]}
+      />
+    </Pressable>
+  );
+});
+
+const styles = StyleSheet.create({
+  trigger: {
+    position: "relative",
+
+    justifyContent: "center",
+
+    paddingHorizontal: 10,
+  },
+
+  content: {
+    flexDirection: "row",
+
+    alignItems: "center",
+
+    justifyContent: "center",
+
+    gap: 6,
+  },
+
+  contentRight: {
+    flexDirection: "row",
+  },
+
+  icon: {
+    alignItems: "center",
+
+    justifyContent: "center",
+  },
+
+  iconLeft: {
+    marginRight: 2,
+  },
+
+  iconRight: {
+    marginLeft: 2,
+  },
+
+  text: {
+    fontWeight: "600",
+
+    includeFontPadding: false,
+  },
+
+  badge: {
+    minWidth: 18,
+    height: 18,
+
+    paddingHorizontal: 5,
+
+    borderRadius: 9,
+
+    alignItems: "center",
+
+    justifyContent: "center",
+  },
+
+  badgeText: {
+    fontSize: 9,
+
+    fontWeight: "700",
+
+    includeFontPadding: false,
+  },
+
+  indicator: {
+    position: "absolute",
+
+    bottom: 0,
+
+    left: 0,
+
+    right: 0,
+  },
+
+  indicatorFull: {
+    left: 0,
+    right: 0,
+  },
+
+  indicatorContent: {
+    left: 8,
+    right: 8,
+  },
+});
+
+UITabsTrigger.displayName = "UITabs.Trigger";

package/src/components/Tabs/index.js

@@ -0,0 +1,9 @@
+export { UITabs, UITabsSizes, useUITabs } from "./UITabs";
+
+export { UITabsList } from "./UITabsList";
+
+export { UITabsTrigger } from "./UITabsTrigger";
+
+export { UITabsContent } from "./UITabsContent";
+
+export { UITabsIndicator } from "./UITabsIndicator";

package/src/components/index.js

@@ -116,3 +116,12 @@ export {
   UIAccordionContent,
   UIAccordionIcon,
 } from "./Accordion";
+export {
+  UITabs,
+  UITabsSizes,
+  useUITabs,
+  UITabsList,
+  UITabsTrigger,
+  UITabsContent,
+  UITabsIndicator,
+} from "./Tabs";

package/src/index.js

@@ -125,4 +125,11 @@ export {
   UIAccordionTrigger,
   UIAccordionContent,
   UIAccordionIcon,
+  UITabs,
+  UITabsSizes,
+  useUITabs,
+  UITabsList,
+  UITabsTrigger,
+  UITabsContent,
+  UITabsIndicator,
 } from "./components";