@umituz/react-native-design-system 1.8.3 → 1.9.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "1.8.3",
+  "version": "1.9.2",
   "description": "Universal design system for React Native apps - Domain-Driven Design architecture with Material Design 3 components",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -15,12 +15,11 @@
     "./package.json": "./package.json"
   },
   "scripts": {
-    "typecheck": "npx --yes -p typescript tsc --noEmit --skipLibCheck",
-    "lint": "eslint . --ext .ts,.tsx,.js,.jsx",
-    "lint:fix": "eslint . --ext .ts,.tsx,.js,.jsx --fix",
-    "version:patch": "npm version patch -m 'chore: release v%s'",
-    "version:minor": "npm version minor -m 'chore: release v%s'",
-    "version:major": "npm version major -m 'chore: release v%s'"
+    "typecheck": "npx tsc --noEmit",
+    "lint": "eslint . --ext .ts,.tsx",
+    "lint:fix": "eslint . --ext .ts,.tsx --fix",
+    "test": "jest",
+    "test:watch": "jest --watch"
   },
   "keywords": [
     "react-native",
@@ -40,8 +39,8 @@
   "peerDependencies": {
     "@expo/vector-icons": ">=14.0.0",
     "@gorhom/bottom-sheet": ">=5.0.0",
-    "@react-native-community/datetimepicker": "^8.5.0",
-    "@react-navigation/native": "^6.0.0",
+    "@react-native-community/datetimepicker": ">=8.5.0",
+    "@react-navigation/native": ">=6.0.0",
     "@umituz/react-native-bottom-sheet": "*",
     "@umituz/react-native-design-system-atoms": "*",
     "@umituz/react-native-design-system-molecules": "*",
@@ -49,14 +48,14 @@
     "@umituz/react-native-design-system-responsive": "*",
     "@umituz/react-native-design-system-theme": "*",
     "@umituz/react-native-design-system-typography": "*",
-    "expo-linear-gradient": "^15.0.7",
+    "expo-linear-gradient": ">=15.0.0",
     "lucide-react-native": ">=0.468.0",
-    "react": ">=18.2.0",
-    "react-native": ">=0.74.0",
-    "react-native-gesture-handler": ">=2.16.0",
-    "react-native-reanimated": "~4.1.5",
-    "react-native-svg": ">=13.0.0",
-    "zustand": "^5.0.2"
+    "react": ">=18.3.0",
+    "react-native": ">=0.76.0",
+    "react-native-gesture-handler": ">=2.20.0",
+    "react-native-reanimated": ">=3.16.0",
+    "react-native-svg": ">=15.8.0",
+    "zustand": ">=5.0.0"
   },
   "peerDependenciesMeta": {
     "expo-linear-gradient": {
@@ -72,13 +71,13 @@
   "devDependencies": {
     "@eslint/js": "^9.0.0",
     "@expo/vector-icons": ">=14.0.0",
-    "@gorhom/bottom-sheet": "^5.0.0",
-    "@react-native-community/datetimepicker": "^8.5.0",
-    "@react-navigation/native": "^6.0.0",
-    "@types/react": "^18.2.45",
-    "@types/react-native": "^0.73.0",
-    "@typescript-eslint/eslint-plugin": "^7.0.0",
-    "@typescript-eslint/parser": "^7.0.0",
+    "@gorhom/bottom-sheet": ">=5.0.0",
+    "@react-native-community/datetimepicker": ">=8.5.0",
+    "@react-navigation/native": ">=6.0.0",
+    "@types/react": ">=18.3.0",
+    "@types/react-native": ">=0.73.0",
+    "@typescript-eslint/eslint-plugin": "^8.0.0",
+    "@typescript-eslint/parser": "^8.0.0",
     "@umituz/react-native-bottom-sheet": "*",
     "@umituz/react-native-design-system-atoms": "*",
     "@umituz/react-native-design-system-molecules": "*",
@@ -87,18 +86,23 @@
     "@umituz/react-native-design-system-theme": "*",
     "@umituz/react-native-design-system-typography": "*",
     "eslint": "^9.0.0",
-    "eslint-plugin-react": "^7.33.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "expo-linear-gradient": "^15.0.7",
+    "eslint-plugin-react": "^7.37.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.0",
+    "expo-linear-gradient": ">=15.0.0",
     "lucide-react-native": ">=0.468.0",
-    "react": ">=18.2.0",
-    "react-native": ">=0.74.0",
-    "react-native-gesture-handler": "^2.16.0",
-    "react-native-reanimated": "~3.10.1",
-    "react-native-safe-area-context": "^5.6.2",
-    "react-native-svg": "^15.0.0",
-    "typescript": "^5.3.3",
-    "zustand": "^5.0.2"
+    "react": ">=18.3.0",
+    "react-native": ">=0.76.0",
+    "react-native-gesture-handler": ">=2.20.0",
+    "react-native-reanimated": ">=3.16.0",
+    "react-native-safe-area-context": ">=5.6.0",
+    "react-native-svg": ">=15.8.0",
+    "typescript": ">=5.6.0",
+    "zustand": ">=5.0.0",
+    "jest": "^29.7.0",
+    "@types/jest": "^29.5.0",
+    "ts-jest": "^29.1.0",
+    "jest-environment-jsdom": "^29.7.0"
   },
   "publishConfig": {
     "access": "public"
@@ -111,4 +115,4 @@
   "dependencies": {
     "@react-native-async-storage/async-storage": "^2.2.0"
   }
-}
+}

package/src/index.ts

@@ -1,20 +1,12 @@
 /**
  * @umituz/react-native-design-system
- * 
  * Universal design system for React Native apps
- * Re-exports from individual packages for convenience
  */
 
-// =============================================================================
-// COMMON STYLES - Re-export from @umituz/react-native-design-system-theme
-// =============================================================================
 export {
   useCommonStyles,
 } from '@umituz/react-native-design-system-theme';
 
-// =============================================================================
-// VARIANTS UTILITIES - Own utilities
-// =============================================================================
 export {
   createVariants,
   type VariantConfig,
@@ -33,9 +25,6 @@ export {
   combineStyles,
 } from './presentation/utils/variants/helpers';
 
-// =============================================================================
-// ATOMS - Re-export from @umituz/react-native-design-system-atoms
-// =============================================================================
 export {
   AtomicText,
   AtomicIcon,
@@ -47,17 +36,10 @@ export {
   type IconName,
 } from '@umituz/react-native-design-system-atoms';
 
-
-// =============================================================================
-// ORGANISMS - Re-export from @umituz/react-native-design-system-organisms
-// =============================================================================
 export {
   ScreenLayout,
 } from '@umituz/react-native-design-system-organisms';
 
-// =============================================================================
-// MOLECULES - Re-export from @umituz/react-native-design-system-molecules
-// =============================================================================
 export {
   FormField,
   ListItem,
@@ -72,13 +54,8 @@ export {
   useConfirmationModal,
 } from '@umituz/react-native-design-system-molecules';
 
-// =============================================================================
-// RESPONSIVE - Re-export from @umituz/react-native-design-system-responsive
-// =============================================================================
 export {
   useResponsive,
-  useResponsiveSizes,
-  useDeviceType,
   getScreenDimensions,
   isSmallPhone,
   isTablet,
@@ -94,26 +71,15 @@ export {
   getResponsiveMaxWidth,
   getResponsiveFontSize,
   isLandscape,
-  getKeyboardBehavior,
   getDeviceType,
-  getMinTouchTargetSize,
+  getMinTouchTarget,
   getSpacingMultiplier,
-  getOnboardingIconMarginTop,
-  getOnboardingIconMarginBottom,
-  getOnboardingTitleMarginBottom,
-  getOnboardingTextPadding,
-  getOnboardingDescriptionMarginTop,
   IOS_HIG,
-  ANDROID_MATERIAL,
   PLATFORM_CONSTANTS,
   isValidTouchTarget,
-  getMinTouchTarget,
   DeviceType,
 } from '@umituz/react-native-design-system-responsive';
 
-// =============================================================================
-// THEME - Re-export from @umituz/react-native-design-system-theme
-// =============================================================================
 export {
   useAppDesignTokens,
   STATIC_TOKENS,

package/src/presentation/utils/variants/__tests__/compound.test.ts

@@ -0,0 +1,156 @@
+import { describe, it, expect } from '@jest/globals';
+import { createAdvancedVariants, type AdvancedVariantConfig } from '../compound';
+
+describe('createAdvancedVariants', () => {
+  it('should behave like createVariants when no compound variants provided', () => {
+    const config: AdvancedVariantConfig<{
+      size: Record<string, any>;
+      color: Record<string, any>;
+    }> = {
+      base: { borderRadius: 4 },
+      variants: {
+        size: {
+          small: { padding: 8 },
+          large: { padding: 16 },
+        },
+        color: {
+          primary: { backgroundColor: 'blue' },
+          secondary: { backgroundColor: 'gray' },
+        },
+      },
+    };
+
+    const getStyles = createAdvancedVariants(config);
+    const result = getStyles({ size: 'large', color: 'primary' });
+
+    expect(result).toEqual({
+      borderRadius: 4,
+      padding: 16,
+      backgroundColor: 'blue',
+    });
+  });
+
+  it('should apply compound variants when conditions are met', () => {
+    const config: AdvancedVariantConfig<{
+      size: Record<string, any>;
+      color: Record<string, any>;
+    }> = {
+      base: { borderRadius: 4 },
+      variants: {
+        size: {
+          small: { padding: 8 },
+          large: { padding: 16 },
+        },
+        color: {
+          primary: { backgroundColor: 'blue' },
+          secondary: { backgroundColor: 'gray' },
+        },
+      },
+      compoundVariants: [
+        {
+          conditions: { size: 'large', color: 'primary' },
+          style: { borderWidth: 2, borderColor: 'darkblue' },
+        },
+      ],
+    };
+
+    const getStyles = createAdvancedVariants(config);
+    const result = getStyles({ size: 'large', color: 'primary' });
+
+    expect(result).toEqual({
+      borderRadius: 4,
+      padding: 16,
+      backgroundColor: 'blue',
+      borderWidth: 2,
+      borderColor: 'darkblue',
+    });
+  });
+
+  it('should not apply compound variants when conditions are not met', () => {
+    const config: AdvancedVariantConfig<{
+      size: Record<string, any>;
+      color: Record<string, any>;
+    }> = {
+      base: { borderRadius: 4 },
+      variants: {
+        size: {
+          small: { padding: 8 },
+          large: { padding: 16 },
+        },
+        color: {
+          primary: { backgroundColor: 'blue' },
+          secondary: { backgroundColor: 'gray' },
+        },
+      },
+      compoundVariants: [
+        {
+          conditions: { size: 'large', color: 'primary' },
+          style: { borderWidth: 2, borderColor: 'darkblue' },
+        },
+      ],
+    };
+
+    const getStyles = createAdvancedVariants(config);
+    const result = getStyles({ size: 'small', color: 'primary' });
+
+    expect(result).toEqual({
+      borderRadius: 4,
+      padding: 8,
+      backgroundColor: 'blue',
+    });
+  });
+
+  it('should apply multiple compound variants when conditions are met', () => {
+    const config: AdvancedVariantConfig<{
+      size: Record<string, any>;
+      color: Record<string, any>;
+      variant: Record<string, any>;
+    }> = {
+      base: { borderRadius: 4 },
+      variants: {
+        size: {
+          small: { padding: 8 },
+          large: { padding: 16 },
+        },
+        color: {
+          primary: { backgroundColor: 'blue' },
+          secondary: { backgroundColor: 'gray' },
+        },
+        variant: {
+          outlined: { borderWidth: 1 },
+          filled: { borderWidth: 0 },
+        },
+      },
+      compoundVariants: [
+        {
+          conditions: { size: 'large', color: 'primary' },
+          style: { borderWidth: 2, borderColor: 'darkblue' },
+        },
+        {
+          conditions: { color: 'secondary', variant: 'outlined' },
+          style: { borderStyle: 'dashed' },
+        },
+      ],
+    };
+
+    const getStyles = createAdvancedVariants(config);
+    const result1 = getStyles({ size: 'large', color: 'primary', variant: 'filled' });
+    const result2 = getStyles({ size: 'small', color: 'secondary', variant: 'outlined' });
+
+    expect(result1).toEqual({
+      borderRadius: 4,
+      padding: 16,
+      backgroundColor: 'blue',
+      borderWidth: 2,
+      borderColor: 'darkblue',
+    });
+
+    expect(result2).toEqual({
+      borderRadius: 4,
+      padding: 8,
+      backgroundColor: 'gray',
+      borderWidth: 1,
+      borderStyle: 'dashed',
+    });
+  });
+});

package/src/presentation/utils/variants/__tests__/core.test.ts

@@ -0,0 +1,103 @@
+import { describe, it, expect } from '@jest/globals';
+import { View, Text } from 'react-native';
+import { createVariants, type VariantConfig } from '../core';
+
+describe('createVariants', () => {
+  it('should return base style when no variants provided', () => {
+    const config: VariantConfig<{ size: Record<string, any> }> = {
+      base: { backgroundColor: 'red' },
+    };
+
+    const getStyles = createVariants(config);
+    const result = getStyles();
+
+    expect(result).toEqual({ backgroundColor: 'red' });
+  });
+
+  it('should apply variant styles based on props', () => {
+    const config: VariantConfig<{ size: Record<string, any> }> = {
+      base: { backgroundColor: 'red' },
+      variants: {
+        size: {
+          small: { padding: 8 },
+          large: { padding: 16 },
+        },
+      },
+    };
+
+    const getStyles = createVariants(config);
+    const smallResult = getStyles({ size: 'small' });
+    const largeResult = getStyles({ size: 'large' });
+
+    expect(smallResult).toEqual({ backgroundColor: 'red', padding: 8 });
+    expect(largeResult).toEqual({ backgroundColor: 'red', padding: 16 });
+  });
+
+  it('should apply default variants when no props provided', () => {
+    const config: VariantConfig<{ size: Record<string, any> }> = {
+      base: { backgroundColor: 'red' },
+      variants: {
+        size: {
+          small: { padding: 8 },
+          large: { padding: 16 },
+        },
+      },
+      defaultVariants: {
+        size: 'large',
+      },
+    };
+
+    const getStyles = createVariants(config);
+    const result = getStyles();
+
+    expect(result).toEqual({ backgroundColor: 'red', padding: 16 });
+  });
+
+  it('should override default variants with props', () => {
+    const config: VariantConfig<{ size: Record<string, any> }> = {
+      base: { backgroundColor: 'red' },
+      variants: {
+        size: {
+          small: { padding: 8 },
+          large: { padding: 16 },
+        },
+      },
+      defaultVariants: {
+        size: 'large',
+      },
+    };
+
+    const getStyles = createVariants(config);
+    const result = getStyles({ size: 'small' });
+
+    expect(result).toEqual({ backgroundColor: 'red', padding: 8 });
+  });
+
+  it('should handle multiple variants', () => {
+    const config: VariantConfig<{
+      size: Record<string, any>;
+      color: Record<string, any>;
+    }> = {
+      base: { borderRadius: 4 },
+      variants: {
+        size: {
+          small: { padding: 8 },
+          large: { padding: 16 },
+        },
+        color: {
+          primary: { backgroundColor: 'blue' },
+          secondary: { backgroundColor: 'gray' },
+        },
+      },
+    };
+
+    const getStyles = createVariants(config);
+    const result = getStyles({ size: 'large', color: 'primary' });
+
+    expect(result).toEqual({
+      borderRadius: 4,
+      padding: 16,
+      backgroundColor: 'blue',
+    });
+  });
+});

package/src/presentation/utils/variants/__tests__/helpers.test.ts

@@ -0,0 +1,95 @@
+import { describe, it, expect } from '@jest/globals';
+import { combineStyles, conditionalStyle, responsiveStyle } from '../helpers';
+
+describe('helpers', () => {
+  describe('combineStyles', () => {
+    it('should combine multiple styles', () => {
+      const style1 = { backgroundColor: 'red' };
+      const style2 = { padding: 10 };
+      const style3 = { margin: 5 };
+
+      const result = combineStyles(style1, style2, style3);
+
+      expect(result).toEqual({
+        backgroundColor: 'red',
+        padding: 10,
+        margin: 5,
+      });
+    });
+
+    it('should ignore undefined, null, and false styles', () => {
+      const style1 = { backgroundColor: 'red' };
+      const style2 = undefined;
+      const style3 = null;
+      const style4 = false;
+      const style5 = { padding: 10 };
+
+      const result = combineStyles(style1, style2, style3, style4, style5);
+
+      expect(result).toEqual({
+        backgroundColor: 'red',
+        padding: 10,
+      });
+    });
+
+    it('should return empty object when no styles provided', () => {
+      const result = combineStyles();
+
+      expect(result).toEqual({});
+    });
+
+    it('should handle empty array', () => {
+      const result = combineStyles();
+
+      expect(result).toEqual({});
+    });
+  });
+
+  describe('conditionalStyle', () => {
+    it('should return trueStyle when condition is true', () => {
+      const trueStyle = { backgroundColor: 'red' };
+      const falseStyle = { backgroundColor: 'blue' };
+
+      const result = conditionalStyle(true, trueStyle, falseStyle);
+
+      expect(result).toEqual(trueStyle);
+    });
+
+    it('should return falseStyle when condition is false', () => {
+      const trueStyle = { backgroundColor: 'red' };
+      const falseStyle = { backgroundColor: 'blue' };
+
+      const result = conditionalStyle(false, trueStyle, falseStyle);
+
+      expect(result).toEqual(falseStyle);
+    });
+
+    it('should return undefined when condition is false and no falseStyle provided', () => {
+      const trueStyle = { backgroundColor: 'red' };
+
+      const result = conditionalStyle(false, trueStyle);
+
+      expect(result).toBeUndefined();
+    });
+  });
+
+  describe('responsiveStyle', () => {
+    it('should return small style (current implementation)', () => {
+      const small = { padding: 8 };
+      const medium = { padding: 12 };
+      const large = { padding: 16 };
+
+      const result = responsiveStyle(small, medium, large);
+
+      expect(result).toEqual(small);
+    });
+
+    it('should work with only small style', () => {
+      const small = { padding: 8 };
+
+      const result = responsiveStyle(small);
+
+      expect(result).toEqual(small);
+    });
+  });
+});

package/src/presentation/utils/variants/compound.ts

@@ -1,27 +1,36 @@
 import { Style, VariantConfig, VariantProps, createVariants } from './core';
 
-export type CompoundVariant<T extends Record<string, any>> = {
+export interface CompoundVariant<T extends Record<string, Record<string, Style>>> {
   conditions: Partial<VariantProps<T>>;
   style: Style;
-};
+}
 
-export type AdvancedVariantConfig<T extends Record<string, any>> = VariantConfig<T> & {
+export interface AdvancedVariantConfig<T extends Record<string, Record<string, Style>>>
+  extends VariantConfig<T> {
   compoundVariants?: CompoundVariant<T>[];
-};
+}
 
-export function createAdvancedVariants<T extends Record<string, any>>(config: AdvancedVariantConfig<T>) {
+export function createAdvancedVariants<T extends Record<string, Record<string, Style>>>(
+  config: AdvancedVariantConfig<T>
+) {
   const baseVariantFn = createVariants(config);
 
-  return function (props: VariantProps<T> = {}): Style {
+  return (props: VariantProps<T> = {}): Style => {
     let result = baseVariantFn(props);
 
+    if (__DEV__) {
+      console.log('[Design System] Creating advanced variant with compound conditions');
+    }
+
     if (config.compoundVariants) {
-      for (const compound of config.compoundVariants) {
+      config.compoundVariants.forEach(compound => {
         const conditionsMet = Object.entries(compound.conditions).every(
           ([key, value]) => props[key as keyof T] === value
         );
-        if (conditionsMet) result = { ...result, ...compound.style };
-      }
+        if (conditionsMet) {
+          result = { ...result, ...compound.style };
+        }
+      });
     }
 
     return result;

package/src/presentation/utils/variants/core.ts

@@ -1,39 +1,49 @@
 import { ViewStyle, TextStyle, ImageStyle } from 'react-native';
 
-type Style = ViewStyle | TextStyle | ImageStyle;
+export type Style = ViewStyle | TextStyle | ImageStyle;
 
-export type VariantConfig<T extends Record<string, any>> = {
+export interface VariantConfig<T extends Record<string, Record<string, Style>>> {
   base?: Style;
   variants?: T;
-  defaultVariants?: { [K in keyof T]?: keyof T[K] };
-};
+  defaultVariants?: Partial<{ [K in keyof T]: keyof T[K] }>;
+}
 
-export type VariantProps<T extends Record<string, any>> = {
+export type VariantProps<T extends Record<string, Record<string, Style>>> = {
   [K in keyof T]?: keyof T[K];
 };
 
-export function createVariants<T extends Record<string, any>>(config: VariantConfig<T>) {
-  return function (props: VariantProps<T> = {}): Style {
+export function createVariants<T extends Record<string, Record<string, Style>>>(
+  config: VariantConfig<T>
+) {
+  return (props: VariantProps<T> = {}): Style => {
     let result: Style = { ...config.base };
 
+    if (__DEV__) {
+      console.log('[Design System] Creating variant with props:', props);
+    }
+
+    // Apply default variants
     if (config.defaultVariants) {
-      for (const [variantKey, defaultValue] of Object.entries(config.defaultVariants)) {
+      Object.entries(config.defaultVariants).forEach(([variantKey, defaultValue]) => {
         if (config.variants?.[variantKey] && defaultValue) {
           const variantStyle = config.variants[variantKey][defaultValue as string];
-          if (variantStyle) result = { ...result, ...variantStyle };
+          if (variantStyle) {
+            result = { ...result, ...variantStyle };
+          }
         }
-      }
+      });
     }
 
-    for (const [variantKey, variantValue] of Object.entries(props)) {
+    // Apply props variants
+    Object.entries(props).forEach(([variantKey, variantValue]) => {
       if (config.variants?.[variantKey] && variantValue) {
         const variantStyle = config.variants[variantKey][variantValue as string];
-        if (variantStyle) result = { ...result, ...variantStyle };
+        if (variantStyle) {
+          result = { ...result, ...variantStyle };
+        }
       }
-    }
+    });
 
     return result;
   };
 }
-
-export type { Style };

package/src/presentation/utils/variants/helpers.ts

@@ -1,13 +1,34 @@
 import { Style } from './core';
 
-export function combineStyles<T extends Style>(...styles: (T | undefined | null | false)[]): T {
-  return styles.reduce<T>((acc, style) => (style ? { ...acc, ...style } as T : acc), {} as T);
+export function combineStyles<T extends Style>(
+  ...styles: (T | undefined | null | false)[]
+): T {
+  return styles.reduce<T>(
+    (acc, style) => (style ? { ...acc, ...style } : acc),
+    {} as T
+  );
 }
 
-export function conditionalStyle<T extends Style>(condition: boolean, trueStyle: T, falseStyle?: T): T | undefined {
+export function conditionalStyle<T extends Style>(
+  condition: boolean,
+  trueStyle: T,
+  falseStyle?: T
+): T | undefined {
+  if (__DEV__) {
+    console.log('[Design System] Conditional style applied:', condition);
+  }
   return condition ? trueStyle : falseStyle;
 }
 
-export function responsiveStyle<T extends Style>(small: T, medium?: T, large?: T): T {
+export function responsiveStyle<T extends Style>(
+  small: T,
+  medium?: T,
+  large?: T
+): T {
+  if (__DEV__) {
+    console.log('[Design System] Responsive style - using small breakpoint');
+  }
+  void medium;
+  void large;
   return small;
 }

package/src/presentation/utils/variants.ts

@@ -1,3 +0,0 @@
-export * from './variants/core';
-export * from './variants/compound';
-export * from './variants/helpers';