@salesforce/b2c-dx-mcp 2.0.0 → 2.1.1

package/content/sfnext/testing.md

@@ -1,232 +0,0 @@
-# Testing Strategy
-
-## Unit Tests (Vitest)
-
-This project uses **Vitest** for unit tests, running under Vite with jsdom as the default test environment.
-
-### Test File Organization
-
-Tests live alongside source files with `.test.ts` or `.test.tsx` extension:
-
-```typescript
-// src/components/product-card/product-card.test.tsx
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import { ProductCard } from './product-card';
-import { mockProduct } from '@/test-utils/mocks';
-
-describe('ProductCard', () => {
-    it('renders product name', () => {
-        render(<ProductCard product={mockProduct} />);
-        expect(screen.getByText(mockProduct.productName)).toBeInTheDocument();
-    });
-});
-```
-
-### Test Utilities
-
-Test utilities are available in `src/test-utils/`:
-- `config.ts` - Mock configuration objects and ConfigProvider wrappers
-- `context-provider-utils.ts` - Context provider helpers for testing
-- `context-provider.tsx` - Test context providers
-
-### Running Tests
-
-```bash
-# Run all tests with coverage
-pnpm test
-
-# Open Vitest UI (interactive test runner)
-pnpm test:ui
-
-# Watch mode (re-run on file changes)
-pnpm test:watch
-
-# Generate coverage report
-pnpm test
-# Coverage report outputs to console and coverage/ directory
-```
-
-### Coverage Requirements
-
-Coverage thresholds are enforced in `vitest.thresholds.ts`:
-- Lines: 73%
-- Statements: 73%
-- Functions: 86%
-- Branches: 87%
-
-These thresholds represent minimum values that must not be undershot. They should be raised regularly to reflect current status.
-
-### Testing Libraries
-
-- **@testing-library/react** - React component testing
-- **@testing-library/jest-dom** - Custom Jest DOM matchers
-- **@testing-library/user-event** - User interaction simulation
-- **@vitest/coverage-v8** - Code coverage
-- **@vitest/ui** - Interactive test UI
-
-## Storybook Testing
-
-Every reusable component should have a Storybook story file (`.stories.tsx`).
-
-### Story Structure
-
-```typescript
-// src/components/product-card/product-card.stories.tsx
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { within, expect } from 'storybook/test';
-import { waitForStorybookReady } from '@storybook/test-utils';
-import { ProductCard } from './product-card';
-import { ConfigProvider } from '@/config/context';
-import { mockConfig } from '@/test-utils/config';
-import { mockProduct } from '@/test-utils/mocks';
-
-const meta: Meta<typeof ProductCard> = {
-    title: 'Components/ProductCard',
-    component: ProductCard,
-    tags: ['autodocs', 'interaction'],
-    decorators: [
-        (Story) => (
-            <ConfigProvider config={mockConfig}>
-                <Story />
-            </ConfigProvider>
-        ),
-    ],
-};
-
-export default meta;
-type Story = StoryObj<typeof ProductCard>;
-
-export const Default: Story = {
-    args: {
-        product: mockProduct,
-    },
-    play: async ({ canvasElement }) => {
-        await waitForStorybookReady(canvasElement);
-        const canvas = within(canvasElement);
-        await expect(canvas.getByText(mockProduct.productName)).toBeInTheDocument();
-    },
-};
-```
-
-### Storybook Commands
-
-```bash
-# Development server (port 6006)
-pnpm storybook
-
-# Build static Storybook
-pnpm build-storybook
-
-# Snapshot tests (visual regression)
-pnpm test-storybook:snapshot
-pnpm test-storybook:snapshot:update  # Update snapshots
-
-# Interaction tests (play functions)
-pnpm test-storybook:interaction
-pnpm test-storybook:static:interaction  # Against static build
-
-# Accessibility tests
-pnpm test-storybook:a11y
-pnpm test-storybook:static:a11y  # Against static build
-
-# Generate story tests with coverage
-pnpm generate:story-tests:coverage
-```
-
-### Storybook Features
-
-- **@storybook/addon-docs** - Automatic documentation generation
-- **@storybook/addon-a11y** - Accessibility testing and validation
-- **@storybook/addon-vitest** - Integration with Vitest
-- **@storybook/test-runner** - Automated testing (interaction, a11y)
-- **Viewport Toolbar** - Built-in toolbar for testing different screen sizes
-
-> **Important**: Use Storybook's built-in viewport toolbar instead of creating separate Mobile/Tablet/Desktop stories. Use the viewport selector in the Storybook toolbar to test components at different screen sizes.
-
-### Story Tags
-
-- `autodocs` - Enable automatic documentation
-- `interaction` - Include in interaction test runs
-- `skip-a11y` - Exclude from a11y tests (use sparingly)
-
-## Testing Best Practices
-
-### Component Testing
-
-1. **Colocate tests** - Keep test files next to source files
-2. **Use test utilities** - Leverage `@/test-utils` for mocks and providers
-3. **Mock external dependencies** - Use `vi.mock()` for API clients, context providers, etc.
-4. **Test user interactions** - Use `@testing-library/user-event` for realistic interactions
-5. **Test accessibility** - Use Storybook a11y addon and test-runner
-
-### Storybook Stories
-
-1. **Multiple variants** - Create stories for different states (Default, Loading, Error, etc.)
-2. **Play functions** - Use `play` functions for interaction testing
-3. **Decorators** - Wrap stories with necessary providers (ConfigProvider, etc.)
-4. **Documentation** - Include component descriptions and prop documentation
-5. **Viewport testing** - Use built-in viewport toolbar, not separate stories
-
-### Route Testing
-
-Route tests should mock:
-- Loader functions and their return values
-- Action functions
-- React Router context
-- API clients
-
-Example:
-
-```typescript
-// src/routes/_app.product.$productId.test.tsx
-import { describe, test, expect, vi } from 'vitest';
-import { render } from '@testing-library/react';
-
-vi.mock('@/components/product-view', () => ({
-    default: ({ product }: any) => (
-        <div data-testid="product-view">
-            <div data-testid="product-name">{product?.name}</div>
-        </div>
-    ),
-}));
-
-// Test route component...
-```
-
-## Testing Recommendations
-
-### SEO Crawler Emulation
-
-- Use **Googlebot user agent** in network conditions to emulate SEO crawler behavior
-- This changes React Router's streaming strategy and shows what crawlers see for SSR
-- Helps verify server-side rendering works correctly for search engines
-
-### Coverage Goals
-
-- Maintain coverage above thresholds defined in `vitest.thresholds.ts`
-- Raise thresholds regularly as coverage improves
-- Focus on testing critical paths and user-facing functionality
-
-### Test Organization
-
-```
-src/
-├── components/
-│   ├── product-card/
-│   │   ├── index.tsx              # Component
-│   │   ├── index.test.tsx          # Unit tests
-│   │   └── index.stories.tsx       # Storybook stories
-├── routes/
-│   ├── _app.product.$productId.tsx
-│   └── _app.product.$productId.test.tsx
-└── test-utils/                     # Shared test utilities
-    ├── config.ts
-    └── context-provider-utils.ts
-```
-
-## References
-
-- **README-TESTS.md** - Complete testing documentation
-- **.storybook/README-STORYBOOK.md** - Storybook setup and usage guide
-- **vitest.thresholds.ts** - Coverage threshold definitions

