@schandlergarcia/sf-web-components 1.9.54 → 1.9.55

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +27 -0
  2. package/package.json +1 -1
  3. package/scripts/verify-consistency.sh +23 -21
  4. package/src/templates/pages/Home.tsx.template +7 -7
  5. package/src/templates/pages/NotFound.tsx.template +2 -2
package/CHANGELOG.md CHANGED
@@ -5,6 +5,33 @@ All notable changes to this project will be documented in this file.
5
5
  The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
6
6
  and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
7
7
 
8
+ ## [1.9.55] - 2026-04-01
9
+
10
+ ### Fixed
11
+ - **src/templates/pages/Home.tsx.template** - Fixed incorrect component usage for outer app context
12
+ - Issue: Template used `UIButton`/`UIInput` from `@/components/library` (command center components)
13
+ - Template is installed to `src/pages/` which is outer app context (wrapped by AppLayout)
14
+ - Outer app pages should use shadcn components: `Button` from `@/components/ui/button`
15
+ - This was causing agent confusion - agents found both the installed Home.tsx (wrong) and __examples__/Home.tsx (correct) and didn't know which to follow
16
+ - Changed imports: `UIButton`/`UIInput` → `Button`/`Input` from shadcn
17
+ - Changed button variants: `variant="primary"` → default, `variant="secondary"` → `variant="outline"`
18
+
19
+ - **src/templates/pages/NotFound.tsx.template** - Fixed incorrect component usage for outer app context
20
+ - Same issue: used `UIButton` when it should use shadcn `Button`
21
+ - NotFound is rendered in outer app (AppLayout), not command center
22
+ - Changed import: `import UIButton from '@/components/library/ui/UIButton'` → `import { Button } from "@/components/ui/button"`
23
+ - Changed usage: `<UIButton>` → `<Button>`
24
+
25
+ ### Context
26
+ **Two UI Contexts:**
27
+ 1. **Outer app** (src/pages/Home.tsx, NotFound.tsx, Search.tsx) - uses shadcn `Button`, Lucide icons, rendered in AppLayout
28
+ 2. **Command center** (src/pages/BlankDashboard.tsx, all dashboard pages) - uses library `UIButton`, Heroicons, rendered in CommandCenter.tsx with `.heroui-scope`
29
+
30
+ BlankDashboard.tsx.template correctly uses library components because it's rendered inside the command center context. But Home.tsx and NotFound.tsx are outer app pages and must use shadcn components.
31
+
32
+ ### Impact
33
+ After reinstalling package, react4 will now get the correct outer app pattern. No more agent confusion about which components to use.
34
+
8
35
  ## [1.9.54] - 2026-04-01
9
36
 
10
37
  ### Added
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@schandlergarcia/sf-web-components",
3
- "version": "1.9.54",
3
+ "version": "1.9.55",
4
4
  "description": "Reusable Salesforce web components library with Tailwind CSS v4 and shadcn/ui",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
package/scripts/verify-consistency.sh CHANGED
@@ -81,56 +81,58 @@ fi
81
81
  echo ""
82
82
 
83
83
  # Check 4: Template imports
84
+ # Note: Outer app templates (Home, NotFound, Search) should use shadcn Button from @/components/ui/
85
+ # Command center dashboard templates (BlankDashboard) should use UIButton from @/components/library/
84
86
  echo "📄 Checking template imports..."
85
87
  TEMPLATE_ERRORS=0
86
88
 
87
- # Check NotFound.tsx.template
89
+ # Check NotFound.tsx.template (outer app - should use shadcn Button)
88
90
  if [ -f "$ROOT/src/templates/pages/NotFound.tsx.template" ]; then
89
- if grep -q "from '@/components/library/ui/UIButton'" "$ROOT/src/templates/pages/NotFound.tsx.template"; then
90
- echo -e " ${GREEN}✓${NC} NotFound.tsx.template imports UIButton correctly"
91
+ if grep -q 'from "@/components/ui/button"' "$ROOT/src/templates/pages/NotFound.tsx.template"; then
92
+ echo -e " ${GREEN}✓${NC} NotFound.tsx.template uses shadcn Button (correct for outer app)"
91
93
  else
