@utilitywarehouse/hearth-react-native 0.23.0 → 0.24.0

package/src/components/ProgressBar/ProgressBarCircular.tsx

@@ -0,0 +1,181 @@
+import React, { useEffect, useRef } from 'react';
+import { Text, View } from 'react-native';
+import Animated, {
+  Easing,
+  useAnimatedProps,
+  useReducedMotion,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { Circle, G, Svg } from 'react-native-svg';
+import { StyleSheet } from 'react-native-unistyles';
+import useTheme from '../../hooks/useTheme';
+import { BodyText } from '../BodyText';
+import type { ProgressBarInternalProps } from './ProgressBar.props';
+
+const AnimatedCircle = Animated.createAnimatedComponent(Circle as React.ComponentType<any>);
+
+const ProgressBarCircular = ({
+  percent,
+  label,
+  valueText,
+  hideLabel,
+  colorScheme,
+  size,
+}: ProgressBarInternalProps) => {
+  const { components } = useTheme();
+  const isReducedMotion = useReducedMotion();
+  const progress = useSharedValue(0);
+  const hasMountedRef = useRef(false);
+
+  useEffect(() => {
+    const target = Math.max(0, Math.min(100, percent)) / 100;
+    if (isReducedMotion) {
+      progress.value = target;
+      hasMountedRef.current = true;
+      return;
+    }
+
+    if (!hasMountedRef.current) {
+      progress.value = target;
+      hasMountedRef.current = true;
+      return;
+    }
+
+    progress.value = withTiming(target, { duration: 300, easing: Easing.out(Easing.ease) });
+  }, [percent, isReducedMotion, progress]);
+
+  const circularTokens = components.progressBar.circular[size];
+  const barWidth = 'bar' in circularTokens ? circularTokens.bar.width : circularTokens.barWidth;
+  const diameter = circularTokens.height;
+  const radius = (diameter - barWidth) / 2;
+  const circumference = 2 * Math.PI * radius;
+
+  const animatedCircleProps = useAnimatedProps(() => ({
+    strokeDashoffset: circumference * (1 - progress.value),
+  }));
+
+  const indicatorColor =
+    colorScheme === 'success'
+      ? components.progressBar.progress.successColor
+      : colorScheme === 'danger'
+        ? components.progressBar.progress.dangerColor
+        : components.progressBar.progress.defaultColor;
+
+  styles.useVariants({ size });
+
+  return (
+    <View style={styles.container}>
+      <Svg
+        width={diameter}
+        height={diameter}
+        viewBox={`0 0 ${diameter} ${diameter}`}
+        style={styles.svg}
+      >
+        <G origin={`${diameter / 2}, ${diameter / 2}`} rotation={-90}>
+          <Circle
+            cx="50%"
+            cy="50%"
+            r={radius}
+            stroke={components.progressBar.barColor}
+            strokeWidth={barWidth}
+            fill="transparent"
+          />
+          <AnimatedCircle
+            cx="50%"
+            cy="50%"
+            r={radius}
+            stroke={indicatorColor}
+            strokeWidth={barWidth}
+            fill="transparent"
+            strokeLinecap="round"
+            strokeDasharray={circumference}
+            animatedProps={animatedCircleProps}
+          />
+        </G>
+      </Svg>
+      <View style={styles.content}>
+        <Text style={styles.valueText}>{valueText}</Text>
+        {!hideLabel && size === 'md' ? (
+          <BodyText style={styles.label} size="md" weight="semibold">
+            {label}
+          </BodyText>
+        ) : null}
+      </View>
+    </View>
+  );
+};
+
+ProgressBarCircular.displayName = 'ProgressBarCircular';
+
+const styles = StyleSheet.create(theme => ({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'relative',
+    variants: {
+      size: {
+        md: {
+          width: theme.components.progressBar.circular.md.height,
+          height: theme.components.progressBar.circular.md.height,
+        },
+        sm: {
+          width: theme.components.progressBar.circular.sm.height,
+          height: theme.components.progressBar.circular.sm.height,
+        },
+      },
+    },
+  },
+  svg: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+  },
+  content: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    _web: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: '100%',
+    },
+    variants: {
+      size: {
+        md: {
+          gap: theme.components.progressBar.circular.md.gap,
+        },
+        sm: {
+          gap: 0,
+        },
+      },
+    },
+  },
+  valueText: {
+    color: theme.color.text.primary,
+    textAlign: 'center',
+    variants: {
+      size: {
+        md: {
+          fontFamily: theme.components.progressBar.circular.md.label.fontFamily,
+          fontSize: theme.components.progressBar.circular.md.label.fontSize,
+          lineHeight: theme.components.progressBar.circular.md.label.lineHeight,
+          fontWeight: theme.components.progressBar.circular.md.label.fontWeight,
+        },
+        sm: {
+          fontFamily: theme.typography.mobile.bodyText.fontFamily,
+          fontSize: theme.typography.mobile.bodyText.md.fontSize,
+          lineHeight: theme.typography.mobile.bodyText.md.lineHeight,
+          fontWeight: theme.fontWeight.semibold,
+        },
+      },
+    },
+  },
+  label: {
+    textAlign: 'center',
+    maxWidth: 90,
+  },
+}));
+
+export default ProgressBarCircular;

