powr-sdk-web 2.0.0 → 2.0.2

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 (3) hide show
  1. package/README.md +136 -136
  2. package/dist/waitlists/display.js +31 -112
  3. package/package.json +39 -35
package/README.md CHANGED
@@ -1,137 +1,137 @@
1
- # Powr SDK Web
2
-
3
- A comprehensive React component library for building modern web applications with PowrBase integration.
4
-
5
- ## Installation
6
-
7
- ```bash
8
- npm install powr-sdk-web
9
- ```
10
-
11
- ## Components
12
-
13
- ### PowrLogin
14
- A customizable authentication component supporting login, registration, and toggle modes.
15
-
16
- ```jsx
17
- import { PowrLogin } from 'powr-sdk-web';
18
-
19
- <PowrLogin
20
- mode="toggle"
21
- appName="MyApp"
22
- appLogo="/logo.png"
23
- onLogin={(data) => console.log('Login successful:', data)}
24
- onRegister={(data) => console.log('Registration successful:', data)}
25
- loginApiUrl="https://api.powrbase.cloud/auth/login"
26
- registerApiUrl="https://api.powrbase.cloud/auth/register"
27
- />
28
- ```
29
-
30
- **Props:**
31
- - `mode`: 'login' | 'register' | 'toggle'
32
- - `appName`: Application name to display
33
- - `appLogo`: URL to application logo
34
- - `onLogin`: Callback function for successful login
35
- - `onRegister`: Callback function for successful registration
36
- - `loginApiUrl`: Custom login API endpoint (optional)
37
- - `registerApiUrl`: Custom registration API endpoint (optional)
38
-
39
- ### WaitlistDisplay
40
- Display waitlist entries from PowrBase Cloud API.
41
-
42
- ```jsx
43
- import { WaitlistDisplay } from 'powr-sdk-web';
44
-
45
- <WaitlistDisplay
46
- projectId="your-project-id"
47
- apiUrl="https://api.powrbase.cloud/waitlists"
48
- />
49
- ```
50
-
51
- **Props:**
52
- - `projectId`: Your project ID (required)
53
- - `apiUrl`: Custom API endpoint (optional)
54
-
55
- ### PowrFormBuilder
56
- Dynamic form builder that fetches and renders forms based on schema from PowrBase Cloud API.
57
-
58
- ```jsx
59
- import { PowrFormBuilder } from 'powr-sdk-web';
60
-
61
- <PowrFormBuilder
62
- formName="student-registration"
63
- projectId="your-project-id"
64
- theme="purple"
65
- onSubmitSuccess={(data) => console.log('Form submitted:', data)}
66
- onSubmitError={(error) => console.error('Form error:', error)}
67
- />
68
- ```
69
-
70
- **Props:**
71
- - `formName`: Name of the form to fetch (required)
72
- - `projectId`: Your project ID (required)
73
- - `apiUrl`: Custom API endpoint (optional, defaults to PowrBase Cloud)
74
- - `onSubmitSuccess`: Callback for successful form submission
75
- - `onSubmitError`: Callback for form submission errors
76
- - `className`: Additional CSS classes
77
- - `theme`: Color theme ('purple', 'blue', 'green', 'red', 'yellow', 'indigo', 'pink')
78
-
79
- **Supported Field Types:**
80
- - `email`: Email input with validation
81
- - `text`: Text input
82
- - `radio`: Radio button groups
83
- - `custom`: Special fields (e.g., QR codes)
84
- - `fileUploader`: File upload with payment proof support
85
-
86
- ### FormDisplay
87
- Display form responses from PowrBase Cloud API.
88
-
89
- ```jsx
90
- import { FormDisplay } from 'powr-sdk-web';
91
-
92
- <FormDisplay
93
- formName="student-registration"
94
- projectId="your-project-id"
95
- theme="purple"
96
- />
97
- ```
98
-
99
- **Props:**
100
- - `formName`: Name of the form to display responses for (required)
101
- - `projectId`: Your project ID (required)
102
- - `apiUrl`: Custom API endpoint (optional, defaults to PowrBase Cloud)
103
- - `className`: Additional CSS classes
104
- - `theme`: Color theme ('purple', 'blue', 'green', 'red', 'yellow', 'indigo', 'pink')
105
-
106
- ### Other Components
107
-
108
- - `PowrBaseSwiper`: Customizable image/video swiper
109
- - `PowrBaseReviews`: Review display and management
110
- - `PowrBaseUploader`: File upload component
111
- - `PowrBaseComments`: Comment system
112
- - `PowrBaseWaitlist`: Waitlist submission component
113
- - `PowrBaseActivities`: Activity feed
114
- - `PowrBaseInvoice`: Invoice management
115
- - `PowrLike`: Like/reaction system
116
- - `PowrBaseBlogs`: Blog management
117
-
118
- ## API Integration
119
-
120
- All components are designed to work with the PowrBase Cloud API by default, but can be configured to use custom endpoints.
121
-
122
- ### Default API Endpoints:
123
- - Authentication: `https://api.powrbase.cloud/auth`
124
- - Forms: `https://api.powrbase.cloud/forms`
125
- - Waitlists: `https://api.powrbase.cloud/waitlists`
126
-
127
- ## Styling
128
-
129
- Components use Tailwind CSS classes and support custom theming. The default theme is purple, but you can customize colors using the `theme` prop where available.
130
-
131
- ## TypeScript Support
132
-
133
- Full TypeScript support is included with proper type definitions for all components.
134
-
135
- ## License
136
-
1
+ # Powr SDK Web
2
+
3
+ A comprehensive React component library for building modern web applications with PowrBase integration.
4
+
5
+ ## Installation
6
+
7
+ ```bash
8
+ npm install powr-sdk-web
9
+ ```
10
+
11
+ ## Components
12
+
13
+ ### PowrLogin
14
+ A customizable authentication component supporting login, registration, and toggle modes.
15
+
16
+ ```jsx
17
+ import { PowrLogin } from 'powr-sdk-web';
18
+
19
+ <PowrLogin
20
+ mode="toggle"
21
+ appName="MyApp"
22
+ appLogo="/logo.png"
23
+ onLogin={(data) => console.log('Login successful:', data)}
24
+ onRegister={(data) => console.log('Registration successful:', data)}
25
+ loginApiUrl="https://api.powrbase.cloud/auth/login"
26
+ registerApiUrl="https://api.powrbase.cloud/auth/register"
27
+ />
28
+ ```
29
+
30
+ **Props:**
31
+ - `mode`: 'login' | 'register' | 'toggle'
32
+ - `appName`: Application name to display
33
+ - `appLogo`: URL to application logo
34
+ - `onLogin`: Callback function for successful login
35
+ - `onRegister`: Callback function for successful registration
36
+ - `loginApiUrl`: Custom login API endpoint (optional)
37
+ - `registerApiUrl`: Custom registration API endpoint (optional)
38
+
39
+ ### WaitlistDisplay
40
+ Display waitlist entries from PowrBase Cloud API.
41
+
42
+ ```jsx
43
+ import { WaitlistDisplay } from 'powr-sdk-web';
44
+
45
+ <WaitlistDisplay
46
+ projectId="your-project-id"
47
+ apiUrl="https://api.powrbase.cloud/waitlists"
48
+ />
49
+ ```
50
+
51
+ **Props:**
52
+ - `projectId`: Your project ID (required)
53
+ - `apiUrl`: Custom API endpoint (optional)
54
+
55
+ ### PowrFormBuilder
56
+ Dynamic form builder that fetches and renders forms based on schema from PowrBase Cloud API.
57
+
58
+ ```jsx
59
+ import { PowrFormBuilder } from 'powr-sdk-web';
60
+
61
+ <PowrFormBuilder
62
+ formName="student-registration"
63
+ projectId="your-project-id"
64
+ theme="purple"
65
+ onSubmitSuccess={(data) => console.log('Form submitted:', data)}
66
+ onSubmitError={(error) => console.error('Form error:', error)}
67
+ />
68
+ ```
69
+
70
+ **Props:**
71
+ - `formName`: Name of the form to fetch (required)
72
+ - `projectId`: Your project ID (required)
73
+ - `apiUrl`: Custom API endpoint (optional, defaults to PowrBase Cloud)
74
+ - `onSubmitSuccess`: Callback for successful form submission
75
+ - `onSubmitError`: Callback for form submission errors
76
+ - `className`: Additional CSS classes
77
+ - `theme`: Color theme ('purple', 'blue', 'green', 'red', 'yellow', 'indigo', 'pink')
78
+
79
+ **Supported Field Types:**
80
+ - `email`: Email input with validation
81
+ - `text`: Text input
82
+ - `radio`: Radio button groups
83
+ - `custom`: Special fields (e.g., QR codes)
84
+ - `fileUploader`: File upload with payment proof support
85
+
86
+ ### FormDisplay
87
+ Display form responses from PowrBase Cloud API.
88
+
89
+ ```jsx
90
+ import { FormDisplay } from 'powr-sdk-web';
91
+
92
+ <FormDisplay
93
+ formName="student-registration"
94
+ projectId="your-project-id"
95
+ theme="purple"
96
+ />
97
+ ```
98
+
99
+ **Props:**
100
+ - `formName`: Name of the form to display responses for (required)
101
+ - `projectId`: Your project ID (required)
102
+ - `apiUrl`: Custom API endpoint (optional, defaults to PowrBase Cloud)
103
+ - `className`: Additional CSS classes
104
+ - `theme`: Color theme ('purple', 'blue', 'green', 'red', 'yellow', 'indigo', 'pink')
105
+
106
+ ### Other Components
107
+
108
+ - `PowrBaseSwiper`: Customizable image/video swiper
109
+ - `PowrBaseReviews`: Review display and management
110
+ - `PowrBaseUploader`: File upload component
111
+ - `PowrBaseComments`: Comment system
112
+ - `PowrBaseWaitlist`: Waitlist submission component
113
+ - `PowrBaseActivities`: Activity feed
114
+ - `PowrBaseInvoice`: Invoice management
115
+ - `PowrLike`: Like/reaction system
116
+ - `PowrBaseBlogs`: Blog management
117
+
118
+ ## API Integration
119
+
120
+ All components are designed to work with the PowrBase Cloud API by default, but can be configured to use custom endpoints.
121
+
122
+ ### Default API Endpoints:
123
+ - Authentication: `https://api.powrbase.cloud/auth`
124
+ - Forms: `https://api.powrbase.cloud/forms`
125
+ - Waitlists: `https://api.powrbase.cloud/waitlists`
126
+
127
+ ## Styling
128
+
129
+ Components use Tailwind CSS classes and support custom theming. The default theme is purple, but you can customize colors using the `theme` prop where available.
130
+
131
+ ## TypeScript Support
132
+
133
+ Full TypeScript support is included with proper type definitions for all components.
134
+
135
+ ## License
136
+
137
137
  MIT License