92
- echo -e " ${RED}✗${NC} NotFound.tsx.template does not import UIButton correctly"
94
+ echo -e " ${RED}✗${NC} NotFound.tsx.template should import Button from @/components/ui/button (outer app context)"
93
95
  TEMPLATE_ERRORS=$((TEMPLATE_ERRORS + 1))
94
96
  fi
95
97
  fi
96
98
 
97
- # Check Home.tsx.template
99
+ # Check Home.tsx.template (outer app - should use shadcn Button/Input)
98
100
  if [ -f "$ROOT/src/templates/pages/Home.tsx.template" ]; then
99
- if grep -q "from '@/components/library/ui/UIInput'" "$ROOT/src/templates/pages/Home.tsx.template"; then
100
- echo -e " ${GREEN}✓${NC} Home.tsx.template imports UIInput correctly"
101
+ if grep -q 'from "@/components/ui/input"' "$ROOT/src/templates/pages/Home.tsx.template"; then
102
+ echo -e " ${GREEN}✓${NC} Home.tsx.template uses shadcn Input (correct for outer app)"
101
103
  else
102
- echo -e " ${RED}✗${NC} Home.tsx.template does not import UIInput correctly"
104
+ echo -e " ${RED}✗${NC} Home.tsx.template should import Input from @/components/ui/input (outer app context)"
103
105
  TEMPLATE_ERRORS=$((TEMPLATE_ERRORS + 1))
104
106
  fi
105
107
 
106
- if grep -q "from '@/components/library/ui/UIButton'" "$ROOT/src/templates/pages/Home.tsx.template"; then
107
- echo -e " ${GREEN}✓${NC} Home.tsx.template imports UIButton correctly"
108
+ if grep -q 'from "@/components/ui/button"' "$ROOT/src/templates/pages/Home.tsx.template"; then
109
+ echo -e " ${GREEN}✓${NC} Home.tsx.template uses shadcn Button (correct for outer app)"
108
110
  else
109
- echo -e " ${RED}✗${NC} Home.tsx.template does not import UIButton correctly"
111
+ echo -e " ${RED}✗${NC} Home.tsx.template should import Button from @/components/ui/button (outer app context)"
110
112
  TEMPLATE_ERRORS=$((TEMPLATE_ERRORS + 1))
111
113
  fi
112
114
  fi
113
115
 
114
- # Check Search.tsx.template
115
- if [ -f "$ROOT/src/templates/pages/Search.tsx.template" ]; then
116
- if grep -q "from '@/components/library/ui/UIInput'" "$ROOT/src/templates/pages/Search.tsx.template"; then
117
- echo -e " ${GREEN}✓${NC} Search.tsx.template imports UIInput correctly"
116
+ # Check BlankDashboard.tsx.template (command center - should use library components)
117
+ if [ -f "$ROOT/src/templates/pages/BlankDashboard.tsx.template" ]; then
118
+ if grep -q 'from "@/components/library"' "$ROOT/src/templates/pages/BlankDashboard.tsx.template"; then
119
+ echo -e " ${GREEN}✓${NC} BlankDashboard.tsx.template uses library components (correct for command center)"
118
120
  else
119
- echo -e " ${YELLOW}⚠${NC} Search.tsx.template does not import UIInput (may not need it)"
121
+ echo -e " ${YELLOW}⚠${NC} BlankDashboard.tsx.template may not import from library (check if needed)"
120
122
  fi
121
123
  fi
122
124
 
