@youversion/platform-react-ui 0.5.0 β†’ 0.5.5

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/README.md CHANGED
@@ -1,118 +1,49 @@
1
- ![License](https://img.shields.io/badge/license-Apache%20License%202.0-blue)
2
- ![React >= 19.0.0](https://img.shields.io/badge/React-%3E%3D%2019.0.0-61dafb?logo=react&logoColor=white)
3
- ![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?logo=typescript&logoColor=white)
1
+ ![License](https://img.shields.io/badge/license-Apache%202.0-blue)
4
2
 
5
3
  # @youversion/platform-react-ui
6
4
 
7
- Pre-built React components for building Bible-based applications with the YouVersion Platform SDK. Get styled, production-ready components that work seamlessly with Bible content.
5
+ Pre-built React components for Bible applications with styling included.
8
6
 
9
- ## Overview
10
-
11
- `@youversion/platform-react-ui` provides ready-to-use React components for Bible-focused applications. Features include pre-styled components with theming support, light and dark mode out of the box, scoped CSS to prevent conflicts, and accessibility-first design.
12
-
13
- This package depends on [@youversion/platform-react-hooks](../hooks/README.md) and [@youversion/platform-core](../core/README.md).
14
-
15
- > **πŸ“š Full Documentation:** [developers.youversion.com/sdks/react](https://developers.youversion.com/sdks/react)
16
-
17
- ## Installation
18
-
19
- ```bash
20
- pnpm add @youversion/platform-react-ui
21
- ```
22
-
23
- ### Peer Dependencies
24
-
25
- Requires React 19.0.0 or higher:
26
-
27
- ```bash
28
- pnpm install react@19.0.0
29
- ```
30
-
31
- ### Prerequisites
32
-
33
- - YouVersion Platform App Key ([Get from platform.youversion.com](https://platform.youversion.com/))
34
-
35
- ## When to Use This Package
7
+ ## When to use this package
36
8
 
37
9
  Use `@youversion/platform-react-ui` when you need:
38
10
  - βœ… Production-ready Bible components for your React app
39
11
  - βœ… Pre-styled components with light/dark mode
40
- - βœ… Minimal setupβ€”wrap your app with providers and use components
12
+ - βœ… Minimal setup. Wrap your app with providers and use the components
41
13
  - βœ… Consistent, accessible UI out of the box
14
+ Get your App Key at [platform.youversion.com](https://platform.youversion.com/)
42
15
 
43
16
  **Use other packages instead if:**
44
17
  - ❌ Need low-level API access β†’ Use [@youversion/platform-core](../core/README.md)
45
18
  - ❌ Want custom UI β†’ Use [@youversion/platform-react-hooks](../hooks/README.md)
46
19
 
47
- ## Related Packages
20
+ ## Install
48
21
 
49
- - **[@youversion/platform-core](../core/README.md)** - Low-level TypeScript SDK for direct API access
50
- - **[@youversion/platform-react-hooks](../hooks/README.md)** - React hooks for declarative data fetching
22
+ ```bash
23
+ pnpm add @youversion/platform-react-ui
24
+ ```
25
+
26
+ Get your App Key at [platform.youversion.com](https://platform.youversion.com/)
51
27
 
52
- ## Setup
28
+ ## Usage
53
29
 
54
- Import styles and wrap your app with required providers:
30
+ Import styles and wrap your app:
55
31
 
56
32
  ```tsx
57
- import { BibleSDKProvider, YVPProvider } from '@youversion/platform-react-ui';
33
+ import { BibleSDKProvider, YVPProvider, VerseOfTheDay } from '@youversion/platform-react-ui';
58
34
  import '@youversion/platform-react-ui/styles.css';
59
35
 
60
36
  function App() {
61
37
  return (
62
38
  <BibleSDKProvider appKey="YOUR_APP_KEY">
63
39
  <YVPProvider config={{ appKey: "YOUR_APP_KEY" }}>
64
- {/* All components work here */}
40
+ <VerseOfTheDay versionId={111} />
65
41
  </YVPProvider>
66
42
  </BibleSDKProvider>
67
43
  );
68
44
  }
69
45
  ```
70
46
 
71
- > **⚠️ Missing Provider Error:** If components don't render correctly, check that both `BibleSDKProvider` and `YVPProvider` wrap your component tree.
72
-
73
- ## Quick Start
74
-
75
- **Next.js App Router:**
76
-
77
- ```tsx
78
- // app/layout.tsx
79
- import '@youversion/platform-react-ui/styles.css';
80
- import { BibleSDKProvider, YVPProvider } from '@youversion/platform-react-ui';
81
-
82
- export default function RootLayout({ children }: { children: React.ReactNode }) {
83
- return (
84
- <html lang="en">
85
- <body>
86
- <BibleSDKProvider appKey={process.env.NEXT_PUBLIC_APP_KEY!}>
87
- <YVPProvider config={{ appKey: process.env.NEXT_PUBLIC_APP_KEY! }}>
88
- {children}
89
- </YVPProvider>
90
- </BibleSDKProvider>
91
- </body>
92
- </html>
93
- );
94
- }
95
- ```
96
-
97
- ```tsx
98
- // app/page.tsx
99
- import { VerseOfTheDay } from '@youversion/platform-react-ui';
100
-
101
- export default function Home() {
102
- return <VerseOfTheDay versionId={111} />;
103
- }
104
- ```
105
-
106
- ## Features
107
-
108
- - Ready-to-use UI components for Bible content
109
- - Light and dark mode toggling
110
- - CSS variable overrides for customization
111
- - Verse display with proper formatting
112
- - Bible version and chapter selection
113
- - Full TypeScript support
114
- - Accessibility features
115
-
116
47
  ## Theming
117
48
 
118
49
  Toggle theme via the `YVPProvider`:
@@ -146,33 +77,6 @@ Customize via CSS variables:
146
77
  }
147
78
  ```
148
79
 
149
- ## Troubleshooting
150
-
151
- ### Styles Not Applied
152
-
153
- **Solution:** Ensure you imported `@youversion/platform-react-ui/styles.css` at your app's root entry point (e.g., `app/layout.tsx` for Next.js).
154
-
155
- ### Next.js Error: "Global CSS cannot be imported from within node_modules"
156
-
157
- **Solution:** Move the import to your root layout file:
158
-
159
- ```tsx
160
- // app/layout.tsx
161
- import '@youversion/platform-react-ui/styles.css';
162
- ```
163
-
164
- ## Development
165
-
166
- See [CONTRIBUTING.md](../../CONTRIBUTING.md) for development instructions including Storybook setup.
167
-
168
- ## License
169
-
170
- See [LICENSE](../../LICENSE)
171
-
172
- ## Support
80
+ ---
173
81
 
174
- - GitHub Issues: [Create an issue](https://github.com/youversion/platform-sdk-react/issues)
175
- - Platform Docs: [platform.youversion.com](https://platform.youversion.com/)
176
- - React Hooks: [@youversion/platform-react-hooks](../hooks/README.md)
177
- - Core SDK: [@youversion/platform-core](../core/README.md)
178
- - Monorepo: [YouVersion Platform SDK](../../README.md)
82
+ **API Reference:** [developers.youversion.com/sdks/react](https://developers.youversion.com/sdks/react)
@@ -5,6 +5,9 @@ declare const meta: {
5
5
  component: ({ versionId: initialVersionId, ...props }: RootProps) => import("react/jsx-runtime").JSX.Element;
6
6
  parameters: {
7
7
  layout: string;
8
+ msw: {
9
+ handlers: import("msw").HttpHandler[];
10
+ };
8
11
  };
9
12
  decorators: ((Story: React.ComponentType) => import("react/jsx-runtime").JSX.Element)[];
10
13
  argTypes: {
@@ -1 +1 @@
1
- {"version":3,"file":"bible-version-picker.stories.d.ts","sourceRoot":"","sources":["../../src/components/bible-version-picker.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAsB,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AA2B5E,QAAA,MAAM,IAAI;;2DAV8D,SAAS;;;;yBAXpD,KAAK,CAAC,aAAa;;;;;;;;;;;;;;;;;;CA6CV,CAAC;AAEvC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAM7B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAM5B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAmB/B,CAAC;AAEF,eAAO,MAAM,4BAA4B,EAAE,KAmC1C,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,KA4BtC,CAAC"}
1
+ {"version":3,"file":"bible-version-picker.stories.d.ts","sourceRoot":"","sources":["../../src/components/bible-version-picker.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAsB,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AA4B5E,QAAA,MAAM,IAAI;;2DAV8D,SAAS;;;;;;;yBAXpD,KAAK,CAAC,aAAa;;;;;;;;;;;;;;;;;;CAmcV,CAAC;AAEvC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAM7B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAM5B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAmB/B,CAAC;AAEF,eAAO,MAAM,4BAA4B,EAAE,KAmC1C,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,KA4BtC,CAAC"}
@@ -1,8 +1,7 @@
1
- type BibleWidgetViewProps = {
1
+ export type BibleWidgetViewProps = {
2
2
  reference: string;
3
3
  versionId: number;
4
4
  background?: 'light' | 'dark';
5
5
  };
6
6
  export declare function BibleWidgetView({ reference, versionId, background, }: BibleWidgetViewProps): React.ReactNode;
7
- export {};
8
7
  //# sourceMappingURL=bible-widget-view.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"bible-widget-view.d.ts","sourceRoot":"","sources":["../../src/components/bible-widget-view.tsx"],"names":[],"mappings":"AAIA,KAAK,oBAAoB,GAAG;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC/B,CAAC;AACF,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,SAAS,EACT,UAAoB,GACrB,EAAE,oBAAoB,GAAG,KAAK,CAAC,SAAS,CAuCxC"}
1
+ {"version":3,"file":"bible-widget-view.d.ts","sourceRoot":"","sources":["../../src/components/bible-widget-view.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC/B,CAAC;AACF,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,SAAS,EACT,UAAoB,GACrB,EAAE,oBAAoB,GAAG,KAAK,CAAC,SAAS,CAuCxC"}
@@ -4,4 +4,5 @@ export { BibleVersionPicker, type BibleVersionPickerRootProps, type BibleVersion
4
4
  export { SignInButton, type SignInButtonProps } from './SignInButton';
5
5
  export { VerseOfTheDay, type VerseOfTheDayProps } from './verse-of-the-day';
6
6
  export { BibleTextView, type BibleTextViewProps } from './verse';
7
+ export { BibleWidgetView, type BibleWidgetViewProps } from './bible-widget-view';
7
8
  //# sourceMappingURL=index.d.ts.map
@@ -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,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACtE,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,SAAS,CAAC"}
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,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACtE,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
@@ -40,9 +40,10 @@ __export(index_exports, {
40
40
  BibleChapterPicker: () => BibleChapterPicker,
41
41
  BibleClient: () => BibleClient,
42
42
  BibleReader: () => BibleReader,
43
- BibleSDKProvider: () => import_platform_react_hooks6.BibleSDKProvider,
43
+ BibleSDKProvider: () => import_platform_react_hooks7.BibleSDKProvider,
44
44
  BibleTextView: () => BibleTextView,
45
45
  BibleVersionPicker: () => BibleVersionPicker,
46
+ BibleWidgetView: () => BibleWidgetView,
46
47
  HighlightsClient: () => HighlightsClient,
47
48
  LanguagesClient: () => LanguagesClient,
48
49
  MemoryStorageStrategy: () => MemoryStorageStrategy,
@@ -15651,8 +15652,53 @@ function VerseOfTheDay({
15651
15652
  );
15652
15653
  }
15653
15654
 
15654
- // src/index.ts
15655
+ // src/components/bible-widget-view.tsx
15655
15656
  var import_platform_react_hooks6 = require("@youversion/platform-react-hooks");
15657
+ var import_jsx_runtime20 = require("react/jsx-runtime");
15658
+ function BibleWidgetView({
15659
+ reference,
15660
+ versionId,
15661
+ background = "light"
15662
+ }) {
15663
+ const { version: version2 } = (0, import_platform_react_hooks6.useVersion)(versionId);
15664
+ const { passage } = (0, import_platform_react_hooks6.usePassage)({
15665
+ versionId,
15666
+ usfm: reference,
15667
+ include_headings: true,
15668
+ include_notes: true
15669
+ });
15670
+ return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
15671
+ "section",
15672
+ {
15673
+ "data-yv-sdk": true,
15674
+ "data-yv-theme": background === "dark" ? "dark" : "light",
15675
+ className: "yv:flex yv:flex-col yv:bg-card yv:p-6 yv:max-w-md yv:rounded-2xl",
15676
+ children: [
15677
+ passage?.human_reference ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("h2", { className: "yv:font-bold yv:tracking-widest yv:text-xs yv:uppercase", children: [
15678
+ passage.human_reference,
15679
+ " ",
15680
+ version2?.local_abbreviation
15681
+ ] }) : null,
15682
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
15683
+ BibleTextView,
15684
+ {
15685
+ fontSize: 16,
15686
+ fontFamily: "'Source Serif Pro', serif",
15687
+ reference,
15688
+ versionId
15689
+ }
15690
+ ),
15691
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "yv:grid yv:grid-cols-[1fr_auto] yv:gap-4 yv:items-center yv:mt-4", children: [
15692
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "yv:text-balance yv:text-muted-foreground yv:justify-self-start yv:font-bold yv:text-[0.5rem]", children: version2?.copyright_short }),
15693
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "yv:justify-self-end", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SvgComponent3, { fontSize: 12 }) })
15694
+ ] })
15695
+ ]
15696
+ }
15697
+ );
15698
+ }
15699
+
15700
+ // src/index.ts
15701
+ var import_platform_react_hooks7 = require("@youversion/platform-react-hooks");
15656
15702
  // Annotate the CommonJS export names for ESM import in node:
15657
15703
  0 && (module.exports = {
15658
15704
  ApiClient,
@@ -15666,6 +15712,7 @@ var import_platform_react_hooks6 = require("@youversion/platform-react-hooks");
15666
15712
  BibleSDKProvider,
15667
15713
  BibleTextView,
15668
15714
  BibleVersionPicker,
15715
+ BibleWidgetView,
15669
15716
  HighlightsClient,
15670
15717
  LanguagesClient,
15671
15718
  MemoryStorageStrategy,
package/dist/index.js CHANGED
@@ -15616,6 +15616,51 @@ function VerseOfTheDay({
15616
15616
  );
15617
15617
  }
15618
15618
 
15619
+ // src/components/bible-widget-view.tsx
15620
+ import { usePassage as usePassage3, useVersion as useVersion4 } from "@youversion/platform-react-hooks";
15621
+ import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
15622
+ function BibleWidgetView({
15623
+ reference,
15624
+ versionId,
15625
+ background = "light"
15626
+ }) {
15627
+ const { version: version2 } = useVersion4(versionId);
15628
+ const { passage } = usePassage3({
15629
+ versionId,
15630
+ usfm: reference,
15631
+ include_headings: true,
15632
+ include_notes: true
15633
+ });
15634
+ return /* @__PURE__ */ jsxs13(
15635
+ "section",
15636
+ {
15637
+ "data-yv-sdk": true,
15638
+ "data-yv-theme": background === "dark" ? "dark" : "light",
15639
+ className: "yv:flex yv:flex-col yv:bg-card yv:p-6 yv:max-w-md yv:rounded-2xl",
15640
+ children: [
15641
+ passage?.human_reference ? /* @__PURE__ */ jsxs13("h2", { className: "yv:font-bold yv:tracking-widest yv:text-xs yv:uppercase", children: [
15642
+ passage.human_reference,
15643
+ " ",
15644
+ version2?.local_abbreviation
15645
+ ] }) : null,
15646
+ /* @__PURE__ */ jsx20(
15647
+ BibleTextView,
15648
+ {
15649
+ fontSize: 16,
15650
+ fontFamily: "'Source Serif Pro', serif",
15651
+ reference,
15652
+ versionId
15653
+ }
15654
+ ),
15655
+ /* @__PURE__ */ jsxs13("div", { className: "yv:grid yv:grid-cols-[1fr_auto] yv:gap-4 yv:items-center yv:mt-4", children: [
15656
+ /* @__PURE__ */ jsx20("div", { className: "yv:text-balance yv:text-muted-foreground yv:justify-self-start yv:font-bold yv:text-[0.5rem]", children: version2?.copyright_short }),
15657
+ /* @__PURE__ */ jsx20("div", { className: "yv:justify-self-end", children: /* @__PURE__ */ jsx20(SvgComponent3, { fontSize: 12 }) })
15658
+ ] })
15659
+ ]
15660
+ }
15661
+ );
15662
+ }
15663
+
15619
15664
  // src/index.ts
15620
15665
  import { BibleSDKProvider } from "@youversion/platform-react-hooks";
15621
15666
  export {
@@ -15630,6 +15675,7 @@ export {
15630
15675
  BibleSDKProvider,
15631
15676
  BibleTextView,
15632
15677
  BibleVersionPicker,
15678
+ BibleWidgetView,
15633
15679
  HighlightsClient,
15634
15680
  LanguagesClient,
15635
15681
  MemoryStorageStrategy,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@youversion/platform-react-ui",
3
- "version": "0.5.0",
3
+ "version": "0.5.5",
4
4
  "description": "React SDK for YouVersion Platform",
5
5
  "license": "TBD",
6
6
  "type": "module",
@@ -40,8 +40,8 @@
40
40
  "lucide-react": "0.546.0",
41
41
  "tailwind-merge": "3.3.1",
42
42
  "tw-animate-css": "1.4.0",
43
- "@youversion/platform-core": "0.5.0",
44
- "@youversion/platform-react-hooks": "0.5.0"
43
+ "@youversion/platform-core": "0.5.5",
44
+ "@youversion/platform-react-hooks": "0.5.5"
45
45
  },
46
46
  "peerDependencies": {
47
47
  "react": ">=19.1.0 <20.0.0",
@@ -74,12 +74,13 @@
74
74
  "vite": "7.1.11",
75
75
  "vitest": "4.0.4",
76
76
  "vitest-browser-react": "2.0.2",
77
- "@internal/tsconfig": "0.0.0",
78
- "@internal/eslint-config": "0.0.0"
77
+ "@internal/eslint-config": "0.0.0",
78
+ "@internal/tsconfig": "0.0.0"
79
79
  },
80
80
  "publishConfig": {
81
81
  "access": "public",
82
- "registry": "https://registry.npmjs.org/"
82
+ "registry": "https://registry.npmjs.org/",
83
+ "provenance": true
83
84
  },
84
85
  "repository": {
85
86
  "type": "git",