@okendo/shopify-hydrogen 1.0.1 → 1.0.2

package/README.md

@@ -2,11 +2,17 @@
 
 This is the React component library to support Okendo Widget Plus Widgets in Shopify Hydrogen Projects.
 
-Currently we provide server side components for 2 widgets:
+Currently we provide the following components:
+
+### Server Components
 
 1. [Reviews List](#components--okendo-reviews-widget)
 2. [Star Ratings](#components--okendo-star-rating)
 
+### Client Components
+
+1. [Star Ratings](#components--okendo-client-star-rating)
+
 <br/>
 
 # Table of contents
@@ -17,7 +23,8 @@ Currently we provide server side components for 2 widgets:
    - [Expose Shopify Metafields](#expose-shopify-metafields)
 3. [How to Use Okendo Hydrogen Components In Your Hydrogen Apps](#how-to-use-okendo-hydrogen-components-in-your-hydrogen-app)
 4. [Components](#components)
-5. [View Our Okendo Sample Hydrogen App](#view-our-okendo-sample-hydrogen-app)
+5. [GraphQL Fragments](#graphql-fragments)
+6. [View Our Okendo Sample Hydrogen App](#view-our-okendo-sample-hydrogen-app)
 
 <br/><br/>
 
@@ -43,7 +50,7 @@ The purpose of this documentation is to guide you on the following:
 - You have an existing Shopify store.
 - You have an existing Hydrogen app. ([Learn how to create a Hydrogen app](https://shopify.dev/custom-storefronts/hydrogen/getting-started/create))
 - You have a current Okendo Reviews subscription and have the **Okendo: Product Reviews & UCG** app installed and configured.
-- You have an existing Shopify custom app with Storefront access token. ([Learn how to configure Shopify Storefront](https://www.notion.so/Configure-Shopify-Storefront-9e78e31bb4d94546aa1d037367c6a0b8))
+- You have an existing Shopify custom app with Storefront access token. ([Learn how to configure Shopify Storefront](https://github.com/okendo/okendo-shopify-hydrogen-demo/wiki/Configure-Shopify-Storefront-API))
 
 <br/>
 
@@ -73,7 +80,6 @@ The preferred method to expose Metafields is to [contact Okendo Support](mailto:
 
 ## Exposing Metafields via GraphQL
 
-
 ### Using Curl
 
 You can also expose the required Okendo Shopify Metafields by using GraphQL with curl.
@@ -194,100 +200,97 @@ mutation {
 ### Using GraphQL IDE
 
 1. Open your GraphQL IDE (such as Postman) and make a `POST` request with the following details:
-    - **URL:** https://{shop}.myshopify.com/admin/api/2022-04/graphql.json
-    - **Headers:** - X-Shopify-Access-Token: {access_token} - Content-Type: application/json 2. Execute the following request to expose the `WidgetPreRenderStyleTag` Shop Metafield.
-
-  ```graphql
-  mutation {
-    metafieldStorefrontVisibilityCreate(
-      input: {
-        namespace: "okendo"
-        key: "WidgetPreRenderStyleTags"
-        ownerType: SHOP
-      }
-    ) {
-      metafieldStorefrontVisibility {
-        id
-      }
-      userErrors {
-        field
-        message
-      }
+   - **URL:** https://{shop}.myshopify.com/admin/api/2022-04/graphql.json
+   - **Headers:** - X-Shopify-Access-Token: {access_token} - Content-Type: application/json
+2. Execute the following request to expose the `WidgetPreRenderStyleTag` Shop Metafield.
+
+```graphql
+mutation {
+  metafieldStorefrontVisibilityCreate(
+    input: {
+      namespace: "okendo"
+      key: "WidgetPreRenderStyleTags"
+      ownerType: SHOP
+    }
+  ) {
+    metafieldStorefrontVisibility {
+      id
+    }
+    userErrors {
+      field
+      message
     }
   }
-  ```
+}
+```
 
-  3. Execute the following request to expose the `WidgetPreRenderBodyStyleTags` Shop Metafield.
+3. Execute the following request to expose the `WidgetPreRenderBodyStyleTags` Shop Metafield.
 
-  ```graphql
-  mutation {
-    metafieldStorefrontVisibilityCreate(
-      input: {
-        namespace: "okendo"
-        key: "WidgetPreRenderBodyStyleTags"
-        ownerType: SHOP
-      }
-    ) {
-      metafieldStorefrontVisibility {
-        id
-      }
-      userErrors {
-        field
-        message
-      }
+```graphql
+mutation {
+  metafieldStorefrontVisibilityCreate(
+    input: {
+      namespace: "okendo"
+      key: "WidgetPreRenderBodyStyleTags"
+      ownerType: SHOP
+    }
+  ) {
+    metafieldStorefrontVisibility {
+      id
+    }
+    userErrors {
+      field
+      message
     }
   }
-  ```
+}
+```
 
-  4. Execute the following request to expose the `ReviewsWidgetSnippet` Product Metafield.
+4. Execute the following request to expose the `ReviewsWidgetSnippet` Product Metafield.
 
-  ```graphql
-  mutation {
-    metafieldStorefrontVisibilityCreate(
-      input: {
-        namespace: "okendo"
-        key: "ReviewsWidgetSnippet"
-        ownerType: PRODUCT
-      }
-    ) {
-      metafieldStorefrontVisibility {
-        id
-      }
-      userErrors {
-        field
-        message
-      }
+```graphql
+mutation {
+  metafieldStorefrontVisibilityCreate(
+    input: {
+      namespace: "okendo"
+      key: "ReviewsWidgetSnippet"
+      ownerType: PRODUCT
+    }
+  ) {
+    metafieldStorefrontVisibility {
+      id
+    }
+    userErrors {
+      field
+      message
     }
   }
-  ```
+}
+```
 
-  5. Execute the following request to expose the `StarRatingSnippet` the Product Metafield.
+5. Execute the following request to expose the `StarRatingSnippet` the Product Metafield.
 
-  ```graphql
-  mutation {
-    metafieldStorefrontVisibilityCreate(
-      input: {
-        namespace: "okendo"
-        key: "StarRatingSnippet"
-        ownerType: PRODUCT
-      }
-    ) {
-      metafieldStorefrontVisibility {
-        id
-      }
-      userErrors {
-        field
-        message
-      }
+```graphql
+mutation {
+  metafieldStorefrontVisibilityCreate(
+    input: { namespace: "okendo", key: "StarRatingSnippet", ownerType: PRODUCT }
+  ) {
+    metafieldStorefrontVisibility {
+      id
+    }
+    userErrors {
+      field
+      message
     }
   }
-  ```
+}
+```
 
-  **References**
+**References**
 
-  - [https://shopify.dev/api/examples/metafields#step-1-expose-metafields](https://shopify.dev/api/examples/metafields#step-1-expose-metafields)
-  - [https://shopify.dev/api/admin-graphql/2022-04/mutations/metafieldstorefrontvisibilitycreate](https://shopify.dev/api/admin-graphql/2022-04/mutations/metafieldstorefrontvisibilitycreate)
-  </details>
+- [https://shopify.dev/api/examples/metafields#step-1-expose-metafields](https://shopify.dev/api/examples/metafields#step-1-expose-metafields)
+- [https://shopify.dev/api/admin-graphql/2022-04/mutations/metafieldstorefrontvisibilitycreate](https://shopify.dev/api/admin-graphql/2022-04/mutations/metafieldstorefrontvisibilitycreate)
+</details>
 
 <br/><br/>
 
@@ -298,77 +301,76 @@ mutation {
 1. In your Hydrogen app directory, run `npm install @okendo/shopify-hydrogen` inside a terminal or PowerShell window.
 2. **Optional:** Create (or add to) your `.env` file at the top level of your project (next to **hydrogen.config.ts**) the following, where `<your_subscriber_id>` is replaced with your Okendo Subscriber ID:
 
-    ```sh
-    # .env
-    VITE_OKENDO_SUBSCRIBER_ID=<your_subscriber_id>
-    ```
+   ```sh
+   # .env
+   VITE_OKENDO_SUBSCRIBER_ID=<your_subscriber_id>
+   ```
 
 3. Open **vite.config.ts** and add `import okendo from '@okendo/shopify-hydrogen/plugin';` to the list of imports.
 4. Add `okendo()` to the list of `plugins`.
 
-    ```tsx
-    /* vite.config.ts */
-    /// <reference types="vitest" />
-    import {defineConfig} from 'vite';
-    import hydrogen from '@shopify/hydrogen/plugin';
-    import okendo from '@okendo/shopify-hydrogen/plugin';
-
-    export default defineConfig({
-      plugins: [hydrogen(), okendo()],
-      resolve: {
-        alias: [{find: /^~\/(.*)/, replacement: '/src/$1'}],
-      },
-      optimizeDeps: {
-        include: ['@headlessui/react', 'clsx', 'react-use', 'typographic-base'],
-      },
-      test: {
-        globals: true,
-        testTimeout: 10000,
-        hookTimeout: 10000,
-      },
-    });
-
-    ```
+   ```tsx
+   /* vite.config.ts */
+   /// <reference types="vitest" />
+   import { defineConfig } from "vite";
+   import hydrogen from "@shopify/hydrogen/plugin";
+   import okendo from "@okendo/shopify-hydrogen/plugin";
+
+   export default defineConfig({
+     plugins: [hydrogen(), okendo()],
+     resolve: {
+       alias: [{ find: /^~\/(.*)/, replacement: "/src/$1" }],
+     },
+     optimizeDeps: {
+       include: ["@headlessui/react", "clsx", "react-use", "typographic-base"],
+     },
+     test: {
+       globals: true,
+       testTimeout: 10000,
+       hookTimeout: 10000,
+     },
+   });
+   ```
 
 5. Open **App.server.tsx** and import `OkendoProvider`.
 6. Include the `OkendoProvider` as shown below, passing through your `subscriberId` from your Vite environment variables.
 
-    ```tsx
-    /* App.server.tsx */
-    import {OkendoProvider} from '@okendo/shopify-hydrogen';
-
-    function App() {
-      return (
-        <Suspense fallback={<LoadingFallback />}>
-          <ShopifyProvider>
-            <!-- *** Include OkendoProvider HERE *** -->
-            <OkendoProvider
-              subscriberId={import.meta.env.VITE_OKENDO_SUBSCRIBER_ID}
-            />
-            <ServerCartProvider>
-              <DefaultSeo />
-              <Router>
-                <FileRoutes />
-                <Route path="*" page={<NotFound />} />
-              </Router>
-            </ServerCartProvider>
-            <PerformanceMetrics />
-            {import.meta.env.DEV && <PerformanceMetricsDebug />}
-          </ShopifyProvider>
-        </Suspense>
-      );
-    ```
-
-    If your app doesn't use Vite environment variables from a `.env` file, you could also provide your Okendo Subscriber ID through other means, i.e. directly:
-
-    ``` tsx
-    <OkendoProvider
-      subscriberId={okendoSubscriberId}
-    />
-    ```
+   ```tsx
+   /* App.server.tsx */
+   import {OkendoProvider} from '@okendo/shopify-hydrogen';
+
+   function App() {
+     return (
+       <Suspense fallback={<LoadingFallback />}>
+         <ShopifyProvider>
+           <!-- *** Include OkendoProvider HERE *** -->
+           <OkendoProvider
+             subscriberId={import.meta.env.VITE_OKENDO_SUBSCRIBER_ID}
+           />
+           <ServerCartProvider>
+             <DefaultSeo />
+             <Router>
+               <FileRoutes />
+               <Route path="*" page={<NotFound />} />
+             </Router>
+           </ServerCartProvider>
+           <PerformanceMetrics />
+           {import.meta.env.DEV && <PerformanceMetricsDebug />}
+         </ShopifyProvider>
+       </Suspense>
+     );
+   ```
+
+   If your app doesn't use Vite environment variables from a `.env` file, you could also provide your Okendo Subscriber ID through other means, i.e. directly:
+
+   ```tsx
+   <OkendoProvider subscriberId={okendoSubscriberId} />
+   ```
 
 ## Widget Usage
 
+### Server Components
+
 Import `OkendoReviewsWidget` and `OkendoStarRating` and use as TSX components. Pass in the Shopify Product ID as a prop.
 
 The `productId` prop is optional for the `OkendoReviewsWidget`. Not providing it will mean that the widget will display reviews for all products, which is ideal for homepages or collection pages.
@@ -385,7 +387,27 @@ const okendoReviewsWidget = <OkendoReviewsWidget productId={product.id} />;
 const okendoStarRating = <OkendoStarRating productId={product.id} />;
 ```
 
-> ℹ️ &nbsp;Okendo widgets are server components. If you want to use them within a client component, you must pass the widget components as props to your client component. Widget components can be used directly in a server component. [Learn more here](https://shopify.dev/api/hydrogen/components#customizing-hydrogen-components).
+> ℹ️ &nbsp;Okendo `OkendoReviewsWidget` and `OkendoStarRating` widgets are server components. If you want to use them within a client component, you must pass the widget components as props to your client component. Widget components can be used directly in a server component. [Learn more here](#graphql-fragments).
+
+<br />
+
+### Client Components
+
+#### Star Rating Widget Usage in Client Components
+
+We also include an `OkendoClientStarRating` component for use within client-side (e.g.`<your component>.client.tsx`) components.
+
+Import the `OkendoClientStarRating` component inside a client component and use as a TSX component as seen below:
+
+```tsx
+import { OkendoClientStarRating } from '@okendo/shopify-hydrogen';
+
+...
+
+const okendoClientStarRating = <OkendoClientStarRating productId={product.id} />;
+```
+
+> ℹ️ &nbsp;OPTIONAL: You can render the `OkendoClientStarRating` component without making any client-side network requests by using an optional prop `okendoStarRatingSnippet`. This can be achieved using a GraphQL Fragment. [Learn more here](#graphql-fragments).
 
 <br />
 
@@ -418,18 +440,183 @@ It will provide:
 
 The Okendo Reviews List widget.
 
-| Name      | Type   | Description                                                                                                                                                                                                            | Required |
-| --------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
+| Name                   | Type                | Description                                                                                                                                                                                  | Required |
+| ---------------------- | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
 | <code>productId</code> | <code>string</code> | The Shopify Product ID. If provided, the Reviews Widget will be configured to display reviews specific to that product. Otherwise, the Reviews Widget will display reviews for all products. | no       |
 
 ### OkendoStarRating<a id="components--okendo-star-rating" name="components--okendo-star-rating"></a>
-The Okendo Star Rating widget.
+
+The Okendo Star Rating widget - **For use in _server_ components**.
 
 | Name                   | Type                | Description             | Required |
 | ---------------------- | ------------------- | ----------------------- | -------- |
 | <code>productId</code> | <code>string</code> | The Shopify Product ID. | yes      |
+
+<br/>
+
+### OkendoClientStarRating<a id="components--okendo-client-star-rating" name="components--okendo-client-star-rating"></a>
+
+The Okendo Star Rating widget - **For use in _client_ components**.
+
+| Name                                 | Type                                               | Description                                                     | Required |
+| ------------------------------------ | -------------------------------------------------- | --------------------------------------------------------------- | -------- |
+| <code>productId</code>               | <code>string</code>                                | The Shopify Product ID.                                         | yes      |
+| <code>okendoStarRatingSnippet</code> | <code>Pick<Metafield, "value"> \| undefined</code> | The server-side pre-rendered markup representing a star snippet | no       |
+
+<br/>
+
+---
+
+# GraphQL Fragments <a id="graphql-fragments" name="graphql-fragments"></a>
+
+A GraphQL fragment is a piece of logic that can be shared between multiple queries and mutations.
+
+We offer performance benefits even when using our client Star Rating Widget by exposing an `OKENDO_PRODUCT_STAR_RATING_FRAGMENT` GraphQL Fragment for use in your server components.
+
+This allows you to fetch pre-rendered markup in a **server component** for use within the client component (usually passed down as a property from the server component to the client).
+
+If the pre-rendered mark-up is present, the star rating widget initialization does not occur in the client, offering performance benefits.
+
 <br/>
 
+## Example: Using GraphQL Framgment with OkendoClientStarRating
+
+> ℹ️ &nbsp;NOTE: The following example usage is based on our Okendo Hydrogen Demo Store. Refer to the [Github repo](https://github.com/okendo/okendo-shopify-hydrogen-demo) to see a working example.
+
+<br/>
+
+In the sample [Okendo Hydrogen Demo Store](https://github.com/okendo/okendo-shopify-hydrogen-demo) we extend the `PRODUCT_CARD_FRAGMENT` with our `OKENDO_PRODUCT_STAR_RATING_FRAGMENT`.
+
+Open `ProductGrid.client.tsx` and make the changes to the `PRODUCT_CARD_FRAGMENT` as seen below:
+
+<br/>
+
+**Before**
+
+```tsx
+export const PRODUCT_CARD_FRAGMENT = gql`
+  fragment ProductCard on Product {
+    id
+    title
+    publishedAt
+    handle
+    variants(first: 1) {
+      nodes {
+        id
+        image {
+          url
+          altText
+          width
+          height
+        }
+        priceV2 {
+          amount
+          currencyCode
+        }
+        compareAtPriceV2 {
+          amount
+          currencyCode
+        }
+      }
+    }
+  }
+`;
+```
+
+**After**
+
+```tsx
+export const PRODUCT_CARD_FRAGMENT = gql`
+  ${OKENDO_PRODUCT_STAR_RATING_FRAGMENT}
+  fragment ProductCard on Product {
+    id
+    title
+    publishedAt
+    handle
+    ...OkendoStarRatingSnippet
+    variants(first: 1) {
+      nodes {
+        id
+        image {
+          url
+          altText
+          width
+          height
+        }
+        priceV2 {
+          amount
+          currencyCode
+        }
+        compareAtPriceV2 {
+          amount
+          currencyCode
+        }
+      }
+    }
+  }
+`;
+```
+
+Adding the `OKENDO_PRODUCT_STAR_RATING_FRAGMENT` GraphQL Fragment allows you to access and include an `okendoStarRatingSnippet` in your `Product` query.
+
+The `okendoStarRatingSnippet` is a server-side rendered version of the output of your star rating contents. This is supplied to your `Product`/`Collection` queries using the `OKENDO_PRODUCT_STAR_RATING_FRAGMENT` to fetch a metafield containg the markup.
+
+To help with typing we have exposed an `OkendoProductFragment` type which can be used as a union type with an existing Hydrogen `Product` type.
+
+For this example we have used `ProductCard.client.tsx` from our Okendo Hydrogen Demo App.
+
+The `ProductCard.client.tsx` component has the result of a server-side `useShopQuery` passed down as props to it.
+
+Because we have implemented our `OKENDO_PRODUCT_STAR_RATING_FRAGMENT` we can express the resulting type as a union:
+
+```tsx
+Product & OkendoProductFragment;
+```
+
+In the `ProductCard.client.tsx` import the `OkendoProductFragment` type and the `OkendoClientStarRating` component:
+
+```tsx
+import type { OkendoProductFragment } from "@okendo/shopify-hydrogen";
+import { OkendoClientStarRating } from "@okendo/shopify-hydrogen/client";
+```
+
+The constructor of the `ProductCard.client.tsx` component can then be modified to use a union-type for the `Product` being passed in to the constructor:
+
+```tsx
+export function ProductCard({
+  product,
+  label,
+  className,
+  loading,
+  onClick,
+}: {
+  product: Product & OkendoProductFragment;
+  label?: string;
+  className?: string;
+  loading?: HTMLImageElement['loading'];
+  onClick?: () => void;
+}) {
+  ...
+}
+```
+
+Import the `OkendoClientStarRating` component inside the client component and use as seen below. Pass in `product.okendoStarRatingSnippet` as the value for the optional prop `okendoStarRatingSnippet`. This will use the pre-rendered value of the star rating markup without having to make any client-side network requests.
+
+```tsx
+{
+  product.okendoStarRatingSnippet?.value ? (
+    <OkendoClientStarRating
+      productId={product.id}
+      okendoStarRatingSnippet={product.okendoStarRatingSnippet}
+    />
+  ) : null;
+}
+```
+
+**References**
+
+- [GraphQL Fragments](https://www.apollographql.com/docs/react/data/fragments/)
+
 ---
 
 <br/>

package/dist/esnext/client-components/OkendoClientStarRating.client.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { OkendoClientStarRatingProps } from '../models/starRating';
+export declare const OkendoClientStarRating: React.FunctionComponent<OkendoClientStarRatingProps>;
+export default OkendoClientStarRating;

package/dist/esnext/client-components/OkendoClientStarRating.client.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { OkendoWidgetClient } from './OkendoWidget.client';
+import { getOkendoProductId } from '../shared/productUtils';
+import { widgetConfigurationError, widgetMetafieldError } from '../shared/errorUtils';
+export const OkendoClientStarRating = (props) => {
+    const { productId, okendoStarRatingSnippet } = props;
+    const okendoProductId = getOkendoProductId(productId);
+    if (!okendoProductId) {
+        console.error(widgetConfigurationError('OkendoClientStarRating', 'productId was not provided'));
+        return null;
+    }
+    if (!okendoStarRatingSnippet?.value) {
+        console.warn(widgetMetafieldError('OkendoStarRating', 'StarRatingSnippet'));
+    }
+    const dataAttributes = {
+        'data-oke-star-rating': '',
+        'data-oke-reviews-product-id': okendoProductId,
+        'data-oke-scroll-disabled': 'true'
+    };
+    if (okendoStarRatingSnippet?.value) {
+        dataAttributes['data-oke-rendered'] = okendoStarRatingSnippet.value;
+    }
+    return (React.createElement(OkendoWidgetClient, { dataAttributes: dataAttributes, metafieldContent: okendoStarRatingSnippet?.value }));
+};
+export default OkendoClientStarRating;

package/dist/esnext/{components → client-components}/OkendoWidget.client.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { ReviewsWidgetPlus } from '@okendo/reviews-widget-plus/dist-utils/ReviewsWidgetPlus';
-import type { SKO } from '../shared';
+import type { SKO } from '../shared/sharedTypes';
 export declare const OkendoWidgetClient: React.FunctionComponent<OkendoWidgetClientProps>;
 export interface OkendoWidgetClientProps {
     dataAttributes: SKO;

package/dist/esnext/client-components/index.d.ts

@@ -0,0 +1 @@
+export * from './OkendoClientStarRating.client';

package/dist/esnext/client-components/index.js

@@ -0,0 +1 @@
+export * from './OkendoClientStarRating.client';

package/dist/esnext/client.d.ts

@@ -0,0 +1 @@
+export * from './client-components';

package/dist/esnext/client.js

@@ -0,0 +1 @@
+export * from './client-components';

package/dist/esnext/components/OkendoProvider.server.js

@@ -2,7 +2,8 @@ import React from 'react';
 import parse from 'html-react-parser';
 import { fetchSync, useShopQuery, gql, CacheShort } from '@shopify/hydrogen';
 import { Head } from '@shopify/hydrogen';
-import { okendoError, setInOkendoRequestContext } from '../shared';
+import { okendoError } from '../shared/errorUtils';
+import { setInOkendoRequestContext } from '../shared/server/requestUtils';
 const kDefaultOkendoApiDomain = 'api.okendo.io/v1';
 const kDefaultOkendoCdnDomain = 'cdn-static.okendo.io';
 export const OkendoProvider = (props) => {

package/dist/esnext/components/OkendoReviewsWidget.server.js

@@ -1,8 +1,10 @@
 import React from 'react';
 import parse from 'html-react-parser';
 import { useShopQuery, gql } from '@shopify/hydrogen';
-import { OkendoWidgetClient } from './OkendoWidget.client';
-import { getOkendoProductId, useOkendoRequestContext, widgetMetafieldError } from '../shared';
+import { OkendoWidgetClient } from '../client-components/OkendoWidget.client';
+import { widgetMetafieldError } from '../shared/errorUtils';
+import { getOkendoProductId } from '../shared/productUtils';
+import { useOkendoRequestContext } from '../shared/server/requestUtils';
 export const OkendoReviewsWidget = (props) => {
     const { setupFailed } = useOkendoRequestContext();
     if (setupFailed) {

package/dist/esnext/components/OkendoStarRating.server.d.ts

@@ -1,6 +1,4 @@
 import React from 'react';
+import type { OkendoStarRatingProps } from '../models/starRating';
 export declare const OkendoStarRating: React.FunctionComponent<OkendoStarRatingProps>;
-interface OkendoStarRatingProps {
-    productId: string;
-}
 export default OkendoStarRating;

package/dist/esnext/components/OkendoStarRating.server.js

@@ -1,7 +1,9 @@
 import React from 'react';
 import { useShopQuery, gql } from '@shopify/hydrogen';
-import { OkendoWidgetClient } from './OkendoWidget.client';
-import { getOkendoProductId, useOkendoRequestContext, widgetConfigurationError, widgetMetafieldError } from '../shared';
+import { OkendoWidgetClient } from '../client-components/OkendoWidget.client';
+import { widgetConfigurationError, widgetMetafieldError } from '../shared/errorUtils';
+import { getOkendoProductId } from '../shared/productUtils';
+import { useOkendoRequestContext } from '../shared/server/requestUtils';
 export const OkendoStarRating = (props) => {
     const { setupFailed } = useOkendoRequestContext();
     if (setupFailed) {

package/dist/esnext/components/index.d.ts

@@ -1,3 +1,3 @@
+export * from './OkendoProvider.server';
 export * from './OkendoReviewsWidget.server';
 export * from './OkendoStarRating.server';
-export * from './OkendoProvider.server';

package/dist/esnext/components/index.js

@@ -1,3 +1,3 @@
+export * from './OkendoProvider.server';
 export * from './OkendoReviewsWidget.server';
 export * from './OkendoStarRating.server';
-export * from './OkendoProvider.server';

package/dist/esnext/fragments/index.d.ts

@@ -0,0 +1 @@
+export declare const OKENDO_PRODUCT_STAR_RATING_FRAGMENT: string;

package/dist/esnext/fragments/index.js

@@ -0,0 +1,11 @@
+import { gql } from '@shopify/hydrogen';
+export const OKENDO_PRODUCT_STAR_RATING_FRAGMENT = gql `
+  fragment OkendoStarRatingSnippet on Product {
+    okendoStarRatingSnippet: metafield(
+      namespace: "okendo"
+      key: "StarRatingSnippet"
+    ) {
+      value
+    }
+  }
+`;

package/dist/esnext/index.d.ts

@@ -1,2 +1,4 @@
 export * from './components';
-export * from './shared';
+export * from './fragments';
+export * from './shared/server/requestUtils';
+export * from './shared/sharedTypes';

package/dist/esnext/index.js

@@ -1,2 +1,4 @@
 export * from './components';
-export * from './shared';
+export * from './fragments';
+export * from './shared/server/requestUtils';
+export * from './shared/sharedTypes';

package/dist/esnext/models/starRating.d.ts

@@ -0,0 +1,12 @@
+import type { Metafield } from '@shopify/hydrogen/dist/esnext/storefront-api-types';
+export interface OkendoClientStarRatingProps extends OkendoStarRatingProps {
+    okendoStarRatingSnippet?: Pick<Metafield, 'value'>;
+}
+export interface OkendoStarRatingProps {
+    productId: string;
+}
+export interface OkendoStarRatingMetafields {
+    product: {
+        starRatingSnippet?: Pick<Metafield, 'value'>;
+    };
+}

package/dist/esnext/models/starRating.js

@@ -0,0 +1 @@
+export {};

package/dist/esnext/shared/{requestUtils.d.ts → server/requestUtils.d.ts}

@@ -1,4 +1,4 @@
-import { SKO } from './sharedTypes';
+import type { SKO } from '../sharedTypes';
 export declare function setInOkendoRequestContext(key: keyof OkendoRequestContextKeys, value: RequestContextSafeType | RequestContextSafeType[]): void;
 export declare function useOkendoRequestContext(): OkendoRequestContext;
 interface OkendoRequestContextKeys {

package/dist/esnext/shared/sharedTypes.d.ts

@@ -1 +1,5 @@
+import type { Metafield } from '@shopify/hydrogen/dist/esnext/storefront-api-types';
 export declare type SKO = Record<string, unknown>;
+export declare type OkendoProductFragment = {
+    okendoStarRatingSnippet?: Pick<Metafield, 'value'>;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@okendo/shopify-hydrogen",
-    "version": "1.0.1",
+    "version": "1.0.2",
     "description": "A component library containing Okendo Reviews React components.",
     "main": "dist/esnext/index.js",
     "engines": {
@@ -12,6 +12,16 @@
             "import": "./dist/esnext/framework/plugins/plugin.js",
             "require": "./dist/node/framework/plugins/plugin.js"
         },
+        "./client": {
+            "import": {
+                "types": "./dist/esnext/client.d.ts",
+                "default": "./dist/esnext/client.js"
+            },
+            "node": {
+                "types": "./dist/esnext/client.d.ts",
+                "default": "./dist/esnext/client.js"
+            }
+        },
         "./plugin.cjs": "./plugin.cjs",
         "./package.json": "./package.json",
         "./*": "./dist/esnext/*.js"
@@ -40,8 +50,9 @@
         "@types/react": "^18.0.14",
         "@types/react-dom": "^18.0.5",
         "dotenv": "^16.0.1",
+        "ncp": "^2.0.0",
         "rimraf": "^3.0.2",
-        "typescript": "^4.7.2",
+        "typescript": "^4.7.4",
         "vite": "^2.9.0"
     },
     "peerDependencies": {

package/dist/esnext/shared/index.d.ts

@@ -1,4 +0,0 @@
-export * from './errorUtils';
-export * from './productUtils';
-export * from './requestUtils';
-export * from './sharedTypes';

package/dist/esnext/shared/index.js

@@ -1,4 +0,0 @@
-export * from './errorUtils';
-export * from './productUtils';
-export * from './requestUtils';
-export * from './sharedTypes';