react-native-skelo 0.0.1 → 0.0.2

package/lib/typescript/utils/componentUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"componentUtils.d.ts","sourceRoot":"","sources":["../../../src/utils/componentUtils.ts"],"names":[],"mappings":"AAAA,OAAc,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAmBrD,OAAO,EAAE,cAAc,EAAE,CAAC;AA2B1B;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,YAAY,GAAG,MAAM,CA6C9D;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,OAAO,EAAE,YAAY,GAAG,OAAO,CAEzD;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,QAAQ,EAAE,SAAS,GAAG,SAAS,EAAE,CAmBhE;AAED;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,YAAY,GAAG,OAAO,CAUnE;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,GAAG,GAAE,MAAW,EAAE,GAAG,GAAE,MAAW,GAAG,MAAM,CAGtE"}

package/lib/typescript/utils/index.d.ts

@@ -0,0 +1,3 @@
+export { resolveStyle, extractDimensions, isPercentage, percentageToNumber } from './styleUtils';
+export { getComponentName, isFragment, flattenChildren, isTouchableComponent, randomWidth, } from './componentUtils';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAEjG,OAAO,EACL,gBAAgB,EAChB,UAAU,EACV,eAAe,EACf,oBAAoB,EACpB,WAAW,GACZ,MAAM,kBAAkB,CAAC"}

package/lib/typescript/utils/styleUtils.d.ts

@@ -0,0 +1,41 @@
+import type { DimensionValue } from 'react-native';
+import type { ResolvedStyle } from '../types';
+/**
+ * Flatten and resolve styles from React Native style prop
+ *
+ * @param style - Style prop (can be object, array, or StyleSheet reference)
+ * @returns Flattened style object
+ */
+export declare function resolveStyle(style: any): ResolvedStyle;
+/**
+ * Extract dimensions from resolved style
+ *
+ * @param style - Resolved style object
+ * @returns Object with width and height (if present)
+ */
+export declare function extractDimensions(style: ResolvedStyle): {
+    width?: DimensionValue;
+    height?: DimensionValue;
+};
+/**
+ * Check if a resolved style declares both an explicit width and height
+ *
+ * @param style - Resolved style object
+ * @returns True if both width and height are defined
+ */
+export declare function hasExplicitSize(style: ResolvedStyle): boolean;
+/**
+ * Check if a value is a percentage string
+ *
+ * @param value - Value to check
+ * @returns True if value is a percentage string
+ */
+export declare function isPercentage(value: any): boolean;
+/**
+ * Convert percentage to number (strips %)
+ *
+ * @param value - Percentage string (e.g., "50%")
+ * @returns Number without % sign
+ */
+export declare function percentageToNumber(value: string): number;
+//# sourceMappingURL=styleUtils.d.ts.map

package/lib/typescript/utils/styleUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styleUtils.d.ts","sourceRoot":"","sources":["../../../src/utils/styleUtils.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE9C;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,GAAG,GAAG,aAAa,CAetD;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,aAAa,GAAG;IACvD,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,MAAM,CAAC,EAAE,cAAc,CAAC;CACzB,CAKA;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,CAE7D;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,GAAG,GAAG,OAAO,CAEhD;AAED;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAExD"}

package/package.json

@@ -1,7 +1,52 @@
 {
   "name": "react-native-skelo",
-  "version": "0.0.1",
-  "description": "🚧 Coming soon — Automatic skeleton loading for React Native. Write your UI once, Skelo builds the loading state automatically.",
+  "version": "0.0.2",
+  "description": "Automatic skeleton loading for React Native. Write your UI once, Skelo builds the loading state automatically.",
+  "main": "lib/commonjs/index.js",
+  "module": "lib/module/index.js",
+  "types": "lib/typescript/index.d.ts",
+  "react-native": "src/index.ts",
+  "source": "src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/typescript/index.d.ts",
+      "react-native": "./src/index.ts",
+      "import": "./lib/module/index.js",
+      "require": "./lib/commonjs/index.js",
+      "default": "./lib/commonjs/index.js"
+    },
+    "./deep": {
+      "types": "./lib/typescript/deep.d.ts",
+      "react-native": "./src/deep.ts",
+      "import": "./lib/module/deep.js",
+      "require": "./lib/commonjs/deep.js",
+      "default": "./lib/commonjs/deep.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "!**/__tests__",
+    "!**/__mocks__"
+  ],
+  "scripts": {
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
+    "typecheck": "tsc --noEmit",
+    "build": "bob build",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "lint:fix": "eslint \"**/*.{js,ts,tsx}\" --fix",
+    "format": "prettier --write \"**/*.{js,ts,tsx,json,md}\"",
+    "prepare": "bob build",
+    "prepublishOnly": "bob build",
+    "publish:npm": "npm publish --access public",
+    "publish:alpha": "npm publish --tag alpha --access public",
+    "publish:git": "git push origin HEAD --tags",
+    "release": "npm run build && npm publish --access public && git push origin HEAD --tags",
+    "clean": "del-cli lib"
+  },
   "keywords": [
     "react-native",
     "skeleton",
@@ -11,23 +56,138 @@
     "skeleton-screen",
     "skeleton-loader",
     "loading-state",
-    "reanimated"
+    "reanimated",
+    "fabric",
+    "automatic",
+    "zero-config"
   ],
