react-shepherd 4.3.0 → 5.0.0-alpha.3

package/LICENSE.md

@@ -0,0 +1,9 @@
+The MIT License (MIT)
+
+Copyright (c) 2024
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -1,50 +1,43 @@
-# react-shepherd
+# react
 
-<div>
-  <a href="https://shipshape.io">
-    <img align="left" src="http://i.imgur.com/DWHQjA5.png" alt="Ship Shape" width="50" height="50"/>
-  </a>
+[![NPM](https://img.shields.io/npm/v/@shepherdpro/react.svg)](https://www.npmjs.com/package/@shepherdpro/react)
 
-**[react-shepherd is built and maintained by Ship Shape. Contact us for web app consulting, development, and training for your project](https://shipshape.io/)**.
-
-</div>
-
-[![NPM](https://img.shields.io/npm/v/react-shepherd.svg)](https://www.npmjs.com/package/react-shepherd)
-[![Test Status](https://github.com/shipshapecode/react-shepherd/workflows/Test/badge.svg)](https://github.com/shipshapecode/react-shepherd/actions?query=workflow%3ATest)
-[![Maintainability](https://api.codeclimate.com/v1/badges/d5273e1d465352a6df4e/maintainability)](https://codeclimate.com/github/shipshapecode/react-shepherd/maintainability)
-[![Test Coverage](https://api.codeclimate.com/v1/badges/d5273e1d465352a6df4e/test_coverage)](https://codeclimate.com/github/shipshapecode/react-shepherd/test_coverage)
-[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
-
-This is a React wrapper for the [Shepherd](https://github.com/shipshapecode/shepherd), site tour, library.
+This is a React wrapper for the [Shepherd](https://github.com/@shepherdpro/react) tour library.
 It's mainly a wrapper around the Shepherd library that exposes the tour object and methods to the context object
 that can be passed into props for dynamic interactivity.
 
 ## Install
 
+Use this simple NPM command or whatever package manager is your favorite.
+
 ```bash
-npm install --save react-shepherd
+npm install --save @shepherdpro/react
 ```
 
 ## Usage
 
 ### Via Provider/Context
 
-```jsx
-import React, { Component, useContext } from "react";
-import { ShepherdTour, ShepherdTourContext } from "react-shepherd";
-import newSteps from "./steps";
+```tsx
+import { Component, useContext } from 'react';
+import { ShepherdJourneyProvider, useShepherd } from '@shepherdpro/react';
+import newSteps from './steps';
 
 const tourOptions = {
   defaultStepOptions: {
     cancelIcon: {
-      enabled: true,
-    },
+      enabled: true
+    }
   },
-  useModalOverlay: true,
+  useModalOverlay: true
 };
 
 function Button() {
-  const tour = useContext(ShepherdTourContext);
+  const shepherd = useShepherd(ShepherdTourContext);
+  const tour = shepherd.Tour({
+    ...tourOptions,
+    steps: newSteps
+  });
 
   return (
     <button className="button dark" onClick={tour.start}>
@@ -56,106 +49,22 @@ function Button() {
 export default function App() {
   return (
     <div>
-      <ShepherdTour steps={newSteps} tourOptions={tourOptions}>
+      <ShepherdJourneyProvider>
         <Button />
-      </ShepherdTour>
+      </ShepherdJourneyProvider>
     </div>
   );
 }
 ```
 
-### Via Hook
-
-```jsx
-import React, { Component } from "react";
-import { useShepherdTour } from "react-shepherd";
-import newSteps from "./steps";
-
-const tourOptions = {
-  defaultStepOptions: {
-    cancelIcon: {
-      enabled: true,
-    },
-  },
-  useModalOverlay: true,
-};
-
-export default function App() {
-  const tour = useShepherdTour({ tourOptions, steps: newSteps });
+## Configuration
 
-  return (
-    <button class="button dark" onClick={tour.start}>
-      Start Tour
-    </button>
-  );
-}
-```
+The following configuration options for a tour can be set on the `useShepherd` hook to control the way that Shepherd is used. This is simply a POJO passed to Shepherd to use the options noted in the Shepherd Tour [options](https://shepherdjs.dev/docs/Tour.html). You can also pass an API Key to use [Shepherd Pro](https://shepherdpro.com) features for analytics related events tracking.
 
-## Configuration
+### apiKey
 
-The following configuration options for a tour can be set on the ShepherdTour to control the way that Shepherd is used. This is simply a POJO passed to Shepherd to use the options noted in the Shepherd Tour [options](https://shepherdjs.dev/docs/Tour.html).
-**The only required option is `steps`, which is an array passed to the props.**
-
-### tourOptions
-
-`PropTypes.object`
-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.
-
-### steps
-
-`PropTypes.array`
-You must pass an array of steps to `steps`, something like this:
-
-```js
-const steps = [
-  {
-    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'
-      }
-    ],
-    classes: 'custom-class-name-1 custom-class-name-2',
-    highlightClass: 'highlight',
-    scrollTo: false,
-    cancelIcon: {
-      enabled: true,
-    },
-    title: 'Welcome to React-Shepherd!',
-    text: ['React-Shepherd is a JavaScript library for guiding users through your React app.'],
-    when: {
-      show: () => {
-        console.log('show step');
-      },
-      hide: () => {
-        console.log('hide step');
-      }
-    }
-  },
-  // ...
-];
-```
+`PropTypes.string`
+Used to connect your tours to a Pro instance to get additional user information and feedback.
 
 ## Steps
 

package/dist/index.d.ts

@@ -1,23 +1,24 @@
-import React, { FC } from 'react';
-import Shepherd from 'shepherd.js';
-import Step from 'shepherd.js/src/types/step';
-import Tour from 'shepherd.js/src/types/tour';
-type StepType = 'back' | 'cancel' | 'next';
-export interface ShepherdButtonWithType extends Step.StepOptionsButton {
-    type?: StepType;
-}
-export interface ShepherdOptionsWithType extends Step.StepOptions {
-    buttons?: ReadonlyArray<Step.StepOptionsButton | ShepherdButtonWithType>;
-}
-interface ShepherdProps {
-    steps: Array<ShepherdOptionsWithType>;
-    tourOptions: Tour.TourOptions;
-    children: React.ReactNode;
-}
-declare const ShepherdTourContext: React.Context<Shepherd.Tour | null>;
-declare const ShepherdTourContextConsumer: React.Consumer<Shepherd.Tour | null>;
-export declare const useShepherdTour: ({ tourOptions, steps }: Pick<ShepherdProps, 'steps' | 'tourOptions'>) => Shepherd.Tour;
-export declare const ShepherdTour: FC<ShepherdProps>;
-export type { default as Step } from 'shepherd.js/src/types/step';
-export type { default as Tour } from 'shepherd.js/src/types/tour';
-export { ShepherdTourContextConsumer as TourMethods, ShepherdTourContext };
+import { Consumer } from 'react';
+import { Context } from 'react';
+import { FC } from 'react';
+import { ReactNode } from 'react';
+import { ShepherdPro } from 'shepherd.js/tour';
+
+export declare const JourneyMethods: Consumer<ShepherdContextType | undefined>;
+
+declare interface ShepherdContextType {
+    Shepherd: typeof ShepherdPro;
+}
+
+export declare const ShepherdJourneyContext: Context<ShepherdContextType | undefined>;
+
+export declare const ShepherdJourneyProvider: FC<ShepherdProviderProps>;
+
+declare interface ShepherdProviderProps {
+    apiKey?: string;
+    children?: ReactNode;
+}
+
+export declare const useShepherd: () => ShepherdPro;
+
+export { }