@shopify/shop-minis-react 0.0.18 → 0.0.19

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

@@ -0,0 +1,48 @@
+import {forwardRef, AnchorHTMLAttributes} from 'react'
+
+import {useHref} from 'react-router'
+
+import {useNavigateWithTransition} from '../../hooks/navigation/useNavigateWithTransition'
+
+type TransitionLinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
+  to: string
+}
+
+const ABSOLUTE_URL_REGEX = /^(?:[a-z][a-z0-9+.-]*:|\/\/)/i
+
+export const TransitionLink = forwardRef<
+  HTMLAnchorElement,
+  TransitionLinkProps
+>(({onClick, to, children, ...props}, forwardedRef) => {
+  const transitionNavigate = useNavigateWithTransition()
+
+  const isAbsolute = typeof to === 'string' && ABSOLUTE_URL_REGEX.test(to)
+
+  if (isAbsolute) {
+    console.warn(
+      `TransitionLink: absolute URLs are not supported. Please update to a valid relative path.`
+    )
+  }
+
+  const href = useHref(to)
+
+  const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
+    if (onClick) onClick(event)
+
+    if (!event.defaultPrevented) {
+      event.preventDefault()
+      transitionNavigate(to)
+    }
+  }
+
+  return (
+    <a
+      {...props}
+      onClick={handleClick}
+      href={isAbsolute ? undefined : href}
+      ref={forwardedRef}
+    >
+      {children}
+    </a>
+  )
+})

package/src/components/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import {cn} from '../../lib/utils'
+
+function Skeleton({className, ...props}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn('bg-accent animate-pulse rounded-md', className)}
+      {...props}
+    />
+  )
+}
+
+export {Skeleton}

package/src/hooks/index.ts

@@ -31,6 +31,7 @@ export * from './storage/useImageUpload'
 export * from './navigation/useShopNavigation'
 export * from './navigation/useCloseMini'
 export * from './navigation/useDeeplink'
+export * from './navigation/useNavigateWithTransition'
 
 // - Shop Hooks
 export * from './shop/useShop'

package/src/hooks/navigation/useNavigateWithTransition.ts

@@ -0,0 +1,62 @@
+import {useLocation, useNavigate, NavigateOptions} from 'react-router'
+
+import {DATA_NAVIGATION_TYPE_ATTRIBUTE} from '../../types'
+
+export function useNavigateWithTransition() {
+  const navigate = useNavigate()
+  const location = useLocation()
+
+  const transitionNavigate = (
+    to: string | number,
+    options?: NavigateOptions
+  ) => {
+    if (typeof to === 'number') {
+      // Delta navigation - no options parameter
+      if (document.startViewTransition) {
+        const transition = document.startViewTransition(() => {
+          navigate(to)
+        })
+
+        transition.finished
+          .then(() => {
+            document.documentElement.removeAttribute(
+              DATA_NAVIGATION_TYPE_ATTRIBUTE
+            )
+          })
+          .catch(error => {
+            console.error('View transition error:', error)
+          })
+      } else {
+        return navigate(to)
+      }
+      return
+    }
+
+    const isSameRoute = to === location.pathname
+
+    // Path navigation - with options
+    if (document.startViewTransition) {
+      const transition = document.startViewTransition(() => {
+        navigate(to, {
+          preventScrollReset: true,
+          replace: isSameRoute,
+          ...options,
+        })
+      })
+
+      transition.finished
+        .then(() => {
+          document.documentElement.removeAttribute(
+            DATA_NAVIGATION_TYPE_ATTRIBUTE
+          )
+        })
+        .catch(error => {
+          console.error('View transition error:', error)
+        })
+    } else {
+      return navigate(to, options)
+    }
+  }
+
+  return transitionNavigate
+}

package/src/hooks/navigation/useViewTransitions.ts

