@vizzly-testing/cli 0.23.0 → 0.23.2

package/claude-plugin/commands/setup.md

@@ -1,137 +0,0 @@
----
-description: Initialize Vizzly visual testing in a project
----
-
-# Setup Vizzly in Project
-
-Help the user set up Vizzly visual regression testing in their project.
-
-## Setup Steps
-
-**Execute steps 1-5 to complete the CLI setup, then proceed to step 6 for SDK recommendations.**
-
-1. **Check if Vizzly is already configured**
-   - Look for `vizzly.config.js` in the project root
-   - Check if `@vizzly-testing/cli` is in package.json
-   - If already configured, inform the user and exit
-
-2. **Install Vizzly CLI**
-
-   Run this command:
-
-   ```bash
-   npm install --save-dev @vizzly-testing/cli
-   ```
-
-3. **Initialize configuration**
-
-   Run this command:
-
-   ```bash
-   npx vizzly init
-   ```
-
-   This creates `vizzly.config.js` with sensible defaults.
-
-4. **Add .vizzly/ to .gitignore**
-
-   Add `.vizzly/` to the project's `.gitignore` file to avoid committing local TDD artifacts.
-
-5. **Environment Variables**
-
-   Present the user with instructions to set up their API token:
-
-   **For local development:**
-   Create a `.env` file:
-
-   ```
-   VIZZLY_TOKEN=your-api-token-here
-   ```
-
-   Add `.env` to `.gitignore`
-
-   **For CI/CD:**
-   Add `VIZZLY_TOKEN` as a secret in their CI provider
-
-6. **Next Steps**
-
-   After CLI setup is complete, detect the project type and recommend the appropriate SDK:
-
-   **SDK Detection Priority (check in this order):**
-   - **Ruby**: Check for `Gemfile` → Recommend Ruby SDK
-   - **Storybook**: Check for `@storybook/*` in package.json or `.storybook/` directory → Recommend Storybook SDK
-   - **Static Site**: Check for static site generators (`astro`, `next`, `gatsby`, `vitepress`, `eleventy` in package.json) or build directories (`dist/`, `build/`, `.next/out/`, `_site/`) → Recommend Static Site SDK
-   - **JavaScript/Node.js**: Check for `package.json` → Recommend JavaScript SDK
-
-   **Present the detected SDK recommendation:**
-
-   For Ruby:
-
-   ```
-   📦 Next: Install the Ruby SDK
-   gem install vizzly
-
-   Documentation: https://docs.vizzly.dev/integration/sdk/ruby/overview
-   ```
-
-   For Storybook:
-
-   ```
-   📦 Next: Install the Storybook SDK
-   npm install --save-dev @vizzly-testing/storybook
-
-   Documentation: https://docs.vizzly.dev/integration/sdk/storybook/overview
-   ```
-
-   For Static Site:
-
-   ```
-   📦 Next: Install the Static Site SDK
-   npm install --save-dev @vizzly-testing/static-site
-
-   Documentation: https://docs.vizzly.dev/integration/sdk/static-site/overview
-   ```
-
-   For JavaScript:
-
-   ```
-   📦 Next: Use the JavaScript SDK (already included with the CLI)
-
-   Documentation: https://docs.vizzly.dev/integration/sdk/javascript/overview
-   ```
-
-   **End with this context summary:**
-
-   ```
-   ✅ Setup Complete
-
-   What was accomplished:
-   - Vizzly CLI installed
-   - Configuration file created (vizzly.config.js)
-   - .vizzly/ added to .gitignore
-   - Environment variable instructions provided
-
-   What's next:
-   - Install the recommended SDK (see above)
-   - Add screenshot capture to your tests (if needed)
-   - Run `vizzly tdd start` to test locally
-
-   [For Claude: The CLI is now installed and configured. When the user returns saying they installed the SDK, help them integrate it into their tests and start capturing screenshots. The workflow is: install SDK → add screenshot calls to tests → run vizzly tdd to verify locally.]
-   ```
-
-## What NOT to Do
-
-- Do not modify their test files
-- Do not generate example test code
-- Do not make assumptions about their test framework
-- Do not create new test files
-
-## What to Provide
-
-- Installation commands
-- Configuration file creation
-- Environment setup guidance
-- Links to documentation
-- Next steps for integration
-
-Let the user integrate Vizzly into their existing tests themselves. Vizzly works with any test framework that can capture screenshots.

package/claude-plugin/commands/suggest-screenshots.md