-  "homepage": "https://github.com/shubhanshubb/react-native-skelo#readme",
-  "bugs": {
-    "url": "https://github.com/shubhanshubb/react-native-skelo/issues"
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/shubhanshubb/react-native-skelo.git"
   },
-  "license": "MIT",
   "author": "Shubhanshu Barnwal <connect@shubhanshubb.dev> (https://shubhanshubb.dev)",
-  "files": [
-    "README.md"
+  "maintainers": [
+    {
+      "name": "Shubhanshu Barnwal",
+      "email": "connect@shubhanshubb.dev",
+      "url": "https://shubhanshubb.dev"
+    }
   ],
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/shubhanshubb/react-native-skelo/issues"
+  },
+  "homepage": "https://github.com/shubhanshubb/react-native-skelo#readme",
+  "funding": {
+    "type": "individual",
+    "url": "https://buymeacoffee.com/shubhanshubb"
+  },
   "publishConfig": {
-    "access": "public",
     "registry": "https://registry.npmjs.org/"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "react-native-linear-gradient": ">=2.8.0",
+    "react-native-reanimated": ">=3.0.0",
+    "react-reconciler": ">=0.29.0"
+  },
+  "peerDependenciesMeta": {
+    "react-reconciler": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^18.4.3",
+    "@react-native/eslint-config": "^0.73.1",
+    "@release-it/conventional-changelog": "^8.0.1",
+    "@testing-library/react-native": "^12.4.2",
+    "@types/jest": "^29.5.11",
+    "@types/react": "^18.2.45",
+    "del-cli": "^5.1.0",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.2",
+    "jest": "^29.7.0",
+    "prettier": "^3.1.1",
+    "react": "18.2.0",
+    "react-native": "0.73.1",
+    "react-native-builder-bob": "^0.23.2",
+    "react-native-linear-gradient": "^2.8.3",
+    "react-native-reanimated": "^3.6.1",
+    "react-reconciler": "^0.29.2",
+    "react-test-renderer": "18.2.0",
+    "release-it": "^17.0.1",
+    "typescript": "^5.3.3"
+  },
+  "jest": {
+    "preset": "react-native",
+    "setupFiles": [
+      "<rootDir>/jest.setup.js"
+    ],
+    "modulePathIgnorePatterns": [
+      "<rootDir>/lib/"
+    ],
+    "transformIgnorePatterns": [
+      "node_modules/(?!(@react-native|react-native|react-native-reanimated|react-native-linear-gradient)/)"
+    ],
+    "collectCoverageFrom": [
+      "src/**/*.{ts,tsx}",
+      "!src/**/*.d.ts",
+      "!src/**/index.ts",
+      "!src/types/**"
+    ],
+    "coverageThreshold": {
+      "global": {
+        "branches": 80,
+        "functions": 80,
+        "lines": 80,
+        "statements": 80
+      }
+    }
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": "angular"
+      }
+    }
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "prettier": {
+    "singleQuote": true,
+    "trailingComma": "es5",
+    "tabWidth": 2,
+    "semi": true,
+    "printWidth": 100,
+    "arrowParens": "avoid"
   }
 }

package/src/Skelo.ts

