@sudobility/subscription-components-rn 1.0.3 → 1.0.5

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 (15) hide show
  1. package/dist/PlatformIcon.d.ts +9 -0
  2. package/dist/PlatformIcon.d.ts.map +1 -0
  3. package/dist/SegmentedControl.d.ts.map +1 -1
  4. package/dist/SubscriptionLayout.d.ts.map +1 -1
  5. package/dist/index.js +178 -59
  6. package/dist/index.js.map +1 -1
  7. package/dist/index.mjs +179 -60
  8. package/dist/index.mjs.map +1 -1
  9. package/dist/types.d.ts +5 -0
  10. package/dist/types.d.ts.map +1 -1
  11. package/package.json +1 -1
  12. package/src/PlatformIcon.tsx +34 -0
  13. package/src/SegmentedControl.tsx +143 -70
  14. package/src/SubscriptionLayout.tsx +21 -4
  15. package/src/types.ts +5 -0
package/dist/types.d.ts CHANGED
@@ -138,6 +138,11 @@ export interface SubscriptionStatusConfig {
138
138
  label: string;
139
139
  value: string;
140
140
  }>;
141
+ /** Subscription platform display */
142
+ platform?: {
143
+ label: string;
144
+ value: 'web' | 'ios' | 'android' | 'macos';
145
+ };
141
146
  };
142
147
  /** Content to display when no active subscription */
