react-native-lumen 1.0.1 → 1.1.1

package/package.json

@@ -1,171 +1,169 @@
-{
-  "name": "react-native-lumen",
-  "version": "1.0.1",
-  "description": "A customizable app tour library for React Native",
-  "main": "./lib/module/index.js",
-  "types": "./lib/typescript/src/index.d.ts",
-  "exports": {
-    ".": {
-      "source": "./src/index.tsx",
-      "types": "./lib/typescript/src/index.d.ts",
-      "default": "./lib/module/index.js"
-    },
-    "./package.json": "./package.json"
-  },
-  "files": [
-    "src",
-    "lib",
-    "android",
-    "ios",
-    "cpp",
-    "*.podspec",
-    "react-native.config.js",
-    "!ios/build",
-    "!android/build",
-    "!android/gradle",
-    "!android/gradlew",
-    "!android/gradlew.bat",
-    "!android/local.properties",
-    "!**/__tests__",
-    "!**/__fixtures__",
-    "!**/__mocks__",
-    "!**/.*"
-  ],
-  "scripts": {
-    "example": "yarn workspace react-native-lumen-example",
-    "clean": "del-cli lib",
-    "prepare": "bob build",
-    "typecheck": "tsc",
-    "lint": "eslint \"**/*.{js,ts,tsx}\"",
-    "test": "jest",
-    "release": "release-it --only-version"
-  },
-  "keywords": [
-    "react-native",
-    "ios",
-    "android"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/thedev204/react-native-lumen.git"
-  },
-  "author": "thedev204 <116882323+thedev204@users.noreply.github.com> (https://github.com/thedev204)",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/thedev204/react-native-lumen/issues"
-  },
-  "homepage": "https://github.com/thedev204/react-native-lumen#readme",
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/"
-  },
-  "devDependencies": {
-    "@commitlint/config-conventional": "^19.8.1",
-    "@eslint/compat": "^1.3.2",
-    "@eslint/eslintrc": "^3.3.1",
-    "@eslint/js": "^9.35.0",
-    "@react-native/babel-preset": "0.83.0",
-    "@react-native/eslint-config": "0.83.0",
-    "@release-it/conventional-changelog": "^10.0.1",
-    "@types/jest": "^29.5.14",
-    "@types/react": "^19.1.12",
-    "commitlint": "^19.8.1",
-    "del-cli": "^6.0.0",
-    "eslint": "^9.39.2",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-prettier": "^5.0.0",
-    "jest": "^29.7.0",
-    "lefthook": "^2.0.3",
-    "prettier": "^3.0.0",
-    "react": "19.1.0",
-    "react-native": "0.81.5",
-    "react-native-builder-bob": "^0.40.13",
-    "react-native-gesture-handler": "^2.16.0",
-    "react-native-reanimated": "^3.0.0",
-    "react-native-svg": "^12.0.0",
-    "release-it": "^19.0.4",
-    "typescript": "~5.7.0"
-  },
-  "peerDependencies": {
-    "react": "*",
-    "react-native": "*",
-    "react-native-gesture-handler": ">=2.0.0",
-    "react-native-reanimated": ">=3.0.0",
-    "react-native-svg": ">=12.0.0",
-    "react-native-worklets": ">=0.3.0"
-  },
-  "workspaces": [
-    "example"
-  ],
-  "packageManager": "yarn@4.11.0",
-  "react-native-builder-bob": {
-    "source": "src",
-    "output": "lib",
-    "targets": [
-      [
-        "module",
-        {
-          "esm": true
-        }
-      ],
-      [
-        "typescript",
-        {
-          "project": "tsconfig.build.json"
-        }
-      ]
-    ]
-  },
-  "prettier": {
-    "quoteProps": "consistent",
-    "singleQuote": true,
-    "tabWidth": 2,
-    "trailingComma": "es5",
-    "useTabs": false
-  },
-  "jest": {
-    "preset": "react-native",
-    "modulePathIgnorePatterns": [
-      "<rootDir>/example/node_modules",
-      "<rootDir>/lib/"
-    ]
-  },
-  "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": {
-          "name": "angular"
-        }
-      }
-    }
-  },
-  "create-react-native-library": {
-    "type": "library",
-    "languages": "js",
-    "tools": [
-      "eslint",
-      "jest",
-      "lefthook",
-      "release-it"
-    ],
-    "version": "0.57.0"
-  },
-  "resolutions": {
-    "@types/react": "^19.1.12",
-    "typescript": "5.7.3"
-  }
-}
+{
+  "name": "react-native-lumen",
+  "version": "1.1.1",
+  "description": "A customizable app tour library for React Native",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.tsx",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "lib",
+    "*.podspec",
+    "react-native.config.js",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "example": "yarn workspace react-native-lumen-example",
+    "clean": "del-cli lib",
+    "prepare": "bob build",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "test": "jest",
+    "release": "release-it --only-version"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/thedev204/react-native-lumen.git"
+  },
+  "author": "thedev204 <116882323+thedev204@users.noreply.github.com> (https://github.com/thedev204)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/thedev204/react-native-lumen/issues"
+  },
+  "homepage": "https://github.com/thedev204/react-native-lumen#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^19.8.1",
+    "@eslint/compat": "^1.3.2",
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/js": "^9.35.0",
+    "@react-native/babel-preset": "0.83.0",
+    "@react-native/eslint-config": "0.83.0",
+    "@release-it/conventional-changelog": "^10.0.1",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^19.1.12",
+    "commitlint": "^19.8.1",
+    "del-cli": "^6.0.0",
+    "eslint": "^9.39.2",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-ft-flow": "^3.0.11",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-react-native": "^5.0.0",
+    "jest": "^29.7.0",
+    "lefthook": "^2.0.3",
+    "prettier": "^3.0.0",
+    "react": "19.1.0",
+    "react-native": "0.81.5",
+    "react-native-builder-bob": "^0.40.13",
+    "react-native-gesture-handler": "^2.16.0",
+    "react-native-reanimated": "^3.0.0",
+    "react-native-svg": "^12.0.0",
+    "release-it": "^19.0.4",
+    "typescript": "~5.7.0"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "react-native-gesture-handler": ">=2.0.0",
+    "react-native-reanimated": ">=3.0.0",
+    "react-native-svg": ">=12.0.0",
+    "react-native-worklets": ">=0.3.0"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@4.11.0",
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "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": {
+          "name": "angular"
+        }
+      }
+    }
+  },
+  "create-react-native-library": {
+    "type": "library",
+    "languages": "js",
+    "tools": [
+      "eslint",
+      "jest",
+      "lefthook",
+      "release-it"
+    ],
+    "version": "0.57.0"
+  },
+  "resolutions": {
+    "@types/react": "^19.1.12",
+    "typescript": "5.7.3"
+  }
+}

