@civic/auth 0.0.1-beta.26 → 0.0.1-beta.27
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.turbo/turbo-build.log +3 -3
- package/.turbo/turbo-lint.log +1 -1
- package/.turbo/turbo-test.log +286 -345
- package/dist/cjs/src/nextjs/index.d.ts +1 -1
- package/dist/cjs/src/nextjs/index.d.ts.map +1 -1
- package/dist/cjs/src/nextjs/index.js +1 -3
- package/dist/cjs/src/nextjs/index.js.map +1 -1
- package/dist/cjs/src/reactjs/components/UserButton.d.ts.map +1 -1
- package/dist/cjs/src/reactjs/components/UserButton.js +25 -12
- package/dist/cjs/src/reactjs/components/UserButton.js.map +1 -1
- package/dist/cjs/src/reactjs/hooks/index.d.ts +0 -1
- package/dist/cjs/src/reactjs/hooks/index.d.ts.map +1 -1
- package/dist/cjs/src/reactjs/hooks/index.js +1 -3
- package/dist/cjs/src/reactjs/hooks/index.js.map +1 -1
- package/dist/cjs/tsconfig.cjs.tsbuildinfo +1 -1
- package/dist/esm/src/nextjs/index.d.ts +1 -1
- package/dist/esm/src/nextjs/index.d.ts.map +1 -1
- package/dist/esm/src/nextjs/index.js +1 -1
- package/dist/esm/src/nextjs/index.js.map +1 -1
- package/dist/esm/src/reactjs/components/UserButton.d.ts.map +1 -1
- package/dist/esm/src/reactjs/components/UserButton.js +26 -13
- package/dist/esm/src/reactjs/components/UserButton.js.map +1 -1
- package/dist/esm/src/reactjs/hooks/index.d.ts +0 -1
- package/dist/esm/src/reactjs/hooks/index.d.ts.map +1 -1
- package/dist/esm/src/reactjs/hooks/index.js +0 -1
- package/dist/esm/src/reactjs/hooks/index.js.map +1 -1
- package/dist/esm/tsconfig.esm.tsbuildinfo +1 -1
- package/dist/src/nextjs/index.d.ts +1 -1
- package/dist/src/nextjs/index.d.ts.map +1 -1
- package/dist/src/nextjs/index.js +1 -1
- package/dist/src/nextjs/index.js.map +1 -1
- package/dist/src/reactjs/components/UserButton.d.ts.map +1 -1
- package/dist/src/reactjs/components/UserButton.js +26 -13
- package/dist/src/reactjs/components/UserButton.js.map +1 -1
- package/dist/src/reactjs/hooks/index.d.ts +0 -1
- package/dist/src/reactjs/hooks/index.d.ts.map +1 -1
- package/dist/src/reactjs/hooks/index.js +0 -1
- package/dist/src/reactjs/hooks/index.js.map +1 -1
- package/dist/src/shared/lib/util.d.ts.map +1 -1
- package/dist/src/shared/lib/util.js +0 -2
- package/dist/src/shared/lib/util.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/vitest.config.js +3 -3
- package/dist/vitest.config.js.map +1 -1
- package/package.json +4 -4
- package/src/nextjs/index.ts +1 -5
- package/src/reactjs/components/UserButton.tsx +34 -10
- package/src/reactjs/hooks/index.ts +0 -1
- package/test/unit/publicApi/__snapshots__/apiSnapshot.test.ts.snap +0 -1
- package/src/nextjs/client/index.ts +0 -4
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { createCivicAuthPlugin
|
|
1
|
+
export { createCivicAuthPlugin } from "../nextjs/config.js";
|
|
2
2
|
export { getUser } from "../nextjs/GetUser.js";
|
|
3
3
|
export { handler } from "../nextjs/routeHandler.js";
|
|
4
4
|
export { createTokenCookies, createUserInfoCookie, clearAuthCookies, NextjsCookieStorage, NextjsClientStorage, } from "../nextjs/cookies.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/nextjs/index.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/nextjs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EACL,kBAAkB,EAClB,oBAAoB,EACpB,gBAAgB,EAChB,mBAAmB,EACnB,mBAAmB,GACpB,MAAM,qBAAqB,CAAC;AAC7B,YAAY,EACV,UAAU,EACV,mBAAmB,EACnB,sBAAsB,EACtB,iBAAiB,GAClB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EACL,qBAAqB,IAAI,iBAAiB,EAC1C,KAAK,0BAA0B,IAAI,iBAAiB,GACrD,MAAM,wCAAwC,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { createCivicAuthPlugin
|
|
1
|
+
export { createCivicAuthPlugin } from "../nextjs/config.js";
|
|
2
2
|
export { getUser } from "../nextjs/GetUser.js";
|
|
3
3
|
export { handler } from "../nextjs/routeHandler.js";
|
|
4
4
|
export { createTokenCookies, createUserInfoCookie, clearAuthCookies, NextjsCookieStorage, NextjsClientStorage, } from "../nextjs/cookies.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/nextjs/index.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/nextjs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EACL,kBAAkB,EAClB,oBAAoB,EACpB,gBAAgB,EAChB,mBAAmB,EACnB,mBAAmB,GACpB,MAAM,qBAAqB,CAAC;AAO7B,OAAO,EACL,qBAAqB,IAAI,iBAAiB,GAE3C,MAAM,wCAAwC,CAAC","sourcesContent":["export { createCivicAuthPlugin } from \"@/nextjs/config.js\";\nexport { getUser } from \"@/nextjs/GetUser.js\";\nexport { handler } from \"@/nextjs/routeHandler.js\";\nexport {\n createTokenCookies,\n createUserInfoCookie,\n clearAuthCookies,\n NextjsCookieStorage,\n NextjsClientStorage,\n} from \"@/nextjs/cookies.js\";\nexport type {\n AuthConfig,\n CookiesConfigObject,\n AuthConfigWithDefaults,\n DefinedAuthConfig,\n} from \"@/nextjs/config.js\";\nexport {\n CivicNextAuthProvider as CivicAuthProvider,\n type NextCivicAuthProviderProps as AuthProviderProps,\n} from \"@/nextjs/providers/NextAuthProvider.js\";\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UserButton.d.ts","sourceRoot":"","sources":["../../../../../src/reactjs/components/UserButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAC9C,OAAO,
|
|
1
|
+
{"version":3,"file":"UserButton.d.ts","sourceRoot":"","sources":["../../../../../src/reactjs/components/UserButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAC9C,OAAO,KAAmD,MAAM,OAAO,CAAC;AAoCxE,QAAA,MAAM,UAAU,gCAGb;IACD,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,sBAuKA,CAAC;AAEF,OAAO,EAAE,UAAU,EAAE,CAAC"}
|
|
@@ -1,16 +1,27 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { useUser } from "../../reactjs/hooks/index.js";
|
|
3
|
-
import React, { useCallback, useEffect, useState } from "react";
|
|
3
|
+
import React, { useCallback, useEffect, useRef, useState } from "react";
|
|
4
4
|
const ChevronDown = () => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "lucide lucide-chevron-down" },
|
|
5
5
|
React.createElement("path", { d: "m6 9 6 6 6-6" })));
|
|
6
6
|
const ChevronUp = () => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "lucide lucide-chevron-up" },
|
|
7
7
|
React.createElement("path", { d: "m18 15-6-6-6 6" })));
|
|
8
8
|
const UserButton = ({ displayMode, className, }) => {
|
|
9
9
|
const [isOpen, setIsOpen] = useState(false);
|
|
10
|
+
const [buttonWidth, setButtonWidth] = useState(null);
|
|
10
11
|
const { user, signIn, signOut } = useUser();
|
|
12
|
+
const buttonRef = useRef(null);
|
|
13
|
+
const dropdownRef = useRef(null);
|
|
14
|
+
useEffect(() => {
|
|
15
|
+
if (buttonRef.current) {
|
|
16
|
+
setButtonWidth(buttonRef.current.offsetWidth);
|
|
17
|
+
}
|
|
18
|
+
}, [isOpen]);
|
|
11
19
|
const handleClickOutside = useCallback((event) => {
|
|
12
20
|
const target = event.target;
|
|
13
|
-
if (
|
|
21
|
+
if (buttonRef.current &&
|
|
22
|
+
dropdownRef.current &&
|
|
23
|
+
!buttonRef.current.contains(target) &&
|
|
24
|
+
!dropdownRef.current.contains(target)) {
|
|
14
25
|
setIsOpen(false);
|
|
15
26
|
}
|
|
16
27
|
}, []);
|
|
@@ -38,10 +49,10 @@ const UserButton = ({ displayMode, className, }) => {
|
|
|
38
49
|
};
|
|
39
50
|
}, [handleClickOutside, handleEscape, isOpen]);
|
|
40
51
|
if (user) {
|
|
41
|
-
return (React.createElement("div", { style: { position: "relative" }, id: "civic-dropdown-container" },
|
|
42
|
-
React.createElement("button", { style: {
|
|
52
|
+
return (React.createElement("div", { style: { position: "relative", width: "auto" }, id: "civic-dropdown-container" },
|
|
53
|
+
React.createElement("button", { ref: buttonRef, style: {
|
|
43
54
|
display: "flex",
|
|
44
|
-
|
|
55
|
+
minWidth: "10rem",
|
|
45
56
|
alignItems: "center",
|
|
46
57
|
justifyContent: "space-between",
|
|
47
58
|
gap: "0.5rem",
|
|
@@ -50,12 +61,14 @@ const UserButton = ({ displayMode, className, }) => {
|
|
|
50
61
|
padding: "0.75rem 1rem",
|
|
51
62
|
color: "#6b7280",
|
|
52
63
|
transition: "background-color 0.2s",
|
|
53
|
-
}, className: className, onClick: () =>
|
|
64
|
+
}, className: className, onClick: () => {
|
|
65
|
+
setIsOpen((isOpen) => !isOpen);
|
|
66
|
+
} },
|
|
54
67
|
user?.picture ? (React.createElement("span", { style: {
|
|
55
68
|
position: "relative",
|
|
56
69
|
display: "flex",
|
|
57
|
-
height: "
|
|
58
|
-
width: "
|
|
70
|
+
height: "1.5rem",
|
|
71
|
+
width: "1.5rem",
|
|
59
72
|
flexShrink: 0,
|
|
60
73
|
gap: "0.5rem",
|
|
61
74
|
overflow: "hidden",
|
|
@@ -63,13 +76,13 @@ const UserButton = ({ displayMode, className, }) => {
|
|
|
63
76
|
} },
|
|
64
77
|
React.createElement("img", { style: { height: "100%", width: "100%", objectFit: "cover" }, src: user.picture, alt: user?.name || user?.email }))) : (React.createElement("div", null)),
|
|
65
78
|
React.createElement("span", null, user?.name || user?.email),
|
|
66
|
-
isOpen ? React.createElement(ChevronUp, null) : React.createElement(ChevronDown, null)),
|
|
67
|
-
React.createElement("div", { style: isOpen
|
|
79
|
+
React.createElement("div", { style: { pointerEvents: "none" } }, isOpen ? React.createElement(ChevronUp, null) : React.createElement(ChevronDown, null))),
|
|
80
|
+
React.createElement("div", { ref: dropdownRef, style: isOpen
|
|
68
81
|
? {
|
|
69
82
|
position: "absolute",
|
|
70
|
-
|
|
83
|
+
left: 0,
|
|
84
|
+
width: buttonWidth || "auto",
|
|
71
85
|
marginTop: "0.5rem",
|
|
72
|
-
width: "100%",
|
|
73
86
|
borderRadius: "0.5rem",
|
|
74
87
|
backgroundColor: "white",
|
|
75
88
|
padding: "0.5rem 0",
|
|
@@ -86,7 +99,7 @@ const UserButton = ({ displayMode, className, }) => {
|
|
|
86
99
|
transition: "background-color 0.2s",
|
|
87
100
|
}, onClick: handleSignOut }, "Logout"))))));
|
|
88
101
|
}
|
|
89
|
-
return (React.createElement("button", { "data-testid": "sign-in-button", style: {
|
|
102
|
+
return (React.createElement("button", { ref: buttonRef, "data-testid": "sign-in-button", style: {
|
|
90
103
|
borderRadius: "9999px",
|
|
91
104
|
border: "1px solid #6b7280",
|
|
92
105
|
padding: "0.75rem 1rem",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UserButton.js","sourceRoot":"","sources":["../../../../../src/reactjs/components/UserButton.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\";\nimport { useUser } from \"@/reactjs/hooks/index.js\";\nimport type { DisplayMode } from \"@/types.js\";\nimport React, { useCallback, useEffect, useState } from \"react\";\n\nconst ChevronDown = () => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n className=\"lucide lucide-chevron-down\"\n >\n <path d=\"m6 9 6 6 6-6\" />\n </svg>\n);\n\nconst ChevronUp = () => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n className=\"lucide lucide-chevron-up\"\n >\n <path d=\"m18 15-6-6-6 6\" />\n </svg>\n);\n\nconst UserButton = ({\n displayMode,\n className,\n}: {\n displayMode?: DisplayMode;\n className?: string;\n}) => {\n const [isOpen, setIsOpen] = useState(false);\n const { user, signIn, signOut } = useUser();\n\n const handleClickOutside = useCallback((event: MouseEvent) => {\n const target = event.target as HTMLElement;\n\n if (!target.closest(\"#civic-dropdown-container\")) {\n setIsOpen(false);\n }\n }, []);\n\n const handleSignOut = useCallback(async () => {\n signOut();\n\n setIsOpen(false);\n }, [signOut]);\n\n const handleSignIn = useCallback(async () => {\n await signIn(displayMode);\n\n setIsOpen(false);\n }, [signIn, displayMode]);\n\n const handleEscape = useCallback((event: KeyboardEvent) => {\n if (event.key === \"Escape\") {\n setIsOpen(false);\n }\n }, []);\n\n useEffect(() => {\n if (isOpen) {\n window.addEventListener(\"click\", handleClickOutside);\n\n window.addEventListener(\"keydown\", handleEscape);\n }\n\n return () => {\n window.removeEventListener(\"click\", handleClickOutside);\n\n window.removeEventListener(\"keydown\", handleEscape);\n };\n }, [handleClickOutside, handleEscape, isOpen]);\n\n if (user) {\n return (\n <div style={{ position: \"relative\" }} id=\"civic-dropdown-container\">\n <button\n style={{\n display: \"flex\",\n width: \"100%\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n gap: \"0.5rem\",\n borderRadius: \"9999px\",\n border: \"1px solid #6b7280\",\n padding: \"0.75rem 1rem\",\n color: \"#6b7280\",\n transition: \"background-color 0.2s\",\n }}\n className={className}\n onClick={() => setIsOpen((isOpen) => !isOpen)}\n >\n {user?.picture ? (\n <span\n style={{\n position: \"relative\",\n display: \"flex\",\n height: \"2.5rem\",\n width: \"2.5rem\",\n flexShrink: 0,\n gap: \"0.5rem\",\n overflow: \"hidden\",\n borderRadius: \"9999px\",\n }}\n >\n <img\n style={{ height: \"100%\", width: \"100%\", objectFit: \"cover\" }}\n src={user.picture}\n alt={user?.name || user?.email}\n />\n </span>\n ) : (\n <div />\n )}\n\n <span>{user?.name || user?.email}</span>\n\n {isOpen ? <ChevronUp /> : <ChevronDown />}\n </button>\n <div\n style={\n isOpen\n ? {\n position: \"absolute\",\n right: 0,\n marginTop: \"0.5rem\",\n width: \"100%\",\n borderRadius: \"0.5rem\",\n backgroundColor: \"white\",\n padding: \"0.5rem 0\",\n color: \"#6b7280\",\n boxShadow:\n \"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)\",\n }\n : { display: \"none\" }\n }\n >\n <ul>\n <li>\n <button\n style={{\n display: \"block\",\n width: \"100%\",\n padding: \"0.5rem 1rem\",\n transition: \"background-color 0.2s\",\n }}\n onClick={handleSignOut}\n >\n Logout\n </button>\n </li>\n </ul>\n </div>\n </div>\n );\n }\n\n return (\n <button\n data-testid=\"sign-in-button\"\n style={{\n borderRadius: \"9999px\",\n border: \"1px solid #6b7280\",\n padding: \"0.75rem 1rem\",\n transition: \"background-color 0.2s\",\n }}\n className={className}\n onClick={handleSignIn}\n >\n Sign in\n </button>\n );\n};\n\nexport { UserButton };\n"]}
|
|
1
|
+
{"version":3,"file":"UserButton.js","sourceRoot":"","sources":["../../../../../src/reactjs/components/UserButton.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\";\nimport { useUser } from \"@/reactjs/hooks/index.js\";\nimport type { DisplayMode } from \"@/types.js\";\nimport React, { useCallback, useEffect, useRef, useState } from \"react\";\n\nconst ChevronDown = () => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n className=\"lucide lucide-chevron-down\"\n >\n <path d=\"m6 9 6 6 6-6\" />\n </svg>\n);\n\nconst ChevronUp = () => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n className=\"lucide lucide-chevron-up\"\n >\n <path d=\"m18 15-6-6-6 6\" />\n </svg>\n);\n\nconst UserButton = ({\n displayMode,\n className,\n}: {\n displayMode?: DisplayMode;\n className?: string;\n}) => {\n const [isOpen, setIsOpen] = useState(false);\n const [buttonWidth, setButtonWidth] = useState<number | null>(null);\n const { user, signIn, signOut } = useUser();\n const buttonRef = useRef<HTMLButtonElement>(null);\n const dropdownRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (buttonRef.current) {\n setButtonWidth(buttonRef.current.offsetWidth);\n }\n }, [isOpen]);\n\n const handleClickOutside = useCallback((event: MouseEvent) => {\n const target = event.target as HTMLElement;\n\n if (\n buttonRef.current &&\n dropdownRef.current &&\n !buttonRef.current.contains(target) &&\n !dropdownRef.current.contains(target)\n ) {\n setIsOpen(false);\n }\n }, []);\n\n const handleSignOut = useCallback(async () => {\n signOut();\n\n setIsOpen(false);\n }, [signOut]);\n\n const handleSignIn = useCallback(async () => {\n await signIn(displayMode);\n\n setIsOpen(false);\n }, [signIn, displayMode]);\n\n const handleEscape = useCallback((event: KeyboardEvent) => {\n if (event.key === \"Escape\") {\n setIsOpen(false);\n }\n }, []);\n\n useEffect(() => {\n if (isOpen) {\n window.addEventListener(\"click\", handleClickOutside);\n\n window.addEventListener(\"keydown\", handleEscape);\n }\n\n return () => {\n window.removeEventListener(\"click\", handleClickOutside);\n\n window.removeEventListener(\"keydown\", handleEscape);\n };\n }, [handleClickOutside, handleEscape, isOpen]);\n\n if (user) {\n return (\n <div\n style={{ position: \"relative\", width: \"auto\" }}\n id=\"civic-dropdown-container\"\n >\n <button\n ref={buttonRef}\n style={{\n display: \"flex\",\n minWidth: \"10rem\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n gap: \"0.5rem\",\n borderRadius: \"9999px\",\n border: \"1px solid #6b7280\",\n padding: \"0.75rem 1rem\",\n color: \"#6b7280\",\n transition: \"background-color 0.2s\",\n }}\n className={className}\n onClick={() => {\n setIsOpen((isOpen) => !isOpen);\n }}\n >\n {user?.picture ? (\n <span\n style={{\n position: \"relative\",\n display: \"flex\",\n height: \"1.5rem\",\n width: \"1.5rem\",\n flexShrink: 0,\n gap: \"0.5rem\",\n overflow: \"hidden\",\n borderRadius: \"9999px\",\n }}\n >\n <img\n style={{ height: \"100%\", width: \"100%\", objectFit: \"cover\" }}\n src={user.picture}\n alt={user?.name || user?.email}\n />\n </span>\n ) : (\n <div />\n )}\n\n <span>{user?.name || user?.email}</span>\n\n <div style={{ pointerEvents: \"none\" }}>\n {isOpen ? <ChevronUp /> : <ChevronDown />}\n </div>\n </button>\n <div\n ref={dropdownRef}\n style={\n isOpen\n ? {\n position: \"absolute\",\n left: 0,\n width: buttonWidth || \"auto\",\n marginTop: \"0.5rem\",\n borderRadius: \"0.5rem\",\n backgroundColor: \"white\",\n padding: \"0.5rem 0\",\n color: \"#6b7280\",\n boxShadow:\n \"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)\",\n }\n : { display: \"none\" }\n }\n >\n <ul>\n <li>\n <button\n style={{\n display: \"block\",\n width: \"100%\",\n padding: \"0.5rem 1rem\",\n transition: \"background-color 0.2s\",\n }}\n onClick={handleSignOut}\n >\n Logout\n </button>\n </li>\n </ul>\n </div>\n </div>\n );\n }\n\n return (\n <button\n ref={buttonRef}\n data-testid=\"sign-in-button\"\n style={{\n borderRadius: \"9999px\",\n border: \"1px solid #6b7280\",\n padding: \"0.75rem 1rem\",\n transition: \"background-color 0.2s\",\n }}\n className={className}\n onClick={handleSignIn}\n >\n Sign in\n </button>\n );\n};\n\nexport { UserButton };\n"]}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
export { useUser } from "../../reactjs/hooks/useUser.js";
|
|
2
|
-
export { useUserCookie } from "../../nextjs/hooks/useUserCookie.js";
|
|
3
2
|
export { useToken } from "../../shared/hooks/useToken.js";
|
|
4
3
|
export { useAuth } from "../../shared/hooks/useAuth.js";
|
|
5
4
|
export { useSession } from "../../shared/hooks/useSession.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/reactjs/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/reactjs/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC"}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
export { useUser } from "../../reactjs/hooks/useUser.js";
|
|
2
|
-
export { useUserCookie } from "../../nextjs/hooks/useUserCookie.js";
|
|
3
2
|
export { useToken } from "../../shared/hooks/useToken.js";
|
|
4
3
|
export { useAuth } from "../../shared/hooks/useAuth.js";
|
|
5
4
|
export { useSession } from "../../shared/hooks/useSession.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/reactjs/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/reactjs/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC","sourcesContent":["export { useUser } from \"@/reactjs/hooks/useUser.js\";\nexport { useToken } from \"@/shared/hooks/useToken.js\";\nexport { useAuth } from \"@/shared/hooks/useAuth.js\";\nexport { useSession } from \"@/shared/hooks/useSession.js\";\nexport { useConfig } from \"@/shared/hooks/useConfig.js\";\nexport { useTokenCookie } from \"@/nextjs/hooks/useTokenCookie.js\";\nexport { useIframe } from \"@/shared/hooks/useIframe.js\";\n"]}
|