Skip to content

Commit a595946

Browse files
theoribbitheoribbi
committed
refactor: remove Tabs component and related files; update cached-packages.json and expo-module.config.json
- Deleted Tabs component implementation from both native and web packages. - Removed associated files and references in the project structure. - Updated cached-packages.json to reflect the removal of Tabs. - Adjusted expo-module.config.json to remove Tabs module from configuration.
1 parent b0fdc57 commit a595946

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+596
-2052
lines changed

‎.expo/prebuild/cached-packages.json‎

Lines changed: 0 additions & 4 deletions
This file was deleted.

‎apps/sandbox/app/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { StyleSheet, Platform, ScrollView } from "react-native";
55
const primitives = [
66
{ name: "View", path: "/preview/view", description: "Layout container with cross‑platform a11y & asChild" },
77
{ name: "Text", path: "/preview/text", description: "Unified Text: RN on mobile, semantic tags on web" },
8+
{ name: "Button", path: "/preview/button", description: "Unstyled, accessible button wrapper around Pressable" },
89
{ name: "Collapsible", path: "/preview/collapsible", description: "Expandable content with controlled/uncontrolled state" },
910
{ name: "Accordion", path: "/preview/accordion", description: "Grouped collapsibles with single or multiple selection" },
1011
{ name: "Alert", path: "/preview/alert", description: "Cross-platform alerts: native on mobile, custom on web" },
@@ -16,7 +17,6 @@ const primitives = [
1617
{ name: "Checkbox Group", path: "/preview/checkbox-group", description: "Manage multiple checkboxes with coordinated state" },
1718
{ name: "Radio", path: "/preview/radio", description: "Individual radio button with clickable labels" },
1819
{ name: "Radio Group", path: "/preview/radiogroup", description: "Manage multiple radios with coordinated state (single selection)" },
19-
{ name: "Tabs", path: "/preview/tabs", description: "Organize content into tabs: classic on web, liquid glass dropdown on mobile" },
2020
{ name: "Context Menu", path: "/preview/context-menu", description: "Cross-platform context menu: right-click on web, long press on native" },
2121
{ name: "Switch", path: "/preview/switch", description: "Switch between on/off states with customizable styling" },
2222
{ name: "Switch Group", path: "/preview/switch-group", description: "Manage multiple switches with coordinated state" },

‎apps/sandbox/app/preview/activity-view.tsx‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Stack } from "expo-router";
2-
import { View, Text, share, ActivityView } from "@native-ui-org/primitives";
3-
import { StyleSheet, Platform, ScrollView, Pressable } from "react-native";
2+
import { View, Text, share, ActivityView, Button } from "@native-ui-org/primitives";
3+
import { StyleSheet, Platform, ScrollView } from "react-native";
44
import React from "react";
55

66
export default function ActivityViewPreview() {
@@ -136,9 +136,9 @@ export default function ActivityViewPreview() {
136136
}
137137
}}
138138
>
139-
<Pressable style={styles.button} onPress={() => {}}>
139+
<Button style={styles.button} onPress={() => {}}>
140140
<Text style={styles.buttonText}>Share Text</Text>
141-
</Pressable>
141+
</Button>
142142
</ActivityView>
143143
</View>
144144

