@shopify/shop-minis-react 0.4.16 → 0.4.18

package/src/components/navigation/transition-link.tsx

@@ -4,7 +4,17 @@ import {useHref} from 'react-router'
 
 import {useNavigateWithTransition} from '../../hooks/navigation/useNavigateWithTransition'
 
-type TransitionLinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
+export interface TransitionLinkDocProps {
+  /** The target path to navigate to */
+  to: string
+  /** Click handler called before navigation */
+  onClick?: React.MouseEventHandler<HTMLAnchorElement>
+  /** Content to render inside the link */
+  children?: React.ReactNode
+}
+
+export interface TransitionLinkProps
+  extends AnchorHTMLAttributes<HTMLAnchorElement> {
   to: string
 }
 

package/src/components/ui/alert.tsx

@@ -4,6 +4,13 @@ import {cva, type VariantProps} from 'class-variance-authority'
 
 import {cn} from '../../lib/utils'
 
+export interface AlertDocProps {
+  /** Visual style variant */
+  variant?: 'default' | 'destructive'
+  /** Content to render inside */
+  children?: React.ReactNode
+}
+
 const alertVariants = cva(
   'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
   {

package/src/components/ui/badge.tsx

@@ -5,6 +5,15 @@ import {Slot as SlotPrimitive} from 'radix-ui'
 
 import {cn} from '../../lib/utils'
 
+export interface BadgeDocProps {
+  /** Visual style variant */
+  variant?: 'primary' | 'secondary' | 'destructive' | 'outline' | 'none'
+  /** Render as child element instead of span */
+  asChild?: boolean
+  /** Content to render inside */
+  children?: React.ReactNode
+}
+
 const badgeVariants = cva(
   'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none transition-[color,box-shadow] overflow-hidden',
   {

package/src/components/ui/input.tsx

@@ -2,6 +2,21 @@ import * as React from 'react'
 
 import {cn} from '../../lib/utils'
 
+export interface InputDocProps {
+  /** Ref to the input element (use instead of ref) */
+  innerRef?: React.Ref<HTMLInputElement>
+  /** Input type (text, email, password, etc.) */
+  type?: string
+  /** Placeholder text */
+  placeholder?: string
+  /** Current value */
+  value?: string
+  /** Change handler */
+  onChange?: React.ChangeEventHandler<HTMLInputElement>
+  /** Whether the input is disabled */
+  disabled?: boolean
+}
+
 // using the default ref doesn't seem to set the parent's ref object when mounted
 // Since this is a shadCN component, we need to make sure to add back the innerRef prop,
 // whenever the component is updated.

package/src/utils/image.ts

@@ -18,6 +18,44 @@ export function getThumbhashDataURL(thumbhash?: string): string | undefined {
   }
 }
 
+/**
+ * Converts a data URL to a Blob
+ * @param dataURL The data URL to convert
+ * @returns A Blob object
+ */
+export function dataURLToBlob(dataURL: string): Blob {
+  const [header, base64Data] = dataURL.split(',')
+  const mimeMatch = header.match(/:(.*?);/)
+  const mime = mimeMatch ? mimeMatch[1] : 'image/png'
+  const binary = atob(base64Data)
+  const array = new Uint8Array(binary.length)
+  for (let i = 0; i < binary.length; i++) {
+    array[i] = binary.charCodeAt(i)
+  }
+  return new Blob([array], {type: mime})
+}
+
+/**
+ * Converts a thumbhash string to a blob URL for use as an image placeholder
+ * This is useful when CSP restrictions prevent data URLs
+ * @param thumbhash Base64 encoded thumbhash string
+ * @returns Blob URL that can be used as image source or undefined if conversion fails
+ */
+export function getThumbhashBlobURL(thumbhash?: string): string | undefined {
+  if (!thumbhash) return
+
+  try {
+    const dataURL = getThumbhashDataURL(thumbhash)
+    if (!dataURL) return
+
+    const blob = dataURLToBlob(dataURL)
+    return URL.createObjectURL(blob)
+  } catch (error) {
+    console.warn('Failed to create thumbhash blob URL', error)
+    return undefined
+  }
+}
+
 /** Converts a file to a data URI
  * @param file The file to convert
  * @returns A promise that resolves to the data URI string