@@ -0,0 +1,103 @@
+import React from 'react';
+import type { ComponentType, ReactElement } from 'react';
+import type { SkeletonConfig, SkeletonPlugin } from './types';
+import { registry } from './core/registry';
+import { StyleSkeleton, type StyleInput } from './core/generator/StyleSkeleton';
+import { DEFAULT_CONFIG } from './constants/defaults';
+
+/**
+ * Global Skelo API for plugin management
+ *
+ * @example
+ * ```tsx
+ * import { Skelo } from 'react-native-skelo';
+ * import { Avatar } from 'my-ui-library';
+ *
+ * Skelo.register({
+ *   name: 'Avatar',
+ *   component: Avatar,
+ *   strategy: (props, { primitives }) => {
+ *     return <primitives.Circle size={props.size || 40} />;
+ *   },
+ * });
+ * ```
+ */
+export const Skelo = {
+  /**
+   * Register a plugin
+   *
+   * @param plugin - Plugin configuration
+   */
+  register<P = any>(plugin: SkeletonPlugin<P>): void {
+    registry.register(plugin);
+  },
+
+  /**
+   * Unregister a plugin
+   *
+   * @param component - Component type to unregister
+   */
+  unregister(component: ComponentType): void {
+    registry.unregister(component);
+  },
+
+  /**
+   * Get plugin for component
+   *
+   * @param component - Component type
+   * @returns Plugin or undefined
+   */
+  getPlugin(component: ComponentType): SkeletonPlugin | undefined {
+    return registry.getPlugin(component);
+  },
+
+  /**
+   * Check if plugin exists
+   *
+   * @param component - Component type
+   * @returns True if plugin is registered
+   */
+  hasPlugin(component: ComponentType): boolean {
+    return registry.hasPlugin(component);
+  },
+
+  /**
+   * Get all plugins
+   *
+   * @returns Array of all registered plugins
+   */
+  getAllPlugins(): SkeletonPlugin[] {
+    return registry.getAllPlugins();
+  },
+
+  /**
+   * Clear all plugins (useful for testing)
+   */
+  clearPlugins(): void {
+    registry.clear();
+  },
+
+  /**
+   * Generate a skeleton element directly from a set of styles.
+   *
+   * @param styles - A `StyleSheet.create` object or an array of styles
+   * @param config - Optional animation/color overrides
+   * @returns A skeleton React element
+   *
+   * @example
+   * ```tsx
+   * {loading ? Skelo.fromStyles(styles) : <Screen />}
+   * ```
+   */
+  fromStyles(styles: StyleInput, config: Partial<SkeletonConfig> = {}): ReactElement {
+    return React.createElement(StyleSkeleton, {
+      styles,
+      config: { ...DEFAULT_CONFIG, ...config },
+    });
+  },
+
+  /**
+   * Library version
+   */
+  version: '0.1.0',
+};

package/src/animations/AnimationWrapper.tsx

@@ -0,0 +1,139 @@
+import React from 'react';
+import type { DimensionValue, StyleProp, ViewStyle } from 'react-native';
+import { View } from 'react-native';
+import { ShimmerAnimation } from './ShimmerAnimation';
+import { PulseAnimation } from './PulseAnimation';
+
+export type AnimationType = 'shimmer' | 'pulse' | 'none';
+
+interface AnimationWrapperProps {
+  /**
+   * Type of animation to use
+   * @default 'shimmer'
+   */
+  animation?: AnimationType;
+
+  /**
+   * Width of the animated element
+   */
+  width?: DimensionValue;
+
+  /**
+   * Height of the animated element
+   */
+  height?: DimensionValue;
+
+  /**
+   * Base color of the skeleton
+   * @default '#E1E9EE'
+   */
+  baseColor?: string;
+
+  /**
+   * Highlight color for animation
+   * @default '#F2F8FC'
+   */
+  highlightColor?: string;
+
+  /**
+   * Animation duration in milliseconds
+   * @default 1500 for shimmer, 1000 for pulse
+   */
+  duration?: number;
+
+  /**
+   * Border radius
+   * @default 4
+   */
+  borderRadius?: number;
+
+  /**
+   * Additional styles
+   */
+  style?: StyleProp<ViewStyle>;
+
+  /**
+   * Child content
+   */
+  children?: React.ReactNode;
+}
+
+/**
+ * Animation wrapper that selects the appropriate animation type
+ *
+ * Provides a unified interface for all skeleton animations:
+ * - shimmer: Left-to-right shimmer effect
+ * - pulse: Breathing/pulsing opacity
+ * - none: Static skeleton (no animation)
+ *
+ * @example
+ * ```tsx
+ * <AnimationWrapper
+ *   animation="shimmer"
+ *   width={200}
+ *   height={20}
+ * />
+ * ```
+ */
+export function AnimationWrapper({
+  animation = 'shimmer',
+  width,
+  height,
+  baseColor = '#E1E9EE',
+  highlightColor = '#F2F8FC',
+  duration,
+  borderRadius = 4,
+  style,
+  children,
+}: AnimationWrapperProps) {
+  // No animation - static skeleton
+  if (animation === 'none') {
+    return (
+      <View
+        style={[
+          {
+            width,
+            height,
+            borderRadius,
+            backgroundColor: baseColor,
+          },
+          style,
+        ]}
+      >
+        {children}
+      </View>
+    );
+  }
+
+  // Shimmer animation
+  if (animation === 'shimmer') {
+    return (
+      <ShimmerAnimation
+        width={width}
+        height={height}
+        baseColor={baseColor}
+        highlightColor={highlightColor}
+        duration={duration ?? 1500}
+        borderRadius={borderRadius}
+        style={style}
+      >
+        {children}
+      </ShimmerAnimation>
+    );
+  }
+
+  // Pulse animation
+  return (
+    <PulseAnimation
+      width={width}
+      height={height}
+      baseColor={baseColor}
+      highlightColor={highlightColor}
+      duration={duration ?? 1000}
+      borderRadius={borderRadius}
+      style={style}
+    >
+      {children}
+    </PulseAnimation>
+  );
+}

