newcandies 0.1.23 → 0.1.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "newcandies",
-  "version": "0.1.23",
+  "version": "0.1.25",
   "description": "Scaffold Expo Router + Uniwind React Native apps with layered templates.",
   "type": "module",
   "bin": {

package/templates/app-briefs/expo-router/cozynotes/README.md

@@ -0,0 +1,79 @@
+# CozyNote - Expo Router Stack Navigation
+
+A beautiful note-taking app brief for learning Expo Router stack navigation.
+
+## Overview
+
+This app brief demonstrates stack navigation patterns including:
+- Basic stack navigation with `Stack` component
+- Dynamic routes with `[id]` parameter
+- Native header configuration with `Stack.Screen`
+- Header customization (left, right, title)
+- Modal presentation styles
+
+## Getting Started
+
+```bash
+# Install dependencies
+bun install
+
+# Start the app
+bun start
+```
+
+## Learning Tasks
+
+### 1. Set up Stack Navigator
+Replace `<Slot />` in `_layout.tsx` with proper `<Stack>` configuration.
+
+### 2. Build Note Detail Screen (`note/[id].tsx`)
+- Add `BackButton` component at top
+- Display note title and full content
+- Add edit button linking to `/note/edit`
+
+### 3. Build Create Note Screen (`note/new.tsx`)
+- Add header with close button and "Create" action
+- Implement title and content inputs
+- Handle form submission
+
+### 4. Build Edit Note Screen (`note/edit.tsx`)
+- Pre-fill inputs with existing note data
+- Add save functionality
+
+### 5. Build Settings Screen (`settings.tsx`)
+- Display app info
+- Link to About screen
+
+### 6. Build About Screen (`about.tsx`)
+- Configure native header with `Stack.Screen`
+- Add header buttons (back, share, info)
+- Display app description
+
+## Project Structure
+
+```
+src/
+├── app/
+│   ├── _layout.tsx      # Root stack navigator
+│   ├── index.tsx        # Home screen (notes list)
+│   ├── settings.tsx     # Settings screen
+│   ├── about.tsx        # About screen (native header)
+│   └── note/
+│       ├── [id].tsx     # Note detail (dynamic route)
+│       ├── new.tsx      # Create note
+│       └── edit.tsx     # Edit note
+├── components/
+│   ├── screens/
+│   │   └── home/
+│   │       └── note-card.tsx
+│   └── ui/
+│       ├── back-button.tsx
+│       ├── screen.tsx
+│       ├── squircle.tsx
+│       └── text.tsx
+└── lib/
+    └── constants/
+        ├── index.ts
+        └── notes.ts
+```
+

package/templates/app-briefs/expo-router/cozynotes/app.json

@@ -0,0 +1,51 @@
+{
+  "expo": {
+    "name": "cozynotes",
+    "slug": "cozynotes",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/images/icon.png",
+    "scheme": "cozynotes",
+    "userInterfaceStyle": "automatic",
+    "newArchEnabled": true,
+    "splash": {
+      "image": "./assets/images/splash-icon.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "ios": {
+      "supportsTablet": true,
+      "bundleIdentifier": "com.example.cozynotes"
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/images/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      },
+      "edgeToEdgeEnabled": true,
+      "predictiveBackGestureEnabled": false,
+      "package": "com.example.cozynotes"
+    },
+    "web": {
+      "bundler": "metro",
+      "output": "static",
+      "favicon": "./assets/images/favicon.png"
+    },
+    "plugins": [
+      "expo-router",
+      [
+        "expo-font",
+        {
+          "fonts": [
+            "./assets/fonts/Caveat-Regular.ttf",
+            "./assets/fonts/Caveat-Bold.ttf"
+          ]
+        }
+      ]
+    ],
+    "experiments": {
+      "typedRoutes": true
+    }
+  }
+}
+

package/templates/app-briefs/expo-router/cozynotes/babel.config.js

@@ -0,0 +1,8 @@
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ["babel-preset-expo"],
+    plugins: ["react-native-reanimated/plugin"],
+  };
+};
+

package/templates/app-briefs/expo-router/cozynotes/eas.json