package/src/components/TourOverlay.tsx

@@ -1,153 +0,0 @@
-import { memo, type ComponentType } from 'react';
-import { StyleSheet, Dimensions } from 'react-native';
-import Svg, { Path } from 'react-native-svg';
-import Animated, {
-  useAnimatedProps,
-  useAnimatedStyle,
-} from 'react-native-reanimated';
-import { useTour } from '../hooks/useTour';
-import type { InternalTourContextType } from '../types';
-
-const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
-
-const AnimatedPath = Animated.createAnimatedComponent(Path);
-const AnimatedView = Animated.View as unknown as ComponentType<any>;
-
-// Helper to create rounded rect path
-// x,y are top-left coordinates
-const createRoundedRectPath = (
-  x: number,
-  y: number,
-  w: number,
-  h: number,
-  r: number
-) => {
-  'worklet';
-  // Ensure radius doesn't exceed dimensions
-  const radius = Math.min(r, w / 2, h / 2);
-
-  // Standard SVG Path command for rounded rect
-  return `
-    M ${x + radius}, ${y}
-    H ${x + w - radius}
-    A ${radius} ${radius} 0 0 1 ${x + w}, ${y + radius}
-    V ${y + h - radius}
-    A ${radius} ${radius} 0 0 1 ${x + w - radius}, ${y + h}
-    H ${x + radius}
-    A ${radius} ${radius} 0 0 1 ${x}, ${y + h - radius}
-    V ${y + radius}
-    A ${radius} ${radius} 0 0 1 ${x + radius}, ${y}
-    Z
-  `;
-};
-
-export const TourOverlay = memo(() => {
-  const {
-    targetX,
-    targetY,
-    targetWidth,
-    targetHeight,
-    targetRadius,
-    opacity,
-    config,
-    currentStep,
-    steps,
-  } = useTour() as InternalTourContextType;
-
-  // Create the d string for the mask
-  // Outer rectangle covers the whole screen
-  // Inner shape is the "hole"
-  // fillRule="evenodd" makes the intersection transparent
-  const animatedProps = useAnimatedProps(() => {
-    const holePath = createRoundedRectPath(
-      targetX.value,
-      targetY.value,
-      targetWidth.value,
-      targetHeight.value,
-      targetRadius.value
-    );
-
-    const path = `
-      M 0,0 
-      H ${SCREEN_WIDTH} 
-      V ${SCREEN_HEIGHT} 
-      H 0 
-      Z 
-      ${holePath}
-    `;
-
-    return {
-      d: path,
-      fillOpacity: opacity.value,
-    };
-  });
-
-  const step = currentStep ? steps[currentStep] : null;
-  const isClickable = step?.clickable ?? false;
-
-  // Interaction Logic:
-  // 1. preventInteraction = true:
-  //    - Wrapper pointerEvents = 'box-none' (pass through) BUT SVG is auto?
-  //    - Actually, if we want to block OUTSIDE but allow INSIDE:
-  //      - SVG path normally blocks where it draws (the dark part).
-  //      - The 'hole' is empty, so touches pass through the hole to the app?
-  //      - YES, with fillRule="evenodd", the hole effectively has no fill.
-  //      - So if SVG is 'auto', touching the dark mask is blocked (if we consume touch).
-  //      - Touching the hole goes through to the app (GOOD for clickable).
-  //    - IF we want to BLOCK the hole (clickable=false):
-  //      - We need a transparent view covering the hole that consumes touches.
-  //
-  // 2. preventInteraction = false (default):
-  //    - Overlay shouldn't block anything?
-  //    - pointerEvents='none' on the whole container.
-
-  const shouldBlockOutside = config?.preventInteraction ?? false;
-
-  // If we don't want to block outside, we just let everything pass.
-  // But wait, if we let everything pass, we can't implement 'clickable=false' strictness?
-  // Usually preventInteraction=false means "just show the highlighter, let user do whatever".
-
-  const containerPointerEvents =
-    shouldBlockOutside && currentStep ? 'box-none' : 'none';
-
-  // If blocking outside, the SVG (which is absolute fill) needs to catch touches on the dark part.
-
-  // Blocker style for the hole (only if NOT clickable)
-  const blockerStyle = useAnimatedStyle(() => {
-    return {
-      position: 'absolute',
-      left: targetX.value,
-      top: targetY.value,
-      width: targetWidth.value,
-      height: targetHeight.value,
-      // We can match radius too if needed, but rect is fine for touch area usually
-      borderRadius: targetRadius.value,
-    };
-  });
-
-  return (
-    <AnimatedView
-      pointerEvents={containerPointerEvents}
-      style={StyleSheet.absoluteFill}
-    >
-      <Svg height="100%" width="100%" style={StyleSheet.absoluteFill}>
-        <AnimatedPath
-          animatedProps={animatedProps as any}
-          fill="black" // The backdrop color
-          fillRule="evenodd"
-          onPress={() => {
-            // Consume touch on the backdrop?
-          }}
-        />
-      </Svg>
-      {/* If strictly blocking interaction AND current step is NOT clickable, we cover the hole */}
-      {shouldBlockOutside && !isClickable && currentStep && (
-        <AnimatedView
-          style={blockerStyle}
-          pointerEvents="auto" // Catch touches
-          // backgroundColor="transparent" // Default
-        />
-      )}
-    </AnimatedView>
-  );
-});