react-native-varia 0.0.1

package/lib/theme/Slideshow.recipe.tsx

@@ -0,0 +1,142 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+export const SlideshowTokens = {
+  defaultProps: {
+    colorScheme: 'primary',
+    spacing: 'default',
+    animation: 'defaultSpring',
+  },
+  variants: {
+    animation: {
+      defaultSpring: {
+        type: 'withSpring',
+        props: {
+          damping: 20,
+          stiffness: 200,
+          mass: 1,
+          overshootClamping: true,
+        },
+      },
+      slowSpring: {
+        type: 'withSpring',
+        props: {
+          damping: 200,
+          stiffness: 20,
+          mass: 10,
+          overshootClamping: true,
+        },
+      },
+      defaultTiming: {
+        type: 'withTiming',
+        props: {
+          duration: 300,
+        },
+      },
+    }
+  }
+} as const
+
+export const SlideshowStyles = StyleSheet.create((theme) => ({
+  container: {
+    variants: {
+      colorPalette: {
+        primary: {
+          backgroundColor: theme.colors.background,
+          borderColor: theme.colors.foreground,
+          borderWidth: 0,
+          borderRadius: 0,
+        },
+        secondary: {
+          backgroundColor: theme.colors.background,
+          borderColor: 'blue',
+          borderWidth: 5,
+          borderRadius: 20,
+        },
+        tertiary: {
+          backgroundColor: theme.colors.foreground,
+          borderColor: theme.colors.foreground,
+          borderWidth: 0,
+          borderRadius: 0,
+        },
+      },
+      spacing: {
+        // default: {
+        //   margin: 10,
+        // },
+        // large: {
+        //   margin: 20,
+        // },
+        // small: {
+        //   margin: 5,
+        // },
+        // none: {
+        //   margin: 0,
+        // },
+      },
+    }
+  },
+    // animation: {
+    //   defaultSpring: {
+    //     type: 'withSpring',
+    //     props: {
+    //       damping: 20,
+    //       stiffness: 200,
+    //       mass: 1,
+    //       overshootClamping: true,
+    //     },
+    //   },
+    //   slowSpring: {
+    //     type: 'withSpring',
+    //     props: {
+    //       damping: 200,
+    //       stiffness: 20,
+    //       mass: 10,
+    //       overshootClamping: true,
+    //     },
+    //   },
+    //   defaultTiming: {
+    //     type: 'withTiming',
+    //     props: {
+    //       duration: 300,
+    //     },
+    //   },
+    // },
+  slideContainer: {
+    variants: {
+      colorPalette: {
+        primary: {
+          backgroundColor: 'transparent',
+          borderWidth: 0,
+          borderRadius: 0,
+          borderColor: 'transparent',
+        },
+        secondary: {
+          backgroundColor: 'transparent',
+          borderWidth: 0,
+          borderRadius: 20,
+          borderColor: 'transparent',
+        },
+        tertiary: {
+          backgroundColor: "transparent",
+          borderWidth: 5,
+          borderRadius: 20,
+          borderColor: 'black',
+        },
+      },
+      spacing: {
+        default: {
+          margin: 10,
+        },
+        large: {
+          margin: 20,
+        },
+        small: {
+          margin: 5,
+        },
+        none: {
+          margin: 0,
+        },
+      },
+    },
+  },
+}));

package/lib/theme/SlidingDrawer.recipe.tsx

@@ -0,0 +1,91 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+export const SlidingDrawerTokens = {
+  defaultProps: {
+    colorScheme: 'primary',
+    animation: "defaultSpring",
+    backgroundColor: "white",
+    borderRadius: 16,
+    boxShadow: '0px -10px 20px rgba(100, 0, 250, 0.6)',
+  },
+  variants: {
+    animation: {
+      defaultSpring: {
+        type: 'withSpring' as const,
+        props: {
+          damping: 20,
+          stiffness: 200,
+          mass: 1,
+          overshootClamping: true,
+        },
+      },
+      slowSpring: {
+        type: 'withSpring' as const,
+        props: {
+          damping: 200,
+          stiffness: 20,
+          mass: 10,
+          overshootClamping: true,
+        },
+      },
+      defaultTiming: {
+        type: 'withTiming' as const,
+        props: {
+          duration: 1000,
+        },
+      }
+    },
+  }
+}
+export const SlidingDrawerStyles = StyleSheet.create((theme) => ({
+  // defaultProps: {
+  //     colorScheme: 'primary',
+  //     animation: "defaultSpring",
+  //     backgroundColor: "white",
+  //     borderRadius: 16,
+  //     boxShadow: '0px -10px 20px rgba(100, 0, 250, 0.6)',
+  //   },
+  container: {
+    variants: {
+      colorPalette: {
+        primary: {
+          backgroundColor: theme.colors.accentBackground,
+          // boxShadow: '0px -10px 20px #000000',
+        },
+        secondary: {
+          backgroundColor: "white",
+          // boxShadow: `0px -10px 20px lime`,
+        },
+        tertiary: {
+          backgroundColor: 'lime',
+        },
+      },
+      // animation: {
+      //   defaultSpring: {
+      //     type: 'withSpring' as const,
+      //     props: {
+      //       damping: 20,
+      //       stiffness: 200,
+      //       mass: 1,
+      //       overshootClamping: true,
+      //     },
+      //   },
+      //   slowSpring: {
+      //     type: 'withSpring' as const,
+      //     props: {
+      //       damping: 200,
+      //       stiffness: 20,
+      //       mass: 10,
+      //       overshootClamping: true,
+      //     },
+      //   },
+      //   defaultTiming: {
+      //     type: 'withTiming' as const,
+      //     props: {
+      //       duration: 1000,
+      //     },
+      //   },
+      // },
+    }
+  }
+}));

