@shopify/shop-minis-react 0.0.2 → 0.0.4

package/src/index.css

@@ -40,75 +40,156 @@
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
+
+  /* Grayscale palette colors for Tailwind */
+  --color-grayscale-d100: var(--grayscale-d100);
+  --color-grayscale-d93: var(--grayscale-d93);
+  --color-grayscale-d90: var(--grayscale-d90);
+  --color-grayscale-d80: var(--grayscale-d80);
+  --color-grayscale-d70: var(--grayscale-d70);
+  --color-grayscale-d60: var(--grayscale-d60);
+  --color-grayscale-d50: var(--grayscale-d50);
+  --color-grayscale-l40: var(--grayscale-l40);
+  --color-grayscale-l20: var(--grayscale-l20);
+  --color-grayscale-l10: var(--grayscale-l10);
+  --color-grayscale-l6: var(--grayscale-l6);
+  --color-grayscale-l5: var(--grayscale-l5);
+  --color-grayscale-l0: var(--grayscale-l0);
 }
 
 :root {
   --radius: 0.65rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.141 0.005 285.823);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.141 0.005 285.823);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.141 0.005 285.823);
-  --primary: oklch(0.606 0.25 292.717);
-  --primary-foreground: oklch(0.969 0.016 293.756);
-  --secondary: oklch(0.967 0.001 286.375);
-  --secondary-foreground: oklch(0.21 0.006 285.885);
-  --muted: oklch(0.967 0.001 286.375);
-  --muted-foreground: oklch(0.552 0.016 285.938);
-  --accent: oklch(0.967 0.001 286.375);
-  --accent-foreground: oklch(0.21 0.006 285.885);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.92 0.004 286.32);
-  --input: oklch(0.92 0.004 286.32);
-  --ring: oklch(0.606 0.25 292.717);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.141 0.005 285.823);
-  --sidebar-primary: oklch(0.606 0.25 292.717);
-  --sidebar-primary-foreground: oklch(0.969 0.016 293.756);
-  --sidebar-accent: oklch(0.967 0.001 286.375);
-  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
-  --sidebar-border: oklch(0.92 0.004 286.32);
-  --sidebar-ring: oklch(0.606 0.25 292.717);
+
+  /* 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;
+
+  /* Semantic Colors */
+  --background: var(--grayscale-l0);
+  --foreground: var(--grayscale-d100);
+  --card: var(--grayscale-l0);
+  --card-foreground: var(--grayscale-d100);
+  --popover: var(--grayscale-l0);
+  --popover-foreground: var(--grayscale-d100);
+  --primary: var(--purple-p40);
+  --primary-foreground: var(--grayscale-l0);
+  --secondary: var(--grayscale-l5);
+  --secondary-foreground: var(--grayscale-d70);
+  --muted: var(--grayscale-l5);
+  --muted-foreground: var(--grayscale-d70);
+  --accent: var(--grayscale-l5);
+  --accent-foreground: var(--grayscale-d70);
+  --destructive: var(--poppy-d50);
+  --border: rgba(0, 0, 0, 0.1);
+  --input: var(--grayscale-l20);
+  --ring: var(--purple-p40);
+  --chart-1: var(--ochre-d90);
+  --chart-2: var(--green-d70);
+  --chart-3: var(--green-l30);
+  --chart-4: var(--grayscale-d50);
+  --chart-5: var(--green-l20);
+  --sidebar: var(--grayscale-l5);
+  --sidebar-foreground: var(--grayscale-d100);
+  --sidebar-primary: var(--purple-p40);
+  --sidebar-primary-foreground: var(--purple-l20);
+  --sidebar-accent: var(--grayscale-l5);
+  --sidebar-accent-foreground: var(--grayscale-d70);
+  --sidebar-border: rgba(0, 0, 0, 0.1);
+  --sidebar-ring: var(--purple-p40);
 }
 
 .dark {
-  --background: oklch(0.141 0.005 285.823);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.21 0.006 285.885);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.21 0.006 285.885);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.541 0.281 293.009);
-  --primary-foreground: oklch(0.969 0.016 293.756);
-  --secondary: oklch(0.274 0.006 286.033);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.274 0.006 286.033);
-  --muted-foreground: oklch(0.705 0.015 286.067);
-  --accent: oklch(0.274 0.006 286.033);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.541 0.281 293.009);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.21 0.006 285.885);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.541 0.281 293.009);
-  --sidebar-primary-foreground: oklch(0.969 0.016 293.756);
-  --sidebar-accent: oklch(0.274 0.006 286.033);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.541 0.281 293.009);
+  /* Dark mode semantic colors */
+  --background: var(--grayscale-d93);
+  --foreground: var(--grayscale-l0);
+  --card: var(--grayscale-d93);
+  --card-foreground: var(--grayscale-l0);
+  --popover: var(--grayscale-d93);
+  --popover-foreground: var(--grayscale-l0);
+  --primary: var(--purple-l20);
+  --primary-foreground: var(--grayscale-d100);
+  --secondary: var(--grayscale-d80);
+  --secondary-foreground: var(--grayscale-l0);
+  --muted: var(--grayscale-d80);
+  --muted-foreground: var(--grayscale-l20);
+  --accent: var(--grayscale-d80);
+  --accent-foreground: var(--grayscale-l0);
+  --destructive: var(--poppy-l40);
+  --border: rgba(255, 255, 255, 0.2);
+  --input: var(--grayscale-l40);
+  --ring: var(--purple-l20);
+  --chart-1: var(--green-l30);
+  --chart-2: var(--grayscale-d60);
+  --chart-3: var(--green-l20);
+  --chart-4: var(--grayscale-d60);
+  --chart-5: var(--ochre-l30);
+  --sidebar: var(--grayscale-d80);
+  --sidebar-foreground: var(--grayscale-l0);
+  --sidebar-primary: var(--purple-l20);
+  --sidebar-primary-foreground: var(--purple-l10);
+  --sidebar-accent: var(--grayscale-d80);
+  --sidebar-accent-foreground: var(--grayscale-l0);
+  --sidebar-border: rgba(255, 255, 255, 0.2);
+  --sidebar-ring: var(--purple-l20);
 }
 
 @layer base {

package/src/lib/formatMoney.ts

@@ -0,0 +1,21 @@
+/**
+ * Formats money amount with appropriate currency symbol
+ * Uses browser's Intl.NumberFormat for consistent currency formatting
+ */
+export function formatMoney(amount: string, currencyCode: string): string {
+  try {
+    // Use en-US specifically for USD to get $ instead of US$
+    // For other currencies, use browser locale but fallback to en-US
+    const locale =
+      currencyCode === 'USD' ? 'en-US' : navigator.language || 'en-US'
+
+    return new Intl.NumberFormat(locale, {
+      style: 'currency',
+      currency: currencyCode,
+    }).format(Number(amount))
+  } catch (error) {
+    // Fallback if currency code is invalid or not supported
+    console.warn(`Invalid currency code: ${currencyCode}`, error)
+    return `${currencyCode} ${amount}`
+  }
+}

package/src/mockActions.ts

@@ -0,0 +1,236 @@
+import {CurrencyCode, Gender} from './types/minisSDK.generated.d'
+
+const logAction =
+  (action: string, data?: any) =>
+  (...args: any[]) => {
+    console.log(`[Mock Action] ${action}`, ...args)
+    return Promise.resolve({ok: true, data})
+  }
+
+// Helper functions for common data structures
+const createProduct = (
+  id: string,
+  title: string,
+  price = '99.99',
+  compareAtPrice?: string
+) => ({
+  id,
+  title,
+  price: {amount: price, currencyCode: CurrencyCode.USD},
+  ...(compareAtPrice && {
+    compareAtPrice: {amount: compareAtPrice, currencyCode: CurrencyCode.USD},
+  }),
+  reviewAnalytics: {averageRating: 4.5, reviewCount: 10},
+  shop: {id: 'shop1', name: 'Mock Shop'},
+  defaultVariantId: `variant-${id}`,
+  isFavorited: false,
+  featuredImage: {url: `https://example.com/${id}.jpg`, 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,
+})
+
+window.minisSDK = window.minisSDK || {
+  // App & User
+  getShopAppInformation: logAction('getShopAppInformation', {
+    appVersion: '1.0.0',
+    buildNumber: '12345',
+    buildId: 'dev-build-123',
+  }),
+  getAccountInformation: logAction('getAccountInformation', {
+    status: 'available',
+    value: 'user@example.com',
+  }),
+  getCurrentUser: logAction('getCurrentUser', {
+    data: {
+      displayName: 'John Doe',
+      avatarImage: {url: 'https://example.com/avatar.jpg'},
+    },
+  }),
+
+  // Navigation
+  navigateToDeeplink: logAction('navigateToDeeplink'),
+  navigateToShop: logAction('navigateToShop'),
+  navigateToProduct: logAction('navigateToProduct'),
+  navigateToOrder: logAction('navigateToOrder'),
+  navigateToCheckout: logAction('navigateToCheckout'),
+  getDeeplinkPaths: logAction('getDeeplinkPaths', {
+    matchers: ['/products', '/collections', '/cart'],
+  }),
+
+  // Product Actions
+  addToCart: logAction('addToCart'),
+  buyProduct: logAction('buyProduct'),
+  buyProducts: logAction('buyProducts'),
+  favorite: logAction('favorite'),
+  unfavorite: logAction('unfavorite'),
+  createOrderAttribution: logAction('createOrderAttribution'),
+
+  // Tracking
+  productRecommendationImpression: logAction('productRecommendationImpression'),
+  productRecommendationClick: logAction('productRecommendationClick'),
+  reportInteraction: logAction('reportInteraction'),
+  reportImpression: logAction('reportImpression'),
+  reportContentImpression: logAction('reportContentImpression'),
+
+  // App Control
+  hideEntryPoint: logAction('hideEntryPoint'),
+  closeMini: logAction('closeMini'),
+  showErrorScreen: logAction('showErrorScreen'),
+  showErrorToast: logAction('showErrorToast'),
+  showFeedbackSheet: logAction('showFeedbackSheet'),
+
+  // Social
+  followShop: logAction('followShop', true),
+  unfollowShop: logAction('unfollowShop', false),
+
+  // Storage
+  getPersistedItem: logAction('getPersistedItem', 'stored-value'),
+  setPersistedItem: logAction('setPersistedItem'),
+  removePersistedItem: logAction('removePersistedItem'),
+  getAllPersistedKeys: logAction('getAllPersistedKeys', [
+    'key1',
+    'key2',
+    'key3',
+  ]),
+  clearPersistedItems: logAction('clearPersistedItems'),
+  getInternalPersistedItem: logAction(
+    'getInternalPersistedItem',
+    'internal-value'
+  ),
+  setInternalPersistedItem: logAction('setInternalPersistedItem'),
+  removeInternalPersistedItem: logAction('removeInternalPersistedItem'),
+  getAllInternalPersistedKeys: logAction('getAllInternalPersistedKeys', [
+    'internal-key1',
+    'internal-key2',
+  ]),
+  clearInternalPersistedItems: logAction('clearInternalPersistedItems'),
+  getSecret: logAction('getSecret', 'secret-value'),
+  setSecret: logAction('setSecret'),
+  removeSecret: logAction('removeSecret'),
+
+  // File Upload
+  createImageUploadLink: logAction('createImageUploadLink', {
+    targets: [
+      {
+        url: 'https://example.com/upload',
+        resourceUrl: 'https://example.com/resource',
+        parameters: [{name: 'key', value: 'upload-123'}],
+      },
+    ],
+  }),
+  completeImageUpload: logAction('completeImageUpload', {
+    files: [
+      {
+        id: 'file-123',
+        fileStatus: 'READY',
+        image: {url: 'https://example.com/image.jpg'},
+      },
+    ],
+  }),
+
+  // Product Lists
+  getProductLists: logAction('getProductLists', {
+    data: [
+      createProductList('list-1', 'Wishlist'),
+      createProductList('list-2', 'Favorites'),
+    ],
+    pageInfo: createPagination(),
+  }),
+  getProductList: logAction('getProductList', {
+    data: createProductList('list-1', 'Wishlist', [
+      createProduct('prod-1', 'Sample Product'),
+    ]),
+    pageInfo: createPagination(),
+  }),
+  addProductList: logAction(
+    'addProductList',
+    createProductList('list-3', 'New List')
+  ),
+  removeProductList: logAction('removeProductList'),
+  renameProductList: logAction(
+    'renameProductList',
+    createProductList('list-1', 'Updated Wishlist')
+  ),
+  addProductListItem: logAction('addProductListItem'),
+  removeProductListItem: logAction('removeProductListItem'),
+
+  // Recommendations & Search
+  getRecommendedProducts: logAction('getRecommendedProducts', {
+    data: [
+      createProduct('rec-1', 'Recommended Product 1', '79.99'),
+      createProduct('rec-2', 'Recommended Product 2', '129.99'),
+    ],
+    pageInfo: createPagination(),
+  }),
+  getRecommendedShops: logAction('getRecommendedShops', {
+    data: [
+      createShop('shop-1', 'Amazing Store'),
+      createShop('shop-2', 'Best Deals Shop'),
+    ],
+    pageInfo: createPagination(),
+  }),
+  searchProductsByShop: logAction('searchProductsByShop', {
+    data: [
+      createProduct('search-1', 'Search Result 1', '59.99'),
+      createProduct('search-2', 'Search Result 2', '89.99'),
+    ],
+    pageInfo: createPagination(),
+  }),
+  getPopularProducts: logAction('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(),
+  }),
+
+  // Orders & User Data
+  getOrders: logAction('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: logAction('getBuyerAttributes', {
+    data: {
+      genderAffinity: Gender.Neutral,
+      categoryAffinities: [
+        {id: 'cat1', name: 'Electronics'},
+        {id: 'cat2', name: 'Clothing'},
+      ],
+    },
+  }),
+}