codingpixel-expo-app 0.1.0

package/templates/bottom-sheet/src/ui/appComponents/appBottomSheetView/index.tsx

@@ -0,0 +1,173 @@
+import { RF } from "@theme/responsive";
+import { BottomSheetView } from "@gorhom/bottom-sheet";
+import React from "react";
+import { DimensionValue, ViewProps, ViewStyle } from "react-native";
+
+interface AppBottomSheetViewProps extends ViewProps {
+  children?: React.ReactNode;
+  focusHook?: () => void;
+
+  flex?: number;
+  flexGrow?: number;
+  flexShrink?: number;
+  flexBasis?: number | DimensionValue;
+  flexDirection?: ViewStyle["flexDirection"];
+  alignItems?: ViewStyle["alignItems"];
+  justifyContent?: ViewStyle["justifyContent"];
+  alignSelf?: ViewStyle["alignSelf"];
+
+  gap?: number;
+
+  width?: number | DimensionValue;
+  height?: number | DimensionValue;
+  minWidth?: number | DimensionValue;
+  maxWidth?: number | DimensionValue;
+  minHeight?: number | DimensionValue;
+  maxHeight?: number | DimensionValue;
+
+  padding?: number;
+  paddingHorizontal?: number;
+  paddingVertical?: number;
+  paddingTop?: number;
+  paddingBottom?: number;
+  paddingLeft?: number;
+  paddingRight?: number;
+
+  margin?: number;
+  marginHorizontal?: number;
+  marginVertical?: number;
+  marginTop?: number;
+  marginBottom?: number;
+  marginLeft?: number;
+  marginRight?: number;
+
+  backgroundColor?: string;
+  borderRadius?: number;
+  borderTopLeftRadius?: number;
+  borderTopRightRadius?: number;
+  borderBottomLeftRadius?: number;
+  borderBottomRightRadius?: number;
+  opacity?: number;
+  overflow?: ViewStyle["overflow"];
+}
+
+const AppBottomSheetView: React.FC<AppBottomSheetViewProps> = ({
+  children,
+  focusHook,
+  style,
+  flex,
+  flexGrow,
+  flexShrink,
+  flexBasis,
+  flexDirection,
+  alignItems,
+  justifyContent,
+  alignSelf,
+  gap,
+  width,
+  height,
+  minWidth,
+  maxWidth,
+  minHeight,
+  maxHeight,
+  padding,
+  paddingHorizontal,
+  paddingVertical,
+  paddingTop,
+  paddingBottom,
+  paddingLeft,
+  paddingRight,
+  margin,
+  marginHorizontal,
+  marginVertical,
+  marginTop,
+  marginBottom,
+  marginLeft,
+  marginRight,
+  backgroundColor,
+  borderRadius,
+  borderTopLeftRadius,
+  borderTopRightRadius,
+  borderBottomLeftRadius,
+  borderBottomRightRadius,
+  opacity,
+  overflow,
+  ...rest
+}) => {
+  const toDim = (v?: number | DimensionValue) =>
+    v === undefined
+      ? undefined
+      : typeof v === "number"
+        ? (RF(v) as unknown as DimensionValue)
+        : v;
+
+  const customStyle: ViewStyle = {
+    flex,
+    flexGrow,
+    flexShrink,
+    flexBasis,
+    flexDirection,
+    alignItems,
+    justifyContent,
+    alignSelf,
+
+    width: toDim(width),
+    height: toDim(height),
+    minWidth: toDim(minWidth),
+    maxWidth: toDim(maxWidth),
+    minHeight: toDim(minHeight),
+    maxHeight: toDim(maxHeight),
+
+    gap: gap !== undefined ? RF(gap) : undefined,
+
+    padding: padding !== undefined ? RF(padding) : undefined,
+    paddingHorizontal:
+      paddingHorizontal !== undefined ? RF(paddingHorizontal) : undefined,
+    paddingVertical:
+      paddingVertical !== undefined ? RF(paddingVertical) : undefined,
+    paddingTop: paddingTop !== undefined ? RF(paddingTop) : undefined,
+    paddingBottom: paddingBottom !== undefined ? RF(paddingBottom) : undefined,
+    paddingLeft: paddingLeft !== undefined ? RF(paddingLeft) : undefined,
+    paddingRight: paddingRight !== undefined ? RF(paddingRight) : undefined,
+
+    margin: margin !== undefined ? RF(margin) : undefined,
+    marginHorizontal:
+      marginHorizontal !== undefined ? RF(marginHorizontal) : undefined,
+    marginVertical:
+      marginVertical !== undefined ? RF(marginVertical) : undefined,
+    marginTop: marginTop !== undefined ? RF(marginTop) : undefined,
+    marginBottom: marginBottom !== undefined ? RF(marginBottom) : undefined,
+    marginLeft: marginLeft !== undefined ? RF(marginLeft) : undefined,
+    marginRight: marginRight !== undefined ? RF(marginRight) : undefined,
+
+    backgroundColor,
+    borderRadius: borderRadius !== undefined ? RF(borderRadius) : undefined,
+    borderTopLeftRadius:
+      borderTopLeftRadius !== undefined ? RF(borderTopLeftRadius) : undefined,
+    borderTopRightRadius:
+      borderTopRightRadius !== undefined ? RF(borderTopRightRadius) : undefined,
+    borderBottomLeftRadius:
+      borderBottomLeftRadius !== undefined
+        ? RF(borderBottomLeftRadius)
+        : undefined,
+    borderBottomRightRadius:
+      borderBottomRightRadius !== undefined
+        ? RF(borderBottomRightRadius)
+        : undefined,
+
+    opacity,
+    overflow,
+  };
+
+  return (
+    <BottomSheetView
+      focusHook={focusHook}
+      style={[customStyle, style]}
+      {...rest}
+    >
+      {children}
+    </BottomSheetView>
+  );
+};
+
+export default AppBottomSheetView;

