@a11ypros/a11y-ui-components 1.0.1 → 1.0.2

package/apps/web/app/(docs)/components/button/page.tsx

@@ -1,49 +0,0 @@
-'use client'
-
-import { Button } from '@a11ypros/a11y-ui-components'
-
-export default function ButtonPage() {
-  return (
-    <main style={{ padding: '2rem' }}>
-      <h1>Button Component</h1>
-      <p>Accessible button component with full keyboard support.</p>
-      
-      <section style={{ marginTop: '2rem' }}>
-        <h2>Variants</h2>
-        <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
-          <Button variant="primary">Primary</Button>
-          <Button variant="secondary">Secondary</Button>
-          <Button variant="ghost">Ghost</Button>
-          <Button variant="danger">Danger</Button>
-        </div>
-      </section>
-
-      <section style={{ marginTop: '2rem' }}>
-        <h2>Sizes</h2>
-        <div style={{ display: 'flex', gap: '1rem', alignItems: 'center', flexWrap: 'wrap' }}>
-          <Button size="sm">Small</Button>
-          <Button size="md">Medium</Button>
-          <Button size="lg">Large</Button>
-        </div>
-      </section>
-
-      <section style={{ marginTop: '2rem' }}>
-        <h2>States</h2>
-        <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
-          <Button loading>Loading</Button>
-          <Button disabled>Disabled</Button>
-        </div>
-      </section>
-
-      <section style={{ marginTop: '2rem' }}>
-        <h2>Accessibility</h2>
-        <ul>
-          <li>WCAG 2.1.1 Keyboard: Full keyboard support (Enter/Space)</li>
-          <li>WCAG 2.4.7 Focus Visible: Clear focus indicators</li>
-          <li>WCAG 4.1.2 Name, Role, Value: Proper ARIA attributes</li>
-        </ul>
-      </section>
-    </main>
-  )
-}
-

package/apps/web/app/(docs)/components/form/page.tsx

@@ -1,92 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-import { Input, Textarea, Select, Checkbox, Radio, Fieldset, Label } from '@a11ypros/a11y-ui-components'
-
-export default function FormPage() {
-  const [email, setEmail] = useState('')
-  const [message, setMessage] = useState('')
-  const [country, setCountry] = useState('')
-  const [agree, setAgree] = useState(false)
-  const [size, setSize] = useState('')
-
-  return (
-    <main style={{ padding: '2rem' }}>
-      <h1>Form Components</h1>
-      <p>Accessible form components with proper labels and ARIA attributes.</p>
-      
-      <section style={{ marginTop: '2rem' }}>
-        <h2>Input</h2>
-        <Input
-          label="Email address"
-          type="email"
-          value={email}
-          onChange={(e) => setEmail(e.target.value)}
-          placeholder="you@example.com"
-          required
-        />
-      </section>
-
-      <section style={{ marginTop: '2rem' }}>
-        <h2>Textarea</h2>
-        <Textarea
-          label="Message"
-          value={message}
-          onChange={(e) => setMessage(e.target.value)}
-          maxLength={500}
-          showCount
-        />
-      </section>
-
-      <section style={{ marginTop: '2rem' }}>
-        <h2>Select</h2>
-        <Select
-          label="Country"
-          options={[
-            { value: 'us', label: 'United States' },
-            { value: 'ca', label: 'Canada' },
-            { value: 'uk', label: 'United Kingdom' },
-          ]}
-          value={country}
-          onChange={(e) => setCountry(e.target.value)}
-        />
-      </section>
-
-      <section style={{ marginTop: '2rem' }}>
-        <h2>Checkbox</h2>
-        <Checkbox
-          id="agree"
-          label="I agree to the terms and conditions"
-          checked={agree}
-          onChange={(e) => setAgree(e.target.checked)}
-        />
-      </section>
-
-      <section style={{ marginTop: '2rem' }}>
-        <h2>Radio</h2>
-        <Radio
-          name="size"
-          label="Size"
-          options={[
-            { value: 's', label: 'Small' },
-            { value: 'm', label: 'Medium' },
-            { value: 'l', label: 'Large' },
-          ]}
-          value={size}
-          onChange={(e) => setSize(e.target.value)}
-        />
-      </section>
-
-      <section style={{ marginTop: '2rem' }}>
-        <h2>Accessibility</h2>
-        <ul>
-          <li>WCAG 1.3.1 Info and Relationships: Proper label-input association</li>
-          <li>WCAG 2.5.3 Label in Name: Label text matches accessible name</li>
-          <li>WCAG 4.1.2 Name, Role, Value: Proper ARIA attributes</li>
-          <li>WCAG 4.1.3 Status Messages: Error messages announced</li>
-        </ul>
-      </section>
-    </main>
-  )
-}
-

