Skip to content

Commit 14a5218

Browse files
EhespEhesp
authored
Merge pull request #1223 from firebase/@invertase/shadcn-components
2 parents 9b32d5a + 1cd1049 commit 14a5218

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+5168
-89
lines changed

‎examples/shadcn/src/components/sign-in-auth-form.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
"use client";
22

33
import type { SignInAuthFormSchema } from "@firebase-ui/core";
4-
import { useSignInAuthFormAction, useSignInAuthFormSchema, useUI, SignInAuthFormProps } from "@firebase-ui/react";
4+
import { useSignInAuthFormAction, useSignInAuthFormSchema, useUI, type SignInAuthFormProps } from "@firebase-ui/react";
55
import { useForm } from "react-hook-form";
66
import { standardSchemaResolver } from "@hookform/resolvers/standard-schema";
77
import { FirebaseUIError, getTranslation } from "@firebase-ui/core";

‎packages/react/src/auth/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ export {
1919
type EmailLinkAuthFormProps,
2020
useEmailLinkAuthFormAction,
2121
useEmailLinkAuthForm,
22+
useEmailLinkAuthFormCompleteSignIn,
2223
} from "./forms/email-link-auth-form";
2324
export {
2425
ForgotPasswordAuthForm,
@@ -45,6 +46,7 @@ export {
4546
type SignUpAuthFormProps,
4647
useSignUpAuthForm,
4748
useSignUpAuthFormAction,
49+
useRequireDisplayName,
4850
} from "./forms/sign-up-auth-form";
4951

5052
export { EmailLinkAuthScreen, type EmailLinkAuthScreenProps } from "./screens/email-link-auth-screen";

‎packages/shadcn/build.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,12 @@ if (fs.existsSync(publicRDir)) {
3030
}
3131

3232
try {
33-
execSync(`shadcn build -o ${publicDir}`, { stdio: "inherit" });
33+
try {
34+
execSync(`./node_modules/.bin/shadcn build -o ${publicDir}`, { stdio: "inherit" });
35+
} catch (error) {
36+
console.error("shadcn build failed:", error);
37+
process.exit(1);
38+
}
3439
} finally {
3540
execSync("rm registry.json");
3641
}

‎packages/shadcn/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@
3737
"@firebase-ui/react": "workspace:*",
3838
"@hookform/resolvers": "^5.2.2",
3939
"@radix-ui/react-label": "^2.1.7",
40+
"@radix-ui/react-select": "^2.2.6",
4041
"@radix-ui/react-separator": "^1.1.7",
4142
"@radix-ui/react-slot": "^1.2.3",
4243
"class-variance-authority": "^0.7.1",

‎packages/shadcn/registry-spec.json‎

Lines changed: 305 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,311 @@
4343
"type": "registry:component"
4444
}
4545
]
46+
},
47+
{
48+
"name": "sign-up-auth-screen",
49+
"type": "registry:block",
50+
"title": "Sign Up Auth Screen",
51+
"description": "A screen allowing users to sign up with email and password.",
52+
"dependencies": ["{{ DEP | @firebase-ui/react }}"],
53+
"registryDependencies": ["separator", "card", "{{ DOMAIN }}/sign-up-auth-form.json"],
54+
"files": [
55+
{
56+
"path": "src/registry/sign-up-auth-screen.tsx",
57+
"type": "registry:component"
58+
}
59+
]
60+
},
61+
{
62+
"name": "sign-up-auth-form",
63+
"type": "registry:block",
64+
"title": "Sign Up Auth Form",
65+
"description": "A form allowing users to sign up with email and password.",
66+
"dependencies": ["{{ DEP | @firebase-ui/react }}"],
67+
"registryDependencies": ["input", "button", "form", "{{ DOMAIN }}/policies.json"],
68+
"files": [
69+
{
70+
"path": "src/registry/sign-up-auth-form.tsx",
71+
"type": "registry:component"
72+
}
73+
]
74+
},
75+
{
76+
"name": "forgot-password-auth-screen",
77+
"type": "registry:block",
78+
"title": "Forgot Password Auth Screen",
79+
"description": "A screen allowing users to reset their password via email.",
80+
"dependencies": ["{{ DEP | @firebase-ui/react }}"],
81+
"registryDependencies": ["card", "{{ DOMAIN }}/forgot-password-auth-form.json"],
82+
"files": [
83+
{
84+
"path": "src/registry/forgot-password-auth-screen.tsx",
85+
"type": "registry:component"
86+
}
87+
]
88+
},
89+
{
90+
"name": "forgot-password-auth-form",
91+
"type": "registry:block",
92+
"title": "Forgot Password Auth Form",
93+
"description": "A form allowing users to reset their password via email.",
94+
"dependencies": ["{{ DEP | @firebase-ui/react }}"],
95+
"registryDependencies": ["input", "button", "form", "{{ DOMAIN }}/policies.json"],
96+
"files": [
97+
{
98+
"path": "src/registry/forgot-password-auth-form.tsx",
99+
"type": "registry:component"
100+
}
101+
]
102+
},
103+
{
104+
"name": "email-link-auth-screen",
105+
"type": "registry:block",
106+
"title": "Email Link Auth Screen",
107+
"description": "A screen allowing users to sign in via email link.",
108+
"dependencies": ["{{ DEP | @firebase-ui/react }}"],
109+
"registryDependencies": ["separator", "card", "{{ DOMAIN }}/email-link-auth-form.json"],
110+
"files": [
111+
{
112+
"path": "src/registry/email-link-auth-screen.tsx",
113+
"type": "registry:component"
114+
}
115+
]
116+
},
117+
{
118+
"name": "email-link-auth-form",
119+
"type": "registry:block",
120+
"title": "Email Link Auth Form",
121+
"description": "A form allowing users to sign in via email link.",
122+
"dependencies": ["{{ DEP | @firebase-ui/react }}"],
123+
"registryDependencies": ["input", "button", "form", "{{ DOMAIN }}/policies.json"],
124+
"files": [
125+
{
126+
"path": "src/registry/email-link-auth-form.tsx",
127+
"type": "registry:component"
128+
}
129+
]
130+
},
131+
{
132+
"name": "oauth-button",
133+
"type": "registry:block",
134+
"title": "OAuth Button",
135+
"description": "A button component for OAuth authentication providers.",
136+
"dependencies": ["{{ DEP | @firebase-ui/react }}"],
137+
"registryDependencies": ["button"],
138+
"files": [
139+
{
140+
"path": "src/registry/oauth-button.tsx",
141+
"type": "registry:component"
142+
}
143+
]
144+
},
145+
{
146+
"name": "google-sign-in-button",
147+
"type": "registry:block",
148+
"title": "Google Sign In Button",
149+
"description": "A button component for Google OAuth authentication.",
150+
"dependencies": ["{{ DEP | @firebase-ui/react }}"],
151+
"registryDependencies": ["{{ DOMAIN }}/oauth-button.json"],
152+
"files": [
153+
{
154+
"path": "src/registry/google-sign-in-button.tsx",
155+
"type": "registry:component"
156+
}
157+
],
158+
"css": {
159+
"@layer components": {
160+
"button[data-provider='google.com'][data-themed='true']": {
161+
"--google-primary": "#131314",
162+
"--color-primary": "var(--google-primary)",
163+
"--color-primary-hover": "--alpha(var(--google-primary) / 85%)",
164+
"--color-primary-surface": "#FFFFFF",
165+
"--color-border": "var(--google-primary)"
166+
},
167+
"button[data-provider='google.com'][data-themed='neutral']": {
168+
"--google-primary": "#F2F2F2",
169+
"--color-primary": "var(--google-primary)",
170+
"--color-primary-hover": "--alpha(var(--google-primary) / 85%)",
171+
"--color-primary-surface": "#1F1F1F",
172+
"--color-border": "transparent"
173+
}
174+
},
175+
"@variant dark": {
176+
"button[data-provider='google.com'][data-themed='true']": {
177+
"--google-primary": "#FFFFFF",
178+
"--color-primary": "var(--google-primary)",
179+
"--color-primary-hover": "--alpha(var(--google-primary) / 85%)",
180+
"--color-primary-surface": "#1F1F1F",
181+
"--color-border": "#747775"
182+
}
183+
}
184+
}
185+
},
186+
{
187+
"name": "facebook-sign-in-button",
188+
"type": "registry:block",
189+
"title": "Facebook Sign In Button",
190+
"description": "A button component for Facebook OAuth authentication.",
191+
"dependencies": ["{{ DEP | @firebase-ui/react }}"],
192+
"registryDependencies": ["{{ DOMAIN }}/oauth-button.json"],
193+
"files": [
194+
{
195+
"path": "src/registry/facebook-sign-in-button.tsx",
196+
"type": "registry:component"
197+
}
198+
],
199+
"css": {
200+
"@layer components": {
201+
"button[data-provider='facebook.com'][data-themed='true']": {
202+
"--facebook-primary": "#1877F2",
203+
"--color-primary": "var(--facebook-primary)",
204+
"--color-primary-hover": "--alpha(var(--facebook-primary) / 85%)",
205+
"--color-primary-surface": "var(--color-white)",
206+
"--color-border": "var(--facebook-primary)"
207+
}
208+
}
209+
}
210+
},
211+
{
212+
"name": "github-sign-in-button",
213+
"type": "registry:block",
214+
"title": "GitHub Sign In Button",
215+
"description": "A button component for GitHub OAuth authentication.",
216+
"dependencies": ["{{ DEP | @firebase-ui/react }}"],
217+
"registryDependencies": ["{{ DOMAIN }}/oauth-button.json"],
218+
"files": [
219+
{
220+
"path": "src/registry/github-sign-in-button.tsx",
221+
"type": "registry:component"
222+
}
223+
],
224+
"css": {
225+
"@layer components": {
226+
"button[data-provider='github.com'][data-themed='true']": {
227+
"--github-primary": "#000000",
228+
"--color-primary": "var(--github-primary)",
229+
"--color-primary-hover": "--alpha(var(--github-primary) / 85%)",
230+
"--color-primary-surface": "#FFFFFF",
231+
"--color-border": "var(--github-primary)"
232+
}
233+
},
234+
"@variant dark": {
235+
"button[data-provider='github.com'][data-themed='true']": {
236+
"--github-primary": "var(--color-white)",
237+
"--color-primary": "var(--github-primary)",
238+
"--color-primary-hover": "--alpha(var(--github-primary) / 85%)",
239+
"--color-primary-surface": "var(--color-black)",
240+
"--color-border": "var(--color-white)"
241+
}
242+
}
243+
}
244+
},
245+
{
246+
"name": "apple-sign-in-button",
247+
"type": "registry:block",
248+
"title": "Apple Sign In Button",
249+
"description": "A button component for Apple OAuth authentication.",
250+
"dependencies": ["{{ DEP | @firebase-ui/react }}"],
251+
"registryDependencies": ["{{ DOMAIN }}/oauth-button.json"],
252+
"files": [
253+
{
254+
"path": "src/registry/apple-sign-in-button.tsx",
255+
"type": "registry:component"
256+
}
257+
],
258+
"css": {
259+
"@layer components": {
260+
"button[data-provider='apple.com'][data-themed='true']": {
261+
"--apple-primary": "#000000",
262+
"--color-primary": "var(--apple-primary)",
263+
"--color-primary-hover": "--alpha(var(--apple-primary) / 85%)",
264+
"--color-primary-surface": "#FFFFFF",
265+
"--color-border": "var(--apple-primary)"
266+
}
267+
},
268+
"@variant dark": {
269+
"button[data-provider='apple.com'][data-themed='true']": {
270+
"--apple-primary": "var(--color-white)",
271+
"--color-primary": "var(--apple-primary)",
272+
"--color-primary-hover": "--alpha(var(--apple-primary) / 85%)",
273+
"--color-primary-surface": "var(--color-black)",
274+
"--color-border": "var(--color-white)"
275+
}
276+
}
277+
}
278+
},
279+
{
280+
"name": "microsoft-sign-in-button",
281+
"type": "registry:block",
282+
"title": "Microsoft Sign In Button",
283+
"description": "A button component for Microsoft OAuth authentication.",
284+
"dependencies": ["{{ DEP | @firebase-ui/react }}"],
285+
"registryDependencies": ["{{ DOMAIN }}/oauth-button.json"],
286+
"files": [
287+
{
288+
"path": "src/registry/microsoft-sign-in-button.tsx",
289+
"type": "registry:component"
290+
}
291+
],
292+
"css": {
293+
"@layer components": {
294+
"button[data-provider='microsoft.com'][data-themed='true']": {
295+
"--microsoft-primary": "#2F2F2F",
296+
"--color-primary": "var(--microsoft-primary)",
297+
"--color-primary-hover": "--alpha(var(--microsoft-primary) / 85%)",
298+
"--color-primary-surface": "#FFFFFF",
299+
"--color-border": "var(--microsoft-primary)"
300+
}
301+
},
302+
"@variant dark": {
303+
"button[data-provider='microsoft.com'][data-themed='true']": {
304+
"--microsoft-primary": "var(--color-white)",
305+
"--color-primary": "var(--microsoft-primary)",
306+
"--color-primary-hover": "--alpha(var(--microsoft-primary) / 85%)",
307+
"--color-primary-surface": "#5E5E5E",
308+
"--color-border": "var(--color-white)"
309+
}
310+
}
311+
}
312+
},
313+
{
314+
"name": "twitter-sign-in-button",
315+
"type": "registry:block",
316+
"title": "Twitter Sign In Button",
317+
"description": "A button component for Twitter OAuth authentication.",
318+
"dependencies": ["{{ DEP | @firebase-ui/react }}"],
319+
"registryDependencies": ["{{ DOMAIN }}/oauth-button.json"],
320+
"files": [
321+
{
322+
"path": "src/registry/twitter-sign-in-button.tsx",
323+
"type": "registry:component"
324+
}
325+
],
326+
"css": {
327+
"@layer components": {
328+
"button[data-provider='twitter.com'][data-themed='true']": {
329+
"--twitter-primary": "#1DA1F2",
330+
"--color-primary": "var(--twitter-primary)",
331+
"--color-primary-hover": "--alpha(var(--twitter-primary) / 85%)",
332+
"--color-primary-surface": "#FFFFFF",
333+
"--color-border": "var(--twitter-primary)"
334+
}
335+
}
336+
}
337+
},
338+
{
339+
"name": "country-selector",
340+
"type": "registry:block",
341+
"title": "Country Selector",
342+
"description": "A country selector component for phone number input with country codes and flags.",
343+
"dependencies": ["{{ DEP | @firebase-ui/react }}"],
344+
"registryDependencies": ["select"],
345+
"files": [
346+
{
347+
"path": "src/registry/country-selector.tsx",
348+
"type": "registry:component"
349+
}
350+
]
46351
}
47352
]
48353
}

‎packages/shadcn/src/components/ui/form.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
"use client";
22

33
import * as React from "react";
4-
import * as LabelPrimitive from "@radix-ui/react-label";
4+
import type * as LabelPrimitive from "@radix-ui/react-label";
55
import { Slot } from "@radix-ui/react-slot";
66
import {
77
Controller,

0 commit comments

Comments
 (0)