react-native-varia 0.0.1 → 0.2.0

package/bin/cli.js

@@ -1,4 +1,4 @@
-#!/usr/bin/env node
+#!/usr/bin/env node
 
 const { program } = require("commander");
 const path = require("path");
@@ -53,27 +53,44 @@ program
   .description("CLI para instalar componentes de react-native-varia")
   .version("1.0.0");
 
+// program
+//   .command('setup')
+//   .description('Copia mixins y utils a src/styles')
+//   .action(() => {
+//     const sourceDir = path.join(__dirname, '../lib');
+//     const destDir = path.join(process.cwd(), 'src/style');
+
+//     const filesToCopy = ['mixins', 'utils', 'types'];
+
+//     filesToCopy.forEach((file) => {
+//       const srcPath = path.join(sourceDir, `${file}.ts`);
+//       const destPath = path.join(destDir, `${file}.ts`);
+
+//       try {
+//         fs.ensureDirSync(destDir); // Asegura que el directorio de destino exista
+//         fs.copySync(srcPath, destPath, { overwrite: true });
+//         console.log(`✅ ${file}.tsx copiado a ${destPath}`);
+//       } catch (err) {
+//         console.error(`❌ Error al copiar ${file}.tsx: ${err.message}`);
+//       }
+//     });
+//   });
+
 program
   .command('setup')
-  .description('Copia mixins y utils a src/styles')
+  .description('Copia la carpeta varia a src/styles/varia')
   .action(() => {
-    const sourceDir = path.join(__dirname, '../lib');
-    const destDir = path.join(process.cwd(), 'src/style');
-
-    const filesToCopy = ['mixins', 'utils', 'types'];
-
-    filesToCopy.forEach((file) => {
-      const srcPath = path.join(sourceDir, `${file}.ts`);
-      const destPath = path.join(destDir, `${file}.ts`);
+    const sourceDir = path.join(__dirname, '../lib/varia'); // carpeta a copiar
+    const destParentDir = path.join(process.cwd(), 'src/style'); // carpeta donde irá "varia"
+    const destDir = path.join(destParentDir, 'varia'); // ruta final completa
 
-      try {
-        fs.ensureDirSync(destDir); // Asegura que el directorio de destino exista
-        fs.copySync(srcPath, destPath, { overwrite: true });
-        console.log(`✅ ${file}.tsx copiado a ${destPath}`);
-      } catch (err) {
-        console.error(`❌ Error al copiar ${file}.tsx: ${err.message}`);
-      }
-    });
+    try {
+      fs.ensureDirSync(destParentDir); // asegúrate de que exista src/style
+      fs.copySync(sourceDir, destDir, { overwrite: true });
+      console.log(`✅ Carpeta "varia" copiada a ${destDir}`);
+    } catch (err) {
+      console.error(`❌ Error al copiar la carpeta "varia": ${err.message}`);
+    }
   });
 
   program

package/lib/components/Badge.tsx

@@ -1,17 +1,20 @@
 import {Text, View, ViewStyle, StyleProp} from 'react-native'
-import {StyleSheet} from 'react-native-unistyles'
-import BadgeStyles from '../theme/Badge.recipe'
+import {StyleSheet, UnistylesVariants} from 'react-native-unistyles'
+import {BadgeStyles, BadgeDefaultVariants} from '../theme/Badge.recipe'
 import {ReactNode} from 'react'
+import {PalettesWithNestedKeys} from '../style/varia/types'
+import {HStack} from '../patterns'
 
 type VeritcalPosition = 'top' | 'bottom'
 type HorizontalPosition = 'left' | 'right'
 