143
148
  inactiveContent?: {
package/dist/types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sudobility/subscription-components-rn",
3
- "version": "1.0.3",
3
+ "version": "1.0.5",
4
4
  "description": "React Native Subscription UI components for Sudobility with RevenueCat support",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.esm.js",
package/src/PlatformIcon.tsx ADDED
@@ -0,0 +1,34 @@
1
+ import { Text } from 'react-native';
2
+
3
+ type PlatformType = 'web' | 'ios' | 'android' | 'macos';
4
+
5
+ interface PlatformIconProps {
6
+ platform: PlatformType;
7
+ className?: string;
8
+ }
9
+
10
+ const PLATFORM_ICONS: Record<PlatformType, string> = {
11
+ web: '🌐',
12
+ ios: '',
13
+ android: '🤖',
14
+ macos: '',
15
+ };
16
+
17
+ const PLATFORM_DISPLAY_NAMES: Record<PlatformType, string> = {
18
+ web: 'Web',
19
+ ios: 'iOS',
20
+ android: 'Android',
21
+ macos: 'macOS',
22
+ };
23
+
24
+ export function PlatformIcon({ platform, className }: PlatformIconProps) {
25
+ return (
26
+ <Text className={className}>
27
+ {PLATFORM_ICONS[platform]}
28
+ </Text>
29
+ );
30
+ }
31
+
32
+ export function platformDisplayName(platform: PlatformType): string {
33
+ return PLATFORM_DISPLAY_NAMES[platform];
34
+ }
package/src/SegmentedControl.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import { View, Text, Pressable } from 'react-native';
1
+ import { View, Text, Pressable, StyleSheet } from 'react-native';
2
2
 
3
3
  export interface SegmentedControlOption<T extends string = string> {
4
4
  /** Value for this option */
@@ -30,30 +30,6 @@ export interface SegmentedControlProps<T extends string = string> {
30
30
  accessibilityLabel?: string;
31
31
  }
32
32
 
33
- /**
34
- * Size class mapping
35
- */
36
- const sizeClasses = {
37
- sm: {
38
- container: 'p-1 rounded-lg',
39
- segment: 'px-3 py-1.5 rounded-md',
40
- text: 'text-xs',
41
- badge: 'text-xs px-1.5 py-0.5',
42
- },
43
- md: {
44
- container: 'p-1 rounded-lg',
45
- segment: 'px-4 py-2 rounded-md',
46
- text: 'text-sm',
47
- badge: 'text-xs px-2 py-0.5',
48
- },
49
- lg: {
50
- container: 'p-1 rounded-lg',
51
- segment: 'px-6 py-3 rounded-lg',
52
- text: 'text-base',
53
- badge: 'text-sm px-2 py-1',
54
- },
55
- };
56
-
57
33
  /**
58
34
  * SegmentedControl - A toggle control for switching between options
59
35
  *
@@ -82,51 +58,31 @@ export function SegmentedControl<T extends string = string>({
82
58
  fullWidth = true,
83
59
  accessibilityLabel,
84
60
  }: SegmentedControlProps<T>) {
85
- const sizes = sizeClasses[size];
86
-
87
- const containerClasses = [
88
- 'flex-row bg-gray-100 dark:bg-gray-800',
89
- sizes.container,
90
- fullWidth ? 'w-full' : '',
91
- disabled ? 'opacity-50' : '',
92
- className,
93
- ]
94
- .filter(Boolean)
95
- .join(' ');
61
+ void className;
96
62
 
97
63
  return (
98
64
  <View
99
- className={containerClasses}
100
- accessibilityRole='tablist'
65
+ style={[
66
+ styles.container,
67
+ fullWidth && styles.fullWidth,
68
+ disabled && styles.disabled,
69
+ size === 'sm' && styles.containerSm,
70
+ size === 'md' && styles.containerMd,
71
+ size === 'lg' && styles.containerLg,
72
+ ]}
73
+ accessibilityRole="tablist"
101
74
  accessibilityLabel={accessibilityLabel}
102
75
  >
103
76
  {options.map(option => {
104
77
  const isSelected = value === option.value;
105
78
  const isDisabled = disabled || option.disabled;
106
79
 
107
- const segmentClasses = [
108
- sizes.segment,
109
- 'flex-1 items-center justify-center flex-row gap-2',
110
- isSelected ? 'bg-white dark:bg-gray-700 shadow-sm' : 'bg-transparent',
111
- isDisabled ? 'opacity-50' : '',
112
- ]
113
- .filter(Boolean)
114
- .join(' ');
115
-
116
- const textClasses = [
117
- sizes.text,
118
- 'font-medium',
119
- isSelected
120
- ? 'text-gray-900 dark:text-white'
121
- : 'text-gray-600 dark:text-gray-400',
122
- ].join(' ');
123
-
124
80
  return (
125
81
  <Pressable
126
82
  key={option.value}
127
83
  onPress={() => !isDisabled && onChange(option.value)}
128
84
  disabled={isDisabled}
129
- accessibilityRole='tab'
85
+ accessibilityRole="tab"
130
86
  accessibilityState={{
131
87
  selected: isSelected,
132
88
  disabled: isDisabled,
@@ -134,28 +90,45 @@ export function SegmentedControl<T extends string = string>({
134
90
  accessibilityLabel={
135
91
  option.label + (option.badge ? ', ' + option.badge : '')
136
92
  }
137
- className={segmentClasses}
93
+ style={[
94
+ styles.segment,
95
+ size === 'sm' && styles.segmentSm,
96
+ size === 'md' && styles.segmentMd,
97
+ size === 'lg' && styles.segmentLg,
98
+ isSelected && styles.segmentSelected,
99
+ isDisabled && styles.disabled,
100
+ ]}
138
101
  >
139
- <Text className={textClasses}>{option.label}</Text>
102
+ <Text
103
+ style={[
104
+ styles.text,
105
+ size === 'sm' && styles.textSm,
106
+ size === 'md' && styles.textMd,
107
+ size === 'lg' && styles.textLg,
108
+ isSelected ? styles.textSelected : styles.textUnselected,
109
+ ]}
110
+ >
111
+ {option.label}
112
+ </Text>
140
113
 
141
114
  {/* Badge */}
142
115
  {option.badge && (
143
116
  <View
144
- className={[
145
- sizes.badge,
146
- 'rounded-full',
147
- isSelected
148
- ? 'bg-green-100 dark:bg-green-900'
149
- : 'bg-gray-200 dark:bg-gray-700',
150
- ].join(' ')}
117
+ style={[
118
+ styles.badge,
119
+ size === 'sm' && styles.badgeSm,
120
+ size === 'md' && styles.badgeMd,
121
+ size === 'lg' && styles.badgeLg,
122
+ isSelected ? styles.badgeSelected : styles.badgeUnselected,
123
+ ]}
151
124
  >
152
125
  <Text
153
- className={[
154
- 'text-xs font-semibold',
126
+ style={[
127
+ styles.badgeText,
155
128
  isSelected
156
- ? 'text-green-700 dark:text-green-300'
157
- : 'text-gray-600 dark:text-gray-400',
158
- ].join(' ')}
129
+ ? styles.badgeTextSelected
130
+ : styles.badgeTextUnselected,
131
+ ]}
159
132
  >
160
133
  {option.badge}
161
134
  </Text>
@@ -219,3 +192,103 @@ export function PeriodSelector({
219
192
  }
220
193
 
221
194
  export default SegmentedControl;
195
+
196
+ const styles = StyleSheet.create({
197
+ container: {
198
+ flexDirection: 'row',
199
+ backgroundColor: '#f3f4f6',
200
+ borderRadius: 8,
201
+ padding: 4,
202
+ },
203
+ fullWidth: {
204
+ width: '100%',
205
+ },
206
+ disabled: {
207
+ opacity: 0.5,
208
+ },
209
+ containerSm: {
210
+ borderRadius: 8,
211
+ },
212
+ containerMd: {
213
+ borderRadius: 8,
214
+ },
215
+ containerLg: {
216
+ borderRadius: 12,
217
+ },
218
+ segment: {
219
+ flex: 1,
220
+ alignItems: 'center',
221
+ justifyContent: 'center',
222
+ flexDirection: 'row',
223
+ },
224
+ segmentSm: {
225
+ paddingHorizontal: 12,
226
+ paddingVertical: 6,
227
+ borderRadius: 6,
228
+ gap: 8,
229
+ },
230
+ segmentMd: {
231
+ paddingHorizontal: 16,
232
+ paddingVertical: 8,
233
+ borderRadius: 6,
234
+ gap: 8,
235
+ },
236
+ segmentLg: {
237
+ paddingHorizontal: 24,
238
+ paddingVertical: 12,
239
+ borderRadius: 8,
240
+ gap: 8,
241
+ },
242
+ segmentSelected: {
243
+ backgroundColor: '#ffffff',
244
+ },
245
+ text: {
246
+ fontWeight: '500',
247
+ },
248
+ textSm: {
249
+ fontSize: 12,
250
+ },
251
+ textMd: {
252
+ fontSize: 14,
253
+ },
254
+ textLg: {
255
+ fontSize: 16,
256
+ },
257
+ textSelected: {
258
+ color: '#111827',
259
+ },
260
+ textUnselected: {
261
+ color: '#4b5563',
262
+ },
263
+ badge: {
264
+ borderRadius: 999,
265
+ },
266
+ badgeSm: {
267
+ paddingHorizontal: 6,
268
+ paddingVertical: 2,
269
+ },
270
+ badgeMd: {
271
+ paddingHorizontal: 8,
272
+ paddingVertical: 2,
273
+ },
274
+ badgeLg: {
275
+ paddingHorizontal: 8,
276
+ paddingVertical: 4,
277
+ },
278
+ badgeSelected: {
279
+ backgroundColor: '#dcfce7',
280
+ },
281
+ badgeUnselected: {
282
+ backgroundColor: '#e5e7eb',
283
+ },
284
+ badgeText: {
285
+ fontSize: 12,
286
+ fontWeight: '600',
287
+ },
288
+ badgeTextSelected: {
289
+ color: '#15803d',
290
+ },
291
+ badgeTextUnselected: {
292
+ color: '#4b5563',
293
+ },
294
+ });
package/src/SubscriptionLayout.tsx CHANGED
@@ -7,6 +7,7 @@ import {
7
7
  ActivityIndicator,
8
8
  } from 'react-native';
9
9
  import { SubscriptionTile } from './SubscriptionTile';
10
+ import { PlatformIcon, platformDisplayName } from './PlatformIcon';
10
11
  import type {
11
12
  FreeTileConfig,
12
13
  SubscriptionLayoutTrackingData,
@@ -137,10 +138,10 @@ export function SubscriptionLayout({
137
138
  </Text>
138
139
 
139
140
  {currentStatus.isActive ? (
140
- <View className='bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-4'>
141
+ <View className='bg-gray-50 dark:bg-gray-800/30 border border-gray-200 dark:border-gray-700 rounded-lg p-4'>
141
142
  <View className='flex-row items-center mb-2'>
142
143
  <View className='w-3 h-3 bg-green-500 rounded-full mr-3' />
143
- <Text className='font-semibold text-green-800 dark:text-green-300'>
144
+ <Text className='font-semibold text-gray-800 dark:text-gray-200'>
144
145
  {currentStatus.activeContent?.title ||
145
146
  'Active Subscription'}
146
147
  </Text>
@@ -151,10 +152,10 @@ export function SubscriptionLayout({
151
152
  {currentStatus.activeContent.fields.map(
152
153
  (field, index) => (
153
154
  <View key={index}>
154
- <Text className='text-sm text-green-600 dark:text-green-400'>
155
+ <Text className='text-sm text-gray-500 dark:text-gray-400'>
155
156
  {field.label}
156
157
  </Text>
157
- <Text className='font-semibold text-green-800 dark:text-green-300'>
158
+ <Text className='font-semibold text-gray-700 dark:text-gray-300'>
158
159
  {field.value}
159
160
  </Text>
160
161
  </View>
@@ -162,6 +163,22 @@ export function SubscriptionLayout({
162
163
  )}
163
164
  </View>
164
165
  )}
166
+ {currentStatus.activeContent?.platform && (
167
+ <View className='mt-4'>
168
+ <Text className='text-sm text-gray-500 dark:text-gray-400'>
169
+ {currentStatus.activeContent.platform.label}
170
+ </Text>
171
+ <View className='flex-row items-center gap-1.5 mt-0.5'>
172
+ <PlatformIcon
173
+ platform={currentStatus.activeContent.platform.value}
174
+ className='text-gray-600 dark:text-gray-300'
175
+ />
176
+ <Text className='font-semibold text-gray-700 dark:text-gray-300'>
177
+ {platformDisplayName(currentStatus.activeContent.platform.value)}
178
+ </Text>
179
+ </View>
180
+ </View>
181
+ )}
165
182
  </View>
166
183
  ) : (
167
184
  <View className='bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4'>
package/src/types.ts CHANGED
@@ -148,6 +148,11 @@ export interface SubscriptionStatusConfig {
148
148
  label: string;
149
149
  value: string;
150
150
  }>;
151
+ /** Subscription platform display */
152
+ platform?: {
153
+ label: string;
154
+ value: 'web' | 'ios' | 'android' | 'macos';
155
+ };
151
156
  };
152
157
  /** Content to display when no active subscription */
153
158
  inactiveContent?: {