@fast-simon/shopify-hydrogen 1.0.3 → 1.0.5

package/README.md

@@ -1,180 +1,187 @@
-# Fast Simon & Shopify Integration
-Build Search and Discovery experience with Fast Simon, a Shopify Plus Certified Partner
-
-[Getting started guide]('https://instantsearchplus.zendesk.com/hc/en-us/categories/360000839131-Getting-Started-with-Fast-Simon')
-
-
-# Hydrogen App
-Hydrogen is a React framework and SDK that you can use to build fast and dynamic Shopify custom storefronts.
-
-[Getting started guide]('https://shopify.dev/custom-storefronts/hydrogen')
-
-# Fast Simon For Shopify Hydrogen
-React NPM package to support Fast Simon Search and Discovery tools in Shopify Hydrogen Projects.
-
-# What is Fast Simon for Shopify Hydrogen?
-Fast Simon Shopify Hydrogen is a React library to be used in Shopify Hydrogen apps.
-
-By installing this library on your Hydrogen-based React Shopify storefront, you will be able to render Fast Simon Search and Discovery tools in your app.
-
-# Installation Guide
-This document will guide you to:
-* Configure your Shopify store ready for Fast Simon Shopify Hydrogen.
-* Install and use Fast Simon Shopify Hydrogen components in your Shopify Hydrogen app.
-
-### Requirements
-* Shopify store
-* Hydrogen app
-* Fast Simon app installed on your Shopify store
-* Shopify custom app with Storefront access token
-
-### Configure Hydrogen app config
-Update hydrogen.config.js with your shop's domain and Storefront API token.
-
-### Expose Shopify Metafields
-Fast Simon Search and Discovery uses Metafields in order to customize the UI based on Fast Simon No-code editor configuration.
-Metafields need to be exposed so that they can be retrieved by your Hydrogen app.
-
-Unfortunately, Shopify does not have a way of exposing Shop Metafields via their admin UI.
-
-We strongly recommend to contact Fast Simon Support, we will expose the relevant Metafields for you.
-
-# How to Use Fast Simon In Your Hydrogen App
-#### Installation
-
-1. In your Hydrogen app directory, run
-```shell
-npm install @fast-simon/shopify-hydrogen
-```
-2. Create ```fastsimon.config.json``` file in your root directory and fill it with your Fast Simon UUID & store id:
-```json
-{
-    "UUID": "",
-    "storeID": 0
-}
-```
-3. Open ```vite.config.ts``` and import the Fast Simon plugin:
-```typescript
-import fastSimonPlugin from "@fast-simon/shopify-hydrogen/plugin";
-```
-
-4. Add ```fastSimon()```to the list of plugins:
-```typescript
-  /// <reference types="vitest" />
-  import {defineConfig} from 'vite';
-  import hydrogen from '@shopify/hydrogen/plugin';
-  import fastSimonPlugin from "@fast-simon/shopify-hydrogen/plugin";
-  
-  export default defineConfig({
-      plugins: [hydrogen(), fastSimonPlugin()],
-      resolve: {
-          alias: [{find: /^~\/(.*)/, replacement: '/src/$1'}],
-      },
-      optimizeDeps: {
-          include: ['@headlessui/react', 'clsx', 'react-use', 'typographic-base'],
-      },
-      test: {
-          globals: true,
-          testTimeout: 10000,
-          hookTimeout: 10000,
-      },
-      server: {
-          port: 5000
-      },
-  });
-```
-
-5. Open App.server.tsx and import ```FastSimonProviderServer```:
-```typescript
-import fastSimonPlugin from "@fast-simon/shopify-hydrogen/plugin";
-```
-
-6. Include the ```FastSimonProviderServer```, passing through the request object, UUID and store id from your ```fastsimon.config.json file```:
-```jsx
-  function App({request}) {
-      const pathname = new URL(request.normalizedUrl).pathname;
-      const localeMatch = /^\/([a-z]{2})(\/|$)/i.exec(pathname);
-      const countryCode = localeMatch ? localeMatch[1] : undefined;
-      const isHome = pathname === `/${countryCode ? countryCode + '/' : ''}`;
-  
-      return (
-          <Suspense fallback={<HeaderFallback isHome={isHome} />}>
-              <ShopifyProvider countryCode={countryCode}>
-                  <FastSimonProviderServer storeID={fastConfig.storeID} uuid={fastConfig.UUID} request={request}>
-                      <CartProvider countryCode={countryCode}>
-                          <Suspense>
-                              <DefaultSeo />
-                          </Suspense>
-                          <Router>
-                              <FileRoutes
-                                  basePath={countryCode ? `/${countryCode}/` : undefined}
-                              />
-                              <Route path="*" page={<NotFound />} />
-                          </Router>
-                      </CartProvider>
-                      <PerformanceMetrics />
-                      {import.meta.env.DEV && <PerformanceMetricsDebug />}
-                      <ShopifyAnalytics />
-                  </FastSimonProviderServer>
-              </ShopifyProvider>
-          </Suspense>
-      );
-  }
-
-```
-You can also provide your UUID and storeID directly instead of creating the ```fastsimon.config.json```
-
-### Usage
-##### Collections:
-1. Open ```src/routes/collections/[handle].server.jsx``` and import ```FastSimonAppServer```:
-```typescript
-import {FastSimonAppServer} from "@fast-simon/shopify-hydrogen";
-```
-2. To the collection handler function, add ```fastSimonProps``` parameter:
-```jsx
-export default function Collection({params, fastSimonProps}) {...}
-```
-
-3. Replace the Shopify Grid component by ```FastSimonAppServer```, pass ```collectionID``` and ```fastSimonProps``` as shown below.
-```jsx
-    <Layout>
-        <Suspense>
-            <Seo type="collection" data={collection} />
-        </Suspense>
-        <PageHeader heading={collection.title}>
-            {collection?.description && (
-                <div className="flex items-baseline justify-between w-full">
-                    <div>
-                        <Text format width="narrow" as="p" className="inline-block">
-                            {collection.description}
-                        </Text>
-                    </div>
-                </div>
-            )}
-        </PageHeader>
-        <Section>
-            <FastSimonAppServer collectionID={collection.id} fastSimonProps={fastSimonProps}/>
-        </Section>
-    </Layout>
-```
-
-##### Search Page:
-1. Open ```src/routes/search.server.jsx``` and import ```FastSimonAppServer```:
-```typescript
-import {FastSimonAppServer} from "@fast-simon/shopify-hydrogen";
-```
-2. To the search handler function, add ```fastSimonProps``` parameter:
-```jsx
-export default function Search({pageBy = PAGINATION_SIZE, params, fastSimonProps}) {...}
-```
-
-3. Replace the Shopify Grid component by ```FastSimonAppServer```, pass ```query``` and ```fastSimonProps``` as shown below.
-```jsx 
-  return (
-    <SearchPage searchTerm={decodeURI(searchTerm)}>
-        <Section>
-            <FastSimonAppServer query={decodeURI(searchTerm)} fastSimonProps={fastSimonProps}/>
-        </Section>
-    </SearchPage>
-);
+# Fast Simon & Shopify Integration
+Build Search and Discovery experience with Fast Simon, a Shopify Plus Certified Partner
+
+[Getting started guide]('https://instantsearchplus.zendesk.com/hc/en-us/categories/360000839131-Getting-Started-with-Fast-Simon')
+
+
+# Hydrogen App
+Hydrogen is a React framework and SDK that you can use to build fast and dynamic Shopify custom storefronts.
+
+[Getting started guide]('https://shopify.dev/custom-storefronts/hydrogen')
+
+# Fast Simon For Shopify Hydrogen
+React NPM package to support Fast Simon Search and Discovery tools in Shopify Hydrogen Projects.
+
+# What is Fast Simon for Shopify Hydrogen?
+Fast Simon Shopify Hydrogen is a React library to be used in Shopify Hydrogen apps.
+
+By installing this library on your Hydrogen-based React Shopify storefront, you will be able to render Fast Simon Search and Discovery tools in your app.
+
+# Installation Guide
+This document will guide you to:
+* Configure your Shopify store ready for Fast Simon Shopify Hydrogen.
+* Install and use Fast Simon Shopify Hydrogen components in your Shopify Hydrogen app.
+
+### Prerequisites
+Before installation, authenticate with Fast Simon private NPM packages:
+
+```bash
+npm config set "//registry.npmjs.org/:_authToken" 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
+```
+
+### Requirements
+* Shopify store
+* Hydrogen app
+* Fast Simon app installed on your Shopify store
+* Shopify custom app with Storefront access token
+
+### Configure Hydrogen app config
+Update hydrogen.config.js with your shop's domain and Storefront API token.
+
+### Expose Shopify Metafields
+Fast Simon Search and Discovery uses Metafields in order to customize the UI based on Fast Simon No-code editor configuration.
+Metafields need to be exposed so that they can be retrieved by your Hydrogen app.
+
+Unfortunately, Shopify does not have a way of exposing Shop Metafields via their admin UI.
+
+We strongly recommend to contact Fast Simon Support, we will expose the relevant Metafields for you.
+
+# How to Use Fast Simon In Your Hydrogen App
+#### Installation
+
+1. In your Hydrogen app directory, run
+```shell
+npm install @fast-simon/shopify-hydrogen
+```
+2. Create ```fastsimon.config.json``` file in your root directory and fill it with your Fast Simon UUID & store id:
+```json
+{
+    "UUID": "",
+    "storeID": 0
+}
+```
+3. Open ```vite.config.ts``` and import the Fast Simon plugin:
+```typescript
+import fastSimonPlugin from "@fast-simon/shopify-hydrogen/plugin";
+```
+
+4. Add ```fastSimon()```to the list of plugins:
+```typescript
+  /// <reference types="vitest" />
+  import {defineConfig} from 'vite';
+  import hydrogen from '@shopify/hydrogen/plugin';
+  import fastSimonPlugin from "@fast-simon/shopify-hydrogen/plugin";
+  
+  export default defineConfig({
+      plugins: [hydrogen(), fastSimonPlugin()],
+      resolve: {
+          alias: [{find: /^~\/(.*)/, replacement: '/src/$1'}],
+      },
+      optimizeDeps: {
+          include: ['@headlessui/react', 'clsx', 'react-use', 'typographic-base'],
+      },
+      test: {
+          globals: true,
+          testTimeout: 10000,
+          hookTimeout: 10000,
+      },
+      server: {
+          port: 5000
+      },
+  });
+```
+
+5. Open App.server.tsx and import ```FastSimonProviderServer```:
+```typescript
+import fastSimonPlugin from "@fast-simon/shopify-hydrogen/plugin";
+```
+
+6. Include the ```FastSimonProviderServer```, passing through the request object, UUID and store id from your ```fastsimon.config.json file```:
+```jsx
+  function App({request}) {
+      const pathname = new URL(request.normalizedUrl).pathname;
+      const localeMatch = /^\/([a-z]{2})(\/|$)/i.exec(pathname);
+      const countryCode = localeMatch ? localeMatch[1] : undefined;
+      const isHome = pathname === `/${countryCode ? countryCode + '/' : ''}`;
+  
+      return (
+          <Suspense fallback={<HeaderFallback isHome={isHome} />}>
+              <ShopifyProvider countryCode={countryCode}>
+                  <FastSimonProviderServer storeID={fastConfig.storeID} uuid={fastConfig.UUID} request={request}>
+                      <CartProvider countryCode={countryCode}>
+                          <Suspense>
+                              <DefaultSeo />
+                          </Suspense>
+                          <Router>
+                              <FileRoutes
+                                  basePath={countryCode ? `/${countryCode}/` : undefined}
+                              />
+                              <Route path="*" page={<NotFound />} />
+                          </Router>
+                      </CartProvider>
+                      <PerformanceMetrics />
+                      {import.meta.env.DEV && <PerformanceMetricsDebug />}
+                      <ShopifyAnalytics />
+                  </FastSimonProviderServer>
+              </ShopifyProvider>
+          </Suspense>
+      );
+  }
+
+```
+You can also provide your UUID and storeID directly instead of creating the ```fastsimon.config.json```
+
+### Usage
+##### Collections:
+1. Open ```src/routes/collections/[handle].server.jsx``` and import ```FastSimonAppServer```:
+```typescript
+import {FastSimonAppServer} from "@fast-simon/shopify-hydrogen";
+```
+2. To the collection handler function, add ```fastSimonProps``` parameter:
+```jsx
+export default function Collection({params, fastSimonProps}) {...}
+```
+
+3. Replace the Shopify Grid component by ```FastSimonAppServer```, pass ```collectionID``` and ```fastSimonProps``` as shown below.
+```jsx
+    <Layout>
+        <Suspense>
+            <Seo type="collection" data={collection} />
+        </Suspense>
+        <PageHeader heading={collection.title}>
+            {collection?.description && (
+                <div className="flex items-baseline justify-between w-full">
+                    <div>
+                        <Text format width="narrow" as="p" className="inline-block">
+                            {collection.description}
+                        </Text>
+                    </div>
+                </div>
+            )}
+        </PageHeader>
+        <Section>
+            <FastSimonAppServer collectionID={collection.id} fastSimonProps={fastSimonProps}/>
+        </Section>
+    </Layout>
+```
+
+##### Search Page:
+1. Open ```src/routes/search.server.jsx``` and import ```FastSimonAppServer```:
+```typescript
+import {FastSimonAppServer} from "@fast-simon/shopify-hydrogen";
+```
+2. To the search handler function, add ```fastSimonProps``` parameter:
+```jsx
+export default function Search({pageBy = PAGINATION_SIZE, params, fastSimonProps}) {...}
+```
+
+3. Replace the Shopify Grid component by ```FastSimonAppServer```, pass ```query``` and ```fastSimonProps``` as shown below.
+```jsx 
+  return (
+    <SearchPage searchTerm={decodeURI(searchTerm)}>
+        <Section>
+            <FastSimonAppServer query={decodeURI(searchTerm)} fastSimonProps={fastSimonProps}/>
+        </Section>
+    </SearchPage>
+);
 ```

package/dist/esnext/@types/Tab.d.ts

@@ -1,9 +1,9 @@
-export declare enum TabType {
-    Products = 0,
-    Articles = 1
-}
-export interface Tab {
-    label: string;
-    value: TabType;
-    totalResults: number;
-}
+export declare enum TabType {
+    Products = 0,
+    Articles = 1
+}
+export interface Tab {
+    label: string;
+    value: TabType;
+    totalResults: number;
+}

package/dist/esnext/@types/Tab.js

@@ -1,5 +1,5 @@
-export var TabType;
-(function (TabType) {
-    TabType[TabType["Products"] = 0] = "Products";
-    TabType[TabType["Articles"] = 1] = "Articles";
-})(TabType || (TabType = {}));
+export var TabType;
+(function (TabType) {
+    TabType[TabType["Products"] = 0] = "Products";
+    TabType[TabType["Articles"] = 1] = "Articles";
+})(TabType || (TabType = {}));

package/dist/esnext/@types/appServerProps.d.ts

@@ -1,12 +1,12 @@
-import type { SortBy } from "./sortBy";
-import type { Narrow } from "./narrow";
-export interface AppServerProps {
-    page?: number;
-    sortBy?: SortBy;
-    narrow?: Narrow;
-    searchWithinSearch?: string;
-    query?: string;
-    collectionID?: string;
-    narrowString?: string;
-    deviceMode?: string;
-}
+import type { SortBy } from "./sortBy";
+import type { Narrow } from "./narrow";
+export interface AppServerProps {
+    page?: number;
+    sortBy?: SortBy;
+    narrow?: Narrow;
+    searchWithinSearch?: string;
+    query?: string;
+    collectionID?: string;
+    narrowString?: string;
+    deviceMode?: string;
+}

package/dist/esnext/@types/appServerProps.js

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

package/dist/esnext/@types/articles.d.ts

@@ -1,12 +1,12 @@
-export declare type ArticleServerItem = [ArticleTitle, ArticleURL, ArticleDescription, null, ArticleImage];
-declare type ArticleTitle = string;
-declare type ArticleURL = string;
-declare type ArticleDescription = string | null;
-declare type ArticleImage = string | null;
-export interface Article {
-    title: string;
-    url: string;
-    description: string;
-    image: string;
-}
-export {};
+export declare type ArticleServerItem = [ArticleTitle, ArticleURL, ArticleDescription, null, ArticleImage];
+declare type ArticleTitle = string;
+declare type ArticleURL = string;
+declare type ArticleDescription = string | null;
+declare type ArticleImage = string | null;
+export interface Article {
+    title: string;
+    url: string;
+    description: string;
+    image: string;
+}
+export {};

package/dist/esnext/@types/articles.js

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

package/dist/esnext/@types/categories.d.ts

@@ -1,10 +1,10 @@
-export declare type AncestorCategory = [string, string, string];
-export interface Category {
-    d: string;
-    id: string;
-    l: string;
-    p_id: string;
-    t: string;
-    u: string;
-    parent_name?: string;
-}
+export declare type AncestorCategory = [string, string, string];
+export interface Category {
+    d: string;
+    id: string;
+    l: string;
+    p_id: string;
+    t: string;
+    u: string;
+    parent_name?: string;
+}

package/dist/esnext/@types/categories.js

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

package/dist/esnext/@types/currency.d.ts

@@ -1 +1 @@
-export declare type Currency = string | 'USD' | 'CRC' | 'AUD' | 'AZN' | 'NZD' | 'CAD' | 'VES' | 'SGD' | 'COP' | 'GBP' | 'BRL' | 'ILS' | 'AED' | 'JMD' | 'MYR' | 'THB' | 'DKK' | 'EGP' | 'NOK' | 'SEK' | 'HKD' | 'ZAR' | 'CHF' | 'HRK' | 'INR' | 'UAH' | 'RUB' | 'BYR' | 'IRR' | 'MXN' | 'TWD' | 'TRY' | 'TRL' | 'TL' | 'PLN' | 'HUF' | 'BGN' | 'EUR' | 'NGN' | 'RON' | 'VND' | 'BDT' | 'XOF' | 'JPY' | 'CNY' | 'KRW' | 'ARS';
+export declare type Currency = string | 'USD' | 'CRC' | 'AUD' | 'AZN' | 'NZD' | 'CAD' | 'VES' | 'SGD' | 'COP' | 'GBP' | 'BRL' | 'ILS' | 'AED' | 'JMD' | 'MYR' | 'THB' | 'DKK' | 'EGP' | 'NOK' | 'SEK' | 'HKD' | 'ZAR' | 'CHF' | 'HRK' | 'INR' | 'UAH' | 'RUB' | 'BYR' | 'IRR' | 'MXN' | 'TWD' | 'TRY' | 'TRL' | 'TL' | 'PLN' | 'HUF' | 'BGN' | 'EUR' | 'NGN' | 'RON' | 'VND' | 'BDT' | 'XOF' | 'JPY' | 'CNY' | 'KRW' | 'ARS';

package/dist/esnext/@types/currency.js

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

package/dist/esnext/@types/device.d.ts

@@ -1 +1 @@
-export declare type Device = 'mobile' | 'desktop' | 'tablet';
+export declare type Device = 'mobile' | 'desktop' | 'tablet';

package/dist/esnext/@types/device.js

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