@codyswann/lisa 2.195.4 → 2.195.7

package/plugins/lisa-expo/.codex-plugin/skills/atomic-design-gluestack/references/gluestack-mapping.md

@@ -0,0 +1,233 @@
+# Gluestack UI Component Classification
+
+This document maps all Gluestack UI components to their atomic design level.
+
+## Atoms (Foundation)
+
+These components are the building blocks. Use them directly from `@/components/ui/`.
+
+### Layout Atoms
+| Component | Import | Description |
+|-----------|--------|-------------|
+| Box | `@/components/ui/box` | Basic container |
+| Center | `@/components/ui/center` | Centered container |
+| HStack | `@/components/ui/hstack` | Horizontal stack |
+| VStack | `@/components/ui/vstack` | Vertical stack |
+| Grid | `@/components/ui/grid` | Grid layout |
+| Divider | `@/components/ui/divider` | Visual separator |
+
+### Typography Atoms
+| Component | Import | Description |
+|-----------|--------|-------------|
+| Text | `@/components/ui/text` | Body text |
+| Heading | `@/components/ui/heading` | Headings h1-h6 |
+
+### Interactive Atoms
+| Component | Import | Description |
+|-----------|--------|-------------|
+| Button | `@/components/ui/button` | Clickable button |
+| ButtonText | `@/components/ui/button` | Button label |
+| ButtonIcon | `@/components/ui/button` | Button icon |
+| ButtonSpinner | `@/components/ui/button` | Button loading state |
+| Pressable | `@/components/ui/pressable` | Touchable wrapper |
+| Link | `@/components/ui/link` | Navigation link |
+| LinkText | `@/components/ui/link` | Link label |
+
+### Input Atoms
+| Component | Import | Description |
+|-----------|--------|-------------|
+| Input | `@/components/ui/input` | Text input container |
+| InputField | `@/components/ui/input` | Text input field |
+| InputSlot | `@/components/ui/input` | Input addon slot |
+| InputIcon | `@/components/ui/input` | Input icon |
+| Textarea | `@/components/ui/textarea` | Multi-line input |
+| TextareaInput | `@/components/ui/textarea` | Textarea field |
+
+### Selection Atoms
+| Component | Import | Description |
+|-----------|--------|-------------|
+| Checkbox | `@/components/ui/checkbox` | Checkbox control |
+| CheckboxIndicator | `@/components/ui/checkbox` | Checkbox visual |
+| CheckboxIcon | `@/components/ui/checkbox` | Checkbox checkmark |
+| CheckboxLabel | `@/components/ui/checkbox` | Checkbox text |
+| Radio | `@/components/ui/radio` | Radio button |
+| RadioIndicator | `@/components/ui/radio` | Radio visual |
+| RadioIcon | `@/components/ui/radio` | Radio dot |
+| RadioLabel | `@/components/ui/radio` | Radio text |
+| Switch | `@/components/ui/switch` | Toggle switch |
+| Slider | `@/components/ui/slider` | Range slider |
+
+### Media Atoms
+| Component | Import | Description |
+|-----------|--------|-------------|
+| Image | `@/components/ui/image` | Image display |
+| Icon | `@/components/ui/icon` | Icon display |
+| Avatar | `@/components/ui/avatar` | User avatar |
+| AvatarImage | `@/components/ui/avatar` | Avatar image |
+| AvatarFallbackText | `@/components/ui/avatar` | Avatar initials |
+
+### Feedback Atoms
+| Component | Import | Description |
+|-----------|--------|-------------|
+| Spinner | `@/components/ui/spinner` | Loading indicator |
+| Badge | `@/components/ui/badge` | Status badge |
+| BadgeText | `@/components/ui/badge` | Badge label |
+| BadgeIcon | `@/components/ui/badge` | Badge icon |
+| Progress | `@/components/ui/progress` | Progress bar |
+| ProgressFilledTrack | `@/components/ui/progress` | Progress fill |
+
+---
+
+## Molecules (Simple Compositions)
+
+These components combine atoms for a single purpose. Some Gluestack components are molecules.
+
+### Form Molecules
+| Component | Import | Description |
+|-----------|--------|-------------|
+| FormControl | `@/components/ui/form-control` | Form field wrapper |
+| FormControlLabel | `@/components/ui/form-control` | Field label |
+| FormControlLabelText | `@/components/ui/form-control` | Label text |
+| FormControlHelper | `@/components/ui/form-control` | Helper text |
+| FormControlHelperText | `@/components/ui/form-control` | Helper content |
+| FormControlError | `@/components/ui/form-control` | Error container |
+| FormControlErrorIcon | `@/components/ui/form-control` | Error icon |
+| FormControlErrorText | `@/components/ui/form-control` | Error message |
+| Select | `@/components/ui/select` | Dropdown select |
+| SelectTrigger | `@/components/ui/select` | Select button |
+| SelectInput | `@/components/ui/select` | Select display |
+| SelectPortal | `@/components/ui/select` | Select dropdown |
+| SelectItem | `@/components/ui/select` | Select option |
+
+### Feedback Molecules
+| Component | Import | Description |
+|-----------|--------|-------------|
+| Alert | `@/components/ui/alert` | Alert message |
+| AlertIcon | `@/components/ui/alert` | Alert icon |
+| AlertText | `@/components/ui/alert` | Alert content |
+| Toast | `@/components/ui/toast` | Toast notification |
+| ToastTitle | `@/components/ui/toast` | Toast heading |
+| ToastDescription | `@/components/ui/toast` | Toast message |
+
+### Content Molecules
+| Component | Import | Description |
+|-----------|--------|-------------|
+| Card | `@/components/ui/card` | Content card |
+| Tooltip | `@/components/ui/tooltip` | Hover tooltip |
+| TooltipContent | `@/components/ui/tooltip` | Tooltip body |
+| TooltipText | `@/components/ui/tooltip` | Tooltip text |
+| Popover | `@/components/ui/popover` | Popover container |
+| PopoverContent | `@/components/ui/popover` | Popover body |
+
+---
+
+## Organisms (Complex Sections)
+
+These components form distinct interface sections and may contain multiple molecules.
+
+### Overlay Organisms
+| Component | Import | Description |
+|-----------|--------|-------------|
+| Modal | `@/components/ui/modal` | Modal dialog |
+| ModalBackdrop | `@/components/ui/modal` | Modal overlay |
+| ModalContent | `@/components/ui/modal` | Modal body |
+| ModalHeader | `@/components/ui/modal` | Modal header |
+| ModalBody | `@/components/ui/modal` | Modal content |
+| ModalFooter | `@/components/ui/modal` | Modal actions |
+| ModalCloseButton | `@/components/ui/modal` | Modal close |
+| Actionsheet | `@/components/ui/actionsheet` | Bottom sheet |
+| ActionsheetBackdrop | `@/components/ui/actionsheet` | Sheet overlay |
+| ActionsheetContent | `@/components/ui/actionsheet` | Sheet body |
+| ActionsheetItem | `@/components/ui/actionsheet` | Sheet option |
+| ActionsheetItemText | `@/components/ui/actionsheet` | Option text |
+| Drawer | `@/components/ui/drawer` | Side drawer |
+| DrawerBackdrop | `@/components/ui/drawer` | Drawer overlay |
+| DrawerContent | `@/components/ui/drawer` | Drawer body |
+
+### Navigation Organisms
+| Component | Import | Description |
+|-----------|--------|-------------|
+| Menu | `@/components/ui/menu` | Dropdown menu |
+| MenuItem | `@/components/ui/menu` | Menu option |
+| MenuItemLabel | `@/components/ui/menu` | Option text |
+| Accordion | `@/components/ui/accordion` | Accordion list |
+| AccordionItem | `@/components/ui/accordion` | Accordion section |
+| AccordionHeader | `@/components/ui/accordion` | Section header |
+| AccordionTrigger | `@/components/ui/accordion` | Section toggle |
+| AccordionContent | `@/components/ui/accordion` | Section content |
+
+### Feedback Organisms
+| Component | Import | Description |
+|-----------|--------|-------------|
+| AlertDialog | `@/components/ui/alert-dialog` | Confirmation dialog |
+| AlertDialogBackdrop | `@/components/ui/alert-dialog` | Dialog overlay |
+| AlertDialogContent | `@/components/ui/alert-dialog` | Dialog body |
+| AlertDialogHeader | `@/components/ui/alert-dialog` | Dialog header |
+| AlertDialogBody | `@/components/ui/alert-dialog` | Dialog content |
+| AlertDialogFooter | `@/components/ui/alert-dialog` | Dialog actions |
+| AlertDialogCloseButton | `@/components/ui/alert-dialog` | Dialog close |
+
+---
+
+## Classification Decision Guide
+
+When deciding which level a Gluestack component belongs to:
+
+### Use as Atom when:
+- It's a single, indivisible UI element
+- It has no internal state management
+- Examples: Button, Text, Icon, Input, Badge
+
+### Use as Molecule when:
+- It combines multiple atoms for one purpose
+- It may have isolated UI state
+- Examples: FormControl (label + input + error), Alert (icon + text)
+
+### Use as Organism when:
+- It forms a complete interface section
+- It has multiple interactive parts
+- Examples: Modal (backdrop + content + header + body + footer), Menu
+
+### Composition Example
+
+```typescript
+// Page (in app/ or features/*/screens/)
+export default function ProductScreen() {
+  const { data } = useProductQuery();
+  return (
+    <MainLayout>                              {/* Template */}
+      <ProductDetail product={data.product} /> {/* Organism */}
+    </MainLayout>
+  );
+}
+
+// Organism (in components/organisms/)
+const ProductDetail = memo(function ProductDetail({ product }: Props) {
+  return (
+    <Card>                                     {/* Molecule */}
+      <ProductImage src={product.image} />     {/* Atom */}
+      <VStack>                                 {/* Atom */}
+        <Heading>{product.name}</Heading>      {/* Atom */}
+        <PriceDisplay price={product.price} /> {/* Molecule */}
+        <AddToCartButton />                    {/* Molecule */}
+      </VStack>
+    </Card>
+  );
+});
+
+// Molecule (in components/molecules/)
+const PriceDisplay = memo(function PriceDisplay({ price, original }: Props) {
+  return (
+    <HStack space="sm">                        {/* Atom */}
+      <Text className="text-primary-500">     {/* Atom */}
+        ${price}
+      </Text>
+      {original && (
+        <Text className="line-through">        {/* Atom */}
+          ${original}
+        </Text>
+      )}
+    </HStack>
+  );
+});
+```

