@codyswann/lisa 2.121.1 → 2.123.0

package/plugins/lisa-expo-copilot/skills/container-view-pattern/references/patterns.md

@@ -0,0 +1,318 @@
+# Container/View Pattern - Common Patterns and Anti-Patterns
+
+## Correct Patterns
+
+### 1. State in Container, Props in View
+
+```tsx
+// Container - owns state
+const PlayerCardContainer = ({ playerId }: Props) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const { data } = usePlayerQuery({ variables: { id: playerId } });
+
+  const handleToggle = useCallback(() => {
+    setIsExpanded(prev => !prev);
+  }, []);
+
+  return (
+    <PlayerCardView
+      player={data?.player}
+      isExpanded={isExpanded}
+      onToggle={handleToggle}
+    />
+  );
+};
+
+// View - receives props only
+const PlayerCardView = ({ player, isExpanded, onToggle }: ViewProps) => (
+  <Box>
+    <Pressable onPress={onToggle}>
+      <Text>{player?.name}</Text>
+    </Pressable>
+    {isExpanded && <PlayerDetails player={player} />}
+  </Box>
+);
+```
+
+### 2. Memoized Computed Values
+
+```tsx
+// Container - memoize all derived data
+const ListContainer = ({ items }: Props) => {
+  const sortedItems = useMemo(
+    () => [...items].sort((a, b) => a.name.localeCompare(b.name)),
+    [items]
+  );
+
+  const itemCount = useMemo(() => items.length, [items]);
+
+  return <ListView items={sortedItems} count={itemCount} />;
+};
+```
+
+### 3. Memoized Callbacks
+
+```tsx
+// Container - wrap all handlers
+const FormContainer = ({ onSubmit }: Props) => {
+  const [value, setValue] = useState("");
+
+  const handleChange = useCallback((text: string) => {
+    setValue(text);
+  }, []);
+
+  const handleSubmit = useCallback(() => {
+    onSubmit(value);
+  }, [onSubmit, value]);
+
+  return (
+    <FormView value={value} onChange={handleChange} onSubmit={handleSubmit} />
+  );
+};
+```
+
+### 4. Loading/Error/Empty States
+
+```tsx
+// Container - determines which state to show
+const DataListContainer = () => {
+  const { data, loading, error } = useDataQuery();
+
+  const isEmpty = useMemo(
+    () => !loading && !error && (!data?.items || data.items.length === 0),
+    [loading, error, data?.items]
+  );
+
+  return (
+    <DataListView
+      items={data?.items ?? []}
+      isLoading={loading}
+      hasError={!!error}
+      isEmpty={isEmpty}
+    />
+  );
+};
+
+// View - renders based on state props
+const DataListView = ({ items, isLoading, hasError, isEmpty }: Props) => (
+  <Box>
+    {isLoading && <LoadingSpinner />}
+    {hasError && <ErrorMessage />}
+    {isEmpty && <EmptyState />}
+    {!isLoading && !hasError && !isEmpty && (
+      <FlashList data={items} renderItem={renderItem} />
+    )}
+  </Box>
+);
+```
+
+### 5. Safe Area Insets
+
+```tsx
+// Container - gets insets from hook
+const ScreenContainer = () => {
+  const { bottom: bottomInset } = useSafeAreaInsets();
+
+  return <ScreenView bottomInset={bottomInset} />;
+};
+
+// View - applies inset as style
+const ScreenView = ({ bottomInset }: { readonly bottomInset: number }) => (
+  <Box style={{ paddingBottom: bottomInset }}>
+    <Content />
+  </Box>
+);
+```
+
+### 6. Platform-Specific Logic
+
+```tsx
+// Container - handles platform logic
+const ActionContainer = ({ onDelete }: Props) => {
+  const handleDelete = useCallback(() => {
+    if (Platform.OS === "web") {
+      if (window.confirm("Delete this item?")) {
+        onDelete();
+      }
+    } else {
+      Alert.alert("Confirm", "Delete this item?", [
+        { text: "Cancel", style: "cancel" },
+        { text: "Delete", onPress: onDelete, style: "destructive" },
+      ]);
+    }
+  }, [onDelete]);
+
+  return <ActionView onDelete={handleDelete} />;
+};
+```
+
+## Anti-Patterns to Avoid
+
+### 1. Hooks in View
+
+```tsx
+// WRONG - hooks in View
+const BadView = ({ playerId }: Props) => {
+  const { data } = usePlayerQuery({ variables: { id: playerId } }); // WRONG
+  const [isOpen, setIsOpen] = useState(false); // WRONG
+
+  return <Box>{data?.name}</Box>;
+};
+
+// CORRECT - hooks in Container
+const GoodContainer = ({ playerId }: Props) => {
+  const { data } = usePlayerQuery({ variables: { id: playerId } });
+  const [isOpen, setIsOpen] = useState(false);
+
+  return <GoodView player={data} isOpen={isOpen} />;
+};
+```
+
+### 2. Block Body in View
+
+```tsx
+// WRONG - block body with return
+const BadView = ({ items }: Props) => {
+  return (
+    <Box>
+      {items.map(item => (
+        <Item key={item.id} />
+      ))}
+    </Box>
+  );
+};
+
+// CORRECT - arrow shorthand
+const GoodView = ({ items }: Props) => (
+  <Box>
+    {items.map(item => (
+      <Item key={item.id} />
+    ))}
+  </Box>
+);
+```
+
+### 3. Inline Functions
+
+```tsx
+// WRONG - inline function creates new reference
+const BadContainer = () => (
+  <View onClick={() => console.log("clicked")} /> // WRONG
+);
+
+// CORRECT - memoized callback
+const GoodContainer = () => {
+  const handleClick = useCallback(() => {
+    console.log("clicked");
+  }, []);
+
+  return <View onClick={handleClick} />;
+};
+```
+
+### 4. Inline Objects
+
+```tsx
+// WRONG - inline object creates new reference
+const BadContainer = ({ user }: Props) => (
+  <View style={{ padding: 10 }} user={{ name: user.name }} /> // WRONG
+);
+
+// CORRECT - memoized values
+const GoodContainer = ({ user }: Props) => {
+  const style = useMemo(() => ({ padding: 10 }), []);
+  const userData = useMemo(() => ({ name: user.name }), [user.name]);
+
+  return <View style={style} user={userData} />;
+};
+```
+
+### 5. Logic in View
+
+```tsx
+// WRONG - logic in View
+const BadView = ({ items, filter }: Props) => {
+  const filtered = items.filter(i => i.type === filter); // WRONG
+
+  return <List items={filtered} />;
+};
+
+// CORRECT - pre-filtered in Container
+const GoodContainer = ({ items, filter }: Props) => {
+  const filtered = useMemo(
+    () => items.filter(i => i.type === filter),
+    [items, filter]
+  );
+
+  return <GoodView items={filtered} />;
+};
+```
+
+### 6. Missing memo Wrapper
+
+```tsx
+// WRONG - no memo
+const BadView = ({ data }: Props) => <Box>{data}</Box>;
+export default BadView;
+
+// CORRECT - wrapped with memo
+const GoodView = ({ data }: Props) => <Box>{data}</Box>;
+GoodView.displayName = "GoodView";
+export default memo(GoodView);
+```
+
+### 7. Early Returns in View
+
+```tsx
+// WRONG - early return in View
+const BadView = ({ data, isLoading }: Props) => {
+  if (isLoading) return <Spinner />;
+  if (!data) return <Empty />;
+  return <Content data={data} />;
+};
+
+// CORRECT - ternary in View (or handle in Container)
+const GoodView = ({ data, isLoading, isEmpty }: Props) => (
+  <Box>
+    {isLoading ? <Spinner /> : isEmpty ? <Empty /> : <Content data={data} />}
+  </Box>
+);
+```
+
+## Complex View Extraction
+
+When Views become too complex, extract helper functions:
+
+```tsx
+/**
+ * Renders loading state skeleton.
+ * @param props - Helper props
+ * @param props.isDark - Dark mode flag
+ */
+function renderLoading(props: { readonly isDark: boolean }) {
+  return <Skeleton className={props.isDark ? "bg-gray-800" : "bg-gray-200"} />;
+}
+
+/**
+ * Renders empty state message.
+ * @param props - Helper props
+ * @param props.message - Message to display
+ */
+function renderEmpty(props: { readonly message: string }) {
+  return (
+    <Box className="items-center justify-center p-8">
+      <Text>{props.message}</Text>
+    </Box>
+  );
+}
+
+const ComplexView = ({ isLoading, isEmpty, isDark, items }: Props) => (
+  <Box>
+    {isLoading && renderLoading({ isDark })}
+    {!isLoading && isEmpty && renderEmpty({ message: "No items found" })}
+    {!isLoading && !isEmpty && (
+      <FlashList data={items} renderItem={renderItem} />
+    )}
+  </Box>
+);
+```