@@ -0,0 +1,22 @@
+{
+  "cli": {
+    "version": ">= 7.0.0"
+  },
+  "build": {
+    "development": {
+      "android": {
+        "buildType": "apk"
+      },
+      "developmentClient": true,
+      "distribution": "internal"
+    },
+    "preview": {
+      "distribution": "internal"
+    },
+    "production": {}
+  },
+  "submit": {
+    "production": {}
+  }
+}
+

package/templates/app-briefs/expo-router/cozynotes/env

@@ -0,0 +1,2 @@
+WITH_ROZENITE=true
+

package/templates/app-briefs/expo-router/cozynotes/expo-env.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="expo/types" />
+
+// NOTE: This file should not be edited and should be in your git ignore

package/templates/app-briefs/expo-router/cozynotes/global.css

@@ -0,0 +1,37 @@
+@import "tailwindcss";
+@import "uniwind";
+
+@theme {
+  --font-caveat: 'Caveat-Regular';
+  --font-caveat-bold: 'Caveat-Bold';
+}
+
+@layer theme {
+  :root {
+    @variant light {
+      --color-background: #faf8f6;
+      --color-foreground: #2d2d2d;
+
+      --color-primary: #2d2d2d;
+      --color-primary-foreground: #ffffff;
+
+      --color-muted: #f0eeec;
+      --color-muted-foreground: #a8a8a8;
+
+      --color-card: #ffffff;
+    }
+    @variant dark {
+      --color-background: #1a1a1a;
+      --color-foreground: #f5f5f5;
+
+      --color-primary: #f5f5f5;
+      --color-primary-foreground: #1a1a1a;
+
+      --color-muted: #2d2d2d;
+      --color-muted-foreground: #888888;
+
+      --color-card: #242424;
+    }
+  }
+}
+

package/templates/app-briefs/expo-router/cozynotes/metro.config.js

@@ -0,0 +1,15 @@
+const { withRozenite } = require("@rozenite/metro");
+const { getDefaultConfig } = require("expo/metro-config");
+const { withUniwindConfig } = require("uniwind/metro");
+
+const config = getDefaultConfig(__dirname);
+
+module.exports = withRozenite(
+  withUniwindConfig(config, {
+    cssEntryFile: "./global.css",
+    dtsFile: "./uniwind-types.d.ts",
+    extraThemes: [],
+  }),
+  { enabled: process.env.WITH_ROZENITE === "true" }
+);
+

package/templates/app-briefs/expo-router/cozynotes/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "cozynotes",
+  "version": "0.0.0",
+  "private": true,
+  "main": "expo-router/entry",
+  "scripts": {
+    "start": "expo start --dev-client",
+    "android": "expo run:android",
+    "ios": "expo run:ios",
+    "prebuild": "expo prebuild"
+  },
+  "dependencies": {
+    "@expo/vector-icons": "^15.0.3",
+    "@gorhom/bottom-sheet": "latest",
+    "@rozenite/mmkv-plugin": "^1.0.0-alpha.16",
+    "@rozenite/performance-monitor-plugin": "^1.0.0-alpha.16",
+    "@shopify/flash-list": "^2.2.0",
+    "expo": "54.0.23",
+    "expo-constants": "~18.0.10",
+    "expo-font": "~14.0.9",
+    "expo-linear-gradient": "^15.0.7",
+    "expo-linking": "~8.0.8",
+    "expo-router": "~6.0.14",
+    "expo-splash-screen": "~31.0.10",
+    "expo-status-bar": "~3.0.8",
+    "expo-system-ui": "~6.0.8",
+    "expo-web-browser": "~15.0.9",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-native": "0.81.5",
+    "react-native-fast-squircle": "^1.0.11",
+    "react-native-gesture-handler": "~2.28.0",
+    "react-native-keyboard-controller": "latest",
+    "react-native-mmkv": "^4.0.0",
+    "react-native-reanimated": "~4.1.1",
+    "react-native-safe-area-context": "~5.6.0",
+    "react-native-screens": "~4.16.0",
+    "react-native-svg": "^15.14.0",
+    "react-native-web": "~0.21.0",
+    "react-native-worklets": "0.5.1",
+    "sonner-native": "latest",
+    "tailwind-merge": "latest",
+    "tailwindcss": "^4.1.16",
+    "uniwind": "^1.0.0"
+  },
+  "devDependencies": {
+    "@rozenite/metro": "^1.0.0-alpha.16",
+    "@types/react": "~19.1.0",
+    "babel-plugin-module-resolver": "latest",
+    "typescript": "~5.9.2"
+  }
+}
+

