feat(shadcn): Add basic example + build script

Author: Ehesp

packages/react/src/components/policies.tsx

@@ -26,7 +26,7 @@ export interface PolicyProps {
   onNavigate?: (url: PolicyURL) => void;
 }
 
-const PolicyContext = createContext<PolicyProps | undefined>(undefined);
+export const PolicyContext = createContext<PolicyProps | undefined>(undefined);
 
 export function PolicyProvider({ children, policies }: { children: React.ReactNode; policies?: PolicyProps }) {
   return <PolicyContext.Provider value={policies}>{children}</PolicyContext.Provider>;

packages/react/src/index.ts

@@ -18,6 +18,7 @@
 import { registerFramework } from "@firebase-ui/core";
 import pkgJson from "../package.json";
 
+export { PolicyContext } from "./components/policies";
 export * from "./auth";
 export * from "./hooks";
 export * from "./components";

packages/shadcn/.gitignore

@@ -1,3 +1,6 @@
+# Shadcn registry is generated by the build script
+registry.json
+
 # Logs
 logs
 *.log

packages/shadcn/build.ts

@@ -0,0 +1,28 @@
+import fs from "fs";
+import path from "path";
+import { execSync } from "child_process";
+
+// Get the domain from CLI args
+const [, , domain] = process.argv;
+
+if (!domain) {
+  console.error("Missing domain argument");
+  process.exit(1);
+}
+
+const registryPath = path.resolve("registry-spec.json");
+const registryRaw = fs.readFileSync(registryPath, "utf8");
+
+const replaced = registryRaw.replace(/{{\s*DOMAIN\s*}}/g, domain);
+fs.writeFileSync("registry.json", replaced, "utf8");
+
+const publicRDir = path.resolve("public", "r");
+if (fs.existsSync(publicRDir)) {
+  execSync("rm -rf " + publicRDir, { stdio: "inherit" });
+}
+
+try {
+  execSync("shadcn build", { stdio: "inherit" });
+} finally {
+  execSync("rm registry.json");
+}

packages/shadcn/package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc -b && vite build",
+    "build": "tsx build.ts https://ui.firebase.com",
     "lint": "eslint .",
     "preview": "vite preview"
   },
@@ -21,6 +21,7 @@
     "tailwindcss": "catalog:",
     "tw-animate-css": "^1.4.0",
     "typescript": "catalog:",
+    "tsx": "^4.20.6",
     "vite": "catalog:"
   },
   "dependencies": {

packages/shadcn/public/r/hello-world.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "policies",
+  "type": "registry:block",
+  "title": "Policies",
+  "description": "A component allowing users to navigate to the terms of service and privacy policy.",
+  "dependencies": [
+    "@firebase-ui/react"
+  ],
+  "files": [
+    {
+      "path": "src/registry/policies.tsx",
+      "content": "import { cn } from \"@/lib/utils\";\nimport { getTranslation } from \"@firebase-ui/core\";\nimport { useUI, PolicyContext } from \"@firebase-ui/react\";\nimport { cloneElement, useContext } from \"react\";\n\nexport function Policies() {\n  const ui = useUI();\n  const policies = useContext(PolicyContext);\n\n  if (!policies) {\n    return null;\n  }\n\n  const { termsOfServiceUrl, privacyPolicyUrl, onNavigate } = policies;\n  const termsAndPrivacyText = getTranslation(ui, \"messages\", \"termsAndPrivacy\");\n  const parts = termsAndPrivacyText.split(/(\\{tos\\}|\\{privacy\\})/);\n\n  const className = cn(\"hover:underline font-semibold\");\n  const Handler = onNavigate ? (\n    <button className={className} />\n  ) : (\n    <a target=\"_blank\" rel=\"noopener noreferrer\" className={className} />\n  );\n\n  return (\n    <div className=\"text-text-muted text-center text-xs\">\n      {parts.map((part: string, index: number) => {\n        if (part === \"{tos}\") {\n          return cloneElement(Handler, {\n            key: index,\n            onClick: onNavigate ? () => onNavigate(termsOfServiceUrl) : undefined,\n            href: onNavigate ? undefined : termsOfServiceUrl,\n            children: getTranslation(ui, \"labels\", \"termsOfService\"),\n          });\n        }\n\n        if (part === \"{privacy}\") {\n          return cloneElement(Handler, {\n            key: index,\n            onClick: onNavigate ? () => onNavigate(privacyPolicyUrl) : undefined,\n            href: onNavigate ? undefined : privacyPolicyUrl,\n            children: getTranslation(ui, \"labels\", \"privacyPolicy\"),\n          });\n        }\n\n        return <span key={index}>{part}</span>;\n      })}\n    </div>\n  );\n}\n",
+      "type": "registry:component"
+    }
+  ]
+}

