@sudobility/components-rn 1.0.23 → 1.0.25

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 (6) hide show
  1. package/README.md +54 -223
  2. package/dist/index.cjs.js +458 -2698
  3. package/dist/index.cjs.js.map +1 -1
  4. package/dist/index.esm.js +458 -2698
  5. package/dist/index.esm.js.map +1 -1
  6. package/package.json +7 -9
package/README.md CHANGED
@@ -1,252 +1,83 @@
1
1
  # @sudobility/components-rn
2
2
 
3
- React Native component library for Sudobility, ported from
4
- [@sudobility/components](../mail_box_components).
5
-
6
- ## Structure
7
-
8
- This project mirrors the structure of `@sudobility/components`:
9
-
10
- - **Root** (`/`) - Main package `@sudobility/components-rn`
11
- - **`/packages/`** - Specialized component packages
12
-
13
- ```text
14
- mail_box_components_rn/
15
- ├── src/ # @sudobility/components-rn source
16
- │ ├── ui/ # Core UI components (22 components)
17
- │ │ ├── Alert/
18
- │ │ ├── Avatar/
19
- │ │ ├── Badge/
20
- │ │ ├── Box/
21
- │ │ ├── Button/
22
- │ │ ├── Card/
23
- │ │ ├── Checkbox/
24
- │ │ ├── Divider/
25
- │ │ ├── Flex/
26
- │ │ ├── HelperText/
27
- │ │ ├── Input/
28
- │ │ ├── Label/
29
- │ │ ├── Modal/
30
- │ │ ├── Progress/
31
- │ │ ├── SearchInput/
32
- │ │ ├── Select/
33
- │ │ ├── Skeleton/
34
- │ │ ├── Spinner/
35
- │ │ ├── Stack/
36
- │ │ ├── Switch/
37
- │ │ ├── Tabs/
38
- │ │ └── TextArea/
39
- │ ├── lib/ # Utilities (cn function)
40
- │ └── index.ts
41
- ├── packages/ # Specialized packages
42
- │ ├── devops-components-rn/ # @sudobility/devops-components-rn
43
- │ ├── email-components-rn/ # @sudobility/email-components-rn
44
- │ ├── web3-components-rn/ # @sudobility/web3-components-rn
45
- │ └── marketing-components-rn/ # @sudobility/marketing-components-rn
46
- ├── package.json # Main package definition + workspaces
47
- ├── vite.config.ts
48
- ├── tsconfig.json
49
- └── tailwind.config.js # NativeWind config
50
- ```
51
-
52
- ## Tech Stack
53
-
54
- - **React Native** (Bare workflow)
55
- - **NativeWind v4** (Tailwind CSS for React Native)
56
- - **React Navigation** (Navigation)
57
- - **TypeScript** (Type safety)
58
- - **npm workspaces** (Monorepo management)
3
+ React Native UI component library providing 90+ components ported from `@sudobility/components`. Built with TypeScript, Vite, and NativeWind v4. Design tokens and theming from `@sudobility/design`. Includes 10 domain-specific sub-packages under `packages/`.
59
4
 
60
- ## Getting Started
61
-
62
- ### Installation
5
+ ## Installation
63
6
 
64
7
  ```bash
65
- cd mail_box_components_rn
66
- npm install
67
- npm run build
8
+ bun add @sudobility/components-rn @sudobility/design
68
9
  ```
69
10
 
70
- ### Using in your app
71
-
72
- ```bash
73
- npm install @sudobility/components-rn @sudobility/design
74
- ```
11
+ Peer dependencies: `react`, `react-native` (>=0.72), `nativewind` (>=4), `react-native-gesture-handler`, `react-native-reanimated`, `react-native-safe-area-context`, `react-native-svg`, `class-variance-authority`, `clsx`.
75
12
 
76
- ### Basic Usage
13
+ ## Usage
77
14
 
