Merge pull request #100 from adaptui/refactoring-components

Author: Karthik-B-06

src/components/badge/Badge.tsx

@@ -76,7 +76,7 @@ const RNBadge: React.FC<Partial<BadgeProps>> = forwardRef<
         })
       ) : (
         <Box style={tailwind.style(cx(badgeStyles.size[size]?.prefix))}>
-          {prefix}
+          {prefix as React.ReactNode}
         </Box>
       );
 

src/components/button/ButtonSpinner.tsx

@@ -3,7 +3,7 @@ import React, { isValidElement } from "react";
 import { Box } from "../../primitives";
 import { useTheme } from "../../theme";
 import { cx } from "../../utils";
-import { Spinner } from "../spinner";
+import { Spinner, SpinnerSizes } from "../spinner";
 
 import { ButtonProps } from "./Button";
 
@@ -47,13 +47,13 @@ export const ButtonSpinner: React.FC<ButtonSpinnerProps> = ({
   prefix,
   suffix,
 }) => {
-  const tailwind = useTheme();
   const buttonTheme = useTheme("button");
 
-  const spinnerSize =
+  const spinnerSize = (
     prefix || suffix
       ? spinnerSizes[size]?.spinner
-      : spinnerSizes[size]?.iconOnly;
+      : spinnerSizes[size]?.iconOnly
+  ) as SpinnerSizes;
 
   return isValidElement(spinner) ? (
     React.cloneElement(spinner, {
@@ -63,9 +63,7 @@ export const ButtonSpinner: React.FC<ButtonSpinnerProps> = ({
   ) : (
     <Spinner
       size={spinnerSize}
-      style={tailwind.style(
-        cx(buttonTheme.themeColor[themeColor]?.[variant]?.spinner?.disabled),
-      )}
+      stroke={buttonTheme.themeColor[themeColor]?.[variant]?.spinner?.disabled}
     />
   );
 };

src/components/checkbox/Checkbox.tsx

@@ -113,6 +113,7 @@ const RNCheckbox: React.FC<Partial<CheckboxProps>> = forwardRef<
     isIndeterminate,
     isDisabled,
     style,
+    index,
   } = props;
 
   const hasOnlyLabel = label && !description;
@@ -351,6 +352,9 @@ const RNCheckbox: React.FC<Partial<CheckboxProps>> = forwardRef<
         tailwind.style(
           cx(
             checkboxTheme?.label?.common,
+            index !== 0
+              ? checkboxTheme?.group[checkboxGroupState.orientation]?.spacing
+              : "",
             description ? checkboxTheme?.label?.withDescription : "",
             checkboxTheme.size[size]?.label?.wrapper,
             touchState.pressed

src/components/checkbox/CheckboxGroup.tsx

@@ -12,13 +12,14 @@ import {
   createContext,
   cx,
   getValidChildren,
+  passProps,
   styleAdapter,
 } from "../../utils";
 
 import { CheckboxSizes, CheckboxTheme } from "./Checkbox";
 
 interface CheckboxGroupContext
-  extends Pick<CheckboxGroupProps, "size" | "themeColor">,
+  extends Pick<CheckboxGroupProps, "size" | "themeColor" | "orientation">,
     CheckboxGroupState {}
 
 const [CheckboxGroupProvider, useCheckboxGroupContext] =
@@ -98,17 +99,14 @@ const RNCheckboxGroup: React.FC<Partial<CheckboxGroupProps>> = forwardRef<
       accessibilityRole={Platform.OS === "web" ? "group" : undefined}
       ref={ref}
     >
-      <CheckboxGroupProvider value={{ ...state, size, themeColor }}>
-        {validChildren.map((renderElement, index) => (
-          <Box
-            key={index}
-            style={tailwind.style(
-              cx(checkboxGroupTheme.group[orientation]?.spacing),
-            )}
-          >
-            {renderElement}
-          </Box>
-        ))}
+      <CheckboxGroupProvider
+        value={{ ...state, size, themeColor, orientation }}
+      >
+        {validChildren.map((renderElement, index) =>
+          passProps(renderElement, {
+            index,
+          }),
+        )}
       </CheckboxGroupProvider>
     </Box>
   );

src/components/circular-progress/CircularProgress.tsx

@@ -1,6 +1,7 @@
 import React, { forwardRef } from "react";
 import { StyleSheet } from "react-native";
 import Animated, {
+  cancelAnimation,
   Easing,
   interpolate,
   useAnimatedProps,
@@ -128,9 +129,10 @@ const RNCircularProgress: React.FC<Partial<CircularProgressProps>> = forwardRef<
       };
     });
 
-    // Indeterminate Progress
+    // Indeterminate Progress Code
     const progress = useSharedValue(0);
     const rotate = useSharedValue(0);
+
     const animatedSvgStyle = useAnimatedStyle(() => {
       const rotateValue = interpolate(rotate.value, [0, 1], [0, 360]);
       return {
@@ -141,6 +143,7 @@ const RNCircularProgress: React.FC<Partial<CircularProgressProps>> = forwardRef<
         ],
       };
     });
+
     const indeterminateAnimatedCircularProgress = useAnimatedProps(() => {
       return {
         strokeDashoffset: interpolate(
@@ -152,23 +155,40 @@ const RNCircularProgress: React.FC<Partial<CircularProgressProps>> = forwardRef<
     });
 
     React.useEffect(() => {
-      progress.value = withRepeat(
-        withTiming(1, {
-          duration: 1500,
-          easing: Easing.linear,
-        }),
-        -1,
-        false,
-      );
-      rotate.value = withRepeat(
-        withTiming(1, {
-          duration: 1000,
-          easing: Easing.bezier(0.4, 0, 0.2, 1),
-        }),
-        -1,
-        false,
-      );
-    }, [progress, rotate]);
+      if (isIndeterminate) {
+        progress.value = withRepeat(
+          withTiming(1, {
+            duration: 1500,
+            easing: Easing.linear,
+          }),
+          -1,
+          false,
+          finished => {
+            if (!finished) {
+              progress.value = 0;
+            }
+          },
+        );
+        rotate.value = withRepeat(
+          withTiming(1, {
+            duration: 1000,
+            easing: Easing.bezier(0.4, 0, 0.2, 1),
+          }),
+          -1,
+          false,
+          finished => {
+            if (!finished) {
+              rotate.value = 0;
+            }
+          },
+        );
+      } else {
+        cancelAnimation(progress);
+        cancelAnimation(rotate);
+      }
+    }, [isIndeterminate, progress, rotate]);
+
+    // Indeterminate Progress Code
 
     const circularProgressBoxDimensions = {
       width: hint
@@ -185,7 +205,7 @@ const RNCircularProgress: React.FC<Partial<CircularProgressProps>> = forwardRef<
         style={[
           circularProgressBoxDimensions,
           styleAdapter(style),
-          isIndeterminate && animatedSvgStyle,
+          isIndeterminate ? animatedSvgStyle : {},
         ]}
         {...otherProps}
       >

src/components/input/Input.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef, ReactNode, useMemo, useRef, useState } from "react";
-import { Platform, TextInputProps, ViewStyle } from "react-native";
+import { Platform, TextInputProps } from "react-native";
 
 import { Box, BoxProps, RNTextInput, TouchableProps } from "../../primitives";
 import { useTheme } from "../../theme";
@@ -71,14 +71,14 @@ export interface InputProps extends TextInputProps {
 }
 
 interface DefaultInputSpinnerProps extends Pick<InputProps, "size"> {
-  spinnerStroke: ViewStyle;
+  spinnerStroke: string;
 }
 
 export const DefaultInputSpinner = (
   state: DefaultInputSpinnerProps,
 ): JSX.Element => {
   const { size, spinnerStroke } = state;
-  return <Spinner size={size !== "xl" ? "xs" : "md"} style={spinnerStroke} />;
+  return <Spinner size={size !== "xl" ? "xs" : "md"} stroke={spinnerStroke} />;
 };
 
 const RNInput: React.FC<Partial<InputProps>> = forwardRef<
@@ -212,13 +212,13 @@ const RNInput: React.FC<Partial<InputProps>> = forwardRef<
           })
         : suffix;
 