package/dist/waitlists/display.js CHANGED
@@ -104,126 +104,45 @@ var WaitlistDisplay = function WaitlistDisplay(_ref) {
104
104
  }, [projectId, apiUrl]);
105
105
  if (loading) {
106
106
  return /*#__PURE__*/_react["default"].createElement("div", {
107
- style: {
108
- display: 'flex',
109
- justifyContent: 'center',
110
- alignItems: 'center',
111
- padding: '40px',
112
- color: '#666'
113
- }
114
- }, "Loading waitlist...");
107
+ className: "flex items-center justify-center h-64"
108
+ }, /*#__PURE__*/_react["default"].createElement("div", {
109
+ className: "animate-spin h-8 w-8 border-4 border-blue-600 border-t-transparent rounded-full"
110
+ }));
115
111
  }
116
112
  if (error) {
117
113
  return /*#__PURE__*/_react["default"].createElement("div", {
118
- style: {
119
- padding: '20px',
120
- color: '#e74c3c',
121
- textAlign: 'center',
122
- background: '#fdf2f2',
123
- borderRadius: '8px',
124
- border: '1px solid #fecaca'
125
- }
126
- }, error);
114
+ className: "text-center py-8 text-red-500"
115
+ }, /*#__PURE__*/_react["default"].createElement("p", null, error));
127
116
  }
