@shopify/shop-minis-react 0.0.14 → 0.0.17

package/src/mocks.ts

@@ -0,0 +1,296 @@
+import {Product, Gender} from '@shopify/shop-minis-platform'
+import {ShopActions} from '@shopify/shop-minis-platform/actions'
+
+// Helper functions for common data structures
+const createProduct = (
+  id: string,
+  title: string,
+  price = '99.99',
+  compareAtPrice?: string
+): Product => ({
+  id,
+  title,
+  price: {amount: price, currencyCode: 'USD'},
+  ...(compareAtPrice && {
+    compareAtPrice: {amount: compareAtPrice, currencyCode: 'USD'},
+  }),
+  reviewAnalytics: {averageRating: 4.5, reviewCount: 10},
+  shop: {id: 'shop1', name: 'Mock Shop'},
+  defaultVariantId: `variant-${id}`,
+  isFavorited: false,
+  featuredImage: {url: `https://picsum.photos/400/400`, altText: title},
+})
+
+const createShop = (id: string, name: string) => ({
+  id,
+  name,
+  isFollowing: false,
+  primaryDomain: {
+    url: `https://${name.toLowerCase().replace(/\s+/g, '-')}.com`,
+  },
+  reviewAnalytics: {averageRating: 4.3, reviewCount: 50},
+})
+
+const createPagination = (hasNext = false) => ({
+  hasNextPage: hasNext,
+  endCursor: hasNext ? 'cursor123' : null,
+})
+
+const createProductList = (id: string, name: string, products: any[] = []) => ({
+  id,
+  publicId: `public-${id}`,
+  name,
+  products,
+})
+
+// Helper type to extract the data type from a ShopAction
+type ShopActionDataType<T> = T extends (
+  ...args: any[]
+) => Promise<{ok: true; data: infer R} | {ok: false; error: any}>
+  ? R
+  : never
+
+function makeMockMethod<K extends keyof ShopActions>(
+  key: K,
+  result: ShopActionDataType<ShopActions[K]>
+): ShopActions[K] {
+  return ((params: Parameters<ShopActions[K]>[0]) => {
+    console.log(`[Mock Action] ${String(key)}`, params)
+    return Promise.resolve({ok: true as const, data: result})
+  }) as ShopActions[K]
+}
+
+function makeMockActions(): ShopActions {
+  const results: {
+    [K in keyof ShopActions]: ShopActionDataType<ShopActions[K]>
+  } = {
+    followShop: true,
+    unfollowShop: false,
+    favorite: undefined,
+    unfavorite: undefined,
+    getShopAppInformation: {
+      appVersion: '1.0.0',
+      buildNumber: '12345',
+      buildId: 'dev-build-123',
+    },
+    productRecommendationImpression: undefined,
+    productRecommendationClick: undefined,
+    hideEntryPoint: undefined,
+    closeMini: undefined,
+    getAccountInformation: {
+      status: 'available',
+      value: 'user@example.com',
+    },
+    getCurrentUser: {
+      data: {
+        displayName: 'John Doe',
+        avatarImage: {url: 'https://example.com/avatar.jpg'},
+      },
+    },
+    createOrderAttribution: undefined,
+    addToCart: undefined,
+    buyProduct: undefined,
+    buyProducts: undefined,
+    showErrorScreen: undefined,
+    showErrorToast: undefined,
+    getDeeplinkPaths: {
+      matchers: ['/products', '/collections', '/cart'],
+    },
+    navigateToDeeplink: undefined,
+    navigateToShop: undefined,
+    navigateToProduct: undefined,
+    navigateToOrder: undefined,
+    navigateToCheckout: undefined,
+    createImageUploadLink: {
+      targets: [
+        {
+          url: 'https://example.com/upload',
+          resourceUrl: 'https://example.com/resource',
+          parameters: [{name: 'key', value: 'upload-123'}],
+        },
+      ],
+    },
+    completeImageUpload: {
+      files: [
+        {
+          id: 'file-123',
+          fileStatus: 'READY',
+          image: {url: 'https://example.com/image.jpg'},
+        },
+      ],
+    },
+    getPersistedItem: 'stored-value',
+    setPersistedItem: undefined,
+    removePersistedItem: undefined,
+    getAllPersistedKeys: ['key1', 'key2', 'key3'],
+    clearPersistedItems: undefined,
+    getInternalPersistedItem: 'internal-value',
+    setInternalPersistedItem: undefined,
+    removeInternalPersistedItem: undefined,
+    getAllInternalPersistedKeys: ['internal-key1', 'internal-key2'],
+    clearInternalPersistedItems: undefined,
+    getSecret: 'secret-value',
+    setSecret: undefined,
+    removeSecret: undefined,
+    reportInteraction: undefined,
+    reportImpression: undefined,
+    reportContentImpression: undefined,
+    getProductLists: {
+      data: [
+        createProductList('list-1', 'Wishlist'),
+        createProductList('list-2', 'Favorites'),
+      ],
+      pageInfo: createPagination(),
+    },
+    getProductList: {
+      data: createProductList('list-1', 'Wishlist', [
+        createProduct('prod-1', 'Sample Product'),
+      ]),
+      pageInfo: createPagination(),
+    },
+    addProductList: createProductList('list-3', 'New List'),
+    removeProductList: undefined,
+    renameProductList: createProductList('list-1', 'Updated Wishlist'),
+    addProductListItem: undefined,
+    removeProductListItem: undefined,
+    getRecommendedProducts: {
+      data: [
+        createProduct('rec-1', 'Recommended Product 1', '79.99'),
+        createProduct('rec-2', 'Recommended Product 2', '129.99'),
+      ],
+      pageInfo: createPagination(),
+    },
+    getRecommendedShops: {
+      data: [
+        createShop('shop-1', 'Amazing Store'),
+        createShop('shop-2', 'Best Deals Shop'),
+      ],
+      pageInfo: createPagination(),
+    },
+    searchProductsByShop: {
+      data: [
+        createProduct('search-1', 'Search Result 1', '59.99'),
+        createProduct('search-2', 'Search Result 2', '89.99'),
+      ],
+      pageInfo: createPagination(),
+    },
+    getOrders: {
+      data: [
+        {
+          id: 'order-1',
+          name: '#1001',
+          lineItems: [
+            {
+              productTitle: 'Sample Product',
+              variantTitle: 'Medium',
+              quantity: 2,
+              product: null,
+            },
+          ],
+          shop: createShop('shop-1', 'Sample Shop'),
+        },
+      ],
+      pageInfo: createPagination(),
+    },
+    getBuyerAttributes: {
+      data: {
+        genderAffinity: 'NEUTRAL' as Gender,
+        categoryAffinities: [
+          {id: 'cat1', name: 'Electronics'},
+          {id: 'cat2', name: 'Clothing'},
+        ],
+      },
+    },
+    showFeedbackSheet: undefined,
+    getPopularProducts: {
+      data: [
+        createProduct('pop-1', 'The Hero Snowboard', '702.95'),
+        createProduct('pop-2', 'Snow Jacket', '605.95', '702.00'),
+        createProduct('pop-3', 'Winter Gloves', '89.95'),
+      ],
+      pageInfo: createPagination(),
+    },
+    share: {
+      message: 'Shared!',
+      success: true,
+    },
+    getCuratedProducts: {
+      data: [
+        createProduct('cur-1', 'Curated Product 1', '79.99'),
+        createProduct('cur-2', 'Curated Product 2', '129.99'),
+      ],
+      pageInfo: createPagination(),
+    },
+    getSavedProducts: {
+      data: [createProduct('saved-1', 'Saved Product 1', '49.99')],
+      pageInfo: createPagination(),
+    },
+    getRecentProducts: {
+      data: [createProduct('recent-1', 'Recent Product 1', '59.99')],
+      pageInfo: createPagination(),
+    },
+    getProductSearch: {
+      data: [createProduct('search-3', 'Search Product 3', '39.99')],
+      pageInfo: createPagination(),
+    },
+    getProducts: {data: [createProduct('prod-2', 'Product 2', '19.99')]},
+    getProduct: {data: createProduct('prod-1', 'Sample Product')},
+    getProductVariants: {
+      data: [
+        {
+          id: 'variant-1',
+          isFavorited: false,
+          image: {url: 'https://example.com/variant-1.jpg'},
+          price: {amount: '19.99', currencyCode: 'USD'},
+          compareAtPrice: {amount: '29.99', currencyCode: 'USD'},
+        },
+      ],
+      pageInfo: createPagination(),
+    },
+    getProductMedia: {
+      data: [
+        {
+          id: 'media-1',
+          image: {url: 'https://example.com/media-1.jpg'},
+          mediaContentType: 'IMAGE',
+          alt: 'Sample product image',
+        },
+      ],
+      pageInfo: createPagination(),
+    },
+    getShop: {data: createShop('shop-1', 'Sample Shop')},
+    getRecentShops: {
+      data: [createShop('recent-shop-1', 'Recent Shop 1')],
+      pageInfo: createPagination(),
+    },
+    getFollowedShops: {
+      data: [createShop('followed-shop-1', 'Followed Shop 1')],
+      pageInfo: createPagination(),
+    },
+    previewProductInAr: undefined,
+  } as const
+
+  const mock: Partial<ShopActions> = {}
+  for (const key in results) {
+    if (Object.prototype.hasOwnProperty.call(results, key)) {
+      // @ts-expect-error: dynamic assignment is safe due to exhaustive mapping
+      mock[key] = makeMockMethod(
+        key as keyof ShopActions,
+        results[key as keyof typeof results]
+      )
+    }
+  }
+  return mock as ShopActions
+}
+
+export const injectMocks = () => {
+  window.minisSDK = makeMockActions()
+  window.minisParams = {
+    handle: 'mock-handle',
+    initialUrl: '/mock-initial-url',
+  }
+}
+
+if (!window.minisSDK) {
+  injectMocks()
+}