package/templates/bottom-sheet/src/ui/appComponents/customBottomSheetModal/index.tsx

@@ -0,0 +1,17 @@
+import { BottomSheetModal, BottomSheetModalProps } from "@gorhom/bottom-sheet";
+import React, { forwardRef } from "react";
+
+const CustomBottomSheetModal = forwardRef<
+  BottomSheetModal,
+  BottomSheetModalProps
+>(({ children, ...rest }, ref) => {
+  return (
+    <BottomSheetModal ref={ref} {...rest}>
+      {children}
+    </BottomSheetModal>
+  );
+});
+
+CustomBottomSheetModal.displayName = "CustomBottomSheetModal";
+
+export default CustomBottomSheetModal;

package/templates/claude-command/init-app.md

@@ -0,0 +1,41 @@
+---
+name: init-app
+description: Scaffold a new Expo project using codingpixel-expo-app with full prompt control + PM choice. Slash-command flow is non-TTY — all answers are resolved BEFORE invoking the CLI.
+---
+
+# /init-app — Scaffold Expo project
+
+Use **AskUserQuestion** to resolve every answer up front. The CLI itself runs without a TTY (slash-command stdin is closed); any missing answer would throw with `not a TTY`.
+
+## Step 1 — Gather answers (use AskUserQuestion)
+
+Ask the user, in this order:
+
+1. **App name / target directory** (required, non-empty string). This becomes the positional CLI arg AND substitutes into the env-var command below. Do NOT pass the literal string `<dir>` — substitute the real value.
+2. **Include bottom-sheet support?** (yes/no → "1" or "0").
+3. **Include image-picker support?** (yes/no → "1" or "0").
+4. **Package manager** (yarn or npm).
+
+Fonts are intentionally disabled in this CLI version (Deviation #9 in `docs/MIRROR_NOTES.md`) — `Fonts = {}` ships in the generated app and `EXPO_PRIMARY_FONT` / `EXPO_SECONDARY_FONT` env vars are silently ignored.
+
+## Step 2 — Run the CLI
+
+Substitute every answer into the command. **Replace `my-app` with the resolved app name from step 1** before invoking:
+
+```bash
+EXPO_INCLUDE_BOTTOM_SHEET="0" \
+  EXPO_INCLUDE_IMAGE_PICKER="0" \
+  EXPO_PACKAGE_MANAGER="yarn" \
+  npx --yes codingpixel-expo-app my-app
+```
+
+## Step 3 — After the CLI completes
+
+Show the user the printed next-steps block (`cd <dir> / npx expo prebuild / yarn ios`). The CLI's success message lists the actual produced PM (which may differ from requested if Expo CLI ignored the flag — see PM-mismatch warning if shown).
+
+## Failure handling
+
+If the CLI exits non-zero:
+- Read its stderr — it includes a recovery hint.
+- Patches are idempotent: if the user fixes the root cause (e.g. network, missing PATH entry), they can re-run the same command and the CLI converges.
+- Never auto-`rm -rf` the target dir; the user owns that decision.

package/templates/image-picker/media-constants.snippet.ts

@@ -0,0 +1,18 @@
+export const MEDIA_TYPES = {
+  IMAGE: "image" as const,
+  VIDEO: "video" as const,
+};
+
+export const IMAGE_PICKER_OPTIONS = {
+  mediaTypes: ["images"] as const,
+  allowsEditing: false,
+  quality: 0.85,
+  base64: false,
+};
+
+export const CAMERA_OPTIONS = {
+  mediaTypes: ["images"] as const,
+  allowsEditing: false,
+  quality: 0.85,
+  base64: false,
+};

package/templates/image-picker/src/core/services/PermissionService.ts

@@ -0,0 +1,48 @@
+import log from "@appComponents/appLogger";
+import * as ImagePicker from "expo-image-picker";
+
+const hasCameraPermission = async () => {
+  try {
+    const { status, canAskAgain } =
+      await ImagePicker.getCameraPermissionsAsync();
+
+    if (status === "granted") {
+      return true;
+    }
+
+    // 🔥 FIX: request when undetermined OR denied
+    if ((status === "undetermined" || status === "denied") && canAskAgain) {
+      const result = await ImagePicker.requestCameraPermissionsAsync();
+      return result.status === "granted";
+    }
+
+    return false;
+  } catch (error) {
+    log.error("Camera permission error:", error);
+    return false;
+  }
+};
+
+const hasLibraryPermission = async () => {
+  try {
+    const { status, canAskAgain } =
+      await ImagePicker.getMediaLibraryPermissionsAsync();
+
+    if (status === "granted") {
+      return true;
+    }
+
+    // 🔥 FIX: request when undetermined OR denied
+    if ((status === "undetermined" || status === "denied") && canAskAgain) {
+      const result = await ImagePicker.requestMediaLibraryPermissionsAsync();
+      return result.status === "granted";
+    }
+
+    return false;
+  } catch (error) {
+    log.error("Media library permission error:", error);
+    return false;
+  }
+};
+
+export { hasCameraPermission, hasLibraryPermission };