package/apps/web/app/(docs)/components/link/page.tsx

@@ -1,31 +0,0 @@
-'use client'
-
-import { Link } from '@a11ypros/a11y-ui-components'
-
-export default function LinkPage() {
-  return (
-    <main style={{ padding: '2rem' }}>
-      <h1>Link Component</h1>
-      <p>Accessible link component with external link detection.</p>
-      
-      <section style={{ marginTop: '2rem' }}>
-        <h2>Examples</h2>
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
-          <Link href="/components">Internal Link</Link>
-          <Link href="https://example.com" external>External Link</Link>
-          <Link href="#main-content" skip>Skip Link</Link>
-        </div>
-      </section>
-
-      <section style={{ marginTop: '2rem' }}>
-        <h2>Accessibility</h2>
-        <ul>
-          <li>WCAG 2.4.4 Link Purpose: Clear link text or aria-label</li>
-          <li>WCAG 2.4.7 Focus Visible: Clear focus indicators</li>
-          <li>WCAG 4.1.2 Name, Role, Value: Proper semantic HTML</li>
-        </ul>
-      </section>
-    </main>
-  )
-}
-

package/apps/web/app/(docs)/components/modal/page.tsx

@@ -1,41 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-import { Modal, Button } from '@a11ypros/a11y-ui-components'
-
-export default function ModalPage() {
-  const [isOpen, setIsOpen] = useState(false)
-
-  return (
-    <main style={{ padding: '2rem' }}>
-      <h1>Modal Component</h1>
-      <p>Accessible modal dialog with focus trap and keyboard support.</p>
-      
-      <section style={{ marginTop: '2rem' }}>
-        <h2>Example</h2>
-        <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
-        <Modal
-          isOpen={isOpen}
-          onClose={() => setIsOpen(false)}
-          title="Example Modal"
-        >
-          <p>This is a modal dialog. Press ESC to close or click outside.</p>
-          <div style={{ marginTop: '1rem' }}>
-            <Button onClick={() => setIsOpen(false)}>Close</Button>
-          </div>
-        </Modal>
-      </section>
-
-      <section style={{ marginTop: '2rem' }}>
-        <h2>Accessibility</h2>
-        <ul>
-          <li>WCAG 2.1.1 Keyboard: ESC key support, focus trap</li>
-          <li>WCAG 2.1.2 No Keyboard Trap: Focus returns to trigger</li>
-          <li>WCAG 2.4.3 Focus Order: Focus trapped within modal</li>
-          <li>WCAG 4.1.2 Name, Role, Value: ARIA modal pattern</li>
-        </ul>
-      </section>
-    </main>
-  )
-}
-

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

