rnnovaui 0.1.6 → 0.1.7

package/package.json

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

package/src/components/Button/UIButton.js

@@ -1,4 +1,4 @@
-import React, { memo, useCallback } from "react";
+import React, { memo, useCallback, useMemo } from "react";
 
 import {
   ActivityIndicator,
@@ -10,7 +10,7 @@ import {
 
 import { useUITheme } from "../../theme";
 
-const BUTTON_VARIANTS = {
+const VARIANTS = {
   solid: "solid",
   outline: "outline",
   ghost: "ghost",
@@ -19,171 +19,224 @@ const BUTTON_VARIANTS = {
   success: "success",
 };
 
-const BUTTON_SIZES = {
+const SIZES = {
   sm: "sm",
   md: "md",
   lg: "lg",
   xl: "xl",
 };
 
-const DEFAULT_COLORS = {
-  buttonPrimaryBackground: "#FF5A1F",
+const FALLBACK = {
+  primary: "#FF5A1F",
+  primaryPressed: "#E94D17",
+  primarySoft: "#FFF0EA",
 
-  buttonPrimaryPressed: "#E94D17",
+  success: "#16A34A",
+  successPressed: "#128238",
 
-  buttonPrimaryText: "#FFFFFF",
+  danger: "#DC2626",
+  dangerPressed: "#B91C1C",
 
-  buttonOutlineBackground: "transparent",
+  white: "#FFFFFF",
 
-  buttonOutlineBorder: "#FF5A1F",
+  disabledBackground: "#E5E5E5",
+  disabledText: "#A3A3A3",
+};
 
-  buttonOutlineText: "#FF5A1F",
+function UIButton({
+  title,
+  children,
 
-  buttonGhostBackground: "transparent",
+  variant = "solid",
+  size = "md",
 
-  buttonGhostText: "#FF5A1F",
+  disabled = false,
+  loading = false,
 
-  buttonSoftBackground: "#FFF0EA",
+  fullWidth = false,
 
-  buttonSoftText: "#FF5A1F",
+  leftIcon,
+  rightIcon,
 
-  buttonDangerBackground: "#DC2626",
+  onPress,
+  onLongPress,
 
-  buttonDangerPressed: "#B91C1C",
+  style,
+  contentStyle,
+  textStyle,
 
-  buttonDangerText: "#FFFFFF",
+  testID,
 
-  buttonSuccessBackground: "#16A34A",
+  ...props
+}) {
+  const { theme } = useUITheme();
 
-  buttonSuccessPressed: "#128238",
+  const colors = theme?.colors || {};
 
-  buttonSuccessText: "#FFFFFF",
+  const primary = colors.primary || FALLBACK.primary;
 
-  buttonDisabledBackground: "#E5E5E5",
+  const primaryPressed = colors.primaryPressed || FALLBACK.primaryPressed;
 
-  buttonDisabledText: "#A3A3A3",
+  const primarySoft = colors.primarySoft || FALLBACK.primarySoft;
 
-  buttonDisabledBorder: "#E5E5E5",
+  const success = colors.success || FALLBACK.success;
 
-  buttonRipple: "rgba(255,255,255,0.20)",
-};
+  const successPressed = colors.successPressed || FALLBACK.successPressed;
 
-const UIButtonComponent = ({
-  title,
+  const danger = colors.danger || FALLBACK.danger;
 
-  children,
+  const dangerPressed = colors.dangerPressed || FALLBACK.dangerPressed;
 
-  variant = "solid",
+  const white = colors.onPrimary || FALLBACK.white;
 
-  size = "md",
+  const isDisabled = disabled || loading;
 
-  disabled = false,
+  const buttonColors = useMemo(() => {
+    if (isDisabled) {
+      return {
+        background:
+          colors.buttonDisabledBackground || FALLBACK.disabledBackground,
 
-  loading = false,
+        border: colors.buttonDisabledBorder || FALLBACK.disabledBackground,
 
-  fullWidth = false,
+        text: colors.buttonDisabledText || FALLBACK.disabledText,
 
-  leftIcon = null,
+        borderWidth: 1,
+      };
+    }
 
-  rightIcon = null,
+    switch (variant) {
+      case "outline":
+        return {
+          background: "transparent",
 
-  onPress,
+          border: colors.buttonOutlineBorder || primary,
 
-  onLongPress,
+          text: colors.buttonOutlineText || primary,
 
-  onPressIn,
+          borderWidth: 1,
+        };
 
-  onPressOut,
+      case "ghost":
+        return {
+          background: "transparent",
 
-  style,
+          border: "transparent",
 
-  contentStyle,
+          text: colors.buttonGhostText || primary,
 
-  textStyle,
+          borderWidth: 0,
+        };
 
-  activeOpacity = 0.82,
+      case "soft":
+        return {
+          background: colors.buttonSoftBackground || primarySoft,
 
-  testID,
+          border: colors.buttonSoftBackground || primarySoft,
 
-  accessibilityLabel,
+          text: colors.buttonSoftText || primary,
 
-  accessibilityHint,
+          borderWidth: 1,
+        };
 
-  ...props
-}) => {
-  const { theme } = useUITheme();
+      case "danger":
+        return {
+          background: colors.buttonDangerBackground || danger,
 
-  const colors = {
-    ...DEFAULT_COLORS,
-    ...(theme?.colors || {}),
-  };
+          border: colors.buttonDangerBackground || danger,
 
-  const safeVariant = BUTTON_VARIANTS[variant]
-    ? variant
-    : BUTTON_VARIANTS.solid;
+          text: colors.buttonDangerText || white,
 
-  const safeSize = BUTTON_SIZES[size] ? size : BUTTON_SIZES.md;
+          borderWidth: 1,
+        };
 
-  const isDisabled = disabled || loading;
+      case "success":
+        return {
+          background: colors.buttonSuccessBackground || success,
 
-  const variantStyle = getVariantStyle(safeVariant, colors, isDisabled);
+          border: colors.buttonSuccessBackground || success,
 
-  const sizeStyle = getSizeStyle(safeSize, theme);
+          text: colors.buttonSuccessText || white,
 
-  const handlePress = useCallback(
-    (event) => {
-      if (isDisabled) {
-        return;
-      }
+          borderWidth: 1,
+        };
 
-      if (typeof onPress === "function") {
-        onPress(event);
-      }
-    },
-    [isDisabled, onPress],
-  );
+      case "solid":
+      default:
+        return {
+          background: colors.buttonPrimaryBackground || primary,
 
-  const handleLongPress = useCallback(
-    (event) => {
-      if (isDisabled) {
-        return;
-      }
+          border: colors.buttonPrimaryBackground || primary,
 
-      if (typeof onLongPress === "function") {
-        onLongPress(event);
-      }
-    },
-    [isDisabled, onLongPress],
+          text: colors.buttonPrimaryText || white,
+
+          borderWidth: 1,
+        };
+    }
+  }, [
+    variant,
+    isDisabled,
+    colors,
+    primary,
+    primarySoft,
+    success,
+    danger,
+    white,
+  ]);
+
+  const dimensions = useMemo(() => getDimensions(size, theme), [size, theme]);
+
+  const buttonStyle = useMemo(
+    () => [
+      styles.button,
+
+      {
+        height: dimensions.height,
+
+        minHeight: dimensions.height,
+
+        paddingHorizontal: dimensions.paddingHorizontal,
+
+        borderRadius: dimensions.borderRadius,
+
+        backgroundColor: buttonColors.background,
+
+        borderColor: buttonColors.border,
+
+        borderWidth: buttonColors.borderWidth,
+
+        width: fullWidth ? "100%" : undefined,
+
+        opacity: isDisabled ? 0.55 : 1,
+      },
+
+      style,
+    ],
+    [dimensions, buttonColors, fullWidth, isDisabled, style],
   );
 
-  const handlePressIn = useCallback(
+  const handlePress = useCallback(
     (event) => {
       if (isDisabled) {
         return;
       }
 
-      if (typeof onPressIn === "function") {
-        onPressIn(event);
-      }
+      onPress?.(event);
     },
-    [isDisabled, onPressIn],
+    [isDisabled, onPress],
   );
 
-  const handlePressOut = useCallback(
+  const handleLongPress = useCallback(
     (event) => {
       if (isDisabled) {
         return;
       }
 
-      if (typeof onPressOut === "function") {
-        onPressOut(event);
-      }
+      onLongPress?.(event);
     },
-    [isDisabled, onPressOut],
+    [isDisabled, onLongPress],
   );
 
-  const hasChildren = children !== undefined && children !== null;
-
   return (
     <Pressable
       {...props}
@@ -191,281 +244,118 @@ const UIButtonComponent = ({
       disabled={isDisabled}
       onPress={handlePress}
       onLongPress={handleLongPress}
-      onPressIn={handlePressIn}
-      onPressOut={handlePressOut}
-      accessibilityRole="button"
-      accessibilityLabel={
-        accessibilityLabel || (typeof title === "string" ? title : undefined)
-      }
-      accessibilityHint={accessibilityHint}
-      accessibilityState={{
-        disabled: isDisabled,
-
-        busy: loading,
-      }}
-      style={({ pressed }) => {
-        const backgroundColor = isDisabled
-          ? colors.buttonDisabledBackground
-          : pressed
-            ? variantStyle.pressedBackground
-            : variantStyle.backgroundColor;
-
-        const borderColor = isDisabled
-          ? colors.buttonDisabledBorder
-          : variantStyle.borderColor;
-
-        const textColor = isDisabled
-          ? colors.buttonDisabledText
-          : variantStyle.textColor;
-
-        return [
-          styles.button,
-
-          {
-            height: sizeStyle.height,
-
-            minHeight: sizeStyle.height,
-
-            paddingHorizontal: sizeStyle.paddingHorizontal,
-
-            borderRadius: sizeStyle.borderRadius,
-
-            backgroundColor,
-
-            borderColor,
-
-            borderWidth: variantStyle.borderWidth,
-
-            width: fullWidth ? "100%" : undefined,
-
-            opacity: isDisabled ? 0.55 : 1,
-          },
-
-          style,
-        ];
-      }}
+      style={buttonStyle}
     >
       <View
         style={[
           styles.content,
 
           {
-            gap: sizeStyle.gap,
+            gap: dimensions.gap,
           },
 
           contentStyle,
         ]}
       >
         {loading ? (
-          <ActivityIndicator size="small" color={variantStyle.textColor} />
+          <ActivityIndicator size="small" color={buttonColors.text} />
         ) : (
           leftIcon && <View style={styles.icon}>{leftIcon}</View>
         )}
 
-        {hasChildren ? (
+        {children !== undefined && children !== null ? (
           <View style={styles.children}>{children}</View>
-        ) : (
-          title !== undefined &&
-          title !== null && (
-            <Text
-              numberOfLines={1}
-              style={[
-                styles.text,
-
-                {
-                  color: isDisabled
-                    ? colors.buttonDisabledText
-                    : variantStyle.textColor,
-
-                  fontSize: sizeStyle.fontSize,
-
-                  lineHeight: sizeStyle.lineHeight,
-                },
-
-                textStyle,
-              ]}
-            >
-              {title}
-            </Text>
-          )
-        )}
-
-        {!loading && rightIcon && <View style={styles.icon}>{rightIcon}</View>}
-      </View>
-    </Pressable>
-  );
-};
-
-function getVariantStyle(variant, colors, disabled) {
-  if (disabled) {
-    return {
-      backgroundColor: colors.buttonDisabledBackground,
-
-      pressedBackground: colors.buttonDisabledBackground,
-
-      borderColor: colors.buttonDisabledBorder,
-
-      borderWidth: 1,
-
-      textColor: colors.buttonDisabledText,
-    };
-  }
-
-  switch (variant) {
-    case BUTTON_VARIANTS.outline:
-      return {
-        backgroundColor: colors.buttonOutlineBackground,
-
-        pressedBackground: colors.buttonSoftBackground,
-
-        borderColor: colors.buttonOutlineBorder,
+        ) : title !== undefined && title !== null ? (
+          <Text
+            numberOfLines={1}
+            style={[
+              styles.text,
 
-        borderWidth: 1,
-
-        textColor: colors.buttonOutlineText,
-      };
-
-    case BUTTON_VARIANTS.ghost:
-      return {
-        backgroundColor: colors.buttonGhostBackground,
-
-        pressedBackground: colors.buttonSoftBackground,
+              {
+                color: buttonColors.text,
 
-        borderColor: colors.transparent,
-
-        borderWidth: 0,
-
-        textColor: colors.buttonGhostText,
-      };
-
-    case BUTTON_VARIANTS.soft:
-      return {
-        backgroundColor: colors.buttonSoftBackground,
+                fontSize: dimensions.fontSize,
 
-        pressedBackground: colors.primaryMuted || colors.buttonSoftBackground,
+                lineHeight: dimensions.lineHeight,
+              },
 
-        borderColor: colors.buttonSoftBackground,
-
-        borderWidth: 1,
-
-        textColor: colors.buttonSoftText,
-      };
-
-    case BUTTON_VARIANTS.danger:
-      return {
-        backgroundColor: colors.buttonDangerBackground,
-
-        pressedBackground: colors.buttonDangerPressed,
-
-        borderColor: colors.buttonDangerBackground,
-
-        borderWidth: 1,
+              textStyle,
+            ]}
+          >
+            {title}
+          </Text>
+        ) : null}
 
-        textColor: colors.buttonDangerText,
-      };
-
-    case BUTTON_VARIANTS.success:
-      return {
-        backgroundColor: colors.buttonSuccessBackground,
-
-        pressedBackground: colors.buttonSuccessPressed,
-
-        borderColor: colors.buttonSuccessBackground,
-
-        borderWidth: 1,
-
-        textColor: colors.buttonSuccessText,
-      };
-
-    case BUTTON_VARIANTS.solid:
-    default:
-      return {
-        backgroundColor: colors.buttonPrimaryBackground,
-
-        pressedBackground: colors.buttonPrimaryPressed,
-
-        borderColor: colors.buttonPrimaryBackground,
-
-        borderWidth: 1,
-
-        textColor: colors.buttonPrimaryText,
-      };
-  }
+        {!loading && rightIcon && <View style={styles.icon}>{rightIcon}</View>}
+      </View>
+    </Pressable>
+  );
 }
 
-function getSizeStyle(size, theme) {
+function getDimensions(size, theme) {
   const buttonSizes = theme?.sizes?.button || {};
 
-  const themeRadius = theme?.radius?.button;
-
-  const buttonRadius = typeof themeRadius === "number" ? themeRadius : 12;
+  const radius =
+    typeof theme?.radius?.button === "number" ? theme.radius.button : 12;
 
   const spacing = theme?.spacing || {};
 
-  const spacingSM = typeof spacing.sm === "number" ? spacing.sm : 8;
-
-  const spacingMD = typeof spacing.md === "number" ? spacing.md : 16;
-
-  const spacingLG = typeof spacing.lg === "number" ? spacing.lg : 20;
-
-  const spacingXL = typeof spacing.xl === "number" ? spacing.xl : 24;
-
   switch (size) {
-    case BUTTON_SIZES.sm:
+    case "sm":
       return {
-        height: buttonSizes.sm ?? 36,
+        height: buttonSizes.sm || 36,
 
-        paddingHorizontal: spacingMD,
+        paddingHorizontal: spacing.md || 16,
 
-        gap: spacingSM,
+        gap: 6,
 
-        borderRadius: buttonRadius,
+        borderRadius: radius,
 
         fontSize: 13,
 
         lineHeight: 18,
       };
 
-    case BUTTON_SIZES.lg:
+    case "lg":
       return {
-        height: buttonSizes.lg ?? 52,
+        height: buttonSizes.lg || 52,
 
-        paddingHorizontal: spacingLG,
+        paddingHorizontal: spacing.lg || 20,
 
-        gap: spacingSM,
+        gap: 8,
 
-        borderRadius: buttonRadius,
+        borderRadius: radius,
 
         fontSize: 16,
 
         lineHeight: 22,
       };
 
-    case BUTTON_SIZES.xl:
+    case "xl":
       return {
-        height: buttonSizes.xl ?? 60,
+        height: buttonSizes.xl || 60,
 
-        paddingHorizontal: spacingXL,
+        paddingHorizontal: spacing.xl || 24,
 
-        gap: spacingSM,
+        gap: 8,
 
-        borderRadius: buttonRadius,
+        borderRadius: radius,
 
         fontSize: 17,
 
         lineHeight: 24,
       };
 
-    case BUTTON_SIZES.md:
+    case "md":
     default:
       return {
-        height: buttonSizes.md ?? 44,
+        height: buttonSizes.md || 44,
 
-        paddingHorizontal: spacingLG,
+        paddingHorizontal: spacing.md || 16,
 
-        gap: spacingSM,
+        gap: 8,
 
-        borderRadius: buttonRadius,
+        borderRadius: radius,
 
         fontSize: 14,
 
@@ -476,13 +366,15 @@ function getSizeStyle(size, theme) {
 
 const styles = StyleSheet.create({
   button: {
-    flexShrink: 0,
+    flexDirection: "row",
 
     alignItems: "center",
 
     justifyContent: "center",
 
     overflow: "hidden",
+
+    flexShrink: 0,
   },
 
   content: {
@@ -496,11 +388,11 @@ const styles = StyleSheet.create({
   },
 
   children: {
-    flexShrink: 1,
-
     alignItems: "center",
 
     justifyContent: "center",
+
+    flexShrink: 1,
   },
 
   icon: {
@@ -512,18 +404,16 @@ const styles = StyleSheet.create({
   },
 
   text: {
-    flexShrink: 1,
-
     fontWeight: "600",
 
     textAlign: "center",
 
     includeFontPadding: false,
+
+    flexShrink: 1,
   },
 });
 
-export const UIButton = memo(UIButtonComponent);
-
-UIButton.displayName = "UIButton";
+export default memo(UIButton);
 
-export { BUTTON_VARIANTS as UIButtonVariants, BUTTON_SIZES as UIButtonSizes };
+export { UIButton, VARIANTS as UIButtonVariants, SIZES as UIButtonSizes };