✨ Add initial React package from SDK (#2649)

* ✨ Add initial React package from SDK

* ✅ Fix testing and add to workspaces

* 👷 Add main path for exports

* 📝 Update README with more info

* 📝 Update package name and version to align with previous

* ✅ Add testing run for packages

* ✅ Add missing js build step

* Consolidate build and test:ci scripts

* Remove redundancy

---------

Co-authored-by: Robert Wagner <rwwagner90@gmail.com>

Author: chuckcarpenter

.github/workflows/test.yml

@@ -42,31 +42,8 @@ jobs:
       - name: Check types
         run: pnpm types:check
 
-  test-unit:
-    name: Run Unit Tests
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout Repo
-        uses: actions/checkout@v4
-
-      - name: Setup pnpm
-        uses: wyvox/action-setup-pnpm@v3
-
-      - name: Install Dependencies
-        run: pnpm install
-
-      # Run Jest
-      - name: Run Unit Tests
-        run: pnpm test:unit:ci
-
-  #       - name: Publish code coverage
-  #         uses: paambaati/codeclimate-action@v2.7.4
-  #         env:
-  #           CC_TEST_REPORTER_ID: ${{ secrets.CC_TEST_REPORTER_ID }}
-
-  test-integration:
-    name: Run Integration Chrome Tests
+  test:
+    name: Tests
     runs-on: ubuntu-latest
 
     steps:
@@ -82,11 +59,8 @@ jobs:
       - name: Install Cypress Binary
         run: pnpm cypress install
 
-      - name: Build
-        run: pnpm build
-
       - name: Install dependencies and setup Cypress
         uses: cypress-io/github-action@v6
         with:
-          command: pnpm test:cy:ci:chrome
+          command: pnpm test:ci
           install: false

package.json

@@ -8,23 +8,20 @@
     "url": "git+https://github.com/shepherd-pro/shepherd.git"
   },
   "license": "MIT",
-  "maintainers": [
+  "authors": [
     "Robbie Wagner <rwwagner90@gmail.com>",
     "Chuck Carpenter <chuck@shipshape.io>"
   ],
   "scripts": {
-    "build": "pnpm -F shepherd.js build && pnpm build:landing",
+    "build": "pnpm -F '*' build",
     "dev": "pnpm watch",
     "docs": "node_modules/.bin/jsdoc -c .jsdoc.js --verbose",
-    "build:landing": "pnpm -F landing build",
     "lint": "pnpm -F '*' lint",
     "lint:fix": "pnpm -F '*' lint:fix",
     "lint:js": "pnpm -F '*' lint:js",
     "start": "pnpm watch",
-    "test:ci": "pnpm build && pnpm test:unit:ci && pnpm test:cy:ci:chrome",
-    "test:cy:ci:chrome": "pnpm -F cypress-tests test:ci:chrome",
+    "test:ci": "pnpm build && pnpm -F '*' test:ci",
     "test:cy:watch": "pnpm -F cypress-tests test:watch",
-    "test:unit:ci": "pnpm -F unit-tests test:ci",
     "test:unit:watch": "pnpm -F unit-tests test:watch",
     "types:check": "pnpm -F shepherd.js types:check",
     "view-coverage": "pnpm -F unit-tests view-coverage",
@@ -62,9 +59,5 @@
   "packageManager": "pnpm@8.15.4",
   "engines": {
     "node": "18.* || >= 20"
-  },
-  "authors": [
-    "Adam Schwartz <adam.flynn.schwartz@gmail.com>",
-    "Zack Bloom <zackbloom@gmail.com>"
-  ]
+  }
 }

packages/react/.gitignore

@@ -0,0 +1,175 @@
+# Based on https://raw.githubusercontent.com/github/gitignore/main/Node.gitignore
+
+# Logs
+
+logs
+_.log
+npm-debug.log_
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Caches 
+
+.cache
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+
+report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
+
+# Runtime data
+
+pids
+_.pid
+_.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+
+lib-cov
+
+# Coverage directory used by tools like istanbul
+
+coverage
+*.lcov
+
+# nyc test coverage
+
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+
+bower_components
+
+# node-waf configuration
+
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+
+build/Release
+
+# Dependency directories
+
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+
+web_modules/
+
+# TypeScript cache
+
+*.tsbuildinfo
+
+# Optional npm cache directory
+
+.npm
+
+# Optional eslint cache
+
+.eslintcache
+
+# Optional stylelint cache
+
+.stylelintcache
+
+# Microbundle cache
+
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+
+.node_repl_history
+
+# Output of 'npm pack'
+
+*.tgz
+
+# Yarn Integrity file
+
+.yarn-integrity
+
+# dotenv environment variable files
+
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+
+.parcel-cache
+
+# Next.js build output
+
+.next
+out
+
+# Nuxt.js build / generate output
+
+.nuxt
+dist
+
+# Gatsby files
+
+# Comment in the public line in if your project uses Gatsby and not Next.js
+
+# https://nextjs.org/blog/next-9-1#public-directory-support
+
+# public
+
+# vuepress build output
+
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+
+.temp
+
+# Docusaurus cache and generated files
+
+.docusaurus
+
+# Serverless directories
+
+.serverless/
+
+# FuseBox cache
+
+.fusebox/
+
+# DynamoDB Local files
+
+.dynamodb/
+
+# TernJS port file
+
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+
+.vscode-test
+
+# yarn v2
+
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+# IntelliJ based IDEs
+.idea
+
+# Finder (MacOS) folder config
+.DS_Store