package/templates/app-briefs/expo-router/cozynotes/src/app/_layout.tsx

@@ -0,0 +1,24 @@
+import '../../global.css';
+
+import { Slot } from 'expo-router';
+import { StatusBar } from 'expo-status-bar';
+
+export default function RootLayout() {
+  // TODO: Replace Slot with Stack navigator
+  // Example:
+  // import { Stack } from 'expo-router';
+  // return (
+  //   <>
+  //     <StatusBar style="dark" />
+  //     <Stack screenOptions={{ headerShown: false }} />
+  //   </>
+  // );
+
+  return (
+    <>
+      <StatusBar style="dark" />
+      <Slot />
+    </>
+  );
+}
+

package/templates/app-briefs/expo-router/cozynotes/src/app/about.tsx

@@ -0,0 +1,25 @@
+import { View } from 'react-native';
+
+import Screen from '~/components/ui/screen';
+import Text from '~/components/ui/text';
+
+export default function AboutScreen() {
+  // TODO: Build the about screen
+  // - Use Stack.Screen to configure native header
+  // - Set headerShown: true
+  // - Configure headerLeft with custom back button
+  // - Configure headerRight with share and info buttons
+  // - Display app icon, name, and description
+
+  return (
+    <Screen>
+      <View className="flex-1 items-center justify-center px-8">
+        <Text variant="title">CozyNote</Text>
+        <Text variant="note" className="text-center mt-6 text-muted-foreground">
+          Build this screen with native header configuration
+        </Text>
+      </View>
+    </Screen>
+  );
+}
+

package/templates/app-briefs/expo-router/cozynotes/src/app/index.tsx

@@ -0,0 +1,62 @@
+import { Ionicons } from '@expo/vector-icons';
+import { Link } from 'expo-router';
+import { FlatList, ImageBackground, Pressable, StyleSheet, View } from 'react-native';
+
+import NoteCard from '~/components/screens/home/note-card';
+import Screen from '~/components/ui/screen';
+import Squircle from '~/components/ui/squircle';
+import Text from '~/components/ui/text';
+import { NOTES } from '~/lib/constants';
+
+const BACKGROUND_IMAGE =
+  'https://github.com/user-attachments/assets/ce07d991-098a-4e14-a759-ecbb0c159b6b';
+
+export default function HomeScreen() {
+  return (
+    <Screen>
+      <ImageBackground
+        source={{ uri: BACKGROUND_IMAGE }}
+        style={StyleSheet.absoluteFill}
+        resizeMode="cover"
+      />
+
+        <View className="flex-row items-center justify-between px-6 pb-5 pt-2">
+          <View>
+            <Text variant="note">Cozy Notes</Text>
+          </View>
+          <Link href="/settings" asChild>
+            <Pressable>
+              <Squircle
+                cornerSmoothing={1}
+                className='size-11 items-center justify-center rounded-md bg-card'
+            
+                >
+                <Ionicons name="settings-outline" size={22} color="black" />
+              </Squircle>
+            </Pressable>
+          </Link>
+        </View>
+
+        <FlatList
+          data={NOTES}
+          keyExtractor={(item) => item.id}
+          renderItem={({ item, index }) => <NoteCard note={item} index={index} />}
+          contentContainerClassName="px-6 pt-4 pb-60"
+          showsVerticalScrollIndicator={false}
+        />
+
+      
+        <Link href="/note/new" asChild className='absolute bottom-10 right-10 '>
+          <Pressable>
+            <Squircle
+              cornerSmoothing={1}
+              className='size-14 items-center justify-center rounded-2xl bg-primary'
+              >
+              <Ionicons name="add" size={28} color="#fff" />
+            </Squircle>
+          </Pressable>
+        </Link>
+    </Screen>
+  );
+}
+