package/plugins/lisa-expo-copilot/skills/container-view-pattern/scripts/create_component.py

@@ -0,0 +1,200 @@
+#!/usr/bin/env python3
+# This file is managed by Lisa.
+# Do not edit directly — changes will be overwritten on the next `lisa` run.
+"""
+Create a new component following the Container/View pattern.
+
+Usage:
+    python3 create_component.py <type> <name> [feature]
+
+Types:
+    global-component  - Creates in components/<name>/
+    feature-component - Creates in features/<feature>/components/<name>/
+    global-screen     - Creates in screens/<name>/
+    feature-screen    - Creates in features/<feature>/screens/<name>/
+
+Examples:
+    python3 create_component.py global-component PlayerCard
+    python3 create_component.py feature-component PlayerCard player-kanban
+    python3 create_component.py global-screen Settings
+    python3 create_component.py feature-screen Main dashboard
+"""
+
+import os
+import sys
+from pathlib import Path
+
+
+CONTAINER_TEMPLATE = '''import {{ useCallback, useMemo, useState }} from "react";
+
+import {name}View from "./{name}View";
+
+/**
+ * Props for the {name} component.
+ */
+interface {name}Props {{
+  // Define props here
+}}
+
+/**
+ * Container component that manages state and logic for {name}.
+ * @param props - Component properties
+ */
+const {name}Container = (props: {name}Props) => {{
+  // 1. Variables, state, useMemo, useCallback
+  const [isLoading, setIsLoading] = useState(false);
+
+  const computedValue = useMemo(() => {{
+    return null;
+  }}, []);
+
+  const handleAction = useCallback(() => {{
+    // Handle action
+  }}, []);
+
+  // 2. useEffect hooks
+  // useEffect(() => {{}}, []);
+
+  // 3. Return View
+  return (
+    <{name}View
+      isLoading={{isLoading}}
+      onAction={{handleAction}}
+    />
+  );
+}};
+
+export default {name}Container;
+'''
+
+VIEW_TEMPLATE = '''import {{ memo }} from "react";
+
+import {{ Box }} from "@/components/ui/box";
+import {{ Text }} from "@/components/ui/text";
+
+/**
+ * Props for the {name}View component.
+ */
+interface {name}ViewProps {{
+  readonly isLoading: boolean;
+  readonly onAction: () => void;
+}}
+
+/**
+ * View component that renders the {name} UI.
+ * @param props - Component properties
+ * @param props.isLoading - Loading state indicator
+ * @param props.onAction - Action handler callback
+ */
+const {name}View = ({{
+  isLoading,
+  onAction,
+}}: {name}ViewProps) => (
+  <Box testID="{test_id}.CONTAINER">
+    {{isLoading ? (
+      <Text>Loading...</Text>
+    ) : (
+      <Text>{name} Component</Text>
+    )}}
+  </Box>
+);
+
+{name}View.displayName = "{name}View";
+
+export default memo({name}View);
+'''
+
+INDEX_TEMPLATE = '''export {{ default }} from "./{name}Container";
+'''
+
+
+def create_component(component_type: str, name: str, feature: str = None) -> bool:
+    """
+    Create a new component with Container/View pattern.
+
+    Args:
+        component_type: Type of component (global-component, feature-component, etc.)
+        name: Component name in PascalCase
+        feature: Feature name (required for feature-component and feature-screen)
+
+    Returns:
+        True if successful, False otherwise
+    """
+    # Validate component name is PascalCase
+    if not name[0].isupper():
+        print(f"Error: Component name '{name}' must be PascalCase (start with uppercase)")
+        return False
+
+    # Determine target directory
+    if component_type == "global-component":
+        target_dir = Path("components") / name
+        test_id = name.upper()
+    elif component_type == "feature-component":
+        if not feature:
+            print("Error: feature-component requires a feature name")
+            return False
+        feature_dir = Path("features") / feature
+        if not feature_dir.exists():
+            print(f"Error: Feature '{feature}' does not exist at {feature_dir}")
+            return False
+        target_dir = feature_dir / "components" / name
+        test_id = f"{feature.upper().replace('-', '_')}.{name.upper()}"
+    elif component_type == "global-screen":
+        target_dir = Path("screens") / name
+        test_id = f"SCREEN.{name.upper()}"
+    elif component_type == "feature-screen":
+        if not feature:
+            print("Error: feature-screen requires a feature name")
+            return False
+        feature_dir = Path("features") / feature
+        if not feature_dir.exists():
+            print(f"Error: Feature '{feature}' does not exist at {feature_dir}")
+            return False
+        target_dir = feature_dir / "screens" / name
+        test_id = f"{feature.upper().replace('-', '_')}.SCREEN.{name.upper()}"
+    else:
+        print(f"Error: Unknown component type '{component_type}'")
+        print("Valid types: global-component, feature-component, global-screen, feature-screen")
+        return False
+
+    # Check if component already exists
+    if target_dir.exists():
+        print(f"Error: Component already exists at {target_dir}")
+        return False
+
+    # Create directory
+    target_dir.mkdir(parents=True, exist_ok=True)
+
+    # Create files
+    container_content = CONTAINER_TEMPLATE.format(name=name)
+    view_content = VIEW_TEMPLATE.format(name=name, test_id=test_id)
+    index_content = INDEX_TEMPLATE.format(name=name)
+
+    (target_dir / f"{name}Container.tsx").write_text(container_content)
+    (target_dir / f"{name}View.tsx").write_text(view_content)
+    (target_dir / "index.tsx").write_text(index_content)
+
+    print(f"Created component at {target_dir}/")
+    print(f"  - {name}Container.tsx")
+    print(f"  - {name}View.tsx")
+    print(f"  - index.tsx")
+
+    return True
+
+
+def main():
+    """Main entry point."""
+    if len(sys.argv) < 3:
+        print(__doc__)
+        sys.exit(1)
+
+    component_type = sys.argv[1]
+    name = sys.argv[2]
+    feature = sys.argv[3] if len(sys.argv) > 3 else None
+
+    success = create_component(component_type, name, feature)
+    sys.exit(0 if success else 1)
+
+
+if __name__ == "__main__":
+    main()