create-granite-app 0.1.0 → 0.1.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # create-granite-app
 
+## 0.1.2
+
+### Patch Changes
+
+- 32c6959: Allow empty string for project name in `create-granite-app` to use the default value.
+
+## 0.1.1
+
+### Patch Changes
+
+- d675415: Improve scaffolding to provide a better showcase UI
+- 10a5f3f: empty
+
 ## 0.1.0
 
 ### Minor Changes

package/dist/index.js

@@ -5032,6 +5032,9 @@ function getAppName(appPath) {
 function assertValidAppName(input) {
   const appName = getAppName(input);
   const kebabCaseAppName = kebabCase(appName);
+  if (appName === "") {
+    return;
+  }
   if (kebabCaseAppName !== appName) {
     throw new Error(`Project name must be in kebab-case (e.g. ${kebabCaseAppName})`);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-granite-app",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "type": "module",
   "bin": {
     "cba": "./bin.js",
@@ -21,12 +21,13 @@
     "build": "tsup src/index.ts --format esm",
     "dev": "tsup src/index.ts --format esm --watch",
     "typecheck": "tsc --noEmit",
-    "test:no-parallel": "vitest --no-watch"
+    "test:no-parallel": "vitest --no-watch --coverage"
   },
   "devDependencies": {
     "@types/kill-port": "^2.0.1",
     "@types/node": "^22.10.2",
     "@types/yargs": "^17.0.33",
+    "@vitest/coverage-v8": "^2.1.8",
     "es-toolkit": "^1.30.1",
     "execa": "^9.5.2",
     "kill-port": "^2.0.1",

package/templates/granite-app/package.json

@@ -8,8 +8,8 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@granite-js/react-native": "0.1.0",
-    "@granite-js/native": "0.1.0",
+    "@granite-js/react-native": "0.1.2",
+    "@granite-js/native": "0.1.2",
     "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.1.0",
-    "@granite-js/plugin-hermes": "0.1.0",
-    "babel-preset-granite": "0.1.0",
+    "@granite-js/plugin-router": "0.1.2",
+    "@granite-js/plugin-hermes": "0.1.2",
+    "babel-preset-granite": "0.1.2",
     "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>;
   }
 }