@shopify/shop-minis-react 0.0.18 → 0.0.19

package/src/styles/animations.css

@@ -0,0 +1,90 @@
+/* --- Keyframe Definitions --- */
+@keyframes slide-in-from-right {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slide-out-to-left {
+  from {
+    transform: translateX(0);
+    filter: brightness(1);
+  }
+  to {
+    transform: translateX(-30%);
+    filter: brightness(0.7);
+  } /* Slight parallax effect */
+}
+
+@keyframes slide-in-from-left {
+  from {
+    transform: translateX(-30%);
+    filter: brightness(0.7);
+  }
+  to {
+    transform: translateX(0);
+    filter: brightness(1);
+  }
+}
+
+@keyframes slide-out-to-right {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* --- View Transition Animations --- */
+@media not (prefers-reduced-motion: reduce) {
+  /* FORWARD navigation animation */
+  html[data-navigation-type='forward']::view-transition-old(root) {
+    animation: 0.4s cubic-bezier(0.4, 0, 0.2, 1) both slide-out-to-left;
+    z-index: 1;
+  }
+  html[data-navigation-type='forward']::view-transition-new(root) {
+    animation: 0.4s cubic-bezier(0.4, 0, 0.2, 1) both slide-in-from-right;
+    z-index: 2; /* New view slides on top */
+  }
+
+  /* BACKWARD navigation animation */
+  html[data-navigation-type='backward']::view-transition-old(root) {
+    animation: 0.4s cubic-bezier(0.4, 0, 0.2, 1) both slide-out-to-right;
+    z-index: 2; /* Old view slides away from on top */
+  }
+  html[data-navigation-type='backward']::view-transition-new(root) {
+    animation: 0.4s cubic-bezier(0.4, 0, 0.2, 1) both slide-in-from-left;
+    z-index: 1;
+  }
+
+  /* Android backward navigation animation */
+  html[data-navigation-type='android-backward']::view-transition-old(root) {
+    animation: 0.4s cubic-bezier(0.4, 0, 0.2, 1) both slide-out-to-right;
+    z-index: 2; /* Old view slides away from on top */
+  }
+  html[data-navigation-type='android-backward']::view-transition-new(root) {
+    animation: 0.4s cubic-bezier(0.4, 0, 0.2, 1) both slide-in-from-left;
+    z-index: 1;
+  }
+
+  /* NONE navigation animation */
+  html[data-navigation-type='none']::view-transition-group(root),
+  html[data-navigation-type='none']::view-transition-old(root),
+  html[data-navigation-type='none']::view-transition-new(root) {
+    animation: 0 !important;
+    opacity: 0 !important;
+  }
+}

package/src/styles/globals.css

@@ -16,6 +16,14 @@ body {
   touch-action: manipulation;
 }
 
+html {
+  position: relative;
+  width: 100vw;
+  min-height: 100vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
 /* Disable text selection */
 body {
   -webkit-user-select: none;

package/src/styles/theme.css

@@ -97,6 +97,6 @@
 }
 
 /* Dark mode overrides - only the palette colors that change */
-.dark {
+@theme dark {
   /* TBD */
 }

package/src/types/index.ts

@@ -12,4 +12,10 @@ export interface ThemeConfig {
   typography?: {[key: string]: string}
 }
 
-// Export other types as needed
+// Navigation
+export const DATA_NAVIGATION_TYPE_ATTRIBUTE = 'data-navigation-type' as const
+export const NAVIGATION_TYPES = {
+  forward: 'forward',
+  backward: 'backward',
+  none: 'none',
+} as const

package/src/utils/image.ts

@@ -0,0 +1,18 @@
+import {toUint8Array} from 'js-base64'
+import {thumbHashToDataURL} from 'thumbhash'
+
+/**
+ * Converts a thumbhash string to a data URL for use as an image placeholder
+ * @param thumbhash Base64 encoded thumbhash string
+ * @returns Data URL that can be used as image source or undefined if conversion fails
+ */
+export function getThumbhashDataURL(thumbhash?: string): string | undefined {
+  if (!thumbhash) return
+
+  try {
+    const thumbhashArray = toUint8Array(thumbhash)
+    return thumbHashToDataURL(thumbhashArray)
+  } catch (error) {
+    console.warn('Failed to decode thumbhash to data URL', error)
+  }
+}