react-native-varia 0.0.1

package/README.md

@@ -0,0 +1,53 @@
+# React Native Varia
+
+A Component library based on **react-native-unistyles** that provides a CLI tool for React Native to effortlessly scaffold components, icons, styles, and layouts into your project.
+
+---
+
+## Installation
+
+1. Install the library as a development dependency:
+
+```bash
+yarn add -D react-native-varia
+```
+
+You also need to install [react-native-unistyles](https://www.unistyl.es/v3/start/getting-started) for advanced styling capabilities:
+
+2. Some components has reanimated dependency.
+   If you are going to use the next components:
+
+- Slider
+- SlidingDrawer
+- Slideshow
+- Switch
+- ReText
+- Modal
+
+Install react-native-reanimated and react-native-worklets.
+Check the [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/) docs.
+And install react-native-gesture-handler.
+Check the [react-native-gesture-handler](https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/installation) docs.
+
+3. Install react-native-svg.
+
+`yarn add react-native-svg`
+
+## ⚙️ Available Commands
+
+4. Add varia command to package.json
+
+```json
+"bin": {
+    "varia": "./node_modules/new-varia-lib/bin/cli.js"
+  }
+```
+
+Once installed, you can use the following commands via `npx varia`:
+
+| Command                          | Description                                                                      |
+| -------------------------------- | -------------------------------------------------------------------------------- |
+| `npx varia setup`                | Copies the mixins, types and utils files from **lib** into **src/style**.        |
+| `npx varia add <component_name>` | Copies the specified component from **lib/components** into your project.        |
+| `npx varia add-icon <icon_name>` | Copies the **Icon.tsx** template and renames it to the specified icon name.      |
+| `npx varia add-patterns`         | Copies the entire **lib/patterns** folder into **src/patterns** in your project. |

package/bin/cli.js

@@ -0,0 +1,200 @@
+#!/usr/bin/env node
+
+const { program } = require("commander");
+const path = require("path");
+const fs = require("fs-extra");
+
+// 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) {
+  if (!fs.existsSync(srcPath)) {
+    console.warn(`⚠️ ${label} no encontrado: ${srcPath}`);
+    return false;
+  }
+  try {
+    fs.ensureDirSync(path.dirname(destPath)); // crea carpeta destino si no existe
+    fs.copySync(srcPath, destPath, { overwrite: true, errorOnExist: false });
+    console.log(`✅ ${label} copiado a: ${destPath}`);
+    return true;
+  } catch (err) {
+    console.error(`❌ No se pudo copiar ${label}: ${err.message}`);
+    return false;
+  }
+}
+
+/**
+ * Copia un componente y su recipe.
+ */
+function copyComponentAndRecipe(component, destComponents, destTheme) {
+  const componentSrc = path.join(COMPONENTS_DIR, `${component}.tsx`);
+  const componentDest = path.join(process.cwd(), destComponents, `${component}.tsx`);
+  copyFile(componentSrc, componentDest, `Componente "${component}"`);
+
+  const recipeSrc = path.join(THEME_DIR, `${component}.recipe.tsx`);
+  const recipeDest = path.join(process.cwd(), destTheme, `${component}.recipe.tsx`);
+  copyFile(recipeSrc, recipeDest, `Recipe de "${component}"`);
+}
+
+program
+  .name("varia")
+  .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('add-patterns')
+  .description('Copia la carpeta lib/patterns a src/patterns')
+  .action(() => {
+    const sourceDir = path.join(__dirname, '../lib/patterns');
+    const destDir = path.join(process.cwd(), 'src/patterns');
+
+    try {
+      fs.ensureDirSync(destDir); // Asegura que el directorio de destino exista
+      fs.copySync(sourceDir, destDir, { overwrite: true });
+      console.log('✅ Carpeta patterns copiada a src/patterns');
+    } catch (err) {
+      console.error(`❌ Error al copiar patterns: ${err.message}`);
+    }
+  });
+
+program
+  .command("add <components...>")
+  .description("Copia uno o más componentes y sus recipes desde la librería a tu proyecto")
+  .option("-d, --dest <path>", "Ruta de destino de componentes", "src/components")
+  .option("-t, --theme <path>", "Ruta de destino de recipes", "src/theme")
+  .action((components, options) => {
+    const available = getAvailableComponents();
+    const componentsCapitalized = components.map(
+      (c) => c.charAt(0).toUpperCase() + c.slice(1)
+    );
+
+    const notFound = componentsCapitalized.filter((c) => !available.includes(c));
+    if (notFound.length > 0) {
+      console.error(`❌ Los siguientes componentes no existen: ${notFound.join(", ")}`);
+      console.log("\n📦 Componentes disponibles:");
+      available.forEach((name) => console.log(`  - ${name}`));
+      process.exit(1);
+    }
+
+    componentsCapitalized.forEach((component) => {
+      copyComponentAndRecipe(component, options.dest, options.theme);
+    });
+  });
+
+  
+  function copyIconTemplate(iconName, dest) {
+    const srcPath = path.join(COMPONENTS_DIR, "Icon.tsx"); // plantilla
+    const destPath = path.join(process.cwd(), dest, `${iconName}.tsx`); // nombre final
+  
+    if (!fs.existsSync(srcPath)) {
+      console.error(`❌ Plantilla de icono no encontrada en: ${srcPath}`);
+      return false;
+    }
+  
+    try {
+      // Leemos el contenido de la plantilla
+      let content = fs.readFileSync(srcPath, "utf-8");
+  
+      // Reemplazamos el nombre del componente (IconName → el nombre deseado)
+      content = content.replace(/\bIconName\b/g, iconName);
+  
+      fs.ensureDirSync(path.dirname(destPath)); // crear carpeta si no existe
+      fs.writeFileSync(destPath, content);
+  
+      console.log(`✅ Icono "${iconName}" copiado a: ${destPath}`);
+      return true;
+    } catch (err) {
+      console.error(`❌ No se pudo copiar el icono "${iconName}": ${err.message}`);
+      return false;
+    }
+  }
+  
+  /**
+   * 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");
+  
+    if (fs.existsSync(wrapperComponentDest)) {
+      return; // ya existe
+    }
+  
+    const wrapperComponentSrc = path.join(COMPONENTS_DIR, "IconWrapper.tsx");
+    const wrapperRecipeSrc = path.join(THEME_DIR, "IconWrapper.recipe.tsx");
+  
+    // Copiar componente y recipe
+    if (fs.existsSync(wrapperComponentSrc)) {
+      fs.ensureDirSync(path.dirname(wrapperComponentDest));
+      fs.copySync(wrapperComponentSrc, wrapperComponentDest, { overwrite: true, errorOnExist: false });
+      console.log(`✅ IconWrapper copiado a: ${wrapperComponentDest}`);
+    }
+  
+    if (fs.existsSync(wrapperRecipeSrc)) {
+      fs.ensureDirSync(path.dirname(wrapperRecipeDest));
+      fs.copySync(wrapperRecipeSrc, wrapperRecipeDest, { overwrite: true, errorOnExist: false });
+      console.log(`✅ IconWrapper recipe copiado a: ${wrapperRecipeDest}`);
+    }
+  }
+  
+  // Comando CLI
+  program
+    .command("add-icon [iconName]")
+    .description("Copia un icono basado en la plantilla Icon.tsx")
+    .option("-n, --name <iconName>", "Nombre del icono")
+    .option("-d, --dest <path>", "Ruta de destino de iconos", "src/icons")
+    .option("-c, --components <path>", "Ruta de destino de componentes", "src/components")
+    .option("-t, --theme <path>", "Ruta de destino de recipes", "src/theme")
+    .action((iconNameArg, options) => {
+      const rawName = iconNameArg || options.name;
+      if (!rawName) {
+        console.error("❌ Debes indicar el nombre del icono como argumento o con --name");
+        process.exit(1);
+      }
+  
+      // Capitalizamos primera letra
+      const finalName = rawName.charAt(0).toUpperCase() + rawName.slice(1);
+  
+      copyIconTemplate(finalName, options.dest);
+  
+      // Aseguramos IconWrapper
+      ensureIconWrapper(options.components, options.theme);
+    });
+  
+
+program.parse(process.argv);

package/lib/components/Badge.tsx

@@ -0,0 +1,96 @@
+import {Text, View, ViewStyle, StyleProp} from 'react-native'
+import {StyleSheet} from 'react-native-unistyles'
+import BadgeStyles from '../theme/Badge.recipe'
+import {ReactNode} from 'react'
+
+type VeritcalPosition = 'top' | 'bottom'
+type HorizontalPosition = 'left' | 'right'
+
+interface BadgeProps {
+  size: any
+  colorPalette: any
+  content: number
+  max?: number
+  children: ReactNode
+  x: HorizontalPosition
+  y: VeritcalPosition
+  backgroundColor?: string
+  color?: string
+  mixins?: StyleProp<ViewStyle>
+}
+
+const Badge = ({
+  size,
+  colorPalette,
+  content,
+  max,
+  children,
+  x,
+  y,
+  backgroundColor,
+  color,
+  mixins,
+}: BadgeProps) => {
+  BadgeStyles.useVariants({
+    size,
+    colorPalette,
+  })
+
+  const displayedContent = max && content > max ? `${max}+` : content
+
+  return (
+    <View>
+      {children}
+      <View
+        testID="varia-badge"
+        style={[
+          styles.badge(
+            x,
+            y,
+            // resolvedBackgroundColor,
+          ),
+          // style && styles.customStyle(style),
+          mixins && mixins,
+        ]}>
+        {/* <Text color={color} style={styles.text}> */}
+        <Text style={styles.text}>{displayedContent}</Text>
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  badge: (
+    x,
+    y,
+    // backgroundColor,
+  ) => ({
+    position: 'absolute',
+    [y]: 0,
+    [x]: 0,
+    transform: [
+      {translateY: y === 'top' ? '-30%' : '30%'},
+      {translateX: x === 'left' ? '-30%' : '30%'},
+    ],
+    paddingVertical: 1,
+    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,
+  }),
+})
+
+export default Badge

