react-native-varia 0.2.2 → 0.2.4

package/lib/components/Button.tsx

@@ -10,9 +10,15 @@ type TextAdjustment = 'singleLine' | 'multiline' | 'adjustToFit'
 
 type ButtonVariants = UnistylesVariants<typeof ButtonStyles>
 
+interface TextAdjustmentProps {
+  adjustsFontSizeToFit?: boolean
+  numberOfLines?: number
+  ellipsizeMode?: 'tail' | 'head' | 'middle' | 'clip'
+}
+
 type ButtonProps = ButtonVariants & {
   colorPalette?: PalettesWithNestedKeys
-  text: string
+  text?: string
   onPress: () => void
   loading?: boolean
   disabled?: boolean
@@ -21,12 +27,13 @@ type ButtonProps = ButtonVariants & {
   textAdjustment?: TextAdjustment
   icon?: {
     component: React.ComponentType<IconWrapperProps>
-    position: 'left' | 'right'
+    position?: 'left' | 'right'
     scale?: number
     rotation?: number
     size?: number
   }
   mixins?: StyleProp<ViewStyle> | StyleProp<ViewStyle>[]
+  style?: StyleProp<ViewStyle>
 }
 
 const Button = ({
@@ -42,6 +49,7 @@ const Button = ({
   textAdjustment = 'singleLine',
   icon,
   mixins,
+  style,
 }: ButtonProps) => {
   ButtonStyles.useVariants({
     size,
@@ -50,7 +58,7 @@ const Button = ({
   })
 
   const getTextProps = useMemo(
-    () => (): Record<string, any> => {
+    () => (): TextAdjustmentProps => {
       switch (textAdjustment) {
         case 'adjustToFit':
           return {adjustsFontSizeToFit: true, numberOfLines: 1}
@@ -87,6 +95,7 @@ const Button = ({
         styles.container(flex, maxWidth),
         ButtonStyles.container(colorPalette),
         mixins && mixins,
+        style,
       ]}
       onPress={onPress}
       disabled={disabled || loading}>
@@ -98,11 +107,13 @@ const Button = ({
       ) : (
         <>
           {icon?.position === 'left' && IconRendered}
-          <Text
-            {...getTextProps()}
-            style={[styles.text, ButtonStyles.text(colorPalette)]}>
-            {text}
-          </Text>
+          {text && (
+            <Text
+              {...getTextProps()}
+              style={[styles.text, ButtonStyles.text(colorPalette)]}>
+              {text}
+            </Text>
+          )}
           {icon?.position === 'right' && IconRendered}
         </>
       )}

package/lib/components/CircleProgress.tsx

@@ -1,5 +1,5 @@
 import {useEffect} from 'react'
-import {View, StyleSheet} from 'react-native'
+import {TextStyle, View, ViewStyle} from 'react-native'
 import Animated, {
   Easing,
   interpolate,
@@ -10,9 +10,16 @@ import Animated, {
 } from 'react-native-reanimated'
 import Svg, {Circle, G} from 'react-native-svg'
 import {circleProgressTokens} from '../theme/CircleProgress.recipe'
-import {withUnistyles} from 'react-native-unistyles'
+import {withUnistyles, StyleSheet} from 'react-native-unistyles'
 import {resolveColor} from '../style/varia/utils'
-import {PalettesWithNestedKeys} from '../style/varia/types'
+import {
+  NestedColorsType,
+  PalettesWithNestedKeys,
+  progressDirection,
+  rotationDirection,
+  ThemeType,
+} from '../style/varia/types'
+import {SharedValue} from 'react-native-reanimated'
 
 const AnimatedCircle = Animated.createAnimatedComponent(Circle)
 const svgSize = 160
@@ -21,15 +28,19 @@ interface CircleProgressProps {
   variant?: keyof typeof circleProgressTokens.variants.variant
   size?: keyof typeof circleProgressTokens.variants.size
   trackStrokeWidth?: number
+  progress: SharedValue<number>
   progressStrokeWidth?: number
   duration: number
   trackColor?: string
   progressColor?: string
-  progressDirection?: 'forward' | 'reverse'
-  rotationDirection?: 'clockwise' | 'counterclockwise'
+  progressDirection?: progressDirection
+  rotationDirection?: rotationDirection
   children?: React.ReactNode
-  fontSize?: number | undefined
-  colors: any
+  fontSize?: TextStyle['fontSize']
+  colors: NestedColorsType
+  flex?: ViewStyle['flex']
+  width?: ViewStyle['width']
+  height?: ViewStyle['height']
 }
 
 const BaseCircleProgress = ({
@@ -37,6 +48,7 @@ const BaseCircleProgress = ({
   variant = circleProgressTokens.defaultProps.variant,
   size = circleProgressTokens.defaultProps.size,
   trackStrokeWidth,
+  progress,
   progressStrokeWidth,
   duration,
   trackColor,
@@ -45,6 +57,9 @@ const BaseCircleProgress = ({
   rotationDirection = 'clockwise',
   children,
   colors,
+  flex = 1,
+  width = '100%',
+  height,
 }: CircleProgressProps) => {
   const resolvedSize = circleProgressTokens.variants.size[size]
 
@@ -69,21 +84,26 @@ const BaseCircleProgress = ({
 
   const center = svgSize! / 2
 
-  const progress = useSharedValue(duration)
+  const internalProgress = useSharedValue(0)
 
   useEffect(() => {
-    progress.value = withTiming(0, {
-      duration: duration,
-      easing: Easing.linear,
-    })
-  }, [])
+    if (!progress) {
+      internalProgress.value = 0
+      internalProgress.value = withTiming(1, {
+        duration: duration,
+        easing: Easing.linear,
+      })
+    }
+  }, [progress, duration])
+
+  const progressValue = progress || internalProgress
 
   const animatedProps = useAnimatedProps(() => {
     const rStrokeDashOffset = interpolate(
-      progress.value,
+      progressValue.value,
       [
-        progressDirection === 'forward' ? duration : 0,
-        progressDirection === 'forward' ? 0 : duration,
+        progressDirection === 'forward' ? 0 : 1,
+        progressDirection === 'forward' ? 1 : 0,
       ],
       [circumference, 0],
       Extrapolation.CLAMP,
@@ -97,7 +117,7 @@ const BaseCircleProgress = ({
   })
 
   return (
-    <View style={styles.container}>
+    <View style={styles.container(flex, width, height)}>
       <Svg
         width="100%"
         height="100%"
@@ -134,16 +154,17 @@ const BaseCircleProgress = ({
 }
 
 const styles = StyleSheet.create({
-  container: {
+  container: (
+    flex: ViewStyle['flex'],
+    width: ViewStyle['width'],
+    height: ViewStyle['height'],
+  ) => ({
     aspectRatio: 1,
-    flex: 1,
-  },
+    flex,
+    maxWidth: width,
+    maxHeight: height,
+  }),
   childContainer: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
     justifyContent: 'center',
     alignItems: 'center',
   },
@@ -154,6 +175,3 @@ const CircleProgress = withUnistyles(BaseCircleProgress, theme => ({
 }))
 
 export default CircleProgress
-
-const clamp = (num: number, min: number, max: number) =>
-  Math.min(Math.max(num, min), max)

package/lib/components/Divider.tsx

@@ -1,24 +1,27 @@
-import { View } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-// import type { VariaThemeType } from '../style/theme';
+import {View} from 'react-native'
+import {StyleSheet} from 'react-native-unistyles'
+import {PalettesWithNestedKeys, ThemeColors} from '../style/varia/types'
+import {resolveColor} from '../style/varia/utils'
 
 const Divider = ({
   color,
   size = 1,
   axis = 'y',
   margin = 0,
+  colorPalette = 'accent',
 }: {
-  color?: string;
-  size?: number;
-  axis?: 'x' | 'y';
-  margin?: number;
+  color?: ThemeColors
+  size?: number
+  axis?: 'x' | 'y'
+  margin?: number
+  colorPalette?: PalettesWithNestedKeys
 }) => {
   return (
     <View style={styles.container(size, axis, margin)}>
-      <View style={[styles.divider(color, size, axis)]} />
+      <View style={[styles.divider(color, colorPalette, size, axis)]} />
     </View>
-  );
-};
+  )
+}
 
 const styles = StyleSheet.create(theme => ({
   container: (size, axis, margin) => ({
@@ -31,13 +34,13 @@ const styles = StyleSheet.create(theme => ({
     marginHorizontal: axis === 'x' ? margin : 0,
     marginVertical: axis === 'y' ? margin : 0,
   }),
-  divider: (color, size, axis) => ({
+  divider: (color, colorPalette, size, axis) => ({
     width: axis === 'x' ? size : '100%',
     height: axis === 'y' ? size : '100%',
     backgroundColor: color
-      ? color
-      : theme.colors.foreground,
+      ? resolveColor(color, theme.colors, colorPalette)
+      : theme.colors.fg.default,
   }),
-}));
+}))
 
-export default Divider;
+export default Divider