@shopify/shop-minis-react 0.0.1 → 0.0.2

package/src/hooks/util/useErrorScreen.example.tsx

@@ -0,0 +1,16 @@
+import {useCallback} from 'react'
+
+import {useErrorScreen, Button} from '@shopify/shop-minis-react'
+
+export default function MyComponent() {
+  const {showErrorScreen} = useErrorScreen()
+
+  const handleError = useCallback(() => {
+    showErrorScreen({
+      message: 'Something went wrong',
+      title: 'Error',
+    })
+  }, [showErrorScreen])
+
+  return <Button onPress={handleError} text="Show error screen" />
+}

package/src/hooks/util/useErrorScreen.ts

@@ -0,0 +1,15 @@
+import {useShopActions} from '../../internal/useShopActions'
+import {ShopActions} from '../../types'
+
+interface UseErrorScreenReturns {
+  /**
+   * Show an error screen with the given error message.
+   */
+  showErrorScreen: ShopActions['showErrorScreen']
+}
+
+export const useErrorScreen = (): UseErrorScreenReturns => {
+  const {showErrorScreen} = useShopActions()
+
+  return {showErrorScreen}
+}

package/src/hooks/util/useErrorToast.doc.ts

@@ -0,0 +1,32 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'useErrorToast',
+  category: 'hooks',
+  subCategory: 'util',
+  isVisualComponent: false,
+  related: [],
+  description:
+    'The `useErrorToast` hook provides functionality for showing error toasts. It returns a function that can be used to display an error toast with a given error message.',
+  type: 'hook',
+  defaultExample: {
+    codeblock: {
+      tabs: [
+        {
+          code: './useErrorToast.example.tsx',
+          language: 'tsx',
+        },
+      ],
+      title: 'Example code',
+    },
+  },
+  definitions: [
+    {
+      title: '',
+      type: 'UseErrorToastGeneratedType',
+      description: 'A hook that returns a function to show an error toast.',
+    },
+  ],
+}
+
+export default data

package/src/hooks/util/useErrorToast.example.tsx

@@ -0,0 +1,15 @@
+import {useCallback} from 'react'
+
+import {useErrorToast, Button} from '@shopify/shop-minis-react'
+
+export default function MyComponent() {
+  const {showErrorToast} = useErrorToast()
+
+  const handleError = useCallback(() => {
+    showErrorToast({
+      message: 'Something went wrong',
+    })
+  }, [showErrorToast])
+
+  return <Button onPress={handleError} text="Show error toast" />
+}

package/src/hooks/util/useErrorToast.ts

@@ -0,0 +1,15 @@
+import {useShopActions} from '../../internal/useShopActions'
+import {ShopActions} from '../../types'
+
+interface UseErrorToastReturns {
+  /**
+   * Show an error toast with the given error message.
+   */
+  showErrorToast: ShopActions['showErrorToast']
+}
+
+export const useErrorToast = (): UseErrorToastReturns => {
+  const {showErrorToast} = useShopActions()
+
+  return {showErrorToast}
+}

package/src/index.css

@@ -1,3 +1,121 @@
-@import './tailwind-theme.css';
+@import 'tailwindcss';
+@import 'tw-animate-css';
+@source '../node_modules/@shopify/shop-minis-react/src/**/*.{js,ts,jsx,tsx}';
 
-/* Additional base styles for Shop Minis components can go here */
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+: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);
+}
+
+.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);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/src/internal/useHandleAction.ts

@@ -0,0 +1,24 @@
+import {useCallback} from 'react'
+
+import {ShopActionResult} from '../types'
+
+// Wrapper to handle shop action results as regular promises (Reject on error)
+export const useHandleAction = <T, Args extends unknown[]>(
+  action: (...args: Args) => Promise<ShopActionResult<T>>
+) => {
+  // TODO Add when report interaction is implemented for web
+  // const reportInteraction = useReportInteraction()
+
+  return useCallback(
+    (...args: Args) => {
+      return action(...args).then(result => {
+        if (result.ok) {
+          return result.data
+        }
+
+        throw result.error
+      })
+    },
+    [action]
+  )
+}

package/src/internal/useShopActions.ts

@@ -0,0 +1,5 @@
+import {ShopActions} from '../types'
+
+export function useShopActions(): ShopActions {
+  return window.minisSDK
+}

package/src/internal/useShopActionsDataFetching.ts

@@ -0,0 +1,153 @@
+import {useCallback, useEffect, useMemo, useState} from 'react'
+
+import {
+  DataHookFetchPolicy,
+  DataHookReturnsBase,
+  ShopActionResult,
+} from '../types'
+import {formatError, MiniError} from '../utils/errors'
+
+export interface ShopActionsDataFetchingResult<R> extends DataHookReturnsBase {
+  data: R | null
+}
+
+export const useShopActionsDataFetching = <
+  S = unknown,
+  P extends {fetchPolicy?: DataHookFetchPolicy} = {
+    fetchPolicy?: DataHookFetchPolicy
+  },
+>(
+  action: (params: P) => Promise<ShopActionResult<{data: S}>>,
+  params: P,
+  options: {
+    skip?: boolean
+    hook?: string
+    validator?: (data: S) => void
+  }
+): ShopActionsDataFetchingResult<S> => {
+  const [state, setState] = useState<{
+    data: S | null
+    loading: boolean
+    error: Error | null
+  }>({
+    data: null,
+    loading: true,
+    error: null,
+  })
+
+  const skip = options?.skip === true
+  const {validator, hook} = options
+  const runValidator = useCallback(
+    (dataToValidate: S) => {
+      try {
+        validator?.(dataToValidate)
+        return null
+      } catch (err) {
+        return (
+          err ??
+          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,
+      }: {
+        setLoading?: boolean
+        setError?: boolean
+        resetOnError?: boolean
+        throwOnError?: 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 => ({
+            ...curState,
+            data: result.data.data,
+            loading: false,
+            error: validationError ?? null,
+          }))
+        } else {
+          throw result.error
+        }
+      } catch (err) {
+        queryError = formatError({hook}, err)
+      }
+
+      const error = validationError || queryError
+
+      if (error && (setError || resetOnError)) {
+        setState(curState => ({
+          data: resetOnError ? null : curState.data,
+          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])
+
+  useEffect(() => {
+    if (skip) return
+
+    fetch(
+      {},
+      {
+        throwOnError: false,
+      }
+    )
+  }, [fetch, skip])
+
+  return {
+    data: state.data,
+    loading: state.loading,
+    error: state.error,
+    refetch,
+  }
+}

package/src/internal/useShopActionsPaginatedDataFetching.ts

@@ -0,0 +1,193 @@
+import {useCallback, useEffect, useMemo, useState} from 'react'
+
+import {
+  DataHookFetchPolicy,
+  PaginatedDataHookReturnsBase,
+  PaginationInfo,
+  ShopActionResult,
+} 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: (
+    params: P
+  ) => Promise<ShopActionResult<{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) => {
+      try {
+        validator?.(dataToValidate)
+        return null
+      } catch (err) {
+        return (
+          err ??
+          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) {
+        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/lib/utils.ts

@@ -0,0 +1,9 @@
+import {type ClassValue, clsx} from 'clsx'
+import {twMerge} from 'tailwind-merge'
+
+/**
+ * Utility function to merge Tailwind CSS classes with proper conflict resolution
+ */
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/src/types/index.ts

@@ -1,4 +1,6 @@
 // Common types for the component library
+export * from './minisSDK.generated.d'
+
 export interface BaseComponentProps {
   className?: string
   children?: React.ReactNode