@solid/react-component 0.1.0 → 0.1.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.
Files changed (2) hide show
  1. package/README.md +98 -35
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # @solid/react-component
2
2
 
3
- Reusable React components for Solid apps. One package that will grow to include login, profile, and other components—so you depend on a single library instead of many.
3
+ Reusable React components for [Solid](https://solidproject.org/) apps. One package that will grow to include login, profile, and other components—so you depend on a single library instead of many.
4
4
 
5
5
  **Currently included:**
6
6
 
@@ -8,12 +8,31 @@ Reusable React components for Solid apps. One package that will grow to include
8
8
 
9
9
  ---
10
10
 
11
- ## Requirements
11
+ ## Table of Contents
12
+
13
+ - [Requirements](#requirements)
14
+ - [Installation](#installation)
15
+ - [Quick Start – Next.js](#quick-start--nextjs)
16
+ - [Quick Start – Any React App](#quick-start--any-react-app)
17
+ - [How Auth and Redirects Work](#how-auth-and-redirects-work)
18
+ - [SolidLoginPage – Props Reference](#solidloginpage--props-reference)
19
+ - [Customizing the Login Page](#customizing-the-login-page)
20
+ - [Import Paths](#import-paths)
21
+ - [Headless Login](#headless-login)
22
+ - [AuthGuard – Fallback](#authguard--fallback)
23
+ - [Package Structure](#package-structure)
24
+ - [Contributing](#contributing)
25
+ - [License](#license)
26
+
27
+ ---
12
28
 
13
- - **React** 18+
14
- - **[@ldo/solid-react](https://www.npmjs.com/package/@ldo/solid-react)** – Your app must be wrapped in `BrowserSolidLdoProvider` (or `SolidLdoProvider`) so auth and session work.
29
+ ## Requirements
15
30
 
16
- For the **Next.js** login adapter you also need **Next.js 13+** (App Router).
31
+ | Dependency | Version | Notes |
32
+ |---|---|---|
33
+ | **React** | 18+ | |
34
+ | **[@ldo/solid-react](https://www.npmjs.com/package/@ldo/solid-react)** | ≥ 1.0.0-alpha.33 | Your app must be wrapped in `BrowserSolidLdoProvider` |
35
+ | **Next.js** *(optional)* | 13+ (App Router) | Only needed for the Next.js adapter |
17
36
 
18
37
  ---
19
38
 
@@ -31,7 +50,7 @@ npm i @solid/react-component @ldo/solid-react next react
31
50
 
32
51
  ---
33
52
 
34
- ## Login – Next.js implementation
53
+ ## Quick Start – Next.js
35
54
 
36
55
  ### 1. Wrap the app with LDO’s provider
37
56
 
@@ -89,7 +108,7 @@ export default function Home() {
89
108
 
90
109
  ### 3. Add the login page
91
110
 
92
- Render **SolidLoginPage** on your login route. Pass the **logo** from your app (the package does not ship assets). You can also pass **footer** URLs so the default footer shows “GitHub” and “Report an issue” links.
111
+ Render **SolidLoginPage** on your login route. Pass the **logo** from your app (the package does not ship assets). You can also pass **footer** URLs so the default footer shows "GitHub" and "Report an issue" links.
93
112
 
94
113
  ```tsx
95
114
  // app/login/page.tsx
@@ -165,6 +184,43 @@ export default nextConfig;
165
184
 
166
185
  ---
167
186
 
187
+ ## Quick Start – Any React App
188
+
189
+ If you're **not** using Next.js, provide your own navigation implementation via `SolidLoginNavigationProvider`:
190
+
191
+ ```tsx
192
+ import {
193
+ SolidLoginNavigationProvider,
194
+ AuthGuard,
195
+ SolidLoginPage,
196
+ } from "@solid/react-component/login";
197
+ import type { SolidLoginNavigation } from "@solid/react-component/login";
198
+
199
+ const navigation: SolidLoginNavigation = {
200
+ getPathname: () => window.location.pathname,
201
+ getSearchParams: () => new URLSearchParams(window.location.search),
202
+ replace: (path) => window.history.replaceState(null, "", path),
203
+ redirect: (path) => { window.location.href = path; },
204
+ };
205
+
206
+ function App() {
207
+ return (
208
+ <SolidLoginNavigationProvider
209
+ navigation={navigation}
210
+ config={{ loginPath: "/login", homePath: "/" }}
211
+ >
212
+ <AuthGuard>
213
+ <YourMainApp />
214
+ </AuthGuard>
215
+ </SolidLoginNavigationProvider>
216
+ );
217
+ }
218
+ ```
219
+
220
+ > **Note:** You are responsible for calling your router's navigation methods inside `replace` and `redirect`. The example above uses basic browser APIs, but you can plug in React Router, TanStack Router, etc.
221
+
222
+ ---
223
+
168
224
  ## How auth and redirects work
169
225
 
170
226
  ### Session restore on refresh
@@ -183,33 +239,33 @@ See [LDO useSolidAuth](https://ldo.js.org/1.0.0-alpha.X/api/solid-react/useSolid
183
239
 
184
240
  ## SolidLoginPage – props reference
185
241
 
186
- | Prop | Type | Description |
187
- |------|------|-------------|
188
- | `onAlreadyLoggedIn` | `() => void` | Called when the user is already logged in (e.g. `() => router.replace("/")`). |
189
- | `redirectUrl` | `string` | URL the IdP should redirect back to after authentication. Defaults to `window.location.href` (the login page). Useful when you want the IdP to send the user straight to a different page (e.g. `"/?showModal=true"`) instead of back to `/login`. |
190
- | `logo` | `string` | **Required from your app.** URL to your logo image (e.g. `"/logo.svg"`). Not shipped in the package. |
191
- | `logoAlt` | `string` | Alt text for the logo image. |
192
- | `title` | `string` | Heading on the branding side (default: `"Sign in"`). |
193
- | `subtitle` | `string` | Subheading (default: `"to continue"`). |
194
- | `footerGitHubUrl` | `string` | If set with `footerIssuesUrl`, shows a footer with “GitHub” and “Report an issue” links. |
195
- | `footerIssuesUrl` | `string` | See `footerGitHubUrl`. |
196
- | `inputPlaceholder` | `string` | Placeholder for the provider URL input. |
197
- | `inputLabel` | `string` | Label above the input (default: `"Solid Identity Provider"`). |
198
- | `buttonLabel` | `string` | Submit button text (default: `"Next"`). |
199
- | `buttonLoadingLabel` | `string` | Submit button text while logging in (default: `"Signing in..."`). |
200
- | `defaultIssuer` | `string` | Pre-fill the issuer input. |
201
- | `presetIssuers` | `PresetIssuer[]` | Options in the dropdown (default: Solid Community, Inrupt). |
202
- | `className` | `string` | Extra class on the main container. |
203
- | `renderLogo` | `() => ReactNode` | Replace the default logo block. |
204
- | `renderForm` | `(props) => ReactNode` | Replace the entire form (see headless usage). |
205
- | `renderFooter` | `() => ReactNode` | Replace the default footer. |
242
+ | Prop | Type | Default | Description |
243
+ |------|------|---------|-------------|
244
+ | `onAlreadyLoggedIn` | `() => void` | — | Called when the user is already logged in. |
245
+ | `redirectUrl` | `string` | `window.location.href` | URL the IdP redirects back to after auth. |
246
+ | `logo` | `string` | — | URL to your logo image (e.g. `"/logo.svg"`). **Not shipped in the package.** |
247
+ | `logoAlt` | `string` | `"Logo"` | Alt text for the logo. |
248
+ | `title` | `string` | `"Sign in"` | Heading text. |
249
+ | `subtitle` | `string` | `"to continue"` | Subheading text. |
250
+ | `footerGitHubUrl` | `string` | — | Shows a "GitHub" footer link (requires `footerIssuesUrl` too). |
251
+ | `footerIssuesUrl` | `string` | — | Shows a "Report an issue" footer link. |
252
+ | `inputPlaceholder` | `string` | `"Enter your provider URL..."` | Placeholder for the provider input. |
253
+ | `inputLabel` | `string` | `"Solid Identity Provider"` | Label above the input. |
254
+ | `buttonLabel` | `string` | `"Next"` | Submit button text. |
255
+ | `buttonLoadingLabel` | `string` | `"Signing in..."` | Button text while loading. |
256
+ | `defaultIssuer` | `string` | — | Pre-fill the issuer input. |
257
+ | `presetIssuers` | `PresetIssuer[]` | Solid Community, Inrupt | Dropdown options. |
258
+ | `className` | `string` | — | Extra CSS class on the outer `<main>`. |
259
+ | `renderLogo` | `() => ReactNode` | — | Replace the default logo block. |
260
+ | `renderForm` | `(props) => ReactNode` | — | Replace the entire form (see [Headless login](#headless-login)). |
261
+ | `renderFooter` | `() => ReactNode` | — | Replace the default footer. |
206
262
 
207
263
  ---
208
264
 
209
265
  ## Customizing the login page
210
266
 
211
267
  - **Logo:** Pass `logo="/path/to/logo.svg"` from your app’s `public` (or asset URL). The package does not include assets.
212
- - **Footer links:** Set `footerGitHubUrl` and `footerIssuesUrl` to show the default “GitHub” and “Report an issue” links. Or use `renderFooter` for a custom footer.
268
+ - **Footer links:** Set `footerGitHubUrl` and `footerIssuesUrl` to show the default "GitHub" and "Report an issue" links. Or use `renderFooter` for a custom footer.
213
269
  - **Full custom form:** Use `renderForm` and receive `{ issuerInput, setIssuerInput, error, presetIssuers, isLoading, onSubmit, onIssuerChange }` to build your own UI while keeping auth logic.
214
270
 
215
271
  ---
@@ -245,7 +301,7 @@ import { useSolidLogin, LoginFormControl, validateIssuerUrl } from "@solid/react
245
301
  - Until LDO’s initial auth check has run (`ranInitialAuthCheck`).
246
302
  - During the OAuth callback (when the URL has `code` and `state`).
247
303
 
248
- Use the same fallback in both your protected pages and the login page for a consistent loading state.
304
+ > **Tip:** Use the same fallback on both protected pages and the login page for a seamless loading experience.
249
305
 
250
306
  ---
251
307
 
@@ -257,20 +313,27 @@ Use the same fallback in both your protected pages and the login page for a cons
257
313
  | `@solid/react-component/login` | Login: guard, page, hooks, types. |
258
314
  | `@solid/react-component/login/next` | Login + Next.js adapter (provider + guard + page). |
259
315
 
260
- Future components (e.g. profile) can follow the same pattern: `@solid/react-component/profile`, `@solid/react-component/profile/next`, etc.
316
+ Future components (e.g. profile) will follow the same pattern: `@solid/react-component/profile`, `@solid/react-component/profile/next`, etc.
261
317
 
262
318
  ---
263
319
 
264
- ## Building and publishing
265
-
266
- From the package directory:
320
+ ## Contributing
267
321
 
268
322
  ```bash
323
+ # Install dependencies
324
+ npm install
325
+
326
+ # Run in dev/watch mode
327
+ npm run dev
328
+
329
+ # Run tests
330
+ npm test
331
+
332
+ # Build for production
269
333
  npm run build
270
- npm publish
271
334
  ```
272
335
 
273
- Unscoped packages are public by default. Bump `version` in `package.json` before each publish.
336
+ Bump `version` in `package.json` before each publish.
274
337
 
275
338
  ---
276
339
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@solid/react-component",
3
- "version": "0.1.0",
3
+ "version": "0.1.1",
4
4
  "description": "Reusable React components for Solid apps (login, and more to come)",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",