package/plugins/lisa-expo/.codex-plugin/skills/atomic-design-gluestack/scripts/test_validate_atomic_structure.py

@@ -0,0 +1,240 @@
+"""
+Tests for validate_atomic_structure.py seal detection helpers.
+
+Covers:
+- find_project_roots: should return ALL ancestor roots (not just first)
+- has_design_system_eslint_rule: should only match actual rule/plugin syntax
+- has_design_system_eslint_rule: should check .eslintrc.yaml/.yml, eslint.config.mts/.cts
+- has_design_system_eslint_rule: should parse package.json eslintConfig field
+"""
+
+import json
+import sys
+import tempfile
+import unittest
+from pathlib import Path
+
+# Allow importing the module under test
+sys.path.insert(0, str(Path(__file__).parent))
+from validate_atomic_structure import (
+    find_project_roots,
+    has_design_system_eslint_rule,
+    has_sealed_design_system,
+)
+
+
+class TestFindProjectRoots(unittest.TestCase):
+    """find_project_roots should return ALL package boundaries, not just the nearest."""
+
+    def test_returns_all_ancestor_roots_in_monorepo(self) -> None:
+        """In a monorepo, both the inner package root and the workspace root are returned."""
+        with tempfile.TemporaryDirectory() as tmp:
+            workspace = Path(tmp) / "workspace"
+            inner = workspace / "apps" / "mobile"
+            inner.mkdir(parents=True)
+
+            # workspace root: has .git
+            (workspace / ".git").mkdir()
+            # inner package: has package.json
+            (inner / "package.json").write_text("{}", encoding="utf-8")
+
+            source_file = inner / "src" / "components"
+            source_file.mkdir(parents=True)
+
+            roots = find_project_roots(str(source_file))
+            # Both the inner package root and the workspace root should be returned.
+            # Use .resolve() to handle symlinked temp dirs (e.g. /var → /private/var on macOS).
+            self.assertIn(inner.resolve(), roots)
+            self.assertIn(workspace.resolve(), roots)
+
+    def test_returns_single_root_for_simple_project(self) -> None:
+        """A flat project returns its single root."""
+        with tempfile.TemporaryDirectory() as tmp:
+            project = Path(tmp) / "project"
+            project.mkdir()
+            (project / "package.json").write_text("{}", encoding="utf-8")
+            (project / ".git").mkdir()
+
+            roots = find_project_roots(str(project / "src"))
+            self.assertEqual(len(roots), 1)
+            # Use .resolve() to handle symlinked temp dirs (e.g. /var → /private/var on macOS).
+            self.assertEqual(roots[0], project.resolve())
+
+    def test_falls_back_to_current_directory_when_no_root_found(self) -> None:
+        """When no package.json or .git exists, returns the starting path."""
+        with tempfile.TemporaryDirectory() as tmp:
+            orphan = Path(tmp) / "orphan" / "dir"
+            orphan.mkdir(parents=True)
+            roots = find_project_roots(str(orphan))
+            self.assertEqual(len(roots), 1)
+
+
+class TestHasDesignSystemEslintRule(unittest.TestCase):
+    """has_design_system_eslint_rule should match actual rule/plugin identifiers only."""
+
+    def test_ignores_comment_containing_design_system_substring(self) -> None:
+        """A comment that mentions 'design-system' without a slash must not trigger the seal."""
+        with tempfile.TemporaryDirectory() as tmp:
+            root = Path(tmp)
+            eslint = root / ".eslintrc.json"
+            eslint.write_text(
+                '{"rules": {}, "// note": "do not use design-system here"}',
+                encoding="utf-8",
+            )
+            self.assertFalse(
+                has_design_system_eslint_rule(root),
+                msg="Plain 'design-system' substring in a comment must not match",
+            )
+
+    def test_matches_design_system_slash_rule_syntax(self) -> None:
+        """An ESLint rule like 'design-system/no-raw-colors' should trigger the seal."""
+        with tempfile.TemporaryDirectory() as tmp:
+            root = Path(tmp)
+            eslint = root / ".eslintrc.json"
+            eslint.write_text(
+                '{"rules": {"design-system/no-raw-colors": "error"}}',
+                encoding="utf-8",
+            )
+            self.assertTrue(has_design_system_eslint_rule(root))
+
+    def test_checks_eslintrc_yaml(self) -> None:
+        """.eslintrc.yaml is a valid ESLint config and must be checked."""
+        with tempfile.TemporaryDirectory() as tmp:
+            root = Path(tmp)
+            yaml_config = root / ".eslintrc.yaml"
+            yaml_config.write_text(
+                'rules:\n  design-system/no-raw-colors: error\n',
+                encoding="utf-8",
+            )
+            self.assertTrue(has_design_system_eslint_rule(root))
+
+    def test_checks_eslintrc_yml(self) -> None:
+        """.eslintrc.yml is a valid ESLint config and must be checked."""
+        with tempfile.TemporaryDirectory() as tmp:
+            root = Path(tmp)
+            yml_config = root / ".eslintrc.yml"
+            yml_config.write_text(
+                'rules:\n  design-system/no-raw-colors: error\n',
+                encoding="utf-8",
+            )
+            self.assertTrue(has_design_system_eslint_rule(root))
+
+    def test_checks_eslint_config_mts(self) -> None:
+        """eslint.config.mts is a valid ESLint flat-config entry point and must be checked."""
+        with tempfile.TemporaryDirectory() as tmp:
+            root = Path(tmp)
+            mts_config = root / "eslint.config.mts"
+            mts_config.write_text(
+                'export default [{"rules": {"design-system/no-raw-colors": "error"}}];',
+                encoding="utf-8",
+            )
+            self.assertTrue(has_design_system_eslint_rule(root))
+
+    def test_checks_eslint_config_cts(self) -> None:
+        """eslint.config.cts is a valid ESLint flat-config entry point and must be checked."""
+        with tempfile.TemporaryDirectory() as tmp:
+            root = Path(tmp)
+            cts_config = root / "eslint.config.cts"
+            cts_config.write_text(
+                'module.exports = [{"rules": {"design-system/no-raw-colors": "error"}}];',
+                encoding="utf-8",
+            )
+            self.assertTrue(has_design_system_eslint_rule(root))
+
+    def test_checks_package_json_eslintconfig_field(self) -> None:
+        """The eslintConfig key in package.json must be checked for design-system rules."""
+        with tempfile.TemporaryDirectory() as tmp:
+            root = Path(tmp)
+            pkg = {
+                "name": "my-app",
+                "eslintConfig": {
+                    "rules": {"design-system/no-raw-colors": "error"}
+                },
+            }
+            (root / "package.json").write_text(json.dumps(pkg), encoding="utf-8")
+            self.assertTrue(has_design_system_eslint_rule(root))
+
+    def test_package_json_non_eslintconfig_does_not_trigger(self) -> None:
+        """A 'design-system' substring in package.json outside eslintConfig must not match."""
+        with tempfile.TemporaryDirectory() as tmp:
+            root = Path(tmp)
+            pkg = {
+                "name": "my-app",
+                "dependencies": {"design-system": "^1.0.0"},
+            }
+            (root / "package.json").write_text(json.dumps(pkg), encoding="utf-8")
+            self.assertFalse(
+                has_design_system_eslint_rule(root),
+                msg="'design-system' in dependencies must not trigger the ESLint seal check",
+            )
+
+
+class TestHasSealedDesignSystem(unittest.TestCase):
+    """has_sealed_design_system seal-detection logic."""
+
+    def test_seal_marker_alone_is_sufficient(self) -> None:
+        """A seal marker without an atom barrel or .claude/rules directory seals the project."""
+        with tempfile.TemporaryDirectory() as tmp:
+            project = Path(tmp) / "project"
+            project.mkdir()
+            (project / ".git").mkdir()
+            docs = project / "docs"
+            docs.mkdir()
+            (docs / "design-system-rfc.md").write_text("", encoding="utf-8")
+            # Deliberately NO atom barrel and NO .claude/rules directory.
+
+            self.assertTrue(
+                has_sealed_design_system(str(project)),
+                msg="A single seal marker must be sufficient to detect a sealed design system",
+            )
+
+    def test_atom_barrel_alone_is_sufficient(self) -> None:
+        """A project exposing only an atoms barrel is treated as having a sealed design system."""
+        with tempfile.TemporaryDirectory() as tmp:
+            project = Path(tmp) / "project"
+            project.mkdir()
+            (project / ".git").mkdir()
+            atoms = project / "src" / "components" / "atoms"
+            atoms.mkdir(parents=True)
+            (atoms / "index.ts").write_text("", encoding="utf-8")
+            # Deliberately NO seal marker and NO .claude/rules directory.
+
+            self.assertTrue(
+                has_sealed_design_system(str(project)),
+                msg="An atoms barrel alone must be sufficient to detect a sealed design system",
+            )
+
+
+class TestHasSealedDesignSystemMonorepo(unittest.TestCase):
+    """has_sealed_design_system should find seal markers in ancestor (workspace) roots."""
+
+    def test_finds_seal_marker_at_workspace_root_not_inner_package(self) -> None:
+        """Seal markers placed at the workspace root must be respected for inner packages."""
+        with tempfile.TemporaryDirectory() as tmp:
+            workspace = Path(tmp) / "workspace"
+            inner = workspace / "apps" / "mobile"
+            inner.mkdir(parents=True)
+
+            # workspace root: .git + seal marker
+            (workspace / ".git").mkdir()
+            rules_dir = workspace / ".claude" / "rules"
+            rules_dir.mkdir(parents=True)
+            (rules_dir / "use-the-design-library.md").write_text("", encoding="utf-8")
+
+            # inner package: package.json + atom barrel
+            (inner / "package.json").write_text("{}", encoding="utf-8")
+            atoms = inner / "components" / "atoms"
+            atoms.mkdir(parents=True)
+            (atoms / "index.ts").write_text("", encoding="utf-8")
+
+            target_dir = inner / "src" / "components" / "atoms"
+            target_dir.mkdir(parents=True)
+
+            self.assertTrue(
+                has_sealed_design_system(str(target_dir)),
+                msg="Seal marker at workspace root must be detected even for nested packages",
+            )
+
+
+if __name__ == "__main__":
+    unittest.main()