package/src/components/ProgressBar/ProgressBarLinear.tsx

@@ -0,0 +1,127 @@
+import { useEffect, useRef, useState } from 'react';
+import { LayoutChangeEvent, Platform, View } from 'react-native';
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useReducedMotion,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { StyleSheet } from 'react-native-unistyles';
+import useTheme from '../../hooks/useTheme';
+import { BodyText } from '../BodyText';
+import type { ProgressBarInternalProps } from './ProgressBar.props';
+
+const ProgressBarLinear = ({
+  percent,
+  label,
+  valueText,
+  hideLabel,
+  colorScheme,
+}: ProgressBarInternalProps) => {
+  const { components } = useTheme();
+  const isReducedMotion = useReducedMotion();
+  const progress = useSharedValue(0);
+  const hasMountedRef = useRef(false);
+  const [trackWidth, setTrackWidth] = useState(0);
+
+  useEffect(() => {
+    const target = Math.max(0, Math.min(100, percent)) / 100;
+    if (isReducedMotion) {
+      progress.value = target;
+      hasMountedRef.current = true;
+      return;
+    }
+
+    if (!hasMountedRef.current) {
+      progress.value = target;
+      hasMountedRef.current = true;
+      return;
+    }
+
+    progress.value = withTiming(target, { duration: 300, easing: Easing.out(Easing.ease) });
+  }, [percent, isReducedMotion, progress]);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    width: trackWidth * progress.value,
+  }));
+
+  const indicatorColor =
+    colorScheme === 'success'
+      ? components.progressBar.progress.successColor
+      : colorScheme === 'danger'
+        ? components.progressBar.progress.dangerColor
+        : components.progressBar.progress.defaultColor;
+
+  const handleTrackLayout = (event: LayoutChangeEvent) => {
+    setTrackWidth(event.nativeEvent.layout.width);
+  };
+
+  return (
+    <View style={styles.container}>
+      {!hideLabel && (
+        <View style={styles.header}>
+          <BodyText size="md" weight="semibold" style={styles.label}>
+            {label}
+          </BodyText>
+          <BodyText size="md" style={styles.value}>
+            {valueText}
+          </BodyText>
+        </View>
+      )}
+      <View style={styles.track} onLayout={handleTrackLayout}>
+        {Platform.OS === 'web' ? (
+          <View
+            style={[
+              styles.indicator,
+              { width: `${Math.max(0, Math.min(100, percent))}%` },
+              { backgroundColor: indicatorColor },
+            ]}
+          />
+        ) : (
+          <Animated.View
+            style={[styles.indicator, animatedStyle, { backgroundColor: indicatorColor }]}
+          />
+        )}
+      </View>
+    </View>
+  );
+};
+
+ProgressBarLinear.displayName = 'ProgressBarLinear';
+
+const styles = StyleSheet.create(theme => ({
+  container: {
+    width: '100%',
+    gap: theme.components.progressBar.linear.gap,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: theme.components.progressBar.linear.label.gap,
+  },
+  label: {
+    flex: 1,
+  },
+  value: {
+    flexShrink: 0,
+    textAlign: 'right',
+  },
+  track: {
+    width: '100%',
+    height: theme.components.progressBar.linear.bar.height,
+    backgroundColor: theme.components.progressBar.barColor,
+    borderRadius: theme.components.progressBar.linear.bar.borderRadius,
+    overflow: 'hidden',
+  },
+  indicator: {
+    height: '100%',
+    borderRadius: theme.components.progressBar.linear.bar.borderRadius,
+    _web: {
+      height: '100%',
+    },
+  },
+}));
+
+export default ProgressBarLinear;

package/src/components/ProgressBar/index.ts

@@ -0,0 +1,7 @@
+export { default as ProgressBar } from './ProgressBar';
+export type {
+  ProgressBarColorScheme,
+  ProgressBarProps,
+  ProgressBarSize,
+  ProgressBarVariant,
+} from './ProgressBar.props';

package/src/components/index.ts

@@ -41,6 +41,7 @@ export * from './List';
 export * from './Menu';
 export * from './Modal';
 export * from './PillGroup';
+export * from './ProgressBar';
 export * from './ProgressStepper';
 export * from './Radio';
 export * from './RadioCard';