78
15
  ```tsx
79
16
  import {
80
- Button, Card, Input, Spinner, Alert,
81
- Box, Flex, Stack, VStack, HStack,
82
- Label, TextArea, Checkbox, Switch, HelperText,
83
- Badge, Divider
17
+ Button, Card, CardHeader, CardContent, Input, Alert,
18
+ Box, Flex, Stack, Tabs, TabsList, TabsTrigger, TabsContent,
19
+ Badge, Avatar, Spinner, Modal, Select, Switch,
20
+ variants, textVariants, designTokens,
84
21
  } from '@sudobility/components-rn';
85
22
 
86
23
  export function MyScreen() {
87
- const [email, setEmail] = useState('');
88
- const [message, setMessage] = useState('');
89
- const [subscribe, setSubscribe] = useState(false);
90
-
91
24
  return (
92
- <Card variant="elevated" padding="md">
93
- <VStack spacing="md">
94
- <Box>
95
- <Label>Email Address</Label>
96
- <Input placeholder="Enter your email" onChangeText={setEmail} />
97
- <HelperText>We'll never share your email</HelperText>
98
- </Box>
99
-
100
- <Box>
101
- <Label>Message</Label>
102
- <TextArea
103
- value={message}
104
- onChangeText={setMessage}
105
- placeholder="Write your message..."
106
- showCount
107
- maxLength={500}
108
- />
109
- </Box>
110
-
111
- <Checkbox
112
- checked={subscribe}
113
- onChange={setSubscribe}
114
- label="Subscribe to newsletter"
115
- />
116
-
117
- <Flex justify="between" align="center">
118
- <Badge variant="success">Active</Badge>
119
- <Switch checked={subscribe} onCheckedChange={setSubscribe} />
120
- </Flex>
121
-
122
- <Divider label="OR" />
123
-
124
- <Button variant="primary" onPress={handleSubmit}>
125
- Submit
126
- </Button>
127
- </VStack>
25
+ <Card variant="elevated">
26
+ <CardContent>
27
+ <Input placeholder="Enter email" />
28
+ <Button variant="primary" onPress={handleSubmit}>Submit</Button>
29
+ </CardContent>
128
30
  </Card>
129
31
  );
130
32
  }
131
33
  ```
132
34
 
35
+ ## API
36
+
37
+ ### Core UI (`src/ui/`) -- 90+ components
38
+
39
+ - **Layout**: Box, Flex, Stack, Grid, Divider, Separator, Container, Center, Spacer, SplitPane, PageContainer, FloatingPanel, Masonry, MasterDetailLayout
40
+ - **Form**: Input, TextArea, Checkbox, Switch, Select, SearchInput, NumberInput, PhoneInput, Combobox, DateInput, DateTimePicker, FileInput, MultiSelect, Label, HelperText, FormAlerts
41
+ - **Display**: Badge, Avatar, Skeleton, List, DataList, Table, StatDisplay, DashboardStatCard, KeyValuePair, FormattedNumber, IconText, InfoBox
42
+ - **Typography**: Text, Heading, Code, CodeDisplay, TruncatedText, Kbd
43
+ - **Feedback**: Spinner, Progress, ProgressCircle, Modal, Toast, LoadingOverlay, LoadingDots, Alert, Backdrop
44
+ - **Overlay**: Sheet, Dialog, Popover, Tooltip, Overlay, TextInputModal
45
+ - **Navigation**: Tabs, Link, Breadcrumb, BreadcrumbNav, Pagination, NavigationList, SettingsList, SideNav, SmartLink, ScrollSpy
46
+ - **Features**: FeatureCard, FeatureGrid, CTASection, PromotionalBanner, AnimatedCounter, AnimatedSection
47
+
48
+ ### Sub-Packages (`packages/`)
49
+
50
+ | Package | Description |
51
+ |---------|-------------|
52
+ | `@sudobility/auth-components-rn` | Authentication (AuthProvider, AuthScreen) |
53
+ | `@sudobility/email-components-rn` | Email (ContactCard, EmailAccountsList, EmailTemplate) |
54
+ | `@sudobility/web3-components-rn` | Web3 (WalletIcon, AddressLabel, TokenSwap, NftGallery) |
55
+ | `@sudobility/devops-components-rn` | DevOps (SystemStatusIndicator, PipelineView) |
56
+ | `@sudobility/marketing-components-rn` | Marketing (WelcomeScreen, CtaBanner, NpsSurvey) |
57
+ | `@sudobility/entity-components-rn` | Entity/Org (EntityCard, MemberList) |
58
+ | `@sudobility/subscription-components-rn` | Subscriptions (SubscriptionTile, PeriodSelector) |
59
+ | `@sudobility/ratelimit-components-rn` | Rate limiting (UsageDashboard) |
60
+ | `@sudobility/social-components-rn` | Social (RatingStars, ShareButtons) |
61
+ | `@sudobility/analytics-components-rn` | Analytics (stub, TBD) |
62
+
133
63
  ## Development
134
64
 
135
65
  ```bash
136
- # Build main package
137
- npm run build
138
-
139
- # Build all packages (main + specialized)
140
- npm run build:all
141
-
142
- # Watch mode
143
- npm run dev
144
-
145
- # Type check
146
- npm run type-check
66
+ bun install
67
+ bun run build # TypeScript + Vite library build
68
+ bun run build:all # Root + all sub-packages
69
+ bun run dev # Watch mode
70
+ bun run type-check # TypeScript checking
71
+ bun run lint # ESLint
72
+ bun run test # Jest with react-native preset
147
73
  ```