123
- # Check for wrong imports in templates
124
- WRONG_IMPORTS=$(grep -r "from '@/components/library/ui/Button'" "$ROOT/src/templates/" 2>/dev/null || true)
125
+ # Check for incorrect library imports in outer app templates
126
+ WRONG_IMPORTS=$(grep -E "(Home|NotFound|Search)\.tsx\.template" "$ROOT/src/templates/pages/" | xargs grep -l "from '@/components/library/ui/UIButton'" 2>/dev/null || true)
125
127
  if [ -n "$WRONG_IMPORTS" ]; then
126
- echo -e " ${RED}✗${NC} Templates importing Button instead of UIButton:"
128
+ echo -e " ${RED}✗${NC} Outer app templates incorrectly importing UIButton (should use shadcn Button):"
127
129
  echo "$WRONG_IMPORTS" | sed 's/^/ /'
128
130
  TEMPLATE_ERRORS=$((TEMPLATE_ERRORS + 1))
129
131
  fi
130
132
 
131
- WRONG_IMPORTS=$(grep -r "from '@/components/library/ui/Input'" "$ROOT/src/templates/" 2>/dev/null || true)
133
+ WRONG_IMPORTS=$(grep -E "(Home|NotFound|Search)\.tsx\.template" "$ROOT/src/templates/pages/" | xargs grep -l "from '@/components/library/ui/UIInput'" 2>/dev/null || true)
132
134
  if [ -n "$WRONG_IMPORTS" ]; then
133
- echo -e " ${RED}✗${NC} Templates importing Input instead of UIInput:"
135
+ echo -e " ${RED}✗${NC} Outer app templates incorrectly importing UIInput (should use shadcn Input):"
134
136
  echo "$WRONG_IMPORTS" | sed 's/^/ /'
135
137
  TEMPLATE_ERRORS=$((TEMPLATE_ERRORS + 1))
136
138
  fi
package/src/templates/pages/Home.tsx.template CHANGED
@@ -1,7 +1,7 @@
1
1
  import { useState } from "react";
2
2
  import { useNavigate } from "react-router";
3
- import UIInput from '@/components/library/ui/UIInput';
4
- import UIButton from '@/components/library/ui/UIButton';
3
+ import { Input } from "@/components/ui/input";
4
+ import { Button } from "@/components/ui/button";
5
5
  import { Search } from "lucide-react";
6
6
 
7
7
  export default function HomePage() {
@@ -34,7 +34,7 @@ export default function HomePage() {
34
34
  <div className="flex flex-col gap-4">
35
35
  <div className="relative">
36
36
  <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-slate-400" />
37
- <UIInput
37
+ <Input
38
38
  type="text"
39
39
  value={searchQuery}
40
40
  onChange={(e) => setSearchQuery(e.target.value)}
@@ -44,12 +44,12 @@ export default function HomePage() {
44
44
  />
45
45
  </div>
46
46
  <div className="flex gap-3 justify-center">
47
- <UIButton onClick={handleSearch} variant="primary">
47
+ <Button onClick={handleSearch}>
48
48
  Search
49
- </UIButton>
50
- <UIButton onClick={() => navigate('/accounts')} variant="secondary">
49
+ </Button>
50
+ <Button onClick={() => navigate('/accounts')} variant="outline">
51
51
  Browse All
52
- </UIButton>
52
+ </Button>
53
53
  </div>
54
54
  </div>
55
55
  </div>
package/src/templates/pages/NotFound.tsx.template CHANGED
@@ -1,5 +1,5 @@
1
1
  import { useNavigate } from "react-router";
2
- import UIButton from '@/components/library/ui/UIButton';
2
+ import { Button } from "@/components/ui/button";
3
3
 
4
4
  export default function NotFound() {
5
5
  const navigate = useNavigate();
@@ -12,7 +12,7 @@ export default function NotFound() {
12
12
  <p className="text-lg text-slate-600 dark:text-slate-400 mb-8">
13
13
  The page you're looking for doesn't exist.
14
14
  </p>
15
- <UIButton onClick={() => navigate("/")}>Go Home</UIButton>
15
+ <Button onClick={() => navigate("/")}>Go Home</Button>
16
16
  </div>
17
17
  </div>
18
18
  );