package/src/styles/globals.css

@@ -0,0 +1,41 @@
+/* Global styles and browser behavior */
+
+/* Essential base styles */
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/* Touch and selection styles */
+html,
+body {
+  touch-action: manipulation;
+}
+
+/* Disable text selection */
+body {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+/* Re-enable text selection for input fields */
+input,
+textarea {
+  -webkit-user-select: text;
+  -moz-user-select: text;
+  -ms-user-select: text;
+  user-select: text;
+}
+
+/* Disable image drag */
+img,
+.no-drag {
+  -webkit-user-drag: none;
+  user-drag: none;
+}

package/src/styles/theme.css

@@ -0,0 +1,102 @@
+/* Design tokens and theme configuration */
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  /* Palette Colors - Purple */
+  --purple-d80: #1b163b;
+  --purple-d60: #322c7d;
+  --purple-d50: #4524db;
+  --purple-p40: #5433eb;
+  --purple-l30: #6445ed;
+  --purple-l20: #9c83f8;
+  --purple-l10: #dbd1ff;
+  --purple-l5: #eeeaff;
+  --purple-l2: #f7f5ff;
+
+  /* Palette Colors - Grayscale */
+  --grayscale-d100: #000000;
+  --grayscale-d93: #121212;
+  --grayscale-d90: #1a1a1a;
+  --grayscale-d80: #2a2a2a;
+  --grayscale-d70: #404040;
+  --grayscale-d60: #656667;
+  --grayscale-d50: #6f7071;
+  --grayscale-l40: #a6a8a9;
+  --grayscale-l20: #c9cbcc;
+  --grayscale-l10: #e1e4e5;
+  --grayscale-l6: #eef0f1;
+  --grayscale-l5: #f2f4f5;
+  --grayscale-l0: #ffffff;
+
+  /* Palette Colors - Green */
+  --green-d90: #002e24;
+  --green-d80: #004839;
+  --green-d70: #008552;
+  --green-l30: #92d08d;
+  --green-l20: #baebcb;
+  --green-l10: #d2f2de;
+  --green-l5: #e4f6eb;
+
+  /* Palette Colors - Poppy */
+  --poppy-d80: #481609;
+  --poppy-d70: #832711;
+  --poppy-d50: #d92a0f;
+  --poppy-l40: #f05d38;
+  --poppy-l20: #ff967d;
+  --poppy-l10: #ffd2c2;
+  --poppy-l4: #ffece9;
+
+  /* Palette Colors - Ochre */
+  --ochre-d90: #443600;
+  --ochre-d70: #8c6e01;
+  --ochre-d60: #c29d05;
+  --ochre-l50: #e3be2b;
+  --ochre-l30: #f8db67;
+  --ochre-l20: #ffec9f;
+  --ochre-l10: #fff4cb;
+  --ochre-l6: #fff9e2;
+
+  /* Palette Colors - Brand */
+  --brand-aqua: #8dc0c6;
+  --brand-violet: #a327c2;
+  --brand-magenta: #d354ff;
+  --brand-olive: #8b8f01;
+  --brand-lime: #c7de00;
+  --brand-sage: #d8e59d;
+  --brand-sand: #f4f4ed;
+}
+
+@theme {
+  /* Core theme colors */
+  --color-background: var(--grayscale-l0);
+  --color-foreground: var(--grayscale-d100);
+  --color-card: var(--grayscale-l0);
+  --color-card-foreground: var(--grayscale-d100);
+  --color-popover: var(--grayscale-l0);
+  --color-popover-foreground: var(--grayscale-d100);
+  --color-primary: var(--purple-p40);
+  --color-primary-foreground: var(--grayscale-l0);
+  --color-secondary: var(--grayscale-d100);
+  --color-secondary-foreground: var(--grayscale-l0);
+  --color-tertiary: var(--grayscale-l5);
+  --color-tertiary-foreground: var(--grayscale-d100);
+  --color-muted: var(--grayscale-l5);
+  --color-muted-foreground: var(--grayscale-d50);
+  --color-accent: var(--grayscale-l5);
+  --color-accent-foreground: var(--grayscale-d70);
+  --color-destructive: var(--poppy-d50);
+  --color-border: rgba(0, 0, 0, 0.1);
+  --color-input: var(--grayscale-l20);
+  --color-ring: var(--purple-p40);
+  --color-disabled: var(--grayscale-l6);
+  --color-disabled-foreground: var(--grayscale-l40);
+
+  /* Button theme colors */
+  --color-button-overlay: var(--grayscale-d70);
+}
+
+/* Dark mode overrides - only the palette colors that change */
+.dark {
+  /* TBD */
+}