packages/shadcn/public/r/policies.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sign-in-auth-form",
+  "type": "registry:block",
+  "title": "Sign In Auth Form",
+  "description": "A form allowing users to sign in with email and password.",
+  "dependencies": [
+    "@firebase-ui/react"
+  ],
+  "registryDependencies": [
+    "input",
+    "button",
+    "form",
+    "https://ui.firebase.com/r/policies"
+  ],
+  "files": [
+    {
+      "path": "src/registry/sign-in-auth-form.tsx",
+      "content": "\"use client\";\n\nimport type { SignInAuthFormSchema } from \"@firebase-ui/core\";\nimport { useSignInAuthFormAction, useSignInAuthFormSchema, useUI, SignInAuthFormProps } from \"@firebase-ui/react\";\nimport { useForm } from \"react-hook-form\";\nimport { standardSchemaResolver } from \"@hookform/resolvers/standard-schema\";\nimport { FirebaseUIError, getTranslation } from \"@firebase-ui/core\";\n\nimport { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from \"@/components/ui/form\";\nimport { Input } from \"@/components/ui/input\";\nimport { Button } from \"@/components/ui/button\";\nimport { Policies } from \"./policies\";\n\nexport type { SignInAuthFormProps };\n\nexport function SignInAuthForm(props: SignInAuthFormProps) {\n  const ui = useUI();\n  const schema = useSignInAuthFormSchema();\n  const action = useSignInAuthFormAction();\n\n  const form = useForm<SignInAuthFormSchema>({\n    resolver: standardSchemaResolver(schema),\n    defaultValues: {\n      email: \"\",\n      password: \"\",\n    },\n  });\n\n  async function onSubmit(values: SignInAuthFormSchema) {\n    try {\n      const credential = await action(values);\n      props.onSignIn?.(credential);\n    } catch (error) {\n      const message = error instanceof FirebaseUIError ? error.message : String(error);\n      form.setError(\"root\", { message });\n    }\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-2\">\n        <FormField\n          control={form.control}\n          name=\"email\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>{getTranslation(ui, \"labels\", \"emailAddress\")}</FormLabel>\n              <FormControl>\n                <Input {...field} type=\"email\" />\n              </FormControl>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <FormField\n          control={form.control}\n          name=\"password\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>{getTranslation(ui, \"labels\", \"password\")}</FormLabel>\n              <FormControl>\n                <div className=\"flex items-center gap-2\">\n                  <Input {...field} type=\"password\" className=\"flex-grow\" />\n                  {props.onForgotPasswordClick ? (\n                    <Button type=\"button\" variant=\"secondary\" onClick={props.onForgotPasswordClick}>\n                      {getTranslation(ui, \"labels\", \"forgotPassword\")}\n                    </Button>\n                  ) : null}\n                </div>\n              </FormControl>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Policies />\n        <Button type=\"submit\" disabled={ui.state !== \"idle\"}>\n          {getTranslation(ui, \"labels\", \"signIn\")}\n        </Button>\n        {form.formState.errors.root && <FormMessage>{form.formState.errors.root.message}</FormMessage>}\n        {props.onRegisterClick ? (\n          <>\n            <Button type=\"button\" variant=\"secondary\" onClick={props.onRegisterClick}>\n              {getTranslation(ui, \"prompts\", \"noAccount\")} {getTranslation(ui, \"labels\", \"register\")}\n            </Button>\n          </>\n        ) : null}\n      </form>\n    </Form>\n  );\n}\n",
+      "type": "registry:component"
+    }
+  ]
+}

packages/shadcn/public/r/sign-in-auth-form.json

@@ -0,0 +1,34 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry.json",
+  "name": "acme",
+  "homepage": "{{ DOMAIN }}",
+  "items": [
+    {
+      "name": "sign-in-auth-form",
+      "type": "registry:block",
+      "title": "Sign In Auth Form",
+      "description": "A form allowing users to sign in with email and password.",
+      "dependencies": ["@firebase-ui/react"],
+      "registryDependencies": ["input", "button", "form", "{{ DOMAIN }}/r/policies"],
+      "files": [
+        {
+          "path": "src/registry/sign-in-auth-form.tsx",
+          "type": "registry:component"
+        }
+      ]
+    },
+    {
+      "name": "policies",
+      "type": "registry:block",
+      "title": "Policies",
+      "description": "A component allowing users to navigate to the terms of service and privacy policy.",
+      "dependencies": ["@firebase-ui/react"],
+      "files": [
+        {
+          "path": "src/registry/policies.tsx",
+          "type": "registry:component"
+        }
+      ]
+    }
+  ]
+}