react-native-varia 0.2.3 → 0.3.0

package/bin/cli.js

@@ -1,11 +1,10 @@
-#!/usr/bin/env node
+#!/usr/bin/env node
 
 const { program } = require("commander");
 const inquirer = require("inquirer");
 const path = require("path");
 const fs = require("fs-extra");
 
-// 🔹 Dependencias entre componentes
 const COMPONENT_DEPENDENCIES = {
   Button: ["Spinner", "IconWrapper"],
   Field: ["Text"],
@@ -19,9 +18,18 @@ const ICON_DEPENDENCIES = {
   NumberInput: ["Plus", "Minus"],
 };
 
-/**
- * Obtiene todas las dependencias de un componente de forma recursiva.
- */
+const CONTEXT_DEPENDENCIES = {
+  Field: true
+};
+
+function copyContextComponentIfNeeded(component, destComponents, overwrite = true) {
+  if (!CONTEXT_DEPENDENCIES[component]) return;
+
+  const contextSrc = path.join(COMPONENTS_DIR, "context", `${component}.tsx`);
+  const contextDest = path.join(process.cwd(), destComponents, "context", `${component}.tsx`);
+  copyFile(contextSrc, contextDest, `Context de "${component}"`, overwrite);
+}
+
 function resolveDependencies(component, seen = new Set()) {
   if (seen.has(component)) return [];
   seen.add(component);
@@ -36,21 +44,14 @@ function resolveDependencies(component, seen = new Set()) {
   return [...new Set(allDeps)];
 }
 
-// Carpetas base
 const COMPONENTS_DIR = path.join(__dirname, "../lib/components");
 const THEME_DIR = path.join(__dirname, "../lib/theme");
 
-/**
- * Obtiene la lista de todos los componentes disponibles en la librería.
- */
 function getAvailableComponents() {
   if (!fs.existsSync(COMPONENTS_DIR)) return [];
   return fs.readdirSync(COMPONENTS_DIR).map((name) => path.parse(name).name);
 }
 
-/**
- * Copia un archivo desde origen a destino.
- */
 function copyFile(srcPath, destPath, label, overwrite = true) {
   if (!fs.existsSync(srcPath)) {
     console.warn(`⚠️ ${label} no encontrado: ${srcPath}`);
@@ -73,9 +74,6 @@ function copyFile(srcPath, destPath, label, overwrite = true) {
   }
 }
 
-/**
- * Copia un componente y su recipe.
- */
 function copyComponentAndRecipe(component, destComponents, destTheme, overwrite = true) {
   const componentSrc = path.join(COMPONENTS_DIR, `${component}.tsx`);
   const componentDest = path.join(process.cwd(), destComponents, `${component}.tsx`);
@@ -86,9 +84,6 @@ function copyComponentAndRecipe(component, destComponents, destTheme, overwrite
   copyFile(recipeSrc, recipeDest, `Recipe de "${component}"`, overwrite);
 }
 
-/**
- * Pregunta si se desea sobrescribir componentes existentes.
- */
 async function confirmOverwrite(existingComponents) {
   const { overwrite } = await inquirer.prompt([
     {
@@ -119,12 +114,10 @@ program
     const patternsDest = path.join(process.cwd(), "src/patterns");
 
     try {
-      // Copiar varia
       fs.ensureDirSync(path.dirname(variaDest));
       fs.copySync(variaSrc, variaDest, { overwrite: true });
       console.log(`✅ Carpeta "varia" copiada a ${variaDest}`);
 
-      // Copiar patterns
       fs.ensureDirSync(path.dirname(patternsDest));
       fs.copySync(patternsSrc, patternsDest, { overwrite: true });
       console.log(`✅ Carpeta "patterns" copiada a ${patternsDest}`);
@@ -233,9 +226,8 @@ program
       (c) => c.charAt(0).toUpperCase() + c.slice(1)
     );
 
-    // 🔹 Obtener dependencias totales
     const allComponents = new Set();
-    const componentToDeps = {}; // para saber qué depende de qué
+    const componentToDeps = {};
     for (const c of componentsCapitalized) {
       const deps = resolveDependencies(c);
       componentToDeps[c] = deps;
@@ -245,7 +237,6 @@ program
 
     const allComponentsArray = Array.from(allComponents);
 
-    // 🔹 Validar existencia
     const notFound = allComponentsArray.filter((c) => !available.includes(c));
     if (notFound.length > 0) {
       console.error(`❌ Los siguientes componentes no existen: ${notFound.join(", ")}`);
@@ -254,12 +245,18 @@ program
       process.exit(1);
     }
 
-    // 🔹 Preparar instalación
+    function copyContextComponentIfNeeded(component, destComponents, overwrite = true) {
+      if (!CONTEXT_DEPENDENCIES[component]) return;
+
+      const contextSrc = path.join(COMPONENTS_DIR, "context", `${component}.tsx`);
+      const contextDest = path.join(process.cwd(), destComponents, "context", `${component}.tsx`);
+      copyFile(contextSrc, contextDest, `Context de "${component}"`, overwrite);
+    }
+
     for (const mainComponent of componentsCapitalized) {
       const componentPath = path.join(process.cwd(), options.dest, `${mainComponent}.tsx`);
       let overwriteMain = true;
 
-      // Preguntar solo si el componente principal existe
       if (fs.existsSync(componentPath)) {
         const { overwrite } = await inquirer.prompt([
           {
@@ -276,10 +273,10 @@ program
         }
       }
 
-      // 🔹 Copiar componente principal
       copyComponentAndRecipe(mainComponent, options.dest, options.theme, overwriteMain);
 
-      // 🔹 Copiar dependencias (sin sobrescribir si existen)
+      copyContextComponentIfNeeded(mainComponent, options.dest, overwriteMain);
+
       const deps = componentToDeps[mainComponent] || [];
       for (const dep of deps) {
         const depPath = path.join(process.cwd(), options.dest, `${dep}.tsx`);
@@ -291,7 +288,6 @@ program
         copyComponentAndRecipe(dep, options.dest, options.theme, true);
       }
 
-      // 🔹 Copiar íconos dependientes
       const iconDeps = ICON_DEPENDENCIES[mainComponent] || [];
       if (iconDeps.length > 0) {
         console.log(`🎨 Añadiendo íconos requeridos por "${mainComponent}": ${iconDeps.join(", ")}`);
@@ -305,7 +301,6 @@ program
           copyIconTemplate(iconName, options.icons);
         }
 
-        // Asegurar que IconWrapper esté disponible
         ensureIconWrapper(options.dest, options.theme);
       }
     }
@@ -336,9 +331,6 @@ function copyIconTemplate(iconName, dest) {
   }
 }
 
-/**
- * Copia IconWrapper si no existe en la app
- */
 function ensureIconWrapper(destComponents, destTheme) {
   const wrapperComponentDest = path.join(process.cwd(), destComponents, "IconWrapper.tsx");
   const wrapperRecipeDest = path.join(process.cwd(), destTheme, "IconWrapper.recipe.tsx");
@@ -363,7 +355,6 @@ function ensureIconWrapper(destComponents, destTheme) {
   }
 }
 
-// Comando CLI: add-icon
 program
   .command("add-icon [iconName]")
   .description("Copia un icono basado en la plantilla Icon.tsx")
@@ -381,7 +372,6 @@ program
     const finalName = rawName.charAt(0).toUpperCase() + rawName.slice(1);
     const destPath = path.join(process.cwd(), options.dest, `${finalName}.tsx`);
 
-    // 🔹 Si ya existe, preguntar antes de sobrescribir
     if (fs.existsSync(destPath)) {
       const { overwrite } = await inquirer.prompt([
         {

package/lib/components/Accordion.tsx

@@ -0,0 +1,113 @@
+import React, {ReactNode, useState} from 'react'
+import {View, Pressable} from 'react-native'
+import Animated from 'react-native-reanimated'
+import {LinearTransition} from 'react-native-reanimated'
+import {StyleSheet} from 'react-native-unistyles'
+import Text from './Text'
+
+type AccordionItemProps = {
+  title: string
+  itemKey: string
+  children: ReactNode
+  isOpen?: boolean
+  onToggle?: () => void
+  scrollViewRef?: any
+}
+
+type AccordionGroupRootProps = {
+  children: ReactNode
+  defaultOpenKeys?: string[]
+  allowMultiple?: boolean
+}
+
+export const AccordionGroup = {
+  Root: AccordionGroupRoot,
+  Item: AccordionGroupItem,
+}
+
+function AccordionGroupRoot({
+  children,
+  defaultOpenKeys = [],
+  allowMultiple = false,
+}: AccordionGroupRootProps) {
+  const [openKeys, setOpenKeys] = useState<Set<string>>(
+    () => new Set(defaultOpenKeys),
+  )
+
+  const toggleItem = (key: string) => {
+    setOpenKeys(prev => {
+      const newSet = new Set(prev)
+      if (newSet.has(key)) {
+        newSet.delete(key)
+      } else {
+        if (allowMultiple) {
+          newSet.add(key)
+        } else {
+          return new Set([key])
+        }
+      }
+      return newSet
+    })
+  }
+
+  const items = React.Children.map(children, child => {
+    if (!React.isValidElement(child)) return child
+    const cp = child.props as AccordionItemProps
+    const key = cp.itemKey
+    const isOpen = openKeys.has(key)
+    return React.cloneElement(child, {
+      isOpen,
+      onToggle: () => toggleItem(key),
+    })
+  })
+
+  return <View style={styles.groupContainer}>{items}</View>
+}
+
+function AccordionGroupItem({
+  title,
+  children,
+  isOpen = false,
+  onToggle,
+}: AccordionItemProps) {
+  return (
+    <Animated.View
+      // Aquí aplicas la transición de layout
+      layout={LinearTransition.duration(150)}
+      style={styles.itemContainer}>
+      <Pressable onPress={onToggle} style={styles.header}>
+        <Text style={styles.headerText}>{title}</Text>
+      </Pressable>
+
+      {isOpen && (
+        <View style={styles.contentContainer}>
+          <View style={styles.innerContent}>{children}</View>
+        </View>
+      )}
+    </Animated.View>
+  )
+}
+
+const styles = StyleSheet.create({
+  groupContainer: {},
+  itemContainer: {
+    borderWidth: 1,
+    borderColor: '#ddd',
+    borderRadius: 6,
+    marginVertical: 8,
+    overflow: 'hidden', // importante para que no se vea contenido fuera
+  },
+  header: {
+    padding: 12,
+    backgroundColor: '#f0f0f0',
+  },
+  headerText: {
+    fontSize: 16,
+  },
+  contentContainer: {
+    // no necesitamos animar altura manual, lo hace el layout
+  },
+  innerContent: {
+    padding: 12,
+  },
+})

package/lib/components/Button.tsx

@@ -5,11 +5,18 @@ import {useMemo} from 'react'
 import {IconWrapperProps} from './IconWrapper'
 import Spinner, {SpinnerProps} from './Spinner'
 import {PalettesWithNestedKeys} from '../style/varia/types'
+import { getVariantValue } from '../style/varia/utils'
 
 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
@@ -27,6 +34,7 @@ type ButtonProps = ButtonVariants & {
     size?: number
   }
   mixins?: StyleProp<ViewStyle> | StyleProp<ViewStyle>[]
+  style?: StyleProp<ViewStyle>
 }
 
 const Button = ({
@@ -42,15 +50,17 @@ const Button = ({
   textAdjustment = 'singleLine',
   icon,
   mixins,
+  style,
 }: ButtonProps) => {
   ButtonStyles.useVariants({
     size,
     variant,
     disabled,
   })
+    console.log("🚀 ~ size:", size)
 
   const getTextProps = useMemo(
-    () => (): Record<string, any> => {
+    () => (): TextAdjustmentProps => {
       switch (textAdjustment) {
         case 'adjustToFit':
           return {adjustsFontSizeToFit: true, numberOfLines: 1}
@@ -68,6 +78,8 @@ const Button = ({
     [textAdjustment],
   )
 
+  const resolvedColor = getVariantValue(ButtonStyles.text(colorPalette), 'variant', variant, 'color')
+
   const IconComponent = icon?.component
   const IconRendered = IconComponent ? (
     <IconComponent
@@ -76,7 +88,7 @@ const Button = ({
         scale: icon.scale,
         colorPalette,
         size: icon.size,
-        color: ButtonStyles.text(colorPalette).color,
+        color: resolvedColor,
       }}
     />
   ) : null
@@ -87,13 +99,14 @@ const Button = ({
         styles.container(flex, maxWidth),
         ButtonStyles.container(colorPalette),
         mixins && mixins,
+        style,
       ]}
       onPress={onPress}
       disabled={disabled || loading}>
       {loading ? (
         <Spinner
           size={size as SpinnerProps['size']}
-          color={ButtonStyles.text(colorPalette).color}
+          color={resolvedColor}
         />
       ) : (
         <>

package/lib/components/Checkbox.tsx

@@ -4,6 +4,7 @@ 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'
+import { getVariantValue } from '../style/varia/utils'
 
 type CheckboxVariants = UnistylesVariants<typeof CheckboxStyles>
 
@@ -31,12 +32,16 @@ function Checkbox({
 
   const isChecked = checked
 
-  const checkStyle = CheckboxStyles.check(colorPalette) as {
-    width: string
-    color: string
-  }
-  const checkSize = checkStyle.width
-  const checkColor = checkStyle.color
+  // const checkStyle = CheckboxStyles.check(colorPalette) as {
+  //   width: string
+  //   color: string
+  // }
+  // const checkSize = checkStyle.width
+  // const checkColor = checkStyle.color
+
+  const checkColor = getVariantValue(CheckboxStyles.check(colorPalette), 'variant', variant, 'color')
+  const checkSize = getVariantValue(CheckboxStyles.check(colorPalette), 'size', size, 'width')
+  
 
   return (
     <Pressable
@@ -65,7 +70,7 @@ const styles = StyleSheet.create({
   },
 })
 
-export {Checkbox}
+export default Checkbox
 
 const Check = ({size, color}: {size: string; color: string}) => {
   return (

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,15 @@ 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)
@@ -22,17 +28,19 @@ interface CircleProgressProps {
   variant?: keyof typeof circleProgressTokens.variants.variant
   size?: keyof typeof circleProgressTokens.variants.size
   trackStrokeWidth?: number
-  progress: SharedValue<number> // ✅ Nuevo
-
+  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 = ({
@@ -49,6 +57,9 @@ const BaseCircleProgress = ({
   rotationDirection = 'clockwise',
   children,
   colors,
+  flex = 1,
+  width = '100%',
+  height,
 }: CircleProgressProps) => {
   const resolvedSize = circleProgressTokens.variants.size[size]
 
@@ -106,7 +117,7 @@ const BaseCircleProgress = ({
   })
 
   return (
-    <View style={styles.container}>
+    <View style={styles.container(flex, width, height)}>
       <Svg
         width="100%"
         height="100%"
@@ -143,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',
   },
@@ -163,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,43 +1,47 @@
-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) => ({
     flex: 1,
+    alignSelf: 'stretch',
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
-    maxHeight: axis === 'y' ? size : '100%',
-    maxWidth: axis === 'x' ? size : '100%',
+    maxWidth: axis === 'y' ? size : '100%',
+    maxHeight: axis === 'x' ? size : '100%',
     marginHorizontal: axis === 'x' ? margin : 0,
     marginVertical: axis === 'y' ? margin : 0,
   }),
-  divider: (color, size, axis) => ({
-    width: axis === 'x' ? size : '100%',
-    height: axis === 'y' ? size : '100%',
+  divider: (color, colorPalette, size, axis) => ({
+    width: axis === 'y' ? size : '100%',
+    height: axis === 'x' ? size : '100%',
     backgroundColor: color
-      ? color
-      : theme.colors.foreground,
+      ? resolveColor(color, theme.colors, colorPalette)
+      : theme.colors.fg.default,
   }),
-}));
+}))
 
-export default Divider;
+export default Divider