@presencenet/create-pnet-stack 0.2.3 → 0.4.0

package/templates/mobile/apps/app/app/index.tsx

@@ -1,17 +1,43 @@
-import { Text, View } from "react-native";
+import { Linking, View } from "react-native";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Text } from "@/components/ui/text";
+
+const app = {
+  name: "{{projectName}}",
+};
 
 export default function Home() {
   return (
-    <View className="flex-1 items-center justify-center bg-slate-950 px-8">
-      <Text className="text-sm font-bold uppercase tracking-widest text-cyan-300">
-        Presence-Net starter
-      </Text>
-      <Text className="mt-3 text-4xl font-bold text-white">
-        {"{{projectName}}"}
-      </Text>
-      <Text className="mt-4 text-center text-lg text-slate-300">
-        React Native, NativeWind, and a Bun-powered Turborepo workspace.
-      </Text>
+    <View className="flex-1 items-center justify-center bg-background p-6">
+      <Card className="w-full max-w-xl">
+        <CardHeader>
+          <CardDescription>Presence-Net starter</CardDescription>
+          <CardTitle className="text-4xl">{app.name}</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Text className="text-muted-foreground">
+            React Native, React Native Reusables (shadcn/ui), and a Bun-powered
+            Turborepo workspace.
+          </Text>
+        </CardContent>
+        <CardFooter>
+          <Button
+            onPress={() =>
+              Linking.openURL("https://reactnativereusables.com/docs")
+            }
+          >
+            <Text>Browse components</Text>
+          </Button>
+        </CardFooter>
+      </Card>
     </View>
   );
 }

package/templates/mobile/apps/app/app.json

@@ -3,9 +3,12 @@
     "name": "{{projectName}}",
     "slug": "{{projectName}}",
     "scheme": "{{projectName}}",
+    "userInterfaceStyle": "automatic",
     "plugins": ["expo-router"],
     "experiments": { "typedRoutes": true },
     "ios": { "supportsTablet": true },
-    "android": { "package": "net.presence.{{projectNameRust}}" }
+    "android": {
+      "package": "net.presence.{{projectNameRust}}"
+    }
   }
 }

package/templates/mobile/apps/app/components/ui/button.tsx