-    const spinnerStroke = tailwind.style(
+    const spinnerStroke = tailwind.getColor(
       cx(
         editable
           ? inputTheme.variant[variant]?.default?.suffix
           : inputTheme.variant[variant]?.disabled?.suffix,
       ),
-    );
+    ) as string;
     const inputLoading = runIfFn(DefaultInputSpinner, {
       size,
       spinnerStroke,

src/components/select/SelectPrefix.tsx

@@ -64,7 +64,7 @@ export const SelectPrefix: React.FC<SelectPrefixProps> = ({
       )}
       {...props}
     >
-      {_prefix}
+      {_prefix as React.ReactNode}
     </Box>
   );
 };

src/components/select/SelectSuffix.tsx

@@ -52,7 +52,7 @@ export const SelectSuffix: React.FC<SelectSuffixProps> = ({
             iconFill: tailwind.getColor(iconColor),
           })
         : suffix;
-    return selectSuffix;
+    return selectSuffix as React.ReactNode;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [disabled, invalid, suffix, isPressedOrHovered]);
 

src/components/slider/SliderTooltip.tsx

@@ -118,7 +118,7 @@ const RNSliderTooltip: React.FC<Partial<SliderTooltipProps>> = props => {
           getContainerStyle,
         ]}
       >
-        {content}
+        {content as React.ReactNode}
       </Box>
       <AnimatedBox
         style={[