package/src/animations/PulseAnimation.tsx

@@ -0,0 +1,138 @@
+import React, { useEffect } from 'react';
+import type { DimensionValue, StyleProp, ViewStyle } from 'react-native';
+import { StyleSheet } from 'react-native';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withRepeat,
+  withSequence,
+  withTiming,
+  Easing,
+} from 'react-native-reanimated';
+
+interface PulseProps {
+  /**
+   * Width of the pulse container
+   */
+  width?: DimensionValue;
+
+  /**
+   * Height of the pulse container
+   */
+  height?: DimensionValue;
+
+  /**
+   * Base color of the skeleton
+   * @default '#E1E9EE'
+   */
+  baseColor?: string;
+
+  /**
+   * Highlight color for pulse
+   * @default '#F2F8FC'
+   */
+  highlightColor?: string;
+
+  /**
+   * Animation duration in milliseconds
+   * @default 1000
+   */
+  duration?: number;
+
+  /**
+   * Border radius
+   */
+  borderRadius?: number;
+
+  /**
+   * Additional styles
+   */
+  style?: StyleProp<ViewStyle>;
+
+  /**
+   * Child content (rendered inside pulse)
+   */
+  children?: React.ReactNode;
+}
+
+/**
+ * Pulse animation component using Reanimated 3
+ *
+ * Creates a subtle breathing/pulsing effect using:
+ * - Shared values for performance
+ * - Worklets for 60 FPS on UI thread
+ * - Opacity animation for pulse effect
+ *
+ * @example
+ * ```tsx
+ * <PulseAnimation
+ *   width={200}
+ *   height={20}
+ *   borderRadius={4}
+ * />
+ * ```
+ */
+export function PulseAnimation({
+  width,
+  height,
+  baseColor = '#E1E9EE',
+  duration = 1000,
+  borderRadius = 4,
+  style,
+  children,
+}: PulseProps) {
+  // Shared value for opacity (0 to 1)
+  const opacity = useSharedValue(1);
+
+  useEffect(() => {
+    // Start infinite pulse animation
+    // Sequence: fade out -> fade in
+    opacity.value = withRepeat(
+      withSequence(
+        withTiming(0.5, {
+          duration: duration / 2,
+          easing: Easing.inOut(Easing.ease),
+        }),
+        withTiming(1, {
+          duration: duration / 2,
+          easing: Easing.inOut(Easing.ease),
+        })
+      ),
+      -1, // Infinite repeat
+      false // Don't reverse
+    );
+  }, [duration, opacity]);
+
+  // Animated style for pulse effect
+  const animatedStyle = useAnimatedStyle(() => {
+    'worklet';
+
+    return {
+      opacity: opacity.value,
+    };
+  }, []);
+
+  return (
+    <Animated.View
+      style={[
+        styles.container,
+        {
+          width,
+          height,
+          borderRadius,
+          backgroundColor: baseColor,
+        },
+        animatedStyle,
+        style,
+      ]}
+    >
+      {children}
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: 'hidden',
+  },
+});