@shopify/shop-minis-react 0.0.3 → 0.0.4

package/src/dev.tsx

@@ -4,6 +4,7 @@ import ReactDOM from 'react-dom/client'
 import {toast} from 'sonner'
 
 import './index.css'
+import {ProductCard} from './components/commerce/product-card'
 import {ProductLink} from './components/commerce/product-link'
 import {
   Accordion,
@@ -116,6 +117,129 @@ function App() {
             <p className="text-gray-600 mt-2">Shop app specific components</p>
           </div>
 
+          {/* ProductCard Examples */}
+          <div className="space-y-4">
+            <h3 className="text-2xl font-semibold">ProductCard</h3>
+            <div className="space-y-6">
+              {/* Default Variant - Full Size */}
+              <div className="space-y-2">
+                <h4 className="text-lg font-medium">Default</h4>
+
+                <ProductCard
+                  product={{
+                    id: '1',
+                    title: 'The Hero Snowboard',
+                    price: {amount: '702.95', currencyCode: CurrencyCode.USD},
+                    featuredImage: {
+                      url: 'https://images.unsplash.com/photo-1551524164-687a55dd1126?w=400&h=400&fit=crop&crop=center',
+                      altText: 'The Hero Snowboard',
+                    },
+                    shop: {id: 'shop1', name: 'Snow Sports Co.'},
+                    defaultVariantId: 'variant1',
+                    isFavorited: false,
+                    reviewAnalytics: {},
+                  }}
+                  variant="default"
+                />
+              </div>
+
+              {/* Grid Layout for Variants */}
+              <div className="grid grid-cols-2 md:grid-cols-4 gap-4 max-w-4xl">
+                {/* Default with discount */}
+                <div className="space-y-2">
+                  <h4 className="text-sm font-medium">
+                    Default (with discount)
+                  </h4>
+                  <ProductCard
+                    product={{
+                      id: '2',
+                      title: 'The Hero Snowboard',
+                      price: {amount: '605.95', currencyCode: CurrencyCode.USD},
+                      compareAtPrice: {
+                        amount: '702.95',
+                        currencyCode: CurrencyCode.USD,
+                      },
+                      featuredImage: {
+                        url: 'https://images.unsplash.com/photo-1551524164-687a55dd1126?w=400&h=400&fit=crop&crop=center',
+                        altText: 'The Hero Snowboard',
+                      },
+                      shop: {id: 'shop1', name: 'Snow Sports Co.'},
+                      defaultVariantId: 'variant2',
+                      isFavorited: true,
+                      reviewAnalytics: {},
+                    }}
+                    variant="default"
+                  />
+                </div>
+
+                {/* Price Overlay */}
+                <div className="space-y-2">
+                  <h4 className="text-sm font-medium">Price Overlay</h4>
+                  <ProductCard
+                    product={{
+                      id: '3',
+                      title: 'The Hero Snowboard',
+                      price: {amount: '702.95', currencyCode: CurrencyCode.USD},
+                      featuredImage: {
+                        url: 'https://images.unsplash.com/photo-1551524164-687a55dd1126?w=400&h=400&fit=crop&crop=center',
+                        altText: 'The Hero Snowboard',
+                      },
+                      shop: {id: 'shop1', name: 'Snow Sports Co.'},
+                      defaultVariantId: 'variant3',
+                      isFavorited: false,
+                      reviewAnalytics: {},
+                    }}
+                    variant="priceOverlay"
+                  />
+                </div>
+
+                {/* With Badge */}
+                <div className="space-y-2">
+                  <h4 className="text-sm font-medium">With Badge</h4>
+                  <ProductCard
+                    product={{
+                      id: '4',
+                      title: 'The Hero Snowboard',
+                      price: {amount: '702.95', currencyCode: CurrencyCode.USD},
+                      featuredImage: {
+                        url: 'https://images.unsplash.com/photo-1551524164-687a55dd1126?w=400&h=400&fit=crop&crop=center',
+                        altText: 'The Hero Snowboard',
+                      },
+                      shop: {id: 'shop1', name: 'Snow Sports Co.'},
+                      defaultVariantId: 'variant4',
+                      isFavorited: true,
+                      reviewAnalytics: {},
+                    }}
+                    variant="default"
+                    badgeText="Sponsored"
+                    badgeVariant="secondary"
+                  />
+                </div>
+
+                {/* Compact */}
+                <div className="space-y-2">
+                  <h4 className="text-sm font-medium">Compact</h4>
+                  <ProductCard
+                    product={{
+                      id: '5',
+                      title: 'The Hero Snowboard',
+                      price: {amount: '702.95', currencyCode: CurrencyCode.USD},
+                      featuredImage: {
+                        url: 'https://images.unsplash.com/photo-1551524164-687a55dd1126?w=400&h=400&fit=crop&crop=center',
+                        altText: 'The Hero Snowboard',
+                      },
+                      shop: {id: 'shop1', name: 'Snow Sports Co.'},
+                      defaultVariantId: 'variant5',
+                      isFavorited: false,
+                      reviewAnalytics: {},
+                    }}
+                    variant="compact"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+
           {/* ProductLink Examples */}
           <div className="space-y-4">
             <h3 className="text-2xl font-semibold">ProductLink</h3>
@@ -240,7 +364,7 @@ function App() {
               <h3 className="text-2xl font-semibold">Alert Dialog</h3>
               <AlertDialog open={alertOpen} onOpenChange={setAlertOpen}>
                 <AlertDialogTrigger asChild>
-                  <Button variant="outline">Show Alert Dialog</Button>
+                  <Button variant="outlined">Show Alert Dialog</Button>
                 </AlertDialogTrigger>
                 <AlertDialogContent>
                   <AlertDialogHeader>
@@ -295,15 +419,49 @@ function App() {
             {/* Button */}
             <div className="space-y-4">
               <h3 className="text-2xl font-semibold">Button</h3>
-              <div className="flex flex-wrap gap-4">
-                <Button>Default Button</Button>
-                <Button variant="destructive">Destructive</Button>
-                <Button variant="outline">Outline</Button>
-                <Button variant="secondary">Secondary</Button>
-                <Button variant="ghost">Ghost</Button>
-                <Button variant="link">Link</Button>
-                <Button size="sm">Small</Button>
-                <Button size="lg">Large</Button>
+              <div className="space-y-4">
+                {/* Core Variants */}
+                <>
+                  <h4 className="text-lg font-medium mb-2">Core Variants</h4>
+                  <div className="flex flex-wrap gap-2">
+                    <Button variant="primary">Primary</Button>
+                    <Button variant="secondary">Secondary</Button>
+                    <Button variant="tertiary">Tertiary</Button>
+                    <Button variant="outlined">Outlined</Button>
+                    <Button variant="text">Text</Button>
+                    <Button variant="borderless">Borderless</Button>
+                    <Button variant="borderlessUnbranded">
+                      Borderless Unbranded
+                    </Button>
+                  </div>
+                </>
+
+                {/* Special Variants */}
+                <>
+                  <h4 className="text-lg font-medium mb-2">Special Variants</h4>
+                  <div className="flex flex-wrap gap-2">
+                    <Button variant="blurred">Blurred</Button>
+                    <Button variant="dangerous">Dangerous</Button>
+                    <Button variant="outlined-dangerous">
+                      Outlined Dangerous
+                    </Button>
+                  </div>
+                </>
+
+                {/* Sizes */}
+                <>
+                  <h4 className="text-lg font-medium mb-2">Sizes</h4>
+                  <div className="flex flex-wrap items-center gap-2">
+                    <Button size="sm">Small</Button>
+                    <Button size="default">Default</Button>
+                    <Button size="lg">Large</Button>
+                    <Button size="icon">
+                      <span role="img" aria-label="Target">
+                        🎯
+                      </span>
+                    </Button>
+                  </div>
+                </>
               </div>
             </div>
 
@@ -318,7 +476,7 @@ function App() {
                     contains.
                   </CardDescription>
                   <CardAction>
-                    <Button size="sm" variant="outline">
+                    <Button size="sm" variant="outlined">
                       Action
                     </Button>
                   </CardAction>
@@ -374,7 +532,7 @@ function App() {
               <h3 className="text-2xl font-semibold">Dialog</h3>
               <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
                 <DialogTrigger asChild>
-                  <Button variant="outline">Open Dialog</Button>
+                  <Button variant="outlined">Open Dialog</Button>
                 </DialogTrigger>
                 <DialogContent className="sm:max-w-[425px]">
                   <DialogHeader>
@@ -418,7 +576,7 @@ function App() {
               <h3 className="text-2xl font-semibold">Drawer</h3>
               <Drawer>
                 <DrawerTrigger asChild>
-                  <Button variant="outline">Open Drawer</Button>
+                  <Button variant="outlined">Open Drawer</Button>
                 </DrawerTrigger>
                 <DrawerContent>
                   <div className="mx-auto w-full max-w-sm">
@@ -431,7 +589,7 @@ function App() {
                     <div className="p-4 pb-0">
                       <div className="flex items-center justify-center space-x-2">
                         <Button
-                          variant="outline"
+                          variant="outlined"
                           size="icon"
                           className="h-8 w-8 shrink-0 rounded-full"
                           onClick={() =>
@@ -449,7 +607,7 @@ function App() {
                           </div>
                         </div>
                         <Button
-                          variant="outline"
+                          variant="outlined"
                           size="icon"
                           className="h-8 w-8 shrink-0 rounded-full"
                           onClick={() =>
@@ -463,7 +621,7 @@ function App() {
                     <DrawerFooter>
                       <Button>Submit</Button>
                       <DrawerClose asChild>
-                        <Button variant="outline">Cancel</Button>
+                        <Button variant="outlined">Cancel</Button>
                       </DrawerClose>
                     </DrawerFooter>
                   </div>
@@ -586,7 +744,7 @@ function App() {
               <h3 className="text-2xl font-semibold">Sheet</h3>
               <Sheet>
                 <SheetTrigger asChild>
-                  <Button variant="outline">Open Sheet</Button>
+                  <Button variant="outlined">Open Sheet</Button>
                 </SheetTrigger>
                 <SheetContent>
                   <SheetHeader>

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}`
+  }
+}