packages/react/CHANGELOG.md

@@ -0,0 +1,42 @@
+## v4.3.0 (2024-01-21)
+
+## v4.0.1 (2022-07-06)
+
+#### :bug: Bug Fix
+
+- `lib`
+  - [#637](https://github.com/shipshapecode/react-shepherd/pull/637) Add children field for React 18 ([@andersaamodt](https://github.com/andersaamodt))
+
+#### Committers: 2
+
+- Anders ([@andersaamodt](https://github.com/andersaamodt))
+- Chuck Carpenter ([@chuckcarpenter](https://github.com/chuckcarpenter))
+
+## v3.3.1 (2020-11-13)
+
+#### :rocket: Enhancement
+
+- [#439](https://github.com/shipshapecode/react-shepherd/pull/439) ✨ Shepmaster expose more types ([@chuckcarpenter](https://github.com/chuckcarpenter))
+- [#391](https://github.com/shipshapecode/react-shepherd/pull/391) Manage secondary property on Step button ([@linsolas](https://github.com/linsolas))
+
+#### :bug: Bug Fix
+
+- [#528](https://github.com/shipshapecode/react-shepherd/pull/528) 🐛 Remove check for current action assignment ([@chuckcarpenter](https://github.com/chuckcarpenter))
+
+#### Committers: 4
+
+- Chuck Carpenter ([@chuckcarpenter](https://github.com/chuckcarpenter))
+- Hakeem Almidan ([@Hakeemmidan](https://github.com/Hakeemmidan))
+- Romain Linsolas ([@linsolas](https://github.com/linsolas))
+- [@cyremur](https://github.com/cyremur)
+
+## v2.0.0 (2019-08-29)
+
+#### :bug: Bug Fix
+
+- [#36](https://github.com/shipshapecode/react-shepherd/pull/36) Make custom button actions work, if specified ([@jmfirth](https://github.com/jmfirth))
+- [#38](https://github.com/shipshapecode/react-shepherd/pull/38) Fix adding steps ([@jmfirth](https://github.com/jmfirth))
+
+#### Committers: 1
+
+- Justin Firth ([@jmfirth](https://github.com/jmfirth))

packages/react/README.md

@@ -0,0 +1,75 @@
+# react
+
+[![NPM](https://img.shields.io/npm/v/@shepherdpro/react.svg)](https://www.npmjs.com/package/@shepherdpro/react)
+
+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 @shepherdpro/react
+```
+
+## Usage
+
+### Via Provider/Context
+
+```tsx
+import { Component, useContext } from 'react';
+import { ShepherdJourneyProvider, useShepherd } from '@shepherdpro/react';
+import newSteps from './steps';
+
+const tourOptions = {
+  defaultStepOptions: {
+    cancelIcon: {
+      enabled: true
+    }
+  },
+  useModalOverlay: true
+};
+
+function Button() {
+  const shepherd = useShepherd(ShepherdTourContext);
+  const tour = shepherd.Tour({
+    ...tourOptions,
+    steps: newSteps
+  });
+
+  return (
+    <button className="button dark" onClick={tour.start}>
+      Start Tour
+    </button>
+  );
+}
+
+export default function App() {
+  return (
+    <div>
+      <ShepherdJourneyProvider>
+        <Button />
+      </ShepherdJourneyProvider>
+    </div>
+  );
+}
+```
+
+## Configuration
+
+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.
+
+### apiKey
+
+`PropTypes.string`
+Used to connect your tours to a Pro instance to get additional user information and feedback.
+
+## Steps
+
+The options are the same as Shepherd [options](https://shepherdjs.dev/docs/Step.html).
+
+## License
+
+MIT