package/dist/tools/storefrontnext/figma/figma-to-component/figma-url-parser.d.ts

@@ -1,24 +0,0 @@
-/**
- * Extracted parameters from a Figma design URL.
- *
- * @property {string} fileKey - Figma file identifier from URL path
- * @property {string} nodeId - Node identifier (colon format for Figma MCP)
- */
-export interface FigmaParams {
-    fileKey: string;
-    nodeId: string;
-}
-/**
- * Parses a Figma URL to extract fileKey and nodeId.
- *
- * Supported URL formats:
- * - https://figma.com/design/:fileKey/:fileName?node-id=1-2
- * - https://www.figma.com/design/:fileKey/:fileName?node-id=1-2
- * - https://figma.com/file/:fileKey/:fileName?node-id=1-2
- *
- * @param figmaUrl - The Figma URL to parse
- * @returns Object with fileKey and nodeId
- * @throws {Error} When URL is not from figma.com, fileKey cannot be extracted, or node-id is missing
- * @throws {TypeError} When URL format is invalid
- */
-export declare function parseFigmaUrl(figmaUrl: string): FigmaParams;

package/dist/tools/storefrontnext/figma/figma-to-component/figma-url-parser.js

@@ -1,53 +0,0 @@
-/*
- * Copyright (c) 2025, Salesforce, Inc.
- * SPDX-License-Identifier: Apache-2
- * For full license text, see the license.txt file in the repo root or http://www.apache.org/licenses/LICENSE-2.0
- */
-/**
- * Parses a Figma URL to extract fileKey and nodeId.
- *
- * Supported URL formats:
- * - https://figma.com/design/:fileKey/:fileName?node-id=1-2
- * - https://www.figma.com/design/:fileKey/:fileName?node-id=1-2
- * - https://figma.com/file/:fileKey/:fileName?node-id=1-2
- *
- * @param figmaUrl - The Figma URL to parse
- * @returns Object with fileKey and nodeId
- * @throws {Error} When URL is not from figma.com, fileKey cannot be extracted, or node-id is missing
- * @throws {TypeError} When URL format is invalid
- */
-export function parseFigmaUrl(figmaUrl) {
-    try {
-        const url = new URL(figmaUrl);
-        // Validate it's a Figma URL
-        if (!url.hostname.includes('figma.com')) {
-            throw new Error('URL must be from figma.com');
-        }
-        // Extract fileKey from pathname
-        // Pattern: /design/:fileKey/:fileName or /file/:fileKey/:fileName
-        const pathMatch = url.pathname.match(/\/(design|file)\/([^/]+)/);
-        if (!pathMatch || !pathMatch[2]) {
-            throw new Error('Could not extract fileKey from URL. Expected format: https://figma.com/design/:fileKey/:fileName');
-        }
-        const fileKey = pathMatch[2];
-        // Extract nodeId from query params
-        // Pattern: ?node-id=1-2 or ?node-id=1:2
-        const nodeIdParam = url.searchParams.get('node-id');
-        if (!nodeIdParam) {
-            throw new Error('Could not extract node-id from URL. Expected query parameter: ?node-id=1-2');
-        }
-        // Convert node-id format from "1-2" to "1:2" (Figma MCP expects colon format)
-        const nodeId = nodeIdParam.replaceAll('-', ':');
-        return {
-            fileKey,
-            nodeId,
-        };
-    }
-    catch (error) {
-        if (error instanceof TypeError) {
-            throw new TypeError(`Invalid URL format: ${figmaUrl}`);
-        }
-        throw error;
-    }
-}
-//# sourceMappingURL=figma-url-parser.js.map

