@wireservers-ui/react-natives 1.0.1 → 2.0.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/CHANGELOG.md +58 -0
- package/README.md +401 -99
- package/bin/cli.js +376 -376
- package/package.json +6 -2
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
All notable changes to `@wireservers-ui/react-natives` are documented here.
|
|
4
|
+
|
|
5
|
+
Format: [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
|
|
6
|
+
Versioning: [Semantic Versioning](https://semver.org/)
|
|
7
|
+
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
## [2.0.0] - 2026-03-15
|
|
11
|
+
|
|
12
|
+
### Added
|
|
13
|
+
- `.gitattributes` enforcing LF line endings for all source, script, and config files — prevents CRLF from breaking `npx` on Unix/macOS/Linux on Windows-developed repos
|
|
14
|
+
- `engines` field in `package.json` declaring Node.js `>=18.0.0` requirement
|
|
15
|
+
- Full `global.css` theme file in README manual setup (Step C) with complete light (`:root`) and dark (`.dark`) token sets for all color groups: `primary`, `secondary`, `tertiary`, `error`, `success`, `warning`, `info`, `typography`, `outline`, `background`, `indicator`
|
|
16
|
+
- Collapsible light/dark theme reference blocks in README
|
|
17
|
+
|
|
18
|
+
### Fixed
|
|
19
|
+
- **[Breaking on Unix/macOS/Linux]** `bin/cli.js` had CRLF line endings causing `env: 'bash\r': No such file or directory` and `node\r: No such file or directory` when consumers ran `npx @wireservers-ui/react-natives init` on non-Windows systems
|
|
20
|
+
|
|
21
|
+
### Changed
|
|
22
|
+
- README restructured: easy setup is now the primary path; manual setup is a detailed step-by-step with full file examples
|
|
23
|
+
- README `## Theming` section now points to the full `global.css` in manual Step C instead of repeating an abbreviated snippet
|
|
24
|
+
- README version badge updated to `v2.0.0`
|
|
25
|
+
|
|
26
|
+
---
|
|
27
|
+
|
|
28
|
+
## [1.0.1] - 2026-03-14
|
|
29
|
+
|
|
30
|
+
### Added
|
|
31
|
+
- `bin/cli.js` — CLI init command runnable via `npx @wireservers-ui/react-natives init`
|
|
32
|
+
- Automatic peer-dependency installation by `init` (`nativewind`, `tailwindcss`, `tailwind-variants`, `tailwind-merge`, `react-native-reanimated`, `react-native-worklets`, `react-native-svg`, `react-dom`, `react-native-web`)
|
|
33
|
+
- `react-dom` version is matched exactly to the consumer's installed `react` version to prevent React/DOM mismatch on web
|
|
34
|
+
- pnpm compatibility: `init` creates/updates `.npmrc` with `node-linker=hoisted` when pnpm is detected and triggers a reinstall pass
|
|
35
|
+
- Tailwind content path for library source added to generated `tailwind.config.js` (`node_modules/@wireservers-ui/react-natives/src/**`)
|
|
36
|
+
- Non-destructive init: all file creation follows skip-if-exists semantics — no consumer file is ever overwritten
|
|
37
|
+
|
|
38
|
+
### Fixed
|
|
39
|
+
- `nativewind/babel` placed in `presets` (not `plugins`) in generated `babel.config.js` — was causing Babel runtime errors and bundle failures
|
|
40
|
+
- Missing `react-native-worklets` dependency causing Metro bundler to fail
|
|
41
|
+
- Missing `react-native-svg` causing SVG component resolution failures
|
|
42
|
+
- Missing `tailwind-merge` causing variant merge errors at runtime
|
|
43
|
+
|
|
44
|
+
### Changed
|
|
45
|
+
- Tailwind class generation now works correctly for library components (colors, slider, etc.) because consumer Tailwind config scans library source
|
|
46
|
+
|
|
47
|
+
---
|
|
48
|
+
|
|
49
|
+
## [1.0.0] - 2026-03-01
|
|
50
|
+
|
|
51
|
+
### Added
|
|
52
|
+
- Initial release of `@wireservers-ui/react-natives`
|
|
53
|
+
- 70+ React Native components: Accordion, ActionSheet, Alert, AlertDialog, Avatar, Badge, Button, Calendar, Card, Carousel, Checkbox, CircularProgress, ColorPicker, Collapsible, DatePicker, Drawer, Empty, Fab, FormControl, Heading, Icon, IconButton, Image, Input, Kbd, Link, List, Menu, Modal, NumberInput, Overlay, Pagination, PasswordInput, PinInput, Popover, Portal, Pressable, Progress, Radio, Rating, SearchInput, SegmentedControl, Select, Skeleton, Slider, Snackbar, Spinner, Stack, Stat, Stepper, Switch, Table, Tabs, Tag, TagsInput, Text, Textarea, Timeline, Toast, Toggle, ToggleGroup, Tooltip, VisuallyHidden
|
|
54
|
+
- NativeWind v4 + Tailwind CSS 3 styling with `tailwind-variants` for type-safe variant APIs
|
|
55
|
+
- CSS variable token system for light/dark theming
|
|
56
|
+
- `tailwind-preset.js` Tailwind preset for consumers
|
|
57
|
+
- TypeScript source ships directly (no build step)
|
|
58
|
+
- MIT license
|
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
**A comprehensive React Native component library built with NativeWind and Tailwind Variants.**
|
|
4
4
|
|
|
5
|
-
> **Note:** This project is in
|
|
5
|
+
> **Note:** This project is in active development (v2.0.0). We're building out components, documentation, and tooling. Contributions and feedback are welcome!
|
|
6
6
|
|
|
7
7
|
[](LICENSE)
|
|
8
8
|
[](https://www.npmjs.com/package/@wireservers-ui/react-natives)
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
|
|
14
14
|
React-Natives is a collection of 70+ production-ready, accessible React Native components. Every component is TypeScript-first, themeable via CSS variables, and styled with NativeWind (Tailwind CSS for React Native).
|
|
15
15
|
|
|
16
|
-
**Live Demo:** [reactnatives.
|
|
16
|
+
**Live Demo:** [www.reactnatives.dev](https://www.reactnatives.dev)
|
|
17
17
|
|
|
18
18
|
### Key Features
|
|
19
19
|
|
|
@@ -34,118 +34,438 @@ React-Natives is a collection of 70+ production-ready, accessible React Native c
|
|
|
34
34
|
|
|
35
35
|
---
|
|
36
36
|
|
|
37
|
-
##
|
|
37
|
+
## Setup
|
|
38
38
|
|
|
39
|
-
###
|
|
39
|
+
### 1. Easy Setup (Recommended)
|
|
40
40
|
|
|
41
|
-
Use this
|
|
41
|
+
Use this for the fastest first-time setup in a new Expo app.
|
|
42
42
|
|
|
43
43
|
```bash
|
|
44
44
|
npx create-expo-app@latest wsui-init --template blank-typescript
|
|
45
45
|
cd wsui-init
|
|
46
|
-
npm install @wireservers-ui/react-natives@
|
|
47
|
-
npx @wireservers-ui/react-natives@
|
|
46
|
+
npm install @wireservers-ui/react-natives@2.0.0
|
|
47
|
+
npx @wireservers-ui/react-natives@2.0.0 init
|
|
48
48
|
npx expo start --clear --web
|
|
49
49
|
```
|
|
50
50
|
|
|
51
|
-
|
|
51
|
+
What `init` does for you:
|
|
52
52
|
|
|
53
|
-
-
|
|
54
|
-
-
|
|
55
|
-
-
|
|
56
|
-
- Never
|
|
57
|
-
- Generate a working volume-slider demo in `App.tsx` only if `App.tsx` does not already exist
|
|
53
|
+
- Installs required runtime dependencies
|
|
54
|
+
- Matches `react-dom` exactly to your installed `react` version
|
|
55
|
+
- Creates setup files only if missing
|
|
56
|
+
- Never overwrites existing files in your project
|
|
58
57
|
|
|
59
|
-
###
|
|
58
|
+
### 2. Manual Setup (Detailed)
|
|
60
59
|
|
|
61
|
-
|
|
60
|
+
Use this path if you want full control over every file.
|
|
61
|
+
|
|
62
|
+
#### Step A: Install packages
|
|
62
63
|
|
|
63
64
|
```bash
|
|
64
|
-
npm install @wireservers-ui/react-natives
|
|
65
|
+
npm install @wireservers-ui/react-natives@2.0.0
|
|
65
66
|
npm install nativewind tailwindcss tailwind-variants tailwind-merge react-native-reanimated react-native-worklets react-native-svg react-native-web react-dom
|
|
66
67
|
```
|
|
67
68
|
|
|
68
|
-
|
|
69
|
+
Important:
|
|
69
70
|
|
|
70
|
-
|
|
71
|
+
- Ensure `react-dom` matches your `react` version exactly.
|
|
72
|
+
- Example: if `react` is `19.2.0`, use `react-dom@19.2.0`.
|
|
73
|
+
|
|
74
|
+
#### Step B: Create or update `tailwind.config.js`
|
|
75
|
+
|
|
76
|
+
```js
|
|
77
|
+
/** @type {import('tailwindcss').Config} */
|
|
78
|
+
module.exports = {
|
|
79
|
+
content: [
|
|
80
|
+
"./App.{js,jsx,ts,tsx}",
|
|
81
|
+
"./app/**/*.{js,jsx,ts,tsx}",
|
|
82
|
+
"./components/**/*.{js,jsx,ts,tsx}",
|
|
83
|
+
"./node_modules/@wireservers-ui/react-natives/src/**/*.{js,jsx,ts,tsx}",
|
|
84
|
+
],
|
|
85
|
+
presets: [require("@wireservers-ui/react-natives/tailwind-preset")],
|
|
86
|
+
};
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
#### Step C: Create `global.css`
|
|
90
|
+
|
|
91
|
+
GitHub README does not support real tabs, so the sections below use collapsible blocks (tab-like) for Light and Dark theme tokens.
|
|
92
|
+
|
|
93
|
+
Use this full file content in `global.css`:
|
|
94
|
+
|
|
95
|
+
```css
|
|
96
|
+
@tailwind base;
|
|
97
|
+
@tailwind components;
|
|
98
|
+
@tailwind utilities;
|
|
99
|
+
|
|
100
|
+
:root {
|
|
101
|
+
--color-primary-0: 255 255 255;
|
|
102
|
+
--color-primary-50: 238 237 253;
|
|
103
|
+
--color-primary-100: 214 211 249;
|
|
104
|
+
--color-primary-200: 172 166 242;
|
|
105
|
+
--color-primary-300: 132 122 235;
|
|
106
|
+
--color-primary-400: 105 95 233;
|
|
107
|
+
--color-primary-500: 80 70 230;
|
|
108
|
+
--color-primary-600: 63 55 198;
|
|
109
|
+
--color-primary-700: 47 41 163;
|
|
110
|
+
--color-primary-800: 33 29 128;
|
|
111
|
+
--color-primary-900: 22 20 96;
|
|
112
|
+
--color-primary-950: 13 11 64;
|
|
113
|
+
|
|
114
|
+
--color-secondary-0: 255 255 255;
|
|
115
|
+
--color-secondary-50: 241 241 243;
|
|
116
|
+
--color-secondary-100: 220 220 224;
|
|
117
|
+
--color-secondary-200: 186 186 194;
|
|
118
|
+
--color-secondary-300: 152 152 163;
|
|
119
|
+
--color-secondary-400: 121 121 137;
|
|
120
|
+
--color-secondary-500: 92 92 112;
|
|
121
|
+
--color-secondary-600: 72 72 92;
|
|
122
|
+
--color-secondary-700: 54 54 72;
|
|
123
|
+
--color-secondary-800: 38 38 54;
|
|
124
|
+
--color-secondary-900: 24 24 38;
|
|
125
|
+
--color-secondary-950: 14 14 24;
|
|
126
|
+
|
|
127
|
+
--color-tertiary-50: 250 245 255;
|
|
128
|
+
--color-tertiary-100: 243 232 255;
|
|
129
|
+
--color-tertiary-200: 222 200 252;
|
|
130
|
+
--color-tertiary-300: 196 160 246;
|
|
131
|
+
--color-tertiary-400: 168 120 238;
|
|
132
|
+
--color-tertiary-500: 140 80 228;
|
|
133
|
+
--color-tertiary-600: 114 58 200;
|
|
134
|
+
--color-tertiary-700: 90 40 170;
|
|
135
|
+
--color-tertiary-800: 68 28 138;
|
|
136
|
+
--color-tertiary-900: 48 18 106;
|
|
137
|
+
--color-tertiary-950: 30 8 72;
|
|
138
|
+
|
|
139
|
+
--color-error-0: 255 255 255;
|
|
140
|
+
--color-error-50: 254 242 242;
|
|
141
|
+
--color-error-100: 254 226 226;
|
|
142
|
+
--color-error-200: 252 165 165;
|
|
143
|
+
--color-error-300: 248 113 113;
|
|
144
|
+
--color-error-400: 240 82 82;
|
|
145
|
+
--color-error-500: 230 53 53;
|
|
146
|
+
--color-error-600: 204 37 37;
|
|
147
|
+
--color-error-700: 178 24 24;
|
|
148
|
+
--color-error-800: 150 16 16;
|
|
149
|
+
--color-error-900: 122 10 10;
|
|
150
|
+
--color-error-950: 80 5 5;
|
|
151
|
+
|
|
152
|
+
--color-success-0: 255 255 255;
|
|
153
|
+
--color-success-50: 237 252 241;
|
|
154
|
+
--color-success-100: 210 245 221;
|
|
155
|
+
--color-success-200: 147 226 172;
|
|
156
|
+
--color-success-300: 96 207 128;
|
|
157
|
+
--color-success-400: 56 189 92;
|
|
158
|
+
--color-success-500: 34 168 66;
|
|
159
|
+
--color-success-600: 24 140 52;
|
|
160
|
+
--color-success-700: 18 112 40;
|
|
161
|
+
--color-success-800: 14 88 32;
|
|
162
|
+
--color-success-900: 10 64 22;
|
|
163
|
+
--color-success-950: 5 40 12;
|
|
164
|
+
|
|
165
|
+
--color-warning-0: 255 255 255;
|
|
166
|
+
--color-warning-50: 255 249 235;
|
|
167
|
+
--color-warning-100: 255 240 198;
|
|
168
|
+
--color-warning-200: 252 217 119;
|
|
169
|
+
--color-warning-300: 247 195 56;
|
|
170
|
+
--color-warning-400: 240 176 14;
|
|
171
|
+
--color-warning-500: 220 155 6;
|
|
172
|
+
--color-warning-600: 182 123 4;
|
|
173
|
+
--color-warning-700: 145 96 4;
|
|
174
|
+
--color-warning-800: 112 72 5;
|
|
175
|
+
--color-warning-900: 82 52 6;
|
|
176
|
+
--color-warning-950: 48 30 4;
|
|
177
|
+
|
|
178
|
+
--color-info-0: 255 255 255;
|
|
179
|
+
--color-info-50: 240 248 255;
|
|
180
|
+
--color-info-100: 224 240 253;
|
|
181
|
+
--color-info-200: 168 213 248;
|
|
182
|
+
--color-info-300: 110 184 240;
|
|
183
|
+
--color-info-400: 66 158 232;
|
|
184
|
+
--color-info-500: 34 134 220;
|
|
185
|
+
--color-info-600: 22 110 190;
|
|
186
|
+
--color-info-700: 14 88 158;
|
|
187
|
+
--color-info-800: 10 68 126;
|
|
188
|
+
--color-info-900: 6 50 96;
|
|
189
|
+
--color-info-950: 2 32 64;
|
|
190
|
+
|
|
191
|
+
--color-typography-0: 255 255 255;
|
|
192
|
+
--color-typography-50: 245 245 245;
|
|
193
|
+
--color-typography-100: 229 229 229;
|
|
194
|
+
--color-typography-200: 212 212 212;
|
|
195
|
+
--color-typography-300: 163 163 163;
|
|
196
|
+
--color-typography-400: 140 140 140;
|
|
197
|
+
--color-typography-500: 115 115 115;
|
|
198
|
+
--color-typography-600: 82 82 82;
|
|
199
|
+
--color-typography-700: 64 64 64;
|
|
200
|
+
--color-typography-800: 38 38 38;
|
|
201
|
+
--color-typography-900: 23 23 23;
|
|
202
|
+
--color-typography-950: 10 10 10;
|
|
203
|
+
|
|
204
|
+
--color-outline-0: 255 255 255;
|
|
205
|
+
--color-outline-50: 245 245 245;
|
|
206
|
+
--color-outline-100: 229 229 229;
|
|
207
|
+
--color-outline-200: 212 212 212;
|
|
208
|
+
--color-outline-300: 196 196 196;
|
|
209
|
+
--color-outline-400: 163 163 163;
|
|
210
|
+
--color-outline-500: 140 140 140;
|
|
211
|
+
--color-outline-600: 115 115 115;
|
|
212
|
+
--color-outline-700: 82 82 82;
|
|
213
|
+
--color-outline-800: 51 51 51;
|
|
214
|
+
--color-outline-900: 33 33 33;
|
|
215
|
+
--color-outline-950: 18 18 18;
|
|
216
|
+
|
|
217
|
+
--color-background-0: 255 255 255;
|
|
218
|
+
--color-background-50: 249 249 249;
|
|
219
|
+
--color-background-100: 242 242 242;
|
|
220
|
+
--color-background-200: 228 228 228;
|
|
221
|
+
--color-background-300: 212 212 212;
|
|
222
|
+
--color-background-400: 189 189 189;
|
|
223
|
+
--color-background-500: 163 163 163;
|
|
224
|
+
--color-background-600: 115 115 115;
|
|
225
|
+
--color-background-700: 82 82 82;
|
|
226
|
+
--color-background-800: 51 51 51;
|
|
227
|
+
--color-background-900: 33 33 33;
|
|
228
|
+
--color-background-950: 18 18 18;
|
|
229
|
+
--color-background-error: 254 226 226;
|
|
230
|
+
--color-background-warning: 255 243 224;
|
|
231
|
+
--color-background-muted: 245 245 245;
|
|
232
|
+
--color-background-success: 228 247 235;
|
|
233
|
+
--color-background-info: 224 240 253;
|
|
234
|
+
|
|
235
|
+
--color-indicator-primary: 80 70 230;
|
|
236
|
+
--color-indicator-info: 34 134 220;
|
|
237
|
+
--color-indicator-error: 230 53 53;
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
.dark {
|
|
241
|
+
--color-primary-0: 13 11 64;
|
|
242
|
+
--color-primary-50: 22 20 96;
|
|
243
|
+
--color-primary-100: 33 29 128;
|
|
244
|
+
--color-primary-200: 47 41 163;
|
|
245
|
+
--color-primary-300: 63 55 198;
|
|
246
|
+
--color-primary-400: 80 70 230;
|
|
247
|
+
--color-primary-500: 105 95 233;
|
|
248
|
+
--color-primary-600: 132 122 235;
|
|
249
|
+
--color-primary-700: 172 166 242;
|
|
250
|
+
--color-primary-800: 214 211 249;
|
|
251
|
+
--color-primary-900: 238 237 253;
|
|
252
|
+
--color-primary-950: 255 255 255;
|
|
253
|
+
|
|
254
|
+
--color-secondary-0: 14 14 24;
|
|
255
|
+
--color-secondary-50: 24 24 38;
|
|
256
|
+
--color-secondary-100: 38 38 54;
|
|
257
|
+
--color-secondary-200: 54 54 72;
|
|
258
|
+
--color-secondary-300: 72 72 92;
|
|
259
|
+
--color-secondary-400: 92 92 112;
|
|
260
|
+
--color-secondary-500: 121 121 137;
|
|
261
|
+
--color-secondary-600: 152 152 163;
|
|
262
|
+
--color-secondary-700: 186 186 194;
|
|
263
|
+
--color-secondary-800: 220 220 224;
|
|
264
|
+
--color-secondary-900: 241 241 243;
|
|
265
|
+
--color-secondary-950: 255 255 255;
|
|
266
|
+
|
|
267
|
+
--color-tertiary-50: 30 8 72;
|
|
268
|
+
--color-tertiary-100: 48 18 106;
|
|
269
|
+
--color-tertiary-200: 68 28 138;
|
|
270
|
+
--color-tertiary-300: 90 40 170;
|
|
271
|
+
--color-tertiary-400: 114 58 200;
|
|
272
|
+
--color-tertiary-500: 140 80 228;
|
|
273
|
+
--color-tertiary-600: 168 120 238;
|
|
274
|
+
--color-tertiary-700: 196 160 246;
|
|
275
|
+
--color-tertiary-800: 222 200 252;
|
|
276
|
+
--color-tertiary-900: 243 232 255;
|
|
277
|
+
--color-tertiary-950: 250 245 255;
|
|
278
|
+
|
|
279
|
+
--color-error-0: 80 5 5;
|
|
280
|
+
--color-error-50: 122 10 10;
|
|
281
|
+
--color-error-100: 150 16 16;
|
|
282
|
+
--color-error-200: 178 24 24;
|
|
283
|
+
--color-error-300: 204 37 37;
|
|
284
|
+
--color-error-400: 230 53 53;
|
|
285
|
+
--color-error-500: 240 82 82;
|
|
286
|
+
--color-error-600: 248 113 113;
|
|
287
|
+
--color-error-700: 252 165 165;
|
|
288
|
+
--color-error-800: 254 226 226;
|
|
289
|
+
--color-error-900: 254 242 242;
|
|
290
|
+
--color-error-950: 255 255 255;
|
|
291
|
+
|
|
292
|
+
--color-success-0: 5 40 12;
|
|
293
|
+
--color-success-50: 10 64 22;
|
|
294
|
+
--color-success-100: 14 88 32;
|
|
295
|
+
--color-success-200: 18 112 40;
|
|
296
|
+
--color-success-300: 24 140 52;
|
|
297
|
+
--color-success-400: 34 168 66;
|
|
298
|
+
--color-success-500: 56 189 92;
|
|
299
|
+
--color-success-600: 96 207 128;
|
|
300
|
+
--color-success-700: 147 226 172;
|
|
301
|
+
--color-success-800: 210 245 221;
|
|
302
|
+
--color-success-900: 237 252 241;
|
|
303
|
+
--color-success-950: 255 255 255;
|
|
304
|
+
|
|
305
|
+
--color-warning-0: 48 30 4;
|
|
306
|
+
--color-warning-50: 82 52 6;
|
|
307
|
+
--color-warning-100: 112 72 5;
|
|
308
|
+
--color-warning-200: 145 96 4;
|
|
309
|
+
--color-warning-300: 182 123 4;
|
|
310
|
+
--color-warning-400: 220 155 6;
|
|
311
|
+
--color-warning-500: 240 176 14;
|
|
312
|
+
--color-warning-600: 247 195 56;
|
|
313
|
+
--color-warning-700: 252 217 119;
|
|
314
|
+
--color-warning-800: 255 240 198;
|
|
315
|
+
--color-warning-900: 255 249 235;
|
|
316
|
+
--color-warning-950: 255 255 255;
|
|
317
|
+
|
|
318
|
+
--color-info-0: 2 32 64;
|
|
319
|
+
--color-info-50: 6 50 96;
|
|
320
|
+
--color-info-100: 10 68 126;
|
|
321
|
+
--color-info-200: 14 88 158;
|
|
322
|
+
--color-info-300: 22 110 190;
|
|
323
|
+
--color-info-400: 34 134 220;
|
|
324
|
+
--color-info-500: 66 158 232;
|
|
325
|
+
--color-info-600: 110 184 240;
|
|
326
|
+
--color-info-700: 168 213 248;
|
|
327
|
+
--color-info-800: 224 240 253;
|
|
328
|
+
--color-info-900: 240 248 255;
|
|
329
|
+
--color-info-950: 255 255 255;
|
|
330
|
+
|
|
331
|
+
--color-typography-0: 10 10 10;
|
|
332
|
+
--color-typography-50: 23 23 23;
|
|
333
|
+
--color-typography-100: 38 38 38;
|
|
334
|
+
--color-typography-200: 64 64 64;
|
|
335
|
+
--color-typography-300: 82 82 82;
|
|
336
|
+
--color-typography-400: 115 115 115;
|
|
337
|
+
--color-typography-500: 140 140 140;
|
|
338
|
+
--color-typography-600: 163 163 163;
|
|
339
|
+
--color-typography-700: 212 212 212;
|
|
340
|
+
--color-typography-800: 229 229 229;
|
|
341
|
+
--color-typography-900: 245 245 245;
|
|
342
|
+
--color-typography-950: 255 255 255;
|
|
343
|
+
|
|
344
|
+
--color-outline-0: 18 18 18;
|
|
345
|
+
--color-outline-50: 33 33 33;
|
|
346
|
+
--color-outline-100: 51 51 51;
|
|
347
|
+
--color-outline-200: 82 82 82;
|
|
348
|
+
--color-outline-300: 115 115 115;
|
|
349
|
+
--color-outline-400: 140 140 140;
|
|
350
|
+
--color-outline-500: 163 163 163;
|
|
351
|
+
--color-outline-600: 196 196 196;
|
|
352
|
+
--color-outline-700: 212 212 212;
|
|
353
|
+
--color-outline-800: 229 229 229;
|
|
354
|
+
--color-outline-900: 245 245 245;
|
|
355
|
+
--color-outline-950: 255 255 255;
|
|
356
|
+
|
|
357
|
+
--color-background-0: 24 23 25;
|
|
358
|
+
--color-background-50: 38 38 40;
|
|
359
|
+
--color-background-100: 51 51 53;
|
|
360
|
+
--color-background-200: 66 66 68;
|
|
361
|
+
--color-background-300: 82 82 85;
|
|
362
|
+
--color-background-400: 104 104 108;
|
|
363
|
+
--color-background-500: 130 130 135;
|
|
364
|
+
--color-background-600: 163 163 169;
|
|
365
|
+
--color-background-700: 196 196 201;
|
|
366
|
+
--color-background-800: 221 221 226;
|
|
367
|
+
--color-background-900: 240 240 245;
|
|
368
|
+
--color-background-950: 255 255 255;
|
|
369
|
+
--color-background-error: 80 5 5;
|
|
370
|
+
--color-background-warning: 48 30 4;
|
|
371
|
+
--color-background-muted: 38 38 40;
|
|
372
|
+
--color-background-success: 5 40 12;
|
|
373
|
+
--color-background-info: 2 32 64;
|
|
374
|
+
|
|
375
|
+
--color-indicator-primary: 132 122 235;
|
|
376
|
+
--color-indicator-info: 66 158 232;
|
|
377
|
+
--color-indicator-error: 240 82 82;
|
|
378
|
+
}
|
|
379
|
+
```
|
|
380
|
+
|
|
381
|
+
Optional tab-like reference blocks (same values split by mode):
|
|
382
|
+
|
|
383
|
+
<details>
|
|
384
|
+
<summary>Light Theme Tokens (:root)</summary>
|
|
385
|
+
|
|
386
|
+
```css
|
|
387
|
+
/* Use the :root block from the full file above */
|
|
388
|
+
```
|
|
389
|
+
|
|
390
|
+
</details>
|
|
391
|
+
|
|
392
|
+
<details>
|
|
393
|
+
<summary>Dark Theme Tokens (.dark)</summary>
|
|
394
|
+
|
|
395
|
+
```css
|
|
396
|
+
/* Use the .dark block from the full file above */
|
|
397
|
+
```
|
|
71
398
|
|
|
72
|
-
|
|
399
|
+
</details>
|
|
73
400
|
|
|
74
|
-
|
|
401
|
+
#### Step D: Create or update `babel.config.js`
|
|
75
402
|
|
|
76
|
-
|
|
403
|
+
```js
|
|
404
|
+
module.exports = function (api) {
|
|
405
|
+
api.cache(true);
|
|
406
|
+
return {
|
|
407
|
+
presets: [
|
|
408
|
+
["babel-preset-expo", { jsxImportSource: "nativewind" }],
|
|
409
|
+
"nativewind/babel",
|
|
410
|
+
],
|
|
411
|
+
};
|
|
412
|
+
};
|
|
413
|
+
```
|
|
77
414
|
|
|
78
|
-
|
|
79
|
-
Added `bin/cli.js` and package `bin` mapping so consumers can run `npx @wireservers-ui/react-natives init`.
|
|
80
|
-
- How:
|
|
81
|
-
The CLI writes Tailwind, Babel, Metro, and theme files and installs missing runtime dependencies.
|
|
82
|
-
- Why:
|
|
83
|
-
Consumer setup was too error-prone and required manual multi-file configuration.
|
|
415
|
+
#### Step E: Create or update `metro.config.js`
|
|
84
416
|
|
|
85
|
-
|
|
417
|
+
```js
|
|
418
|
+
const { getDefaultConfig } = require("expo/metro-config");
|
|
419
|
+
const { withNativeWind } = require("nativewind/metro");
|
|
86
420
|
|
|
87
|
-
|
|
88
|
-
`nativewind/babel` is now configured in `presets` (not `plugins`).
|
|
89
|
-
- How:
|
|
90
|
-
The generated `babel.config.js` uses:
|
|
91
|
-
`presets: [["babel-preset-expo", { jsxImportSource: "nativewind" }], "nativewind/babel"]`.
|
|
92
|
-
- Why:
|
|
93
|
-
Wrong placement caused Babel runtime errors and failed bundling.
|
|
421
|
+
const config = getDefaultConfig(__dirname);
|
|
94
422
|
|
|
95
|
-
|
|
423
|
+
module.exports = withNativeWind(config, { input: "./global.css" });
|
|
424
|
+
```
|
|
96
425
|
|
|
97
|
-
|
|
98
|
-
Init installs `react-native-worklets`, `react-native-svg`, `tailwind-merge`, and web deps.
|
|
99
|
-
- How:
|
|
100
|
-
Dependency install list in the CLI now includes all required packages for both native and web usage.
|
|
101
|
-
- Why:
|
|
102
|
-
Missing deps caused runtime/bundling failures (`react-native-worklets/plugin`, SVG resolution, variant merge errors).
|
|
426
|
+
#### Step F: Add NativeWind types file `nativewind-env.d.ts`
|
|
103
427
|
|
|
104
|
-
|
|
428
|
+
```ts
|
|
429
|
+
/// <reference types="nativewind/types" />
|
|
430
|
+
```
|
|
105
431
|
|
|
106
|
-
|
|
107
|
-
Init now reads the installed `react` version from consumer `node_modules` and installs `react-dom@<exact-react-version>`.
|
|
108
|
-
- How:
|
|
109
|
-
CLI helper resolves `node_modules/react/package.json` and builds a matching `react-dom` install target.
|
|
110
|
-
- Why:
|
|
111
|
-
React web requires exact version parity; mismatch causes immediate runtime failure.
|
|
432
|
+
#### Step G: Import `global.css` in your app entry
|
|
112
433
|
|
|
113
|
-
|
|
434
|
+
Example `App.tsx`:
|
|
114
435
|
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
436
|
+
```tsx
|
|
437
|
+
import "./global.css";
|
|
438
|
+
import React from "react";
|
|
439
|
+
import { View, Text } from "react-native";
|
|
440
|
+
|
|
441
|
+
export default function App() {
|
|
442
|
+
return (
|
|
443
|
+
<View className="flex-1 items-center justify-center bg-background-0">
|
|
444
|
+
<Text className="text-typography-900">React-Natives ready</Text>
|
|
445
|
+
</View>
|
|
446
|
+
);
|
|
447
|
+
}
|
|
448
|
+
```
|
|
122
449
|
|
|
123
|
-
|
|
450
|
+
#### Step H: Optional pnpm compatibility (`.npmrc`)
|
|
124
451
|
|
|
125
|
-
|
|
126
|
-
Init creates/updates `.npmrc` with `node-linker=hoisted` when pnpm is detected, then reinstalls before package additions.
|
|
127
|
-
- How:
|
|
128
|
-
CLI detects lockfile, applies hoisted linker, and runs a reinstall pass.
|
|
129
|
-
- Why:
|
|
130
|
-
Default pnpm linking can break Metro module resolution in Expo projects.
|
|
452
|
+
If you use pnpm with Expo/Metro, add:
|
|
131
453
|
|
|
132
|
-
|
|
454
|
+
```ini
|
|
455
|
+
node-linker=hoisted
|
|
456
|
+
```
|
|
133
457
|
|
|
134
|
-
|
|
135
|
-
Init no longer overwrites existing project files.
|
|
136
|
-
- How:
|
|
137
|
-
All file writes now follow create-if-missing semantics and print a skip message for existing files.
|
|
138
|
-
- Why:
|
|
139
|
-
Consumers must keep control of their app and config files; setup tooling should be safe by default.
|
|
458
|
+
Then run:
|
|
140
459
|
|
|
141
|
-
|
|
460
|
+
```bash
|
|
461
|
+
pnpm install
|
|
462
|
+
```
|
|
142
463
|
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
Each release isolated and validated one class of setup problems, reducing regression risk.
|
|
464
|
+
#### Step I: Start the app
|
|
465
|
+
|
|
466
|
+
```bash
|
|
467
|
+
npx expo start --clear --web
|
|
468
|
+
```
|
|
149
469
|
|
|
150
470
|
---
|
|
151
471
|
|
|
@@ -206,29 +526,11 @@ Toggle, ToggleGroup, Collapsible, Calendar
|
|
|
206
526
|
|
|
207
527
|
## Theming
|
|
208
528
|
|
|
209
|
-
Components use CSS variables for theming.
|
|
529
|
+
Components use CSS variables for theming.
|
|
210
530
|
|
|
211
|
-
|
|
212
|
-
@tailwind base;
|
|
213
|
-
@tailwind components;
|
|
214
|
-
@tailwind utilities;
|
|
215
|
-
|
|
216
|
-
:root {
|
|
217
|
-
--color-primary-500: 80 70 230;
|
|
218
|
-
--color-background-0: 255 255 255;
|
|
219
|
-
--color-typography-900: 23 23 23;
|
|
220
|
-
/* ... */
|
|
221
|
-
}
|
|
222
|
-
|
|
223
|
-
.dark {
|
|
224
|
-
--color-primary-500: 120 110 255;
|
|
225
|
-
--color-background-0: 24 23 25;
|
|
226
|
-
--color-typography-900: 245 245 245;
|
|
227
|
-
/* ... */
|
|
228
|
-
}
|
|
229
|
-
```
|
|
531
|
+
For the complete theming file (full `:root` + `.dark` token sets), use the manual setup instructions in **Step C: Create `global.css`** above.
|
|
230
532
|
|
|
231
|
-
|
|
533
|
+
Token groups include `primary`, `secondary`, `tertiary`, `error`, `success`, `warning`, `info`, `typography`, `outline`, `background`, and `indicator`.
|
|
232
534
|
|
|
233
535
|
---
|
|
234
536
|
|