-interface BadgeProps {
-  size: any
-  colorPalette: any
+type BadgeVariants = UnistylesVariants<typeof BadgeStyles>
+
+type BadgeProps = BadgeVariants & {
+  colorPalette?: PalettesWithNestedKeys
   content: number
   max?: number
-  children: ReactNode
+  children?: ReactNode
   x: HorizontalPosition
   y: VeritcalPosition
   backgroundColor?: string
@@ -20,51 +23,52 @@ interface BadgeProps {
 }
 
 const Badge = ({
-  size,
-  colorPalette,
+  colorPalette = 'accent',
+  variant = BadgeDefaultVariants.variant,
+  size = BadgeDefaultVariants.size,
   content,
   max,
   children,
   x,
   y,
-  backgroundColor,
-  color,
   mixins,
 }: BadgeProps) => {
   BadgeStyles.useVariants({
+    variant,
     size,
-    colorPalette,
   })
 
   const displayedContent = max && content > max ? `${max}+` : content
 
+  // @ts-ignore
+  const badgeSize = BadgeStyles.container(colorPalette).minWidth
+  const withoutChildrenSize = !children ? badgeSize : 'auto'
+
   return (
-    <View>
-      {children}
+    <HStack
+      style={{
+        position: 'relative',
+        minWidth: withoutChildrenSize,
+        height: withoutChildrenSize,
+      }}>
+      {children && children}
       <View
         testID="varia-badge"
         style={[
-          styles.badge(
-            x,
-            y,
-            // resolvedBackgroundColor,
-          ),
-          // style && styles.customStyle(style),
+          styles.badge(x, y),
+          BadgeStyles.container(colorPalette),
           mixins && mixins,
         ]}>
-        {/* <Text color={color} style={styles.text}> */}
-        <Text style={styles.text}>{displayedContent}</Text>
+        <Text style={[styles.text, BadgeStyles.text(colorPalette)]}>
+          {displayedContent}
+        </Text>
       </View>
-    </View>
+    </HStack>
   )
 }
 
 const styles = StyleSheet.create({
-  badge: (
-    x,
-    y,
-    // backgroundColor,
-  ) => ({
+  badge: (x, y) => ({
     position: 'absolute',
     [y]: 0,
     [x]: 0,
@@ -76,17 +80,12 @@ const styles = StyleSheet.create({
     paddingHorizontal: 6,
     zIndex: 1,
     borderRadius: 9999,
-    // backgroundColor,
     borderWidth: 1,
     alignItems: 'center',
     justifyContent: 'center',
   }),
   text: {
-    fontSize: 12,
     textAlign: 'center',
-    // variants: {
-    //   colorScheme: variants.colorScheme(theme),
-    // },
   },
   customStyle: style => ({
     ...style,

package/lib/components/Button.tsx

@@ -1,17 +1,17 @@
 import {StyleProp, Text, TouchableOpacity, ViewStyle} from 'react-native'
 import {StyleSheet, UnistylesVariants} from 'react-native-unistyles'
-import {ButtonStyles, ButtonTokens} from '../theme/Button.recipe'
-import {cloneElement, ReactElement, useMemo} from 'react'
+import {ButtonStyles, ButtonDefaultVariants} from '../theme/Button.recipe'
+import {useMemo} from 'react'
 import {IconWrapperProps} from './IconWrapper'
 import Spinner from './Spinner'
-// import Icon from "./Icon";
-// import { IconProps } from "../components/Icon";
-
-type ButtonVariants = UnistylesVariants<typeof ButtonStyles>
+import {PalettesWithNestedKeys} from '../style/varia/types'
 
 type TextAdjustment = 'singleLine' | 'multiline' | 'adjustToFit'
 
+type ButtonVariants = UnistylesVariants<typeof ButtonStyles>
+
 type ButtonProps = ButtonVariants & {
+  colorPalette?: PalettesWithNestedKeys
   text: string
   onPress: () => void
   loading?: boolean
@@ -19,21 +19,20 @@ type ButtonProps = ButtonVariants & {
   maxWidth?: number | string
   flex?: number
   textAdjustment?: TextAdjustment
-  // style?: StyleProp<ViewStyle>;
-  // mixins?: StyleProp<ViewStyle> | StyleProp<ViewStyle>[];
-  // customVariants?: CustomButtonVariants;
   icon?: {
     component: React.ComponentType<IconWrapperProps>
     position: 'left' | 'right'
     scale?: number
     rotation?: number
+    size?: number
   }
   mixins?: StyleProp<ViewStyle> | StyleProp<ViewStyle>[]
 }
 
 const Button = ({
-  size = ButtonTokens.defaultProps.size,
-  colorPalette = ButtonTokens.defaultProps.colorPalette,
+  colorPalette = 'accent',
+  size = ButtonDefaultVariants.size,
+  variant = ButtonDefaultVariants.variant,
   onPress,
   text,
   loading = false,
@@ -46,7 +45,8 @@ const Button = ({
 }: ButtonProps) => {
   ButtonStyles.useVariants({
     size,
-    colorPalette,
+    variant,
+    disabled,
   })
 
   const getTextProps = useMemo(
@@ -68,8 +68,6 @@ const Button = ({
     [textAdjustment],
   )
 
-  const heightAuto = textAdjustment === 'multiline' ? 'auto' : null
-
   const IconComponent = icon?.component
   const IconRendered = IconComponent ? (
     <IconComponent
@@ -78,7 +76,8 @@ const Button = ({
         scale: icon.scale,
         colorPalette,
         //@ts-ignore
-        color: ButtonStyles.text.color,
+        size: icon.size,
+        color: ButtonStyles.text(colorPalette).color,
       }}
     />
   ) : null
@@ -86,8 +85,8 @@ const Button = ({
   return (
     <TouchableOpacity
       style={[
-        styles.container(disabled, flex, maxWidth, heightAuto),
-        ButtonStyles.container,
+        styles.container(flex, maxWidth),
+        ButtonStyles.container(colorPalette),
         mixins && mixins,
       ]}
       onPress={onPress}
@@ -102,7 +101,9 @@ const Button = ({
       ) : (
         <>
           {icon?.position === 'left' && IconRendered}
-          <Text {...getTextProps()} style={[styles.text, ButtonStyles.text]}>
+          <Text
+            {...getTextProps()}
+            style={[styles.text, ButtonStyles.text(colorPalette)]}>
             {text}
           </Text>
           {icon?.position === 'right' && IconRendered}
@@ -113,7 +114,7 @@ const Button = ({
 }
 
 const styles = StyleSheet.create({
-  container: (disabled, flex, maxWidth, heightAuto) => ({
+  container: (flex, maxWidth) => ({
     flex,
     maxWidth,
     width: 'auto',
@@ -121,7 +122,6 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
     flexShrink: 1,
-    opacity: disabled ? 0.6 : 1,
   }),
   text: {
     textAlign: 'center',

package/lib/components/Checkbox.tsx

@@ -0,0 +1,95 @@
+import React, {useCallback} from 'react'
+import {View, Text, Pressable, StyleSheet} from 'react-native'
+import {UnistylesVariants} from 'react-native-unistyles'
+import {CheckboxDefaultVariants, CheckboxStyles} from '../theme/Checkbox.recipe'
+import {PalettesWithNestedKeys} from '../style/varia/types'
+import Svg, {Line} from 'react-native-svg'
+
+type CheckboxVariants = UnistylesVariants<typeof CheckboxStyles>
+
+type CheckboxProps = CheckboxVariants & {
+  children: React.ReactNode
+  colorPalette?: PalettesWithNestedKeys
+  checked: boolean
+  onCheckedChange: (checked: boolean) => void
+}
+
+function Checkbox({
+  children,
+  checked,
+  onCheckedChange,
+  colorPalette = 'accent',
+  variant = CheckboxDefaultVariants.variant,
+  size = CheckboxDefaultVariants.size,
+}: CheckboxProps) {
+  CheckboxStyles.useVariants({variant, size, checked})
+
+  const handlePress = useCallback(() => {
+    const newCheckedState = !checked
+    onCheckedChange(newCheckedState)
+  }, [checked, onCheckedChange])
+
+  const isChecked = checked
+
+  // @ts-ignore
+  const checkSize = CheckboxStyles.check(colorPalette).width
+  // @ts-ignore
+  const checkColor = CheckboxStyles.check(colorPalette).color
+
+  return (
+    <Pressable
+      style={[styles.container, CheckboxStyles.container(colorPalette)]}
+      onPress={handlePress}>
+      <View
+        style={[
+          styles.checkContainer,
+          CheckboxStyles.checkContainer(colorPalette),
+        ]}>
+        {isChecked && <Check size={checkSize} color={checkColor} />}
+      </View>
+      <Text style={CheckboxStyles.label(colorPalette)}>{children}</Text>
+    </Pressable>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  checkContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+})
+
+export {Checkbox}
+
+const Check = ({size, color}: {size: string; color: string}) => {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 13"
+      fill="none"
+      // @ts-ignore: svg props
+      xmlns="http://www.w3.org/2000/svg">
+      <Line
+        x1="1.64402"
+        y1="6.05591"
+        x2="7.41726"
+        y2="11.0638"
+        stroke={color}
+        strokeWidth="4"
+      />
+      <Line
+        x1="4.69272"
+        y1="11.1604"
+        x2="13.8594"
+        y2="1.99377"
+        stroke={color}
+        strokeWidth="4"
+      />
+    </Svg>
+  )
+}

package/lib/components/CircleProgress.tsx

@@ -1,5 +1,5 @@
-import {useEffect} from 'react'
-import {View, StyleSheet, type ColorValue} from 'react-native'
+import {useEffect, useLayoutEffect, useRef} from 'react'
+import {View, StyleSheet} from 'react-native'
 import Animated, {
   Easing,
   interpolate,
@@ -11,13 +11,15 @@ import Animated, {
 import Svg, {Circle, G} from 'react-native-svg'
 import {circleProgressTokens} from '../theme/CircleProgress.recipe'
 import {withUnistyles} from 'react-native-unistyles'
+import {resolveColor} from '../style/varia/utils'
+import {PalettesWithNestedKeys} from '../style/varia/types'
 
 const AnimatedCircle = Animated.createAnimatedComponent(Circle)
-
+const svgSize = 160
 interface CircleProgressProps {
-  type?: keyof typeof circleProgressTokens.variants.type
+  colorPalette?: PalettesWithNestedKeys
+  variant?: keyof typeof circleProgressTokens.variants.variant
   size?: keyof typeof circleProgressTokens.variants.size
-  circleSize?: number
   trackStrokeWidth?: number
   progressStrokeWidth?: number
   duration: number
@@ -27,13 +29,13 @@ interface CircleProgressProps {
   rotationDirection?: 'clockwise' | 'counterclockwise'
   children?: React.ReactNode
   fontSize?: number | undefined
-  colors: Record<string, ColorValue>
+  colors: any
 }
 
 const BaseCircleProgress = ({
-  type = circleProgressTokens.defaultProps.type,
+  colorPalette = 'accent',
+  variant = circleProgressTokens.defaultProps.variant,
   size = circleProgressTokens.defaultProps.size,
-  circleSize,
   trackStrokeWidth,
   progressStrokeWidth,
   duration,
@@ -44,40 +46,39 @@ const BaseCircleProgress = ({
   children,
   colors,
 }: CircleProgressProps) => {
+  const container = useRef<View>(null)
+
+  // useLayoutEffect(() => {
+  //   //@ts-ignore
+  //   container.current?.measure((x, y, width, height) => {
+  //     const pxPerUnit = width / svgSize
+  //     const strokeWidthSVG =
+  //       circleProgressTokens.variants.size[size]?.trackStrokeWidth * pxPerUnit
+  //   })
+  // }, [])
+
   const resolvedSize = circleProgressTokens.variants.size[size]
 
-  const tokenColorKey =
-    circleProgressTokens.variants.type[
-      type as keyof typeof circleProgressTokens.variants.type
-    ]
-  console.log('🚀 ~ tokenColorKey:', tokenColorKey)
-  const resolvedTrackColor =
-    tokenColorKey.trackColor in colors
-      ? colors[tokenColorKey.trackColor]
-      : tokenColorKey.trackColor
-
-  const resolvedProgressColor =
-    tokenColorKey.progressColor in colors
-      ? colors[tokenColorKey.progressColor]
-      : tokenColorKey.progressColor
-
-  console.log('🚀 ~ tokenColorKey:', tokenColorKey)
-
-  circleSize =
-    circleSize ||
-    circleProgressTokens.variants.size[
-      size as keyof typeof circleProgressTokens.variants.size
-    ]?.size
+  const colorValue = circleProgressTokens.variants.variant[variant]
+  const resolvedTrackColor = resolveColor(
+    colorValue.trackColor,
+    colors,
+    colorPalette,
+  )
+  const resolvedProgressColor = resolveColor(
+    colorValue.progressColor,
+    colors,
+    colorPalette,
+  )
 
   trackStrokeWidth = trackStrokeWidth || resolvedSize?.trackStrokeWidth
   progressStrokeWidth = progressStrokeWidth || resolvedSize?.progressStrokeWidth
 
   const radius =
-    (circleSize! - Math.max(trackStrokeWidth!, progressStrokeWidth!)) / 2 // Calculate radius based on circleSize and stroke width
-  const circumference = 2 * Math.PI * radius // Circumference of the circle
+    (svgSize! - Math.max(trackStrokeWidth!, progressStrokeWidth!)) / 2
+  const circumference = 2 * Math.PI * radius
 
-  // Dynamic center based on circleSize
-  const center = circleSize! / 2
+  const center = svgSize! / 2
 
   const progress = useSharedValue(duration)
 
@@ -95,58 +96,45 @@ const BaseCircleProgress = ({
         progressDirection === 'forward' ? duration : 0,
         progressDirection === 'forward' ? 0 : duration,
       ],
-      [circumference, 0], // Adjust dash offset from full (circumference) to 0
+      [circumference, 0],
       Extrapolation.CLAMP,
     )
     return {
       strokeDashoffset:
         rotationDirection === 'clockwise'
           ? rStrokeDashOffset
-          : -rStrokeDashOffset, // Negate for counterclockwise
+          : -rStrokeDashOffset,
     }
   })
 
   return (
-    <View style={styles.container}>
+    <View style={styles.container} ref={container}>
       <Svg
-        width="100%" // Ensures the SVG fills the parent width
-        height="100%" // Ensures the SVG maintains a square aspect ratio
-        viewBox={`0 0 ${circleSize} ${circleSize}`} // Dynamically adjust viewBox
+        width="100%"
+        height="100%"
+        viewBox={`0 0 ${svgSize} ${svgSize}`}
         preserveAspectRatio="xMidYMid meet">
         <G transform={`rotate(-90, ${center}, ${center})`}>
-          {/* Rotate to 12 o'clock */}
-          {/* Background Track */}
           <Circle
-            cx={center} // Dynamic center
-            cy={center} // Dynamic center
-            r={radius} // Dynamic radius
-            stroke={
-              trackColor ? trackColor : resolvedTrackColor
-              // (trackColor as ColorValue) ||
-              // (resolvedType.trackColor
-              //   ?.trackColor as ColorValue)
-            }
+            cx={center}
+            cy={center}
+            r={radius}
+            stroke={trackColor ? trackColor : resolvedTrackColor}
             strokeWidth={trackStrokeWidth || resolvedSize?.trackStrokeWidth}
             fill="transparent"
-            strokeDasharray={circumference} // Full circumference
+            strokeDasharray={circumference}
             strokeLinecap="round"
           />
-          {/* Progress Stroke */}
           <AnimatedCircle
-            cx={center} // Dynamic center
-            cy={center} // Dynamic center
-            r={radius} // Dynamic radius
-            stroke={
-              progressColor ? progressColor : resolvedProgressColor
-              // (progressColor as ColorValue) ||
-              // (resolvedType.progressColor
-              //   ?.progressColor as ColorValue)
-            }
+            cx={center}
+            cy={center}
+            r={radius}
+            stroke={progressColor ? progressColor : resolvedProgressColor}
             strokeWidth={
               progressStrokeWidth || resolvedSize?.progressStrokeWidth
             }
             fill="transparent"
-            strokeDasharray={circumference} // Full circumference
+            strokeDasharray={circumference}
             strokeLinecap="round"
             animatedProps={animatedProps}></AnimatedCircle>
         </G>
@@ -158,9 +146,8 @@ const BaseCircleProgress = ({
 
 const styles = StyleSheet.create({
   container: {
-    aspectRatio: 1, // Keeps a square aspect ratio
-    width: '100%', // Responsive width based on parent
-    // height: '100%', // Responsive height
+    aspectRatio: 1,
+    flex: 1,
   },
   childContainer: {
     position: 'absolute',
@@ -178,3 +165,6 @@ const CircleProgress = withUnistyles(BaseCircleProgress, theme => ({
 }))
 
 export default CircleProgress
+
+const clamp = (num: number, min: number, max: number) =>
+  Math.min(Math.max(num, min), max)