package/templates/app-briefs/expo-router/cozynotes/src/app/note/[id].tsx

@@ -0,0 +1,39 @@
+import { View } from 'react-native';
+import { useLocalSearchParams } from 'expo-router';
+
+import Screen from '~/components/ui/screen';
+import Text from '~/components/ui/text';
+import { getNoteById } from '~/lib/constants';
+
+export default function NoteDetailScreen() {
+  const { id } = useLocalSearchParams<{ id: string }>();
+  const note = getNoteById(id);
+
+  // TODO: Build the note detail screen
+  // - Add BackButton component at top
+  // - Add edit button (Link to /note/edit with id param)
+  // - Display note title and content in a Squircle card
+  // - Use ScrollView for long content
+
+  if (!note) {
+    return (
+      <Screen>
+        <View className="flex-1 items-center justify-center">
+          <Text>Note not found</Text>
+        </View>
+      </Screen>
+    );
+  }
+
+  return (
+    <Screen>
+      <View className="flex-1 px-5 pt-2">
+        <Text variant="title">{note.title}</Text>
+        <Text className="mt-4 text-muted-foreground">
+          Build this screen to show note details
+        </Text>
+      </View>
+    </Screen>
+  );
+}
+

package/templates/app-briefs/expo-router/cozynotes/src/app/note/edit.tsx

@@ -0,0 +1,30 @@
+import { View } from 'react-native';
+import { useLocalSearchParams } from 'expo-router';
+
+import Screen from '~/components/ui/screen';
+import Text from '~/components/ui/text';
+import { getNoteById } from '~/lib/constants';
+
+export default function EditNoteScreen() {
+  const { id } = useLocalSearchParams<{ id: string }>();
+  const note = getNoteById(id);
+
+  // TODO: Build the edit note screen
+  // - Add BackButton with close icon at top left
+  // - Add "Edit Note" title in header center
+  // - Add "Save" button at top right
+  // - Pre-fill TextInputs with note.title and note.content
+  // - Handle save with console.log and router.back()
+
+  return (
+    <Screen>
+      <View className="flex-1 px-5 pt-2">
+        <Text variant="title">Edit Note</Text>
+        <Text className="mt-4 text-muted-foreground">
+          Build this screen to edit: {note?.title ?? 'Unknown'}
+        </Text>
+      </View>
+    </Screen>
+  );
+}
+

package/templates/app-briefs/expo-router/cozynotes/src/app/note/new.tsx

@@ -0,0 +1,26 @@
+import { View } from 'react-native';
+
+import Screen from '~/components/ui/screen';
+import Text from '~/components/ui/text';
+
+export default function NewNoteScreen() {
+  // TODO: Build the new note screen
+  // - Add BackButton with close icon at top left
+  // - Add "New Note" title in header center
+  // - Add "Create" button at top right
+  // - Add TextInput for title
+  // - Add TextInput for content (multiline)
+  // - Handle create with console.log and router.back()
+
+  return (
+    <Screen>
+      <View className="flex-1 px-5 pt-2">
+        <Text variant="title">New Note</Text>
+        <Text className="mt-4 text-muted-foreground">
+          Build this screen with title and content inputs
+        </Text>
+      </View>
+    </Screen>
+  );
+}
+

package/templates/app-briefs/expo-router/cozynotes/src/app/settings.tsx

@@ -0,0 +1,24 @@
+import { View } from 'react-native';
+
+import Screen from '~/components/ui/screen';
+import Text from '~/components/ui/text';
+
+export default function SettingsScreen() {
+  // TODO: Build the settings screen
+  // - Add BackButton at top left
+  // - Add "Settings" title next to back button
+  // - Add app info card with icon and name
+  // - Add "Learn More About CozyNote" button linking to /about
+
+  return (
+    <Screen>
+      <View className="flex-1 px-5 pt-2">
+        <Text variant="title">Settings</Text>
+        <Text className="mt-4 text-muted-foreground">
+          Build this screen with app info and about link
+        </Text>
+      </View>
+    </Screen>
+  );
+}
+