@@ -1,37 +0,0 @@
-'use client'
-
-import Link from 'next/link'
-import { Button, Link as DesignSystemLink } from '@a11ypros/a11y-ui-components'
-
-export default function ComponentsPage() {
-  return (
-    <main>
-      <h1>Design System Components</h1>
-      <p>Browse and test all accessible components in the design system.</p>
-      
-      <nav>
-        <h2>Components</h2>
-        <ul>
-          <li><Link href="/components/button">Button</Link></li>
-          <li><Link href="/components/link">Link</Link></li>
-          <li><Link href="/components/modal">Modal</Link></li>
-          <li><Link href="/components/form">Form Components</Link></li>
-          <li><Link href="/components/table">Data Table</Link></li>
-          <li><Link href="/components/toast">Toast</Link></li>
-          <li><Link href="/components/tabs">Tabs</Link></li>
-        </ul>
-      </nav>
-
-      <section>
-        <h2>Quick Examples</h2>
-        <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap', marginTop: '1rem' }}>
-          <Button variant="primary">Primary Button</Button>
-          <Button variant="secondary">Secondary Button</Button>
-          <Button variant="ghost">Ghost Button</Button>
-          <DesignSystemLink href="/audit">Go to Audit Tool</DesignSystemLink>
-        </div>
-      </section>
-    </main>
-  )
-}
-

package/apps/web/app/(docs)/components/table/page.tsx

@@ -1,54 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-import { DataTable } from '@a11ypros/a11y-ui-components'
-
-const sampleData = [
-  { id: '1', name: 'John Doe', email: 'john@example.com', role: 'Admin' },
-  { id: '2', name: 'Jane Smith', email: 'jane@example.com', role: 'User' },
-  { id: '3', name: 'Bob Johnson', email: 'bob@example.com', role: 'User' },
-]
-
-const columns = [
-  { key: 'name', header: 'Name', sortable: true },
-  { key: 'email', header: 'Email', sortable: true },
-  { key: 'role', header: 'Role', sortable: true },
-]
-
-export default function TablePage() {
-  const [selectedRows, setSelectedRows] = useState<string[]>([])
-  const [sortConfig, setSortConfig] = useState<{ column: string; direction: 'asc' | 'desc' } | undefined>()
-
-  return (
-    <main style={{ padding: '2rem' }}>
-      <h1>DataTable Component</h1>
-      <p>Accessible data table with keyboard navigation and sorting.</p>
-      
-      <section style={{ marginTop: '2rem' }}>
-        <h2>Example</h2>
-        <DataTable
-          data={sampleData}
-          columns={columns}
-          getRowId={(row) => row.id}
-          selectable
-          selectedRows={selectedRows}
-          onSelectionChange={setSelectedRows}
-          sortConfig={sortConfig}
-          onSortChange={(column, direction) => setSortConfig({ column, direction })}
-          caption="User list"
-        />
-      </section>
-
-      <section style={{ marginTop: '2rem' }}>
-        <h2>Accessibility</h2>
-        <ul>
-          <li>WCAG 1.3.1 Info and Relationships: Semantic table structure</li>
-          <li>WCAG 2.1.1 Keyboard: Arrow keys, Home/End navigation</li>
-          <li>WCAG 4.1.2 Name, Role, Value: Proper ARIA attributes</li>
-          <li>WCAG 4.1.3 Status Messages: Sort announcements</li>
-        </ul>
-      </section>
-    </main>
-  )
-}
-

package/apps/web/app/(docs)/components/tabs/page.tsx

