@idealyst/cli 1.0.15 → 1.0.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/cli",
-  "version": "1.0.15",
+  "version": "1.0.17",
   "description": "CLI tool for generating Idealyst Framework projects",
   "type": "module",
   "main": "dist/index.js",

package/templates/App.tsx

@@ -0,0 +1,16 @@
+import './App.css';
+import { BrowserRouter } from 'react-router-dom';
+import { ExampleStackRouter, } from '@idealyst/navigation/examples';
+import { NavigatorProvider } from '@idealyst/navigation';
+
+function App() {
+  return (
+    <div className="App">
+      <BrowserRouter>
+        <NavigatorProvider route={ExampleStackRouter} />
+      </BrowserRouter>
+    </div>
+  );  
+}
+
+export default App; 

package/templates/native/App.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import {
+  SafeAreaView,
+} from 'react-native';
+
+import { ExampleStackRouter } from '@idealyst/navigation/examples';
+import { NavigatorProvider } from '@idealyst/navigation';
+
+
+function App() {  
+
+  const backgroundStyle = {
+    flex: 1,
+  };
+
+  return (
+    <SafeAreaView style={backgroundStyle}>
+      <NavigatorProvider route={ExampleStackRouter} />
+    </SafeAreaView>
+  );
+}
+
+export default App;

package/templates/native/babel.config.js

@@ -1,6 +1,10 @@
 module.exports = {
-  presets: ['@react-native/babel-preset'],
+  presets: ['module:@react-native/babel-preset'],
   plugins: [
+    ['react-native-unistyles/plugin', {
+      root: 'src',
+      autoProcessPaths: ['@idealyst/components', '@idealyst/navigation', '@idealyst/theme'],
+    }],
     'react-native-reanimated/plugin',
   ],
-}; 
+};

package/templates/native/index.js

@@ -1,3 +1,5 @@
+import '@idealyst/theme/unistyles';
+
 import { AppRegistry } from 'react-native';
 import App from './src/App';
 

package/templates/native/metro.config.js

@@ -1,11 +1,26 @@
-const { getDefaultConfig } = require('@react-native/metro-config');
+const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
+const path = require('path');
 
-/**
- * Metro configuration
- * https://reactnative.dev/docs/metro
- *
- * @type {import('metro-config').MetroConfig}
- */
-const config = getDefaultConfig(__dirname);
+const { wrapWithReanimatedMetroConfig } = require('react-native-reanimated/metro-config');
 
-module.exports = config; 
+const config = {
+  projectRoot: __dirname,
+  resolver: {
+    nodeModulesPaths: [
+      path.resolve(__dirname, 'node_modules'),
+    ],
+    // Important for Idealyst to use .native extensions for React Native (eg: @idealyst/components/src/Button/Button.native.tsx)
+    sourceExts: ['native.tsx', 'native.ts', 'tsx', 'ts', 'native.jsx', 'native.js', 'jsx', 'js', 'json'],
+  },
+  watchFolders: [
+    path.resolve(__dirname, 'src'),
+    // To support live updates when developing components in other workspaces, add the folders here. Make sure
+    // path.resolve(__dirname, '../shared/'),
+  ],
+  watcher: {
+    // When configuring custom components with .native extensions, make sure the watcher looks for them
+    additionalExts: ['native.tsx', 'native.ts', 'native.jsx', 'native.js'],
+  },
+};
+
+module.exports = wrapWithReanimatedMetroConfig(mergeConfig(getDefaultConfig(__dirname), config));

package/templates/native/src/App.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import { Screen, View, Text, Button } from '@idealyst/components';
-import { UnistylesRegistry } from 'react-native-unistyles';
-import { lightTheme, darkTheme } from '@idealyst/theme';
-
-// Register themes
-UnistylesRegistry.addThemes({
-  light: lightTheme,
-  dark: darkTheme,
-});
-
-const App = () => {
-  return (
-    <Screen>
-      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
-        <Text variant="h1">Welcome to {{projectName}}</Text>
-        <Text variant="body">
-          This is a React Native app built with the Idealyst Framework.
-        </Text>
-        <Button 
-          title="Get Started" 
-          onPress={() => console.log('Button pressed!')}
-          style={{ marginTop: 20 }}
-        />
-      </View>
-    </Screen>
-  );
-};
-
-export default App;