package/lib/theme/Spinner.recipe.tsx

@@ -0,0 +1,8 @@
+import {SliderTokensType} from '../style/types'
+
+export const SpinnerTokens = {
+  defaultProps: {
+    size: 24,
+    color: 'categoryOrange',
+  },
+} as SliderTokensType

package/lib/theme/Switch.recipe.tsx

@@ -0,0 +1,70 @@
+import { StyleSheet } from 'react-native-unistyles'
+
+const SwitchTokens = {
+  track: {
+    variants: {
+      size: {
+        xs: {height: 30, width: 200},
+        md: {height: 60, width: 250},
+        lg: {height: 40, width: 60},
+      },
+      colorPalette: {
+        primary: {
+          enabled: {backgroundColor: 'background'},
+          disabled: {backgroundColor: 'foreground'},
+          borderColor: 'white',
+          borderWidth: 1,
+        },
+        secondary: {
+          enabled: {backgroundColor: 'foreground'},
+          disabled: {backgroundColor: 'background'},
+          borderColor: 'white',
+          borderWidth: 15,
+        },
+      },
+    },
+  },
+  thumb: {
+    variants: {
+      size: {
+        xs: {height: 20, width: 20},
+        md: {height: 50, width: 50},
+        lg: {height: 30, width: 30},
+      },
+      colorPalette: {
+        primary: {
+          enabled: {backgroundColor: 'foreground'},
+          disabled: {backgroundColor: 'background'},
+        },
+        secondary: {
+          enabled: {backgroundColor: 'background'},
+          disabled: {backgroundColor: 'foreground'},
+        },
+      },
+    },
+  },
+}
+
+export {SwitchTokens};
+const SwitchStyles = StyleSheet.create(theme => ({
+  track: {
+    variants: {
+      size: {
+        xs: {height: 30, width: '100%'},
+        md: {height: 60, width: '100%'},
+        lg: {height: 40, width: '100%'},
+      }
+    },
+  },
+  thumb: {
+    variants: {
+      size: {
+        xs: {height: 20, width: 20},
+        md: {height: 50, width: 50},
+        lg: {height: 30, width: 80},
+      }
+    }
+  }
+}))
+
+export {SwitchStyles};

package/lib/theme/Text.recipe.tsx

@@ -0,0 +1,10 @@
+import {StyleSheet} from 'react-native-unistyles'
+
+const textStyles = StyleSheet.create(theme => ({
+  text: {
+    color: theme.colors.foreground,
+    // fontSize: 100,
+  },
+}))
+
+export default textStyles

package/lib/types.ts