@@ -1,61 +0,0 @@
-'use client'
-
-import { Tabs } from '@a11ypros/a11y-ui-components'
-
-export default function TabsPage() {
-  return (
-    <main style={{ padding: '2rem' }}>
-      <h1>Tabs Component</h1>
-      <p>Accessible tabs component with arrow key navigation.</p>
-      
-      <section style={{ marginTop: '2rem' }}>
-        <h2>Example</h2>
-        <Tabs
-          aria-label="Settings tabs"
-          items={[
-            {
-              id: 'general',
-              label: 'General',
-              content: (
-                <div>
-                  <h3>General Settings</h3>
-                  <p>Configure general application settings here.</p>
-                </div>
-              ),
-            },
-            {
-              id: 'account',
-              label: 'Account',
-              content: (
-                <div>
-                  <h3>Account Settings</h3>
-                  <p>Manage your account preferences.</p>
-                </div>
-              ),
-            },
-            {
-              id: 'privacy',
-              label: 'Privacy',
-              content: (
-                <div>
-                  <h3>Privacy Settings</h3>
-                  <p>Control your privacy and data settings.</p>
-                </div>
-              ),
-            },
-          ]}
-        />
-      </section>
-
-      <section style={{ marginTop: '2rem' }}>
-        <h2>Accessibility</h2>
-        <ul>
-          <li>WCAG 2.1.1 Keyboard: Arrow key navigation, Home/End support</li>
-          <li>WCAG 4.1.2 Name, Role, Value: ARIA tabs pattern</li>
-          <li>WCAG 2.4.3 Focus Order: Proper focus management</li>
-        </ul>
-      </section>
-    </main>
-  )
-}
-

package/apps/web/app/(docs)/components/toast/page.tsx

@@ -1,51 +0,0 @@
-'use client'
-
-import { ToastProvider, useToast } from '@a11ypros/a11y-ui-components'
-import { Button } from '@a11ypros/a11y-ui-components'
-
-function ToastDemo() {
-  const { addToast } = useToast()
-
-  return (
-    <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
-      <Button onClick={() => addToast({ message: 'Info message', type: 'info' })}>
-        Show Info Toast
-      </Button>
-      <Button onClick={() => addToast({ message: 'Success!', type: 'success' })}>
-        Show Success Toast
-      </Button>
-      <Button onClick={() => addToast({ message: 'Warning message', type: 'warning' })}>
-        Show Warning Toast
-      </Button>
-      <Button onClick={() => addToast({ message: 'Error occurred', type: 'error' })}>
-        Show Error Toast
-      </Button>
-    </div>
-  )
-}
-
-export default function ToastPage() {
-  return (
-    <main style={{ padding: '2rem' }}>
-      <h1>Toast Component</h1>
-      <p>Accessible toast notifications with ARIA live regions.</p>
-      
-      <section style={{ marginTop: '2rem' }}>
-        <h2>Examples</h2>
-        <ToastProvider>
-          <ToastDemo />
-        </ToastProvider>
-      </section>
-
-      <section style={{ marginTop: '2rem' }}>
-        <h2>Accessibility</h2>
-        <ul>
-          <li>WCAG 4.1.3 Status Messages: ARIA live region announcements</li>
-          <li>WCAG 2.1.1 Keyboard: ESC key support</li>
-          <li>WCAG 4.1.2 Name, Role, Value: Proper ARIA attributes</li>
-        </ul>
-      </section>
-    </main>
-  )
-}
-

package/apps/web/app/api/audit/route.ts

