@okendo/shopify-hydrogen 0.0.1

package/README.md

@@ -0,0 +1,44 @@
+# Okendo Hydrogen React Components #
+
+This is the React component library to support Okendo Widget Plus Widgets in Shopify Hydrogen Projects.
+
+Currently we support server side components for 2 widgets:
+1. Reviews List
+2. Star Ratings
+
+This includes:
+## OkendoProvider.server ##
+This retrieves the Widget Plus configuration from our public API.
+
+This should wrap as high up in the React component tree as possible.
+
+In the sample Shopify Hydrogen project in `App.server.jsx` we include it as the first child of `<ShopifyProvider>`.
+
+The final server side render/output includes:
+* Okendo Subscriber Settings JSON
+* Widget Pre-Render Style Tags Metafield - This is the "Above the fold" CSS essential for rendering SSR'd Okendo Reviews Widget (first page) and Star Ratings - This ensures styled widgets before client-side hydration occurs.
+* Base CSS Vars
+* Any custom CSS specified in the Okendo Admin.
+
+## OkendoStarRating.server ##
+This is the server-side rendered Star Rating widget - It then invokes the client side `OkendoWidget.client.tsx` component to perform client side hydration.
+
+## OkendoReviewsWidget.server ##
+This is the server-side rendered Reviews List widget - It then invokes the client side `OkendoWidget.client.tsx` component to perform client side hydration.
+
+
+### How do I use this in my Shopify Hydrogen project? ###
+* Your Shopify Hydrogen app will require the following variables added to your `.env` file:
+** `VITE_STORE_DOMAIN`: Your myshopify.com URL
+** `VITE_SHOPIFY_STOREFRONT_TOKEN`: Your Shopify App Storefront Token - See: https://shopify.dev/api/examples/storefront-api
+** `VITE_OKENDO_SUBSCRIBER_ID`: Your Okendo Subscriber ID - Issued by Okendo
+** `VITE_OKENDO_API_DOMAIN`: The Okendo api domain this will override the default production domain if supplied: api.okendo.io
+** `VITE_OKENDO_CDN`: The Okendo CDN domain - This will override the default production domain if supplied: cdn.okendo.io
+
+* TODO - Ideally we point to a sample hydrogen project using our widgets.
+
+
+### Who do I talk to? ###
+
+* Tom Fulcher - tom.fulcher@okendo.io, Susanne Peng - susanne.peng@okendo.io, Rowan Puckeridge - rowan.puckeridge@okendo.io
+* Okendo Widget Pod

package/package.json

@@ -0,0 +1,36 @@
+{
+    "name": "@okendo/shopify-hydrogen",
+    "version": "0.0.1",
+    "description": "A component library containing Okendo Reviews Widget componenets.",
+    "main": "dist/esnext/index.js",
+    "files": [
+        "dist",
+        "plugin.js"
+    ],
+    "scripts": {
+        "build": "rimraf dist/ && npm run build:plugin:cjs && npm run build:esm",
+        "build:plugin:cjs": "tsc --p tsconfig.plugin.cjs.json",
+        "build:esm": "tsc --p tsconfig.esm.json"
+    },
+    "author": "Okendo",
+    "license": "ISC",
+    "dependencies": {
+        "@okendo/reviews-common": "^4.157.0",
+        "html-react-parser": "^1.4.13"
+    },
+    "devDependencies": {
+        "@okendo/reviews-widget-plus": "^0.39.0",
+        "@okendo/tsconfig": "0.0.2",
+        "@shopify/hydrogen": "^0.22.1",
+        "@types/node": "^17.0.35",
+        "@types/react": "^18.0.9",
+        "@types/react-dom": "^18.0.5",
+        "dotenv": "^16.0.1",
+        "rimraf": "^3.0.2",
+        "typescript": "^4.7.2",
+        "vite": "^2.9.0"
+    },
+    "peerDependencies": {
+        "@shopify/hydrogen": "0.22.x"
+    }
+}

package/plugin.js

@@ -0,0 +1 @@
+module.exports = require('./dist/node/plugin');