@codyswann/lisa 1.47.1 → 1.49.0

package/plugins/src/expo/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/src/expo/skills/gluestack-nativewind/scripts/validate_styling.py

@@ -0,0 +1,315 @@
+#!/usr/bin/env python3
+# This file is managed by Lisa.
+# Do not edit directly — changes will be overwritten on the next `lisa` run.
+"""
+Validates Gluestack UI v3 and NativeWind v4 styling patterns.
+
+This script detects common styling violations:
+1. Direct React Native imports with Gluestack equivalents
+2. Raw color values without semantic tokens
+3. Inline style objects where className could be used
+4. Arbitrary bracket notation values
+5. Non-scale spacing values
+
+Usage:
+    python3 validate_styling.py [path]
+
+Arguments:
+    path    Optional path to validate. Defaults to current directory.
+            Can be a file or directory.
+"""
+
+import os
+import re
+import sys
+from dataclasses import dataclass
+from pathlib import Path
+from typing import Optional
+
+
+@dataclass
+class Violation:
+    """Represents a styling violation."""
+    file: str
+    line: int
+    rule: str
+    message: str
+    severity: str = "error"
+
+
+# React Native components that have Gluestack equivalents
+RN_TO_GLUESTACK_MAP = {
+    "View": "Box",
+    "Text": "Text (from @/components/ui/text)",
+    "TouchableOpacity": "Pressable",
+    "TouchableHighlight": "Pressable",
+    "TouchableWithoutFeedback": "Pressable",
+    "Image": "Image (from @/components/ui/image)",
+    "ScrollView": "ScrollView (from @/components/ui/scroll-view)",
+    "TextInput": "Input + InputField",
+    "FlatList": "FlashList",
+    "SectionList": "FlashList",
+    "ActivityIndicator": "Spinner",
+    "Modal": "Modal (from @/components/ui/modal)",
+}
+
+# Raw colors that should be semantic tokens
+RAW_COLOR_PATTERNS = [
+    # Tailwind raw colors (red, green, blue, yellow, gray, etc.)
+    r'\b(text|bg|border|ring|fill|stroke)-(red|green|blue|yellow|orange|purple|pink|indigo|cyan|teal|emerald|lime|amber|violet|fuchsia|rose|sky|slate|gray|zinc|neutral|stone)-\d{2,3}\b',
+    # White/black that should be typography-0 or typography-950
+    r'\btext-white\b',
+    r'\btext-black\b',
+    r'\bbg-white\b',
+    r'\bbg-black\b',
+]
+
+# Semantic tokens that ARE allowed
+ALLOWED_SEMANTIC_PATTERNS = [
+    r'\b(text|bg|border|ring)-(primary|secondary|tertiary|error|success|warning|info|typography|outline|background|indicator)-',
+]
+
+# Arbitrary value patterns (bracket notation)
+ARBITRARY_VALUE_PATTERNS = [
+    r'\b[a-z]+-\[\d+px\]',  # p-[13px], m-[27px]
+    r'\b[a-z]+-\[\d+rem\]',  # p-[1.3rem]
+    r'\b[a-z]+-\[\d+%\]',   # w-[50%] (sometimes acceptable)
+    r'\bgap-\[\d+',         # gap-[15px]
+    r'\bspace-[xy]-\[\d+',  # space-x-[10px]
+]
+
+# Non-standard spacing values (not in Tailwind scale)
+# Valid values: 0, px, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 72, 80, 96
+VALID_SPACING_VALUES = {
+    "0", "px", "0.5", "1", "1.5", "2", "2.5", "3", "3.5", "4", "5", "6",
+    "7", "8", "9", "10", "11", "12", "14", "16", "20", "24", "28", "32",
+    "36", "40", "44", "48", "52", "56", "60", "64", "72", "80", "96"
+}
+
+# Exceptions - files/patterns to skip
+SKIP_PATTERNS = [
+    r'node_modules',
+    r'\.test\.',
+    r'\.spec\.',
+    r'__tests__',
+    r'components/ui/',  # UI primitives are allowed to use any styling
+    r'\.d\.ts$',
+    r'tailwind\.config',
+    r'\.config\.',
+]
+
+
+def should_skip_file(file_path: str) -> bool:
+    """Check if file should be skipped."""
+    for pattern in SKIP_PATTERNS:
+        if re.search(pattern, file_path):
+            return True
+    return False
+
+
+def is_semantic_color(match: str) -> bool:
+    """Check if a color class uses semantic tokens."""
+    for pattern in ALLOWED_SEMANTIC_PATTERNS:
+        if re.search(pattern, match):
+            return True
+    return False
+
+
+def check_rn_imports(content: str, file_path: str) -> list[Violation]:
+    """Check for React Native imports that should be Gluestack."""
+    violations = []
+    lines = content.split('\n')
+
+    for i, line in enumerate(lines, 1):
+        # Check for import from react-native
+        if 'from "react-native"' in line or "from 'react-native'" in line:
+            for rn_component, gluestack_equiv in RN_TO_GLUESTACK_MAP.items():
+                # Check if component is imported
+                if re.search(rf'\b{rn_component}\b', line):
+                    violations.append(Violation(
+                        file=file_path,
+                        line=i,
+                        rule="gluestack-components",
+                        message=f"Use Gluestack '{gluestack_equiv}' instead of React Native '{rn_component}'",
+                    ))
+
+    return violations
+
+
+def check_raw_colors(content: str, file_path: str) -> list[Violation]:
+    """Check for raw color values instead of semantic tokens."""
+    violations = []
+    lines = content.split('\n')
+
+    for i, line in enumerate(lines, 1):
+        # Skip comments
+        if line.strip().startswith('//') or line.strip().startswith('*'):
+            continue
+
+        for pattern in RAW_COLOR_PATTERNS:
+            matches = re.findall(pattern, line)
+            for match in matches:
+                if isinstance(match, tuple):
+                    match = '-'.join(match)
+                if not is_semantic_color(match):
+                    violations.append(Violation(
+                        file=file_path,
+                        line=i,
+                        rule="semantic-tokens",
+                        message=f"Use semantic color token instead of raw color '{match}'",
+                    ))
+
+    return violations
+
+
+def check_arbitrary_values(content: str, file_path: str) -> list[Violation]:
+    """Check for arbitrary bracket notation values."""
+    violations = []
+    lines = content.split('\n')
+
+    for i, line in enumerate(lines, 1):
+        # Skip comments
+        if line.strip().startswith('//') or line.strip().startswith('*'):
+            continue
+
+        for pattern in ARBITRARY_VALUE_PATTERNS:
+            matches = re.findall(pattern, line)
+            for match in matches:
+                violations.append(Violation(
+                    file=file_path,
+                    line=i,
+                    rule="no-arbitrary-values",
+                    message=f"Avoid arbitrary values '{match}'. Use spacing scale instead.",
+                    severity="warning",
+                ))
+
+    return violations
+
+
+def check_non_scale_spacing(content: str, file_path: str) -> list[Violation]:
+    """Check for spacing values not in the standard scale."""
+    violations = []
+    lines = content.split('\n')
+
+    # Pattern to match spacing classes: p-X, m-X, gap-X, etc.
+    spacing_pattern = r'\b(p|px|py|pt|pr|pb|pl|ps|pe|m|mx|my|mt|mr|mb|ml|ms|me|gap|gap-x|gap-y|space-x|space-y)-(\d+\.?\d*)\b'
+
+    for i, line in enumerate(lines, 1):
+        # Skip comments
+        if line.strip().startswith('//') or line.strip().startswith('*'):
+            continue
+
+        matches = re.findall(spacing_pattern, line)
+        for prefix, value in matches:
+            if value not in VALID_SPACING_VALUES:
+                violations.append(Violation(
+                    file=file_path,
+                    line=i,
+                    rule="spacing-scale",
+                    message=f"Spacing value '{value}' is not in the standard scale. Use a valid value: {', '.join(sorted(VALID_SPACING_VALUES, key=lambda x: float(x) if x != 'px' else 0.1))}",
+                    severity="warning",
+                ))
+
+    return violations
+
+
+def validate_file(file_path: str) -> list[Violation]:
+    """Validate a single file for styling violations."""
+    if should_skip_file(file_path):
+        return []
+
+    # Only check TypeScript/JavaScript files
+    if not file_path.endswith(('.tsx', '.ts', '.jsx', '.js')):
+        return []
+
+    try:
+        with open(file_path, 'r', encoding='utf-8') as f:
+            content = f.read()
+    except (IOError, UnicodeDecodeError):
+        return []
+
+    violations = []
+    violations.extend(check_rn_imports(content, file_path))
+    violations.extend(check_raw_colors(content, file_path))
+    violations.extend(check_arbitrary_values(content, file_path))
+    violations.extend(check_non_scale_spacing(content, file_path))
+
+    return violations
+
+
+def validate_directory(directory: str) -> list[Violation]:
+    """Validate all files in a directory recursively."""
+    violations = []
+
+    for root, dirs, files in os.walk(directory):
+        # Skip node_modules and other excluded directories
+        dirs[:] = [d for d in dirs if not should_skip_file(os.path.join(root, d))]
+
+        for file in files:
+            file_path = os.path.join(root, file)
+            violations.extend(validate_file(file_path))
+
+    return violations
+
+
+def format_violation(violation: Violation) -> str:
+    """Format a violation for display."""
+    severity_icon = "❌" if violation.severity == "error" else "⚠️"
+    return f"{severity_icon} {violation.file}:{violation.line} [{violation.rule}] {violation.message}"
+
+
+def main():
+    """Main entry point."""
+    # Get path from command line or use current directory
+    path = sys.argv[1] if len(sys.argv) > 1 else "."
+
+    # Resolve to absolute path
+    path = os.path.abspath(path)
+
+    if not os.path.exists(path):
+        print(f"❌ Path not found: {path}")
+        sys.exit(1)
+
+    print(f"🔍 Validating styling patterns in: {path}\n")
+
+    # Validate
+    if os.path.isfile(path):
+        violations = validate_file(path)
+    else:
+        violations = validate_directory(path)
+
+    # Report results
+    if not violations:
+        print("✅ No styling violations found!")
+        sys.exit(0)
+
+    # Group by file
+    by_file: dict[str, list[Violation]] = {}
+    for v in violations:
+        if v.file not in by_file:
+            by_file[v.file] = []
+        by_file[v.file].append(v)
+
+    # Print violations
+    error_count = 0
+    warning_count = 0
+
+    for file_path, file_violations in sorted(by_file.items()):
+        print(f"\n📄 {file_path}")
+        for v in sorted(file_violations, key=lambda x: x.line):
+            print(f"   {format_violation(v)}")
+            if v.severity == "error":
+                error_count += 1
+            else:
+                warning_count += 1
+
+    print(f"\n📊 Summary: {error_count} errors, {warning_count} warnings")
+
+    # Exit with error if there are errors
+    if error_count > 0:
+        sys.exit(1)
+    sys.exit(0)
+
+
+if __name__ == "__main__":
+    main()