@shopify/shop-minis-react 0.3.4 → 0.4.0

package/src/internal/useShopActionsPaginatedDataFetching.ts

@@ -1,188 +0,0 @@
-import {useCallback, useEffect, useMemo, useState} from 'react'
-
-import {ShopAction, PaginationInfo} from '@shopify/shop-minis-platform/actions'
-
-import {DataHookFetchPolicy, PaginatedDataHookReturnsBase} from '../types'
-import {formatError, MiniError} from '../utils/errors'
-
-export interface ShopActionsDataFetchingResult<S>
-  extends PaginatedDataHookReturnsBase {
-  data: S | null
-}
-
-export const useShopActionsPaginatedDataFetching = <
-  S = unknown,
-  P extends {after?: string; fetchPolicy?: DataHookFetchPolicy} = {
-    after?: undefined
-    fetchPolicy?: DataHookFetchPolicy
-  },
->(
-  action: ShopAction<P, {data: S; pageInfo: PaginationInfo}>,
-  params: P,
-  options: {
-    skip?: boolean
-    hook?: string
-    validator?: (data: S) => void
-  }
-): ShopActionsDataFetchingResult<S> => {
-  const [state, setState] = useState<{
-    data: S | null
-    pageInfo: PaginationInfo
-    loading: boolean
-    error: Error | null
-  }>({
-    data: null,
-    pageInfo: {hasNextPage: false, endCursor: null},
-    loading: false,
-    error: null,
-  })
-
-  const skip = options?.skip === true
-  const {validator, hook} = options
-  const runValidator = useCallback(
-    (dataToValidate: S): Error | null => {
-      try {
-        validator?.(dataToValidate)
-        return null
-      } catch (err) {
-        if (err instanceof Error) return err
-
-        return new MiniError({
-          hook,
-          message: 'Validation failed',
-        })
-      }
-    },
-    [validator, hook]
-  )
-
-  // Params object is recreated on every render, so we need to memoize it.
-  // We don't know what's inside the params object, but we can stringify it.
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const stableParams = useMemo(() => params, [JSON.stringify(params)])
-
-  // There's a lot of complexity here because each type of fetch has different side effects if we are trying to
-  // stay close to how Apollo client works. eg:
-  // - Initial fetch: set loading, set error, set data, reset on error (don't throw)
-  // - change params fetch: set loading, set error, set data, reset on error (don't throw)
-  // - refetch fetch: don't set loading, set error, update data, leave data as is was on error (also throw)
-  // - fetchMore fetch: don't set loading, don't set error, update data, leave data as is was on error (also throw)
-  const fetch = useCallback(
-    async (
-      extraParams?: Partial<P>,
-      {
-        setLoading = true,
-        setError = true,
-        resetOnError = true,
-        throwOnError = true,
-        appendData = false,
-      }: {
-        setLoading?: boolean
-        setError?: boolean
-        resetOnError?: boolean
-        throwOnError?: boolean
-        appendData?: boolean
-      } = {}
-    ) => {
-      let queryError: Error | null = null
-      let validationError: Error | null = null
-
-      setState(curState => ({
-        ...curState,
-        loading: setLoading ? true : curState.loading,
-      }))
-
-      try {
-        const result = await action({...stableParams, ...extraParams})
-
-        if (result.ok) {
-          validationError = runValidator(result.data.data)
-
-          setState(curState => {
-            let newData = result.data.data
-
-            if (
-              appendData &&
-              curState.data &&
-              Array.isArray(curState.data) &&
-              Array.isArray(result.data.data)
-            ) {
-              newData = [...curState.data, ...result.data.data] as S
-            }
-
-            return {
-              ...curState,
-              data: newData,
-              pageInfo: result.data.pageInfo,
-              loading: false,
-              error: validationError ?? null,
-            }
-          })
-        } else {
-          throw result.error
-        }
-      } catch (err) {
-        console.log('caught 1', err)
-        queryError = formatError({hook}, err)
-      }
-
-      const error = validationError || queryError
-
-      if (error && (setError || resetOnError)) {
-        setState(curState => ({
-          data: resetOnError ? null : curState.data,
-          pageInfo: resetOnError
-            ? {hasNextPage: false, endCursor: null}
-            : curState.pageInfo,
-          loading: false,
-          error,
-        }))
-      }
-
-      if (error && throwOnError) {
-        throw error
-      }
-    },
-    [action, stableParams, hook, runValidator]
-  )
-
-  const refetch = useCallback(async () => {
-    await fetch({fetchPolicy: 'network-only'} as Partial<P>, {
-      setLoading: false,
-      resetOnError: false,
-      throwOnError: true,
-    })
-  }, [fetch])
-
-  const fetchMore = useCallback(async () => {
-    if (!state.pageInfo.hasNextPage || !state.pageInfo.endCursor) return
-
-    await fetch({after: state.pageInfo.endCursor} as Partial<P>, {
-      setLoading: false,
-      setError: false,
-      resetOnError: false,
-      throwOnError: true,
-      appendData: true,
-    })
-  }, [state.pageInfo.hasNextPage, state.pageInfo.endCursor, fetch])
-
-  useEffect(() => {
-    if (skip) return
-
-    fetch(
-      {},
-      {
-        throwOnError: false,
-      }
-    )
-  }, [fetch, skip])
-
-  return {
-    data: state.data,
-    loading: state.loading,
-    error: state.error,
-    hasNextPage: state.pageInfo.hasNextPage,
-    refetch,
-    fetchMore,
-  }
-}

