chore(progress-bar): ✨ wrap progress bar component

- add theming to progress bar
- restructure progress bar theme file
- add props for customising progress bar

Author: Karthik-B-06

src/components/progress/ProgressBar.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { Dimensions } from "react-native";
+import { Dimensions, ViewStyle } from "react-native";
 import {
   Easing,
   interpolate,
@@ -11,36 +11,34 @@ import {
   withTiming,
 } from "react-native-reanimated";
 
-import { AnimatedBox } from "../../primitives";
+import { AnimatedBox, BoxProps } from "../../primitives";
 import { useTheme } from "../../theme/context";
-import { createComponent } from "../../utils";
-
-import { useProgressBarProps } from "./ProgressProps";
+import { createComponent, styleAdapter } from "../../utils";
 
 export type ProgressBarSizes = "sm" | "md" | "lg" | "xl";
+export type ProgressBarTheme = "base" | "primary";
 
-export interface ProgressProps {
+export interface ProgressProps extends BoxProps {
   /**
    * The size of the Progress Bar component.
    * @default lg
    */
   size: ProgressBarSizes;
+  /**
+   * The theme of the Progress Bar component.
+   * @default base
+   */
+  themeColor: ProgressBarTheme;
   /**
    * The progress value
    * If null makes it indeterminate
    * @default null
    */
   value: number | null;
   /**
-   * Track color containing the progress
-   * @default 'bg-gray-200'
+   * The progress track style
    */
-  trackColor: string;
-  /**
-   * Track color of the progress value
-   * @default 'bg-gray-800'
-   */
-  progressTrackColor: string;
+  trackStyle: ViewStyle;
 }
 
 const SPRING_CONFIG = {
@@ -57,9 +55,16 @@ export const RNProgressBar: React.FC<Partial<ProgressProps>> = forwardRef<
   Partial<ProgressProps>
 >((props, ref) => {
   const tailwind = useTheme();
-  const progressStyles = useTheme("progress");
-  const { trackColor, progressTrackColor, value, size } =
-    useProgressBarProps(props);
+  const progressTheme = useTheme("progress");
+  const {
+    size = "lg",
+    themeColor = "base",
+    value,
+    style,
+    trackStyle = {},
+    ...otherProps
+  } = props;
+
   const isIndeterminate = React.useMemo(
     () => value === null || value === undefined,
     [value],
@@ -107,24 +112,34 @@ export const RNProgressBar: React.FC<Partial<ProgressProps>> = forwardRef<
     <AnimatedBox
       ref={ref}
       style={[
-        tailwind.style(progressStyles.container[size]),
-        { backgroundColor: trackColor },
+        tailwind.style(
+          progressTheme.size[size]?.container,
+          progressTheme.themeColor[themeColor]?.track,
+        ),
+        styleAdapter(style, { pressed: false }, false),
       ]}
+      {...otherProps}
     >
       {isIndeterminate && (
         <AnimatedBox
           style={[
-            tailwind.style(progressStyles.bar[size]),
-            { backgroundColor: progressTrackColor },
+            tailwind.style(
+              progressTheme.size[size]?.bar,
+              progressTheme.themeColor[themeColor]?.filled,
+            ),
+            styleAdapter(trackStyle, { pressed: false }, false),
             translatingStyle,
           ]}
         />
       )}
       {!isIndeterminate && (
         <AnimatedBox
           style={[
-            tailwind.style(progressStyles.bar[size]),
-            { backgroundColor: progressTrackColor },
+            tailwind.style(
+              progressTheme.size[size]?.bar,
+              progressTheme.themeColor[themeColor]?.filled,
+            ),
+            styleAdapter(trackStyle, { pressed: false }, false),
             animatingWidth,
           ]}
         />

src/components/progress/ProgressProps.tsx

@@ -1,2 +1 @@
 export * from "./ProgressBar";
-export * from "./ProgressProps";

src/components/progress/index.ts

@@ -1,16 +1,30 @@
 export const progress = {
-  container: {
-    sm: "w-full h-0.5 rounded-full overflow-hidden",
-    md: "w-full h-1 rounded-full overflow-hidden",
-    lg: "w-full h-2 rounded-full overflow-hidden",
-    xl: "w-full h-3 rounded-full overflow-hidden",
+  size: {
+    sm: {
+      container: "w-full h-0.5 rounded-full overflow-hidden",
+      bar: "absolute h-0.5 rounded-full",
+    },
+    md: {
+      container: "w-full h-1 rounded-full overflow-hidden",
+      bar: "absolute h-1 rounded-full",
+    },
+    lg: {
+      container: "w-full h-2 rounded-full overflow-hidden",
+      bar: "absolute h-2 rounded-full",
+    },
+    xl: {
+      container: "w-full h-3 rounded-full overflow-hidden",
+      bar: "absolute h-3 rounded-full",
+    },
   },
-  bar: {
-    sm: "absolute h-0.5 rounded-full",
-    md: "absolute h-1 rounded-full",
-    lg: "absolute h-2 rounded-full",
-    xl: "absolute h-3 rounded-full",
+  themeColor: {
+    base: {
+      track: "bg-gray-100",
+      filled: "bg-gray-900",
+    },
+    primary: {
+      track: "bg-blue-100",
+      filled: "bg-blue-600",
+    },
   },
-  defaultTrackColor: "bg-gray-200",
-  defaultProgressTrackColor: "bg-gray-800",
 };