128
117
  if (entries.length === 0) {
129
118
  return /*#__PURE__*/_react["default"].createElement("div", {
130
- style: {
131
- padding: '40px',
132
- textAlign: 'center',
133
- color: '#666',
134
- background: '#f9fafb',
135
- borderRadius: '8px'
136
- }
137
- }, /*#__PURE__*/_react["default"].createElement("h3", {
138
- style: {
139
- marginBottom: '12px',
140
- color: '#374151'
141
- }
142
- }, "No Waitlist Entries"), /*#__PURE__*/_react["default"].createElement("p", null, "No one has joined the waitlist yet."));
119
+ className: "text-center py-8 text-gray-500"
120
+ }, /*#__PURE__*/_react["default"].createElement("div", {
121
+ className: "h-12 w-12 mx-auto mb-4 text-gray-300"
122
+ }, /*#__PURE__*/_react["default"].createElement("svg", {
123
+ fill: "currentColor",
124
+ viewBox: "0 0 20 20"
125
+ }, /*#__PURE__*/_react["default"].createElement("path", {
126
+ d: "M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3z"
127
+ }))), /*#__PURE__*/_react["default"].createElement("p", null, "No waitlist entries yet"), /*#__PURE__*/_react["default"].createElement("p", {
128
+ className: "text-sm"
129
+ }, "Add your first entry to get started"));
143
130
  }
