create-granite-app 0.0.1 → 0.1.1

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # create-granite-app
 
+## 0.1.1
+
+### Patch Changes
+
+- d675415: Improve scaffolding to provide a better showcase UI
+- 10a5f3f: empty
+
+## 0.1.0
+
+### Minor Changes
+
+- 561a3ed: fix: docs deadlink
+
 ## 0.0.3
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-granite-app",
-  "version": "0.0.1",
+  "version": "0.1.1",
   "type": "module",
   "bin": {
     "cba": "./bin.js",

package/templates/granite-app/package.json

@@ -8,8 +8,8 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@granite-js/react-native": "0.0.1",
-    "@granite-js/native": "0.0.1",
+    "@granite-js/react-native": "0.1.1",
+    "@granite-js/native": "0.1.1",
     "react": "18.2.0",
     "react-native": "0.72.6"
   },
@@ -21,9 +21,9 @@
     "@types/jest": "^29.5.14",
     "@types/node": "^22.10.2",
     "@types/react": "18.3.3",
-    "@granite-js/plugin-router": "0.0.1",
-    "@granite-js/plugin-hermes": "0.0.1",
-    "babel-preset-granite": "0.0.1",
+    "@granite-js/plugin-router": "0.1.1",
+    "@granite-js/plugin-hermes": "0.1.1",
+    "babel-preset-granite": "0.1.1",
     "react-test-renderer": "18.2.0",
     "jest": "^29.7.0",
     "typescript": "^5.8.3"

package/templates/granite-app/pages/about.tsx

@@ -0,0 +1 @@
+export { Route } from 'pages/about';

package/templates/granite-app/pages/index.tsx

@@ -1,16 +1 @@
-import React from 'react';
-import { Text, View } from 'react-native';
-import { createRoute } from '@granite-js/react-native';
-
-export const Route = createRoute('/', {
-  validateParams: (params) => params,
-  component: Index,
-});
-
-export function Index() {
-  return (
-    <View>
-      <Text>Hello Index</Text>
-    </View>
-  );
-}
+export { Route } from 'pages/index';

package/templates/granite-app/src/pages/about.tsx

@@ -0,0 +1,70 @@
+import { createRoute } from '@granite-js/react-native';
+import React from 'react';
+import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
+
+export const Route = createRoute('/about', {
+  component: Page,
+});
+
+function Page() {
+  const navigation = Route.useNavigation();
+
+  const handleGoBack = () => {
+    navigation.goBack();
+  };
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>About Granite</Text>
+      <Text style={styles.description}>Granite is a powerful and flexible React Native Framework 🚀</Text>
+      <TouchableOpacity style={styles.button} onPress={handleGoBack}>
+        <Text style={styles.buttonText}>Go Back</Text>
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 24,
+    backgroundColor: '#F7FAFC',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: 'bold',
+    color: '#1A202C',
+    marginBottom: 16,
+    textAlign: 'center',
+  },
+  description: {
+    fontSize: 18,
+    color: '#4A5568',
+    textAlign: 'center',
+    marginBottom: 12,
+    lineHeight: 26,
+  },
+  button: {
+    marginTop: 24,
+    backgroundColor: '#0064FF',
+    paddingVertical: 12,
+    paddingHorizontal: 32,
+    borderRadius: 8,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+  buttonText: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+});

package/templates/granite-app/src/pages/index.tsx

@@ -0,0 +1,104 @@
+import { createRoute } from '@granite-js/react-native';
+import React from 'react';
+import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
+
+export const Route = createRoute('/', {
+  component: Page,
+});
+
+function Page() {
+  const navigation = Route.useNavigation();
+
+  const goToAboutPage = () => {
+    navigation.navigate('/about');
+  };
+
+  return (
+    <Container>
+      <Text style={styles.title}>🎉 Welcome! 🎉</Text>
+      <Text style={styles.subtitle}>
+        This is a demo page for the <Text style={styles.brandText}>Granite</Text> Framework.
+      </Text>
+      <Text style={styles.description}>This page was created to showcase the features of the Granite.</Text>
+      <TouchableOpacity style={styles.button} onPress={goToAboutPage}>
+        <Text style={styles.buttonText}>Go to About Page</Text>
+      </TouchableOpacity>
+    </Container>
+  );
+}
+
+function Container({ children }: { children: React.ReactNode }) {
+  return <View style={styles.container}>{children}</View>;
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 16,
+    backgroundColor: 'white',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  brandText: {
+    color: '#0064FF',
+    fontWeight: 'bold',
+  },
+  text: {
+    fontSize: 24,
+    color: '#202632',
+    textAlign: 'center',
+    marginBottom: 10,
+  },
+  title: {
+    fontSize: 32,
+    fontWeight: 'bold',
+    color: '#1A202C',
+    textAlign: 'center',
+    marginBottom: 16,
+  },
+  subtitle: {
+    fontSize: 18,
+    color: '#4A5568',
+    textAlign: 'center',
+    marginBottom: 24,
+  },
+  description: {
+    fontSize: 16,
+    color: '#718096',
+    textAlign: 'center',
+    marginBottom: 32,
+    lineHeight: 24,
+  },
+  button: {
+    backgroundColor: '#0064FF',
+    paddingVertical: 12,
+    paddingHorizontal: 32,
+    borderRadius: 8,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+  buttonText: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+  codeContainer: {
+    padding: 8,
+    backgroundColor: '#333',
+    borderRadius: 4,
+    width: '100%',
+  },
+  code: {
+    color: 'white',
+    fontFamily: 'monospace',
+    letterSpacing: 0.5,
+    fontSize: 14,
+  },
+});

package/templates/granite-app/src/router.gen.ts

@@ -1,9 +1,11 @@
 /* eslint-disable */
 // This file is auto-generated by @granite-js/react-native. DO NOT EDIT.
-import { Route as _IndexRoute } from '../pages';
+import { Route as _AboutRoute } from '../pages/about';
+import { Route as _IndexRoute } from '../pages/';
 
 declare module '@granite-js/react-native' {
   interface RegisterScreen {
+    '/about': ReturnType<typeof _AboutRoute.useParams>;
     '/': ReturnType<typeof _IndexRoute.useParams>;
   }
 }