package/src/stories/Accordion.stories.tsx

@@ -1,124 +0,0 @@
-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/AddToCart.stories.tsx

@@ -1,251 +0,0 @@
-import {Product} from '@shopify/shop-minis-platform'
-
-import {AddToCartButton} from '../components/commerce/add-to-cart'
-
-import type {Meta, StoryObj} from '@storybook/react-vite'
-
-// Mock product for stories
-const mockProduct: Product = {
-  id: 'gid://shopify/Product/123',
-  title: 'Test Product',
-  reviewAnalytics: {
-    averageRating: 4.5,
-    reviewCount: 100,
-  },
-  shop: {
-    id: 'gid://shopify/Shop/1',
-    name: 'Test Shop',
-  },
-  defaultVariantId: 'gid://shopify/ProductVariant/456',
-  isFavorited: false,
-  price: {
-    amount: '29.99',
-    currencyCode: 'USD',
-  },
-}
-
-const meta = {
-  title: 'Commerce/AddToCartButton',
-  component: AddToCartButton,
-  parameters: {},
-  tags: ['autodocs'],
-  argTypes: {
-    size: {
-      control: 'radio',
-      options: ['sm', 'default', 'lg'],
-      description: 'Button size',
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Whether the button is disabled',
-    },
-    className: {
-      control: 'text',
-      description: 'Additional CSS classes',
-    },
-    product: {
-      control: 'object',
-      description: 'The product object containing product details',
-    },
-    productVariantId: {
-      control: 'text',
-      description:
-        'The GID of the product variant (e.g. gid://shopify/ProductVariant/456)',
-    },
-    discountCodes: {
-      control: 'object',
-      description: 'Array of discount codes to apply',
-    },
-  },
-  args: {
-    disabled: false,
-    size: 'default',
-    product: mockProduct,
-    productVariantId: 'gid://shopify/ProductVariant/456',
-  },
-} satisfies Meta<typeof AddToCartButton>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {},
-  render: args => {
-    return <AddToCartButton {...args} />
-  },
-}
-
-export const SmallSize: Story = {
-  args: {
-    size: 'sm',
-  },
-  render: args => {
-    return <AddToCartButton {...args} />
-  },
-}
-
-export const LargeSize: Story = {
-  args: {
-    size: 'lg',
-  },
-  render: args => {
-    return <AddToCartButton {...args} />
-  },
-}
-
-export const WithDiscountCodes: Story = {
-  args: {
-    discountCodes: ['SUMMER20', 'FREESHIP'],
-  },
-  render: args => {
-    return (
-      <div className="space-y-2">
-        <p className="text-sm text-gray-600">
-          This button will apply discount codes:{' '}
-          {args.discountCodes?.join(', ')}
-        </p>
-        <AddToCartButton {...args} />
-      </div>
-    )
-  },
-}
-
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-  },
-  render: args => {
-    return <AddToCartButton {...args} />
-  },
-}
-
-export const ReferralProduct: Story = {
-  args: {
-    product: {...mockProduct, referral: true},
-  },
-  render: args => {
-    return (
-      <div className="space-y-2">
-        <p className="text-sm text-gray-600">
-          This is a referral product - button shows &ldquo;View product&rdquo;
-          instead
-        </p>
-        <AddToCartButton {...args} />
-      </div>
-    )
-  },
-}
-
-export const CustomStyling: Story = {
-  args: {
-    className: 'bg-purple-600 hover:bg-purple-700 text-white rounded-full px-8',
-  },
-  render: args => {
-    return (
-      <div className="space-y-2">
-        <p className="text-sm text-gray-600">
-          Custom styled button with additional classes
-        </p>
-        <AddToCartButton {...args} />
-      </div>
-    )
-  },
-}
-
-export const AllSizes: Story = {
-  render: () => {
-    return (
-      <div className="flex flex-col items-center space-y-4">
-        <h3 className="text-lg font-semibold">Button Sizes</h3>
-        <div className="flex gap-4 items-center">
-          <AddToCartButton
-            product={mockProduct}
-            productVariantId="gid://shopify/ProductVariant/456"
-            size="sm"
-          />
-          <AddToCartButton
-            product={mockProduct}
-            productVariantId="gid://shopify/ProductVariant/456"
-            size="default"
-          />
-          <AddToCartButton
-            product={mockProduct}
-            productVariantId="gid://shopify/ProductVariant/456"
-            size="lg"
-          />
-        </div>
-      </div>
-    )
-  },
-}
-
-export const InteractiveExample: Story = {
-  render: () => {
-    const productA: Product = {
-      ...mockProduct,
-      id: 'gid://shopify/Product/111',
-      title: 'Product A',
-    }
-
-    const productB: Product = {
-      ...mockProduct,
-      id: 'gid://shopify/Product/222',
-      title: 'Product B',
-      price: {
-        amount: '49.99',
-        currencyCode: 'USD',
-      },
-    }
-
-    const productC: Product = {
-      ...mockProduct,
-      id: 'gid://shopify/Product/333',
-      title: 'Product C',
-      price: {
-        amount: '19.99',
-        currencyCode: 'USD',
-      },
-    }
-
-    return (
-      <div className="flex flex-col items-center space-y-6 p-8">
-        <div className="text-center">
-          <h3 className="text-lg font-semibold">Interactive Demo</h3>
-          <p className="text-sm text-gray-600 mt-2">
-            Click the buttons below to see the add to cart animation
-          </p>
-        </div>
-
-        <div className="grid gap-4">
-          <div className="text-center">
-            <p className="text-xs text-gray-500 mb-2">Product A</p>
-            <AddToCartButton
-              product={productA}
-              productVariantId="gid://shopify/ProductVariant/111"
-            />
-          </div>
-
-          <div className="text-center">
-            <p className="text-xs text-gray-500 mb-2">
-              Product B (with discount)
-            </p>
-            <AddToCartButton
-              product={productB}
-              productVariantId="gid://shopify/ProductVariant/222"
-              discountCodes={['SAVE10']}
-            />
-          </div>
-
-          <div className="text-center">
-            <p className="text-xs text-gray-500 mb-2">Product C (small size)</p>
-            <AddToCartButton
-              product={productC}
-              productVariantId="gid://shopify/ProductVariant/333"
-              size="sm"
-            />
-          </div>
-        </div>
-      </div>
-    )
-  },
-}

package/src/stories/Alert.stories.tsx

@@ -1,38 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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 = {}