@salesforce/b2c-dx-mcp 0.4.4 → 0.4.5
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.
- package/README.md +82 -370
- package/content/pwav3/components.md +400 -0
- package/content/pwav3/config.md +124 -0
- package/content/pwav3/data-fetching.md +213 -0
- package/content/pwav3/extensibility.md +167 -0
- package/content/pwav3/i18n.md +214 -0
- package/content/pwav3/quick-reference.md +169 -0
- package/content/pwav3/routing.md +107 -0
- package/content/pwav3/state-management.md +193 -0
- package/content/pwav3/styling.md +248 -0
- package/content/pwav3/testing.md +124 -0
- package/content/site-theming/theming-accessibility.md +126 -0
- package/content/site-theming/theming-questions.md +208 -0
- package/content/site-theming/theming-validation.md +174 -0
- package/dist/registry.js +1 -1
- package/dist/services.d.ts +10 -10
- package/dist/services.js +19 -12
- package/dist/tools/cartridges/index.js +1 -6
- package/dist/tools/index.d.ts +1 -4
- package/dist/tools/index.js +1 -4
- package/dist/tools/mrt/index.js +1 -6
- package/dist/tools/pwav3/index.d.ts +12 -3
- package/dist/tools/pwav3/index.js +5 -63
- package/dist/tools/pwav3/pwa-kit-development-guidelines.d.ts +9 -0
- package/dist/tools/pwav3/pwa-kit-development-guidelines.js +151 -0
- package/dist/tools/scapi/index.d.ts +1 -1
- package/dist/tools/scapi/index.js +6 -1
- package/dist/tools/scapi/scapi-custom-api-scaffold.d.ts +60 -0
- package/dist/tools/scapi/scapi-custom-api-scaffold.js +175 -0
- package/dist/tools/storefrontnext/figma/figma-to-component/figma-url-parser.d.ts +24 -0
- package/dist/tools/storefrontnext/figma/figma-to-component/figma-url-parser.js +53 -0
- package/dist/tools/storefrontnext/figma/figma-to-component/index.d.ts +42 -0
- package/dist/tools/storefrontnext/figma/figma-to-component/index.js +325 -0
- package/dist/tools/storefrontnext/figma/generate-component/decision.d.ts +40 -0
- package/dist/tools/storefrontnext/figma/generate-component/decision.js +312 -0
- package/dist/tools/storefrontnext/figma/generate-component/formatter.d.ts +9 -0
- package/dist/tools/storefrontnext/figma/generate-component/formatter.js +92 -0
- package/dist/tools/storefrontnext/figma/generate-component/index.d.ts +114 -0
- package/dist/tools/storefrontnext/figma/generate-component/index.js +98 -0
- package/dist/tools/storefrontnext/figma/map-tokens/css-parser.d.ts +71 -0
- package/dist/tools/storefrontnext/figma/map-tokens/css-parser.js +260 -0
- package/dist/tools/storefrontnext/figma/map-tokens/index.d.ts +61 -0
- package/dist/tools/storefrontnext/figma/map-tokens/index.js +234 -0
- package/dist/tools/storefrontnext/figma/map-tokens/token-matcher.d.ts +65 -0
- package/dist/tools/storefrontnext/figma/map-tokens/token-matcher.js +268 -0
- package/dist/tools/storefrontnext/index.d.ts +17 -0
- package/dist/tools/storefrontnext/index.js +10 -60
- package/dist/tools/storefrontnext/page-designer-decorator/analyzer.js +15 -0
- package/dist/tools/storefrontnext/page-designer-decorator/index.js +3 -3
- package/dist/tools/storefrontnext/{developer-guidelines.js → sfnext-development-guidelines.js} +3 -3
- package/dist/tools/storefrontnext/site-theming/color-contrast.d.ts +92 -0
- package/dist/tools/storefrontnext/site-theming/color-contrast.js +186 -0
- package/dist/tools/storefrontnext/site-theming/color-mapping.d.ts +16 -0
- package/dist/tools/storefrontnext/site-theming/color-mapping.js +131 -0
- package/dist/tools/storefrontnext/site-theming/guidance-merger.d.ts +11 -0
- package/dist/tools/storefrontnext/site-theming/guidance-merger.js +78 -0
- package/dist/tools/storefrontnext/site-theming/index.d.ts +14 -0
- package/dist/tools/storefrontnext/site-theming/index.js +122 -0
- package/dist/tools/storefrontnext/site-theming/response-builder.d.ts +16 -0
- package/dist/tools/storefrontnext/site-theming/response-builder.js +316 -0
- package/dist/tools/storefrontnext/site-theming/theming-store.d.ts +62 -0
- package/dist/tools/storefrontnext/site-theming/theming-store.js +410 -0
- package/dist/tools/storefrontnext/site-theming/types.d.ts +35 -0
- package/dist/tools/storefrontnext/site-theming/types.js +7 -0
- package/oclif.manifest.json +1 -1
- package/package.json +8 -5
- /package/content/{auth.md → sfnext/auth.md} +0 -0
- /package/content/{components.md → sfnext/components.md} +0 -0
- /package/content/{config.md → sfnext/config.md} +0 -0
- /package/content/{data-fetching.md → sfnext/data-fetching.md} +0 -0
- /package/content/{extensions.md → sfnext/extensions.md} +0 -0
- /package/content/{i18n.md → sfnext/i18n.md} +0 -0
- /package/content/{page-designer.md → sfnext/page-designer.md} +0 -0
- /package/content/{performance.md → sfnext/performance.md} +0 -0
- /package/content/{pitfalls.md → sfnext/pitfalls.md} +0 -0
- /package/content/{quick-reference.md → sfnext/quick-reference.md} +0 -0
- /package/content/{state-management.md → sfnext/state-management.md} +0 -0
- /package/content/{styling.md → sfnext/styling.md} +0 -0
- /package/content/{testing.md → sfnext/testing.md} +0 -0
- /package/dist/tools/storefrontnext/{developer-guidelines.d.ts → sfnext-development-guidelines.d.ts} +0 -0
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
# Testing
|
|
2
|
+
|
|
3
|
+
## Overview
|
|
4
|
+
|
|
5
|
+
PWA Kit applications use Jest and React Testing Library for testing. Tests are co-located with source files using the `.test.js` or `.test.jsx` suffix.
|
|
6
|
+
|
|
7
|
+
## Testing Stack
|
|
8
|
+
|
|
9
|
+
- **Jest** - Test runner and assertion library
|
|
10
|
+
- **React Testing Library** - Component testing utilities
|
|
11
|
+
- **@testing-library/user-event** - User interaction simulation
|
|
12
|
+
- **MSW (Mock Service Worker)** - API mocking at network layer
|
|
13
|
+
- **jest-fetch-mock** - Fetch API mocking
|
|
14
|
+
|
|
15
|
+
## Test File Organization
|
|
16
|
+
|
|
17
|
+
Co-locate test files with source code:
|
|
18
|
+
|
|
19
|
+
```
|
|
20
|
+
app/components/product-tile/
|
|
21
|
+
├── index.jsx
|
|
22
|
+
└── product-tile.test.jsx
|
|
23
|
+
|
|
24
|
+
app/hooks/
|
|
25
|
+
├── use-current-basket.js
|
|
26
|
+
└── use-current-basket.test.js
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
## Jest Configuration
|
|
30
|
+
|
|
31
|
+
**Reference:** The template uses `@salesforce/pwa-kit-dev/configs/jest`. Extend it and set `moduleNameMapper` for `@salesforce/retail-react-app` if needed.
|
|
32
|
+
|
|
33
|
+
## Component Testing
|
|
34
|
+
|
|
35
|
+
Use `render`/`screen` from React Testing Library, `userEvent` for interactions. See `app/components/product-tile/index.test.jsx` and other `*.test.js` files in the template for patterns.
|
|
36
|
+
|
|
37
|
+
### Test Utilities
|
|
38
|
+
|
|
39
|
+
Use `renderWithProviders` from `app/utils/test-utils` for components that need Commerce API, routing, Chakra UI, and React Query. See template tests (e.g. `app/pages/product-detail/index.test.js`) for examples.
|
|
40
|
+
|
|
41
|
+
## Mocking Commerce SDK Hooks
|
|
42
|
+
|
|
43
|
+
```jsx
|
|
44
|
+
import {useProduct} from '@salesforce/commerce-sdk-react';
|
|
45
|
+
|
|
46
|
+
jest.mock('@salesforce/commerce-sdk-react', () => ({
|
|
47
|
+
...jest.requireActual('@salesforce/commerce-sdk-react'),
|
|
48
|
+
useProduct: jest.fn()
|
|
49
|
+
}));
|
|
50
|
+
|
|
51
|
+
test('displays product when loaded', () => {
|
|
52
|
+
useProduct.mockReturnValue({
|
|
53
|
+
data: {id: 'test-123', name: 'Test Product'},
|
|
54
|
+
isLoading: false,
|
|
55
|
+
error: null
|
|
56
|
+
});
|
|
57
|
+
|
|
58
|
+
render(<ProductDetail productId="test-123" />);
|
|
59
|
+
expect(screen.getByText('Test Product')).toBeInTheDocument();
|
|
60
|
+
});
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
## MSW for API Mocking
|
|
64
|
+
|
|
65
|
+
```javascript
|
|
66
|
+
// mocks/handlers.js
|
|
67
|
+
import {rest} from 'msw';
|
|
68
|
+
|
|
69
|
+
export const handlers = [
|
|
70
|
+
rest.get('*/products/:productId', (req, res, ctx) => {
|
|
71
|
+
return res(ctx.json({
|
|
72
|
+
id: req.params.productId,
|
|
73
|
+
name: 'Mock Product',
|
|
74
|
+
price: 29.99
|
|
75
|
+
}));
|
|
76
|
+
})
|
|
77
|
+
];
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
## Testing User Interactions
|
|
81
|
+
|
|
82
|
+
```jsx
|
|
83
|
+
import userEvent from '@testing-library/user-event';
|
|
84
|
+
|
|
85
|
+
test('adds item to cart when button is clicked', async () => {
|
|
86
|
+
const user = userEvent.setup();
|
|
87
|
+
render(<ProductDetail productId="test-123" />);
|
|
88
|
+
|
|
89
|
+
const addButton = screen.getByRole('button', {name: /add to cart/i});
|
|
90
|
+
await user.click(addButton);
|
|
91
|
+
|
|
92
|
+
await waitFor(() => {
|
|
93
|
+
expect(screen.getByText(/added to cart/i)).toBeInTheDocument();
|
|
94
|
+
});
|
|
95
|
+
});
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
## Running Tests
|
|
99
|
+
|
|
100
|
+
```bash
|
|
101
|
+
# Run all tests
|
|
102
|
+
npm test
|
|
103
|
+
|
|
104
|
+
# Run in watch mode
|
|
105
|
+
npm test -- --watch
|
|
106
|
+
|
|
107
|
+
# Run with coverage
|
|
108
|
+
npm test -- --coverage
|
|
109
|
+
|
|
110
|
+
# Run specific test
|
|
111
|
+
npm test -- product-tile.test.jsx
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
## Best Practices
|
|
115
|
+
|
|
116
|
+
1. Test user behavior, not implementation
|
|
117
|
+
2. Use semantic queries (getByRole, getByLabelText)
|
|
118
|
+
3. Co-locate tests with source
|
|
119
|
+
4. Mock external dependencies
|
|
120
|
+
5. Write descriptive test names
|
|
121
|
+
6. Avoid testing library internals
|
|
122
|
+
7. Use MSW for API mocking
|
|
123
|
+
8. Keep tests simple and focused
|
|
124
|
+
9. Maintain high coverage (70%+)
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: Accessibility guidelines and WCAG compliance rules for theming
|
|
3
|
+
alwaysApply: false
|
|
4
|
+
---
|
|
5
|
+
# Accessibility Guidelines for Theming
|
|
6
|
+
|
|
7
|
+
## 🎯 Accessibility Requirements
|
|
8
|
+
|
|
9
|
+
**All theming implementations MUST comply with WCAG 2.1 Level AA standards at minimum.**
|
|
10
|
+
|
|
11
|
+
### Color Contrast Requirements
|
|
12
|
+
|
|
13
|
+
**WCAG 2.1 Contrast Ratios:**
|
|
14
|
+
- **Normal text (16px and below)**: Minimum 4.5:1 contrast ratio
|
|
15
|
+
- **Large text (18pt+ or 14pt+ bold)**: Minimum 3:1 contrast ratio
|
|
16
|
+
- **AAA compliance (recommended)**: 7:1 for normal text, 4.5:1 for large text
|
|
17
|
+
|
|
18
|
+
**Critical Color Combinations to Validate:**
|
|
19
|
+
1. Primary text on primary background
|
|
20
|
+
2. Secondary text on secondary background
|
|
21
|
+
3. Button text on button background
|
|
22
|
+
4. Link text on page background
|
|
23
|
+
5. Accent colors on all background variations
|
|
24
|
+
6. Muted text on muted backgrounds
|
|
25
|
+
7. Border colors against adjacent backgrounds
|
|
26
|
+
|
|
27
|
+
### Visual Hierarchy and Readability
|
|
28
|
+
|
|
29
|
+
**Text Readability:**
|
|
30
|
+
- Ensure sufficient contrast for all text sizes
|
|
31
|
+
- Avoid using similar brightness levels for text and background
|
|
32
|
+
- Test color combinations in both light and dark themes
|
|
33
|
+
- Consider users with color vision deficiencies
|
|
34
|
+
|
|
35
|
+
**Interactive Elements:**
|
|
36
|
+
- Buttons must have clear visual distinction from backgrounds
|
|
37
|
+
- Hover states must maintain or improve contrast
|
|
38
|
+
- Focus indicators must be clearly visible (minimum 3:1 contrast)
|
|
39
|
+
- Disabled states should still be readable (minimum 3:1 contrast)
|
|
40
|
+
|
|
41
|
+
### Font Accessibility
|
|
42
|
+
|
|
43
|
+
**Font Readability Requirements:**
|
|
44
|
+
- Body text should use fonts optimized for screen reading
|
|
45
|
+
- Minimum font size: 16px for body text (recommended)
|
|
46
|
+
- Line height: Minimum 1.5 for body text
|
|
47
|
+
- Letter spacing: Ensure adequate spacing for readability
|
|
48
|
+
- Font weights: Ensure sufficient contrast between weights
|
|
49
|
+
|
|
50
|
+
**Font Loading Performance:**
|
|
51
|
+
- Web fonts should not block rendering
|
|
52
|
+
- Provide appropriate fallback fonts
|
|
53
|
+
- Consider font-display: swap for better performance
|
|
54
|
+
- Test font loading on slow connections
|
|
55
|
+
|
|
56
|
+
### Color Vision Deficiency Considerations
|
|
57
|
+
|
|
58
|
+
**Design for Color Blindness:**
|
|
59
|
+
- Don't rely solely on color to convey information
|
|
60
|
+
- Use patterns, icons, or text labels in addition to color
|
|
61
|
+
- Test color combinations with color blindness simulators
|
|
62
|
+
- Ensure sufficient contrast even when colors are desaturated
|
|
63
|
+
|
|
64
|
+
**Common Color Blindness Types:**
|
|
65
|
+
- Protanopia (red-blind)
|
|
66
|
+
- Deuteranopia (green-blind)
|
|
67
|
+
- Tritanopia (blue-blind)
|
|
68
|
+
- Monochromacy (total color blindness)
|
|
69
|
+
|
|
70
|
+
### Focus and Keyboard Navigation
|
|
71
|
+
|
|
72
|
+
**Focus Indicators:**
|
|
73
|
+
- All interactive elements must have visible focus indicators
|
|
74
|
+
- Focus indicators must have minimum 3:1 contrast ratio
|
|
75
|
+
- Focus indicators should be at least 2px thick
|
|
76
|
+
- Use outline or border to indicate focus state
|
|
77
|
+
|
|
78
|
+
**Keyboard Accessibility:**
|
|
79
|
+
- All interactive elements must be keyboard accessible
|
|
80
|
+
- Tab order should be logical and intuitive
|
|
81
|
+
- Skip links should be provided for long pages
|
|
82
|
+
- Focus trap should be implemented in modals
|
|
83
|
+
|
|
84
|
+
### Screen Reader Considerations
|
|
85
|
+
|
|
86
|
+
**Semantic HTML:**
|
|
87
|
+
- Use proper heading hierarchy (h1-h6)
|
|
88
|
+
- Use semantic HTML elements (nav, main, article, etc.)
|
|
89
|
+
- Provide alt text for images
|
|
90
|
+
- Use ARIA labels when necessary
|
|
91
|
+
|
|
92
|
+
**Color and Screen Readers:**
|
|
93
|
+
- Screen readers don't convey color information
|
|
94
|
+
- Ensure information is accessible without color
|
|
95
|
+
- Use text labels, icons, or patterns in addition to color
|
|
96
|
+
|
|
97
|
+
### Testing and Validation
|
|
98
|
+
|
|
99
|
+
**Required Testing:**
|
|
100
|
+
1. Automated contrast checking (WCAG AA/AAA)
|
|
101
|
+
2. Manual visual inspection
|
|
102
|
+
3. Color blindness simulator testing
|
|
103
|
+
4. Screen reader testing
|
|
104
|
+
5. Keyboard navigation testing
|
|
105
|
+
|
|
106
|
+
**Tools for Validation:**
|
|
107
|
+
- Color contrast analyzers (WebAIM, WAVE)
|
|
108
|
+
- Color blindness simulators
|
|
109
|
+
- Screen reader testing (NVDA, JAWS, VoiceOver)
|
|
110
|
+
- Browser accessibility inspectors
|
|
111
|
+
|
|
112
|
+
### Implementation Guidelines
|
|
113
|
+
|
|
114
|
+
**When Implementing Themes:**
|
|
115
|
+
1. Always validate color contrast ratios before implementation
|
|
116
|
+
2. Test with multiple color combinations
|
|
117
|
+
3. Provide alternative color suggestions if contrast fails
|
|
118
|
+
4. Document accessibility decisions
|
|
119
|
+
5. Test with assistive technologies
|
|
120
|
+
|
|
121
|
+
**If Accessibility Issues Are Found:**
|
|
122
|
+
- Present findings clearly to the user
|
|
123
|
+
- Provide specific contrast ratios and WCAG compliance status
|
|
124
|
+
- Suggest concrete alternatives with improved contrast
|
|
125
|
+
- Explain the accessibility impact
|
|
126
|
+
- Wait for user confirmation before proceeding
|
|
@@ -0,0 +1,208 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: Theming questions and information gathering guidelines
|
|
3
|
+
alwaysApply: false
|
|
4
|
+
---
|
|
5
|
+
# Theming Questions and Information Gathering
|
|
6
|
+
|
|
7
|
+
## ⚠️ CRITICAL: Layout Preservation Rules
|
|
8
|
+
|
|
9
|
+
**NEVER modify positioning, layout, or structural CSS properties when applying theming changes. Only change colors, typography, and visual styling.**
|
|
10
|
+
|
|
11
|
+
### What NOT to Change:
|
|
12
|
+
- `position` properties (fixed, absolute, relative)
|
|
13
|
+
- `top`, `left`, `right`, `bottom` positioning
|
|
14
|
+
- `margin` and `padding` values
|
|
15
|
+
- `width`, `height`, `min-height`, `max-height`
|
|
16
|
+
- `display` properties (flex, grid, block)
|
|
17
|
+
- `z-index` values (unless specifically requested)
|
|
18
|
+
- `transform` properties
|
|
19
|
+
- Grid/flexbox layout properties
|
|
20
|
+
|
|
21
|
+
### What TO Change:
|
|
22
|
+
- `color`, `background-color`, `border-color`
|
|
23
|
+
- `text-decoration`, `font-weight`, `font-size`
|
|
24
|
+
- `opacity`, `box-shadow`, `border-radius`
|
|
25
|
+
- CSS custom properties (CSS variables)
|
|
26
|
+
- Hover states and transitions
|
|
27
|
+
- Theme-specific styling
|
|
28
|
+
|
|
29
|
+
### Example of CORRECT theming:
|
|
30
|
+
```css
|
|
31
|
+
/* ✅ CORRECT - Only changing colors and visual styling */
|
|
32
|
+
.navigation-item {
|
|
33
|
+
color: var(--foreground);
|
|
34
|
+
background-color: var(--background);
|
|
35
|
+
border-color: var(--border);
|
|
36
|
+
transition: color 0.2s ease;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.navigation-item:hover {
|
|
40
|
+
color: var(--accent);
|
|
41
|
+
background-color: var(--accent/10);
|
|
42
|
+
}
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
### Example of INCORRECT theming:
|
|
46
|
+
```css
|
|
47
|
+
/* ❌ INCORRECT - Changing layout/positioning */
|
|
48
|
+
.navigation-item {
|
|
49
|
+
margin-left: 20px; /* DON'T change margins */
|
|
50
|
+
position: relative; /* DON'T change positioning */
|
|
51
|
+
z-index: 100; /* DON'T change z-index */
|
|
52
|
+
width: 200px; /* DON'T change dimensions */
|
|
53
|
+
}
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
### When Layout Changes Are Needed:
|
|
57
|
+
If layout modifications are required, they should be:
|
|
58
|
+
1. Explicitly requested by the user
|
|
59
|
+
2. Clearly separated from theming changes
|
|
60
|
+
3. Documented as layout fixes, not theming
|
|
61
|
+
4. Tested thoroughly for responsive behavior
|
|
62
|
+
|
|
63
|
+
## 📋 Specification Compliance Rules
|
|
64
|
+
|
|
65
|
+
**ALWAYS follow user specifications exactly. Never make assumptions or interpretations.**
|
|
66
|
+
|
|
67
|
+
### ⚠️ **CRITICAL: WAIT FOR USER RESPONSE RULE**
|
|
68
|
+
|
|
69
|
+
**NEVER implement changes after asking clarifying questions without waiting for the user's response.**
|
|
70
|
+
|
|
71
|
+
**Required Process:**
|
|
72
|
+
1. Ask clarifying questions
|
|
73
|
+
2. **WAIT for user response** ⚠️ **CRITICAL STEP**
|
|
74
|
+
3. Only implement after receiving explicit guidance
|
|
75
|
+
4. Never proceed with assumptions
|
|
76
|
+
|
|
77
|
+
**Violations:**
|
|
78
|
+
- ❌ Ask questions then immediately implement
|
|
79
|
+
- ❌ Make assumptions about color/font mapping
|
|
80
|
+
- ❌ Proceed without explicit user guidance
|
|
81
|
+
- ❌ Implement "best guess" solutions
|
|
82
|
+
|
|
83
|
+
### ✅ **Color Specification Rules:**
|
|
84
|
+
1. **Use exact hex values** provided by the user
|
|
85
|
+
2. **Ask for clarification** on color type mapping (e.g., "brand" vs "accent")
|
|
86
|
+
3. **Propose color combinations** before implementing:
|
|
87
|
+
- Which color should be primary vs secondary?
|
|
88
|
+
- How should "brand" colors be used vs "accent" colors?
|
|
89
|
+
- Should "dark" colors be used for text or backgrounds?
|
|
90
|
+
- What should be the hover state colors?
|
|
91
|
+
4. **Never assume** color usage without explicit user guidance
|
|
92
|
+
|
|
93
|
+
### ✅ **Font Specification Rules:**
|
|
94
|
+
1. **Use exact font names** as provided by the user
|
|
95
|
+
2. **Ask for clarification** if font names are unclear or unfamiliar
|
|
96
|
+
3. **Verify font availability** before implementing
|
|
97
|
+
4. **Never substitute** similar fonts without user permission
|
|
98
|
+
|
|
99
|
+
### ✅ **General Specification Rules:**
|
|
100
|
+
1. **Follow exact specifications** without interpretation
|
|
101
|
+
2. **Ask clarifying questions** when specifications are ambiguous
|
|
102
|
+
3. **Propose implementation approaches** before making changes
|
|
103
|
+
4. **Confirm understanding** of requirements before proceeding
|
|
104
|
+
|
|
105
|
+
### Example of CORRECT specification handling:
|
|
106
|
+
```
|
|
107
|
+
User: "Use these colors: #635BFF (accent), #0A2540 (dark), #F6F9FC (brand), #FFFFFF (light)"
|
|
108
|
+
|
|
109
|
+
AI Response: "I see you've provided 4 colors. Before implementing, I'd like to clarify:
|
|
110
|
+
- Should #635BFF be used for primary actions and hover states?
|
|
111
|
+
- Should #0A2540 be used for text color or background?
|
|
112
|
+
- Should #F6F9FC be used for secondary elements or primary branding?
|
|
113
|
+
- What should be the light theme vs dark theme color mapping?"
|
|
114
|
+
|
|
115
|
+
[WAITS for user response before implementing]
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
### Example of INCORRECT specification handling:
|
|
119
|
+
```
|
|
120
|
+
❌ DON'T: Assume "sohne-var" means "Sohne" font
|
|
121
|
+
❌ DON'T: Guess color usage without asking
|
|
122
|
+
❌ DON'T: Make assumptions about font weights or styles
|
|
123
|
+
❌ DON'T: Implement without confirming understanding
|
|
124
|
+
❌ DON'T: Ask clarifying questions then immediately implement
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
## 🔄 WORKFLOW - PHASE 1: INFORMATION GATHERING
|
|
128
|
+
|
|
129
|
+
**YOU MUST FOLLOW THIS WORKFLOW - NO EXCEPTIONS:**
|
|
130
|
+
|
|
131
|
+
1. **DO NOT implement any changes yet**
|
|
132
|
+
2. **Ask the questions below ONE AT A TIME**
|
|
133
|
+
3. **WAIT for the user's response** before asking the next question
|
|
134
|
+
4. **Only proceed after ALL required questions are answered**
|
|
135
|
+
5. **Even if the user provided colors/fonts upfront, you MUST still ask ALL these clarifying questions**
|
|
136
|
+
- Colors provided? Still ask about color mapping, usage, hover states, etc.
|
|
137
|
+
- Fonts provided? Still ask about font usage, availability, headings vs body, etc.
|
|
138
|
+
6. **You MUST ask questions from ALL categories (colors, fonts, general) - do not skip any**
|
|
139
|
+
|
|
140
|
+
**VIOLATION OF THIS WORKFLOW IS A CRITICAL ERROR.**
|
|
141
|
+
|
|
142
|
+
### 📝 EXTRACTION
|
|
143
|
+
|
|
144
|
+
**BEFORE generating questions, you MUST extract and provide the theming information from the user's input.**
|
|
145
|
+
|
|
146
|
+
1. **Review the user's input** carefully for any theming information:
|
|
147
|
+
- Colors (hex values like "#635BFF", color types like "accent", "primary", "dark", "light")
|
|
148
|
+
- Fonts (font names like "Sohne Var", font types like "title", "body", "heading")
|
|
149
|
+
- Any other theming preferences (spacing, sizes, etc.)
|
|
150
|
+
|
|
151
|
+
2. **Extract and structure the information** in the following format:
|
|
152
|
+
- Colors: Array of objects with `hex` (string) and `type` (string, optional) properties
|
|
153
|
+
- Fonts: Array of objects with `name` (string) and `type` (string, optional) properties
|
|
154
|
+
- Other info: Key-value pairs as needed
|
|
155
|
+
|
|
156
|
+
3. **Call this tool again** with the extracted information in `conversationContext.collectedAnswers`:
|
|
157
|
+
```
|
|
158
|
+
{
|
|
159
|
+
conversationContext: {
|
|
160
|
+
collectedAnswers: {
|
|
161
|
+
colors: [{ hex: "#635BFF", type: "accent" }, { hex: "#0A2540", type: "dark" }, ...],
|
|
162
|
+
fonts: [{ name: "Sohne Var", type: "title" }, ...],
|
|
163
|
+
// ... other info
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
```
|
|
168
|
+
|
|
169
|
+
4. **Only after providing this information** will the tool generate the appropriate questions.
|
|
170
|
+
|
|
171
|
+
**IMPORTANT:**
|
|
172
|
+
- If the user did NOT mention colors or fonts, you can still call the tool with empty arrays or skip this step
|
|
173
|
+
- But if the user DID mention colors/fonts, you MUST extract them before proceeding
|
|
174
|
+
- **DO NOT proceed with questions until you have extracted and provided the theming information.**
|
|
175
|
+
|
|
176
|
+
### 🔄 UPDATING INFORMATION (MANDATORY)
|
|
177
|
+
|
|
178
|
+
**⚠️ CRITICAL: Whenever the user provides NEW or UPDATED theming information, you MUST call the tool again with the updated information.**
|
|
179
|
+
|
|
180
|
+
**This applies to:** New/updated colors, fonts, color mappings, or any theming preferences.
|
|
181
|
+
|
|
182
|
+
**Required Process:**
|
|
183
|
+
1. Extract the new/updated information from the user's message
|
|
184
|
+
2. Merge with ALL previously collected information (include everything, not just new data)
|
|
185
|
+
3. Call the `site_theming` tool IMMEDIATELY with complete updated information
|
|
186
|
+
4. If `colorMapping` is provided, validation will trigger automatically (see validation phase)
|
|
187
|
+
|
|
188
|
+
**Tool call structure:**
|
|
189
|
+
```
|
|
190
|
+
{
|
|
191
|
+
conversationContext: {
|
|
192
|
+
currentStep: "updating-information" | "validation",
|
|
193
|
+
collectedAnswers: {
|
|
194
|
+
colors: [...all colors, including previous and new...],
|
|
195
|
+
fonts: [...all fonts, including previous and new...],
|
|
196
|
+
colorMapping: {...all mappings, including previous and updated...},
|
|
197
|
+
// ... all other collected information
|
|
198
|
+
},
|
|
199
|
+
questionsAsked: [...previous questions...]
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
```
|
|
203
|
+
|
|
204
|
+
**⚠️ CRITICAL RULES:**
|
|
205
|
+
- Every update requires a new tool call (not optional)
|
|
206
|
+
- Include ALL previously collected information in each call
|
|
207
|
+
- If user provides `colorMapping`, it triggers automatic validation
|
|
208
|
+
- DO NOT implement without calling the tool with updated information first
|
|
@@ -0,0 +1,174 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: Theming validation rules and validation gate workflow
|
|
3
|
+
alwaysApply: false
|
|
4
|
+
---
|
|
5
|
+
# Theming Validation Rules
|
|
6
|
+
|
|
7
|
+
## 🔄 WORKFLOW - PHASE 2: VALIDATION GATE (MANDATORY - CANNOT SKIP)
|
|
8
|
+
|
|
9
|
+
**⚠️ CRITICAL: YOU CANNOT PROCEED TO IMPLEMENTATION WITHOUT COMPLETING THIS PHASE**
|
|
10
|
+
|
|
11
|
+
**STEP 7: CONSTRUCT COLOR MAPPING (MANDATORY IF COLORS PROVIDED)**
|
|
12
|
+
- **After collecting all user answers, you MUST construct a `colorMapping` object**
|
|
13
|
+
- **Map each color to its specific usage based on user answers:**
|
|
14
|
+
- Text colors (foreground on background)
|
|
15
|
+
- Button colors (button text on button background)
|
|
16
|
+
- Link colors (link text on page background)
|
|
17
|
+
- Accent colors (accent elements on various backgrounds)
|
|
18
|
+
- All other color combinations that will be used
|
|
19
|
+
- **This mapping is REQUIRED - you cannot skip this step**
|
|
20
|
+
|
|
21
|
+
**STEP 8: MANDATORY VALIDATION TOOL CALL**
|
|
22
|
+
- **YOU MUST call the `site_theming` tool AGAIN with `colorMapping` in `conversationContext.collectedAnswers`**
|
|
23
|
+
- **This is a SEPARATE tool call - do NOT implement after collecting answers**
|
|
24
|
+
- **This triggers automatic validation that you CANNOT skip**
|
|
25
|
+
- **See "HOW TO TRIGGER VALIDATION" section below for details**
|
|
26
|
+
- **⚠️ CRITICAL: If you skip this tool call and proceed to implementation, you are making a CRITICAL ERROR**
|
|
27
|
+
|
|
28
|
+
**STEP 9: PRESENT VALIDATION FINDINGS**
|
|
29
|
+
- **After the tool returns validation results, you MUST present ALL validation results to the user**
|
|
30
|
+
- **Show the complete validation output from the tool, including:**
|
|
31
|
+
- All contrast ratios for each color combination
|
|
32
|
+
- WCAG compliance status (AA/AAA/FAIL)
|
|
33
|
+
- Visual assessment (excellent/good/acceptable/poor)
|
|
34
|
+
- Any recommendations provided by the tool
|
|
35
|
+
- **If ANY issues found:**
|
|
36
|
+
- Show contrast ratios and WCAG compliance status
|
|
37
|
+
- Explain accessibility problems clearly
|
|
38
|
+
- Provide concrete alternative suggestions
|
|
39
|
+
- **WAIT for user confirmation before proceeding**
|
|
40
|
+
- **Even if all validations pass, you MUST still present the results to the user**
|
|
41
|
+
|
|
42
|
+
**STEP 10: USER CONFIRMATION**
|
|
43
|
+
- **You MUST wait for explicit user confirmation to proceed**
|
|
44
|
+
- **User must acknowledge validation findings (even if they choose to proceed with issues)**
|
|
45
|
+
- **Do NOT implement until user explicitly confirms they want to proceed**
|
|
46
|
+
|
|
47
|
+
### PHASE 3: IMPLEMENTATION (ONLY AFTER PHASE 2 COMPLETE)
|
|
48
|
+
|
|
49
|
+
**STEP 11: Implementation**
|
|
50
|
+
- **ONLY after completing ALL steps above may you implement the theme**
|
|
51
|
+
- **Specifically, you MUST have:**
|
|
52
|
+
1. Collected all user answers
|
|
53
|
+
2. Constructed colorMapping object
|
|
54
|
+
3. Called the tool with colorMapping (STEP 8)
|
|
55
|
+
4. Received validation results from the tool
|
|
56
|
+
5. Presented validation results to user (STEP 9)
|
|
57
|
+
6. Received user confirmation (STEP 10)
|
|
58
|
+
- **If you implement before completing Phase 2, you are making a CRITICAL ERROR**
|
|
59
|
+
- **If you implement without calling the tool with colorMapping, you are making a CRITICAL ERROR**
|
|
60
|
+
|
|
61
|
+
**Where to apply theme changes:**
|
|
62
|
+
- **For StorefrontNext/Odyssey projects:** Apply theme changes to `app.css`
|
|
63
|
+
- Standalone project: `src/app.css`
|
|
64
|
+
- Monorepo: `packages/template-retail-rsc-app/src/app.css`
|
|
65
|
+
- Update CSS custom properties in the `:root` block (light theme) and `.dark` / `[data-theme='dark']` blocks (dark theme) as needed
|
|
66
|
+
- **If the project uses a different theme file structure** (e.g., multiple CSS files, custom theme location): Ask the user to specify the destination file before implementing
|
|
67
|
+
|
|
68
|
+
### ✅ PRE-IMPLEMENTATION CHECKLIST (BLOCKING GATE)
|
|
69
|
+
|
|
70
|
+
**🛑 YOU CANNOT IMPLEMENT UNTIL ALL ITEMS BELOW ARE COMPLETE**
|
|
71
|
+
|
|
72
|
+
**This checklist is a MANDATORY BLOCKING GATE - you MUST verify each item before proceeding:**
|
|
73
|
+
|
|
74
|
+
- [ ] **Item 1:** All required questions answered
|
|
75
|
+
- [ ] **Item 2:** Constructed `colorMapping` object mapping all colors to their usage (text, buttons, links, accents, etc.)
|
|
76
|
+
- [ ] **Item 3:** Called `site_theming` tool AGAIN with `colorMapping` in `conversationContext.collectedAnswers` (this is a separate tool call, not the same call where you collected answers)
|
|
77
|
+
- [ ] **Item 4:** Received validation results from the tool (the tool automatically validates when colorMapping is provided)
|
|
78
|
+
- [ ] **Item 5:** Presented ALL validation findings to user (even if all pass) - show contrast ratios, WCAG status, visual assessment
|
|
79
|
+
- [ ] **Item 6:** If issues found, provided specific contrast ratios, WCAG status, and alternative suggestions
|
|
80
|
+
- [ ] **Item 7:** Received explicit user confirmation to proceed (user acknowledged findings)
|
|
81
|
+
- [ ] **Item 8:** Font validation completed (if fonts provided)
|
|
82
|
+
- [ ] **Item 9:** All validation concerns addressed or user explicitly chose to proceed despite issues
|
|
83
|
+
|
|
84
|
+
**ONLY when ALL items above are checked may you proceed to implementation.**
|
|
85
|
+
|
|
86
|
+
**⚠️ IF YOU IMPLEMENT WITHOUT COMPLETING THIS CHECKLIST, YOU ARE MAKING A CRITICAL ERROR.**
|
|
87
|
+
|
|
88
|
+
## ✅ VALIDATION
|
|
89
|
+
|
|
90
|
+
**⚠️ MANDATORY: Input Validation** - BEFORE implementing, you MUST validate ALL user-provided inputs:
|
|
91
|
+
|
|
92
|
+
### A. Color Combination Validation (MANDATORY if colors provided):
|
|
93
|
+
|
|
94
|
+
- Calculate contrast ratios for ALL color combinations (text on background, accent on backgrounds, etc.)
|
|
95
|
+
- Check WCAG AA/AAA compliance (4.5:1 for normal text, 3:1 for large text)
|
|
96
|
+
- Identify ANY accessibility issues or poor contrast combinations
|
|
97
|
+
- Visual/UX impact explanation - whether the combinations look good, are readable, and maintain visual hierarchy
|
|
98
|
+
- If issues are found, present them to the user with:
|
|
99
|
+
* Specific contrast ratios and WCAG compliance status
|
|
100
|
+
* Clear explanation of the accessibility problem
|
|
101
|
+
* Concrete alternative suggestions with improved contrast ratios
|
|
102
|
+
|
|
103
|
+
### B. Font Validation (MANDATORY if fonts provided):
|
|
104
|
+
|
|
105
|
+
- Verify font availability and accessibility (can it be loaded? Is it a real font?)
|
|
106
|
+
- Check if font is available on Google Fonts, Adobe Fonts, or needs custom hosting
|
|
107
|
+
- Validate font weights availability (does the font support the weights needed?)
|
|
108
|
+
- Assess font readability/legibility (especially for body text)
|
|
109
|
+
- Check font loading performance implications (web fonts vs system fonts)
|
|
110
|
+
- Evaluate font pairing (if multiple fonts provided, do they work well together?)
|
|
111
|
+
- Verify fallback fonts are appropriate
|
|
112
|
+
- If issues are found, present them to the user with:
|
|
113
|
+
* Specific concerns (availability, readability, performance, etc.)
|
|
114
|
+
* Clear explanation of the problem
|
|
115
|
+
* Concrete alternative suggestions (e.g., Google Fonts equivalents, better pairings)
|
|
116
|
+
* Performance/UX impact explanation
|
|
117
|
+
|
|
118
|
+
### C. General Input Validation:
|
|
119
|
+
|
|
120
|
+
- Validate any other user-provided inputs (spacing, sizes, etc.) if applicable
|
|
121
|
+
- Check for potential conflicts or issues
|
|
122
|
+
|
|
123
|
+
### IMPORTANT:
|
|
124
|
+
|
|
125
|
+
- **Validation is MANDATORY even if inputs seem fine**
|
|
126
|
+
- **DO NOT skip validation or implement without validating ALL provided inputs**
|
|
127
|
+
- **Call the tool with `colorMapping` to trigger automatic validation (see "HOW TO TRIGGER VALIDATION" above)**
|
|
128
|
+
- **Always respect the user's final decision** - if they insist on their choices after your suggestions, use them as specified
|
|
129
|
+
|
|
130
|
+
### 🚨 HOW TO TRIGGER VALIDATION:
|
|
131
|
+
|
|
132
|
+
**⚠️ CRITICAL: This is a SEPARATE tool call that you MUST make AFTER collecting all user answers OR when user provides/updates colorMapping.**
|
|
133
|
+
|
|
134
|
+
**Process:**
|
|
135
|
+
1. Construct `colorMapping` object mapping colors to usage (text, buttons, links, accents, hover states, etc.)
|
|
136
|
+
2. Call the `site_theming` tool with `colorMapping` (include ALL previously collected information):
|
|
137
|
+
|
|
138
|
+
```javascript
|
|
139
|
+
{
|
|
140
|
+
conversationContext: {
|
|
141
|
+
currentStep: "validation",
|
|
142
|
+
collectedAnswers: {
|
|
143
|
+
colors: [...all colors...],
|
|
144
|
+
fonts: [...all fonts...],
|
|
145
|
+
colorMapping: {
|
|
146
|
+
textColor: "#635BFF",
|
|
147
|
+
background: "#FFFFFF",
|
|
148
|
+
buttonBackground: "#0A2540",
|
|
149
|
+
buttonText: "#FFFFFF",
|
|
150
|
+
linkColor: "#0A2540",
|
|
151
|
+
accent: "#0A2540",
|
|
152
|
+
// ... all combinations
|
|
153
|
+
},
|
|
154
|
+
// ... all other collected information
|
|
155
|
+
},
|
|
156
|
+
questionsAsked: [...]
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
```
|
|
160
|
+
|
|
161
|
+
**The tool automatically:**
|
|
162
|
+
- Calculates contrast ratios for all color combinations
|
|
163
|
+
- Checks WCAG AA/AAA compliance
|
|
164
|
+
- Provides visual assessment
|
|
165
|
+
- Returns validation results
|
|
166
|
+
|
|
167
|
+
**You MUST then:**
|
|
168
|
+
- Present ALL validation results to the user
|
|
169
|
+
- Wait for user confirmation
|
|
170
|
+
- Only then proceed to implementation
|
|
171
|
+
|
|
172
|
+
**⚠️ IF YOU SKIP THIS TOOL CALL AND PROCEED TO IMPLEMENTATION, YOU ARE MAKING A CRITICAL ERROR.**
|
|
173
|
+
|
|
174
|
+
**Note:** If user provides updated colorMapping at any time, call the tool with updated information (see information gathering phase for update process). Validation will trigger automatically when colorMapping is provided.
|
package/dist/registry.js
CHANGED
|
@@ -205,7 +205,7 @@ async function registerTools(tools, server, allowNonGaTools) {
|
|
|
205
205
|
continue;
|
|
206
206
|
}
|
|
207
207
|
// Register the tool
|
|
208
|
-
//
|
|
208
|
+
// Register the tool (invocations are tracked by B2CDxMcpServer)
|
|
209
209
|
server.addTool(tool.name, tool.description, tool.inputSchema, async (args) => tool.handler(args));
|
|
210
210
|
}
|
|
211
211
|
}
|
package/dist/services.d.ts
CHANGED
|
@@ -184,16 +184,6 @@ export declare class Services {
|
|
|
184
184
|
* @returns WebDAV client instance
|
|
185
185
|
*/
|
|
186
186
|
getWebDavClient(): WebDavClient;
|
|
187
|
-
/**
|
|
188
|
-
* Get the project project directory.
|
|
189
|
-
* Falls back to process.cwd() if not explicitly set.
|
|
190
|
-
*
|
|
191
|
-
* This is the directory where the project is located, which may differ from process.cwd()
|
|
192
|
-
* when MCP clients spawn servers from a different location (e.g., home directory).
|
|
193
|
-
*
|
|
194
|
-
* @returns Project project directory path
|
|
195
|
-
*/
|
|
196
|
-
getWorkingDirectory(): string;
|
|
197
187
|
/**
|
|
198
188
|
* Join path segments.
|
|
199
189
|
*
|
|
@@ -223,6 +213,16 @@ export declare class Services {
|
|
|
223
213
|
* @returns Absolute path
|
|
224
214
|
*/
|
|
225
215
|
resolvePath(...segments: string[]): string;
|
|
216
|
+
/**
|
|
217
|
+
* Resolve a path relative to the project directory.
|
|
218
|
+
* If path is not supplied, returns the project directory.
|
|
219
|
+
* If path is absolute, returns it as-is.
|
|
220
|
+
* If path is relative, resolves it relative to the project directory.
|
|
221
|
+
*
|
|
222
|
+
* @param pathArg - Optional path to resolve
|
|
223
|
+
* @returns Resolved absolute path
|
|
224
|
+
*/
|
|
225
|
+
resolveWithProjectDirectory(pathArg?: string): string;
|
|
226
226
|
/**
|
|
227
227
|
* Get file or directory stats.
|
|
228
228
|
*
|