@codyswann/lisa 4.74.8 → 4.75.0

package/plugins/lisa-expo-devin/skills/gluestack-nativewind/references/spacing-scale.md

@@ -0,0 +1,300 @@
+# Spacing Scale Reference
+
+This reference provides the complete spacing scale for NativeWind/Tailwind CSS. Use only these values for consistent, maintainable layouts.
+
+## Standard Spacing Scale
+
+| Class Suffix | Pixels | Rem      | Usage                            |
+| ------------ | ------ | -------- | -------------------------------- |
+| `0`          | 0px    | 0rem     | Reset spacing                    |
+| `px`         | 1px    | -        | Hairline borders, minimal offset |
+| `0.5`        | 2px    | 0.125rem | Micro spacing                    |
+| `1`          | 4px    | 0.25rem  | Tight spacing                    |
+| `1.5`        | 6px    | 0.375rem | Compact spacing                  |
+| `2`          | 8px    | 0.5rem   | Small spacing                    |
+| `2.5`        | 10px   | 0.625rem | Small-medium spacing             |
+| `3`          | 12px   | 0.75rem  | Medium-small spacing             |
+| `3.5`        | 14px   | 0.875rem | Medium spacing                   |
+| `4`          | 16px   | 1rem     | **Default** - standard spacing   |
+| `5`          | 20px   | 1.25rem  | Medium-large spacing             |
+| `6`          | 24px   | 1.5rem   | Large spacing                    |
+| `7`          | 28px   | 1.75rem  | Large+ spacing                   |
+| `8`          | 32px   | 2rem     | Extra large spacing              |
+| `9`          | 36px   | 2.25rem  | XL spacing                       |
+| `10`         | 40px   | 2.5rem   | XXL spacing                      |
+| `11`         | 44px   | 2.75rem  | Touch target minimum             |
+| `12`         | 48px   | 3rem     | Section spacing                  |
+| `14`         | 56px   | 3.5rem   | Large section spacing            |
+| `16`         | 64px   | 4rem     | Major section spacing            |
+| `20`         | 80px   | 5rem     | Page section spacing             |
+| `24`         | 96px   | 6rem     | Hero spacing                     |
+| `28`         | 112px  | 7rem     | Extra hero spacing               |
+| `32`         | 128px  | 8rem     | Maximum spacing                  |
+| `36`         | 144px  | 9rem     | Oversized spacing                |
+| `40`         | 160px  | 10rem    | Oversized spacing                |
+| `44`         | 176px  | 11rem    | Oversized spacing                |
+| `48`         | 192px  | 12rem    | Oversized spacing                |
+| `52`         | 208px  | 13rem    | Oversized spacing                |
+| `56`         | 224px  | 14rem    | Oversized spacing                |
+| `60`         | 240px  | 15rem    | Oversized spacing                |
+| `64`         | 256px  | 16rem    | Oversized spacing                |
+| `72`         | 288px  | 18rem    | Oversized spacing                |
+| `80`         | 320px  | 20rem    | Oversized spacing                |
+| `96`         | 384px  | 24rem    | Maximum oversized                |
+
+## Spacing Properties
+
+### Padding
+
+| Property          | Classes      |
+| ----------------- | ------------ |
+| All sides         | `p-{scale}`  |
+| Horizontal        | `px-{scale}` |
+| Vertical          | `py-{scale}` |
+| Top               | `pt-{scale}` |
+| Right             | `pr-{scale}` |
+| Bottom            | `pb-{scale}` |
+| Left              | `pl-{scale}` |
+| Start (RTL-aware) | `ps-{scale}` |
+| End (RTL-aware)   | `pe-{scale}` |
+
+```tsx
+// Uniform padding
+<Box className="p-4" />  // 16px all sides
+
+// Horizontal and vertical
+<Box className="px-6 py-4" />  // 24px horizontal, 16px vertical
+
+// Individual sides
+<Box className="pt-2 pr-4 pb-6 pl-4" />
+```
+
+### Margin
+
+| Property          | Classes                              |
+| ----------------- | ------------------------------------ |
+| All sides         | `m-{scale}`                          |
+| Horizontal        | `mx-{scale}`                         |
+| Vertical          | `my-{scale}`                         |
+| Top               | `mt-{scale}`                         |
+| Right             | `mr-{scale}`                         |
+| Bottom            | `mb-{scale}`                         |
+| Left              | `ml-{scale}`                         |
+| Start (RTL-aware) | `ms-{scale}`                         |
+| End (RTL-aware)   | `me-{scale}`                         |
+| Auto              | `m-auto`, `mx-auto`, `my-auto`, etc. |
+
+```tsx
+// Centered horizontally
+<Box className="mx-auto" />
+
+// Stack spacing
+<Box className="mb-4" />  // 16px bottom margin
+
+// Negative margin (use sparingly)
+<Box className="-mt-2" />  // -8px top margin
+```
+
+### Gap (Flexbox/Grid)
+
+| Property   | Classes         |
+| ---------- | --------------- |
+| Both axes  | `gap-{scale}`   |
+| Row gap    | `gap-y-{scale}` |
+| Column gap | `gap-x-{scale}` |
+
+```tsx
+// Uniform gap in flex container
+<Box className="flex flex-row gap-4">
+  <Item />
+  <Item />
+  <Item />
+</Box>
+
+// Grid with different gaps
+<Box className="grid grid-cols-3 gap-x-6 gap-y-4">
+  <Item />
+  <Item />
+  <Item />
+</Box>
+```
+
+### Space Between (Legacy Alternative)
+
+Use `gap-*` instead when possible, but `space-*` is available:
+
+| Property   | Classes           |
+| ---------- | ----------------- |
+| Horizontal | `space-x-{scale}` |
+| Vertical   | `space-y-{scale}` |
+
+```tsx
+// Vertical stack with space between
+<Box className="flex flex-col space-y-4">
+  <Item />
+  <Item />
+</Box>
+```
+
+## Common Spacing Patterns
+
+### Card Padding
+
+```tsx
+// Compact card
+<Box className="p-3" />  // 12px
+
+// Standard card
+<Box className="p-4" />  // 16px
+
+// Spacious card
+<Box className="p-6" />  // 24px
+```
+
+### List Item Spacing
+
+```tsx
+// Tight list
+<Box className="py-2 px-3" />  // 8px vertical, 12px horizontal
+
+// Standard list
+<Box className="py-3 px-4" />  // 12px vertical, 16px horizontal
+
+// Spacious list
+<Box className="py-4 px-6" />  // 16px vertical, 24px horizontal
+```
+
+### Section Spacing
+
+```tsx
+// Between sections
+<Box className="my-8" />  // 32px vertical margin
+
+// Page sections
+<Box className="py-12" />  // 48px vertical padding
+
+// Hero sections
+<Box className="py-16" />  // 64px vertical padding
+```
+
+### Button Padding
+
+```tsx
+// Small button
+<Button className="px-3 py-1.5" />  // 12px horizontal, 6px vertical
+
+// Medium button
+<Button className="px-4 py-2" />  // 16px horizontal, 8px vertical
+
+// Large button
+<Button className="px-6 py-3" />  // 24px horizontal, 12px vertical
+```
+
+### Form Field Spacing
+
+```tsx
+// Form field group
+<Box className="space-y-4">  // 16px between fields
+  <Input />
+  <Input />
+  <Button />
+</Box>
+
+// Form section
+<Box className="space-y-6">  // 24px between sections
+  <FormSection />
+  <FormSection />
+</Box>
+```
+
+### Touch Targets
+
+Minimum touch target size is 44x44px (11 spacing units):
+
+```tsx
+// Icon button with minimum touch target
+<Pressable className="h-11 w-11 items-center justify-center">
+  <Icon />
+</Pressable>
+
+// Touch target with padding
+<Pressable className="p-3">  // At least 12px padding
+  <Text>Tappable</Text>
+</Pressable>
+```
+
+## Prohibited Patterns
+
+### Arbitrary Values
+
+Never use bracket notation for spacing:
+
+```tsx
+// WRONG
+<Box className="p-[13px]" />
+<Box className="m-[27px]" />
+<Box className="gap-[15px]" />
+
+// CORRECT - use nearest scale value
+<Box className="p-3" />   // 12px instead of 13px
+<Box className="m-7" />   // 28px instead of 27px
+<Box className="gap-4" /> // 16px instead of 15px
+```
+
+### Inline Style Spacing
+
+Never use inline styles for spacing:
+
+```tsx
+// WRONG
+<Box style={{ padding: 13 }} />
+<Box style={{ marginTop: 27 }} />
+
+// CORRECT
+<Box className="p-3" />
+<Box className="mt-7" />
+```
+
+### Non-Scale Decimals
+
+Only use defined decimal values:
+
+```tsx
+// WRONG
+<Box className="p-2.7" />
+<Box className="m-4.3" />
+
+// CORRECT - allowed decimals: 0.5, 1.5, 2.5, 3.5
+<Box className="p-2.5" />
+<Box className="m-4" />
+```
+
+## Responsive Spacing
+
+Apply different spacing at breakpoints:
+
+```tsx
+// Smaller padding on mobile, larger on desktop
+<Box className="p-4 md:p-6 lg:p-8" />
+
+// Responsive gap
+<Box className="gap-2 md:gap-4 lg:gap-6" />
+
+// Responsive margin
+<Box className="mt-4 md:mt-8 lg:mt-12" />
+```
+
+## Spacing Decision Guide
+
+| Context           | Recommended Values               |
+| ----------------- | -------------------------------- |
+| Icon spacing      | `1`, `1.5`, `2`                  |
+| Text line spacing | `1`, `2`, `3`                    |
+| Button padding    | `2-3` vertical, `3-6` horizontal |
+| Card padding      | `3`, `4`, `6`                    |
+| List item padding | `2-4` vertical, `3-4` horizontal |
+| Section spacing   | `6`, `8`, `12`, `16`             |
+| Page margins      | `4`, `6`, `8`                    |
+| Modal padding     | `4`, `6`                         |
+| Form field gap    | `3`, `4`                         |
+| Touch targets     | minimum `11` (44px)              |

package/plugins/lisa-expo-devin/skills/gluestack-nativewind/scripts/test_validate_styling.py

@@ -0,0 +1,240 @@
+"""
+Tests for validate_styling.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_styling 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()