@codyswann/lisa 1.47.0 → 1.48.0

package/expo/copy-overwrite/.claude/skills/container-view-pattern/references/patterns.md

@@ -1,318 +0,0 @@
-# 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/expo/copy-overwrite/.claude/skills/container-view-pattern/scripts/create_component.py

@@ -1,200 +0,0 @@
-#!/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()