Merge branch 'main' of https://github.com/gluestack/gluestack-ui-cli …

…into feat/v2-cli
gluestack · Sep 19, 2024 · e7cdb35 · e7cdb35
2 parents 569dc1e + 95c86e8
commit e7cdb35
Show file tree

Hide file tree

Showing 922 changed files with 71,467 additions and 20,108 deletions.
diff --git a/.gitignore b/.gitignore
@@ -35,3 +35,7 @@ yarn-error.log*
 # vercel
 .vercel
 package-lock.json
+
+# templates
+apps/templates/*/yarn.lock
+apps/templates/*/package-lock.json
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,3 +1,4 @@
 {
-  "cmake.sourceDirectory": "/Users/vidhikataria/Documents/Projects/gluestack-ui/gluestack-ui-cli/node_modules/cpu-features/deps/cpu_features"
+  "cmake.sourceDirectory": "/Users/vidhikataria/Documents/Projects/gluestack-ui/gluestack-ui-cli/node_modules/cpu-features/deps/cpu_features",
+  "editor.formatOnSave": true
 }
diff --git a/apps/templates/expo-router-with-gluestack-style-ejected/.gitignore b/apps/templates/expo-router-with-gluestack-style-ejected/.gitignore
@@ -0,0 +1,41 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo
+
+# @generated expo-cli sync-2b81b286409207a5da26e14c78851eb30d8ccbdb
+# The following patterns were generated by expo-cli
+
+expo-env.d.ts
+# @end expo-cli
diff --git a/apps/templates/expo-router-with-gluestack-style-ejected/app.json b/apps/templates/expo-router-with-gluestack-style-ejected/app.json
@@ -0,0 +1,39 @@
+{
+  "expo": {
+    "name": "expo-router-with-gluestack-style-ejected",
+    "slug": "expo-router-with-gluestack-style-ejected",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/images/icon.png",
+    "scheme": "myapp",
+    "userInterfaceStyle": "automatic",
+    "splash": {
+      "image": "./assets/images/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/images/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      }
+    },
+    "web": {
+      "bundler": "metro",
+      "output": "static",
+      "favicon": "./assets/images/favicon.png"
+    },
+    "plugins": [
+      "expo-router"
+    ],
+    "experiments": {
+      "typedRoutes": true
+    }
+  }
+}
diff --git a/apps/templates/expo-router-with-gluestack-style-ejected/app/+html.tsx b/apps/templates/expo-router-with-gluestack-style-ejected/app/+html.tsx
@@ -0,0 +1,48 @@
+import { ScrollViewStyleReset } from "expo-router/html";
+
+import React from "react";
+
+import { flush } from "@gluestack-style/react";
+
+// This file is web-only and used to configure the root HTML for every
+// web page during static rendering.
+// The contents of this function only run in Node.js environments and
+// do not have access to the DOM or browser APIs.
+export default function Root({ children }: { children: React.ReactNode }) {
+  // React.useLayoutEffect(() => {
+  //   console.log("SSR HERE, html");
+  // });
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
+        <meta
+          name="viewport"
+          content="width=device-width, initial-scale=1, shrink-to-fit=no"
+        />
+
+        {/* 
+          Disable body scrolling on web. This makes ScrollView components work closer to how they do on native. 
+          However, body scrolling is often nice to have for mobile web. If you want to enable it, remove this line.
+        */}
+        <ScrollViewStyleReset />
+
+        {/* Using raw CSS styles as an escape-hatch to ensure the background color never flickers in dark-mode. */}
+        <style dangerouslySetInnerHTML={{ __html: responsiveBackground }} />
+        {/* Add any additional <head> elements that you want globally available on web... */}
+      </head>
+      <body>{children}</body>
+    </html>
+  );
+}
+
+const responsiveBackground = `
+body {
+  background-color: #fff;
+}
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: #000;
+  }
+}`;
diff --git a/apps/templates/expo-router-with-gluestack-style-ejected/app/+not-found.tsx b/apps/templates/expo-router-with-gluestack-style-ejected/app/+not-found.tsx
@@ -0,0 +1,19 @@
+import { Link, Stack } from "expo-router";
+
+import { Text } from "@/components/ui/text";
+import { Center } from "@/components/ui/center";
+
+export default function NotFoundScreen() {
+  return (
+    <>
+      <Stack.Screen options={{ title: "Oops!" }} />
+      <Center flex={1}>
+        <Text color="$textDark200">This screen doesn't exist.</Text>
+
+        <Link href="/" style={{ marginTop: 10 }}>
+          <Text color="$primary500">Go to home screen!</Text>
+        </Link>
+      </Center>
+    </>
+  );
+}
diff --git a/apps/templates/expo-router-with-gluestack-style-ejected/app/_layout.tsx b/apps/templates/expo-router-with-gluestack-style-ejected/app/_layout.tsx
@@ -0,0 +1,66 @@
+import FontAwesome from "@expo/vector-icons/FontAwesome";
+import {
+  DarkTheme,
+  DefaultTheme,
+  ThemeProvider,
+} from "@react-navigation/native";
+import { useFonts } from "expo-font";
+import * as SplashScreen from "expo-splash-screen";
+import { useEffect, useLayoutEffect, useState } from "react";
+import { GluestackUIProvider } from "@/components/ui/gluestack-ui-provider";
+import { useColorScheme } from "@/components/useColorScheme";
+import { Slot } from "expo-router";
+
+export {
+  // Catch any errors thrown by the Layout component.
+  ErrorBoundary,
+} from "expo-router";
+
+// export const unstable_settings = {
+//   // Ensure that reloading on `/modal` keeps a back button present.
+//   initialRouteName: "gluestack",
+// };
+
+// Prevent the splash screen from auto-hiding before asset loading is complete.
+SplashScreen.preventAutoHideAsync();
+
+export default function RootLayout() {
+  const [loaded, error] = useFonts({
+    SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
+    ...FontAwesome.font,
+  });
+
+  const [styleLoaded, setStyleLoaded] = useState(false);
+  // Expo Router uses Error Boundaries to catch errors in the navigation tree.
+  useEffect(() => {
+    if (error) throw error;
+  }, [error]);
+
+  useEffect(() => {
+    if (loaded) {
+      SplashScreen.hideAsync();
+    }
+  }, [loaded]);
+
+  // useLayoutEffect(() => {
+  //   setStyleLoaded(true);
+  // }, [styleLoaded]);
+
+  // if (!loaded || !styleLoaded) {
+  //   return null;
+  // }
+
+  return <RootLayoutNav />;
+}
+
+function RootLayoutNav() {
+  const colorScheme = useColorScheme();
+
+  return (
+    <GluestackUIProvider>
+      <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
+        <Slot />
+      </ThemeProvider>
+    </GluestackUIProvider>
+  );
+}
diff --git a/apps/templates/expo-router-with-gluestack-style-ejected/app/index.tsx b/apps/templates/expo-router-with-gluestack-style-ejected/app/index.tsx
@@ -0,0 +1,133 @@
+import Gradient from "@/assets/Icons/Gradient";
+import DocumentData from "@/assets/Icons/DocumentData";
+import LightBulbPerson from "@/assets/Icons/LightbulbPerson";
+import Rocket from "@/assets/Icons/Rocket";
+import Logo from "@/assets/Icons/Logo";
+import { Box } from "@/components/ui/box";
+import { HStack } from "@/components/ui/hstack";
+import { ScrollView } from "react-native";
+import { Text } from "@/components/ui/text";
+
+import { Link } from "expo-router";
+
+const FeatureCard = ({ iconSvg: IconSvg, name, desc }: any) => {
+  return (
+    <Box
+      flexDirection="column"
+      borderWidth={1}
+      borderColor="$borderDark700"
+      $web-flex={1}
+      m="$2"
+      p="$4"
+      rounded="$md"
+    >
+      <Box alignItems="center" display="flex" flexDirection="row">
+        <Text>
+          <IconSvg />
+        </Text>
+        <Text fontSize={22} color="$white" fontWeight="500" ml="$2">
+          {name}
+        </Text>
+      </Box>
+      <Text color="$textDark400" mt="$2">
+        {desc}
+      </Text>
+    </Box>
+  );
+};
+
+export default function Home() {
+  return (
+    <Box flex={1} backgroundColor="$black">
+      <ScrollView
+        style={{ height: "100%" }}
+        contentContainerStyle={{ flexGrow: 1 }}
+      >
+        <Box
+          position="absolute"
+          $base-h={500}
+          $base-w={500}
+          $lg-h={500}
+          $lg-w={500}
+        >
+          <Gradient />
+        </Box>
+
+        <Box
+          height="60%"
+          $base-my="$16"
+          $base-mx="$5"
+          $base-height="80%"
+          $lg-my="$24"
+          $lg-mx="$5"
+          justifyContent="space-between"
+        >
+          <HStack
+            $base-flexDirection="column"
+            $md-flexDirection="row"
+            gap={10}
+            justifyContent="space-between"
+            $base-alignItems="center"
+            marginHorizontal="$10"
+          >
+            <Box
+              bg="#64748B33"
+              py="$2"
+              px="$6"
+              rounded="$full"
+              alignItems="center"
+              marginTop={20}
+              $base-flexDirection="column"
+              $sm-flexDirection="row"
+              $md-flexDirection="flex-start"
+            >
+              <Text color="$white" fontWeight="$normal">
+                Get started by editing
+              </Text>
+              <Text color="$white" fontWeight="$medium" ml="$2">
+                app/index.tsx
+              </Text>
+            </Box>
+            <Link href="/tabs/">
+              <Box
+                bg="#64748B33"
+                rounded="$full"
+                alignItems="center"
+                justifyContent="center"
+                $web-py="$2"
+                px="$6"
+                marginTop="$5"
+              >
+                <Text color="$white" fontWeight="$normal">
+                  Explore Tab Navigation
+                </Text>
+              </Box>
+            </Link>
+          </HStack>
+
+          <Box justifyContent="center" alignItems="center">
+            <Logo />
+          </Box>
+
+          <Box $base-flexDirection="column" $md-flexDirection="row">
+            <FeatureCard
+              iconSvg={DocumentData}
+              name="Docs"
+              desc="Find in-depth information about gluestack features and API."
+            />
+            <FeatureCard
+              iconSvg={LightBulbPerson}
+              name="Learn"
+              desc="Learn about gluestack in an interactive course with quizzes!"
+            />
+            <FeatureCard
+              iconSvg={Rocket}
+              name="Deploy"
+              desc="Instantly drop your gluestack site to a shareable URL with vercel."
+            />
+          </Box>
+        </Box>
+      </ScrollView>
+    </Box>
+  );
+}
diff --git a/apps/templates/expo-router-with-gluestack-style-ejected/app/modal.tsx b/apps/templates/expo-router-with-gluestack-style-ejected/app/modal.tsx
@@ -0,0 +1,21 @@
+import { StatusBar } from "expo-status-bar";
+import { Platform } from "react-native";
+
+import EditScreenInfo from "@/components/EditScreenInfo";
+import { Box } from "@/components/ui/box";
+import { Text } from "@/components/ui/text";
+
+export default function ModalScreen() {
+  return (
+    <Box flex={1} alignItems="center" justifyContent="center">
+      <Text fontSize={20} fontWeight="bold">
+        Modal
+      </Text>
+      <Box my={30} h={1} w="80%" />
+      <EditScreenInfo path="app/modal.tsx" />
+
+      {/* Use a light status bar on iOS to account for the black space above the modal */}
+      <StatusBar style={Platform.OS === "ios" ? "light" : "auto"} />
+    </Box>
+  );
+}