feat(shadcn): Add local dev setup & example flow

Author: Ehesp

examples/shadcn/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

examples/shadcn/README.md

@@ -0,0 +1 @@
+TODO

examples/shadcn/components.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {
+    "@dev": "http://localhost:5177/{name}.json",
+    "@firebase-ui": "https://ui.firebase.com/{name}.json"
+  }
+}

packages/shadcn/index.html renamed to examples/shadcn/index.html

@@ -0,0 +1,35 @@
+{
+  "name": "shadcn",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite"
+  },
+  "dependencies": {
+    "@firebase-ui/core": "workspace:*",
+    "@firebase-ui/react": "workspace:*",
+    "@hookform/resolvers": "^5.2.2",
+    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-slot": "^1.2.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.544.0",
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "react-hook-form": "^7.64.0",
+    "tailwind-merge": "^3.3.1",
+    "zod": "catalog:"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "catalog:",
+    "@types/node": "catalog:",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "@vitejs/plugin-react": "catalog:",
+    "tailwindcss": "catalog:",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "catalog:",
+    "vite": "catalog:"
+  }
+}

examples/shadcn/package.json

@@ -1,5 +1,5 @@
 function App() {
-  return <></>;
+  return <>TODO</>;
 }
 
 export default App;

examples/shadcn/public/vite.svg

@@ -0,0 +1,50 @@
+import { cn } from "@/lib/utils";
+import { getTranslation } from "@firebase-ui/core";
+import { useUI, PolicyContext } from "@firebase-ui/react";
+import { cloneElement, useContext } from "react";
+
+export function Policies() {
+  const ui = useUI();
+  const policies = useContext(PolicyContext);
+
+  if (!policies) {
+    return null;
+  }
+
+  const { termsOfServiceUrl, privacyPolicyUrl, onNavigate } = policies;
+  const termsAndPrivacyText = getTranslation(ui, "messages", "termsAndPrivacy");
+  const parts = termsAndPrivacyText.split(/(\{tos\}|\{privacy\})/);
+
+  const className = cn("hover:underline font-semibold");
+  const Handler = onNavigate ? (
+    <button className={className} />
+  ) : (
+    <a target="_blank" rel="noopener noreferrer" className={className} />
+  );
+
+  return (
+    <div className="text-text-muted text-center text-xs">
+      {parts.map((part: string, index: number) => {
+        if (part === "{tos}") {
+          return cloneElement(Handler, {
+            key: index,
+            onClick: onNavigate ? () => onNavigate(termsOfServiceUrl) : undefined,
+            href: onNavigate ? undefined : termsOfServiceUrl,
+            children: getTranslation(ui, "labels", "termsOfService"),
+          });
+        }
+
+        if (part === "{privacy}") {
+          return cloneElement(Handler, {
+            key: index,
+            onClick: onNavigate ? () => onNavigate(privacyPolicyUrl) : undefined,
+            href: onNavigate ? undefined : privacyPolicyUrl,
+            children: getTranslation(ui, "labels", "privacyPolicy"),
+          });
+        }
+
+        return <span key={index}>{part}</span>;
+      })}
+    </div>
+  );
+}

packages/shadcn/src/App.tsx renamed to examples/shadcn/src/App.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import type { SignInAuthFormSchema } from "@firebase-ui/core";
+import { useSignInAuthFormAction, useSignInAuthFormSchema, useUI, SignInAuthFormProps } from "@firebase-ui/react";
+import { useForm } from "react-hook-form";
+import { standardSchemaResolver } from "@hookform/resolvers/standard-schema";
+import { FirebaseUIError, getTranslation } from "@firebase-ui/core";
+
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Policies } from "./policies";
+
+export type { SignInAuthFormProps };
+
+export function SignInAuthForm(props: SignInAuthFormProps) {
+  const ui = useUI();
+  const schema = useSignInAuthFormSchema();
+  const action = useSignInAuthFormAction();
+
+  const form = useForm<SignInAuthFormSchema>({
+    resolver: standardSchemaResolver(schema),
+    defaultValues: {
+      email: "",
+      password: "",
+    },
+  });
+
+  async function onSubmit(values: SignInAuthFormSchema) {
+    try {
+      const credential = await action(values);
+      props.onSignIn?.(credential);
+    } catch (error) {
+      const message = error instanceof FirebaseUIError ? error.message : String(error);
+      form.setError("root", { message });
+    }
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-2">
+        <FormField
+          control={form.control}
+          name="email"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>{getTranslation(ui, "labels", "emailAddress")}</FormLabel>
+              <FormControl>
+                <Input {...field} type="email" />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="password"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>{getTranslation(ui, "labels", "password")}</FormLabel>
+              <FormControl>
+                <div className="flex items-center gap-2">
+                  <Input {...field} type="password" className="flex-grow" />
+                  {props.onForgotPasswordClick ? (
+                    <Button type="button" variant="secondary" onClick={props.onForgotPasswordClick}>
+                      {getTranslation(ui, "labels", "forgotPassword")}
+                    </Button>
+                  ) : null}
+                </div>
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Policies />
+        <Button type="submit" disabled={ui.state !== "idle"}>
+          {getTranslation(ui, "labels", "signIn")}
+        </Button>
+        {form.formState.errors.root && <FormMessage>{form.formState.errors.root.message}</FormMessage>}
+        {props.onRegisterClick ? (
+          <>
+            <Button type="button" variant="secondary" onClick={props.onRegisterClick}>
+              {getTranslation(ui, "prompts", "noAccount")} {getTranslation(ui, "labels", "register")}
+            </Button>
+          </>
+        ) : null}
+      </form>
+    </Form>
+  );
+}