@hero-design/rn 8.92.2 → 8.93.0

package/src/components/Progress/ProgressCircle.tsx

@@ -1,17 +1,12 @@
 import { useTheme } from '@emotion/react';
 import React, { useEffect, useRef } from 'react';
-import { Animated, View, StyleSheet } from 'react-native';
+import { Animated, Easing, View } from 'react-native';
+import Svg, { Circle, G } from 'react-native-svg';
 import type { ViewProps, StyleProp, ViewStyle } from 'react-native';
-import {
-  StyledContainer,
-  StyledDonutCircle,
-  StyledHalfCircleInnerFG,
-  StyledHalfCircleInnerBG,
-  StyledHalfCircleWrapper,
-  StyledStrokeEnd,
-} from './StyledProgressCircle';
+import { StyledContainer, StyledDonutCircle } from './StyledProgressCircle';
 import Typography from '../Typography';
-import type { ThemeIntent } from './types';
+import { THEME_INTENT_MAP } from './constants';
+import { hexToRgba } from '../../utils/helpers';
 
 export interface ProgressCircleProps extends ViewProps {
   /**
@@ -48,23 +43,8 @@ export interface ProgressCircleProps extends ViewProps {
   testID?: string;
 }
 
-const HalfCircle = ({
-  type,
-  themeIntent,
-}: {
-  type: 'background' | 'foreground';
-  themeIntent: ThemeIntent;
-}) => (
-  <StyledHalfCircleWrapper>
-    {type === 'background' ? (
-      <StyledHalfCircleInnerBG themeIntent={themeIntent} />
-    ) : (
-      <StyledHalfCircleInnerFG themeIntent={themeIntent} />
-    )}
-  </StyledHalfCircleWrapper>
-);
-
 const defaultRenderValue = (value: number) => `${value}%`;
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
 
 const ProgressCircle = ({
   value,
@@ -75,101 +55,65 @@ const ProgressCircle = ({
   ...nativeProps
 }: ProgressCircleProps): JSX.Element => {
   const theme = useTheme();
-  const radius = theme.__hd__.progress.sizes.circleDiameter / 2;
-  const progressAnimatedValue = useRef<Animated.Value>(new Animated.Value(0));
+  const size = theme.__hd__.progress.sizes.circleDiameter;
+  const strokeWidth = theme.__hd__.progress.sizes.circleCompletenessHeight;
+  const radius = size / 2 - strokeWidth;
+  const circumference = 2 * Math.PI * radius;
+
+  const progressAnimatedValue = useRef(new Animated.Value(0)).current;
+  const minArc = strokeWidth / 2 / Math.PI; // Minimum arc length
 
   useEffect(() => {
-    const animation = Animated.timing(progressAnimatedValue.current, {
+    Animated.timing(progressAnimatedValue, {
       toValue: value,
       useNativeDriver: true,
-    });
-
-    animation.start();
-
-    return () => animation.stop();
+      easing: Easing.inOut(Easing.ease),
+    }).start();
   }, [value]);
 
-  // Animate progress circle: 0% => 50%
-  const interpolateRotateRightHalf = progressAnimatedValue.current.interpolate({
-    inputRange: [0, 50],
-    outputRange: ['0deg', '180deg'],
-    extrapolate: 'clamp',
-  });
-
-  const interpolateOpacityRightHalf = progressAnimatedValue.current.interpolate(
-    {
-      inputRange: [50, 51], // Transition between left and right half
-      outputRange: [1, 0],
-      extrapolate: 'clamp',
-    }
-  );
-
-  // Animate progress circle: 50% => 100%
-  const interpolateRotateSecondHalf = progressAnimatedValue.current.interpolate(
-    {
-      inputRange: [50, 100],
-      outputRange: ['0deg', '180deg'],
-      extrapolate: 'clamp',
-    }
-  );
-
-  // Curve at the end of progress stroke
-  const interpolateDotRotate = progressAnimatedValue.current.interpolate({
+  const strokeDashoffset = progressAnimatedValue.interpolate({
     inputRange: [0, 100],
-    outputRange: ['0deg', '360deg'],
-    extrapolate: 'clamp',
+    outputRange: [circumference - minArc, 0], // Full circle to zero offset
   });
 
   return (
     <View {...nativeProps} testID={testID} style={style}>
       <StyledContainer>
-        <View>
-          <HalfCircle type="foreground" themeIntent={intent} />
-          <Animated.View
-            style={{
-              ...StyleSheet.absoluteFillObject,
-              transform: [
-                { translateX: radius / 2 },
-                { rotate: interpolateRotateSecondHalf },
-                { translateX: -radius / 2 },
-              ],
-            }}
-          >
-            <HalfCircle type="background" themeIntent={intent} />
-          </Animated.View>
-        </View>
-        <View
-          style={{
-            transform: [{ rotate: '180deg' }],
-            zIndex: 1,
-            marginLeft: -0.1,
-          }}
-        >
-          <HalfCircle type="foreground" themeIntent={intent} />
-          <Animated.View
-            style={{
-              ...StyleSheet.absoluteFillObject,
-              transform: [
-                { translateX: radius / 2 },
-                { rotate: interpolateRotateRightHalf },
-                { translateX: -radius / 2 },
-              ],
-              opacity: interpolateOpacityRightHalf,
-            }}
-          >
-            <HalfCircle type="background" themeIntent={intent} />
-          </Animated.View>
-        </View>
-        <StyledStrokeEnd themeIntent={intent} />
-        <Animated.View
-          style={{
-            ...StyleSheet.absoluteFillObject,
-            zIndex: 2,
-            transform: [{ rotate: interpolateDotRotate }],
-          }}
-        >
-          <StyledStrokeEnd themeIntent={intent} />
-        </Animated.View>
+        <Svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+          {/* rotation -90 in order to move start point from 3 o'clock to 12 o'clock */}
+          <G rotation="-90" origin={`${size / 2}, ${size / 2}`}>
+            {/* Background Circle */}
+            <Circle
+              cx={size / 2}
+              cy={size / 2}
+              r={radius}
+              stroke={hexToRgba(
+                theme.__hd__.progress.colors.incompleteness[
+                  THEME_INTENT_MAP[intent]
+                ],
+                0.1
+              )}
+              strokeWidth={strokeWidth}
+              fill="transparent"
+            />
+            {/* Progress Circle */}
+            <AnimatedCircle
+              cx={size / 2}
+              cy={size / 2}
+              r={radius}
+              stroke={
+                theme.__hd__.progress.colors.completeness[
+                  THEME_INTENT_MAP[intent]
+                ]
+              }
+              strokeWidth={strokeWidth}
+              fill="transparent"
+              strokeDasharray={circumference}
+              strokeDashoffset={strokeDashoffset}
+              strokeLinecap="round"
+            />
+          </G>
+        </Svg>
         <StyledDonutCircle>
           <Typography.Body>{renderValue(value)}</Typography.Body>
         </StyledDonutCircle>

