@a11ypros/a11y-ui-components 1.0.1 → 1.0.3

package/DEPLOYMENT.md

@@ -1,154 +0,0 @@
-# Deployment Guide for ui.a11ypros.com
-
-This guide covers deploying the component library and Storybook to Netlify at `ui.a11ypros.com`.
-
-## What's Configured
-
-✅ **Netlify Configuration** (`netlify.toml`)
-- Builds Storybook and Next.js app
-- Serves Storybook at `/storybook`
-- Routes API calls to Netlify Functions
-
-✅ **Next.js Static Export**
-- Configured for static site generation
-- Outputs to `apps/web/out`
-
-✅ **Storybook Build**
-- Builds to `apps/web/public/storybook-static`
-- Accessible at `ui.a11ypros.com/storybook`
-
-✅ **Netlify Function**
-- Audit API converted to serverless function
-- Located at `netlify/functions/audit.ts`
-- Accessible via `/api/audit` (auto-redirected)
-
-## Deployment Steps
-
-### 1. Connect Repository to Netlify
-
-1. Go to [Netlify Dashboard](https://app.netlify.com)
-2. Click "Add new site" → "Import an existing project"
-3. Connect your Git provider and select this repository
-
-### 2. Configure Build Settings
-
-Netlify should auto-detect `netlify.toml`, but verify:
-- **Base directory:** `.` (root)
-- **Build command:** `npm install && npm run build-storybook && npm run build --workspace=apps/web`
-- **Publish directory:** `apps/web/out`
-
-### 3. Set Environment Variables
-
-Go to **Site settings → Environment variables** and add:
-- `ANTHROPIC_API_KEY` - Your Anthropic API key for the audit function
-
-### 4. Configure Custom Domain
-
-1. Go to **Site settings → Domain management**
-2. Click "Add custom domain"
-3. Enter `ui.a11ypros.com`
-4. Follow Netlify's DNS instructions:
-   - Add a **CNAME** record at your domain provider:
-     ```
-     Type: CNAME
-     Name: ui
-     Value: [your-netlify-site-name].netlify.app
-     ```
-5. Wait for DNS propagation (5-60 minutes)
-
-### 5. Deploy
-
-- Netlify will automatically deploy on every push to your main branch
-- Or click "Deploy site" to deploy manually
-
-## URLs After Deployment
-
-- **Main App:** `https://ui.a11ypros.com`
-- **Storybook:** `https://ui.a11ypros.com/storybook`
-- **Audit API:** `https://ui.a11ypros.com/api/audit` (POST)
-
-## How It Works
-
-1. **Build Process:**
-   - Installs dependencies
-   - Builds Storybook → `apps/web/public/storybook-static`
-   - Builds Next.js app → `apps/web/out` (includes Storybook from public/)
-
-2. **Routing:**
-   - `/storybook/*` → Served from `/storybook-static/*`
-   - `/api/audit` → Redirected to `/.netlify/functions/audit`
-   - `/*` → Next.js SPA routes
-
-3. **Netlify Function:**
-   - Serverless function handles the audit API
-   - Uses `ANTHROPIC_API_KEY` environment variable
-   - Supports CORS for cross-origin requests
-
-## Troubleshooting
-
-### Build Fails
-
-- Check Node.js version (should be 18+)
-- Verify all dependencies are in `package.json`
-- Check build logs in Netlify dashboard
-
-### Storybook Not Loading
-
-- Verify Storybook build completed successfully
-- Check that `apps/web/public/storybook-static` exists
-- Verify redirect rules in `netlify.toml`
-
-### API Not Working
-
-- Ensure `ANTHROPIC_API_KEY` is set in Netlify environment variables
-- Check Netlify Function logs in dashboard
-- Verify the function is deployed (check Functions tab)
-
-### DNS Issues
-
-- Wait for DNS propagation (can take up to 48 hours, usually 5-60 minutes)
-- Verify CNAME record is correct
-- Check DNS propagation with `dig ui.a11ypros.com`
-
-## Local Testing
-
-Test the build locally before deploying:
-
-```bash
-# Install dependencies
-npm install
-
-# Build Storybook
-npm run build-storybook
-
-# Build Next.js app
-npm run build --workspace=apps/web
-
-# Test locally (optional)
-npx serve apps/web/out
-```
-
-Visit `http://localhost:3000` for the app and `http://localhost:3000/storybook` for Storybook.
-
-## File Structure
-
-```
-├── netlify.toml              # Netlify configuration
-├── netlify/
-│   └── functions/
-│       └── audit.ts          # Netlify Function for audit API
-├── apps/
-│   └── web/
-│       ├── public/
-│       │   └── storybook-static/  # Storybook build output
-│       └── out/                  # Next.js build output
-└── package.json              # Root dependencies
-```
-
-## Notes
-
-- The Next.js app uses static export, so no server-side features
-- API routes are converted to Netlify Functions
-- Storybook is served as static files alongside the app
-- All routes are client-side (SPA mode)
-

package/apps/web/app/(docs)/audit/audit.css

@@ -1,269 +0,0 @@
-.audit-page {
-  min-height: 100vh;
-  padding: var(--spacing-6, 1.5rem);
-  background-color: var(--color-background-secondary, #fafafa);
-
-
-  /* Override design system colors to match your brand */
-  --color-primary-500: #0e8168; /* Your primary teal color */
-  --color-primary-600: #075985; /* Darker shade for hover */
-  --color-primary-700: #0369a1; /* Even darker for active */
-}
-
-.audit-container {
-  max-width: 64rem; /* 1024px */
-  margin: 0 auto;
-}
-
-.audit-header {
-  margin-bottom: var(--spacing-8, 2rem);
-}
-
-.audit-header-top {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: var(--spacing-4, 1rem);
-  margin-bottom: var(--spacing-4, 1rem);
-}
-
-.audit-header-logo {
-  flex-shrink: 0;
-}
-
-.audit-header h1 {
-  font-size: var(--font-size-3xl, 1.875rem);
-  font-weight: var(--font-weight-bold, 700);
-  margin-bottom: var(--spacing-4, 1rem);
-  color: var(--color-text-primary, #171717);
-}
-
-.audit-header p {
-  font-size: var(--font-size-lg, 1.125rem);
-  color: var(--color-text-secondary, #525252);
-  line-height: var(--line-height-relaxed, 1.625);
-}
-
-.audit-input-section {
-  background-color: var(--color-background-default, #ffffff);
-  padding: var(--spacing-6, 1.5rem);
-  border-radius: 0.5rem;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-  margin-bottom: var(--spacing-6, 1.5rem);
-}
-
-.audit-label {
-  display: block;
-  font-size: var(--font-size-base, 1rem);
-  font-weight: var(--font-weight-semibold, 600);
-  color: var(--color-text-primary, #171717);
-  margin-bottom: var(--spacing-2, 0.5rem);
-}
-
-.audit-textarea {
-  width: 100%;
-  padding: var(--spacing-3, 0.75rem) var(--spacing-4, 1rem);
-  font-family: var(--font-family-mono, Menlo, Monaco, 'Courier New', monospace);
-  font-size: var(--font-size-sm, 0.875rem);
-  line-height: var(--line-height-relaxed, 1.625);
-  color: var(--color-text-primary, #171717);
-  background-color: var(--color-background-default, #ffffff);
-  border: 1px solid var(--color-border-default, #bbbbbb);
-  border-radius: 0.375rem;
-  resize: vertical;
-  transition: border-color var(--motion-duration-normal, 200ms) var(--motion-easing-ease-out, cubic-bezier(0, 0, 0.2, 1));
-}
-
-.audit-page .btn--primary {
-  background-color: var(--color-primary-500);
-  border-color: var(--color-primary-500);
-}
-
-.audit-page .btn--primary:hover:not(:disabled) {
-  background-color: var(--color-primary-600);
-  border-color: var(--color-primary-600);
-}
-
-.audit-page .btn--primary:focus-visible {
-  outline-color: var(--color-primary-500);
-  box-shadow: 0 0 0 3px rgba(14, 129, 104, 0.2); /* Adjust to match your primary */
-}
-
-.audit-textarea:focus {
-  outline: none;
-  border-color: var(--color-border-focus, #0ea5e9);
-  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
-}
-
-.audit-textarea:focus-visible {
-  outline: 2px solid var(--color-border-focus, #0ea5e9);
-  outline-offset: 2px;
-}
-
-.audit-help-text {
-  font-size: var(--font-size-sm, 0.875rem);
-  color: var(--color-text-secondary, #525252);
-  margin-top: var(--spacing-2, 0.5rem);
-  margin-bottom: var(--spacing-4, 1rem);
-}
-
-.audit-error {
-  padding: var(--spacing-4, 1rem);
-  background-color: rgba(239, 68, 68, 0.1);
-  border: 1px solid var(--color-error-500, #ef4444);
-  border-radius: 0.375rem;
-  color: var(--color-error-700, #b91c1c);
-  margin-bottom: var(--spacing-6, 1.5rem);
-}
-
-.audit-results {
-  background-color: var(--color-background-default, #ffffff);
-  padding: var(--spacing-6, 1.5rem);
-  border-radius: 0.5rem;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-}
-
-.audit-results h2 {
-  font-size: var(--font-size-2xl, 1.5rem);
-  font-weight: var(--font-weight-semibold, 600);
-  margin-bottom: var(--spacing-4, 1rem);
-  color: var(--color-text-primary, #171717);
-}
-
-.audit-summary {
-  font-size: var(--font-size-lg, 1.125rem);
-  color: var(--color-text-secondary, #525252);
-  margin-bottom: var(--spacing-6, 1.5rem);
-  padding-bottom: var(--spacing-4, 1rem);
-  border-bottom: 1px solid var(--color-border-default, #bbbbbb);
-}
-
-.audit-success {
-  padding: var(--spacing-6, 1.5rem);
-  background-color: rgba(34, 197, 94, 0.1);
-  border: 1px solid var(--color-success-500, #22c55e);
-  border-radius: 0.375rem;
-  color: var(--color-success-700, #15803d);
-  text-align: center;
-  font-size: var(--font-size-lg, 1.125rem);
-}
-
-.audit-issues {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-6, 1.5rem);
-}
-
-.audit-sc-group {
-  border: 1px solid var(--color-border-default, #bbbbbb);
-  border-radius: 0.375rem;
-  padding: var(--spacing-4, 1rem);
-}
-
-.audit-sc-title {
-  font-size: var(--font-size-xl, 1.25rem);
-  font-weight: var(--font-weight-semibold, 600);
-  color: var(--color-text-primary, #171717);
-  margin-bottom: var(--spacing-4, 1rem);
-}
-
-.audit-sc-count {
-  font-weight: var(--font-weight-normal, 400);
-  color: var(--color-text-secondary, #525252);
-}
-
-.audit-issue {
-  border-left: 4px solid;
-  padding: var(--spacing-3, 0.75rem);
-  margin-bottom: var(--spacing-3, 0.75rem);
-  background-color: var(--color-background-secondary, #fafafa);
-  border-radius: 0.25rem;
-}
-
-.audit-issue--error {
-  border-left-color: var(--color-error-500, #ef4444);
-}
-
-.audit-issue--warning {
-  border-left-color: var(--color-warning-500, #f59e0b);
-}
-
-.audit-issue--info {
-  border-left-color: var(--color-primary-500, #0ea5e9);
-}
-
-.audit-issue-header {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-3, 0.75rem);
-  background: none;
-  border: none;
-  padding: 0;
-  cursor: pointer;
-  text-align: left;
-}
-
-.audit-severity-badge {
-  display: inline-block;
-  padding: var(--spacing-1, 0.25rem) var(--spacing-2, 0.5rem);
-  border-radius: 0.25rem;
-  color: var(--color-white, #ffffff);
-  font-size: var(--font-size-xs, 0.75rem);
-  font-weight: var(--font-weight-semibold, 600);
-  text-transform: uppercase;
-  flex-shrink: 0;
-}
-
-.audit-issue-message {
-  flex: 1;
-  font-weight: var(--font-weight-medium, 500);
-  color: var(--color-text-primary, #171717);
-}
-
-.audit-issue-toggle {
-  color: var(--color-text-secondary, #525252);
-  font-size: var(--font-size-sm, 0.875rem);
-  flex-shrink: 0;
-}
-
-.audit-issue-details {
-  margin-top: var(--spacing-3, 0.75rem);
-  padding-top: var(--spacing-3, 0.75rem);
-  border-top: 1px solid var(--color-border-default, #bbbbbb);
-}
-
-.audit-issue-suggestion {
-  margin-bottom: var(--spacing-3, 0.75rem);
-  color: var(--color-text-primary, #171717);
-  line-height: var(--line-height-relaxed, 1.625);
-}
-
-.audit-issue-code {
-  margin-top: var(--spacing-3, 0.75rem);
-}
-
-.audit-issue-code strong {
-  display: block;
-  margin-bottom: var(--spacing-2, 0.5rem);
-  color: var(--color-text-primary, #171717);
-}
-
-/* High contrast mode support */
-@media (prefers-contrast: high) {
-  .audit-issue {
-    border-left-width: 6px;
-  }
-  
-  .audit-textarea:focus-visible {
-    outline-width: 3px;
-  }
-}
-
-/* Reduced motion */
-@media (prefers-reduced-motion: reduce) {
-  .audit-textarea {
-    transition: none;
-  }
-}
-

package/apps/web/app/(docs)/audit/page.tsx

@@ -1,271 +0,0 @@
-'use client'
-
-import { useState, useEffect } from 'react'
-import dynamic from 'next/dynamic'
-import Image from 'next/image'
-import { Button } from '@a11ypros/a11y-ui-components'
-import './audit.css'
-
-// Dynamically import SyntaxHighlighter to avoid SSR/build issues
-const SyntaxHighlighter = dynamic(
-  () => import('react-syntax-highlighter').then((mod) => mod.Prism as any),
-  { ssr: false }
-)
-
-interface AuditIssue {
-  wcagSC: string
-  severity: 'error' | 'warning' | 'info'
-  message: string
-  suggestion: string
-  codeSuggestion?: string
-}
-
-interface AuditResponse {
-  issues: AuditIssue[]
-  summary: string
-}
-
-export default function AuditPage() {
-  const [code, setCode] = useState('')
-  const [loading, setLoading] = useState(false)
-  const [result, setResult] = useState<AuditResponse | null>(null)
-  const [error, setError] = useState<string | null>(null)
-  const [expandedIssues, setExpandedIssues] = useState<Set<number>>(new Set())
-  const [codeStyle, setCodeStyle] = useState<any>(null)
-
-  // Load the style on client side only
-  useEffect(() => {
-    import('react-syntax-highlighter/dist/cjs/styles/prism').then((mod) => {
-      setCodeStyle(mod.vscDarkPlus)
-    })
-  }, [])
-
-  const handleAudit = async () => {
-    if (!code.trim()) {
-      setError('Please enter JSX code to audit')
-      return
-    }
-
-    setLoading(true)
-    setError(null)
-    setResult(null)
-
-    try {
-      const response = await fetch('/api/audit', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({ code }),
-      })
-
-      if (!response.ok) {
-        const errorData = await response.json()
-        throw new Error(errorData.error || 'Failed to perform audit')
-      }
-
-      const data: AuditResponse = await response.json()
-      setResult(data)
-      // Expand all issues by default
-      setExpandedIssues(new Set(data.issues.map((_, i) => i)))
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'An error occurred')
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  const toggleIssue = (index: number) => {
-    const newExpanded = new Set(expandedIssues)
-    if (newExpanded.has(index)) {
-      newExpanded.delete(index)
-    } else {
-      newExpanded.add(index)
-    }
-    setExpandedIssues(newExpanded)
-  }
-
-  const getSeverityColor = (severity: string) => {
-    switch (severity) {
-      case 'error':
-        return 'var(--color-error-500, #ef4444)'
-      case 'warning':
-        return 'var(--color-warning-500, #f59e0b)'
-      case 'info':
-        return 'var(--color-primary-500, #0ea5e9)'
-      default:
-        return 'var(--color-neutral-500, #737373)'
-    }
-  }
-
-  const getSeverityLabel = (severity: string) => {
-    return severity.charAt(0).toUpperCase() + severity.slice(1)
-  }
-
-  // Group issues by WCAG SC
-  const groupedIssues = result?.issues.reduce((acc, issue, index) => {
-    if (!acc[issue.wcagSC]) {
-      acc[issue.wcagSC] = []
-    }
-    acc[issue.wcagSC].push({ ...issue, originalIndex: index })
-    return acc
-  }, {} as Record<string, Array<AuditIssue & { originalIndex: number }>>)
-
-  return (
-    <main className="audit-page">
-      <div className="audit-container">
-        <header className="audit-header">
-          <div className="audit-header-top">
-          <h1>AI Accessibility Audit Assistant</h1>
-            <div className="audit-header-logo">
-                <Image
-                  src="/logo.png"
-                  alt="A11y Pros Logo"
-                  width={150}
-                  height={25}
-                  priority
-                />
-            </div>
-           
-          </div>
-          <p>
-            Paste your JSX code snippet below to get an AI-powered accessibility review
-            based on WCAG 2.1 and 2.2 guidelines.
-          </p>
-        </header>
-
-        <div className="audit-input-section">
-          <label htmlFor="code-input" className="audit-label">
-            JSX Code Snippet
-          </label>
-          <textarea
-            id="code-input"
-            className="audit-textarea"
-            value={code}
-            onChange={(e) => setCode(e.target.value)}
-            placeholder="<button onClick={handleClick}>Click me</button>"
-            rows={12}
-            aria-describedby="code-input-help"
-          />
-          <p id="code-input-help" className="audit-help-text">
-            Enter your JSX/React component code to analyze for accessibility issues.
-          </p>
-          <Button
-            onClick={handleAudit}
-            loading={loading}
-            disabled={!code.trim() || loading}
-            variant="primary"
-            size="lg"
-            className='audit-button'
-          >
-            {loading ? 'Auditing...' : 'Run Accessibility Audit'}
-          </Button>
-        </div>
-
-        {error && (
-          <div className="audit-error" role="alert">
-            <strong>Error:</strong> {error}
-          </div>
-        )}
-
-        {result && (
-          <div className="audit-results">
-            <h2>Audit Results</h2>
-            <p className="audit-summary">{result.summary}</p>
-
-            {result.issues.length === 0 ? (
-              <div className="audit-success">
-                <p>✓ No accessibility issues found!</p>
-              </div>
-            ) : (
-              <div className="audit-issues">
-                {groupedIssues &&
-                  Object.entries(groupedIssues).map(([wcagSC, issues]) => (
-                    <div key={wcagSC} className="audit-sc-group">
-                      <h3 className="audit-sc-title">
-                        WCAG {wcagSC}
-                        <span className="audit-sc-count">
-                          {' '}
-                          ({issues.length} issue{issues.length !== 1 ? 's' : ''})
-                        </span>
-                      </h3>
-                      {issues.map((issue, idx) => {
-                        const globalIndex = issue.originalIndex
-                        const isExpanded = expandedIssues.has(globalIndex)
-                        return (
-                          <div
-                            key={globalIndex}
-                            className={`audit-issue audit-issue--${issue.severity}`}
-                          >
-                            <button
-                              className="audit-issue-header"
-                              onClick={() => toggleIssue(globalIndex)}
-                              aria-expanded={isExpanded}
-                              aria-controls={`issue-${globalIndex}`}
-                            >
-                              <span
-                                className="audit-severity-badge"
-                                style={{ backgroundColor: getSeverityColor(issue.severity) }}
-                              >
-                                {getSeverityLabel(issue.severity)}
-                              </span>
-                              <span className="audit-issue-message">{issue.message}</span>
-                              <span className="audit-issue-toggle" aria-hidden="true">
-                                {isExpanded ? '▼' : '▶'}
-                              </span>
-                            </button>
-                            {isExpanded && (
-                              <div
-                                id={`issue-${globalIndex}`}
-                                className="audit-issue-details"
-                              >
-                                <div className="audit-issue-suggestion">
-                                  <strong>Suggestion:</strong> {issue.suggestion}
-                                </div>
-                                {issue.codeSuggestion && (
-                                  <div className="audit-issue-code">
-                                    <strong>Code suggestion:</strong>
-                                    {codeStyle ? (
-                                      // @ts-expect-error - react-syntax-highlighter type issues with dynamic import
-                                      <SyntaxHighlighter
-                                        language="jsx"
-                                        style={codeStyle}
-                                        customStyle={{
-                                          marginTop: '0.5rem',
-                                          borderRadius: '0.375rem',
-                                          fontSize: '0.875rem',
-                                        }}
-                                      >
-                                        {issue.codeSuggestion}
-                                      </SyntaxHighlighter>
-                                    ) : (
-                                      <pre style={{ 
-                                        padding: '1rem', 
-                                        background: '#1e1e1e', 
-                                        color: '#d4d4d4', 
-                                        borderRadius: '0.375rem',
-                                        marginTop: '0.5rem',
-                                        fontSize: '0.875rem',
-                                        overflow: 'auto'
-                                      }}>
-                                        {issue.codeSuggestion}
-                                      </pre>
-                                    )}
-                                  </div>
-                                )}
-                              </div>
-                            )}
-                          </div>
-                        )
-                      })}
-                    </div>
-                  ))}
-              </div>
-            )}
-          </div>
-        )}
-      </div>
-    </main>
-  )
-}
-