@@ -0,0 +1,79 @@
+import {useEffect} from 'react'
+
+import {useNavigationType, useLocation} from 'react-router'
+
+import {DATA_NAVIGATION_TYPE_ATTRIBUTE, NAVIGATION_TYPES} from '../../types'
+
+export function useViewTransitions() {
+  const location = useLocation()
+  const navType = useNavigationType()
+
+  useEffect(() => {
+    let isAndroidBackPress = false
+
+    const handleAndroidBackPress = () => {
+      isAndroidBackPress = true
+
+      if (document.startViewTransition) {
+        const transition = document.startViewTransition(() => {
+          document.documentElement.setAttribute(
+            DATA_NAVIGATION_TYPE_ATTRIBUTE,
+            NAVIGATION_TYPES.backward
+          )
+        })
+
+        transition.finished
+          .then(() => {
+            document.documentElement.removeAttribute(
+              DATA_NAVIGATION_TYPE_ATTRIBUTE
+            )
+          })
+          .catch(error => {
+            console.error('View transition error:', error)
+          })
+      }
+    }
+
+    const handlePopstate = (event: PopStateEvent) => {
+      // If the ios back gesture is used, we don't want to trigger view transition
+      if (event.hasUAVisualTransition && !isAndroidBackPress) {
+        document.documentElement.setAttribute(
+          DATA_NAVIGATION_TYPE_ATTRIBUTE,
+          NAVIGATION_TYPES.none
+        )
+      }
+    }
+
+    window.addEventListener('androidbackpressed', handleAndroidBackPress)
+    window.addEventListener('popstate', handlePopstate)
+
+    return () => {
+      window.removeEventListener('popstate', handlePopstate)
+      window.removeEventListener('androidbackpressed', handleAndroidBackPress)
+    }
+  }, [location])
+
+  useEffect(() => {
+    const currentNavType = document.documentElement.getAttribute(
+      DATA_NAVIGATION_TYPE_ATTRIBUTE
+    )
+
+    if (!currentNavType) {
+      if (navType === 'PUSH') {
+        document.documentElement.setAttribute(
+          DATA_NAVIGATION_TYPE_ATTRIBUTE,
+          NAVIGATION_TYPES.forward
+        )
+      } else if (navType === 'POP') {
+        document.documentElement.setAttribute(
+          DATA_NAVIGATION_TYPE_ATTRIBUTE,
+          NAVIGATION_TYPES.backward
+        )
+      }
+    }
+
+    return () => {
+      document.documentElement.removeAttribute(DATA_NAVIGATION_TYPE_ATTRIBUTE)
+    }
+  }, [navType, location])
+}

package/src/index.css

@@ -3,6 +3,7 @@
 
 @import './styles/theme.css';
 @import './styles/globals.css';
+@import './styles/animations.css';
 
 /* When consumed as npm package, this path resolves from the consuming app's location */
 @source '../node_modules/@shopify/shop-minis-react/src';

package/src/mocks.ts

@@ -2,7 +2,7 @@ import {Product, Gender} from '@shopify/shop-minis-platform'
 import {ShopActions} from '@shopify/shop-minis-platform/actions'
 
 // Helper functions for common data structures
