feat: set showcase app

apps/docs/pages/components/modal.mdx

@@ -10,10 +10,11 @@ import { Button, Text, View } from "react-native";
 export default function ModalExample() {
   const [isOpen, setIsOpen] = useState(false);
   const onClose = () => setIsOpen(false);
+  const onOpen = () => setIsOpen(true);
 
   return (
     <View>
-      <Button title="Open dialog" onPress={() => setIsOpen(true)} />
+      <Button title="Open dialog" onPress={onOpen} />
       <Modal onClose={onClose} isOpen={isOpen}>
         <View
           style={{

apps/showcase/.gitignore

@@ -13,8 +13,3 @@ web-build/
 # macOS
 .DS_Store
 
-# @generated expo-cli sync-2b81b286409207a5da26e14c78851eb30d8ccbdb
-# The following patterns were generated by expo-cli
-
-expo-env.d.ts
-# @end expo-cli

apps/showcase/App.tsx

@@ -0,0 +1,17 @@
+import { View } from "react-native";
+import ModalExample from "./components/modal";
+
+export default function App() {
+  return (
+    <View
+      style={{
+        flex: 1,
+        backgroundColor: "#fff",
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      <ModalExample />
+    </View>
+  );
+}

apps/showcase/app.json

@@ -1,36 +1,29 @@
 {
   "expo": {
-    "name": "showcase",
-    "slug": "showcase",
+    "name": "headlessui-react-native",
+    "slug": "headlessui-react-native",
     "version": "1.0.0",
     "orientation": "portrait",
-    "icon": "./assets/images/icon.png",
-    "scheme": "myapp",
-    "userInterfaceStyle": "automatic",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
     "splash": {
-      "image": "./assets/images/splash.png",
+      "image": "./assets/splash.png",
       "resizeMode": "contain",
       "backgroundColor": "#ffffff"
     },
+    "assetBundlePatterns": ["**/*"],
     "ios": {
-      "supportsTablet": true
+      "bundleIdentifier": "com.headlessui-react-native"
     },
     "android": {
+      "package": "com.headlessui-react-native",
       "adaptiveIcon": {
-        "foregroundImage": "./assets/images/adaptive-icon.png",
+        "foregroundImage": "./assets/adaptive-icon.png",
         "backgroundColor": "#ffffff"
       }
     },
     "web": {
-      "bundler": "metro",
-      "output": "static",
-      "favicon": "./assets/images/favicon.png"
-    },
-    "plugins": [
-      "expo-router"
-    ],
-    "experiments": {
-      "typedRoutes": true
+      "favicon": "./assets/favicon.png"
     }
   }
 }

apps/showcase/app/(tabs)/index.tsx → apps/showcase/components/modal.tsx

@@ -5,10 +5,11 @@ import { Button, Text, View } from "react-native";
 export default function ModalExample() {
   const [isOpen, setIsOpen] = useState(false);
   const onClose = () => setIsOpen(false);
+  const onOpen = () => setIsOpen(true);
 
   return (
     <View>
-      <Button title="Open dialog" onPress={() => setIsOpen(true)} />
+      <Button title="Open dialog" onPress={onOpen} />
       <Modal onClose={onClose} isOpen={isOpen}>
         <View
           style={{

apps/showcase/index.ts

@@ -0,0 +1,8 @@
+import { registerRootComponent } from "expo";
+
+import App from "./App";
+
+// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
+// It also ensures that whether you load the app in Expo Go or in a native build,
+// the environment is set up appropriately
+registerRootComponent(App);

apps/showcase/package.json

@@ -1,48 +1,26 @@
 {
   "name": "headlessui-react-native-showcase",
-  "main": "expo-router/entry",
+  "main": "index.ts",
   "version": "1.0.0",
   "scripts": {
     "dev": "expo start --ios",
     "start": "expo start",
     "android": "expo start --android",
     "web": "expo start --web",
-    "test": "jest --watchAll",
     "lint": "expo lint"
   },
-  "jest": {
-    "preset": "jest-expo"
-  },
   "dependencies": {
-    "@expo/vector-icons": "^14.0.0",
-    "@react-navigation/native": "^6.0.2",
+    "@types/react": "~18.2.45",
     "expo": "~51.0.0",
-    "expo-constants": "~16.0.1",
-    "expo-font": "~12.0.4",
-    "expo-linking": "~6.3.1",
-    "expo-router": "~3.5.10",
-    "expo-splash-screen": "~0.27.4",
-    "expo-status-bar": "~1.12.1",
-    "expo-system-ui": "~3.0.4",
-    "expo-web-browser": "~13.0.3",
+    "expo-status-bar": "~1.11.1",
     "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-native": "0.74.1",
-    "react-native-gesture-handler": "~2.16.1",
-    "react-native-reanimated": "3.10.0",
-    "react-native-safe-area-context": "4.10.1",
-    "react-native-screens": "3.31.1",
-    "react-native-web": "~0.19.10",
-    "headlessui-react-native": "*"
+    "react-native": "0.73.6",
+    "typescript": "^5.3.0",
+    "headlessui-react-native": "~0.0.2"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
-    "@types/jest": "^29.5.12",
     "@types/react": "~18.2.45",
-    "@types/react-test-renderer": "^18.0.7",
-    "jest": "^29.2.1",
-    "jest-expo": "~51.0.1",
-    "react-test-renderer": "18.2.0",
     "typescript": "~5.3.3"
   },
   "private": true

apps/showcase/tsconfig.json

@@ -3,15 +3,8 @@
   "compilerOptions": {
     "strict": true,
     "paths": {
-      "@/*": [
-        "./*"
-      ]
+      "@/*": ["./*"]
     }
   },
-  "include": [
-    "**/*.ts",
-    "**/*.tsx",
-    ".expo/types/**/*.ts",
-    "expo-env.d.ts"
-  ]
+  "include": ["**/*.ts", "**/*.tsx"]
 }