@@ -148,9 +148,9 @@ export default function ActivityViewPreview() {
148148
Share using the share() function directly (native dialog on web)
149149
</Text>
150150

151-
<Pressable style={styles.button} onPress={handleShareText}>
151+
<Button style={styles.button} onPress={handleShareText}>
152152
<Text style={styles.buttonText}>Share Text</Text>
153-
</Pressable>
153+
</Button>
154154
</View>
155155

156156
<View style={styles.section}>
@@ -159,9 +159,9 @@ export default function ActivityViewPreview() {
159159
Share content with both title and message
160160
</Text>
161161

162-
<Pressable style={styles.button} onPress={handleShareWithTitle}>
162+
<Button style={styles.button} onPress={handleShareWithTitle}>
163163
<Text style={styles.buttonText}>Share with Title</Text>
164-
</Pressable>
164+
</Button>
165165
</View>
166166

167167
<View style={styles.section}>
@@ -170,9 +170,9 @@ export default function ActivityViewPreview() {
170170
Share a URL with title and message (works best on web)
171171
</Text>
172172

173-
<Pressable style={styles.button} onPress={handleShareURL}>
173+
<Button style={styles.button} onPress={handleShareURL}>
174174
<Text style={styles.buttonText}>Share URL</Text>
175-
</Pressable>
175+
</Button>
176176
</View>
177177

178178
<View style={styles.section}>
@@ -181,9 +181,9 @@ export default function ActivityViewPreview() {
181181
Share with just a title (minimal example)
182182
</Text>
183183

184-
<Pressable style={styles.button} onPress={handleShareMinimal}>
184+
<Button style={styles.button} onPress={handleShareMinimal}>
185185
<Text style={styles.buttonText}>Share Title Only</Text>
186-
</Pressable>
186+
</Button>
187187
</View>
188188

189189
<View style={styles.section}>
@@ -192,9 +192,9 @@ export default function ActivityViewPreview() {
192192
Share a deep link that opens this ActivityView screen directly in the app. When someone taps the link, it will open this screen automatically!
193193
</Text>
194194

195-
<Pressable style={styles.button} onPress={handleShareDeepLink}>
195+
<Button style={styles.button} onPress={handleShareDeepLink}>
196196
<Text style={styles.buttonText}>Share Deep Link</Text>
197-
</Pressable>
197+
</Button>
198198
</View>
199199

200200
<View style={styles.section}>

‎apps/sandbox/app/preview/alert.tsx‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Stack } from "expo-router";
2-
import { View, Text, showAlert } from "@native-ui-org/primitives";
3-
import { StyleSheet, Platform, ScrollView, Pressable } from "react-native";
2+
import { View, Text, showAlert, Button } from "@native-ui-org/primitives";
3+
import { StyleSheet, Platform, ScrollView } from "react-native";
44
import React from "react";
55

66
export default function AlertPreview() {
@@ -87,54 +87,54 @@ export default function AlertPreview() {
8787
<Text as="p" style={styles.description}>
8888
Simple notification with single OK button
8989
</Text>
90-
91-
<Pressable style={styles.button} onPress={handleBasicAlert}>
90+
91+
<Button style={styles.button} onPress={handleBasicAlert}>
9292
<Text style={styles.buttonText}>Show Basic Alert</Text>
93-
</Pressable>
93+
</Button>
9494
</View>
9595

9696
<View style={styles.section}>
9797
<Text as="h3" style={styles.subTitle}>Confirmation</Text>
9898
<Text as="p" style={styles.description}>
9999
Two buttons: Cancel and Confirm
100100
</Text>
101-
102-
<Pressable style={styles.button} onPress={handleConfirm}>
101+
102+
<Button style={styles.button} onPress={handleConfirm}>
103103
<Text style={styles.buttonText}>Show Confirm Dialog</Text>
104-
</Pressable>
104+
</Button>
105105
</View>
106106

107107
<View style={styles.section}>
108108
<Text as="h3" style={styles.subTitle}>Destructive Action</Text>
109109
<Text as="p" style={styles.description}>
110110
Delete confirmation with destructive styling
111111
</Text>
112-
113-
<Pressable style={styles.button} onPress={handleDestructive}>
112+
113+
<Button style={styles.button} onPress={handleDestructive}>
114114
<Text style={styles.buttonText}>Show Delete Confirm</Text>
115-
</Pressable>
115+
</Button>
116116
</View>
117117

118118
<View style={styles.section}>
119119
<Text as="h3" style={styles.subTitle}>Three Buttons</Text>
120120
<Text as="p" style={styles.description}>
121121
Save, Don't Save, or Cancel
122122
</Text>
123-
124-
<Pressable style={styles.button} onPress={handleThreeButtons}>
123+
124+
<Button style={styles.button} onPress={handleThreeButtons}>
125125
<Text style={styles.buttonText}>Show Save Dialog</Text>
126-
</Pressable>
126+
</Button>
127127
</View>
128128

129129
<View style={styles.section}>
130130
<Text as="h3" style={styles.subTitle}>Non-Cancelable</Text>
131131
<Text as="p" style={styles.description}>
132132
Must choose an option (Escape won't work on web)
133133
</Text>
134-
135-
<Pressable style={styles.button} onPress={handleNonCancelable}>
134+
135+
<Button style={styles.button} onPress={handleNonCancelable}>
136136
<Text style={styles.buttonText}>Show Required Choice</Text>
137-
</Pressable>
137+
</Button>
138138
</View>
139139

140140
<View style={styles.section}>

‎apps/sandbox/app/preview/button.tsx‎

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
import { View, Text, Button } from "@native-ui-org/primitives";
2+
import { Platform, StyleSheet, ScrollView } from "react-native";
3+
import { Stack } from "expo-router";
4+
5+
export default function PreviewButton() {
6+
return (
7+
<ScrollView style={styles.container}>
8+
<Stack.Screen options={{ title: "Button" }} />
9+
10+
<View style={styles.content}>
11+
<View style={styles.section}>
12+
<Text as="h2" style={styles.sectionTitle}>Button Primitive</Text>
13+
<Text as="p" style={styles.description}>
14+
Unstyled, accessible button component that wraps React Native's Pressable.
15+
Supports asChild for custom composition.
16+
</Text>
17+
</View>
18+
19+
<View style={styles.section}>
20+
<Text as="h3" style={styles.subTitle}>Basic Usage</Text>
21+
<Text as="p" style={styles.description}>
22+
Standard button usage with onPress handler.
23+
</Text>
24+
25+
<View style={styles.demoContainer}>
26+
<Button
27+
style={({ pressed }) => [
28+
styles.button,
29+
pressed && styles.buttonPressed
30+
]}
31+
onPress={() => console.log("Pressed")}
32+
>
33+
<Text style={styles.buttonText}>Standard Button</Text>
34+
</Button>
35+
</View>
36+
</View>
37+
38+
<View style={styles.section}>
39+
<Text as="h3" style={styles.subTitle}>Composition (asChild)</Text>
40+
<Text as="p" style={styles.description}>
41+
Use asChild to add button behavior to any component.
42+
</Text>
43+
44+
<View style={styles.demoContainer}>
45+
<Button asChild onPress={() => console.log("Custom Pressed")}>
46+
<View style={styles.customButton}>
47+
<Text style={styles.customButtonText}>Custom Child Button</Text>
48+
</View>
49+
</Button>
50+
</View>
51+
</View>
52+
53+
<View style={styles.section}>
54+
<Text as="h3" style={styles.subTitle}>States & Accessibility</Text>
55+
<Text as="p" style={styles.description}>
56+
Automatically handles accessibility roles and press states.
57+
</Text>
58+
<View style={styles.demoContainer}>
59+
<Button
60+
disabled
61+
style={[styles.button, styles.buttonDisabled]}
62+
accessibilityLabel="Disabled Button"
63+
>
64+
<Text style={styles.buttonText}>Disabled Button</Text>
65+
</Button>
66+
</View>
67+
</View>
68+
</View>
69+
</ScrollView>
70+
);
71+
}
72+
73+
const styles = StyleSheet.create({
74+
container: {
75+
flex: 1,
76+
backgroundColor: Platform.OS === "web" ? "#fff" : "#f2f2f7",
77+
},
78+
content: {
79+
...Platform.select({
80+
web: {
81+
maxWidth: 800,
82+
marginHorizontal: "auto",
83+
width: "100%",
84+
paddingHorizontal: 24,
85+
paddingVertical: 32,
86+
},
87+
default: {
88+
padding: 16,
89+
},
90+
}),
91+
},
92+
section: {
93+
marginBottom: 32,
94+
},
95+
sectionTitle: {
96+
fontSize: 24,
97+
fontWeight: "600",
98+
marginBottom: 8,
99+
color: "#000",
100+
},
101+
subTitle: {
102+
fontSize: 18,
103+
fontWeight: "600",
104+
marginBottom: 8,
105+
color: "#000",
106+
},
107+
description: {
108+
fontSize: 14,
109+
color: "#666",
110+
marginBottom: 16,
111+
lineHeight: 20,
112+
},
113+
demoContainer: {
114+
backgroundColor: "white",
115+
padding: 20,
116+
borderRadius: 8,
117+
alignItems: 'flex-start',
118+
gap: 16,
119+
...Platform.select({
120+
web: {
121+
boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)",
122+
},
123+
default: {
124+
shadowColor: "#000",
125+
shadowOffset: { width: 0, height: 1 },
126+
shadowOpacity: 0.1,
127+
shadowRadius: 2,
128+
elevation: 2,
129+
},
130+
}),
131+
},
132+
button: {
133+
backgroundColor: "#007AFF",
134+
paddingHorizontal: 16,
135+
paddingVertical: 10,
136+
borderRadius: 8,
137+
},
138+
buttonPressed: {
139+
opacity: 0.7,
140+
},
141+
buttonText: {
142+
color: "white",
143+
fontWeight: "600",
144+
fontSize: 16,
145+
},
146+
buttonDisabled: {
147+
opacity: 0.5,
148+
},
149+
customButton: {
150+
backgroundColor: "transparent",
151+
borderWidth: 2,
152+
borderColor: "#007AFF",
153+
paddingHorizontal: 16,
154+
paddingVertical: 10,
155+
borderRadius: 8,
156+
},
157+
customButtonPressed: {
158+
backgroundColor: "#e6f2ff",
159+
},
160+
customButtonText: {
161+
color: "#007AFF",
162+
fontWeight: "600",
163+
fontSize: 16,
164+
},
165+
});
166+

0 commit comments

Comments
 (0)