react-native-skelo 0.0.1 → 0.0.3

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.3",
+  "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,136 @@
     "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-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-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)/)"
+    ],
+    "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,76 @@
+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?: DimensionValue;
+  height?: DimensionValue;
+  baseColor?: string;
+  highlightColor?: string;
+  duration?: number;
+  borderRadius?: number;
+  style?: StyleProp<ViewStyle>;
+  children?: React.ReactNode;
+}
+
+// Breathing opacity loop on the UI thread with Reanimated.
+export function PulseAnimation({
+  width,
+  height,
+  baseColor = '#E1E9EE',
+  duration = 1000,
+  borderRadius = 4,
+  style,
+  children,
+}: PulseProps) {
+  const opacity = useSharedValue(1);
+
+  useEffect(() => {
+    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,
+      false
+    );
+  }, [duration, opacity]);
+
+  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',
+  },
+});

package/src/animations/ShimmerAnimation.tsx

@@ -0,0 +1,101 @@
+import React, { useEffect, useState } from 'react';
+import type {
+  DimensionValue,
+  LayoutChangeEvent,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+import { StyleSheet, View } from 'react-native';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withRepeat,
+  withTiming,
+  interpolate,
+  Easing,
+} from 'react-native-reanimated';
+
+interface ShimmerProps {
+  width?: DimensionValue;
+  height?: DimensionValue;
+  baseColor?: string;
+  highlightColor?: string;
+  duration?: number;
+  borderRadius?: number;
+  style?: StyleProp<ViewStyle>;
+  children?: React.ReactNode;
+}
+
+// Shimmer with no gradient library: the sweeping overlay uses React Native's
+// built-in `experimental_backgroundImage` CSS gradient (New Architecture),
+// animated on the UI thread with Reanimated.
+export function ShimmerAnimation({
+  width,
+  height,
+  baseColor = '#E1E9EE',
+  highlightColor = '#F2F8FC',
+  duration = 1500,
+  borderRadius = 4,
+  style,
+  children,
+}: ShimmerProps) {
+  const progress = useSharedValue(0);
+  const [measuredWidth, setMeasuredWidth] = useState(0);
+
+  useEffect(() => {
+    progress.value = withRepeat(
+      withTiming(1, { duration, easing: Easing.linear }),
+      -1,
+      false
+    );
+  }, [duration, progress]);
+
+  const onLayout = (event: LayoutChangeEvent) => {
+    const w = event.nativeEvent.layout.width;
+    setMeasuredWidth(prev => (prev === w ? prev : w));
+  };
+
+  const containerWidth = typeof width === 'number' ? width : measuredWidth;
+
+  const animatedStyle = useAnimatedStyle(() => {
+    'worklet';
+    const translateX = interpolate(
+      progress.value,
+      [0, 1],
+      [-containerWidth, containerWidth]
+    );
+    return { transform: [{ translateX }] };
+  }, [containerWidth]);
+
+  // `experimental_backgroundImage` isn't in the ViewStyle types yet.
+  const gradientStyle = {
+    ...StyleSheet.absoluteFillObject,
+    experimental_backgroundImage: `linear-gradient(to right, ${baseColor}, ${highlightColor}, ${baseColor})`,
+  } as unknown as ViewStyle;
+
+  return (
+    <View
+      onLayout={onLayout}
+      style={[
+        styles.container,
+        { width, height, borderRadius, backgroundColor: baseColor },
+        style,
+      ]}
+    >
+      <Animated.View
+        pointerEvents="none"
+        style={[StyleSheet.absoluteFill, animatedStyle]}
+      >
+        <View style={gradientStyle} />
+      </Animated.View>
+
+      {children}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: 'hidden',
+  },
+});

package/src/animations/index.ts

@@ -0,0 +1,4 @@
+export { ShimmerAnimation } from './ShimmerAnimation';
+export { PulseAnimation } from './PulseAnimation';
+export { AnimationWrapper } from './AnimationWrapper';
+export type { AnimationType } from './AnimationWrapper';