rnnovaui 0.8.8 → 0.8.9

package/package.json

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

package/src/components/RadioGroup/UIRadioGroup.js

@@ -12,10 +12,6 @@ import { Pressable, StyleSheet, Text, View } from "react-native";
 
 import { useUITheme } from "../../theme";
 
-/* =========================================================
-   CONSTANTS
-========================================================= */
-
 const RADIO_GROUP_ORIENTATIONS = {
   vertical: "vertical",
   horizontal: "horizontal",
@@ -27,10 +23,6 @@ const RADIO_GROUP_SIZES = {
   lg: "lg",
 };
 
-/* =========================================================
-   CONTEXT
-========================================================= */
-
 const RadioGroupContext = createContext(null);
 
 /* =========================================================
@@ -158,18 +150,20 @@ const UIRadioGroupComponent = forwardRef(function UIRadioGroup(
           </Text>
         ) : null}
 
-        {/* OPTIONS */}
+        {/* RADIO OPTIONS */}
 
         <View
           style={[
             styles.options,
 
             resolvedOrientation === "horizontal"
-              ? styles.optionsHorizontal
-              : styles.optionsVertical,
+              ? styles.horizontal
+              : styles.vertical,
 
             {
-              gap,
+              columnGap: gap,
+
+              rowGap: gap,
             },
           ]}
         >
@@ -182,7 +176,7 @@ const UIRadioGroupComponent = forwardRef(function UIRadioGroup(
           })}
         </View>
 