package/src/types/index.ts

@@ -1,5 +1,4 @@
-// Common types for the component library
-export * from './minisSDK.generated.d'
+export * from '@shopify/shop-minis-platform'
 
 export interface BaseComponentProps {
   className?: string

package/dist/_virtual/index3.js

@@ -1,5 +0,0 @@
-var r = {};
-export {
-  r as __exports
-};
-//# sourceMappingURL=index3.js.map

package/dist/_virtual/index3.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/_virtual/index4.js

@@ -1,5 +0,0 @@
-var e = { exports: {} };
-export {
-  e as __module
-};
-//# sourceMappingURL=index4.js.map

package/dist/_virtual/index4.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index4.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/_virtual/use-sync-external-store-shim.development.js

@@ -1,5 +0,0 @@
-var e = {};
-export {
-  e as __exports
-};
-//# sourceMappingURL=use-sync-external-store-shim.development.js.map

package/dist/_virtual/use-sync-external-store-shim.development.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-sync-external-store-shim.development.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/_virtual/use-sync-external-store-shim.production.js

@@ -1,5 +0,0 @@
-var r = {};
-export {
-  r as __exports
-};
-//# sourceMappingURL=use-sync-external-store-shim.production.js.map

package/dist/_virtual/use-sync-external-store-shim.production.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-sync-external-store-shim.production.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/atoms/accordion.js

@@ -1,65 +0,0 @@
-import { jsx as e, jsxs as a } from "react/jsx-runtime";
-import { cn as r } from "../../lib/utils.js";
-import i from "../../node_modules/.pnpm/lucide-react@0.513.0_react@19.1.0/node_modules/lucide-react/dist/esm/icons/chevron-down.js";
-import { Root as s, Item as d, Header as c, Trigger as l, Content as m } from "../../node_modules/.pnpm/@radix-ui_react-accordion@1.2.11_@types_react-dom@19.1.6_@types_react@19.1.6__@types_react@19_krqvbhitcyb3vl2jzw3fp35uhu/node_modules/@radix-ui/react-accordion/dist/index.js";
-function b({
-  ...t
-}) {
-  return /* @__PURE__ */ e(s, { "data-slot": "accordion", ...t });
-}
-function x({
-  className: t,
-  ...o
-}) {
-  return /* @__PURE__ */ e(
-    d,
-    {
-      "data-slot": "accordion-item",
-      className: r("border-b last:border-b-0", t),
-      ...o
-    }
-  );
-}
-function v({
-  className: t,
-  children: o,
-  ...n
-}) {
-  return /* @__PURE__ */ e(c, { className: "flex", children: /* @__PURE__ */ a(
-    l,
-    {
-      "data-slot": "accordion-trigger",
-      className: r(
-        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
-        t
-      ),
-      ...n,
-      children: [
-        o,
-        /* @__PURE__ */ e(i, { className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" })
-      ]
-    }
-  ) });
-}
-function h({
-  className: t,
-  children: o,
-  ...n
-}) {
-  return /* @__PURE__ */ e(
-    m,
-    {
-      "data-slot": "accordion-content",
-      className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
-      ...n,
-      children: /* @__PURE__ */ e("div", { className: r("pt-0 pb-4", t), children: o })
-    }
-  );
-}
-export {
-  b as Accordion,
-  h as AccordionContent,
-  x as AccordionItem,
-  v as AccordionTrigger
-};
-//# sourceMappingURL=accordion.js.map

package/dist/components/atoms/accordion.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"accordion.js","sources":["../../../src/components/atoms/accordion.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {ChevronDownIcon} from 'lucide-react'\nimport {Accordion as AccordionPrimitive} from 'radix-ui'\n\nimport {cn} from '../../lib/utils'\n\nfunction Accordion({\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Root>) {\n  return <AccordionPrimitive.Root data-slot=\"accordion\" {...props} />\n}\n\nfunction AccordionItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Item>) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn('border-b last:border-b-0', className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <ChevronDownIcon className=\"text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200\" />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Content>) {\n  return (\n    <AccordionPrimitive.Content\n      data-slot=\"accordion-content\"\n      className=\"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm\"\n      {...props}\n    >\n      <div className={cn('pt-0 pb-4', className)}>{children}</div>\n    </AccordionPrimitive.Content>\n  )\n}\n\nexport {Accordion, AccordionItem, AccordionTrigger, AccordionContent}\n"],"names":["Accordion","props","AccordionPrimitive.Root","AccordionItem","className","jsx","AccordionPrimitive.Item","cn","AccordionTrigger","children","AccordionPrimitive.Header","jsxs","AccordionPrimitive.Trigger","ChevronDownIcon","AccordionContent","AccordionPrimitive.Content"],"mappings":";;;;AAOA,SAASA,EAAU;AAAA,EACjB,GAAGC;AACL,GAAyD;AACvD,2BAAQC,GAAA,EAAwB,aAAU,aAAa,GAAGD,GAAO;AACnE;AAEA,SAASE,EAAc;AAAA,EACrB,WAAAC;AAAA,EACA,GAAGH;AACL,GAAyD;AAErD,SAAA,gBAAAI;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWC,EAAG,4BAA4BH,CAAS;AAAA,MAClD,GAAGH;AAAA,IAAA;AAAA,EACN;AAEJ;AAEA,SAASO,EAAiB;AAAA,EACxB,WAAAJ;AAAA,EACA,UAAAK;AAAA,EACA,GAAGR;AACL,GAA4D;AAC1D,SACG,gBAAAI,EAAAK,GAAA,EAA0B,WAAU,QACnC,UAAA,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWL;AAAA,QACT;AAAA,QACAH;AAAA,MACF;AAAA,MACC,GAAGH;AAAA,MAEH,UAAA;AAAA,QAAAQ;AAAA,QACD,gBAAAJ,EAACQ,GAAgB,EAAA,WAAU,8GAA8G,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAE7I;AAEJ;AAEA,SAASC,EAAiB;AAAA,EACxB,WAAAV;AAAA,EACA,UAAAK;AAAA,EACA,GAAGR;AACL,GAA4D;AAExD,SAAA,gBAAAI;AAAA,IAACU;AAAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAU;AAAA,MACT,GAAGd;AAAA,MAEJ,4BAAC,OAAI,EAAA,WAAWM,EAAG,aAAaH,CAAS,GAAI,UAAAK,EAAS,CAAA;AAAA,IAAA;AAAA,EACxD;AAEJ;"}