@youversion/platform-react-ui 0.5.1 β†’ 0.5.6

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.
Files changed (4) hide show
  1. package/README.md +17 -113
  2. package/dist/components/bible-version-picker.stories.d.ts +3 -0
  3. package/dist/components/bible-version-picker.stories.d.ts.map +1 -1
  4. package/package.json +5 -4
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)
package/dist/components/bible-version-picker.stories.d.ts CHANGED
@@ -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: {
package/dist/components/bible-version-picker.stories.d.ts.map CHANGED
@@ -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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@youversion/platform-react-ui",
3
- "version": "0.5.1",
3
+ "version": "0.5.6",
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.1",
44
- "@youversion/platform-react-hooks": "0.5.1"
43
+ "@youversion/platform-core": "0.5.6",
44
+ "@youversion/platform-react-hooks": "0.5.6"
45
45
  },
46
46
  "peerDependencies": {
47
47
  "react": ">=19.1.0 <20.0.0",
@@ -79,7 +79,8 @@
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",