@campxdev/react-native-blueprint 0.1.8 → 0.1.9
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 +32 -64
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -127,16 +127,19 @@ The example app in this repository uses [Re.Pack 5](https://re-pack.dev) with Rs
|
|
|
127
127
|
If you want to use Re.Pack in your project:
|
|
128
128
|
|
|
129
129
|
1. Install Re.Pack:
|
|
130
|
+
|
|
130
131
|
```sh
|
|
131
132
|
npx @callstack/repack-init
|
|
132
133
|
```
|
|
133
134
|
|
|
134
135
|
2. Install NativeWind plugin:
|
|
136
|
+
|
|
135
137
|
```sh
|
|
136
138
|
npm install @callstack/repack-plugin-nativewind
|
|
137
139
|
```
|
|
138
140
|
|
|
139
141
|
3. Update `rspack.config.js`:
|
|
142
|
+
|
|
140
143
|
```js
|
|
141
144
|
import { NativeWindPlugin } from '@callstack/repack-plugin-nativewind';
|
|
142
145
|
|
|
@@ -158,7 +161,13 @@ If you want to use Re.Pack in your project:
|
|
|
158
161
|
// Import CSS at the top of your app entry point (do this ONCE)
|
|
159
162
|
import '@campxdev/react-native-blueprint/global.css';
|
|
160
163
|
|
|
161
|
-
import {
|
|
164
|
+
import {
|
|
165
|
+
Button,
|
|
166
|
+
Card,
|
|
167
|
+
Text,
|
|
168
|
+
Input,
|
|
169
|
+
Alert,
|
|
170
|
+
} from '@campxdev/react-native-blueprint';
|
|
162
171
|
import { View } from 'react-native';
|
|
163
172
|
|
|
164
173
|
function App() {
|
|
@@ -167,7 +176,9 @@ function App() {
|
|
|
167
176
|
<Card>
|
|
168
177
|
<Card.Header>
|
|
169
178
|
<Card.Title>Welcome</Card.Title>
|
|
170
|
-
<Card.Description>
|
|
179
|
+
<Card.Description>
|
|
180
|
+
Get started with react-native-blueprint
|
|
181
|
+
</Card.Description>
|
|
171
182
|
</Card.Header>
|
|
172
183
|
<Card.Content>
|
|
173
184
|
<Input placeholder="Enter your name" />
|
|
@@ -181,9 +192,7 @@ function App() {
|
|
|
181
192
|
|
|
182
193
|
<Alert>
|
|
183
194
|
<Alert.Title>Info</Alert.Title>
|
|
184
|
-
<Alert.Description>
|
|
185
|
-
This is a sample alert component.
|
|
186
|
-
</Alert.Description>
|
|
195
|
+
<Alert.Description>This is a sample alert component.</Alert.Description>
|
|
187
196
|
</Alert>
|
|
188
197
|
</View>
|
|
189
198
|
);
|
|
@@ -193,12 +202,14 @@ function App() {
|
|
|
193
202
|
## Available Components
|
|
194
203
|
|
|
195
204
|
### Layout & Structure
|
|
205
|
+
|
|
196
206
|
- **Button** - Customizable button with variants (default, destructive, outline, ghost, link)
|
|
197
207
|
- **Card** - Container with header, content, and footer sections
|
|
198
208
|
- **Separator** - Horizontal or vertical divider
|
|
199
209
|
- **Skeleton** - Loading placeholder with shimmer effect
|
|
200
210
|
|
|
201
211
|
### Form Components
|
|
212
|
+
|
|
202
213
|
- **Input** - Text input field
|
|
203
214
|
- **Textarea** - Multi-line text input
|
|
204
215
|
- **Checkbox** - Checkbox with label support
|
|
@@ -209,12 +220,14 @@ function App() {
|
|
|
209
220
|
- **Slider** - Range slider input
|
|
210
221
|
|
|
211
222
|
### Navigation
|
|
223
|
+
|
|
212
224
|
- **Tabs** - Tab navigation component
|
|
213
225
|
- **Accordion** - Collapsible content sections
|
|
214
226
|
- **Collapsible** - Expandable/collapsible content
|
|
215
227
|
- **Menubar** - Menu bar with nested items
|
|
216
228
|
|
|
217
229
|
### Overlays & Dialogs
|
|
230
|
+
|
|
218
231
|
- **Dialog** - Modal dialog
|
|
219
232
|
- **Alert Dialog** - Alert/confirmation dialog
|
|
220
233
|
- **Popover** - Floating popover
|
|
@@ -224,18 +237,21 @@ function App() {
|
|
|
224
237
|
- **Hover Card** - Card that appears on hover
|
|
225
238
|
|
|
226
239
|
### Feedback & Status
|
|
240
|
+
|
|
227
241
|
- **Alert** - Informational alert box
|
|
228
242
|
- **Toast** - Toast notification
|
|
229
243
|
- **Progress** - Progress bar
|
|
230
244
|
- **Badge** - Status badge
|
|
231
245
|
|
|
232
246
|
### Data Display
|
|
247
|
+
|
|
233
248
|
- **Table** - Data table with sorting
|
|
234
249
|
- **Avatar** - User avatar with fallback
|
|
235
250
|
- **Text** - Typography component with variants
|
|
236
251
|
- **Icon** - Icon component (powered by lucide-react-native)
|
|
237
252
|
|
|
238
253
|
### Utilities
|
|
254
|
+
|
|
239
255
|
- **Aspect Ratio** - Container with fixed aspect ratio
|
|
240
256
|
- **Toggle** - Toggle button
|
|
241
257
|
- **Toggle Group** - Group of toggle buttons
|
|
@@ -246,10 +262,10 @@ Components use CSS variables for theming. Customize your app's appearance by mod
|
|
|
246
262
|
|
|
247
263
|
```css
|
|
248
264
|
:root {
|
|
249
|
-
--primary: 220 90% 56%;
|
|
250
|
-
--secondary: 280 70% 60%;
|
|
251
|
-
--destructive: 0 84% 60%;
|
|
252
|
-
--radius: 0.75rem;
|
|
265
|
+
--primary: 220 90% 56%; /* Blue */
|
|
266
|
+
--secondary: 280 70% 60%; /* Purple */
|
|
267
|
+
--destructive: 0 84% 60%; /* Red */
|
|
268
|
+
--radius: 0.75rem; /* Border radius */
|
|
253
269
|
}
|
|
254
270
|
```
|
|
255
271
|
|
|
@@ -300,6 +316,7 @@ yarn storybook:android # Run Storybook on Android
|
|
|
300
316
|
### Build Performance
|
|
301
317
|
|
|
302
318
|
The example app uses **Re.Pack 5 + Rspack** instead of Metro for:
|
|
319
|
+
|
|
303
320
|
- ⚡ **5x faster cold builds**
|
|
304
321
|
- ⚡ **5x faster hot module reload (HMR)**
|
|
305
322
|
- 📦 **Zero package duplications**
|
|
@@ -320,6 +337,7 @@ import type { ButtonProps, CardProps } from '@campxdev/react-native-blueprint';
|
|
|
320
337
|
### "Cannot find module '@campxdev/react-native-blueprint/global.css'"
|
|
321
338
|
|
|
322
339
|
Make sure you've:
|
|
340
|
+
|
|
323
341
|
1. Installed NativeWind: `npm install nativewind tailwindcss`
|
|
324
342
|
2. Configured Metro with NativeWind plugin (see Installation Step 5)
|
|
325
343
|
3. Imported the CSS in your app entry point
|
|
@@ -397,6 +415,7 @@ Contributions are welcome! Please follow these steps:
|
|
|
397
415
|
### Development Workflow
|
|
398
416
|
|
|
399
417
|
1. Clone the repo and install dependencies:
|
|
418
|
+
|
|
400
419
|
```sh
|
|
401
420
|
git clone https://github.com/campx-org/react-native-blueprint.git
|
|
402
421
|
cd react-native-blueprint
|
|
@@ -406,6 +425,7 @@ Contributions are welcome! Please follow these steps:
|
|
|
406
425
|
2. Run the example app:
|
|
407
426
|
|
|
408
427
|
**Normal App Mode:**
|
|
428
|
+
|
|
409
429
|
```sh
|
|
410
430
|
yarn example:app # Start dev server
|
|
411
431
|
cd example && yarn app:ios # Or run on iOS
|
|
@@ -413,6 +433,7 @@ Contributions are welcome! Please follow these steps:
|
|
|
413
433
|
```
|
|
414
434
|
|
|
415
435
|
**Storybook Mode (Component Library):**
|
|
436
|
+
|
|
416
437
|
```sh
|
|
417
438
|
yarn example:storybook # Start Storybook
|
|
418
439
|
cd example && yarn storybook:ios # Or run on iOS
|
|
@@ -422,6 +443,7 @@ Contributions are welcome! Please follow these steps:
|
|
|
422
443
|
3. Make your changes in `/src`
|
|
423
444
|
|
|
424
445
|
4. Run type checking and linting:
|
|
446
|
+
|
|
425
447
|
```sh
|
|
426
448
|
yarn typecheck
|
|
427
449
|
yarn lint
|
|
@@ -435,66 +457,12 @@ Contributions are welcome! Please follow these steps:
|
|
|
435
457
|
### Example App Tech Stack
|
|
436
458
|
|
|
437
459
|
The example app showcases modern React Native development with:
|
|
460
|
+
|
|
438
461
|
- **Re.Pack 5 + Rspack** - 5x faster than Metro bundler
|
|
439
462
|
- **Storybook React Native** - Interactive component development
|
|
440
463
|
- **NativeWind v4** - Tailwind CSS for React Native
|
|
441
464
|
- **Command-based mode switching** - Easy switching between app and Storybook modes
|
|
442
465
|
|
|
443
|
-
## Publishing
|
|
444
|
-
|
|
445
|
-
For maintainers who need to publish new versions of the package, we provide a comprehensive automated script.
|
|
446
|
-
|
|
447
|
-
### Publishing Script
|
|
448
|
-
|
|
449
|
-
The [publish.sh](scripts/publish.sh) script handles the entire publishing workflow with comprehensive error handling.
|
|
450
|
-
|
|
451
|
-
#### What it does:
|
|
452
|
-
|
|
453
|
-
1. **Cleans cache** - Removes `node_modules`, `lib`, and clears yarn cache
|
|
454
|
-
2. **Installs dependencies** - Runs `yarn install` to ensure everything is up to date
|
|
455
|
-
3. **Checks CLI tools** - Verifies React Native CLI and Reusables CLI availability
|
|
456
|
-
4. **Builds the library** - Runs `yarn prepare` (bob build) - *Note: TypeScript typecheck is skipped due to className issues*
|
|
457
|
-
5. **Verifies build outputs** - Ensures type declarations, source files, and module outputs are correctly generated
|
|
458
|
-
6. **Increments version** - Interactive prompts for patch/minor/major/custom version increments
|
|
459
|
-
7. **Git operations** - Commits changes with proper message and pushes to remote
|
|
460
|
-
8. **Publishes to npm** - Publishes the package with confirmation prompt
|
|
461
|
-
|
|
462
|
-
#### Usage:
|
|
463
|
-
|
|
464
|
-
```sh
|
|
465
|
-
# Run directly
|
|
466
|
-
./scripts/publish.sh
|
|
467
|
-
|
|
468
|
-
# Or via yarn
|
|
469
|
-
yarn publish-package
|
|
470
|
-
```
|
|
471
|
-
|
|
472
|
-
#### Prerequisites:
|
|
473
|
-
|
|
474
|
-
- Node.js and yarn installed
|
|
475
|
-
- Git configured with credentials
|
|
476
|
-
- Logged in to npm (`npm login`)
|
|
477
|
-
- Publish permissions for the `@campxdev` scope
|
|
478
|
-
|
|
479
|
-
#### Error Handling:
|
|
480
|
-
|
|
481
|
-
The script provides detailed error messages and resolution steps for common failures:
|
|
482
|
-
|
|
483
|
-
- **Cache/Install Issues** - Guides on cleaning and reinstalling dependencies
|
|
484
|
-
- **CLI Missing** - Instructions to install required CLI tools
|
|
485
|
-
- **Build Failures** - Steps to debug bob build issues
|
|
486
|
-
- **Git Issues** - Help with credentials, permissions, and branch management
|
|
487
|
-
- **NPM Issues** - Authentication and publish permission troubleshooting
|
|
488
|
-
|
|
489
|
-
#### Important Notes:
|
|
490
|
-
|
|
491
|
-
- TypeScript typecheck is intentionally skipped due to known className issues
|
|
492
|
-
- Manual confirmation is required before publishing to prevent accidents
|
|
493
|
-
- Commits are made with the configured git user (should be satya@campx.in)
|
|
494
|
-
- The script pushes to your current branch - ensure you're on the correct branch
|
|
495
|
-
|
|
496
|
-
For detailed troubleshooting, run the script and follow the error resolution steps provided.
|
|
497
|
-
|
|
498
466
|
## License
|
|
499
467
|
|
|
500
468
|
MIT © [CAMPX](https://github.com/campx-org)
|
package/package.json
CHANGED