package/lib/components/Button.tsx

@@ -0,0 +1,131 @@
+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 {IconWrapperProps} from './IconWrapper'
+import Spinner from './Spinner'
+// import Icon from "./Icon";
+// import { IconProps } from "../components/Icon";
+
+type ButtonVariants = UnistylesVariants<typeof ButtonStyles>
+
+type TextAdjustment = 'singleLine' | 'multiline' | 'adjustToFit'
+
+type ButtonProps = ButtonVariants & {
+  text: string
+  onPress: () => void
+  loading?: boolean
+  disabled?: boolean
+  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
+  }
+  mixins?: StyleProp<ViewStyle> | StyleProp<ViewStyle>[]
+}
+
+const Button = ({
+  size = ButtonTokens.defaultProps.size,
+  colorPalette = ButtonTokens.defaultProps.colorPalette,
+  onPress,
+  text,
+  loading = false,
+  disabled = false,
+  maxWidth = '100%',
+  flex = 0,
+  textAdjustment = 'singleLine',
+  icon,
+  mixins,
+}: ButtonProps) => {
+  ButtonStyles.useVariants({
+    size,
+    colorPalette,
+  })
+
+  const getTextProps = useMemo(
+    () => (): Record<string, any> => {
+      switch (textAdjustment) {
+        case 'adjustToFit':
+          return {adjustsFontSizeToFit: true, numberOfLines: 1}
+        case 'multiline':
+          return {adjustsFontSizeToFit: false, numberOfLines: undefined}
+        case 'singleLine':
+        default:
+          return {
+            adjustsFontSizeToFit: false,
+            numberOfLines: 1,
+            ellipsizeMode: 'tail',
+          }
+      }
+    },
+    [textAdjustment],
+  )
+
+  const heightAuto = textAdjustment === 'multiline' ? 'auto' : null
+
+  const IconComponent = icon?.component
+  const IconRendered = IconComponent ? (
+    <IconComponent
+      {...{
+        rotation: icon.rotation,
+        scale: icon.scale,
+        colorPalette,
+        //@ts-ignore
+        color: ButtonStyles.text.color,
+      }}
+    />
+  ) : null
+
+  return (
+    <TouchableOpacity
+      style={[
+        styles.container(disabled, flex, maxWidth, heightAuto),
+        ButtonStyles.container,
+        mixins && mixins,
+      ]}
+      onPress={onPress}
+      disabled={disabled || loading}>
+      {loading ? (
+        <Spinner
+          //@ts-ignore
+          size={ButtonStyles.text.fontSize}
+          //@ts-ignore
+          color={ButtonStyles.text.color}
+        />
+      ) : (
+        <>
+          {icon?.position === 'left' && IconRendered}
+          <Text {...getTextProps()} style={[styles.text, ButtonStyles.text]}>
+            {text}
+          </Text>
+          {icon?.position === 'right' && IconRendered}
+        </>
+      )}
+    </TouchableOpacity>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: (disabled, flex, maxWidth, heightAuto) => ({
+    flex,
+    maxWidth,
+    width: 'auto',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexShrink: 1,
+    opacity: disabled ? 0.6 : 1,
+  }),
+  text: {
+    textAlign: 'center',
+  },
+})
+
+export default Button

