Update develop

.github/workflows/deploy.yml

@@ -0,0 +1,41 @@
+name: Deploy Compose Web App
+
+on:
+  pull_request:
+    branches:
+      - main
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: write
+
+jobs:
+  test-and-build-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - uses: actions/cache@v4
+        with:
+          path: |
+            ~/.gradle/caches
+            ~/.gradle/wrapper
+          key: ${{ runner.os }}-${{ hashFiles('**/*.gradle*') }}-${{ hashFiles('**/gradle/wrapper/gradle-wrapper.properties') }}-${{ hashFiles('**/buildSrc/**/*.kt') }}
+
+      - uses: actions/setup-java@v4
+        with:
+          distribution: 'temurin'
+          java-version: '17'
+
+      - name: Build
+        run: |
+          ./gradlew :composeApp:wasmJsBrowserDistribution --no-configuration-cache
+
+      - name: Deploy
+        uses: JamesIves/github-pages-deploy-action@v4
+        with:
+          branch: gh-pages
+          folder: composeApp/build/dist/wasmJs/productionExecutable

.github/workflows/publish.yml

@@ -54,4 +54,11 @@ jobs:
 
           SIGNING_KEY: ${{ secrets.SIGNING_KEY }}
 
-          SONATYPE_STAGING_PROFILE_ID: ${{ secrets.SONATYPE_STAGING_PROFILE_ID }}
+          SONATYPE_STAGING_PROFILE_ID: ${{ secrets.SONATYPE_STAGING_PROFILE_ID }}
+
+
+      - name: HTTP Request Action
+        uses: fjogeleit/http-request-action@v1.16.4
+        with:
+          url: 'https://ossrh-staging-api.central.sonatype.com/manual/upload/defaultRepository/ly.com.tahaben'
+          bearerToken: ${{  secrets.OSSRH_HEADER  }}

.gitignore

@@ -24,4 +24,15 @@ local.properties
 /.idea/migrations.xml
 /.idea/misc.xml
 /.idea/vcs.xml
-/convention-plugins/build/*
+/convention-plugins/build/*
+**/build/
+xcuserdata
+!src/**/build/
+.idea
+captures
+*.xcodeproj/*
+!*.xcodeproj/project.pbxproj
+!*.xcodeproj/xcshareddata/
+!*.xcodeproj/project.xcworkspace/
+!*.xcworkspace/contents.xcworkspacedata
+**/xcshareddata/WorkspaceSettings.xcsettings

README.md

@@ -11,13 +11,25 @@
 
 # Showcase Layout Compose
 
-Create a beautiful animated showcase effect for your compose UIs easily !
+Create beautiful animated showcase effects for your compose UIs easily!
 
