@lifeonlars/prime-yggdrasil 0.2.4 → 0.2.6

package/README.md

@@ -158,13 +158,29 @@ npm run build
 
 ### Scripts
 ```bash
-npm run dev                 # Start Storybook
-npm run build              # Build library
-npm run test:contrast      # Test color contrast
+npm run storybook          # Start Storybook development server
+npm run build              # Build library package
+npm run build-storybook    # Build static Storybook for deployment
+npm run test:contrast      # Test color contrast (APCA)
 npm run test:themes        # Validate theme structure
+npm run lint               # Lint TypeScript/JavaScript
 npm run lint:css           # Lint CSS files
+npm run chromatic          # Run visual regression tests
 ```
 
+### Testing
+
+**Storybook Built-in Testing:**
+- **Play functions** - Interactive tests run automatically when viewing stories
+- **Accessibility tests** - `@storybook/addon-a11y` checks components for a11y violations
+- **Visual regression** - Chromatic integration for catching visual changes
+
+**CI/CD Pipeline:**
+- GitHub Actions runs on every push/PR
+- Validates linting, builds, and accessibility
+- Chromatic visual regression testing (on push to main/master)
+- See [`.github/workflows/ci.yml`](.github/workflows/ci.yml) for details
+
 ## 📊 Project Stats
 
 - **Semantic Tokens**: 727 color replacements (96% coverage)

package/docs/AI-AGENT-GUIDE.md

@@ -542,6 +542,46 @@ Need: Date picker
 2. Copy: Basic example code
 3. Adapt: Add semantic token styling if needed
 4. Test: In both light and dark modes
+5. Verify: Check Storybook for play function tests and a11y violations
+```
+
+## 🧪 Testing Your Implementation
+
+When implementing components with Yggdrasil:
+
+**1. Visual Testing (Automatic)**
+- View your story in Storybook
+- Check both light and dark modes (use theme toggle)
+- Watch for automatic accessibility violations in the a11y panel
+
+**2. Interactive Testing (Play Functions)**
+- Stories with play functions test automatically when viewed
+- Check the Interactions panel for test results
+- See `Button.stories.tsx` for examples of play functions
+
+**3. Accessibility (Built-in)**
+- `@storybook/addon-a11y` checks for violations automatically
+- Review the Accessibility panel for any issues
+- Violations are color-coded by severity
+
+**4. Visual Regression (Chromatic)**
+- Run `npm run chromatic` to catch visual changes
+- CI automatically runs Chromatic on push to main/master
+- Review changes in Chromatic dashboard before approving
+
+**Example Play Function:**
+```tsx
+import { expect, within } from 'storybook/test';
+
+export const Primary: Story = {
+  args: { label: 'Click Me' },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole('button');
+    await expect(button).toBeInTheDocument();
+    await expect(button).toHaveTextContent('Click Me');
+  },
+};
 ```
 
 ## 🏗️ Creating Local Blocks (Project-Specific)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifeonlars/prime-yggdrasil",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "type": "module",
   "description": "AI-agent-friendly PrimeReact design system for component-driven development with semantic tokens and dark mode support",
   "keywords": [
@@ -59,9 +59,6 @@
     "test:contrast:watch": "vitest tests/contrast.test.ts",
     "test:themes": "node scripts/validate-themes.js",
     "audit:foundation": "node scripts/audit-foundation-usage.js",
-    "test:components": "playwright test",
-    "test:components:ui": "playwright test --ui",
-    "test:components:headed": "playwright test --headed",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "chromatic": "npx chromatic --project-token=chpt_f57d218f413ed30"
@@ -79,7 +76,6 @@
     "@storybook/addon-a11y": "^10.1.11",
     "@storybook/addon-docs": "^10.1.11",
     "@storybook/addon-onboarding": "^10.1.11",
-    "@storybook/addon-vitest": "^10.1.11",
     "@storybook/react-vite": "^10.1.11",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.1",
@@ -100,7 +96,6 @@
     "eslint-plugin-storybook": "^10.1.11",
     "globals": "^16.5.0",
     "jsdom": "^27.4.0",
-    "playwright": "^1.57.0",
     "primeflex": "^4.0.0",
     "primeicons": "^7.0.0",
     "primereact": "^10.9.7",