@@ -1,128 +0,0 @@
-import { NextRequest, NextResponse } from 'next/server'
-import Anthropic from '@anthropic-ai/sdk'
-
-const anthropic = new Anthropic({
-  apiKey: process.env.ANTHROPIC_API_KEY || '',
-})
-
-export interface AuditIssue {
-  wcagSC: string // WCAG Success Criterion (e.g., "1.3.1", "2.4.7")
-  severity: 'error' | 'warning' | 'info'
-  message: string
-  suggestion: string
-  codeSuggestion?: string
-}
-
-export interface AuditResponse {
-  issues: AuditIssue[]
-  summary: string
-}
-
-const WCAG_PROMPT = `You are an accessibility expert reviewing JSX/React code for WCAG 2.1 and 2.2 compliance.
-
-Analyze the provided JSX code snippet and identify accessibility issues. For each issue:
-1. Map it to the specific WCAG Success Criterion (SC) number (e.g., "1.3.1", "2.4.7", "4.1.2")
-2. Determine severity: "error" (violates WCAG), "warning" (may cause issues), or "info" (best practice)
-3. Provide a clear message explaining the issue
-4. Suggest how to fix it
-5. If applicable, provide corrected code
-
-Focus on:
-- Semantic HTML (1.3.1)
-- Keyboard accessibility (2.1.1, 2.1.2)
-- Focus management (2.4.7)
-- ARIA usage (4.1.2, 4.1.3)
-- Color contrast (1.4.3)
-- Form labels (2.5.3)
-- Status messages (4.1.3)
-
-Return your response as a JSON object with this structure:
-{
-  "issues": [
-    {
-      "wcagSC": "2.4.7",
-      "severity": "error",
-      "message": "Button lacks visible focus indicator",
-      "suggestion": "Add focus-visible styles with 2px outline",
-      "codeSuggestion": "button:focus-visible { outline: 2px solid #0ea5e9; }"
-    }
-  ],
-  "summary": "Found 3 issues: 2 errors, 1 warning"
-}
-
-Only return valid JSON, no markdown formatting.`
-
-export async function POST(request: NextRequest) {
-  try {
-    const { code } = await request.json()
-
-    if (!code || typeof code !== 'string') {
-      return NextResponse.json(
-        { error: 'Code snippet is required' },
-        { status: 400 }
-      )
-    }
-
-    if (!process.env.ANTHROPIC_API_KEY) {
-      return NextResponse.json(
-        { error: 'ANTHROPIC_API_KEY environment variable is not set' },
-        { status: 500 }
-      )
-    }
-
-    const message = await anthropic.messages.create({
-      model: 'claude-sonnet-4-20250514',
-      max_tokens: 4096,
-      messages: [
-        {
-          role: 'user',
-          content: `${WCAG_PROMPT}\n\nCode to review:\n\`\`\`jsx\n${code}\n\`\`\``,
-        },
-      ],
-    })
-
-    const content = message.content[0]
-    if (content.type !== 'text') {
-      throw new Error('Unexpected response type from Anthropic')
-    }
-
-    // Parse the JSON response
-    let auditResult: AuditResponse
-    try {
-      // Extract JSON from the response (handle markdown code blocks if present)
-      let jsonText = content.text.trim()
-      if (jsonText.startsWith('```')) {
-        jsonText = jsonText.replace(/^```(?:json)?\n/, '').replace(/\n```$/, '')
-      }
-      auditResult = JSON.parse(jsonText)
-    } catch (parseError) {
-      // If parsing fails, try to extract JSON from the text
-      const jsonMatch = content.text.match(/\{[\s\S]*\}/)
-      if (jsonMatch) {
-        auditResult = JSON.parse(jsonMatch[0])
-      } else {
-        throw new Error('Failed to parse audit response as JSON')
-      }
-    }
-
-    // Validate response structure
-    if (!auditResult.issues || !Array.isArray(auditResult.issues)) {
-      auditResult = {
-        issues: [],
-        summary: 'No issues found or invalid response format',
-      }
-    }
-
-    return NextResponse.json(auditResult)
-  } catch (error) {
-    console.error('Audit API error:', error)
-    return NextResponse.json(
-      {
-        error: 'Failed to perform accessibility audit',
-        message: error instanceof Error ? error.message : 'Unknown error',
-      },
-      { status: 500 }
-    )
-  }
-}
-

package/apps/web/app/layout.tsx

@@ -1,20 +0,0 @@
-import type { Metadata } from 'next'
-import './styles/globals.css'
-
-export const metadata: Metadata = {
-  title: 'Accessible Design System',
-  description: 'An accessible design system with AI-powered accessibility auditing',
-}
-
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
-  return (
-    <html lang="en">
-      <body>{children}</body>
-    </html>
-  )
-}
-

package/apps/web/app/page.tsx