package/src/components/Progress/StyledProgressBar.tsx

@@ -3,15 +3,18 @@ import styled from '@emotion/native';
 import type { ViewProps } from 'react-native';
 import type { ThemeIntent } from './types';
 import { THEME_INTENT_MAP } from './constants';
+import { hexToRgba } from '../../utils/helpers';
 
 const StyledWrapper = styled(View)<ViewProps & { themeIntent: ThemeIntent }>(
   ({ theme, themeIntent }) => ({
     height: theme.__hd__.progress.sizes.barHeight,
     alignSelf: 'stretch',
-    backgroundColor:
+    backgroundColor: hexToRgba(
       theme.__hd__.progress.colors.incompleteness[
         THEME_INTENT_MAP[themeIntent]
       ],
+      0.1
+    ),
     overflow: 'hidden',
     borderRadius: theme.__hd__.progress.radii.default,
   })

package/src/components/Progress/StyledProgressCircle.tsx

@@ -1,44 +1,12 @@
 import { View } from 'react-native';
 import styled from '@emotion/native';
 import type { ViewProps } from 'react-native';
-import type { ThemeIntent } from './types';
-import { THEME_INTENT_MAP } from './constants';
 
 const StyledContainer = styled(View)<ViewProps>(({ theme }) => ({
   flexDirection: 'row',
   borderRadius: theme.__hd__.progress.radii.default,
 }));
 
-const StyledHalfCircleWrapper = styled(View)<ViewProps>(({ theme }) => ({
-  width: theme.__hd__.progress.sizes.circleDiameter / 2,
-  height: theme.__hd__.progress.sizes.circleDiameter,
-  overflow: 'hidden',
-}));
-
-const StyledHalfCircleInnerFG = styled(View)<{ themeIntent: ThemeIntent }>(
-  ({ theme, themeIntent }) => ({
-    width: theme.__hd__.progress.sizes.circleDiameter,
-    height: theme.__hd__.progress.sizes.circleDiameter,
-    borderRadius: theme.__hd__.progress.radii.default,
-    borderColor:
-      theme.__hd__.progress.colors.completeness[THEME_INTENT_MAP[themeIntent]],
-    borderWidth: theme.__hd__.progress.sizes.circleCompletenessHeight,
-  })
-);
-
-const StyledHalfCircleInnerBG = styled(View)<{ themeIntent: ThemeIntent }>(
-  ({ theme, themeIntent }) => ({
-    width: theme.__hd__.progress.sizes.circleDiameter,
-    height: theme.__hd__.progress.sizes.circleDiameter,
-    borderRadius: theme.__hd__.progress.radii.default,
-    borderWidth: theme.__hd__.progress.sizes.circleCompletenessHeight,
-    borderColor:
-      theme.__hd__.progress.colors.incompleteness[
-        THEME_INTENT_MAP[themeIntent]
-      ],
-  })
-);
-
 const StyledDonutCircle = styled(View)<ViewProps>(({ theme }) => ({
   position: 'absolute',
   top: theme.__hd__.progress.sizes.circleCompletenessHeight,
@@ -55,28 +23,4 @@ const StyledDonutCircle = styled(View)<ViewProps>(({ theme }) => ({
   justifyContent: 'center',
 }));
 
-const StyledStrokeEnd = styled(View)<{ themeIntent: ThemeIntent }>(
-  ({ theme, themeIntent }) => ({
-    position: 'absolute',
-    top: 0,
-    left:
-      (theme.__hd__.progress.sizes.circleDiameter -
-        theme.__hd__.progress.sizes.circleCompletenessHeight) /
-      2,
-    width: theme.__hd__.progress.sizes.circleCompletenessHeight,
-    height: theme.__hd__.progress.sizes.circleCompletenessHeight,
-    borderRadius: theme.__hd__.progress.radii.default,
-    backgroundColor:
-      theme.__hd__.progress.colors.completeness[THEME_INTENT_MAP[themeIntent]],
-    zIndex: 2,
-  })
-);
-
-export {
-  StyledContainer,
-  StyledDonutCircle,
-  StyledHalfCircleWrapper,
-  StyledHalfCircleInnerFG,
-  StyledHalfCircleInnerBG,
-  StyledStrokeEnd,
-};
+export { StyledContainer, StyledDonutCircle };

package/src/components/Progress/StyledStep.tsx

@@ -23,7 +23,7 @@ const StyledStep = styled(Box)<{
 const StyledSingleStepContainer = styled(Box)(({ theme }) => ({
   height: theme.__hd__.progress.sizes.stepHeight,
   borderRadius: theme.__hd__.progress.radii.default,
-  backgroundColor: theme.__hd__.progress.colors.step.current,
+  backgroundColor: theme.__hd__.progress.colors.step.incomplete,
   width: '100%',
   position: 'relative',
 }));