@idealyst/cli 1.1.8 → 1.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/cli",
-  "version": "1.1.8",
+  "version": "1.1.9",
   "description": "CLI tool for generating Idealyst Framework projects",
   "readme": "README.md",
   "main": "dist/index.js",

package/template/packages/mobile/babel.config.js

@@ -1,10 +1,26 @@
 module.exports = {
   presets: ['module:@react-native/babel-preset'],
   plugins: [
+    // Idealyst StyleBuilder plugin - expands $iterator patterns in defineStyle/extendStyle
+    // Must run BEFORE react-native-unistyles/plugin
+    ['@idealyst/theme/plugin', {
+      autoProcessPaths: [
+        '@idealyst/components',
+        '@idealyst/navigation',
+        '@idealyst/theme',
+      ],
+      // Path to your theme configuration file (relative to this babel.config.js)
+      themePath: '../shared/src/unistyles.ts',
+    }],
+    // Unistyles plugin - processes StyleSheet.create calls
     ['react-native-unistyles/plugin', {
-      root: 'src',
-      autoProcessPaths: ['@idealyst/components', '@idealyst/navigation', '@idealyst/theme'],
+      autoProcessPaths: [
+        '@idealyst/components',
+        '@idealyst/navigation',
+        '@idealyst/theme',
+      ],
     }],
-    'react-native-reanimated/plugin'
+    // Reanimated 4 uses the worklets plugin
+    'react-native-worklets/plugin',
   ],
-};
+};

package/template/packages/mobile/index.js

@@ -1,6 +1,8 @@
-import '@idealyst/theme/unistyles';
+// Import shared unistyles configuration FIRST
+// This ensures the theme is registered before any component stylesheets
+import '@{{projectName}}/shared';
 
 import { AppRegistry } from 'react-native';
 import App from './src/App';
 
-AppRegistry.registerComponent('{{projectName}}', () => App); 
+AppRegistry.registerComponent('{{projectName}}', () => App);

package/template/packages/shared/src/index.ts

@@ -1,3 +1,6 @@
+// Configure Unistyles theme BEFORE any component imports
+import './unistyles';
+
 // Export the unified App component
 export { App } from './components';
 

package/template/packages/shared/src/unistyles.ts

@@ -0,0 +1,50 @@
+/**
+ * Theme configuration for Unistyles.
+ *
+ * This file must be imported BEFORE any @idealyst/components to ensure
+ * the theme is registered before stylesheets are created.
+ *
+ * Customize your themes here by extending the base Idealyst themes.
+ */
+import { StyleSheet } from 'react-native-unistyles';
+import { fromTheme, lightTheme, darkTheme } from '@idealyst/theme';
+
+// Create custom themes by extending the base themes
+// You can use .addIntent(), .addRadius(), .addShadow(), .setSizes() to customize
+const customLightTheme = fromTheme(lightTheme)
+  // Example: Add custom intents
+  // .addIntent('brand', {
+  //   primary: '#6366f1',
+  //   secondary: '#8b5cf6',
+  //   contrast: '#ffffff',
+  // })
+  .build();
+
+const customDarkTheme = fromTheme(darkTheme)
+  // Example: Add custom intents (should match light theme)
+  // .addIntent('brand', {
+  //   primary: '#818cf8',
+  //   secondary: '#a78bfa',
+  //   contrast: '#000000',
+  // })
+  .build();
+
+// Register custom theme type for TypeScript inference
+declare module '@idealyst/theme' {
+  interface CustomThemeRegistry {
+    theme: typeof customLightTheme;
+  }
+}
+
+// Configure Unistyles with your themes
+StyleSheet.configure({
+  settings: {
+    initialTheme: 'light',
+    // Enable adaptive themes to follow system preference
+    // adaptiveThemes: true,
+  },
+  themes: {
+    light: customLightTheme,
+    dark: customDarkTheme,
+  },
+});

package/template/packages/web/src/main.tsx

@@ -1,4 +1,6 @@
-import '@idealyst/navigation/examples/unistyles';
+// Import shared unistyles configuration FIRST
+// This ensures the theme is registered before any component stylesheets
+import '@{{projectName}}/shared';
 
 import * as React from 'react';
 import ReactDOM from 'react-dom/client';

package/template/packages/web/vite.config.ts

@@ -24,6 +24,21 @@ export default defineConfig({
           ],
         ],
         plugins: [
+          // Idealyst StyleBuilder plugin - expands $iterator patterns
+          // Must run BEFORE react-native-unistyles/plugin
+          [
+            "@idealyst/theme/plugin",
+            {
+              autoProcessPaths: [
+                "@idealyst/components",
+                "@idealyst/navigation",
+                "@idealyst/theme",
+              ],
+              // Path to your theme configuration file (relative to project root)
+              themePath: "../shared/src/unistyles.ts",
+            },
+          ],
+          // Unistyles plugin - processes StyleSheet.create calls
           [
             "react-native-unistyles/plugin",
             {
@@ -35,6 +50,7 @@ export default defineConfig({
               ],
             },
           ],
+          // Web-specific component plugin
           ["@idealyst/components/plugin/web", { root: "src" }],
         ],
       },
@@ -76,7 +92,7 @@ export default defineConfig({
       "@idealyst/components",
       "@idealyst/navigation",
       "@idealyst/theme",
-      "@test/shared",
+      "@{{projectName}}/shared",
     ],
     esbuildOptions: {
       loader: {