148
74
 
149
- ## Packages
150
-
151
- | Package | Description |
152
- | ------------------------------------ | --------------------------------- |
153
- | `@sudobility/components-rn` | Core React Native UI components |
154
- | `@sudobility/devops-components-rn` | DevOps monitoring & deployment |
155
- | `@sudobility/email-components-rn` | Email marketing & contacts |
156
- | `@sudobility/web3-components-rn` | Web3 wallet & crypto |
157
- | `@sudobility/marketing-components-rn`| Marketing & landing pages |
158
-
159
- ## Current Components
160
-
161
- ### Main Package
162
-
163
- **Core UI:**
164
-
165
- - Button - Pressable button with variants (primary, secondary, outline,
166
- ghost, link, destructive)
167
- - Card - Container with CardHeader, CardContent, CardFooter
168
- - Input - Text input with variants and states
169
- - Spinner - Loading indicator with size variants
170
- - Alert - Notification with AlertTitle, AlertDescription
171
-
172
- **Layout:**
173
-
174
- - Box - Fundamental layout primitive with spacing, sizing, styling props
175
- - Flex - Flexbox layout component with direction, align, justify, gap props
176
- - Stack / VStack / HStack - Flexbox-based layout for arranging children
177
- with spacing
178
- - Divider - Visual separator with optional label
75
+ ## Related Packages
179
76
 
180
- **Form:**
181
-
182
- - Label - Text label for form inputs
183
- - TextArea - Multi-line text input with character counting
184
- - Checkbox - Custom styled checkbox with controlled/uncontrolled modes
185
- - Switch - Toggle switch with smooth animation
186
- - HelperText - Form field descriptions and error messages
187
- - Select - Dropdown select with modal picker
188
- - SearchInput - Search input with icon, clear button, loading state
189
-
190
- **Display:**
191
-
192
- - Badge - Status/label component for metadata, tags, counts
193
- - Avatar / AvatarGroup - User avatar with initials fallback and status
194
- indicator
195
- - Skeleton / SkeletonText / SkeletonAvatar - Loading placeholder with
196
- pulse animation
197
-
198
- **Feedback:**
199
-
200
- - Progress / ProgressBar - Linear progress indicators
201
- - Modal / ModalHeader / ModalContent / ModalFooter - Modal dialog
202
-
203
- **Navigation:**
204
-
205
- - Tabs / TabsList / TabsTrigger / TabsContent - Tab navigation
206
-
207
- ### Specialized Packages
208
-
209
- **DevOps** (`@sudobility/devops-components-rn` - 25 components):
210
- - AlertDialog, MetricsGrid, SystemStatusIndicator
211
- - ApiPlayground, ApiReference, AuditLog
212
- - BuildLog, ChangelogDisplay, CodePlayground
213
- - ConflictResolver, DashboardBuilder, DealPipeline
214
- - DeploymentStatus, DriverLog, MemoryUsage
215
- - PageBuilder, PipelineView, RegressionTest
216
- - TestResult, TestRunner, WebhookLogger
217
- - WorkflowBuilder, WorkflowTemplate, XmlParser, BodyMetrics
218
-
219
- **Email** (`@sudobility/email-components-rn` - 10 components):
220
- - AbTestEmail, ContactCard, EmailAccountsList
221
- - EmailAnalytics, EmailCampaign, EmailInputGroup
222
- - EmailTemplate, FreeEmailBanner
223
- - SubscriberList, SubscriptionPlan
224
-
225
- **Web3** (`@sudobility/web3-components-rn` - 8 components):
226
- - AddressLabel, CryptoPortfolio, GasTracker
227
- - NftGallery, TokenSwap, WalletConnect
228
- - WalletIcon, WalletSelection
229
-
230
- **Marketing** (`@sudobility/marketing-components-rn` - 13 components):
231
- - CrmDashboard, CtaBanner, FeatureListItem
232
- - FeatureSpotlight, HeroBannerWithBadge
233
- - InternalLinkClusters, LandingBuilder
234
- - NpsSurvey, SalesReport, SubscriberList
235
- - TestimonialSlider, UseCaseGrid, WelcomeScreen
236
-
237
- ## Testing
238
-
239
- ```bash
240
- # Run tests
241
- npm test
242
-
243
- # Run tests in watch mode
244
- npm run test:watch
245
-
246
- # Run tests with coverage
247
- npm run test:coverage
248
- ```
77
+ - `@sudobility/design` -- design tokens, colors, typography, variants (peer dependency)
78
+ - `@sudobility/types` -- shared TypeScript types (peer dependency)
79
+ - `@sudobility/components` -- web version of this library
249
80
 
250
81
  ## License
251
82
 
252
- MIT
83
+ BUSL-1.1