-const createProduct = (
+export const createProduct = (
   id: string,
   title: string,
   price = '99.99',
@@ -21,7 +21,7 @@ const createProduct = (
   featuredImage: {url: `https://picsum.photos/400/400`, altText: title},
 })
 
-const createShop = (id: string, name: string) => ({
+export const createShop = (id: string, name: string) => ({
   id,
   name,
   isFollowing: false,
@@ -29,6 +29,11 @@ const createShop = (id: string, name: string) => ({
     url: `https://${name.toLowerCase().replace(/\s+/g, '-')}.com`,
   },
   reviewAnalytics: {averageRating: 4.3, reviewCount: 50},
+  visualTheme: {
+    id: 'visual-theme-1',
+    featuredImages: [{url: `https://picsum.photos/400/400`, sensitive: false}],
+    logoImage: {url: `https://picsum.photos/100/400`, sensitive: false},
+  },
 })
 
 const createPagination = (hasNext = false) => ({
@@ -288,6 +293,7 @@ export const injectMocks = () => {
   window.minisParams = {
     handle: 'mock-handle',
     initialUrl: '/mock-initial-url',
+    platform: 'ios',
   }
 }
 

package/src/stories/Accordion.stories.tsx

@@ -0,0 +1,124 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '../components/ui/accordion'
+
+import type {Meta, StoryObj} from '@storybook/react-vite'
+
+const meta = {
+  title: 'UI/Accordion',
+  component: Accordion,
+  parameters: {},
+  args: {
+    type: 'single',
+    collapsible: false,
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Accordion>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const NonCollapsible: Story = {
+  args: {
+    type: 'single',
+    collapsible: false,
+  },
+  render: args => (
+    <Accordion {...args}>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>Can i collapse this?</AccordionTrigger>
+        <AccordionContent>
+          No. When you set the collapsible prop to false, the accordion is not
+          collapsible.
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+}
+
+export const Collapsible: Story = {
+  args: {
+    type: 'single',
+    collapsible: true,
+  },
+  render: args => (
+    <Accordion {...args}>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>Can i collapse this?</AccordionTrigger>
+        <AccordionContent>
+          Yes. When you set the collapsible prop to true, you can collapse the
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+}
+
+export const Single: Story = {
+  args: {
+    type: 'single',
+  },
+  render: args => (
+    <Accordion {...args}>
+      <AccordionItem value="item-1">
+        <AccordionTrigger>Single item only</AccordionTrigger>
+        <AccordionContent>
+          With the single type, only one item can be open at a time.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>Another item</AccordionTrigger>
+        <AccordionContent>
+          Opening this item will close the previous one.
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+}
+
+export const Multiple: Story = {
+  args: {
+    type: 'multiple',
+  },
+  render: args => (
+    <Accordion {...args}>
+      <AccordionItem value="item-1">
+        <AccordionTrigger>Can I open multiple items?</AccordionTrigger>
+        <AccordionContent>
+          Yes, you can open multiple items at the same time with the multiple
+          type.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>Is it customizable?</AccordionTrigger>
+        <AccordionContent>
+          Yes, you can customize the styling and behavior to match your needs.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-1">
+        <AccordionTrigger>Long content example</AccordionTrigger>
+        <AccordionContent>
+          <div className="space-y-4">
+            <p>
+              This is a longer content example that demonstrates how the
+              accordion handles substantial amounts of text and content.
+            </p>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+              enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat.
+            </p>
+            <ul className="list-disc list-inside space-y-1">
+              <li>First item in the list</li>
+              <li>Second item in the list</li>
+              <li>Third item in the list</li>
+            </ul>
+          </div>
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+}

package/src/stories/Alert.stories.tsx

@@ -0,0 +1,38 @@
+import {Alert, AlertTitle, AlertDescription} from '../components/ui/alert'
+
+import type {Meta, StoryObj} from '@storybook/react-vite'
+
+const meta = {
+  title: 'UI/Alert',
+  render: ({variant}) => (
+    <Alert variant={variant}>
+      <AlertTitle>Alert Title</AlertTitle>
+      <AlertDescription>
+        This is a default alert with a title and description.
+      </AlertDescription>
+    </Alert>
+  ),
+
+  parameters: {},
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'radio',
+      options: ['default', 'destructive'],
+    },
+  },
+} satisfies Meta<typeof Alert>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    variant: 'default',
+  },
+}
+export const Destructive: Story = {
+  args: {
+    variant: 'destructive',
+  },
+}

package/src/stories/AlertDialog.stories.tsx

@@ -0,0 +1,48 @@
+import {fn} from 'storybook/test'
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+  Button,
+} from '../components'
+
+import type {Meta, StoryObj} from '@storybook/react-vite'
+
+const meta = {
+  title: 'Ui/AlertDialog',
+  render: () => (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button variant="outline">Open Alert Dialog</Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This action cannot be undone.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction onClick={() => fn()}>Continue</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  ),
+  parameters: {},
+  tags: ['autodocs'],
+  argTypes: {},
+  args: {},
+} satisfies Meta<typeof AlertDialog>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}

package/src/stories/Avatar.stories.tsx

@@ -0,0 +1,29 @@
+import {Avatar, AvatarFallback, AvatarImage} from '../components/ui/avatar'
+
+import type {StoryObj} from '@storybook/react-vite'
+
+interface AvatarProps {
+  src: 'https://github.com/shadcn.png'
+  userInitials: string
+}
+
+const meta = {
+  title: 'UI/Avatar',
+  render: ({userInitials}: AvatarProps) => (
+    <Avatar>
+      <AvatarImage src="https://github.com/shadcn.png" />
+      <AvatarFallback>{userInitials}</AvatarFallback>
+    </Avatar>
+  ),
+  args: {
+    className: 'size-12',
+    src: 'https://github.com/shadcn.png',
+    userInitials: 'CN',
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}

package/src/stories/Badge.stories.tsx

@@ -0,0 +1,46 @@
+import {Badge} from '../components/ui/badge'
+
+import type {Meta, StoryObj} from '@storybook/react-vite'
+
+const meta = {
+  title: 'UI/Badge',
+  component: Badge,
+  parameters: {},
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'radio',
+      options: ['default', 'secondary', 'destructive', 'outline'],
+    },
+  },
+} satisfies Meta<typeof Badge>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    children: 'Badge',
+  },
+}
+
+export const Secondary: Story = {
+  args: {
+    variant: 'secondary',
+    children: 'Badge',
+  },
+}
+
+export const Destructive: Story = {
+  args: {
+    variant: 'destructive',
+    children: 'Badge',
+  },
+}
+
+export const Outline: Story = {
+  args: {
+    variant: 'outline',
+    children: 'Badge',
+  },
+}

package/src/stories/Button.stories.tsx

@@ -0,0 +1,81 @@
+import {fn} from 'storybook/test'
+
+import {Button} from '../components/atoms/button'
+
+import type {Meta, StoryObj} from '@storybook/react-vite'
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Atoms/Button',
+  component: Button,
+  parameters: {},
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'radio',
+      options: [
+        'default',
+        'secondary',
+        'tertiary',
+        'outline',
+        'ghost',
+        'link',
+        'destructive',
+      ],
+    },
+  },
+  args: {onClick: fn()},
+} satisfies Meta<typeof Button>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    variant: 'default',
+    children: 'Button',
+  },
+}
+
+export const Secondary: Story = {
+  args: {
+    variant: 'secondary',
+    children: 'Button',
+  },
+}
+
+export const Tertiary: Story = {
+  args: {
+    variant: 'tertiary',
+    children: 'Button',
+  },
+}
+
+export const Outline: Story = {
+  args: {
+    variant: 'outline',
+    children: 'Button',
+  },
+}
+
+export const Ghost: Story = {
+  args: {
+    variant: 'ghost',
+    children: 'Button',
+  },
+}
+
+export const Link: Story = {
+  args: {
+    variant: 'link',
+    children: 'Button',
+  },
+}
+
+export const Destructive: Story = {
+  args: {
+    variant: 'destructive',
+    children: 'Button',
+  },
+}

package/src/stories/Card.stories.tsx

@@ -0,0 +1,40 @@
+import {Button} from '../components/atoms/button'
+import {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+} from '../components/ui/card'
+
+import type {Meta, StoryObj} from '@storybook/react-vite'
+
+const meta = {
+  title: 'UI/Card',
+  render: () => (
+    <Card>
+      <CardHeader>
+        <CardTitle>Card Title</CardTitle>
+        <CardDescription>Card description goes here</CardDescription>
+        <CardAction>
+          <Button>Action</Button>
+        </CardAction>
+      </CardHeader>
+      <CardContent>
+        <p>This is the main content of the card.</p>
+      </CardContent>
+      <CardFooter>
+        <p>Card footer content</p>
+      </CardFooter>
+    </Card>
+  ),
+  parameters: {},
+  tags: ['autodocs'],
+} satisfies Meta<typeof Card>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}