@youversion/platform-react-ui 0.7.0 → 0.8.1
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/dist/components/{SignInButton.d.ts → YouVersionAuthButton.d.ts} +23 -14
- package/dist/components/YouVersionAuthButton.d.ts.map +1 -0
- package/dist/components/{SignInButton.stories.d.ts → YouVersionAuthButton.stories.d.ts} +9 -2
- package/dist/components/YouVersionAuthButton.stories.d.ts.map +1 -0
- package/dist/components/index.d.ts +1 -1
- package/dist/components/index.d.ts.map +1 -1
- package/dist/index.cjs +37 -17
- package/dist/index.js +37 -17
- package/package.json +3 -3
- package/dist/components/SignInButton.d.ts.map +0 -1
- package/dist/components/SignInButton.stories.d.ts.map +0 -1
|
@@ -12,7 +12,7 @@ interface SignInAuthProps {
|
|
|
12
12
|
permissions?: SignInWithYouVersionPermissionValues[];
|
|
13
13
|
redirectUrl: string;
|
|
14
14
|
}
|
|
15
|
-
export interface
|
|
15
|
+
export interface YouVersionAuthButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, SignInAuthProps {
|
|
16
16
|
/**
|
|
17
17
|
* The background color of the button.
|
|
18
18
|
*
|
|
@@ -41,19 +41,30 @@ export interface SignInButtonProps extends React.ButtonHTMLAttributes<HTMLButton
|
|
|
41
41
|
* - `outline` - Button with contrast border.
|
|
42
42
|
*/
|
|
43
43
|
variant?: 'default' | 'outline';
|
|
44
|
+
/**
|
|
45
|
+
* The mode of the signIn/SignOut button
|
|
46
|
+
*
|
|
47
|
+
* - `signIn` - Renders the YouVersionAuthButton
|
|
48
|
+
* - `signOut` - Renders the SignOutButton
|
|
49
|
+
* - `auto` - Renders the YouVersionAuthButton when there
|
|
50
|
+
* is not a user signed in and renders the SignOutButton
|
|
51
|
+
* when there is a user signed in.
|
|
52
|
+
*
|
|
53
|
+
* */
|
|
54
|
+
mode?: 'signIn' | 'signOut' | 'auto';
|
|
44
55
|
}
|
|
45
56
|
/**
|
|
46
|
-
*
|
|
57
|
+
* YouVersionAuthButton - Initiates the YouVersion OAuth sign-in flow on click.
|
|
47
58
|
*
|
|
48
59
|
* Key behaviors:
|
|
49
60
|
* - Prevents default click behavior and triggers the SDK `signIn` method.
|
|
50
61
|
* - Calls `onAuthError` when the underlying sign-in flow throws.
|
|
51
62
|
*
|
|
52
|
-
* @param {
|
|
63
|
+
* @param {YouVersionAuthButtonProps} props - Component props (see {@link YouVersionAuthButtonProps}).
|
|
53
64
|
* @returns {React.ReactElement} A button element that starts the sign-in flow.
|
|
54
65
|
*
|
|
55
66
|
* @example
|
|
56
|
-
* import {
|
|
67
|
+
* import { YouVersionAuthButton, SignInWithYouVersionPermission } from '@youversion/platform-react-ui';
|
|
57
68
|
* import { useYVAuth } from '@youversion/platform-react-hooks';
|
|
58
69
|
*
|
|
59
70
|
* export default function UnauthenticatedView() {
|
|
@@ -62,9 +73,8 @@ export interface SignInButtonProps extends React.ButtonHTMLAttributes<HTMLButton
|
|
|
62
73
|
* return (
|
|
63
74
|
* <div>
|
|
64
75
|
* {auth.error && <p className="text-red-600">Error: {auth.error.message}</p>}
|
|
65
|
-
* <
|
|
66
|
-
*
|
|
67
|
-
* optionalPermissions={[SignInWithYouVersionPermission.highlights]}
|
|
76
|
+
* <YouVersionAuthButton
|
|
77
|
+
* permissions={[SignInWithYouVersionPermission.bibles]}
|
|
68
78
|
* onAuthError={(err) => console.error(err)}
|
|
69
79
|
* />
|
|
70
80
|
* </div>
|
|
@@ -73,19 +83,18 @@ export interface SignInButtonProps extends React.ButtonHTMLAttributes<HTMLButton
|
|
|
73
83
|
*
|
|
74
84
|
* @example
|
|
75
85
|
* // Example: different button styles shown in the example app
|
|
76
|
-
* <
|
|
77
|
-
* <
|
|
86
|
+
* <YouVersionAuthButton /> // default light background, labeled
|
|
87
|
+
* <YouVersionAuthButton size="short" variant="outline" /> // shorter label with outline
|
|
78
88
|
*
|
|
79
89
|
* @example
|
|
80
90
|
* // Example showing permission enum usage from the example app
|
|
81
91
|
* import { SignInWithYouVersionPermission } from '@youversion/platform-react-ui';
|
|
82
92
|
*
|
|
83
|
-
* <
|
|
84
|
-
*
|
|
85
|
-
* optionalPermissions={[SignInWithYouVersionPermission.highlights]}
|
|
93
|
+
* <YouVersionAuthButton
|
|
94
|
+
* permissions={[SignInWithYouVersionPermission.bibles]}
|
|
86
95
|
* />
|
|
87
96
|
*
|
|
88
97
|
*/
|
|
89
|
-
export declare const
|
|
98
|
+
export declare const YouVersionAuthButton: React.ForwardRefExoticComponent<YouVersionAuthButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
90
99
|
export {};
|
|
91
|
-
//# sourceMappingURL=
|
|
100
|
+
//# sourceMappingURL=YouVersionAuthButton.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"YouVersionAuthButton.d.ts","sourceRoot":"","sources":["../../src/components/YouVersionAuthButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,KAAK,oCAAoC,EAAE,MAAM,2BAA2B,CAAC;AAMtF,UAAU,eAAe;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACrC;;OAEG;IACH,WAAW,CAAC,EAAE,oCAAoC,EAAE,CAAC;IACrD,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,yBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,eAAe;IACjB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC9B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;IACnC;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;IACpC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC;;;;;;;;;SASK;IACL,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;CACtC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,eAAO,MAAM,oBAAoB,qGAmIhC,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { StoryObj } from '@storybook/react-vite';
|
|
2
2
|
declare const meta: {
|
|
3
3
|
title: string;
|
|
4
|
-
component: import("react").ForwardRefExoticComponent<import("./
|
|
4
|
+
component: import("react").ForwardRefExoticComponent<import("./YouVersionAuthButton").YouVersionAuthButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
5
5
|
parameters: {
|
|
6
6
|
layout: string;
|
|
7
7
|
};
|
|
@@ -10,6 +10,7 @@ declare const meta: {
|
|
|
10
10
|
args: {
|
|
11
11
|
redirectUrl: string;
|
|
12
12
|
onAuthError: import("storybook/test").Mock<(...args: any[]) => any>;
|
|
13
|
+
mode: "auto";
|
|
13
14
|
};
|
|
14
15
|
argTypes: {
|
|
15
16
|
onAuthError: {
|
|
@@ -28,6 +29,12 @@ declare const meta: {
|
|
|
28
29
|
};
|
|
29
30
|
options: string[];
|
|
30
31
|
};
|
|
32
|
+
mode: {
|
|
33
|
+
control: {
|
|
34
|
+
type: "select";
|
|
35
|
+
};
|
|
36
|
+
options: string[];
|
|
37
|
+
};
|
|
31
38
|
radius: {
|
|
32
39
|
control: {
|
|
33
40
|
type: "select";
|
|
@@ -75,4 +82,4 @@ export declare const DarkRectangleShortOutline: Story;
|
|
|
75
82
|
export declare const DarkRectangleIcon: Story;
|
|
76
83
|
export declare const DarkRectangleIconOutline: Story;
|
|
77
84
|
export declare const InteractionTestWithMockedAuth: Story;
|
|
78
|
-
//# sourceMappingURL=
|
|
85
|
+
//# sourceMappingURL=YouVersionAuthButton.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"YouVersionAuthButton.stories.d.ts","sourceRoot":"","sources":["../../src/components/YouVersionAuthButton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAQ5D,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+DmC,CAAC;AAE9C,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,YAAY,EAAE,KAI1B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAIxB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAK/B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAIvB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAK9B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAI5B,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAKnC,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAKjC,CAAC;AAEF,eAAO,MAAM,0BAA0B,EAAE,KAMxC,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAKhC,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KAMvC,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAIlB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAKzB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAM9B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAM7B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAK3B,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAMlC,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAMhC,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KAOvC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAM/B,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,KAOtC,CAAC;AAEF,eAAO,MAAM,6BAA6B,EAAE,KAc3C,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export { BibleChapterPicker, type RootProps, type TriggerProps } from './bible-chapter-picker';
|
|
2
2
|
export { BibleReader, type BibleReaderRootProps } from './bible-reader';
|
|
3
3
|
export { BibleVersionPicker, type BibleVersionPickerRootProps, type BibleVersionPickerTriggerProps, } from './bible-version-picker';
|
|
4
|
-
export {
|
|
4
|
+
export { YouVersionAuthButton, type YouVersionAuthButtonProps } from './YouVersionAuthButton';
|
|
5
5
|
export { VerseOfTheDay, type VerseOfTheDayProps } from './verse-of-the-day';
|
|
6
6
|
export { BibleTextView, type BibleTextViewProps } from './verse';
|
|
7
7
|
export { BibleWidgetView, type BibleWidgetViewProps } from './bible-widget-view';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,KAAK,SAAS,EAAE,KAAK,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAC/F,OAAO,EAAE,WAAW,EAAE,KAAK,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AACxE,OAAO,EACL,kBAAkB,EAClB,KAAK,2BAA2B,EAChC,KAAK,8BAA8B,GACpC,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,KAAK,SAAS,EAAE,KAAK,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAC/F,OAAO,EAAE,WAAW,EAAE,KAAK,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AACxE,OAAO,EACL,kBAAkB,EAClB,KAAK,2BAA2B,EAChC,KAAK,8BAA8B,GACpC,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,oBAAoB,EAAE,KAAK,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAC9F,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,SAAS,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,qBAAqB,CAAC"}
|
package/dist/index.cjs
CHANGED
|
@@ -45,13 +45,13 @@ __export(index_exports, {
|
|
|
45
45
|
LanguagesClient: () => LanguagesClient,
|
|
46
46
|
MemoryStorageStrategy: () => MemoryStorageStrategy,
|
|
47
47
|
SessionStorageStrategy: () => SessionStorageStrategy,
|
|
48
|
-
SignInButton: () => SignInButton,
|
|
49
48
|
SignInWithYouVersionPermission: () => SignInWithYouVersionPermission,
|
|
50
49
|
SignInWithYouVersionResult: () => SignInWithYouVersionResult,
|
|
51
50
|
URLBuilder: () => URLBuilder,
|
|
52
51
|
VerseOfTheDay: () => VerseOfTheDay,
|
|
53
52
|
YouVersionAPI: () => YouVersionAPI,
|
|
54
53
|
YouVersionAPIUsers: () => YouVersionAPIUsers,
|
|
54
|
+
YouVersionAuthButton: () => YouVersionAuthButton,
|
|
55
55
|
YouVersionPlatformConfiguration: () => YouVersionPlatformConfiguration,
|
|
56
56
|
YouVersionProvider: () => import_platform_react_hooks8.YouVersionProvider,
|
|
57
57
|
YouVersionUserInfo: () => YouVersionUserInfo,
|
|
@@ -15144,7 +15144,7 @@ function Toolbar({ border = "top" }) {
|
|
|
15144
15144
|
}
|
|
15145
15145
|
var BibleReader = Object.assign({}, { Root: Root5, Content: Content4, Toolbar });
|
|
15146
15146
|
|
|
15147
|
-
// src/components/
|
|
15147
|
+
// src/components/YouVersionAuthButton.tsx
|
|
15148
15148
|
var import_react5 = __toESM(require("react"), 1);
|
|
15149
15149
|
var import_lucide_react4 = require("lucide-react");
|
|
15150
15150
|
var import_platform_react_hooks5 = require("@youversion/platform-react-hooks");
|
|
@@ -15243,15 +15243,16 @@ function YouVersionLogo(props) {
|
|
|
15243
15243
|
);
|
|
15244
15244
|
}
|
|
15245
15245
|
|
|
15246
|
-
// src/components/
|
|
15246
|
+
// src/components/YouVersionAuthButton.tsx
|
|
15247
15247
|
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
15248
|
-
var
|
|
15248
|
+
var YouVersionAuthButton = import_react5.default.forwardRef(
|
|
15249
15249
|
({
|
|
15250
15250
|
background = "light",
|
|
15251
15251
|
className,
|
|
15252
15252
|
disabled,
|
|
15253
15253
|
onAuthError,
|
|
15254
15254
|
onClick,
|
|
15255
|
+
mode,
|
|
15255
15256
|
permissions = [],
|
|
15256
15257
|
radius = "rounded",
|
|
15257
15258
|
redirectUrl,
|
|
@@ -15259,17 +15260,21 @@ var SignInButton = import_react5.default.forwardRef(
|
|
|
15259
15260
|
variant = "default",
|
|
15260
15261
|
...props
|
|
15261
15262
|
}, ref) => {
|
|
15262
|
-
const { signIn, auth } = (0, import_platform_react_hooks5.useYVAuth)();
|
|
15263
|
+
const { signIn, signOut, auth } = (0, import_platform_react_hooks5.useYVAuth)();
|
|
15263
15264
|
const handleClick = async (e) => {
|
|
15264
15265
|
e.preventDefault();
|
|
15265
15266
|
if (onClick) {
|
|
15266
15267
|
onClick(e);
|
|
15267
15268
|
}
|
|
15268
15269
|
try {
|
|
15269
|
-
|
|
15270
|
-
|
|
15271
|
-
|
|
15272
|
-
|
|
15270
|
+
if (mode === "signOut" || auth.isAuthenticated) {
|
|
15271
|
+
signOut();
|
|
15272
|
+
} else {
|
|
15273
|
+
await signIn({
|
|
15274
|
+
redirectUrl,
|
|
15275
|
+
permissions
|
|
15276
|
+
});
|
|
15277
|
+
}
|
|
15273
15278
|
} catch (error46) {
|
|
15274
15279
|
if (onAuthError) {
|
|
15275
15280
|
onAuthError(error46);
|
|
@@ -15277,10 +15282,25 @@ var SignInButton = import_react5.default.forwardRef(
|
|
|
15277
15282
|
}
|
|
15278
15283
|
};
|
|
15279
15284
|
const buttonLoading = auth.isLoading;
|
|
15280
|
-
|
|
15281
|
-
|
|
15282
|
-
|
|
15283
|
-
|
|
15285
|
+
const buttonText = (0, import_react5.useMemo)(() => {
|
|
15286
|
+
if (size === "short") {
|
|
15287
|
+
if (mode === "signOut") {
|
|
15288
|
+
return "Sign Out";
|
|
15289
|
+
} else if (mode === "signIn") {
|
|
15290
|
+
return "Sign In";
|
|
15291
|
+
} else {
|
|
15292
|
+
return auth.isAuthenticated ? "Sign Out" : "Sign In";
|
|
15293
|
+
}
|
|
15294
|
+
} else {
|
|
15295
|
+
if (mode === "signOut") {
|
|
15296
|
+
return "Sign Out of YouVersion";
|
|
15297
|
+
} else if (mode === "signIn") {
|
|
15298
|
+
return "Sign In with YouVersion";
|
|
15299
|
+
} else {
|
|
15300
|
+
return auth.isAuthenticated ? "Sign Out of YouVersion" : "Sign In with YouVersion";
|
|
15301
|
+
}
|
|
15302
|
+
}
|
|
15303
|
+
}, [mode, auth.isAuthenticated, size]);
|
|
15284
15304
|
const loadingSpinner = /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react4.Loader2, { className: "yv:z-20 yv:absolute yv:left-1/2 yv:top-1/2 yv:animate-spin yv:-translate-x-1/2 yv:-translate-y-1/2 yv:fill-primary-foreground yv:text-primary" });
|
|
15285
15305
|
if (size === "icon") {
|
|
15286
15306
|
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
@@ -15308,7 +15328,7 @@ var SignInButton = import_react5.default.forwardRef(
|
|
|
15308
15328
|
children: [
|
|
15309
15329
|
buttonLoading ? loadingSpinner : null,
|
|
15310
15330
|
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(YouVersionLogo, {}),
|
|
15311
|
-
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "yv:sr-only", children:
|
|
15331
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "yv:sr-only", children: buttonText })
|
|
15312
15332
|
]
|
|
15313
15333
|
}
|
|
15314
15334
|
);
|
|
@@ -15338,13 +15358,13 @@ var SignInButton = import_react5.default.forwardRef(
|
|
|
15338
15358
|
children: [
|
|
15339
15359
|
buttonLoading ? loadingSpinner : null,
|
|
15340
15360
|
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(YouVersionLogo, {}),
|
|
15341
|
-
|
|
15361
|
+
buttonText
|
|
15342
15362
|
]
|
|
15343
15363
|
}
|
|
15344
15364
|
);
|
|
15345
15365
|
}
|
|
15346
15366
|
);
|
|
15347
|
-
|
|
15367
|
+
YouVersionAuthButton.displayName = "YouVersionAuthButton";
|
|
15348
15368
|
|
|
15349
15369
|
// src/components/verse-of-the-day.tsx
|
|
15350
15370
|
var import_react7 = __toESM(require("react"), 1);
|
|
@@ -15687,13 +15707,13 @@ injectStyles();
|
|
|
15687
15707
|
LanguagesClient,
|
|
15688
15708
|
MemoryStorageStrategy,
|
|
15689
15709
|
SessionStorageStrategy,
|
|
15690
|
-
SignInButton,
|
|
15691
15710
|
SignInWithYouVersionPermission,
|
|
15692
15711
|
SignInWithYouVersionResult,
|
|
15693
15712
|
URLBuilder,
|
|
15694
15713
|
VerseOfTheDay,
|
|
15695
15714
|
YouVersionAPI,
|
|
15696
15715
|
YouVersionAPIUsers,
|
|
15716
|
+
YouVersionAuthButton,
|
|
15697
15717
|
YouVersionPlatformConfiguration,
|
|
15698
15718
|
YouVersionProvider,
|
|
15699
15719
|
YouVersionUserInfo,
|
package/dist/index.js
CHANGED
|
@@ -15103,8 +15103,8 @@ function Toolbar({ border = "top" }) {
|
|
|
15103
15103
|
}
|
|
15104
15104
|
var BibleReader = Object.assign({}, { Root: Root5, Content: Content4, Toolbar });
|
|
15105
15105
|
|
|
15106
|
-
// src/components/
|
|
15107
|
-
import React9 from "react";
|
|
15106
|
+
// src/components/YouVersionAuthButton.tsx
|
|
15107
|
+
import React9, { useMemo as useMemo4 } from "react";
|
|
15108
15108
|
import { Loader2 } from "lucide-react";
|
|
15109
15109
|
import { useYVAuth } from "@youversion/platform-react-hooks";
|
|
15110
15110
|
|
|
@@ -15202,15 +15202,16 @@ function YouVersionLogo(props) {
|
|
|
15202
15202
|
);
|
|
15203
15203
|
}
|
|
15204
15204
|
|
|
15205
|
-
// src/components/
|
|
15205
|
+
// src/components/YouVersionAuthButton.tsx
|
|
15206
15206
|
import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
15207
|
-
var
|
|
15207
|
+
var YouVersionAuthButton = React9.forwardRef(
|
|
15208
15208
|
({
|
|
15209
15209
|
background = "light",
|
|
15210
15210
|
className,
|
|
15211
15211
|
disabled,
|
|
15212
15212
|
onAuthError,
|
|
15213
15213
|
onClick,
|
|
15214
|
+
mode,
|
|
15214
15215
|
permissions = [],
|
|
15215
15216
|
radius = "rounded",
|
|
15216
15217
|
redirectUrl,
|
|
@@ -15218,17 +15219,21 @@ var SignInButton = React9.forwardRef(
|
|
|
15218
15219
|
variant = "default",
|
|
15219
15220
|
...props
|
|
15220
15221
|
}, ref) => {
|
|
15221
|
-
const { signIn, auth } = useYVAuth();
|
|
15222
|
+
const { signIn, signOut, auth } = useYVAuth();
|
|
15222
15223
|
const handleClick = async (e) => {
|
|
15223
15224
|
e.preventDefault();
|
|
15224
15225
|
if (onClick) {
|
|
15225
15226
|
onClick(e);
|
|
15226
15227
|
}
|
|
15227
15228
|
try {
|
|
15228
|
-
|
|
15229
|
-
|
|
15230
|
-
|
|
15231
|
-
|
|
15229
|
+
if (mode === "signOut" || auth.isAuthenticated) {
|
|
15230
|
+
signOut();
|
|
15231
|
+
} else {
|
|
15232
|
+
await signIn({
|
|
15233
|
+
redirectUrl,
|
|
15234
|
+
permissions
|
|
15235
|
+
});
|
|
15236
|
+
}
|
|
15232
15237
|
} catch (error46) {
|
|
15233
15238
|
if (onAuthError) {
|
|
15234
15239
|
onAuthError(error46);
|
|
@@ -15236,10 +15241,25 @@ var SignInButton = React9.forwardRef(
|
|
|
15236
15241
|
}
|
|
15237
15242
|
};
|
|
15238
15243
|
const buttonLoading = auth.isLoading;
|
|
15239
|
-
|
|
15240
|
-
|
|
15241
|
-
|
|
15242
|
-
|
|
15244
|
+
const buttonText = useMemo4(() => {
|
|
15245
|
+
if (size === "short") {
|
|
15246
|
+
if (mode === "signOut") {
|
|
15247
|
+
return "Sign Out";
|
|
15248
|
+
} else if (mode === "signIn") {
|
|
15249
|
+
return "Sign In";
|
|
15250
|
+
} else {
|
|
15251
|
+
return auth.isAuthenticated ? "Sign Out" : "Sign In";
|
|
15252
|
+
}
|
|
15253
|
+
} else {
|
|
15254
|
+
if (mode === "signOut") {
|
|
15255
|
+
return "Sign Out of YouVersion";
|
|
15256
|
+
} else if (mode === "signIn") {
|
|
15257
|
+
return "Sign In with YouVersion";
|
|
15258
|
+
} else {
|
|
15259
|
+
return auth.isAuthenticated ? "Sign Out of YouVersion" : "Sign In with YouVersion";
|
|
15260
|
+
}
|
|
15261
|
+
}
|
|
15262
|
+
}, [mode, auth.isAuthenticated, size]);
|
|
15243
15263
|
const loadingSpinner = /* @__PURE__ */ jsx13(Loader2, { className: "yv:z-20 yv:absolute yv:left-1/2 yv:top-1/2 yv:animate-spin yv:-translate-x-1/2 yv:-translate-y-1/2 yv:fill-primary-foreground yv:text-primary" });
|
|
15244
15264
|
if (size === "icon") {
|
|
15245
15265
|
return /* @__PURE__ */ jsxs7(
|
|
@@ -15267,7 +15287,7 @@ var SignInButton = React9.forwardRef(
|
|
|
15267
15287
|
children: [
|
|
15268
15288
|
buttonLoading ? loadingSpinner : null,
|
|
15269
15289
|
/* @__PURE__ */ jsx13(YouVersionLogo, {}),
|
|
15270
|
-
/* @__PURE__ */ jsx13("span", { className: "yv:sr-only", children:
|
|
15290
|
+
/* @__PURE__ */ jsx13("span", { className: "yv:sr-only", children: buttonText })
|
|
15271
15291
|
]
|
|
15272
15292
|
}
|
|
15273
15293
|
);
|
|
@@ -15297,13 +15317,13 @@ var SignInButton = React9.forwardRef(
|
|
|
15297
15317
|
children: [
|
|
15298
15318
|
buttonLoading ? loadingSpinner : null,
|
|
15299
15319
|
/* @__PURE__ */ jsx13(YouVersionLogo, {}),
|
|
15300
|
-
|
|
15320
|
+
buttonText
|
|
15301
15321
|
]
|
|
15302
15322
|
}
|
|
15303
15323
|
);
|
|
15304
15324
|
}
|
|
15305
15325
|
);
|
|
15306
|
-
|
|
15326
|
+
YouVersionAuthButton.displayName = "YouVersionAuthButton";
|
|
15307
15327
|
|
|
15308
15328
|
// src/components/verse-of-the-day.tsx
|
|
15309
15329
|
import React10 from "react";
|
|
@@ -15653,13 +15673,13 @@ export {
|
|
|
15653
15673
|
LanguagesClient,
|
|
15654
15674
|
MemoryStorageStrategy,
|
|
15655
15675
|
SessionStorageStrategy,
|
|
15656
|
-
SignInButton,
|
|
15657
15676
|
SignInWithYouVersionPermission,
|
|
15658
15677
|
SignInWithYouVersionResult,
|
|
15659
15678
|
URLBuilder,
|
|
15660
15679
|
VerseOfTheDay,
|
|
15661
15680
|
YouVersionAPI,
|
|
15662
15681
|
YouVersionAPIUsers,
|
|
15682
|
+
YouVersionAuthButton,
|
|
15663
15683
|
YouVersionPlatformConfiguration,
|
|
15664
15684
|
YouVersionProvider,
|
|
15665
15685
|
YouVersionUserInfo,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@youversion/platform-react-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.8.1",
|
|
4
4
|
"description": "React SDK for YouVersion Platform",
|
|
5
5
|
"license": "TBD",
|
|
6
6
|
"type": "module",
|
|
@@ -39,8 +39,8 @@
|
|
|
39
39
|
"lucide-react": "0.546.0",
|
|
40
40
|
"tailwind-merge": "3.3.1",
|
|
41
41
|
"tw-animate-css": "1.4.0",
|
|
42
|
-
"@youversion/platform-
|
|
43
|
-
"@youversion/platform-
|
|
42
|
+
"@youversion/platform-react-hooks": "0.8.1",
|
|
43
|
+
"@youversion/platform-core": "0.8.1"
|
|
44
44
|
},
|
|
45
45
|
"peerDependencies": {
|
|
46
46
|
"react": ">=19.1.0 <20.0.0",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SignInButton.d.ts","sourceRoot":"","sources":["../../src/components/SignInButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,oCAAoC,EAAE,MAAM,2BAA2B,CAAC;AAMtF,UAAU,eAAe;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACrC;;OAEG;IACH,WAAW,CAAC,EAAE,oCAAoC,EAAE,CAAC;IACrD,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,iBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,eAAe;IACjB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC9B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;IACnC;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;IACpC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,eAAO,MAAM,YAAY,6FA+GxB,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SignInButton.stories.d.ts","sourceRoot":"","sources":["../../src/components/SignInButton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAQ5D,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0D2B,CAAC;AAEtC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,YAAY,EAAE,KAI1B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAIxB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAK/B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAIvB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAK9B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAI5B,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAKnC,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAKjC,CAAC;AAEF,eAAO,MAAM,0BAA0B,EAAE,KAMxC,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAKhC,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KAMvC,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAIlB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAKzB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAM9B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAM7B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAK3B,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAMlC,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAMhC,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KAOvC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAM/B,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,KAOtC,CAAC;AAEF,eAAO,MAAM,6BAA6B,EAAE,KAc3C,CAAC"}
|