@rationalbloks/frontblok-components 0.1.0
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 +129 -0
- package/dist/index.cjs +6541 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.ts +256 -0
- package/dist/index.js +6525 -0
- package/dist/index.js.map +1 -0
- package/package.json +66 -0
package/README.md
ADDED
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
# @rationalbloks/frontblok-components
|
|
2
|
+
|
|
3
|
+
Reusable React components for RationalBloks frontends.
|
|
4
|
+
|
|
5
|
+
## Philosophy
|
|
6
|
+
|
|
7
|
+
**THE ONE WAY: Props-based API**
|
|
8
|
+
|
|
9
|
+
- All customization via props (no hidden context)
|
|
10
|
+
- Each component is self-contained
|
|
11
|
+
- TypeScript types for everything
|
|
12
|
+
- Works with frontblok-auth
|
|
13
|
+
|
|
14
|
+
## Installation
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
npm install @rationalbloks/frontblok-components
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
## Peer Dependencies
|
|
21
|
+
|
|
22
|
+
```json
|
|
23
|
+
{
|
|
24
|
+
"@mui/material": "^5.0.0 || ^6.0.0",
|
|
25
|
+
"@mui/icons-material": "^5.0.0 || ^6.0.0",
|
|
26
|
+
"@emotion/react": "^11.0.0",
|
|
27
|
+
"@emotion/styled": "^11.0.0",
|
|
28
|
+
"@react-oauth/google": "^0.12.0",
|
|
29
|
+
"@rationalbloks/frontblok-auth": "^0.3.0",
|
|
30
|
+
"react": "^18.0.0 || ^19.0.0",
|
|
31
|
+
"react-router-dom": "^6.0.0 || ^7.0.0"
|
|
32
|
+
}
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
## Components
|
|
36
|
+
|
|
37
|
+
### Views
|
|
38
|
+
|
|
39
|
+
| Component | Props | Description |
|
|
40
|
+
|-----------|-------|-------------|
|
|
41
|
+
| `AuthView` | `branding`, `authApi`, `useAuth`, `generateOAuthNonce` | Login/register with Google OAuth |
|
|
42
|
+
| `ForgotPasswordView` | `authApi`, `authRoute?` | Request password reset |
|
|
43
|
+
| `ResetPasswordView` | `authApi`, `authRoute?` | Set new password |
|
|
44
|
+
| `VerifyEmailView` | `authApi`, `successRoute?`, `errorRoute?` | Email verification |
|
|
45
|
+
| `SupportView` | (none) | Support request form |
|
|
46
|
+
|
|
47
|
+
### Shared
|
|
48
|
+
|
|
49
|
+
| Component | Props | Description |
|
|
50
|
+
|-----------|-------|-------------|
|
|
51
|
+
| `ErrorBoundary` | `children`, `supportEmail?` | React error boundary |
|
|
52
|
+
| `ErrorFallback` | `error`, `resetErrorBoundary`, ... | Error display component |
|
|
53
|
+
| `ConfirmationModal` | `open`, `onClose`, `onConfirm`, `title`, `message`, ... | Confirmation dialog |
|
|
54
|
+
| `createNavbar(config)` | Factory function | Creates configured navbar component |
|
|
55
|
+
|
|
56
|
+
## Usage
|
|
57
|
+
|
|
58
|
+
```tsx
|
|
59
|
+
import {
|
|
60
|
+
AuthView,
|
|
61
|
+
ForgotPasswordView,
|
|
62
|
+
ResetPasswordView,
|
|
63
|
+
VerifyEmailView,
|
|
64
|
+
SupportView,
|
|
65
|
+
ErrorBoundary,
|
|
66
|
+
ConfirmationModal
|
|
67
|
+
} from '@rationalbloks/frontblok-components';
|
|
68
|
+
import { authApi, useClientAuth, generateOAuthNonce } from './services/datablokApi';
|
|
69
|
+
import { BRANDING } from './config/branding';
|
|
70
|
+
|
|
71
|
+
function App() {
|
|
72
|
+
return (
|
|
73
|
+
<ErrorBoundary supportEmail="support@myapp.com">
|
|
74
|
+
<Routes>
|
|
75
|
+
<Route path="/auth" element={
|
|
76
|
+
<AuthView
|
|
77
|
+
branding={BRANDING}
|
|
78
|
+
authApi={authApi}
|
|
79
|
+
useAuth={useClientAuth}
|
|
80
|
+
generateOAuthNonce={generateOAuthNonce}
|
|
81
|
+
/>
|
|
82
|
+
} />
|
|
83
|
+
<Route path="/forgot-password" element={
|
|
84
|
+
<ForgotPasswordView authApi={authApi} />
|
|
85
|
+
} />
|
|
86
|
+
<Route path="/reset-password" element={
|
|
87
|
+
<ResetPasswordView authApi={authApi} />
|
|
88
|
+
} />
|
|
89
|
+
<Route path="/verify-email" element={
|
|
90
|
+
<VerifyEmailView
|
|
91
|
+
authApi={authApi}
|
|
92
|
+
successRoute="/dashboard"
|
|
93
|
+
errorRoute="/settings"
|
|
94
|
+
/>
|
|
95
|
+
} />
|
|
96
|
+
<Route path="/support" element={
|
|
97
|
+
<SupportView />
|
|
98
|
+
} />
|
|
99
|
+
</Routes>
|
|
100
|
+
</ErrorBoundary>
|
|
101
|
+
);
|
|
102
|
+
}
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
## Branding Configuration
|
|
106
|
+
|
|
107
|
+
Create a `config/branding.ts` in your app:
|
|
108
|
+
|
|
109
|
+
```typescript
|
|
110
|
+
export const BRANDING = {
|
|
111
|
+
appName: 'My App',
|
|
112
|
+
tagline: 'Welcome',
|
|
113
|
+
logoLetter: 'M',
|
|
114
|
+
primaryGradient: 'linear-gradient(135deg, #1e40af 0%, #2563eb 100%)',
|
|
115
|
+
primaryGradientHover: 'linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%)',
|
|
116
|
+
logoShadow: '0 4px 20px rgba(30, 64, 175, 0.3)',
|
|
117
|
+
dashboardRoute: '/dashboard',
|
|
118
|
+
messages: {
|
|
119
|
+
loginSuccess: 'Login successful!',
|
|
120
|
+
registerSuccess: 'Account created!',
|
|
121
|
+
googleNewUser: 'Welcome! Account created.',
|
|
122
|
+
},
|
|
123
|
+
securityBadge: 'Secure Access',
|
|
124
|
+
};
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
## License
|
|
128
|
+
|
|
129
|
+
MIT
|