package/dist/tools/storefrontnext/figma/figma-to-component/index.d.ts

@@ -1,45 +0,0 @@
-/**
- * Figma-to-component workflow orchestrator tool.
- *
- * Parses Figma URLs, loads workflow instructions, and returns step-by-step guidance
- * for converting Figma designs to Storefront Next components.
- *
- * @module tools/storefrontnext/figma/figma-to-component
- */
-import { z } from 'zod';
-import type { McpTool } from '../../../../utils/index.js';
-import type { Services } from '../../../../services.js';
-export declare const figmaToComponentSchema: z.ZodObject<{
-    figmaUrl: z.ZodString;
-    workflowFilePath: z.ZodOptional<z.ZodString>;
-    projectDirectory: z.ZodOptional<z.ZodString>;
-}, "strict", z.ZodTypeAny, {
-    figmaUrl: string;
-    projectDirectory?: string | undefined;
-    workflowFilePath?: string | undefined;
-}, {
-    figmaUrl: string;
-    projectDirectory?: string | undefined;
-    workflowFilePath?: string | undefined;
-}>;
-export type FigmaToComponentInput = z.infer<typeof figmaToComponentSchema>;
-export interface WorkflowConfig {
-    /** YAML frontmatter key-value pairs. Parsed for future use (e.g., taskType-specific behavior). */
-    metadata: Record<string, string>;
-    content: string;
-}
-/**
- * Generates the workflow guide for Figma-to-component conversion.
- *
- * @param figmaUrl - Figma design URL with node-id query parameter
- * @param workflowFilePath - Optional absolute path to custom workflow .md file; uses built-in default if omitted
- * @returns Formatted workflow guide string with Figma parameters and step-by-step instructions, or error message if URL or workflow file is invalid
- */
-export declare function generateWorkflowResponse(figmaUrl: string, workflowFilePath?: string): string;
-/**
- * Creates the sfnext_start_figma_workflow MCP tool.
- *
- * @param loadServices - Function that loads configuration and returns Services instance
- * @returns MCP tool for workflow orchestration
- */
-export declare function createFigmaToComponentTool(loadServices: () => Promise<Services> | Services): McpTool;