144
131
  return /*#__PURE__*/_react["default"].createElement("div", {
145
- style: {
146
- maxWidth: '800px',
147
- margin: '0 auto',
148
- background: '#fff',
149
- borderRadius: '12px',
150
- boxShadow: '0 2px 12px rgba(0,0,0,0.07)',
151
- overflow: 'hidden'
152
- }
153
- }, /*#__PURE__*/_react["default"].createElement("div", {
154
- style: {
155
- padding: '24px',
156
- borderBottom: '1px solid #e5e7eb',
157
- background: '#f9fafb'
158
- }
159
- }, /*#__PURE__*/_react["default"].createElement("h2", {
160
- style: {
161
- margin: 0,
162
- fontSize: '20px',
163
- fontWeight: '600',
164
- color: '#111827'
165
- }
166
- }, "Waitlist Entries (", entries.length, ")"), /*#__PURE__*/_react["default"].createElement("p", {
167
- style: {
168
- margin: '8px 0 0 0',
169
- color: '#6b7280',
170
- fontSize: '14px'
171
- }
172
- }, "People who have joined your waitlist")), /*#__PURE__*/_react["default"].createElement("div", {
173
- style: {
174
- maxHeight: '400px',
175
- overflowY: 'auto'
176
- }
177
- }, entries.map(function (entry, index) {
132
+ className: "space-y-4"
133
+ }, entries.map(function (entry) {
178
134
  return /*#__PURE__*/_react["default"].createElement("div", {
179
- key: entry._id || index,
180
- style: {
181
- padding: '16px 24px',
182
- borderBottom: '1px solid #f3f4f6',
183
- display: 'flex',
184
- justifyContent: 'space-between',
185
- alignItems: 'center',
186
- background: index % 2 === 0 ? '#fff' : '#fafafa'
187
- }
188
- }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
189
- style: {
190
- fontWeight: '500',
191
- color: '#111827',
192
- marginBottom: '4px'
193
- }
194
- }, entry.email), /*#__PURE__*/_react["default"].createElement("div", {
195
- style: {
196
- fontSize: '12px',
197
- color: '#6b7280'
198
- }
199
- }, "Joined ", new Date(entry.createdAt).toLocaleDateString('en-US', {
200
- year: 'numeric',
201
- month: 'short',
202
- day: 'numeric',
203
- hour: '2-digit',
204
- minute: '2-digit'
205
- }))), /*#__PURE__*/_react["default"].createElement("div", {
206
- style: {
207
- fontSize: '12px',
208
- color: '#6b7280',
209
- background: '#f3f4f6',
210
- padding: '4px 8px',
211
- borderRadius: '4px'
212
- }
213
- }, "#", index + 1));
214
- })), entries.length > 0 && /*#__PURE__*/_react["default"].createElement("div", {
215
- style: {
216
- padding: '16px 24px',
217
- background: '#f9fafb',
218
- borderTop: '1px solid #e5e7eb',
219
- textAlign: 'center'
220
- }
221
- }, /*#__PURE__*/_react["default"].createElement("p", {
222
- style: {
223
- margin: 0,
224
- fontSize: '14px',
225
- color: '#6b7280'
226
- }
227
- }, "Total entries: ", entries.length)));
135
+ key: entry._id,
136
+ className: "flex items-center justify-between p-4 border rounded-lg hover:bg-gray-50"
137
+ }, /*#__PURE__*/_react["default"].createElement("div", {
138
+ className: "flex-1"
139
+ }, /*#__PURE__*/_react["default"].createElement("div", {
140
+ className: "flex items-center space-x-3"
141
+ }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("p", {
142
+ className: "text-sm font-medium text-gray-900"
143
+ }, entry.email), /*#__PURE__*/_react["default"].createElement("p", {
144
+ className: "text-xs text-gray-400"
145
+ }, "Added: ", new Date(entry.createdAt).toLocaleDateString())))));
146
+ }));
228
147
  };