@@ -1,111 +0,0 @@
----
-description: Analyze test files and suggest where visual screenshots would be valuable
----
-
-# Suggest Screenshot Opportunities
-
-Analyze existing test files to identify ideal locations for visual regression testing.
-
-## Process
-
-1. **Detect SDK type** (same logic as setup command)
-
-   **If Storybook detected** (`@storybook/*` in package.json or `.storybook/` directory):
-   - Inform user that Storybook SDK auto-discovers all stories
-   - No manual screenshot calls needed
-   - Exit early
-
-   **If Static Site detected** (build directories like `dist/`, `build/`, `.next/out/` or static site generators):
-   - Inform user that Static Site SDK auto-discovers all pages
-   - No manual screenshot calls needed
-   - Exit early
-
-   **Otherwise continue** with test file analysis below.
-
-2. **Ask user for test directory** if not obvious (e.g., `tests/`, `e2e/`, `__tests__/`, `spec/`)
-
-3. **Find test files** using glob patterns:
-   - `**/*.test.{js,ts,jsx,tsx}`
-   - `**/*.spec.{js,ts,jsx,tsx}`
-   - `**/e2e/**/*.{js,ts}`
-
-   **IMPORTANT: Exclude these directories:**
-   - `node_modules/`
-   - `dist/`, `build/`, `out/`
-   - `.next/`, `.nuxt/`, `.vite/`
-   - `coverage/`, `.nyc_output/`
-   - `vendor/`
-   - Any hidden directories (`.*/`)
-
-   Use the Glob tool with explicit exclusion or filter results to avoid these directories.
-
-4. **Analyze test files** looking for:
-   - Page navigations (`.goto()`, `.visit()`, `navigate()`)
-   - User interactions before assertions (`.click()`, `.type()`, `.fill()`)
-   - Component rendering (React Testing Library, etc.)
-   - Visual assertions or wait conditions
-
-5. **Suggest screenshot points** where:
-   - After page loads or navigations
-   - After key user interactions
-   - Before visual assertions
-   - At different viewport sizes
-   - For different user states (logged in/out, etc.)
-
-6. **Provide code examples** specific to their test framework:
-
-   **Playwright:**
-
-   ```javascript
-   import { vizzlyScreenshot } from '@vizzly-testing/cli/client';
-
-   // After page navigation
-   await page.goto('/dashboard');
-   await vizzlyScreenshot('dashboard-logged-in', await page.screenshot(), {
-     browser: 'chrome',
-     viewport: '1920x1080'
-   });
-   ```
-
-   **Cypress:**
-
-   ```javascript
-   cy.visit('/login');
-   cy.screenshot('login-page');
-   // Then add vizzlyScreenshot in custom command
-   ```
-
-## Output Format
-
-```
-Found 8 potential screenshot opportunities in your tests:
-
-tests/e2e/auth.spec.js:
-  Line 15: After login page navigation
-    Suggested screenshot: 'login-page'
-    Reason: Page load after navigation
-
-  Line 28: After successful login
-    Suggested screenshot: 'dashboard-authenticated'
-    Reason: User state change (logged in)
-
-tests/e2e/checkout.spec.js:
-  Line 42: Shopping cart with items
-    Suggested screenshot: 'cart-with-items'
-    Reason: Visual state after user interaction
-
-  Line 67: Checkout confirmation page
-    Suggested screenshot: 'order-confirmation'
-    Reason: Final state of user flow
-
-Example integration for Playwright:
-[Provide code example specific to their test]
-```
-
-## Important Notes
-
-- **Do NOT modify test files**
-- **Do NOT create new test files**
-- Only provide suggestions and examples
-- Let the user decide where to add screenshots
-- Respect their test framework and structure

package/claude-plugin/mcp/vizzly-docs-server/README.md

