rnnovaui 0.1.0 → 0.1.2

package/package.json

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

package/src/components/Button/UIButton.js

@@ -4,12 +4,7 @@ import { ActivityIndicator, Pressable, StyleSheet, View } from "react-native";
 
 import { useUITheme } from "../../theme";
 
-import { UIText } from "../Text";
-
-/**
- * Button variants
- */
-const VARIANTS = {
+const BUTTON_VARIANTS = {
   solid: "solid",
   outline: "outline",
   ghost: "ghost",
@@ -18,10 +13,7 @@ const VARIANTS = {
   success: "success",
 };
 
-/**
- * Button sizes
- */
-const SIZES = {
+const BUTTON_SIZES = {
   sm: "sm",
   md: "md",
   lg: "lg",
@@ -30,93 +22,59 @@ const SIZES = {
 
 const UIButtonComponent = ({
   title,
-
   children,
 
-  variant = VARIANTS.solid,
-
-  size = SIZES.md,
+  variant = "solid",
+  size = "md",
 
   disabled = false,
-
   loading = false,
-
   fullWidth = false,
 
   leftIcon = null,
-
   rightIcon = null,
 
   onPress,
-
   onLongPress,
-
   onPressIn,
-
   onPressOut,
 
   style,
-
-  textStyle,
-
   contentStyle,
+  textStyle,
 
-  testID,
-
-  accessibilityLabel,
-
-  accessibilityHint,
+  activeOpacity = 0.82,
 
-  accessibilityRole = "button",
+  android_ripple = true,
 
   hitSlop,
 
-  pressRetentionOffset,
-
-  android_ripple = true,
+  accessibilityLabel,
+  accessibilityHint,
 
-  activeOpacity = 0.9,
+  testID,
 
   ...props
 }) => {
   const { theme } = useUITheme();
 
-  /**
-   * Prevent callbacks when button
-   * cannot currently be interacted with.
-   */
+  const safeVariant = BUTTON_VARIANTS[variant] || BUTTON_VARIANTS.solid;
+
+  const safeSize = BUTTON_SIZES[size] || BUTTON_SIZES.md;
+
   const isDisabled = disabled || loading;
 
-  /**
-   * Resolve invalid variant safely.
-   */
-  const safeVariant = VARIANTS[variant] ? variant : VARIANTS.solid;
-
-  /**
-   * Resolve invalid size safely.
-   */
-  const safeSize = SIZES[size] ? size : SIZES.md;
-
-  /**
-   * Theme-dependent colors.
-   */
-  const colors = getVariantColors(safeVariant, theme.colors);
-
-  /**
-   * Theme-dependent dimensions.
-   */
-  const dimensions = getSizeDimensions(safeSize, theme);
-
-  /**
-   * Stable press callback.
-   */
+  const variantStyle = resolveVariant(safeVariant, theme.colors);
+
+  const sizeStyle = resolveSize(safeSize, theme);
+
   const handlePress = useCallback(
     (event) => {
       if (isDisabled) {
         return;
       }
 
-      if (onPress) {
+      if (typeof onPress === "function") {
         onPress(event);
       }
     },
@@ -129,7 +87,7 @@ const UIButtonComponent = ({
         return;
       }
 
-      if (onLongPress) {
+      if (typeof onLongPress === "function") {
         onLongPress(event);
       }
     },
@@ -142,7 +100,7 @@ const UIButtonComponent = ({
         return;
       }
 
-      if (onPressIn) {
+      if (typeof onPressIn === "function") {
         onPressIn(event);
       }
     },
@@ -155,30 +113,21 @@ const UIButtonComponent = ({
         return;
       }
 
-      if (onPressOut) {
+      if (typeof onPressOut === "function") {
         onPressOut(event);
       }
     },
     [isDisabled, onPressOut],
   );
 
-  /**
-   * Loading indicator color.
-   */
-  const indicatorColor = colors.text;
-
-  /**
-   * Android ripple.
-   */
   const ripple = android_ripple
     ? {
-        color: colors.ripple,
-
+        color: variantStyle.ripple,
         borderless: false,
       }
     : undefined;
 
-  const label = title ?? children;
+  const hasChildren = children !== undefined && children !== null;
 
   return (
     <Pressable
@@ -190,11 +139,10 @@ const UIButtonComponent = ({
       onPressIn={handlePressIn}
       onPressOut={handlePressOut}
       hitSlop={hitSlop}
-      pressRetentionOffset={pressRetentionOffset}
       android_ripple={ripple}
-      accessibilityRole={accessibilityRole}
+      accessibilityRole="button"
       accessibilityLabel={
-        accessibilityLabel ?? (typeof label === "string" ? label : undefined)
+        accessibilityLabel || (typeof title === "string" ? title : undefined)
       }
       accessibilityHint={accessibilityHint}
       accessibilityState={{
@@ -202,24 +150,24 @@ const UIButtonComponent = ({
         busy: loading,
       }}
       style={({ pressed }) => [
-        styles.base,
+        styles.button,
 
         {
-          minHeight: dimensions.height,
+          minHeight: sizeStyle.height,
 
-          paddingHorizontal: dimensions.paddingHorizontal,
+          paddingHorizontal: sizeStyle.paddingHorizontal,
 
-          borderRadius: theme.radius.button,
+          borderRadius: sizeStyle.borderRadius,
 
-          backgroundColor: colors.background,
+          backgroundColor: variantStyle.background,
 
-          borderColor: colors.border,
+          borderColor: variantStyle.border,
 
-          borderWidth: colors.border ? 1 : 0,
-
-          opacity: isDisabled ? 0.55 : pressed ? activeOpacity : 1,
+          borderWidth: variantStyle.border ? 1 : 0,
 
           width: fullWidth ? "100%" : undefined,
+
+          opacity: isDisabled ? 0.5 : pressed ? activeOpacity : 1,
         },
 
         style,
@@ -230,184 +178,271 @@ const UIButtonComponent = ({
           styles.content,
 
           {
-            minHeight: dimensions.height - 2,
+            minHeight: sizeStyle.height - 2,
 
-            gap: dimensions.gap,
+            gap: sizeStyle.gap,
           },
 
           contentStyle,
         ]}
       >
         {loading ? (
-          <ActivityIndicator size="small" color={indicatorColor} />
-        ) : (
-          leftIcon
-        )}
-
-        {!loading && label != null && (
-          <UIText
-            variant={dimensions.textVariant}
-            color={colors.text}
-            style={[styles.label, textStyle]}
-            numberOfLines={1}
+          <ActivityIndicator size="small" color={variantStyle.text} />
+        ) : leftIcon ? (
+          <View style={styles.iconContainer}>{leftIcon}</View>
+        ) : null}
+
+        {hasChildren ? (
+          <View style={styles.children}>{children}</View>
+        ) : title !== undefined && title !== null ? (
+          <ButtonText
+            color={variantStyle.text}
+            sizeStyle={sizeStyle}
+            style={textStyle}
           >
-            {label}
-          </UIText>
-        )}
+            {title}
+          </ButtonText>
+        ) : null}
 
-        {!loading && rightIcon && <View>{rightIcon}</View>}
+        {!loading && rightIcon ? (
+          <View style={styles.iconContainer}>{rightIcon}</View>
+        ) : null}
       </View>
     </Pressable>
   );
 };
 
-/**
- * Variant colors.
- */
-function getVariantColors(variant, colors) {
+function ButtonText({ children, color, sizeStyle, style }) {
+  return (
+    <View style={styles.textWrapper}>
+      <ButtonTextNative color={color} sizeStyle={sizeStyle} style={style}>
+        {children}
+      </ButtonTextNative>
+    </View>
+  );
+}
+
+function ButtonTextNative({ children, color, sizeStyle, style }) {
+  const { theme } = useUITheme();
+
+  const { Text } = require("react-native");
+
+  return (
+    <Text
+      numberOfLines={1}
+      style={[
+        {
+          color,
+
+          fontSize: sizeStyle.fontSize,
+
+          lineHeight: sizeStyle.lineHeight,
+
+          fontWeight: "600",
+
+          textAlign: "center",
+        },
+
+        style,
+      ]}
+    >
+      {children}
+    </Text>
+  );
+}
+
+function resolveVariant(variant, colors) {
+  const primary = colors.primary || "#FF5A1F";
+
+  const primarySoft = colors.primarySoft || "#FFF0EA";
+
+  const primaryPressed = colors.primaryPressed || primary;
+
+  const success = colors.success || "#16A34A";
+
+  const danger = colors.danger || "#DC2626";
+
+  const surface = colors.surface || "#F5F5F5";
+
+  const border = colors.border || "#E5E5E5";
+
+  const borderStrong = colors.borderStrong || "#D4D4D4";
+
+  const text = colors.text || "#111111";
+
+  const onPrimary = colors.onPrimary || "#FFFFFF";
+
   switch (variant) {
-    case VARIANTS.outline:
+    case BUTTON_VARIANTS.outline:
       return {
-        background: colors.transparent,
+        background: colors.transparent || "transparent",
 
-        border: colors.primary,
+        border: primary,
 
-        text: colors.primary,
+        text: primary,
 
-        ripple: colors.primarySoft,
+        ripple: primarySoft,
       };
 
-    case VARIANTS.ghost:
+    case BUTTON_VARIANTS.ghost:
       return {
-        background: colors.transparent,
+        background: colors.transparent || "transparent",
 
         border: null,
 
-        text: colors.primary,
+        text: primary,
 
-        ripple: colors.primarySoft,
+        ripple: primarySoft,
       };
 
-    case VARIANTS.soft:
+    case BUTTON_VARIANTS.soft:
       return {
-        background: colors.primarySoft,
+        background: primarySoft,
 
         border: null,
 
-        text: colors.primary,
+        text: primary,
 
-        ripple: colors.primary,
+        ripple: primary,
       };
 
-    case VARIANTS.danger:
+    case BUTTON_VARIANTS.danger:
       return {
-        background: colors.danger,
+        background: danger,
 
-        border: colors.danger,
+        border: danger,
 
-        text: colors.onPrimary,
+        text: onPrimary,
 
-        ripple: colors.dangerSoft,
+        ripple: danger,
       };
 
-    case VARIANTS.success:
+    case BUTTON_VARIANTS.success:
       return {
-        background: colors.success,
+        background: success,
 
-        border: colors.success,
+        border: success,
 
-        text: colors.onPrimary,
+        text: onPrimary,
 
-        ripple: colors.successSoft,
+        ripple: success,
       };
 
-    case VARIANTS.solid:
+    case BUTTON_VARIANTS.solid:
     default:
       return {
-        background: colors.primary,
+        background: primary,
 
-        border: colors.primary,
+        border: primary,
 
-        text: colors.onPrimary,
+        text: onPrimary,
 
-        ripple: colors.primaryPressed,
+        ripple: primaryPressed,
       };
   }
 }
 
-/**
- * Size dimensions.
- */
-function getSizeDimensions(size, theme) {
+function resolveSize(size, theme) {
+  const spacing = theme.spacing;
+
+  const sizes = theme.sizes;
+
+  const radius = theme.radius;
+
   switch (size) {
-    case SIZES.sm:
+    case BUTTON_SIZES.sm:
       return {
-        height: theme.sizes.button.sm,
+        height: sizes.button.sm,
 
-        paddingHorizontal: theme.spacing.md,
+        paddingHorizontal: spacing.md,
 
-        gap: theme.spacing.xs,
+        gap: spacing.xs,
 
-        textVariant: "label",
+        borderRadius: radius.button,
+
+        fontSize: 13,
+
+        lineHeight: 18,
       };
 
-    case SIZES.lg:
+    case BUTTON_SIZES.lg:
       return {
-        height: theme.sizes.button.lg,
+        height: sizes.button.lg,
+
+        paddingHorizontal: spacing.xl,
 
-        paddingHorizontal: theme.spacing.xl,
+        gap: spacing.sm,
 
-        gap: theme.spacing.sm,
+        borderRadius: radius.button,
 
-        textVariant: "bodyMedium",
+        fontSize: 16,
+
+        lineHeight: 22,
       };
 
-    case SIZES.xl:
+    case BUTTON_SIZES.xl:
       return {
-        height: theme.sizes.button.xl,
+        height: sizes.button.xl,
+
+        paddingHorizontal: spacing.xl2,
+
+        gap: spacing.sm,
 
-        paddingHorizontal: theme.spacing.xl2,
+        borderRadius: radius.button,
 
-        gap: theme.spacing.sm,
+        fontSize: 17,
 
-        textVariant: "bodyMedium",
+        lineHeight: 24,
       };
 
-    case SIZES.md:
+    case BUTTON_SIZES.md:
     default:
       return {
-        height: theme.sizes.button.md,
+        height: sizes.button.md,
+
+        paddingHorizontal: spacing.lg,
+
+        gap: spacing.sm,
 
-        paddingHorizontal: theme.spacing.lg,
+        borderRadius: radius.button,
 
-        gap: theme.spacing.sm,
+        fontSize: 14,
 
-        textVariant: "label",
+        lineHeight: 20,
       };
   }
 }
 
 const styles = StyleSheet.create({
-  base: {
+  button: {
     alignItems: "center",
     justifyContent: "center",
     overflow: "hidden",
+    flexShrink: 0,
   },
 
   content: {
     width: "100%",
-
     flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 1,
+  },
 
+  children: {
+    flexShrink: 1,
     alignItems: "center",
+    justifyContent: "center",
+  },
 
+  iconContainer: {
+    alignItems: "center",
     justifyContent: "center",
+    flexShrink: 0,
   },
 
-  label: {
+  textWrapper: {
     flexShrink: 1,
-
-    textAlign: "center",
   },
 });
 
@@ -415,4 +450,4 @@ export const UIButton = memo(UIButtonComponent);
 
 UIButton.displayName = "UIButton";
 
-export { VARIANTS as UIButtonVariants, SIZES as UIButtonSizes };
+export { BUTTON_VARIANTS as UIButtonVariants, BUTTON_SIZES as UIButtonSizes };

package/src/components/Text/UIText.js

@@ -27,7 +27,7 @@ const UITextComponent = ({
 }) => {
   const { theme } = useUITheme();
 
-  const typography = theme.typography[variant] || theme.typography.body;
+  const typography = theme.typography?.[variant] || theme.typography.body;
 
   return (
     <Text