{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "quickstart",
  "title": "Quickstart for Next.js",
  "description": "A quickstart for next.js Sitecore marketplace apps with marketplace sdk",
  "dependencies": [
    "@sitecore-marketplace-sdk/client"
  ],
  "registryDependencies": [
    "https://blok.sitecore.com/r/badge.json",
    "https://blok.sitecore.com/r/card.json",
    "https://blok.sitecore.com/r/collapsible.json"
  ],
  "files": [
    {
      "path": "src/marketplace/next/components/providers/marketplace.tsx",
      "content": "\"use client\";\n\nimport {\n  type ApplicationContext,\n  ClientSDK,\n} from \"@sitecore-marketplace-sdk/client\";\nimport type React from \"react\";\nimport {\n  type ReactNode,\n  createContext,\n  useContext,\n  useEffect,\n  useState,\n} from \"react\";\n// import { XMC } from \"@sitecore-marketplace-sdk/xmc\";\n\ninterface ClientSDKProviderProps {\n  children: ReactNode;\n}\n\nconst ClientSDKContext = createContext<ClientSDK | null>(null);\nconst AppContextContext = createContext<ApplicationContext | null>(null);\n\nexport const MarketplaceProvider: React.FC<ClientSDKProviderProps> = ({\n  children,\n}) => {\n  const [client, setClient] = useState<ClientSDK | null>(null);\n  const [appContext, setAppContext] = useState<ApplicationContext | null>(null);\n  const [error, setError] = useState<string | null>(null);\n  const [loading, setLoading] = useState<boolean>(false);\n\n  useEffect(() => {\n    if (client) {\n      client.query(\"application.context\").then((res) => {\n        if (res?.data) {\n          setAppContext(res.data);\n          console.log(\"appContext\", res.data);\n        }\n      });\n    }\n  }, [client]);\n\n  useEffect(() => {\n    const init = async () => {\n      const config = {\n        target: window.parent,\n        // Enable if your app uses XMC APIs\n        // modules: [XMC]\n      };\n      try {\n        setLoading(true);\n        const client = await ClientSDK.init(config);\n        setClient(client);\n      } catch (error) {\n        console.error(\"Error initializing client SDK\", error);\n        setError(\"Error initializing client SDK\");\n      } finally {\n        setLoading(false);\n      }\n    };\n\n    init();\n  }, []);\n\n  if (loading) {\n    return <div>Attempting to connect to Sitecore Marketplace...</div>;\n  }\n\n  if (error) {\n    return (\n      <div>\n        <h1>Error initializing Marketplace SDK</h1>\n        <div>{error}</div>\n        <div>\n          Please check if the client SDK is loaded inside Sitecore Marketplace\n          parent window and you have properly set your app's extention points.\n        </div>\n      </div>\n    );\n  }\n\n  if (!client) {\n    return null;\n  }\n\n  if (!appContext) {\n    return null;\n  }\n\n  return (\n    <ClientSDKContext.Provider value={client}>\n      <AppContextContext.Provider value={appContext}>\n        {children}\n      </AppContextContext.Provider>\n    </ClientSDKContext.Provider>\n  );\n};\n\nexport const useMarketplaceClient = () => {\n  const context = useContext(ClientSDKContext);\n  if (!context) {\n    throw new Error(\n      \"useMarketplaceClient must be used within a ClientSDKProvider\",\n    );\n  }\n  return context;\n};\n\nexport const useAppContext = () => {\n  const context = useContext(AppContextContext);\n  if (!context) {\n    throw new Error(\"useAppContext must be used within a ClientSDKProvider\");\n  }\n  return context;\n};\n",
      "type": "registry:component",
      "target": "components/providers/marketplace.tsx"
    },
    {
      "path": "src/marketplace/next/components/examples/built-in-auth/application-context.tsx",
      "content": "import { useAppContext } from \"@/components/providers/marketplace\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { CardTitle } from \"@/components/ui/card\";\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/components/ui/collapsible\";\nimport { Icon } from \"@/lib/icon\";\nimport { mdiChevronDown, mdiChevronRight } from \"@mdi/js\";\nimport { useState } from \"react\";\n\nexport const ApplicationContext = () => {\n  const appContext = useAppContext();\n  const [isExpanded, setIsExpanded] = useState(false);\n  return (\n    <Collapsible\n      open={isExpanded}\n      onOpenChange={setIsExpanded}\n      className=\"border-[1px] rounded-lg\"\n    >\n      <CollapsibleTrigger asChild>\n        <div className=\"flex items-center justify-between cursor-pointer hover:bg-muted/50  p-6 rounded-t-lg transition-colors\">\n          <div className=\"flex items-center gap-2\">\n            <CardTitle className=\"flex items-center gap-2\">\n              Application Context\n            </CardTitle>\n            <Badge colorScheme=\"primary\">Client-side</Badge>\n            <Badge colorScheme={\"success\"}>SDK Built-in Auth</Badge>\n          </div>\n          {isExpanded ? (\n            <Icon\n              path={mdiChevronDown}\n              className=\"h-4 w-4 transition-transform\"\n            />\n          ) : (\n            <Icon\n              path={mdiChevronRight}\n              className=\"h-4 w-4 transition-transform\"\n            />\n          )}\n        </div>\n      </CollapsibleTrigger>\n      <CollapsibleContent>\n        <pre className=\"bg-muted p-4 rounded-md text-sm overflow-auto\">\n          {JSON.stringify(appContext, null, 2)}\n        </pre>\n      </CollapsibleContent>\n    </Collapsible>\n  );\n};\n",
      "type": "registry:component",
      "target": "components/examples/built-in-auth/application-context.tsx"
    },
    {
      "path": "src/marketplace/next/layouts/layout.tsx",
      "content": "import type { Metadata } from \"next\";\nimport { Geist, Geist_Mono } from \"next/font/google\";\nimport \"./globals.css\";\nimport { MarketplaceProvider } from \"@/components/providers/marketplace\";\n\nconst geistSans = Geist({\n  variable: \"--font-geist-sans\",\n  subsets: [\"latin\"],\n});\n\nconst geistMono = Geist_Mono({\n  variable: \"--font-geist-mono\",\n  subsets: [\"latin\"],\n});\n\nexport const metadata: Metadata = {\n  title: \"Create Next App\",\n  description: \"Generated by create next app\",\n};\n\nexport default function RootLayout({\n  children,\n}: Readonly<{\n  children: React.ReactNode;\n}>) {\n  return (\n    <html lang=\"en\">\n      <body\n        className={`${geistSans.variable} ${geistMono.variable} antialiased`}\n      >\n        <MarketplaceProvider>{children}</MarketplaceProvider>\n      </body>\n    </html>\n  );\n}\n",
      "type": "registry:file",
      "target": "app/layout.tsx"
    },
    {
      "path": "src/marketplace/next/components/examples/built-in-auth/page.tsx",
      "content": "\"use client\";\n\nimport { ApplicationContext } from \"@/components/examples/built-in-auth/application-context\";\n\nfunction Examples() {\n  return (\n    <div className=\"container mx-auto p-6 space-y-8 max-w-3xl\">\n      <div className=\"space-y-4\">\n        <h1 className=\"text-3xl font-semibold tracking-tight\">\n          Marketplace SDK Demo\n        </h1>\n        <p className=\"text-muted-foreground\">\n          Marketplace SDK with built-in authentication\n        </p>\n      </div>\n\n      <ApplicationContext />\n    </div>\n  );\n}\n\nexport default Examples;\n",
      "type": "registry:page",
      "target": "app/page.tsx"
    }
  ],
  "type": "registry:block"
}