@@ -0,0 +1,123 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { Platform, Pressable } from "react-native";
+import { TextClassContext } from "@/components/ui/text";
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  cn(
+    "group shrink-0 flex-row items-center justify-center gap-2 rounded-md shadow-none",
+    Platform.select({
+      web: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    }),
+  ),
+  {
+    variants: {
+      variant: {
+        default: cn(
+          "bg-primary active:bg-primary/90 shadow-sm shadow-black/5",
+          Platform.select({ web: "hover:bg-primary/90" }),
+        ),
+        destructive: cn(
+          "bg-destructive active:bg-destructive/90 dark:bg-destructive/60 shadow-sm shadow-black/5",
+          Platform.select({
+            web: "hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
+          }),
+        ),
+        outline: cn(
+          "border-border bg-background active:bg-accent dark:bg-input/30 dark:border-input dark:active:bg-input/50 border shadow-sm shadow-black/5",
+          Platform.select({
+            web: "hover:bg-accent dark:hover:bg-input/50",
+          }),
+        ),
+        secondary: cn(
+          "bg-secondary active:bg-secondary/80 shadow-sm shadow-black/5",
+          Platform.select({ web: "hover:bg-secondary/80" }),
+        ),
+        ghost: cn(
+          "active:bg-accent dark:active:bg-accent/50",
+          Platform.select({ web: "hover:bg-accent dark:hover:bg-accent/50" }),
+        ),
+        link: "",
+      },
+      size: {
+        default: cn(
+          "h-10 px-4 py-2 sm:h-9",
+          Platform.select({ web: "has-[>svg]:px-3" }),
+        ),
+        sm: cn(
+          "h-9 gap-1.5 rounded-md px-3 sm:h-8",
+          Platform.select({ web: "has-[>svg]:px-2.5" }),
+        ),
+        lg: cn(
+          "h-11 rounded-md px-6 sm:h-10",
+          Platform.select({ web: "has-[>svg]:px-4" }),
+        ),
+        icon: "h-10 w-10 sm:h-9 sm:w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+const buttonTextVariants = cva(
+  cn(
+    "text-foreground text-sm font-medium",
+    Platform.select({ web: "pointer-events-none transition-colors" }),
+  ),
+  {
+    variants: {
+      variant: {
+        default: "text-primary-foreground",
+        destructive: "text-white",
+        outline: cn(
+          "group-active:text-accent-foreground",
+          Platform.select({ web: "group-hover:text-accent-foreground" }),
+        ),
+        secondary: "text-secondary-foreground",
+        ghost: "group-active:text-accent-foreground",
+        link: cn(
+          "text-primary group-active:underline",
+          Platform.select({
+            web: "underline-offset-4 hover:underline group-hover:underline",
+          }),
+        ),
+      },
+      size: {
+        default: "",
+        sm: "",
+        lg: "",
+        icon: "",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+type ButtonProps = React.ComponentProps<typeof Pressable> &
+  React.RefAttributes<typeof Pressable> &
+  VariantProps<typeof buttonVariants>;
+
+function Button({ className, variant, size, ...props }: ButtonProps) {
+  return (
+    <TextClassContext.Provider value={buttonTextVariants({ variant, size })}>
+      <Pressable
+        className={cn(
+          props.disabled && "opacity-50",
+          buttonVariants({ variant, size }),
+          className,
+        )}
+        role="button"
+        {...props}
+      />
+    </TextClassContext.Provider>
+  );
+}
+
+export type { ButtonProps };
+export { Button, buttonTextVariants, buttonVariants };

package/templates/mobile/apps/app/components/ui/card.tsx

@@ -0,0 +1,85 @@
+import { View } from "react-native";
+import { Text, TextClassContext } from "@/components/ui/text";
+import { cn } from "@/lib/utils";
+
+function Card({
+  className,
+  ...props
+}: React.ComponentProps<typeof View> & React.RefAttributes<View>) {
+  return (
+    <TextClassContext.Provider value="text-card-foreground">
+      <View
+        className={cn(
+          "bg-card border-border flex flex-col gap-6 rounded-xl border py-6 shadow-sm shadow-black/5",
+          className,
+        )}
+        {...props}
+      />
+    </TextClassContext.Provider>
+  );
+}
+
+function CardHeader({
+  className,
+  ...props
+}: React.ComponentProps<typeof View> & React.RefAttributes<View>) {
+  return (
+    <View className={cn("flex flex-col gap-1.5 px-6", className)} {...props} />
+  );
+}
+
+function CardTitle({
+  className,
+  ref,
+  ...props
+}: React.ComponentProps<typeof Text> & React.RefAttributes<typeof Text>) {
+  return (
+    <Text
+      ref={ref}
+      role="heading"
+      aria-level={3}
+      className={cn("font-semibold leading-none", className)}
+      {...props}
+    />
+  );
+}
+
+function CardDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof Text> & React.RefAttributes<typeof Text>) {
+  return (
+    <Text
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function CardContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof View> & React.RefAttributes<View>) {
+  return <View className={cn("px-6", className)} {...props} />;
+}
+
+function CardFooter({
+  className,
+  ...props
+}: React.ComponentProps<typeof View> & React.RefAttributes<View>) {
+  return (
+    <View
+      className={cn("flex flex-row items-center px-6", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+};

package/templates/mobile/apps/app/components/ui/text.tsx

@@ -0,0 +1,95 @@
+import { Slot } from "@rn-primitives/slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+import { Platform, Text as RNText, type Role } from "react-native";
+import { cn } from "@/lib/utils";
+
+const textVariants = cva(
+  cn(
+    "text-foreground text-base",
+    Platform.select({
+      web: "select-text",
+    }),
+  ),
+  {
+    variants: {
+      variant: {
+        default: "",
+        h1: cn(
+          "text-center text-4xl font-extrabold tracking-tight",
+          Platform.select({ web: "scroll-m-20 text-balance" }),
+        ),
+        h2: cn(
+          "border-border border-b pb-2 text-3xl font-semibold tracking-tight",
+          Platform.select({ web: "scroll-m-20 first:mt-0" }),
+        ),
+        h3: cn(
+          "text-2xl font-semibold tracking-tight",
+          Platform.select({ web: "scroll-m-20" }),
+        ),
+        h4: cn(
+          "text-xl font-semibold tracking-tight",
+          Platform.select({ web: "scroll-m-20" }),
+        ),
+        p: "mt-3 leading-7 sm:mt-6",
+        blockquote: "mt-4 border-l-2 pl-3 italic sm:mt-6 sm:pl-6",
+        code: cn(
+          "bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold",
+        ),
+        lead: "text-muted-foreground text-xl",
+        large: "text-lg font-semibold",
+        small: "text-sm font-medium leading-none",
+        muted: "text-muted-foreground text-sm",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+type TextVariantProps = VariantProps<typeof textVariants>;
+
+type TextVariant = NonNullable<TextVariantProps["variant"]>;
+
+const ROLE: Partial<Record<TextVariant, Role>> = {
+  h1: "heading",
+  h2: "heading",
+  h3: "heading",
+  h4: "heading",
+  blockquote: Platform.select({ web: "blockquote" as Role }),
+  code: Platform.select({ web: "code" as Role }),
+};
+
+const ARIA_LEVEL: Partial<Record<TextVariant, string>> = {
+  h1: "1",
+  h2: "2",
+  h3: "3",
+  h4: "4",
+};
+
+const TextClassContext = React.createContext<string | undefined>(undefined);
+
+function Text({
+  className,
+  asChild = false,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof RNText> &
+  React.RefAttributes<typeof RNText> &
+  TextVariantProps & {
+    asChild?: boolean;
+  }) {
+  const textClass = React.useContext(TextClassContext);
+  const Component = asChild ? Slot : RNText;
+  return (
+    <Component
+      className={cn(textVariants({ variant }), textClass, className)}
+      role={variant ? ROLE[variant] : undefined}
+      aria-level={variant ? ARIA_LEVEL[variant] : undefined}
+      {...props}
+    />
+  );
+}
+
+export { Text, TextClassContext };

package/templates/mobile/apps/app/components.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "global.css",
+    "baseColor": "neutral",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}

package/templates/mobile/apps/app/css.d.ts

@@ -0,0 +1 @@
+declare module "*.css";

package/templates/mobile/apps/app/global.css

@@ -1,3 +1,58 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 63%;
+    --radius: 0.625rem;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+  }
+
+  .dark:root {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 70.9% 59.4%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 300 0% 45%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}

package/templates/mobile/apps/app/lib/theme.ts

@@ -0,0 +1,85 @@
+import {
+  DarkTheme,
+  DefaultTheme,
+  type Theme,
+} from "expo-router/react-navigation";
+
+export const THEME = {
+  light: {
+    background: "hsl(0 0% 100%)",
+    foreground: "hsl(0 0% 3.9%)",
+    card: "hsl(0 0% 100%)",
+    cardForeground: "hsl(0 0% 3.9%)",
+    popover: "hsl(0 0% 100%)",
+    popoverForeground: "hsl(0 0% 3.9%)",
+    primary: "hsl(0 0% 9%)",
+    primaryForeground: "hsl(0 0% 98%)",
+    secondary: "hsl(0 0% 96.1%)",
+    secondaryForeground: "hsl(0 0% 9%)",
+    muted: "hsl(0 0% 96.1%)",
+    mutedForeground: "hsl(0 0% 45.1%)",
+    accent: "hsl(0 0% 96.1%)",
+    accentForeground: "hsl(0 0% 9%)",
+    destructive: "hsl(0 84.2% 60.2%)",
+    border: "hsl(0 0% 89.8%)",
+    input: "hsl(0 0% 89.8%)",
+    ring: "hsl(0 0% 63%)",
+    radius: "0.625rem",
+    chart1: "hsl(12 76% 61%)",
+    chart2: "hsl(173 58% 39%)",
+    chart3: "hsl(197 37% 24%)",
+    chart4: "hsl(43 74% 66%)",
+    chart5: "hsl(27 87% 67%)",
+  },
+  dark: {
+    background: "hsl(0 0% 3.9%)",
+    foreground: "hsl(0 0% 98%)",
+    card: "hsl(0 0% 3.9%)",
+    cardForeground: "hsl(0 0% 98%)",
+    popover: "hsl(0 0% 3.9%)",
+    popoverForeground: "hsl(0 0% 98%)",
+    primary: "hsl(0 0% 98%)",
+    primaryForeground: "hsl(0 0% 9%)",
+    secondary: "hsl(0 0% 14.9%)",
+    secondaryForeground: "hsl(0 0% 98%)",
+    muted: "hsl(0 0% 14.9%)",
+    mutedForeground: "hsl(0 0% 63.9%)",
+    accent: "hsl(0 0% 14.9%)",
+    accentForeground: "hsl(0 0% 98%)",
+    destructive: "hsl(0 70.9% 59.4%)",
+    border: "hsl(0 0% 14.9%)",
+    input: "hsl(0 0% 14.9%)",
+    ring: "hsl(300 0% 45%)",
+    radius: "0.625rem",
+    chart1: "hsl(220 70% 50%)",
+    chart2: "hsl(160 60% 45%)",
+    chart3: "hsl(30 80% 55%)",
+    chart4: "hsl(280 65% 60%)",
+    chart5: "hsl(340 75% 55%)",
+  },
+};
+
+export const NAV_THEME: Record<"light" | "dark", Theme> = {
+  light: {
+    ...DefaultTheme,
+    colors: {
+      background: THEME.light.background,
+      border: THEME.light.border,
+      card: THEME.light.card,
+      notification: THEME.light.destructive,
+      primary: THEME.light.primary,
+      text: THEME.light.foreground,
+    },
+  },
+  dark: {
+    ...DarkTheme,
+    colors: {
+      background: THEME.dark.background,
+      border: THEME.dark.border,
+      card: THEME.dark.card,
+      notification: THEME.dark.destructive,
+      primary: THEME.dark.primary,
+      text: THEME.dark.foreground,
+    },
+  },
+};

package/templates/mobile/apps/app/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/templates/mobile/apps/app/metro.config.js

@@ -3,4 +3,5 @@ const { withNativeWind } = require("nativewind/metro");
 
 module.exports = withNativeWind(getDefaultConfig(__dirname), {
   input: "./global.css",
+  inlineRem: 16,
 });

package/templates/mobile/apps/app/package.json

@@ -1,5 +1,6 @@
 {
   "name": "@{{projectName}}/app",
+  "version": "0.0.0",
   "private": true,
   "main": "expo-router/entry",
   "scripts": {
@@ -8,6 +9,10 @@
     "check": "biome check ."
   },
   "dependencies": {
+    "@rn-primitives/portal": "^1.5.3",
+    "@rn-primitives/slot": "^1.5.2",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "expo": "~58.0.23",
     "expo-constants": "~58.0.15",
     "expo-linking": "~58.0.16",
@@ -17,14 +22,18 @@
     "nativewind": "^4.2.7",
     "react": "19.3.0",
     "react-native": "0.88.1",
-    "react-native-reanimated": "4.7.1",
+    "react-native-css-interop": "^0.2.7",
     "react-native-gesture-handler": "~3.3.0",
+    "react-native-reanimated": "4.7.1",
     "react-native-safe-area-context": "~5.11.1",
     "react-native-screens": "~4.30.1",
-    "react-native-worklets": "0.13.0"
+    "react-native-worklets": "0.13.0",
+    "tailwind-merge": "^3.7.0",
+    "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
     "@babel/core": "^7.29.7",
+    "@babel/plugin-transform-react-jsx": "^7.29.7",
     "@types/react": "~19.3.0",
     "babel-preset-expo": "~58.0.0",
     "tailwindcss": "^3.4.17",

package/templates/mobile/apps/app/tailwind.config.js

@@ -1,7 +1,73 @@
+const { hairlineWidth } = require("nativewind/theme");
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["./app/**/*.{js,jsx,ts,tsx}"],
+  darkMode: "class",
+  content: ["./app/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}"],
   presets: [require("nativewind/preset")],
-  theme: { extend: {} },
-  plugins: [],
+  theme: {
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      borderWidth: {
+        hairline: hairlineWidth(),
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+  future: {
+    hoverOnlyWhenSupported: true,
+  },
+  plugins: [require("tailwindcss-animate")],
 };