-        {/* ERROR */}
+        {/* ERROR / HELPER */}
 
         {hasError ? (
           <Text
@@ -294,7 +288,7 @@ const UIRadioOptionComponent = function UIRadioOptionComponent({
         style,
       ]}
     >
-      {/* RADIO */}
+      {/* RADIO CIRCLE */}
 
       <View
         style={[
@@ -338,10 +332,10 @@ const UIRadioOptionComponent = function UIRadioOptionComponent({
         ) : null}
       </View>
 
-      {/* LABEL + DESCRIPTION */}
+      {/* LABEL */}
 
       <View style={styles.content}>
-        {label !== null && label !== undefined && String(label).length > 0 ? (
+        {label !== "" ? (
           <Text
             style={[
               styles.optionLabel,
@@ -363,9 +357,9 @@ const UIRadioOptionComponent = function UIRadioOptionComponent({
           </Text>
         ) : null}
 
-        {description !== null &&
-        description !== undefined &&
-        String(description).length > 0 ? (
+        {description !== "" &&
+        description !== null &&
+        description !== undefined ? (
           <Text
             style={[
               styles.description,
@@ -412,7 +406,7 @@ function getRadioSize(size) {
     case "md":
     default:
       return {
-        outer: 21,
+        outer: 20,
         inner: 9,
         fontSize: 14,
         lineHeight: 20,
@@ -430,7 +424,7 @@ const styles = StyleSheet.create({
   },
 
   groupLabel: {
-    marginBottom: 10,
+    marginBottom: 12,
 
     fontSize: 14,
 
@@ -443,40 +437,48 @@ const styles = StyleSheet.create({
 
   options: {
     width: "100%",
+
+    flexDirection: "row",
+
+    flexWrap: "wrap",
+
+    alignItems: "flex-start",
   },
 
-  optionsVertical: {
+  vertical: {
     flexDirection: "column",
 
     alignItems: "stretch",
   },
 
-  optionsHorizontal: {
+  horizontal: {
     flexDirection: "row",
 
     flexWrap: "wrap",
 
-    alignItems: "flex-start",
-
-    justifyContent: "flex-start",
+    alignItems: "center",
   },
 
+  /*
+   * IMPORTANT:
+   *
+   * The option does NOT have
+   * width: "100%".
+   *
+   * Therefore horizontal options
+   * use only the width they need.
+   */
+
   option: {
     flexDirection: "row",
 
-    alignItems: "flex-start",
+    alignItems: "center",
 
-    /*
-     * IMPORTANT:
-     *
-     * No width: "100%" here.
-     *
-     * That was the reason horizontal
-     * layout was not working.
-     */
     flexShrink: 0,
 
-    minHeight: 34,
+    flexGrow: 0,
+
+    minHeight: 32,
   },
 
   radio: {
@@ -485,26 +487,24 @@ const styles = StyleSheet.create({
     alignItems: "center",
 
     justifyContent: "center",
-
-    marginTop: 1,
   },
 
   radioDot: {},
 
   content: {
-    flexShrink: 1,
-
-    minWidth: 0,
+    flexShrink: 0,
 
-    marginLeft: 10,
+    flexGrow: 0,
 
-    paddingRight: 4,
+    marginLeft: 8,
   },
 
   optionLabel: {
     fontWeight: "500",
 
     includeFontPadding: false,
+
+    flexShrink: 0,
   },
 
   description: {

package/src/components/Switch/UISwitch.js

@@ -1,8 +1,15 @@
-import React, { memo, useCallback, useEffect, useRef } from "react";
+import React, {
+  forwardRef,
+  memo,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 
 import {
+  ActivityIndicator,
   Animated,
-  Easing,
   Pressable,
   StyleSheet,
   Text,
@@ -11,283 +18,480 @@ import {
 
 import { useUITheme } from "../../theme";
 
-const SWITCH_SIZES = {
+const UI_SWITCH_SIZES = {
   sm: "sm",
   md: "md",
   lg: "lg",
 };
 
-const SWITCH_VARIANTS = {
-  primary: "primary",
-  secondary: "secondary",
-  success: "success",
-  danger: "danger",
-};
+const SIZE_CONFIG = {
+  sm: {
+    width: 38,
+    height: 22,
+    thumb: 16,
+    padding: 3,
+    labelSize: 13,
+    descriptionSize: 11,
+  },
 
-function UISwitchComponent({
-  value = false,
+  md: {
+    width: 48,
+    height: 28,
+    thumb: 22,
+    padding: 3,
+    labelSize: 14,
+    descriptionSize: 12,
+  },
 
-  onValueChange,
+  lg: {
+    width: 58,
+    height: 34,
+    thumb: 28,
+    padding: 3,
+    labelSize: 16,
+    descriptionSize: 13,
+  },
+};
 
-  label,
+const UISwitchComponent = forwardRef(function UISwitch(
+  {
+    value,
+    defaultValue = false,
 
-  description,
+    onChange,
 
-  size = "md",
+    label,
+    description,
 
-  variant = "primary",
+    size = "md",
 
-  disabled = false,
+    disabled = false,
+    loading = false,
 
-  labelStyle,
+    error = false,
+    errorText,
 
-  descriptionStyle,
+    helperText,
 
-  trackStyle,
+    activeColor,
+    inactiveColor,
+    thumbColor,
 
-  thumbStyle,
+    animated = true,
+    animationDuration = 180,
 
-  style,
+    animatePress = true,
+    pressScale = 0.92,
 
-  testID,
+    labelPosition = "right",
 
-  accessibilityLabel,
+    containerStyle,
+    switchStyle,
+    labelStyle,
+    descriptionStyle,
+    helperStyle,
+    errorStyle,
 
-  accessibilityHint,
+    testID,
+    accessibilityLabel,
 
-  ...props
-}) {
+    ...props
+  },
+  ref,
+) {
   const { theme } = useUITheme();
 
   const colors = theme?.colors || {};
 
-  const safeSize = SWITCH_SIZES[size] ? size : SWITCH_SIZES.md;
+  const config = SIZE_CONFIG[UI_SWITCH_SIZES[size] ? size : UI_SWITCH_SIZES.md];
+
+  /*
+   * --------------------------------------------------
+   * CONTROLLED / UNCONTROLLED
+   * --------------------------------------------------
+   */
+
+  const isControlled = value !== undefined;
+
+  const [internalValue, setInternalValue] = useState(Boolean(defaultValue));
+
+  const checked = isControlled ? Boolean(value) : internalValue;
 
-  const safeVariant = SWITCH_VARIANTS[variant]
-    ? variant
-    : SWITCH_VARIANTS.primary;
+  /*
+   * --------------------------------------------------
+   * ANIMATION
+   * --------------------------------------------------
+   */
 
-  const dimensions = getDimensions(safeSize);
+  const progress = useRef(new Animated.Value(checked ? 1 : 0)).current;
 
-  const activeColor = getActiveColor(safeVariant, colors);
+  const pressScaleValue = useRef(new Animated.Value(1)).current;
 
-  const animation = useRef(new Animated.Value(value ? 1 : 0)).current;
+  /*
+   * --------------------------------------------------
+   * VALUE ANIMATION
+   * --------------------------------------------------
+   */
 
   useEffect(() => {
-    Animated.timing(animation, {
-      toValue: value ? 1 : 0,
+    const target = checked ? 1 : 0;
 
-      duration: 160,
+    if (!animated) {
+      progress.setValue(target);
 
-      easing: Easing.out(Easing.cubic),
+      return;
+    }
+
+    Animated.timing(progress, {
+      toValue: target,
+
+      duration: Math.max(0, animationDuration),
 
       useNativeDriver: true,
     }).start();
-  }, [value, animation]);
+  }, [checked, animated, animationDuration, progress]);
+
+  /*
+   * --------------------------------------------------
+   * PRESS ANIMATION
+   * --------------------------------------------------
+   */
 
-  const handlePress = useCallback(() => {
-    if (disabled) {
+  const animatePressIn = useCallback(() => {
+    if (!animated || !animatePress || disabled || loading) {
       return;
     }
 
-    onValueChange?.(!value);
-  }, [disabled, onValueChange, value]);
+    Animated.spring(pressScaleValue, {
+      toValue: pressScale,
 
-  const translateX = animation.interpolate({
-    inputRange: [0, 1],
+      friction: 7,
 
-    outputRange: [0, dimensions.thumbTravel],
-  });
+      tension: 120,
+
+      useNativeDriver: true,
+    }).start();
+  }, [animated, animatePress, disabled, loading, pressScale, pressScaleValue]);
+
+  const animatePressOut = useCallback(() => {
+    if (!animated || !animatePress) {
+      return;
+    }
+
+    Animated.spring(pressScaleValue, {
+      toValue: 1,
+
+      friction: 7,
+
+      tension: 120,
+
+      useNativeDriver: true,
+    }).start();
+  }, [animated, animatePress, pressScaleValue]);
+
+  /*
+   * --------------------------------------------------
+   * CHANGE
+   * --------------------------------------------------
+   */
+
+  const handleChange = useCallback(() => {
+    if (disabled || loading) {
+      return;
+    }
+
+    const nextValue = !checked;
+
+    if (!isControlled) {
+      setInternalValue(nextValue);
+    }
+
+    onChange?.(nextValue);
+  }, [disabled, loading, checked, isControlled, onChange]);
+
+  /*
+   * --------------------------------------------------
+   * COLORS
+   * --------------------------------------------------
+   */
 
-  const trackBackground = animation.interpolate({
+  const resolvedActiveColor = activeColor || colors.primary || "#FF5A1F";
+
+  const resolvedInactiveColor =
+    inactiveColor || colors.borderStrong || "#D4D4D4";
+
+  const resolvedThumbColor = thumbColor || colors.background || "#FFFFFF";
+
+  const disabledOpacity = disabled ? 0.5 : 1;
+
+  /*
+   * --------------------------------------------------
+   * THUMB MOVEMENT
+   * --------------------------------------------------
+   */
+
+  const travel = config.width - config.thumb - config.padding * 2;
+
+  const translateX = progress.interpolate({
     inputRange: [0, 1],
 
-    outputRange: [colors.border || "#D4D4D4", activeColor],
+    outputRange: [0, travel],
+
+    extrapolate: "clamp",
   });
 
-  return (
-    <View {...props} testID={testID} style={[styles.wrapper, style]}>
-      <Pressable
-        disabled={disabled}
-        onPress={handlePress}
-        accessibilityRole="switch"
-        accessibilityLabel={accessibilityLabel || label}
-        accessibilityHint={accessibilityHint}
-        accessibilityState={{
-          checked: value,
+  /*
+   * --------------------------------------------------
+   * SWITCH
+   * --------------------------------------------------
+   */
 
-          disabled,
-        }}
-        style={styles.pressable}
-      >
-        <View
-          style={[
-            styles.row,
+  const switchElement = (
+    <Animated.View
+      style={[
+        {
+          width: config.width,
+
+          height: config.height,
+
+          borderRadius: config.height / 2,
+
+          backgroundColor: checked
+            ? resolvedActiveColor
+            : resolvedInactiveColor,
+
+          opacity: disabledOpacity,
 
+          transform: [
             {
-              opacity: disabled ? 0.5 : 1,
+              scale: pressScaleValue,
             },
-          ]}
-        >
-          <Animated.View
+          ],
+        },
+
+        switchStyle,
+      ]}
+    >
+      <Animated.View
+        style={[
+          styles.thumb,
+
+          {
+            width: config.thumb,
+
+            height: config.thumb,
+
+            borderRadius: config.thumb / 2,
+
+            backgroundColor: resolvedThumbColor,
+
+            top: config.padding,
+
+            left: config.padding,
+
+            transform: [
+              {
+                translateX,
+              },
+            ],
+          },
+        ]}
+      >
+        {loading ? (
+          <ActivityIndicator size="small" color={resolvedActiveColor} />
+        ) : null}
+      </Animated.View>
+    </Animated.View>
+  );
+
+  /*
+   * --------------------------------------------------
+   * LABEL CONTENT
+   * --------------------------------------------------
+   */
+
+  const textContent =
+    label || description ? (
+      <View
+        style={[
+          styles.textContainer,
+
+          labelPosition === "left" ? styles.textLeft : styles.textRight,
+        ]}
+      >
+        {label ? (
+          <Text
             style={[
-              styles.track,
+              styles.label,
 
               {
-                width: dimensions.trackWidth,
+                fontSize: config.labelSize,
 
-                height: dimensions.trackHeight,
+                color: disabled
+                  ? colors.textDisabled || "#A3A3A3"
+                  : colors.text || "#111111",
+              },
 
-                borderRadius: dimensions.trackHeight / 2,
+              labelStyle,
+            ]}
+          >
+            {label}
+          </Text>
+        ) : null}
+
+        {description ? (
+          <Text
+            style={[
+              styles.description,
+
+              {
+                fontSize: config.descriptionSize,
 
-                backgroundColor: trackBackground,
+                color: disabled
+                  ? colors.textDisabled || "#A3A3A3"
+                  : colors.textSecondary || "#525252",
               },
 
-              trackStyle,
+              descriptionStyle,
             ]}
           >
-            <Animated.View
-              style={[
-                styles.thumb,
-
-                {
-                  width: dimensions.thumbSize,
-
-                  height: dimensions.thumbSize,
-
-                  borderRadius: dimensions.thumbSize / 2,
-
-                  transform: [
-                    {
-                      translateX,
-                    },
-                  ],
-                },
-
-                thumbStyle,
-              ]}
-            />
-          </Animated.View>
-
-          {label ? (
-            <View style={styles.textContainer}>
-              <Text
-                style={[
-                  styles.label,
-
-                  {
-                    color: colors.text || "#111111",
-
-                    fontSize: dimensions.fontSize,
-                  },
-
-                  labelStyle,
-                ]}
-              >
-                {label}
-              </Text>
-
-              {description ? (
-                <Text
-                  style={[
-                    styles.description,
-
-                    {
-                      color: colors.textSecondary || "#525252",
-                    },
-
-                    descriptionStyle,
-                  ]}
-                >
-                  {description}
-                </Text>
-              ) : null}
-            </View>
-          ) : null}
-        </View>
+            {description}
+          </Text>
+        ) : null}
+      </View>
+    ) : null;
+
+  /*
+   * --------------------------------------------------
+   * MAIN
+   * --------------------------------------------------
+   */
+
+  return (
+    <View
+      ref={ref}
+      testID={testID}
+      style={[styles.container, containerStyle]}
+      {...props}
+    >
+      <Pressable
+        disabled={disabled || loading}
+        onPress={handleChange}
+        onPressIn={animatePressIn}
+        onPressOut={animatePressOut}
+        accessibilityRole="switch"
+        accessibilityLabel={accessibilityLabel || label}
+        accessibilityState={{
+          checked,
+          disabled: disabled || loading,
+        }}
+        style={[
+          styles.pressable,
+
+          labelPosition === "left" ? styles.rowReverse : styles.row,
+        ]}
+      >
+        {labelPosition === "left" ? (
+          <>
+            {textContent}
+            {switchElement}
+          </>
+        ) : (
+          <>
+            {switchElement}
+            {textContent}
+          </>
+        )}
       </Pressable>
+
+      {error || errorText ? (
+        <Text
+          style={[
+            styles.message,
+
+            {
+              color: colors.danger || "#DC2626",
+            },
+
+            errorStyle,
+          ]}
+        >
+          {errorText}
+        </Text>
+      ) : helperText ? (
+        <Text
+          style={[
+            styles.message,
+
+            {
+              color: colors.textSecondary || "#525252",
+            },
+
+            helperStyle,
+          ]}
+        >
+          {helperText}
+        </Text>
+      ) : null}
     </View>
   );
-}
-
-function getActiveColor(variant, colors) {
-  switch (variant) {
-    case SWITCH_VARIANTS.secondary:
-      return colors.secondary || "#7CFF32";
-
-    case SWITCH_VARIANTS.success:
-      return colors.success || "#16A34A";
-
-    case SWITCH_VARIANTS.danger:
-      return colors.danger || "#DC2626";
-
-    case SWITCH_VARIANTS.primary:
-    default:
-      return colors.primary || "#FF5A1F";
-  }
-}
-
-function getDimensions(size) {
-  switch (size) {
-    case SWITCH_SIZES.sm:
-      return {
-        trackWidth: 40,
-        trackHeight: 22,
-        thumbSize: 18,
-        thumbTravel: 18,
-        fontSize: 13,
-      };
-
-    case SWITCH_SIZES.lg:
-      return {
-        trackWidth: 58,
-        trackHeight: 32,
-        thumbSize: 28,
-        thumbTravel: 26,
-        fontSize: 16,
-      };
-
-    case SWITCH_SIZES.md:
-    default:
-      return {
-        trackWidth: 48,
-        trackHeight: 28,
-        thumbSize: 24,
-        thumbTravel: 20,
-        fontSize: 14,
-      };
-  }
-}
+});
 
 const styles = StyleSheet.create({
-  wrapper: {
-    alignSelf: "stretch",
+  container: {
+    width: "100%",
   },
 
   pressable: {
-    minHeight: 44,
+    alignItems: "center",
 
-    justifyContent: "center",
+    minHeight: 36,
   },
 
   row: {
     flexDirection: "row",
+  },
 
-    alignItems: "center",
+  rowReverse: {
+    flexDirection: "row-reverse",
   },
 
-  track: {
-    justifyContent: "center",
+  textContainer: {
+    flex: 1,
 
-    paddingHorizontal: 2,
+    minWidth: 0,
+  },
+
+  textRight: {
+    marginLeft: 10,
+  },
+
+  textLeft: {
+    marginRight: 10,
+  },
 
-    overflow: "hidden",
+  label: {
+    fontWeight: "600",
 
-    flexShrink: 0,
+    lineHeight: 20,
+
+    includeFontPadding: false,
+  },
+
+  description: {
+    marginTop: 3,
+
+    lineHeight: 17,
+
+    includeFontPadding: false,
   },
 
   thumb: {
-    backgroundColor: "#FFFFFF",
+    position: "absolute",
+
+    alignItems: "center",
+
+    justifyContent: "center",
 
     elevation: 2,
 
@@ -295,34 +499,21 @@ const styles = StyleSheet.create({
 
     shadowOffset: {
       width: 0,
+
       height: 1,
     },
 
-    shadowOpacity: 0.18,
+    shadowOpacity: 0.2,
 
     shadowRadius: 2,
   },
 
-  textContainer: {
-    flex: 1,
-
-    marginLeft: 12,
-  },
-
-  label: {
-    fontWeight: "600",
-
-    lineHeight: 20,
-
-    includeFontPadding: false,
-  },
-
-  description: {
-    marginTop: 2,
+  message: {
+    marginTop: 6,
 
     fontSize: 12,
 
-    lineHeight: 17,
+    lineHeight: 16,
 
     includeFontPadding: false,
   },
@@ -332,6 +523,6 @@ export const UISwitch = memo(UISwitchComponent);
 
 UISwitch.displayName = "UISwitch";
 
-export { SWITCH_SIZES as UISwitchSizes, SWITCH_VARIANTS as UISwitchVariants };
+export { UI_SWITCH_SIZES as UISwitchSizes };
 
 export default UISwitch;

package/src/components/Switch/index.js

@@ -1 +1 @@
-export { UISwitch, UISwitchSizes, UISwitchVariants } from "./UISwitch";
+export { UISwitch, UISwitchSizes } from "./UISwitch";

package/src/components/index.js

@@ -22,7 +22,7 @@ export {
 export { UIInput, UIInputVariants, UIInputSizes, UIInputStates } from "./Input";
 export { UICheckbox, UICheckboxSizes, UICheckboxVariants } from "./Checkbox";
 export { UIRadio, UIRadioSizes, UIRadioVariants } from "./Radio";
-export { UISwitch, UISwitchSizes, UISwitchVariants } from "./Switch";
+export { UISwitch, UISwitchSizes } from "./Switch";
 export {
   UIAvatar,
   UIAvatarSizes,

package/src/index.js

@@ -45,7 +45,6 @@ export {
   UIRadioVariants,
   UISwitch,
   UISwitchSizes,
-  UISwitchVariants,
   UIAvatar,
   UIAvatarSizes,
   UIAvatarShapes,