From a64ca4b21820d2e210165e6230855cfa79db2074 Mon Sep 17 00:00:00 2001 From: Robert Wagner Date: Wed, 14 Jan 2026 11:46:43 -0500 Subject: [PATCH 1/4] Keep trying to make release-plan work --- .gitignore | 2 +- projects/shepherd/README.md | 2 ++ projects/shepherd/ng-package.json | 2 +- projects/shepherd/package.json | 6 ++++-- 4 files changed, 8 insertions(+), 4 deletions(-) diff --git a/.gitignore b/.gitignore index 2bbaa6c2e..4f7569edf 100644 --- a/.gitignore +++ b/.gitignore @@ -1,7 +1,7 @@ # See http://help.github.com/ignore-files/ for more about ignoring files. # compiled output -/dist +dist /tmp /out-tsc diff --git a/projects/shepherd/README.md b/projects/shepherd/README.md index 2331bc3ee..ddba4d609 100644 --- a/projects/shepherd/README.md +++ b/projects/shepherd/README.md @@ -22,6 +22,8 @@ This is an Angular wrapper for the [Shepherd](https://github.com/shipshapecode/s - Angular 17: 17.x - Angular 18: 18.x - Angular 19: 19.x +- Angular 20: 20.x +- Angular 21: 21.x This has not been tested in anything but Angular 8+. It may or may not work in previous versions or subsequent versions of Angular. We would love to support multiple versions, if people with more Angular knowledge would be willing to help us out! diff --git a/projects/shepherd/ng-package.json b/projects/shepherd/ng-package.json index 03a55c8e6..7f36d1157 100644 --- a/projects/shepherd/ng-package.json +++ b/projects/shepherd/ng-package.json @@ -1,6 +1,6 @@ { "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", - "dest": "../../dist/angular-shepherd", + "dest": "dist", "lib": { "entryFile": "src/public_api.ts" }, diff --git a/projects/shepherd/package.json b/projects/shepherd/package.json index 8405311eb..c4ebd1c13 100644 --- a/projects/shepherd/package.json +++ b/projects/shepherd/package.json @@ -27,9 +27,11 @@ "@angular/core": "^21.0.0" }, "publishConfig": { - "registry": "https://registry.npmjs.org", - "directory": "../../dist/angular-shepherd" + "registry": "https://registry.npmjs.org" }, + "files": [ + "dist" + ], "release-plan": { "tagFormat": "v${version}" } From dc1ca9a1accd033ae4e809ad81e43b9806f88c37 Mon Sep 17 00:00:00 2001 From: Robert Wagner Date: Wed, 14 Jan 2026 11:50:23 -0500 Subject: [PATCH 2/4] Copy root README --- package.json | 2 +- projects/shepherd/README.md | 247 ------------------------------------ 2 files changed, 1 insertion(+), 248 deletions(-) delete mode 100644 projects/shepherd/README.md diff --git a/package.json b/package.json index dd538dda9..5a91cf7fd 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ }, "scripts": { "build": "ng build", - "build_lib": "ng build shepherd", + "build_lib": "ng build shepherd && cp README.md projects/shepherd/dist/", "e2e": "ng e2e", "lint": "ng lint", "ng": "ng", diff --git a/projects/shepherd/README.md b/projects/shepherd/README.md deleted file mode 100644 index ddba4d609..000000000 --- a/projects/shepherd/README.md +++ /dev/null @@ -1,247 +0,0 @@ -# angular-shepherd - -Ship Shape - -**[angular-shepherd is built and maintained by Ship Shape. Contact us for web app consulting, development, and training for your project](https://shipshape.io/)**. - -[![npm version](https://badge.fury.io/js/angular-shepherd.svg)](http://badge.fury.io/js/angular-shepherd) ![Download count all time](https://img.shields.io/npm/dt/angular-shepherd.svg) [![npm](https://img.shields.io/npm/dm/angular-shepherd.svg)]() ![CI Build](https://github.com/shipshapecode/angular-shepherd/workflows/CI%20Build/badge.svg) - -This is an Angular wrapper for the [Shepherd](https://github.com/shipshapecode/shepherd), site tour, library. It provides additional functionality, on top of Shepherd, as well. - -## Compatibility - -- Angular 8: 0.5.0 -- Angular 9: 0.6.0 -- Angular 10: 0.7.0 -- Angular 11: 11.x -- Angular 12: 12.x -- Angular 13: 13.x -- Angular 14: 14.x -- Angular 15: 15.x -- Angular 16: 16.x -- Angular 17: 17.x -- Angular 18: 18.x -- Angular 19: 19.x -- Angular 20: 20.x -- Angular 21: 21.x - -This has not been tested in anything but Angular 8+. It may or may not work in previous versions or subsequent versions of Angular. We would love to support multiple versions, if people with more Angular knowledge would be willing to help us out! - -## Installation - -```bash -npm install angular-shepherd --save -``` - -## Usage - -**NOTE: This may not be the proper Angular way to do everything, as I am not an Angular dev, so please let me know if you have suggestions!** - -Shepherd ships a single style file, which you will need to include. You can do so by adding it to your angular.json. - -```json - "styles": [ - "node_modules/shepherd.js/dist/css/shepherd.css" - ], -``` - -Then, you will need to inject the `ShepherdService` to be able to interact with Shepherd and call `addSteps` to add your steps, `start` to start the tour, etc. - -You could either do this at the application level, in your application component or on a per component or per route/view basis. - -**NOTE: It is highly recommended to inject ShepherdService into your `app.component.ts`. Injecting it at the app level ensures you only create one instance of Shepherd.** - -In that component you will want to use `AfterViewInit` to `addSteps` to the Shepherd service. - -```typescript -import { Component, type AfterViewInit } from '@angular/core'; -import { ShepherdService } from 'angular-shepherd'; -import { steps as defaultSteps, defaultStepOptions } from '../data'; - -@Component({ - selector: 'shepherd', - templateUrl: './shepherd.component.html', - styleUrls: ['./shepherd.component.css'] -}) -export class ShepherdComponent implements AfterViewInit { - constructor(private shepherdService: ShepherdService) {} - - ngAfterViewInit() { - this.shepherdService.defaultStepOptions = defaultStepOptions; - this.shepherdService.modal = true; - this.shepherdService.confirmCancel = false; - this.shepherdService.addSteps(defaultSteps); - this.shepherdService.start(); - } -} -``` - -## Configuration - -The following configuration options can be set on the ShepherdService to control the way that Shepherd is used. **The only required option is `steps`, which is set via `addSteps`.** - -### confirmCancel - -`confirmCancel` is a boolean flag, when set to `true` it will pop up a native browser confirm window on cancel, to ensure you want to cancel. - -### confirmCancelMessage - -`confirmCancelMessage` is a string to display in the confirm dialog when `confirmCancel` is set to true. - -### defaultStepOptions - -`defaultStepOptions` is used to set the options that will be applied to each step by default. You can pass in any of the options that you can with Shepherd. - -**⚠️ You must set `defaultStepOptions` _BEFORE_ calling `addSteps` to set the steps.** - -It will be an object of a form something like: - -```js -this.shepherdService.defaultStepOptions = { - classes: 'custom-class-name-1 custom-class-name-2', - scrollTo: false, - cancelIcon: { - enabled: true - } -}; -``` - -> **default value:** `{}` - -### requiredElements - -`requiredElements` is an array of objects that indicate DOM elements that are **REQUIRED** by your tour and must exist and be visible for the tour to start. If any elements are not present, it will keep the tour from starting. - -You can also specify a message, which will tell the user what they need to do to make the tour work. - -**⚠️ You must set `requiredElements` _BEFORE_ calling `addSteps` to set the steps.** - -_Example_ - -```js -this.shepherdService.requiredElements = [ - { - selector: '.search-result-element', - message: 'No search results found. Please execute another search, and try to start the tour again.', - title: 'No results' - }, - { - selector: '.username-element', - message: 'User not logged in, please log in to start this tour.', - title: 'Please login' - } -]; -``` - -> **default value:** `[]` - -### modal - -`modal` is a boolean, that should be set to true, if you would like the rest of the screen, other than the current element, greyed out, and the current element highlighted. If you do not need modal functionality, you can remove this option or set it to false. - -> **default value:** `false` - -### addSteps - -You must pass an array of steps to `addSteps`, something like this: - -```js -this.shepherdService.addSteps([ - { - id: 'intro', - attachTo: { - element: '.first-element', - on: 'bottom' - }, - beforeShowPromise: function() { - return new Promise(function(resolve) { - setTimeout(function() { - window.scrollTo(0, 0); - resolve(); - }, 500); - }); - }, - buttons: [ - { - classes: 'shepherd-button-secondary', - text: 'Exit', - type: 'cancel' - }, - { - classes: 'shepherd-button-primary', - text: 'Back', - type: 'back' - }, - { - classes: 'shepherd-button-primary', - text: 'Next', - type: 'next' - } - ], - cancelIcon: { - enabled: true - }, - classes: 'custom-class-name-1 custom-class-name-2', - highlightClass: 'highlight', - scrollTo: false, - title: 'Welcome to Angular-Shepherd!', - text: ['Angular-Shepherd is a JavaScript library for guiding users through your Angular app.'], - when: { - show: () => { - console.log('show step'); - }, - hide: () => { - console.log('hide step'); - } - } - }, - ... -]); -``` - -## Buttons - -In Shepherd, you can have as many buttons as you want inside a step. You can build an object with some premade buttons, making it easier to manipulate and insert in new steps. Buttons by default accept three different types: back, cancel, next. In this simple example, we have three buttons: each one with different types and classes. - -```js -const builtInButtons = { - cancel: { - classes: 'cancel-button', - text: 'Cancel', - type: 'cancel' - }, - next: { - classes: 'next-button', - text: 'Next', - type: 'next' - }, - back: { - classes: 'back-button', - secondary: true, - text: 'Back', - type: 'back' - } -}; -``` - -Buttons have an action property, which must be a function. Whenever the button is clicked, the function will be executed. You can use it for default shepherd functions, like `this.shepherdService.complete()` or `this.shepherdService.next()`, or create your own function to use for the action. - -```js -const builtInButtons = { - complete: { - classes: 'complete-button', - text: 'Finish Tutorial', - action: function () { - return console.log('button clicked'); - } - } -}; -``` - -**⚠️ You can't set up a type and an action at the same time inside a button**. - -To learn more about button properties, look at the [documentation](https://docs.shepherdjs.dev/api/step/interfaces/stepoptionsbutton/). - -## Step Options - -See the [Step docs](https://docs.shepherdjs.dev/api/step/classes/step/) for all available Step options. From 95f8ee7f25f0717cc6afbf450768f74242bd834a Mon Sep 17 00:00:00 2001 From: Robert Wagner Date: Wed, 14 Jan 2026 11:59:33 -0500 Subject: [PATCH 3/4] Update exports --- projects/shepherd/package.json | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/projects/shepherd/package.json b/projects/shepherd/package.json index c4ebd1c13..af76873d2 100644 --- a/projects/shepherd/package.json +++ b/projects/shepherd/package.json @@ -32,6 +32,18 @@ "files": [ "dist" ], + "module": "./dist/fesm2022/angular-shepherd.mjs", + "types": "./dist/types/angular-shepherd.d.ts", + "exports": { + "./package.json": { + "default": "./package.json" + }, + ".": { + "types": "./dist/types/angular-shepherd.d.ts", + "default": "./dist/fesm2022/angular-shepherd.mjs" + } + }, + "sideEffects": false, "release-plan": { "tagFormat": "v${version}" } From 2ce895558686c3e4924e6b9e3415a9802c406bdf Mon Sep 17 00:00:00 2001 From: Robert Wagner Date: Wed, 14 Jan 2026 12:03:46 -0500 Subject: [PATCH 4/4] Update package.json --- package.json | 2 -- 1 file changed, 2 deletions(-) diff --git a/package.json b/package.json index 5a91cf7fd..4f409d0ba 100644 --- a/package.json +++ b/package.json @@ -14,8 +14,6 @@ "e2e": "ng e2e", "lint": "ng lint", "ng": "ng", - "npm_pack": "cd dist/angular-shepherd && npm pack", - "package": "npm run build_lib && npm run npm_pack", "start": "ng serve", "test": "ng test" },