229
148
  var _default = exports["default"] = WaitlistDisplay;
package/package.json CHANGED
@@ -1,35 +1,39 @@
1
- {
2
- "name": "powr-sdk-web",
3
- "version": "2.0.0",
4
- "main": "dist/index.js",
5
-
6
- "scripts": {
7
- "build": "babel src -d dist --copy-files",
8
- "prepublishOnly": "npm run build"
9
- },
10
- "keywords": [
11
- "react",
12
- "component",
13
- "npm",
14
- "file-upload",
15
- "powrbase",
16
- "comments"
17
- ],
18
- "author": "Lawazia Tech",
19
- "license": "MIT",
20
- "repository": {
21
- "type": "git",
22
- "url": "https://github.com/lawaziatech/react-byto.git"
23
- },
24
- "peerDependencies": {
25
- "react": "*",
26
- "react-dom": "*"
27
- },
28
- "devDependencies": {
29
- "@babel/cli": "^7.24.1",
30
- "@babel/core": "^7.24.4",
31
- "@babel/preset-env": "^7.24.4",
32
- "@babel/preset-react": "^7.24.1",
33
- "prop-types": "^15.8.1"
34
- }
35
- }
1
+ {
2
+ "name": "powr-sdk-web",
3
+ "version": "2.0.2",
4
+ "main": "dist/index.js",
5
+
6
+ "scripts": {
7
+ "build": "babel src -d dist --copy-files",
8
+ "prepublishOnly": "npm run build"
9
+ },
10
+ "keywords": [
11
+ "react",
12
+ "component",
13
+ "npm",
14
+ "file-upload",
15
+ "powrbase",
16
+ "comments"
17
+ ],
18
+ "author": "Lawazia Tech",
19
+ "license": "MIT",
20
+ "repository": {
21
+ "type": "git",
22
+ "url": "https://github.com/lawaziatech/react-byto.git"
23
+ },
24
+ "peerDependencies": {
25
+ "react": "*",
26
+ "react-dom": "*"
27
+ },
28
+ "dependencies": {
29
+ "react-hook-form": "^7.58.0",
30
+ "axios": "^1.7.7"
31
+ },
32
+ "devDependencies": {
33
+ "@babel/cli": "^7.24.1",
34
+ "@babel/core": "^7.24.4",
35
+ "@babel/preset-env": "^7.24.4",
36
+ "@babel/preset-react": "^7.24.1",
37
+ "prop-types": "^15.8.1"
38
+ }
39
+ }