@ruc-lib/tour-guide 2.0.1 → 3.1.0

package/README.md

@@ -15,41 +15,52 @@ npm install @uxpractice/ruc-lib
 
 If you only need the Tour Guide component
 ```bash
-npm install @uxpractice/tour-guide
+npm install @ruc-lib/tour-guide
 ```
 
-## Usage
-### 1. Import the Module
-In your Angular module file (e.g., `app.module.ts`), import the `RuclibTourGuideModule`:
+### 📦 Version Compatibility
+ 
+Please ensure you install the correct version of `@ruc-lib/tour-guide` based on your Angular version.
+ 
+| Angular Version    | Compatible `@ruc-lib/tour-guide` Version     |
+|--------------------|---------------------------------------------|
+| 15.x.x             | `npm install @ruc-lib/tour-guide@^3.0.0`     |
+| 16.x.x             | `npm install @ruc-lib/tour-guide@^3.0.0`     |
 
-```typescript
-import { RuclibTourGuideModule } from '@uxpractice/tour-guide';
-import { AppComponent } from './app.component';
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-@NgModule({
-  declarations: [AppComponent],
-  imports: [
-    BrowserModule,
-    RuclibTourGuideModule
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
-})
-export class AppModule {}
+
+## Usage
+### 1. Import the Component
+In your Angular component file (e.g., `app.component.ts`), import the `RuclibTourGuideComponent`:
+
+```typescript
+import { Component } from '@angular/core';
+
+// For Complete Library
+import { RuclibTourGuideComponent } from '@uxpractice/ruc-lib/tour-guide';
+
+// For Individual Package
+import { RuclibTourGuideComponent } from '@ruc-lib/tour-guide';
+
+@Component({
+  selector: 'app-root',
+  imports: [RuclibTourGuideComponent],
+  templateUrl: './app.component.html',
+})
+export class AppComponent {
+  // Component code here
+}
 ```
 
 ### 2. Use the Component
-In your component's template, use the `<uxp-ruc-tour-guide>` selector and pass the configuration object to the `rucInputData` input.
+In your component's template, use the `<uxp-ruclib-tour-guide>` selector and pass the configuration object to the `rucInputData` input and the data array to the `dataSource` input.
 
 ```html
-<uxp-ruc-tour-guide 
+<uxp-ruclib-tour-guide 
     [rucInputData]="tourGuideConfig"
     [customTheme]="customTheme" 
     (rucEvent)="passEvent($event)" 
     [dataSource]="tourGuideData">
-</uxp-ruc-tour-guide>
+</uxp-ruclib-tour-guide>
 ```
 
 ## API Reference
@@ -58,9 +69,9 @@ In your component's template, use the `<uxp-ruc-tour-guide>` selector and pass t
 
 | Input          | Type               | Description                                       |
 |----------------|--------------------|---------------------------------------------------|
-| `rucInputData` | `tourGuideConfig`  | The main configuration object for the tour guide. |
+| `rucInputData` | `TourGuideConfig`  | The main configuration object for the tour guide. |
 | `customTheme`  | `string`           | An optional CSS class for custom theming.         |
-| `dataSource`   | `tourGuideData`    | An optional CSS class for custom theming.         |
+| `dataSource`   | `TourGuideData`    | Data for the tour guide.                          |
 
 ### Component Outputs
 
@@ -68,7 +79,7 @@ In your component's template, use the `<uxp-ruc-tour-guide>` selector and pass t
 |-----------|-----------|---------------------------------------------------|
 | `rucEvent`| `any`     | Emits events related to tour guide actions (e.g., 'skip', 'next', 'finish'). |
 
-### `tourGuideConfig`
+### `TourGuideConfig`
 This is the main configuration object for the Tour Guide component.
 
 | Property                 | Type                                                                | Description                                                           |
@@ -90,7 +101,7 @@ This is the main configuration object for the Tour Guide component.
 | `highlightBorderWidth`   | `string`                                                            | Width of the highlight border around the guided element.              |
 | `defaultPopupWidth`      | `string`                                                            | Default width of the tour guide popup.                                |
 
-### `tourGuideData`
+### `TourGuideData`
 This array of objects defines the content for each step of the tour guide.
 
 | Property   | Type                                                        | Description                                                           |
@@ -108,7 +119,12 @@ Here's an example of how to configure the Tour Guide component in your component
 
 ```typescript
 import { Component } from '@angular/core';
-import { TourGuideConfig, TourGuideData } from '@uxpractice/tour-guide';
+
+// For Complete Library
+import { TourGuideConfig, TourGuideData } from '@uxpractice/ruc-lib/tour-guide';
+
+// For Individual package
+import { TourGuideConfig, TourGuideData } from '@ruc-lib/tour-guide';
 
 @Component({
   selector: 'app-root',
@@ -183,6 +199,22 @@ export class AppComponent {
 }
 ```
 
+> ⚠️ **IMPORTANT: Custom Theme Usage in Angular Material**
+
+When implementing **custom themes**, such as:
+
+```scss
+.custom-theme-1 {
+  @include angular-material-theme($custom-theme);
+}
+
+// You must also include the typography mixin to ensure text styles are applied correctly as shown below:
+.custom-theme-1 {
+  @include angular-material-theme($custom-theme);
+  @include mat.typography-level($theme-custom-typography-name, body-1);
+}
+```
+
 ## Contribution
 
 Contributions are welcome! Feel free to open issues or pull requests for any enhancements or fixes.