@@ -1,95 +0,0 @@
-# Vizzly Docs MCP Server
-
-MCP server that provides Claude Code with easy access to Vizzly documentation.
-
-## How It Works
-
-This server fetches documentation from the deployed `docs.vizzly.dev` site, making it easy for LLMs to:
-- Browse all available docs
-- Search documentation by keyword
-- Retrieve full markdown content
-- Understand the documentation structure
-
-## Tools
-
-### `list_docs`
-List all available documentation pages with optional category filtering.
-
-**Arguments:**
-- `category` (optional): Filter by category (e.g., "Integration > CLI", "Features")
-
-**Example:**
-```javascript
-list_docs({ category: "CLI" })
-```
-
-### `get_doc`
-Get the full markdown content of a specific documentation page.
-
-**Arguments:**
-- `path` (required): The document path (e.g., "integration/cli/overview.mdx") or slug (e.g., "integration/cli/overview")
-
-**Example:**
-```javascript
-get_doc({ path: "integration/cli/tdd-mode" })
-```
-
-### `search_docs`
-Search documentation by keyword. Searches in titles, descriptions, and categories.
-
-**Arguments:**
-- `query` (required): Search query
-- `limit` (optional): Maximum number of results (default: 10)
-
-**Example:**
-```javascript
-search_docs({ query: "parallel builds", limit: 5 })
-```
-
-### `get_sidebar`
-Get the complete sidebar navigation structure.
-
-**Example:**
-```javascript
-get_sidebar()
-```
-
-## Architecture
-
-The server works in a hybrid model:
-1. **Index** - Fetches a pre-built JSON index from `docs.vizzly.dev/api/mcp-index.json`
-2. **Content** - Fetches individual doc content on-demand from `docs.vizzly.dev/api/content/{path}`
-3. **Caching** - Index is cached for 5 minutes to minimize network requests
-
-This approach ensures:
-- Fast browsing/searching (uses cached index)
-- Always up-to-date content (fetched from live site)
-- Minimal network overhead
-- No local file dependencies
-
-## Data Flow
-
-```
-Claude Code
-    ↓
-MCP Server (this)
-    ↓
-docs.vizzly.dev API
-    ↓
-Statically generated at build time (Astro)
-```
-
-## Development
-
-To test the server locally:
-
-```bash
-# The server is automatically loaded by Claude Code when the plugin is active
-# Check .mcp.json for configuration
-```
-
-## Files
-
-- `index.js` - Main MCP server implementation
-- `docs-fetcher.js` - Utilities for fetching and searching docs
-- `README.md` - This file

package/claude-plugin/mcp/vizzly-docs-server/docs-fetcher.js

@@ -1,110 +0,0 @@
-/**
- * Fetches documentation from docs.vizzly.dev
- */
-
-let BASE_URL = 'https://docs.vizzly.dev';
-let INDEX_URL = `${BASE_URL}/api/mcp-index.json`;
-
-/**
- * Fetch the documentation index
- */
-export async function fetchDocsIndex() {
-  try {
-    let response = await fetch(INDEX_URL);
-
-    if (!response.ok) {
-      throw new Error(`Failed to fetch docs index: ${response.status} ${response.statusText}`);
-    }
-
-    let index = await response.json();
-    return index;
-  } catch (error) {
-    throw new Error(`Failed to load documentation index: ${error.message}`);
-  }
-}
-
-/**
- * Fetch the content of a specific document
- */
-export async function fetchDocContent(path) {
-  // Normalize path (remove leading slash, ensure it doesn't end with .md/.mdx)
-  let cleanPath = path.replace(/^\//, '').replace(/\.(mdx?|md)$/, '');
-
-  let contentUrl = `${BASE_URL}/api/content/${cleanPath}`;
-
-  try {
-    let response = await fetch(contentUrl);
-
-    if (!response.ok) {
-      // Try with .mdx extension if not found
-      if (response.status === 404 && !path.endsWith('.mdx')) {
-        contentUrl = `${BASE_URL}/api/content/${cleanPath}.mdx`;
-        response = await fetch(contentUrl);
-      }
-
-      if (!response.ok) {
-        throw new Error(`Document not found: ${path} (${response.status})`);
-      }
-    }
-
-    let content = await response.text();
-    return content;
-  } catch (error) {
-    throw new Error(`Failed to fetch document content: ${error.message}`);
-  }
-}
-
-/**
- * Search documents by query
- * Simple client-side search through titles and descriptions
- */
-export function searchDocs(docs, query, limit = 10) {
-  let lowerQuery = query.toLowerCase();
-  let terms = lowerQuery.split(/\s+/);
-
-  let results = docs
-    .map(doc => {
-      let titleLower = doc.title.toLowerCase();
-      let descLower = (doc.description || '').toLowerCase();
-      let categoryLower = doc.category.toLowerCase();
-
-      let score = 0;
-
-      // Exact phrase match in title (highest score)
-      if (titleLower.includes(lowerQuery)) {
-        score += 10;
-      }
-
-      // Exact phrase match in description
-      if (descLower.includes(lowerQuery)) {
-        score += 5;
-      }
-
-      // Exact phrase match in category
-      if (categoryLower.includes(lowerQuery)) {
-        score += 3;
-      }
-
-      // Individual term matches
-      for (let term of terms) {
-        if (titleLower.includes(term)) score += 3;
-        if (descLower.includes(term)) score += 1;
-        if (categoryLower.includes(term)) score += 0.5;
-      }
-
-      return { doc, score };
-    })
-    .filter(result => result.score > 0)
-    .sort((a, b) => b.score - a.score)
-    .slice(0, limit);
-
-  // Normalize scores to 0-1 range
-  if (results.length > 0) {
-    let maxScore = results[0].score;
-    for (let result of results) {
-      result.score = result.score / maxScore;
-    }
-  }
-
-  return results;
-}