noboarding 0.1.0-beta → 1.0.1-beta

package/AI_CUSTOM_SCREEN_GUIDE.md

@@ -237,7 +237,11 @@ export const SummaryScreen: React.FC<CustomScreenProps> = ({
 
 ```typescript
 <OnboardingFlow
-  apiKey="sk_live_..."
+  // Dual API keys for automatic environment detection
+  testKey="nb_test_..."
+  productionKey="nb_live_..."
+  // SDK auto-detects __DEV__ and uses appropriate key
+
   customComponents={{
     NameScreen,
     AgeScreen,
@@ -543,7 +547,12 @@ import { AgeScreen } from './screens/AgeScreen';
 import { PreferencesScreen } from './screens/PreferencesScreen';
 
 <OnboardingFlow
-  apiKey="sk_live_your_api_key"
+  // Use dual API keys for automatic environment detection
+  testKey="nb_test_your_test_key"
+  productionKey="nb_live_your_production_key"
+  // The SDK automatically uses testKey when __DEV__ is true
+  // and productionKey in production builds
+
   customComponents={{
     NameScreen: NameScreen,           // Component name MUST match exactly
     AgeScreen: AgeScreen,             // Case-sensitive!
@@ -593,10 +602,14 @@ npm start
 
 ### Step 5: Deploy & Publish
 
-1. Build production app
-2. Submit to App Store / Google Play
-3. **WAIT for approval**
-4. **After app is live:** Publish flow in dashboard
+1. Test locally with Test API Key (development mode)
+2. In dashboard: **Publish → Publish for Testing**
+3. Build production app
+4. Submit to App Store / Google Play
+5. **WAIT for approval**
+6. **After app is live:** In dashboard, **Publish → Publish to Production**
+
+**Note:** Test and Production environments are separate. You can safely test changes using the Test API Key before rolling them out to production users with the Production API Key.
 
 ---
 
@@ -831,7 +844,10 @@ const styles = StyleSheet.create({
 
 ```typescript
 <OnboardingFlow
-  apiKey="sk_live_..."
+  // Dual API keys - SDK auto-detects environment
+  testKey="nb_test_..."
+  productionKey="nb_live_..."
+
   customComponents={{
     Step1EmailScreen,
     Step2GoalsScreen,

package/README.md

@@ -513,6 +513,8 @@ import { API, AnalyticsManager } from 'noboarding';
 
 ## Development
 
+### Building the SDK
+
 The TestApp imports the SDK from the compiled `lib/` directory (`"main": "lib/index.js"`), not from `src/` directly. After making any changes to files in `sdk/src/`, you must rebuild before testing:
 
 ```bash
@@ -522,6 +524,63 @@ npm run build
 
 Then restart the TestApp. If you skip this step, the TestApp will still be running the old compiled code and your changes won't take effect.
 
+### Dashboard Preview Integration
+
+The dashboard uses **local copies** of SDK source files for the preview feature. When you modify SDK source files, they need to be synced to the dashboard.
+
+**Why copies?** Next.js/Turbopack doesn't support importing from external directories with the react-native-web setup, so the dashboard maintains local copies in `dashboard/lib/sdk/`.
+
+#### Files That Need Syncing
+
+When you modify these SDK files:
+- `src/types.ts` → Auto-synced to `dashboard/lib/sdk/types.ts`
+- `src/variableUtils.ts` → Auto-synced to `dashboard/lib/sdk/variableUtils.ts`
+- `src/components/ElementRenderer.tsx` → ⚠️ **NOT auto-synced** (dashboard has web-specific modifications)
+
+**ElementRenderer Special Case:**
+
+The dashboard copy of `ElementRenderer.tsx` has web-specific modifications for icon support:
+- Uses `react-icons` instead of `@expo/vector-icons`
+- Renders real icons in preview (Feather, Material, Ionicons, FontAwesome)
+- Gradients fall back to solid colors
+
+**If you modify ElementRenderer.tsx significantly:**
+1. Run `npm run sync:full` from project root to copy it
+2. Manually re-add web icon imports and logic (check git diff to see what changed)
+
+#### Syncing Methods
+
+**Manual sync (run when needed):**
+```bash
+# From project root
+npm run sync
+```
+
+**Auto-sync during development:**
+```bash
+# From project root
+npm run sync:watch
+```
+
+This watches SDK files and automatically copies changes to the dashboard when you save.
+
+**Full development mode:**
+```bash
+# From project root - starts dashboard + auto-sync
+npm run dev
+```
+
+This command:
+1. Syncs SDK files to dashboard
+2. Starts file watcher for auto-sync
+3. Starts dashboard dev server
+
+#### Important Notes
+
+- ⚠️ **Dashboard preview uses copies** - Changes to SDK files won't appear in dashboard preview until synced
+- ✅ **Mobile app uses npm package** - TestApp uses the built SDK from `lib/`, requires `npm run build`
+- 🔄 **Keep in sync** - Run `npm run sync:watch` while developing SDK to keep dashboard preview accurate
+
 ## Requirements
 
 - React Native >= 0.60.0

package/lib/OnboardingFlow.js

@@ -110,7 +110,10 @@ const OnboardingFlow = ({ apiKey, testKey, productionKey, onComplete, onSkip, ba
             // Fetch configuration
             const configResponse = await api.getConfig();
             // Backward compatibility: normalize legacy 'custom_screen' (with elements) to 'noboard_screen'
-            const normalizedScreens = configResponse.config.screens.map(s => (Object.assign(Object.assign({}, s), { type: (s.type === 'custom_screen' && s.elements) ? 'noboard_screen' : s.type })));
+            const normalizedScreens = configResponse.config.screens
+                .map(s => (Object.assign(Object.assign({}, s), { type: (s.type === 'custom_screen' && s.elements) ? 'noboard_screen' : s.type })))
+                // Filter out hidden screens (dashboard show/hide feature)
+                .filter(s => !s.hidden);
             setScreens(normalizedScreens);
             setLoading(false);
         }

package/lib/components/ElementRenderer.js

@@ -204,7 +204,14 @@ const RenderNode = ({ element, toggledIds, groupSelections, onAction, variables
     const wrapWithAction = (content) => {
         if (!hasAction)
             return content;
-        return (<react_native_1.TouchableOpacity key={element.id} activeOpacity={0.7} onPress={() => onAction(element)}>
+        // Extract width/alignment styles that should apply to TouchableOpacity wrapper
+        // This ensures buttons with width: "100%" don't shrink to content
+        const wrapperStyle = {};
+        if (style.width)
+            wrapperStyle.width = style.width;
+        if (style.alignSelf)
+            wrapperStyle.alignSelf = style.alignSelf;
+        return (<react_native_1.TouchableOpacity key={element.id} activeOpacity={0.7} onPress={() => onAction(element)} style={wrapperStyle}>
         {content}
       </react_native_1.TouchableOpacity>);
     };

package/lib/types.d.ts

@@ -6,6 +6,7 @@ export interface ScreenConfig {
     props: Record<string, any>;
     elements?: ElementNode[];
     custom_component_name?: string;
+    hidden?: boolean;
 }
 export type ElementType = 'vstack' | 'hstack' | 'zstack' | 'scrollview' | 'text' | 'image' | 'video' | 'lottie' | 'icon' | 'input' | 'spacer' | 'divider';
 export interface ElementNode {

package/package.json

@@ -1,13 +1,19 @@
 {
   "name": "noboarding",
-  "version": "0.1.0-beta",
+  "version": "1.0.1-beta",
   "description": "React Native SDK for remote onboarding flow management",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "default": "./lib/index.js"
+    },
+    "./src/*": "./src/*"
+  },
   "scripts": {
     "build": "tsc",
-    "watch": "tsc --watch",
-    "prepare": "npm run build"
+    "watch": "tsc --watch"
   },
   "keywords": [
     "react-native",

package/src/OnboardingFlow.tsx

@@ -102,10 +102,13 @@ export const OnboardingFlow: React.FC<OnboardingFlowProps> = ({
       // Fetch configuration
       const configResponse = await api.getConfig();
       // Backward compatibility: normalize legacy 'custom_screen' (with elements) to 'noboard_screen'
-      const normalizedScreens = configResponse.config.screens.map(s => ({
-        ...s,
-        type: (s.type === ('custom_screen' as any) && s.elements) ? 'noboard_screen' as ScreenConfig['type'] : s.type,
-      }));
+      const normalizedScreens = configResponse.config.screens
+        .map(s => ({
+          ...s,
+          type: (s.type === ('custom_screen' as any) && s.elements) ? 'noboard_screen' as ScreenConfig['type'] : s.type,
+        }))
+        // Filter out hidden screens (dashboard show/hide feature)
+        .filter(s => !s.hidden);
       setScreens(normalizedScreens);
 
       setLoading(false);

package/src/components/ElementRenderer.tsx

@@ -216,11 +216,19 @@ const RenderNode: React.FC<RenderNodeProps> = ({ element, toggledIds, groupSelec
   const hasAction = !!element.action || (element.actions && element.actions.length > 0);
   const wrapWithAction = (content: React.ReactElement): React.ReactElement => {
     if (!hasAction) return content;
+
+    // Extract width/alignment styles that should apply to TouchableOpacity wrapper
+    // This ensures buttons with width: "100%" don't shrink to content
+    const wrapperStyle: any = {};
+    if (style.width) wrapperStyle.width = style.width;
+    if (style.alignSelf) wrapperStyle.alignSelf = style.alignSelf;
+
     return (
       <TouchableOpacity
         key={element.id}
         activeOpacity={0.7}
         onPress={() => onAction(element)}
+        style={wrapperStyle}
       >
         {content}
       </TouchableOpacity>

package/src/types.ts

@@ -12,6 +12,8 @@ export interface ScreenConfig {
   elements?: ElementNode[];
   // For custom_screen type — name of the developer-registered component
   custom_component_name?: string;
+  // Dashboard visibility control — if true, screen is hidden from onboarding flow
+  hidden?: boolean;
 }
 
 // ─── Element Tree Types (matches dashboard primitives) ───