@@ -0,0 +1,70 @@
+import { darkTheme, lightTheme } from "./themes";
+
+const themes = {
+  light: lightTheme,
+  dark: darkTheme,
+};
+
+export type ColorsType = (typeof themes)[keyof typeof themes]['colors'];
+
+export type ThemeType = (typeof themes)[keyof typeof themes];
+
+export type TextSemanticSizes =
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'h5'
+  | 'h6'
+  | 'h7'
+  | 'h8'
+  | 'h9'
+  | 'body';
+
+  export type directions =
+  | 'to top'
+  | 'to bottom'
+  | 'to left'
+  | 'to right'
+  | 'to top left'
+  | 'to top right'
+  | 'to bottom left'
+  | 'to bottom right';
+
+type ColorName = keyof ColorsType;
+
+type LooseString<T extends string> = T | (string & {});
+
+export type ThemeColors = LooseString<ColorName>;
+
+export function createGradientTokens<
+  const CP extends Record<string, { startColor: ThemeColors; endColor: ThemeColors }>
+>(tokens: {
+  defaultProps: { colorPalette: keyof CP; direction: directions };
+  variants: {
+    direction: Record<directions, { x1: number; y1: number; x2: number; y2: number }>;
+    colorPalette: CP;
+  };
+}) {
+  return tokens;
+}
+
+type SVGSize = {
+  width: number;
+  height: number;
+  viewBoxWidth: number;
+  viewBoxHeight: number;
+}
+
+export function createIconTokens<
+  const CP extends Record<string, { color: ThemeColors }>
+>(tokens: {
+  defaultProps: { colorPalette: keyof CP; size: any, scale: number };
+  variants: {
+    size: Record<string, SVGSize>;
+    colorPalette: CP;
+  };
+}) {
+  return tokens;
+}
+

package/lib/utils.ts

@@ -0,0 +1,80 @@
+export function hexToRgba(hex: string, alpha: number = 1) {
+  // Remove the leading '#' if present
+  hex = hex.replace(/^#/, '');
+
+  // Parse the red, green, and blue components
+  let r, g, b, a;
+
+  if (hex.length === 6) {
+    r = parseInt(hex.slice(0, 2), 16);
+    g = parseInt(hex.slice(2, 4), 16);
+    b = parseInt(hex.slice(4, 6), 16);
+    a = alpha; // Use the provided alpha value
+  } else if (hex.length === 8) {
+    r = parseInt(hex.slice(0, 2), 16);
+    g = parseInt(hex.slice(2, 4), 16);
+    b = parseInt(hex.slice(4, 6), 16);
+    a = parseInt(hex.slice(6, 8), 16) / 255; // Normalize alpha to 0-1
+  } else {
+    throw new Error('Invalid hex color format. Use #RRGGBB or #RRGGBBAA.');
+  }
+
+  return `rgba(${r}, ${g}, ${b}, ${a})`;
+} 
+
+import {Dimensions, PixelRatio} from 'react-native';
+import { ThemeColors } from '../src/style/types';
+
+const {width, height} = Dimensions.get('window');
+
+const guidelineBaseWidth = 375;
+const guidelineBaseHeight = 667;
+
+const scale = (size: number): number => (width / guidelineBaseWidth) * size;
+const verticalScale = (size: number): number =>
+  (height / guidelineBaseHeight) * size;
+const moderateScale = (size: number, factor: number = 0.5): number =>
+  size + (scale(size) - size) * factor;
+
+// FONT SCALING
+// Usage: nf(16)
+const scaleNew = height / 667;
+const normalizeFont = (size: number): number => {
+  const newSize = size * scaleNew;
+  return Math.round(PixelRatio.roundToNearestPixel(newSize));
+};
+
+// DYNAMIC DIMENSION CONSTANTS
+// Usage: wp(5), hp(20)
+const widthPercentageToDP = (widthPercent: string): number => {
+  // Convert string input to decimal number
+  const elemWidth = parseFloat(widthPercent);
+  return PixelRatio.roundToNearestPixel((width * elemWidth) / 100);
+};
+const heightPercentageToDP = (heightPercent: string): number => {
+  // Convert string input to decimal number
+  const elemHeight = parseFloat(heightPercent);
+  return PixelRatio.roundToNearestPixel((height * elemHeight) / 100);
+};
+
+// Usage: wpx(141), hpx(220)
+const widthFromPixel = (widthPx: number, w: number = 414): number =>
+  widthPx * (width / w);
+const heightFromPixel = (heightPx: number, h: number = 896): number =>
+  heightPx * (height / h);
+
+export {
+  scale,
+  verticalScale,
+  moderateScale,
+  normalizeFont as nf,
+  widthPercentageToDP as wp,
+  heightPercentageToDP as hp,
+  widthFromPixel as wpx,
+  heightFromPixel as hpx,
+};
+
+export const extractThemeColor = (color: ThemeColors, theme: any) => {
+  return color in theme.colors ? theme.colors[color] : color;
+}
+

package/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "react-native-varia",
+  "version": "0.0.1",
+  "bin": {
+    "varia": "bin/cli.js"
+  },
+  "files": [
+    "bin",
+    "lib"
+  ],
+  "author": "migueloatla",
+  "license": "ISC",
+  "description": "",
+  "dependencies": {
+    "commander": "^14.0.0",
+    "fs-extra": "^11.3.1"
+  }
+}