package/templates/app-briefs/expo-router/cozynotes/src/components/screens/home/note-card.tsx

@@ -0,0 +1,65 @@
+import { Ionicons } from '@expo/vector-icons';
+import { Link } from 'expo-router';
+import { Pressable, View } from 'react-native';
+
+import Squircle from '~/components/ui/squircle';
+import Text from '~/components/ui/text';
+import { Note } from '~/lib/constants';
+
+// Rotation patterns for variety
+const getRotation = (index: number) => {
+  const rotations = [-4, 3, -2, 5, -3, 2, -5, 4];
+  return rotations[index % rotations.length];
+};
+
+// Horizontal offset for staggered look (relative to center)
+const getOffset = (index: number) => {
+  const offsets = [-50, 60, -40, 70, -55, 50, -35, 65];
+  return offsets[index % offsets.length];
+};
+
+const NoteCard = ({ note, index }: { note: Note; index: number }) => {
+  const rotation = getRotation(index);
+  const offsetX = getOffset(index);
+
+  return (
+    <Link href={{ pathname: '/note/[id]', params: { id: note.id } }} asChild>
+      <Pressable
+        style={{
+          marginBottom: -60,
+          alignSelf: 'center',
+          marginLeft: offsetX,
+          transform: [{ rotate: `${rotation}deg` }],
+          zIndex: index,
+        }}>
+        <Squircle
+          cornerSmoothing={1}
+          className="bg-card"
+          style={{
+            width: 240,
+            height: 324,
+            borderRadius: 24,
+            padding: 20,
+          }}>
+          {/* Menu dots */}
+          <View style={{ position: 'absolute', top: 16, right: 16 }}>
+            <Ionicons name="ellipsis-horizontal" size={18} color="var(--color-muted-foreground)" />
+          </View>
+
+          {/* Title */}
+          <Text variant="subtitle" className="mb-2 mr-10" numberOfLines={2}>
+            {note.title}
+          </Text>
+
+          {/* Content */}
+          <Text variant="note" className="opacity-90" numberOfLines={10}>
+            {note.content}
+          </Text>
+        </Squircle>
+      </Pressable>
+    </Link>
+  );
+};
+
+export default NoteCard;
+

package/templates/app-briefs/expo-router/cozynotes/src/components/ui/back-button.tsx

@@ -0,0 +1,24 @@
+import { Ionicons } from '@expo/vector-icons';
+import { router } from 'expo-router';
+import { Pressable } from 'react-native';
+
+import Squircle from './squircle';
+
+interface BackButtonProps {
+  icon?: 'chevron-back' | 'close';
+}
+
+const BackButton = ({ icon = 'chevron-back' }: BackButtonProps) => {
+  return (
+    <Pressable onPress={() => router.back()}>
+      <Squircle
+        cornerSmoothing={1}
+        className="size-12 items-center justify-center bg-card rounded-[14px]">
+        <Ionicons name={icon} size={26} color="var(--color-foreground)" />
+      </Squircle>
+    </Pressable>
+  );
+};
+
+export default BackButton;
+

package/templates/app-briefs/expo-router/cozynotes/src/components/ui/screen.tsx

@@ -0,0 +1,20 @@
+import { withUniwind } from 'uniwind';
+import { SafeAreaView as RNSafeAreaView } from 'react-native-safe-area-context';
+import { ReactNode } from 'react';
+
+const SafeAreaView = withUniwind(RNSafeAreaView);
+
+interface ScreenProps {
+  children: ReactNode;
+  className?: string;
+}
+
+const Screen = ({
+  children,
+  className = 'flex-1 bg-background',
+}: ScreenProps) => {
+  return <SafeAreaView className={className}>{children}</SafeAreaView>;
+};
+
+export default Screen;
+

package/templates/app-briefs/expo-router/cozynotes/src/components/ui/squircle.tsx

@@ -0,0 +1,7 @@
+import { withUniwind } from 'uniwind';
+import SquircleView from 'react-native-fast-squircle';
+
+const Squircle = withUniwind(SquircleView);
+
+export default Squircle;
+