-**Now with multiplatform support :D**
+**Now with multiplatform support and two different showcase layouts to choose from:**
+- **ShowcaseLayout**: Classic full-screen overlay with cutouts
+- **TargetShowcaseLayout**: Modern targeted highlighting with customizable shapes
+
+## Web demo
+[Click here](https://tahaak67.github.io/ShowcaseLayoutCompose/index.html) to try showcase layout for web in your browser!
 
 ## Demo
 
-<img src="metadata/gif/slc-light.gif" alt="Library demo GIF" width="300" />
+|                               ShowcaseLayout                                |
+|:---------------------------------------------------------------------------:|
+| <img src="metadata/gif/slc-light.gif" alt="Library demo GIF" width="300" /> | 
+
+https://github.com/user-attachments/assets/faa5dc19-606a-4731-80b1-44cbf6d08fdc
+
+
+
 
 <img src="metadata/screenshots/screenshot-13.png" alt="Library demo GIF" width="300" />.<img src="metadata/screenshots/screenshot-14.png" alt="Library demo GIF" width="300" />
 
@@ -31,7 +43,7 @@ Showcase Layout Compose can be used in **both** Jetpack Compose (native Android)
 Add the dependency to your module's `build.gradle` file like below
 
 ``` kotlin
-implementation("ly.com.tahaben:showcase-layout-compose:1.0.5")
+implementation("ly.com.tahaben:showcase-layout-compose:1.0.8")
 ```
 ## Usage
 
@@ -73,7 +85,10 @@ Text(
     modifier = Modifier.showcase(
         // should start with 1 and increment with 1 for each time you use Modifier.showcase()
         index = 1,
-        message =
+        message = ShowcaseMsg(
+            "This is a showcase message",
+            textStyle = TextStyle(color = Color.White)
+        )
     ),
     text = "ShowcaseLayout Test 1"
 )
@@ -122,7 +137,96 @@ similarly you can show a greeting using <code>showGreeting</code> and passing th
 </details>
 
 
-Done, our text is now showcased!, customize it further with Additional parameters
+Done, our text is now showcased!, customize it further with Additional parameters.
+
+## TargetShowcaseLayout (New!)
+
+Starting from version 1.0.6, Showcase Layout Compose now offers a new layout option: `TargetShowcaseLayout`. This layout provides a different visual approach to showcasing UI elements by highlighting specific targets with customizable shapes rather than the full-screen approach of the original ShowcaseLayout.
+
+### Key Features
+
+- Highlights target elements with customizable shapes (circle, rectangle, or rounded rectangle)
+- Smooth animations between targets
+- Pulsing effect around the target for better visibility
+- All the same customization options as the original ShowcaseLayout
+
+### Usage
+
+You can use TargetShowcaseLayout directly:
+
+```kotlin
+var isShowcasing by remember { mutableStateOf(true) }
+
+TargetShowcaseLayout(
+    isShowcasing = isShowcasing,
+    onFinish = { isShowcasing = false },
+    targetShape = TargetShape.ROUNDED_RECTANGLE, // CIRCLE, RECTANGLE, or ROUNDED_RECTANGLE
+    cornerRadius = 8.dp, // Only used with ROUNDED_RECTANGLE
+    animateToNextTarget = true, // Smooth animation between targets
+    greeting = ShowcaseMsg(
+        "Welcome to TargetShowcaseLayout!",
+        textStyle = TextStyle(color = Color.White)
+    )
+) {
+    // Your UI content here
+    Column {
+        Text(
+            modifier = Modifier.showcase(
+                index = 1,
+                message = ShowcaseMsg(
+                    "This element is highlighted with TargetShowcaseLayout",
+                    textStyle = TextStyle(color = Color.White)
+                )
+            ),
+            text = "Target Showcase Example"
+        )
+    }
+}
+```
+
+|                              TargetShowcaseLayout with CIRCLE shape                              |                          TargetShowcaseLayout with RECTANGLE shape                           |                           TargetShowcaseLayout with ROUNDED_RECTANGLE shape                            |
+|:------------------------------------------------------------------------------------------------:|:--------------------------------------------------------------------------------------------:|:------------------------------------------------------------------------------------------------------:|
+| ![screenshot-targetshocase-circle.png](metadata/screenshots/screenshot-targetshocase-circle.png) | ![screenshot-targetshocase-rect.png](metadata/screenshots/screenshot-targetshocase-rect.png) | ![screenshot-targetshocase-roundrect.png](metadata/screenshots/screenshot-targetshocase-roundrect.png) |
+
+### TargetShowcaseLayout vs ShowcaseLayout
+
+| Feature | TargetShowcaseLayout | ShowcaseLayout |
+|---------|---------------------|----------------|
+| Visual style | Highlights specific targets with shapes | Full-screen overlay with cutouts |
+| Target shapes | Circle, Rectangle, Rounded Rectangle | Circle, Rectangle, Rounded Rectangle |
+| Animations | Smooth transitions between targets | Fade transitions |
+| Pulsing effect | Yes | No |
+| Use cases | Focused UI tours, precise element highlighting | General app tours, feature introductions |
+
+### TargetShowcaseLayout Parameters
+
+In addition to the parameters shared with ShowcaseLayout, TargetShowcaseLayout offers:
+
+```kotlin
+TargetShowcaseLayout(
+    // Common parameters (same as ShowcaseLayout)
+    isShowcasing = isShowcasing,
+    isDarkLayout = false,
+    initIndex = 0,
+    animationDuration = 1000,
+    onFinish = { isShowcasing = false },
+    greeting = ShowcaseMsg(
+        "Welcome to TargetShowcaseLayout!",
+        textStyle = TextStyle(color = Color.White)
+    ),
+    lineThickness = 5.dp,
+
+    // TargetShowcaseLayout specific parameters
+    targetShape = TargetShape.CIRCLE, // CIRCLE, RECTANGLE, or ROUNDED_RECTANGLE
+    cornerRadius = 8.dp, // Only used with ROUNDED_RECTANGLE
+    animateToNextTarget = true // Smooth animation between targets, otherwise shrink and expand on each target
+) {
+    // Your UI content here
+}
+```
+
+
+<!-- SCREENSHOT PLACEHOLDER: Add a side-by-side comparison of the same UI with both layouts -->
 
 #### Additional parameters
 
@@ -294,11 +398,17 @@ In recent releases logs have been disabled by default, to print log statement of
 ```
 
 
-## Complete Example
+## Complete Examples
+
+### ShowcaseLayout Example
+For a complete example of the original ShowcaseLayout, check out [MainScreen.kt](https://github.com/tahaak67/ShowcaseLayoutCompose/blob/main/app/src/main/java/ly/com/tahaben/showcaselayoutcompose/ui/MainScreen.kt).
+
+### TargetShowcaseLayout Example
+For an example of the new TargetShowcaseLayout, check out the [App.kt](https://github.com/tahaak67/ShowcaseLayoutCompose/blob/main/composeApp/src/commonMain/kotlin/App.kt) file in the composeApp module.
+
+You can also clone/download this repository and run the demo app to see both layouts in action.
+
 
-For a complete example check
-out [MainScreen.kt](https://github.com/tahaak67/ShowcaseLayoutCompose/blob/main/app/src/main/java/ly/com/tahaben/showcaselayoutcompose/ui/MainScreen.kt) \
-or clone/download this repository and check the app module.
 
 ## Contributing
 

app/build.gradle.kts

@@ -0,0 +1,67 @@
+plugins {
+    alias(libs.plugins.androidApplication)
+    alias(libs.plugins.jetbrainsKotlinAndroid)
+    alias(libs.plugins.jetbrainsCompose)
+    alias(libs.plugins.compose.compiler)
+}
+
+android {
+    namespace = "ly.com.tahaben.showcaselayoutcompose"
+    compileSdk = 34
+
+    defaultConfig {
+        applicationId = "ly.com.tahaben.showcaselayoutcompose"
+        minSdk = 21
+        targetSdk = 33
+        versionCode= 5
+        versionName ="1.0.4"
+
+        testInstrumentationRunner= "androidx.test.runner.AndroidJUnitRunner"
+        vectorDrawables {
+            useSupportLibrary= true
+        }
+    }
+
+    buildTypes {
+        getByName("release") {
+            isMinifyEnabled = false
+        }
+    }
+    compileOptions {
+        sourceCompatibility= JavaVersion.VERSION_1_8
+        targetCompatibility =JavaVersion.VERSION_1_8
+    }
+    kotlinOptions {
+        jvmTarget = "1.8"
+    }
+    buildFeatures {
+        compose =true
+        buildConfig= true
+    }
+
+    packagingOptions {
+        resources {
+            excludes += "/META-INF/{AL2.0,LGPL2.1}"
+        }
+    }
+}
+
+dependencies {
+    val composeBom = platform("androidx.compose:compose-bom:2024.02.02")
+    implementation(composeBom)
+    androidTestImplementation(composeBom)
+    implementation ("androidx.core:core-ktx:1.12.0")
+    implementation ("androidx.compose.ui:ui")
+    implementation ("androidx.compose.material:material")
+    implementation("androidx.navigation:navigation-compose:2.7.6")
+    implementation ("androidx.compose.ui:ui-tooling-preview")
+    implementation ("androidx.lifecycle:lifecycle-runtime-ktx:2.7.0")
+    implementation ("androidx.activity:activity-compose:1.8.2")
+    implementation (project(":showcase-layout-compose"))
+    testImplementation ("junit:junit:4.13.2")
+    androidTestImplementation ("androidx.test.ext:junit:1.1.5")
+    androidTestImplementation ("androidx.test.espresso:espresso-core:3.5.1")
+    androidTestImplementation ("androidx.compose.ui:ui-test-junit4")
+    debugImplementation ("androidx.compose.ui:ui-tooling")
+    debugImplementation ("androidx.compose.ui:ui-test-manifest")
+}

app/proguard-rules.pro

@@ -1,6 +1,6 @@
 # Add project specific ProGuard rules here.
 # You can control the set of applied configuration files using the
-# proguardFiles setting in build.gradle.
+# proguardFiles setting in build.gradle.kts.
 #
 # For more details, see
 #   http://developer.android.com/guide/developing/tools/proguard.html