@@ -1,17 +0,0 @@
-import Link from 'next/link'
-
-export default function Home() {
-  return (
-    <main>
-      <nav>
-        <ul>
-          <li><Link href="/components">Components</Link></li>
-          <li><Link href="/audit">AI Audit Assistant</Link></li>
-        </ul>
-      </nav>
-      <h1>Accessible Design System</h1>
-      <p>Welcome to the accessible design system documentation.</p>
-    </main>
-  )
-}
-

package/apps/web/app/styles/globals.css

@@ -1,5 +0,0 @@
-/* Import design system global styles */
-@import '../../../../packages/design-system/src/styles/global.css';
-
-/* App-specific global styles */
-

package/apps/web/next-env.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="next" />
-/// <reference types="next/image-types/global" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

package/apps/web/next.config.js

@@ -1,21 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  transpilePackages: ['@a11ypros/a11y-ui-components'],
-  // Enable static export for Netlify
-  output: 'export',
-  // Disable image optimization for static export
-  images: {
-    unoptimized: true,
-  },
-  // Increase static page generation timeout (default is 60s)
-  staticPageGenerationTimeout: 120,
-  webpack: (config) => {
-    config.resolve.alias = {
-      ...config.resolve.alias,
-    }
-    return config
-  },
-}
-
-module.exports = nextConfig
-

package/apps/web/package.json

@@ -1,28 +0,0 @@
-{
-  "name": "@apps/web",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
-  },
-  "dependencies": {
-    "@anthropic-ai/sdk": "^0.20.0",
-    "@a11ypros/a11y-ui-components": "*",
-    "next": "^14.1.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-syntax-highlighter": "^15.5.0",
-    "prismjs": "^1.29.0"
-  },
-  "devDependencies": {
-    "@types/node": "^20.11.5",
-    "@types/react": "^18.2.48",
-    "@types/react-dom": "^18.2.18",
-    "@types/react-syntax-highlighter": "^15.5.11",
-    "typescript": "^5.3.3"
-  }
-}
-

package/apps/web/public/_headers

@@ -1,17 +0,0 @@
-# Headers for Storybook - VERY permissive CSP to allow eval
-# IMPORTANT: Order matters - more specific paths must come first
-# The _headers file is processed AFTER netlify.toml, so this will override any CSP
-f# This CSP works for both local development and production
-
-# Storybook root - must come first to match /storybook before catch-all
-# 'unsafe-eval' must be in script-src (not default-src) for Storybook to work
-/storybook
-  Content-Security-Policy: default-src 'self' 'unsafe-inline' data: blob: http: https: ws: wss:; script-src 'self' 'unsafe-inline' 'unsafe-eval' data: blob: http: https:; style-src 'self' 'unsafe-inline' data: http: https:; img-src 'self' data: blob: http: https:; font-src 'self' data: http: https:; connect-src 'self' ws: wss: blob: http: https:; worker-src 'self' blob: http: https:; frame-src 'self' http: https:; frame-ancestors 'self';
-
-# Storybook sub-paths
-/storybook/*
-  Content-Security-Policy: default-src 'self' 'unsafe-inline' data: blob: http: https: ws: wss:; script-src 'self' 'unsafe-inline' 'unsafe-eval' data: blob: http: https:; style-src 'self' 'unsafe-inline' data: http: https:; img-src 'self' data: blob: http: https:; font-src 'self' data: http: https:; connect-src 'self' ws: wss: blob: http: https:; worker-src 'self' blob: http: https:; frame-src 'self' http: https:; frame-ancestors 'self';
-
-# Storybook static files
-/storybook-static/*
-  Content-Security-Policy: default-src 'self' 'unsafe-inline' data: blob: http: https: ws: wss:; script-src 'self' 'unsafe-inline' 'unsafe-eval' data: blob: http: https:; style-src 'self' 'unsafe-inline' data: http: https:; img-src 'self' data: blob: http: https:; font-src 'self' data: http: https:; connect-src 'self' ws: wss: blob: http: https:; worker-src 'self' blob: http: https:; frame-src 'self' http: https:; frame-ancestors 'self';