newcandies 0.1.24 → 0.1.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "newcandies",
-  "version": "0.1.24",
+  "version": "0.1.26",
   "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,16 @@
+import '../../global.css';
+
+import { Slot } from 'expo-router';
+import { StatusBar } from 'expo-status-bar';
+
+export default function RootLayout() {
+
+
+  return (
+    <>
+      <StatusBar style="dark" />
+      <Slot />
+    </>
+  );
+}
+

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

@@ -0,0 +1,16 @@
+import { View } from 'react-native';
+import Screen from '~/components/ui/screen';
+import Text from '~/components/ui/text';
+
+
+
+export default function HomeScreen() {
+  return (
+    <Screen>
+      <View>
+        <Text>Home</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;
+

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

@@ -0,0 +1,48 @@
+import { Text as RNText, TextProps } from 'react-native';
+import { twMerge } from 'tailwind-merge';
+
+type TypographyVariant =
+  | 'display'
+  | 'title'
+  | 'subtitle'
+  | 'body'
+  | 'body-secondary'
+  | 'caption'
+  | 'caption-secondary'
+  | 'button'
+  | 'note';
+
+interface TextComponentProps extends TextProps {
+  className?: string;
+  variant?: TypographyVariant;
+}
+
+const variantStyles: Record<TypographyVariant, string> = {
+  display: 'text-[34px] font-bold text-foreground',
+  title: 'text-[28px] font-bold text-foreground',
+  subtitle: 'text-xl font-semibold text-foreground',
+  body: 'text-base text-foreground',
+  'body-secondary': 'text-base text-muted-foreground',
+  caption: 'text-sm text-foreground',
+  'caption-secondary': 'text-sm text-muted-foreground',
+  button: 'text-base font-semibold text-primary-foreground',
+  note: 'font-caveat text-2xl text-foreground',
+};
+
+const Text = ({
+  variant = 'body',
+  children,
+  className,
+  ...props
+}: TextComponentProps) => {
+  const textStyle = twMerge(variantStyles[variant], className);
+
+  return (
+    <RNText className={textStyle} {...props}>
+      {children}
+    </RNText>
+  );
+};
+
+export default Text;
+

package/templates/app-briefs/expo-router/cozynotes/src/lib/constants/index.ts

@@ -0,0 +1,125 @@
+export const NOTES: Note[] = [
+  {
+    id: '1',
+    title: 'Welcome to CozyNote',
+    content:
+      'This is your first note! CozyNote is a simple and beautiful note-taking app. Start capturing your thoughts, ideas, and memories.',
+    createdAt: '2025-02-23T08:00:00Z',
+    updatedAt: '2025-02-23T08:00:00Z',
+  },
+  {
+    id: '2',
+    title: 'Meeting Notes',
+    content:
+      'Discussed Q1 goals and project timelines. Action items: Review budget proposal, Schedule follow-up with design team, Prepare presentation for Friday.',
+    createdAt: '2025-02-22T14:30:00Z',
+    updatedAt: '2025-02-22T15:45:00Z',
+  },
+  {
+    id: '3',
+    title: 'Shopping List',
+    content:
+      '- Organic milk\n- Fresh bread\n- Avocados\n- Coffee beans\n- Dark chocolate\n- Olive oil\n- Pasta\n- Tomatoes',
+    createdAt: '2025-02-21T09:15:00Z',
+    updatedAt: '2025-02-21T09:15:00Z',
+  },
+  {
+    id: '4',
+    title: 'Book Recommendations',
+    content:
+      '1. Atomic Habits by James Clear\n2. Deep Work by Cal Newport\n3. The Psychology of Money\n4. Thinking, Fast and Slow\n5. The Almanack of Naval Ravikant',
+    createdAt: '2025-02-20T19:00:00Z',
+    updatedAt: '2025-02-20T19:00:00Z',
+  },
+  {
+    id: '5',
+    title: 'Workout Routine',
+    content:
+      'Monday: Upper body\nTuesday: Cardio\nWednesday: Lower body\nThursday: Rest\nFriday: Full body\nSaturday: Yoga\nSunday: Rest',
+    createdAt: '2025-02-19T07:00:00Z',
+    updatedAt: '2025-02-19T07:00:00Z',
+  },
+  {
+    id: '6',
+    title: 'Recipe: Morning Smoothie',
+    content:
+      'Ingredients:\n- 1 banana\n- 1 cup spinach\n- 1/2 cup frozen berries\n- 1 tbsp almond butter\n- 1 cup oat milk\n\nBlend until smooth. Enjoy!',
+    createdAt: '2025-02-18T06:30:00Z',
+    updatedAt: '2025-02-18T06:30:00Z',
+  },
+  {
+    id: '7',
+    title: 'Project Ideas',
+    content:
+      '- Personal portfolio website redesign\n- Mobile app for habit tracking\n- Open source contribution\n- Learn Rust programming\n- Build a CLI tool',
+    createdAt: '2025-02-17T21:00:00Z',
+    updatedAt: '2025-02-17T21:00:00Z',
+  },
+  {
+    id: '8',
+    title: 'Travel Bucket List',
+    content:
+      '🇯🇵 Japan - Cherry blossom season\n🇮🇸 Iceland - Northern lights\n🇳🇿 New Zealand - Hobbiton\n🇮🇹 Italy - Amalfi Coast\n🇬🇷 Greece - Santorini',
+    createdAt: '2025-02-16T16:00:00Z',
+    updatedAt: '2025-02-16T16:00:00Z',
+  },
+  {
+    id: '9',
+    title: 'Daily Affirmations',
+    content:
+      'I am capable of achieving my goals.\nI embrace challenges as opportunities.\nI am grateful for today.\nI choose positivity and growth.\nI am worthy of success and happiness.',
+    createdAt: '2025-02-15T05:00:00Z',
+    updatedAt: '2025-02-15T05:00:00Z',
+  },
+  {
+    id: '10',
+    title: 'App Features to Add',
+    content:
+      '- Dark mode toggle\n- Note categories/tags\n- Search functionality\n- Cloud sync\n- Share notes\n- Rich text formatting\n- Voice notes',
+    createdAt: '2025-02-14T11:30:00Z',
+    updatedAt: '2025-02-14T11:30:00Z',
+  },
+  {
+    id: '11',
+    title: 'Gratitude Journal',
+    content:
+      'Today I am grateful for:\n1. A warm cup of coffee\n2. Supportive friends and family\n3. Good health\n4. The opportunity to learn new things\n5. A cozy home',
+    createdAt: '2025-02-13T22:00:00Z',
+    updatedAt: '2025-02-13T22:00:00Z',
+  },
+  {
+    id: '12',
+    title: 'Podcast Episodes',
+    content:
+      'Must listen:\n- Huberman Lab: Sleep optimization\n- Lex Fridman: AI discussion\n- Tim Ferriss: Productivity hacks',
+    createdAt: '2025-02-12T13:00:00Z',
+    updatedAt: '2025-02-12T13:00:00Z',
+  },
+  {
+    id: '13',
+    title: 'Code Snippets',
+    content:
+      'Useful React patterns:\n- Custom hooks for data fetching\n- Context for global state\n- Memo for performance\n- Suspense for loading states',
+    createdAt: '2025-02-11T10:00:00Z',
+    updatedAt: '2025-02-11T10:00:00Z',
+  },
+  {
+    id: '14',
+    title: 'Weekend Plans',
+    content:
+      'Saturday:\n- Morning run at 7am\n- Brunch with Sarah\n- Afternoon coding session\n\nSunday:\n- Sleep in\n- Farmers market\n- Movie night',
+    createdAt: '2025-02-10T18:00:00Z',
+    updatedAt: '2025-02-10T18:00:00Z',
+  },
+ 
+];
+
+export const getNoteById = (id: string): Note | undefined => {
+  return NOTES.find((note) => note.id === id);
+};
+
+
+
+
+export const BACKGROUND_IMAGE =
+  'https://github.com/user-attachments/assets/ce07d991-098a-4e14-a759-ecbb0c159b6b';

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

@@ -0,0 +1,9 @@
+interface Note {
+  id: string;
+  title: string;
+  content: string;
+  createdAt: string;
+  updatedAt: string;
+  color?: string;
+}
+

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

@@ -0,0 +1,17 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true,
+    "paths": {
+      "~/*": ["./src/*"]
+    }
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    ".expo/types/**/*.ts",
+    "expo-env.d.ts",
+    "./uniwind-types.d.ts"
+  ]
+}
+