package/lib/components/CircleProgress.tsx

@@ -0,0 +1,180 @@
+import {useEffect} from 'react'
+import {View, StyleSheet, type ColorValue} from 'react-native'
+import Animated, {
+  Easing,
+  interpolate,
+  useAnimatedProps,
+  useSharedValue,
+  withTiming,
+  Extrapolation,
+} from 'react-native-reanimated'
+import Svg, {Circle, G} from 'react-native-svg'
+import {circleProgressTokens} from '../theme/CircleProgress.recipe'
+import {withUnistyles} from 'react-native-unistyles'
+
+const AnimatedCircle = Animated.createAnimatedComponent(Circle)
+
+interface CircleProgressProps {
+  type?: keyof typeof circleProgressTokens.variants.type
+  size?: keyof typeof circleProgressTokens.variants.size
+  circleSize?: number
+  trackStrokeWidth?: number
+  progressStrokeWidth?: number
+  duration: number
+  trackColor?: string
+  progressColor?: string
+  progressDirection?: 'forward' | 'reverse'
+  rotationDirection?: 'clockwise' | 'counterclockwise'
+  children?: React.ReactNode
+  fontSize?: number | undefined
+  colors: Record<string, ColorValue>
+}
+
+const BaseCircleProgress = ({
+  type = circleProgressTokens.defaultProps.type,
+  size = circleProgressTokens.defaultProps.size,
+  circleSize,
+  trackStrokeWidth,
+  progressStrokeWidth,
+  duration,
+  trackColor,
+  progressColor,
+  progressDirection = 'forward',
+  rotationDirection = 'clockwise',
+  children,
+  colors,
+}: CircleProgressProps) => {
+  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
+
+  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
+
+  // Dynamic center based on circleSize
+  const center = circleSize! / 2
+
+  const progress = useSharedValue(duration)
+
+  useEffect(() => {
+    progress.value = withTiming(0, {
+      duration: duration,
+      easing: Easing.linear,
+    })
+  }, [])
+
+  const animatedProps = useAnimatedProps(() => {
+    const rStrokeDashOffset = interpolate(
+      progress.value,
+      [
+        progressDirection === 'forward' ? duration : 0,
+        progressDirection === 'forward' ? 0 : duration,
+      ],
+      [circumference, 0], // Adjust dash offset from full (circumference) to 0
+      Extrapolation.CLAMP,
+    )
+    return {
+      strokeDashoffset:
+        rotationDirection === 'clockwise'
+          ? rStrokeDashOffset
+          : -rStrokeDashOffset, // Negate for counterclockwise
+    }
+  })
+
+  return (
+    <View style={styles.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
+        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)
+            }
+            strokeWidth={trackStrokeWidth || resolvedSize?.trackStrokeWidth}
+            fill="transparent"
+            strokeDasharray={circumference} // Full 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)
+            }
+            strokeWidth={
+              progressStrokeWidth || resolvedSize?.progressStrokeWidth
+            }
+            fill="transparent"
+            strokeDasharray={circumference} // Full circumference
+            strokeLinecap="round"
+            animatedProps={animatedProps}></AnimatedCircle>
+        </G>
+      </Svg>
+      <View style={styles.childContainer}>{children}</View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    aspectRatio: 1, // Keeps a square aspect ratio
+    width: '100%', // Responsive width based on parent
+    // height: '100%', // Responsive height
+  },
+  childContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+})
+
+const CircleProgress = withUnistyles(BaseCircleProgress, theme => ({
+  colors: theme.colors,
+}))
+
+export default CircleProgress

package/lib/components/Divider.tsx

@@ -0,0 +1,43 @@
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+// import type { VariaThemeType } from '../style/theme';
+
+const Divider = ({
+  color,
+  size = 1,
+  axis = 'y',
+  margin = 0,
+}: {
+  color?: string;
+  size?: number;
+  axis?: 'x' | 'y';
+  margin?: number;
+}) => {
+  return (
+    <View style={styles.container(size, axis, margin)}>
+      <View style={[styles.divider(color, size, axis)]} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create(theme => ({
+  container: (size, axis, margin) => ({
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    maxHeight: axis === 'y' ? size : '100%',
+    maxWidth: 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%',
+    backgroundColor: color
+      ? color
+      : theme.colors.foreground,
+  }),
+}));
+
+export default Divider;